/* ========================================
   LMS SWISS - BLACK GOLD WHITE THEME
   Professional Dark Theme with Gold Accents
   ======================================== */

/* ========================================
   CSS VARIABLES (Custom Properties)
   ======================================== */
:root {
    /* Primary Color Palette - Black, Gold, White */
    --theme-primary: #FFD700;           /* Gold */
    --theme-primary-dark: #B8860B;      /* Dark Gold */
    --theme-primary-light: #FFED4E;      /* Light Gold */
    --theme-secondary: #000000;         /* Pure Black */
    --theme-secondary-light: #1a1a1a;  /* Dark Gray */
    --theme-accent: #333333;            /* Charcoal */
    --theme-accent-light: #4a4a4a;     /* Medium Gray */
    
    /* Background Colors */
    --theme-bg-primary: #000000;        /* Main Black */
    --theme-bg-secondary: #1a1a1a;      /* Secondary Black */
    --theme-bg-tertiary: #2d2d2d;       /* Tertiary Black */
    --theme-bg-card: #1e1e1e;          /* Card Background */
    --theme-bg-hover: #333333;         /* Hover Background */
    
    /* Text Colors */
    --theme-text-primary: #ffffff;     /* Primary White */
    --theme-text-secondary: #e0e0e0;   /* Secondary White */
    --theme-text-muted: #b0b0b0;       /* Muted White */
    --theme-text-gold: #FFD700;        /* Gold Text */
    --theme-text-dark: #000000;        /* Black Text */
    
    /* Border Colors */
    --theme-border-primary: #FFD700;    /* Gold Border */
    --theme-border-secondary: #4a4a4a; /* Gray Border */
    --theme-border-light: #666666;     /* Light Gray Border */
    
    /* Status Colors */
    --theme-success: #28a745;           /* Green */
    --theme-warning: #ffc107;          /* Yellow */
    --theme-danger: #dc3545;            /* Red */
    --theme-info: #17a2b8;             /* Blue */
    
    /* Shadows */
    --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --theme-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
    --theme-shadow-gold: 0 4px 12px rgba(255, 215, 0, 0.3);
    
    /* Gradients */
    --theme-gradient-gold: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    --theme-gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    --theme-gradient-card: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    
    /* Typography */
    --theme-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --theme-font-size-xs: 0.75rem;
    --theme-font-size-sm: 0.875rem;
    --theme-font-size-base: 1rem;
    --theme-font-size-lg: 1.125rem;
    --theme-font-size-xl: 1.25rem;
    --theme-font-size-2xl: 1.5rem;
    --theme-font-size-3xl: 1.875rem;
    --theme-font-size-4xl: 2.25rem;
    
    /* Spacing */
    --theme-spacing-xs: 0.25rem;
    --theme-spacing-sm: 0.5rem;
    --theme-spacing-md: 1rem;
    --theme-spacing-lg: 1.5rem;
    --theme-spacing-xl: 2rem;
    --theme-spacing-2xl: 3rem;
    
    /* Border Radius */
    --theme-radius-sm: 0.25rem;
    --theme-radius-md: 0.375rem;
    --theme-radius-lg: 0.5rem;
    --theme-radius-xl: 0.75rem;
    --theme-radius-2xl: 1rem;
    
    /* Transitions */
    --theme-transition-fast: 0.15s ease;
    --theme-transition-normal: 0.3s ease;
    --theme-transition-slow: 0.5s ease;
}

/* ========================================
   GLOBAL OVERRIDES
   ======================================== */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
    font-family: var(--theme-font-family) !important;
    line-height: 1.6;
}

/* ========================================
   BOOTSTRAP OVERRIDES
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--theme-primary) !important; }
.bg-secondary { background-color: var(--theme-secondary) !important; }
.bg-light { background-color: var(--theme-bg-secondary) !important; }
.bg-dark { background-color: var(--theme-bg-primary) !important; }
.bg-white { background-color: var(--theme-bg-card) !important; }

/* Text Colors */
.text-primary { color: var(--theme-primary) !important; }
.text-secondary { color: var(--theme-text-secondary) !important; }
.text-muted { color: var(--theme-text-muted) !important; }
.text-white { color: var(--theme-text-primary) !important; }
.text-dark { color: var(--theme-text-dark) !important; }

/* Border Colors */
.border-primary { border-color: var(--theme-border-primary) !important; }
.border-secondary { border-color: var(--theme-border-secondary) !important; }
.border-light { border-color: var(--theme-border-light) !important; }

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn {
    border-radius: var(--theme-radius-lg) !important;
    font-weight: 600 !important;
    padding: var(--theme-spacing-sm) var(--theme-spacing-lg) !important;
    transition: all var(--theme-transition-normal) !important;
    font-family: var(--theme-font-family) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--theme-spacing-sm) !important;
    text-decoration: none !important;
}

.btn-primary {
    background: var(--theme-gradient-gold) !important;
    color: var(--theme-text-dark) !important;
    box-shadow: var(--theme-shadow-gold) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FFED4E 0%, #FFD700 100%) !important;
    color: var(--theme-text-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
}

.btn-secondary {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
    border: 2px solid var(--theme-border-secondary) !important;
}

.btn-secondary:hover {
    background: var(--theme-bg-hover) !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-primary) !important;
    transform: translateY(-2px) !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: var(--theme-primary) !important;
    border: 2px solid var(--theme-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--theme-primary) !important;
    color: var(--theme-text-dark) !important;
    transform: translateY(-2px) !important;
}

.btn-success {
    background: var(--theme-success) !important;
    color: var(--theme-text-primary) !important;
}

.btn-danger {
    background: var(--theme-danger) !important;
    color: var(--theme-text-primary) !important;
}

.btn-warning {
    background: var(--theme-warning) !important;
    color: var(--theme-text-dark) !important;
}

.btn-info {
    background: var(--theme-info) !important;
    color: var(--theme-text-primary) !important;
}

/* ========================================
   CARD STYLES
   ======================================== */
.card {
    background: var(--theme-gradient-card) !important;
    border: 1px solid var(--theme-border-secondary) !important;
    border-radius: var(--theme-radius-xl) !important;
    box-shadow: var(--theme-shadow-md) !important;
    color: var(--theme-text-primary) !important;
}

.card-header {
    background: var(--theme-bg-secondary) !important;
    border-bottom: 1px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.card-body {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
}

.card-footer {
    background: var(--theme-bg-secondary) !important;
    border-top: 1px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
}

/* ========================================
   FORM STYLES
   ======================================== */
.form-control {
    background-color: var(--theme-bg-card) !important;
    border: 2px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
    border-radius: var(--theme-radius-lg) !important;
    padding: var(--theme-spacing-sm) var(--theme-spacing-md) !important;
    transition: all var(--theme-transition-normal) !important;
}

.form-control:focus {
    background-color: var(--theme-bg-card) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
}

.form-control::placeholder {
    color: var(--theme-text-muted) !important;
}

.form-label {
    color: var(--theme-text-primary) !important;
    font-weight: 600 !important;
}

.form-select {
    background-color: var(--theme-bg-card) !important;
    border: 2px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.form-select:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
}

/* ========================================
   TABLE STYLES
   ======================================== */
.table {
    color: var(--theme-text-primary) !important;
    background-color: transparent !important;
}

.table th {
    background-color: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-secondary) !important;
    font-weight: 600 !important;
}

.table td {
    background-color: transparent !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-secondary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--theme-bg-tertiary) !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--theme-bg-hover) !important;
}

/* ========================================
   NAVBAR STYLES
   ======================================== */
.navbar {
    background: var(--theme-gradient-dark) !important;
    border-bottom: 2px solid var(--theme-primary) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

.navbar-brand {
    color: var(--theme-text-primary) !important;
    font-weight: bold !important;
}

.navbar-nav .nav-link {
    color: var(--theme-text-secondary) !important;
    transition: all var(--theme-transition-normal) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--theme-primary) !important;
}

.navbar-nav .nav-link.active {
    color: var(--theme-primary) !important;
    font-weight: 600 !important;
}

/* ========================================
   SIDEBAR STYLES
   ======================================== */
.sidebar {
    background: var(--theme-gradient-dark) !important;
    border-right: 2px solid var(--theme-primary) !important;
    box-shadow: var(--theme-shadow-lg) !important;
}

.sidebar-header {
    background: var(--theme-bg-secondary) !important;
    border-bottom: 2px solid var(--theme-primary) !important;
    color: var(--theme-text-primary) !important;
}

.sidebar-nav .nav-link {
    color: var(--theme-text-secondary) !important;
    transition: all var(--theme-transition-normal) !important;
    border-radius: var(--theme-radius-md) !important;
    margin: var(--theme-spacing-xs) var(--theme-spacing-sm) !important;
}

.sidebar-nav .nav-link:hover {
    background: var(--theme-bg-hover) !important;
    color: var(--theme-text-primary) !important;
    transform: translateX(5px) !important;
}

.sidebar-nav .nav-link.active {
    background: var(--theme-gradient-gold) !important;
    color: var(--theme-text-dark) !important;
    font-weight: 600 !important;
    transform: translateX(8px) !important;
    box-shadow: var(--theme-shadow-gold) !important;
}

/* ========================================
   MODAL STYLES
   ======================================== */
.modal-content {
    background: var(--theme-gradient-card) !important;
    border: 1px solid var(--theme-border-secondary) !important;
    border-radius: var(--theme-radius-xl) !important;
    box-shadow: var(--theme-shadow-xl) !important;
    color: var(--theme-text-primary) !important;
}

.modal-header {
    background: var(--theme-bg-secondary) !important;
    border-bottom: 1px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.modal-body {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
}

.modal-footer {
    background: var(--theme-bg-secondary) !important;
    border-top: 1px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ========================================
   BADGE STYLES
   ======================================== */
.badge {
    font-weight: 600 !important;
    border-radius: var(--theme-radius-sm) !important;
}

.badge-primary {
    background: var(--theme-primary) !important;
    color: var(--theme-text-dark) !important;
}

.badge-secondary {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.badge-success {
    background: var(--theme-success) !important;
    color: var(--theme-text-primary) !important;
}

.badge-danger {
    background: var(--theme-danger) !important;
    color: var(--theme-text-primary) !important;
}

.badge-warning {
    background: var(--theme-warning) !important;
    color: var(--theme-text-dark) !important;
}

.badge-info {
    background: var(--theme-info) !important;
    color: var(--theme-text-primary) !important;
}

/* ========================================
   ALERT STYLES
   ======================================== */
.alert {
    border-radius: var(--theme-radius-lg) !important;
    border: none !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

.alert-primary {
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--theme-primary) !important;
    border-left: 4px solid var(--theme-primary) !important;
}

.alert-secondary {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
    border-left: 4px solid var(--theme-border-secondary) !important;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1) !important;
    color: var(--theme-success) !important;
    border-left: 4px solid var(--theme-success) !important;
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1) !important;
    color: var(--theme-danger) !important;
    border-left: 4px solid var(--theme-danger) !important;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1) !important;
    color: var(--theme-warning) !important;
    border-left: 4px solid var(--theme-warning) !important;
}

.alert-info {
    background: rgba(23, 162, 184, 0.1) !important;
    color: var(--theme-info) !important;
    border-left: 4px solid var(--theme-info) !important;
}

/* ========================================
   PROGRESS BAR STYLES
   ======================================== */
.progress {
    background-color: var(--theme-bg-secondary) !important;
    border-radius: var(--theme-radius-sm) !important;
    height: 8px !important;
}

.progress-bar {
    background: var(--theme-gradient-gold) !important;
    border-radius: var(--theme-radius-sm) !important;
}

/* ========================================
   PAGINATION STYLES
   ======================================== */
.pagination .page-link {
    background-color: var(--theme-bg-card) !important;
    border: 1px solid var(--theme-border-secondary) !important;
    color: var(--theme-text-primary) !important;
    border-radius: var(--theme-radius-md) !important;
    margin: 0 var(--theme-spacing-xs) !important;
    transition: all var(--theme-transition-normal) !important;
}

.pagination .page-link:hover {
    background-color: var(--theme-bg-hover) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.pagination .page-item.active .page-link {
    background: var(--theme-gradient-gold) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-text-dark) !important;
}

/* ========================================
   DROPDOWN STYLES
   ======================================== */
.dropdown-menu {
    background: var(--theme-gradient-card) !important;
    border: 1px solid var(--theme-border-secondary) !important;
    border-radius: var(--theme-radius-lg) !important;
    box-shadow: var(--theme-shadow-lg) !important;
}

.dropdown-item {
    color: var(--theme-text-primary) !important;
    transition: all var(--theme-transition-normal) !important;
}

.dropdown-item:hover {
    background-color: var(--theme-bg-hover) !important;
    color: var(--theme-text-primary) !important;
}

.dropdown-divider {
    border-color: var(--theme-border-secondary) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-gold { color: var(--theme-primary) !important; }
.bg-gold { background-color: var(--theme-primary) !important; }
.border-gold { border-color: var(--theme-primary) !important; }

.shadow-gold { box-shadow: var(--theme-shadow-gold) !important; }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 100%;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: var(--theme-spacing-md) !important;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.gold-glow {
    animation: goldGlow 2s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .sidebar,
    .navbar,
    .btn {
        display: none !important;
    }
    
    .card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}