/* ============================================
   HELIOS UNIFIED THEME SYSTEM v4.0
   Powered by Golden Ratio (φ = 1.618)
   Single Source of Truth for all modules
   ============================================ */

/**
 * RÈGLES POUR LES NOUVEAUX MODULES
 * ================================
 *
 * 1. NE JAMAIS définir de background sur body dans un module CSS
 * 2. NE JAMAIS utiliser de background inline sur body dans les templates
 * 3. Utiliser les variables --theme-bg-* pour les couleurs de fond
 * 4. Pour les cards/containers, utiliser --bg-glass
 * 5. Le thème (dark/light) est géré automatiquement par ce fichier
 * 6. Tous les modules DOIVENT inclure theme-global.css EN PREMIER
 *
 * DESIGN PATTERN:
 * - Single Source of Truth: UNE seule définition du background
 * - CSS Custom Properties: Variables réutilisables
 * - Separation of Concerns: Theme séparé des composants
 * - DRY: Aucune duplication de styles background
 * - Open/Closed: Extensible sans modifier l'existant
 */

/* ===========================================
   DESIGN TOKENS - BACKGROUND SYSTEM
   =========================================== */
:root {
    /* === UNIFIED BACKGROUND GRADIENT (Dark Theme) === */
    --theme-bg-start: var(--helios-bg-darkest, #001f2b);          /* cyan-900 */
    --theme-bg-mid1: var(--helios-bg-darker, #003047);           /* cyan-800 - Nombre d'or (38.2%) */
    --theme-bg-mid2: var(--helios-bg-dark, #004566);           /* cyan-700 - Nombre d'or (61.8%) */
    --theme-bg-end: rgba(0, 69, 102, 0.95);

    --theme-bg-gradient: linear-gradient(180deg,
        var(--theme-bg-start) 0%,
        var(--theme-bg-mid1) 38.2%,
        var(--theme-bg-mid2) 61.8%,
        var(--theme-bg-end) 100%
    );

    /* Pattern overlay (optional, currently disabled) */
    --theme-bg-pattern-opacity: 0;
    /* Background colors */
    --bg-primary: #0a0f1a;
    --bg-secondary: var(--bg-dark);
    --bg-tertiary: var(--text-dark);
    --bg-card: var(--phi-gray-50);
    --bg-card-hover: var(--phi-gray-100);
    --bg-glass: var(--phi-gray-100);
    --bg-glass-hover: var(--phi-gray-100);
    --bg-input: var(--phi-gray-50);
    --bg-input-focus: var(--phi-gray-100);

    /* Text colors */
    --text-primary: var(--phi-gray-900);
    --text-secondary: var(--phi-gray-600);
    --text-muted: var(--phi-gray-500);
    --text-inverse: #0a0f1a;

    /* Light-theme text anchors — φ-symmetric with phi-gray (dark ↔ light)
       phi-gray = white RGBA for dark bg  |  phi-dark = black RGBA for light bg
       900 ↔ 700 (primary), 600 ↔ 600 (secondary), 500 ↔ 500 (muted), 400 (subtle) */
    --text-dark: var(--phi-dark-700);              /* rgba(0,0,0,0.81) — mirrors phi-gray-900 */
    --text-secondary-dark: var(--phi-dark-600);    /* rgba(0,0,0,0.69) — mirrors phi-gray-600 */
    --text-dark-secondary: var(--phi-dark-600);    /* alias for --text-secondary-dark */
    --text-muted-light: var(--phi-dark-500);       /* rgba(0,0,0,0.55) — mirrors phi-gray-500 */
    --text-muted-dark: var(--phi-dark-400);        /* rgba(0,0,0,0.34) — subtle inactive text */

    /* Border colors */
    --border-color: var(--phi-gray-200);
    --border-color-hover: var(--phi-gray-300);
    --border-focus: rgba(0, 191, 255, 0.5);

    /* Accent colors - φ-based (Golden Angle rotation 137.5°) */
    --accent-primary: hsl(195, 100%, 50%);          /* #00bfff - φ base cyan */
    --accent-secondary: hsl(247.5, 80%, 60%);       /* φ-violet (+137.5°×n) */
    --accent-tertiary: hsl(332.5, 85%, 55%);        /* φ-magenta (+137.5°×n) */
    --accent-gradient: linear-gradient(137.5deg, var(--accent-secondary), var(--accent-tertiary));
    --accent-cyan: var(--accent-primary);
    --accent-coral: hsl(0, 84%, 60%);               /* φ-danger light */
    --accent-terracotta: hsl(20, 89%, 48%);         /* φ-warm accent */

    /* φ-based accent opacity variants */
    --accent-primary-08: rgba(0, 191, 255, 0.08);
    --accent-primary-10: rgba(0, 191, 255, 0.1);
    --accent-primary-13: rgba(0, 191, 255, 0.13);
    --accent-primary-15: rgba(0, 191, 255, 0.13);   /* mapped to Fibonacci 13% */
    --accent-primary-20: rgba(0, 191, 255, 0.191);   /* mapped to 1/φ³ */
    --accent-primary-30: rgba(0, 191, 255, 0.309);   /* mapped to 1/φ² */
    --accent-primary-50: rgba(0, 191, 255, 0.5);
    --accent-secondary-10: rgba(102, 93, 204, 0.1);
    --accent-secondary-15: rgba(102, 93, 204, 0.13);
    --accent-secondary-20: rgba(102, 93, 204, 0.191);
    --accent-secondary-30: rgba(102, 93, 204, 0.309);

    /* Status colors - φ-based semantic palette */
    --success: hsl(145, 63%, 42%);                   /* φ-success */
    --success-light: hsl(145, 63%, 69.1%);          /* φ lightness scale */
    --success-dark: hsl(145, 63%, 30.9%);           /* φ lightness scale */
    --success-bg: hsla(145, 63%, 42%, 0.13);        /* Fibonacci 13% opacity */
    --warning: hsl(35, 89%, 55%);                    /* φ-warning */
    --warning-light: hsl(35, 89%, 69.1%);
    --warning-dark: hsl(35, 89%, 30.9%);
    --warning-bg: hsla(35, 89%, 55%, 0.13);
    --danger: hsl(0, 89%, 55%);                      /* φ-danger */
    --danger-light: hsl(0, 89%, 69.1%);
    --danger-dark: hsl(0, 89%, 30.9%);
    --danger-bg: hsla(0, 89%, 55%, 0.13);
    --info: var(--accent-primary);
    --info-light: hsl(195, 100%, 69.1%);
    --info-dark: hsl(195, 100%, 30.9%);
    --info-bg: rgba(0, 191, 255, 0.13);

    /* Shadows (φ-based blur progression) */
    --shadow-sm-theme: var(--shadow-sm);      /* Uses golden-ratio.css */
    --shadow-md-theme: var(--shadow-md);      /* Uses golden-ratio.css */
    --shadow-lg-theme: var(--shadow-lg);      /* Uses golden-ratio.css */
    --shadow-glow: var(--shadow-glow-lg);     /* 21px Fibonacci blur */

    /* Transitions (φ-based timing) */
    --transition-fast: var(--duration-fast) var(--ease-golden);    /* var(--duration-instant) */
    --transition-normal: var(--duration-normal) var(--ease-golden); /* 162ms φ */
    --transition-slow: var(--duration-slow) var(--ease-golden);    /* 424ms φ³ */

    /* Border radius (φ-based) - Inherit from golden-ratio.css */
    --radius-sm-theme: var(--radius-sm);      /* 5px - φ⁻¹ */
    --radius-md-theme: var(--radius-md);      /* 8px - base */
    --radius-lg-theme: var(--radius-lg);      /* 13px - Fibonacci */
    --radius-xl-theme: var(--radius-xl);      /* 21px - Fibonacci */

    /* Spacing (Fibonacci-based) - Inherit from golden-ratio.css */
    --spacing-xs: var(--space-1);     /* 0.25rem - 4px */
    --spacing-sm: var(--space-2);     /* 0.5rem - 8px base */
    --spacing-md: var(--space-4);     /* 1rem - 16px */
    --spacing-lg: var(--space-6);     /* 1.618rem - 26px φ */
    --spacing-xl: var(--space-8);     /* 2.618rem - 42px φ² */

    /* Font sizes (φ-based scale) - Inherit from golden-ratio.css */
    --font-xs: var(--text-xs);        /* 0.786rem - φ⁻¹·⁵ */
    --font-sm: var(--text-sm);        /* 0.875rem */
    --font-md: var(--text-base);      /* 1rem - base */
    --font-lg: var(--text-md);        /* 1.125rem */
    --font-xl: var(--text-lg);        /* 1.272rem - √φ */

    /* === LAYOUT (φ-based proportions) === */
    --header-height: var(--space-11);         /* 89px - Fibonacci */
    --footer-height: 0px;
    --sidebar-width: var(--layout-sidebar);   /* 260px */
}

/* ===========================================
   LIGHT THEME - BACKGROUND SYSTEM
   =========================================== */
body.light-theme {
    /* === UNIFIED BACKGROUND GRADIENT (Light Theme) === */
    --theme-bg-start: var(--bg-lightest, #f8fafc);
    --theme-bg-mid1: var(--bg-lighter, #f1f5f9);
    --theme-bg-mid2: var(--bg-light, #e2e8f0);
    --theme-bg-end: var(--border-light, #cbd5e1);

    --theme-bg-gradient: linear-gradient(137.5deg,
        #f5f7fa 0%,
        #e4e8ed 100%
    );
    /* Background colors */
    --bg-primary: var(--bg-lightest, #f8fafc);
    --bg-secondary: var(--white, #ffffff);
    --bg-tertiary: var(--bg-lighter, #f1f5f9);
    --bg-card: var(--phi-dark-25, rgba(0, 0, 0, 0.02));
    --bg-card-hover: var(--phi-dark-50);
    --bg-glass: var(--phi-gray-800);
    --bg-glass-hover: var(--phi-gray-900);
    --bg-input: var(--phi-dark-50, rgba(0, 0, 0, 0.03));
    --bg-input-focus: var(--phi-dark-50);

    /* Text colors */
    --text-primary: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-muted: var(--text-muted-light);
    --text-inverse: var(--white, #ffffff);

    /* Border colors */
    --border-color: var(--phi-dark-100);
    --border-color-hover: var(--phi-dark-300);
    --border-focus: rgba(102, 126, 234, 0.5);

    /* Shadows - lighter for light theme */
    --shadow-sm: 0 1px 3px var(--phi-dark-100);
    --shadow-md: 0 4px 12px var(--phi-dark-100);
    --shadow-lg: 0 8px 24px var(--phi-dark-100);
    --shadow-glow: 0 0 20px var(--accent-secondary-20, rgba(102, 126, 234, 0.191));
}

/* ===========================================
   BACKGROUND APPLICATION - CRITICAL
   Single Source of Truth for ALL modules
   =========================================== */
body {
    /* UNIFIED BACKGROUND - Ne jamais override dans les modules */
    background: var(--theme-bg-gradient) !important;
    background-attachment: fixed !important;
    min-height: 100vh;

    /* Text colors */
    color: var(--text-primary);
    transition: background var(--transition-normal), color var(--transition-normal);
}

/* Light theme inherits from variables defined above */
body.light-theme {
    /* Background gradient est déjà défini dans les variables --theme-bg-gradient */
    background: var(--theme-bg-gradient) !important;
    background-attachment: fixed !important;
}

/* ========================================
   COMPACT MODE (φ⁻¹ scaled values)
   ======================================== */
body.compact-mode {
    /* Spacing reduced by φ⁻¹ (0.618) */
    --spacing-xs: var(--space-0-5);   /* 0.125rem */
    --spacing-sm: var(--space-1);     /* 0.25rem */
    --spacing-md: var(--space-2);     /* 0.5rem */
    --spacing-lg: var(--space-3);     /* 0.809rem */
    --spacing-xl: var(--space-4);     /* 1rem */

    /* Font sizes reduced by φ⁻⁰·⁵ */
    --font-xs: var(--text-3xs);       /* 0.486rem */
    --font-sm: var(--text-2xs);       /* 0.618rem */
    --font-md: var(--text-xs);        /* 0.786rem */
    --font-lg: var(--text-sm);        /* 0.875rem */
    --font-xl: var(--text-base);      /* 1rem */
}

/* Compact mode specific styles */
body.compact-mode .card,
body.compact-mode .module-header,
body.compact-mode .stats-card {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

body.compact-mode h1,
body.compact-mode .module-header-title {
    font-size: var(--font-lg) !important;
}

body.compact-mode h2, body.compact-mode h3 {
    font-size: var(--font-md) !important;
}

body.compact-mode p, body.compact-mode span, body.compact-mode td, body.compact-mode th {
    font-size: var(--font-sm) !important;
}

body.compact-mode .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-sm);
}

body.compact-mode table th,
body.compact-mode table td {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
}

body.compact-mode .modal-body {
    padding: var(--spacing-md);
}

body.compact-mode .form-control,
body.compact-mode .form-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-sm);
}

/* ========================================
   HEADER COMPACT STYLES (φ-based)
   Design System Helios - Headers Compacts
   ======================================== */
.page-header-hero.compact,
.page-header.compact,
.module-header.compact {
    padding: var(--space-3) var(--space-6) !important;  /* 13px 26px - Fibonacci/φ */
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;           /* 13px - Fibonacci */
    min-height: auto !important;
    max-height: var(--space-11) !important;             /* 89px - Fibonacci */
    overflow: hidden;

    /* Glassmorphism conservé */
    background: var(--bg-glass);
    backdrop-filter: blur(var(--space-3));              /* 13px - Fibonacci blur */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md-theme);
    box-shadow: var(--shadow-sm-theme);

    /* Flexbox pour alignement horizontal */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);                                /* 16px */
}

.page-header-hero.compact .page-title,
.page-header.compact .page-title,
.module-header.compact .page-title,
.page-header-hero.compact h1,
.page-header.compact h1,
.module-header.compact h1,
.page-header-hero.compact h2,
.page-header.compact h2,
.module-header.compact h2,
.page-header-hero.compact h3,
.page-header.compact h3,
.module-header.compact h3 {
    font-size: var(--text-lg) !important;               /* 1.272rem - √φ */
    margin-bottom: 0 !important;
    line-height: var(--leading-snug);                   /* 1.382 */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-hero.compact .header-stats,
.page-header.compact .header-stats {
    display: flex;
    gap: var(--space-3);                                /* 13px - Fibonacci */
    font-size: var(--text-sm);                          /* 0.875rem */
    margin: 0 !important;
    align-items: center;
}

.page-header-hero.compact .header-stats .stat-item,
.page-header.compact .header-stats .stat-item {
    padding: var(--space-1) var(--space-2);             /* 4px 8px */
    margin: 0;
}

.page-header-hero.compact .header-actions,
.page-header.compact .header-actions,
.module-header.compact .header-actions {
    display: flex;
    gap: var(--space-2);                                /* 8px - base */
    align-items: center;
    flex-shrink: 0;
}

.page-header-hero.compact .btn,
.page-header.compact .btn,
.module-header.compact .btn {
    padding: var(--space-1-5) var(--space-3);           /* 6px 13px - Fibonacci */
    font-size: var(--text-sm);                          /* 0.875rem */
    white-space: nowrap;
}

/* Header content layout */
.page-header-hero.compact .header-content,
.page-header.compact .header-content,
.module-header.compact .header-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);                                /* 16px */
    flex: 1;
    min-width: 0; /* Pour permettre le shrink */
}

/* CRITICAL FIX: Force sticky positioning on all header variants */
.page-header-hero.compact,
.page-header.compact,
.module-header.compact,
.ats-page-header.compact,
.helios-page-header.compact,
.mm-page-header.compact,
.page-header-glassmorphism.compact,
.page-header-wrapper.compact {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    margin-top: 0 !important;
}

.page-header-hero.compact .header-left,
.page-header.compact .header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.page-header-hero.compact .header-right,
.page-header.compact .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Badges and counters compacts */
.page-header-hero.compact .badge,
.page-header.compact .badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
}

/* Icons compacts */
.page-header-hero.compact i,
.page-header.compact i,
.module-header.compact i {
    font-size: var(--text-base);
}

/* Light theme compatibility */
body.light-theme .page-header-hero.compact,
body.light-theme .page-header.compact,
body.light-theme .module-header.compact {
    background: var(--phi-gray-800) !important;
    border: 1px solid var(--border-color) !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .page-header-hero.compact,
    .page-header.compact,
    .module-header.compact {
        flex-direction: column;
        align-items: flex-start;
        max-height: none !important;
        padding: var(--space-3) var(--space-4) !important;
    }

    .page-header-hero.compact .page-title,
    .page-header.compact .page-title,
    .module-header.compact .page-title {
        font-size: var(--text-lg) !important;
    }

    .page-header-hero.compact .header-stats,
    .page-header.compact .header-stats {
        flex-wrap: wrap;
        width: 100%;
    }

    .page-header-hero.compact .header-actions,
    .page-header.compact .header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ========================================
   HELIOS FULL HEIGHT LAYOUT - NO SCROLL
   Design Pattern pour 1 page sans scroll
   ======================================== */

/* Conteneur principal full-height (s'applique à main-content) */
.helios-full-height {
    height: calc(100vh - var(--header-height, 70px) - var(--footer-height, 0px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Conteneur avec scroll interne (pour listes, tableaux, messages) */
.helios-scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Conteneur avec padding pour le contenu scrollable */
.helios-scrollable-content-padded {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
}

/* Layout avec header fixe + contenu scrollable */
.helios-layout-fixed-header {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height, 70px));
    overflow: hidden;
}

.helios-layout-fixed-header > .page-header,
.helios-layout-fixed-header > .module-header {
    flex-shrink: 0;
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-3) !important;
}

.helios-layout-fixed-header > .helios-scrollable-content {
    flex: 1;
    overflow-y: auto;
}

/* ========================================
   KPI CARDS COMPACT SYSTEM
   Design Pattern universel pour KPIs
   ======================================== */

/* KPI compact - réduction par 2x */
.kpi-card.compact,
.stat-card.compact,
.stats-card.compact {
    padding: var(--space-2) var(--space-3) !important;
    min-height: auto !important;
    margin-bottom: var(--spacing-sm) !important;
}

.kpi-card.compact .kpi-value,
.stat-card.compact .stat-value,
.stats-card.compact .stat-value {
    font-size: var(--text-lg) !important;
    margin-bottom: var(--space-px) !important;
    line-height: var(--leading-tight, 1.272);
}

.kpi-card.compact .kpi-label,
.stat-card.compact .stat-label,
.stats-card.compact .stat-label {
    font-size: var(--text-xs) !important;
    margin-bottom: 0 !important;
}

.kpi-card.compact .kpi-icon,
.stat-card.compact .stat-icon {
    font-size: var(--text-2xl) !important;
    width: var(--space-7) !important;
    height: var(--space-7) !important;
}

/* KPI extra compact - réduction par 3x */
.kpi-card.extra-compact,
.stat-card.extra-compact,
.stats-card.extra-compact {
    padding: var(--space-2) var(--space-3) !important;
    min-height: auto !important;
    margin-bottom: var(--spacing-xs) !important;
}

.kpi-card.extra-compact .kpi-value,
.stat-card.extra-compact .stat-value,
.stats-card.extra-compact .stat-value {
    font-size: var(--text-sm) !important;
    margin-bottom: var(--space-1) !important;
    line-height: 1.1;
}

.kpi-card.extra-compact .kpi-label,
.stat-card.extra-compact .stat-label,
.stats-card.extra-compact .stat-label {
    font-size: var(--text-xs) !important;
    margin-bottom: 0 !important;
}

.kpi-card.extra-compact .kpi-icon,
.stat-card.extra-compact .stat-icon {
    font-size: var(--text-3xl) !important;
    width: 52px !important;
    height: 52px !important;
}

/* Row de KPIs compact */
.kpi-row.compact {
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
}

.kpi-row.extra-compact {
    gap: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-sm) !important;
}

/* ========================================
   HEADERS PRÈS DU HAUT
   Réduire margin-top pour rapprocher du bord
   ======================================== */

/* CRITICAL: All header variants MUST be sticky - with !important to prevent overrides */
.page-header,
.module-header,
.page-header-hero,
.helios-page-header,
.ats-page-header,
.mm-page-header,
.helios-header,
.page-header-wrapper,
.page-header-glassmorphism {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    margin-top: 0 !important;
}

.page-header.compact,
.module-header.compact,
.page-header-hero.compact {
    margin-top: 0 !important;
}

/* ========================================
   SPACING REDUCTION - GLOBAL
   Réduction des espacements verticaux
   ======================================== */

body.no-scroll-mode {
    overflow: hidden;
}

body.no-scroll-mode .container-fluid {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}

body.no-scroll-mode .row {
    margin-bottom: var(--spacing-sm) !important;
}

body.no-scroll-mode .card {
    margin-bottom: var(--spacing-sm) !important;
}

body.no-scroll-mode h1, body.no-scroll-mode h2, body.no-scroll-mode h3 {
    margin-bottom: var(--spacing-sm) !important;
}

body.no-scroll-mode .section-divider {
    margin: var(--spacing-sm) 0 !important;
}

/* ========================================
   RESPONSIVE - Mobile garde le scroll
   ======================================== */

@media (max-width: 768px) {
    .helios-full-height {
        height: auto;
        overflow: visible;
    }

    .helios-scrollable-content {
        overflow: visible;
    }
}

/* ========================================
   HEADER VARIANTS COMPACT STYLES
   Pour les variantes spécifiques aux modules
   ======================================== */

/* ATS Module Headers */
.ats-page-header.compact {
    padding: var(--space-3) var(--space-5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
    min-height: auto !important;
    max-height: var(--size-89, 89px) !important;
}

/* Helios Generic Headers */
.helios-page-header.compact {
    padding: var(--space-3) var(--space-5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
    min-height: auto !important;
    max-height: var(--size-89, 89px) !important;
}

/* Mass Mailing Headers */
.mm-page-header.compact {
    padding: var(--space-3) var(--space-5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
    min-height: auto !important;
    max-height: var(--size-89, 89px) !important;
}

/* Page Header Wrapper (notifications, etc) */
.page-header-wrapper.compact {
    padding: var(--space-3) var(--space-5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
    min-height: auto !important;
    max-height: var(--size-89, 89px) !important;
}

/* Glassmorphism Header Variant */
.page-header-glassmorphism.compact {
    padding: var(--space-3) var(--space-5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
    min-height: auto !important;
    max-height: var(--size-89, 89px) !important;
}

/* ========================================
   CARD STYLES - Theme Aware
   ======================================== */
.card,
.glass-card,
.stats-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all var(--transition-normal);
}

.card:hover,
.glass-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-color-hover);
}

/* ========================================
   FORM CONTROLS - Theme Aware
   ======================================== */
.form-control,
.form-select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background: var(--bg-input-focus) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-10, rgba(0, 191, 255, 0.1)) !important;
}

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

/* ========================================
   TABLE STYLES - Theme Aware
   ======================================== */
.table {
    color: var(--text-primary);
}

.table th {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.table td {
    border-color: var(--border-color);
}

.table tbody tr:hover {
    background: var(--bg-card-hover);
}

/* ========================================
   MODAL STYLES - Theme Aware
   ======================================== */
.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.light-theme .modal-content {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* ========================================
   BUTTON STYLES - Theme Aware
   ======================================== */
.btn-glass {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-glass:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

/* ========================================
   SIDEBAR STYLES - Theme Aware
   ======================================== */
body.light-theme .sidebar {
    background: linear-gradient(180deg, var(--white, #ffffff) 0%, var(--bg-lightest, #f8fafc) 100%);
    border-right: var(--space-1) solid var(--border-color);
}

body.light-theme .sidebar-user-card {
    background: linear-gradient(137.5deg, var(--accent-secondary-10, rgba(102, 126, 234, 0.1)), rgba(118, 75, 162, 0.1));
    border: 1px solid var(--accent-secondary-20, rgba(102, 126, 234, 0.191));
}

body.light-theme .sidebar-user-name {
    color: var(--text-primary);
}

body.light-theme .sidebar-user-role {
    color: var(--text-secondary);
}

body.light-theme .nav-link {
    color: var(--text-secondary);
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color: var(--accent-secondary);
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1));
}

body.light-theme .sidebar-section-title {
    color: var(--text-muted);
}

/* ========================================
   MODULE HEADER - Theme Aware
   ======================================== */
body.light-theme .module-header {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
}

body.light-theme .module-header-title {
    color: var(--text-primary);
}

body.light-theme .notification-btn {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ========================================
   STATS CARDS - Theme Aware
   ======================================== */
body.light-theme .stats-card,
body.light-theme .stat-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
}

body.light-theme .stats-card h3,
body.light-theme .stat-card .stat-value {
    color: var(--text-primary);
}

body.light-theme .stats-card p,
body.light-theme .stat-card .stat-label {
    color: var(--text-secondary);
}

/* ========================================
   NAV TABS - Theme Aware
   ======================================== */
body.light-theme .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

body.light-theme .nav-tabs .nav-link:hover {
    color: var(--accent-secondary);
    border-color: var(--border-color);
}

body.light-theme .nav-tabs .nav-link.active {
    color: var(--accent-secondary);
    background: var(--bg-secondary);
    border-color: var(--border-color) var(--border-color) var(--bg-secondary);
}

/* ========================================
   BADGES - Theme Aware
   ======================================== */
body.light-theme .badge {
    border: 1px solid var(--border-color);
}

/* ========================================
   DROPDOWN - Theme Aware
   ======================================== */
body.light-theme .dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

body.light-theme .dropdown-item {
    color: var(--text-primary);
}

body.light-theme .dropdown-item:hover {
    background: var(--bg-card-hover);
}

/* ========================================
   SCROLLBAR - Theme Aware
   ======================================== */
body.light-theme ::-webkit-scrollbar {
    width: var(--space-2);
    height: var(--space-2);
}

body.light-theme ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ========================================
   ANIMATIONS FOR THEME SWITCH
   ======================================== */
body,
body *:not(script):not(style) {
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* Disable transitions during initial load */
body.no-transitions,
body.no-transitions * {
    transition: none !important;
}

/* ========================================
   FORCE LIGHT THEME - AGGRESSIVE OVERRIDES
   Ces styles utilisent !important pour forcer
   le thème clair sur TOUS les composants
   ======================================== */

/* === SIDEBAR FORCE LIGHT === */
body.light-theme .sidebar {
    background: linear-gradient(180deg, var(--white, #ffffff) 0%, var(--bg-lightest, #f8fafc) 100%) !important;
    border-right: var(--space-1) solid var(--phi-dark-100) !important;
}

body.light-theme .sidebar * {
    color: var(--text-dark) !important;
}

body.light-theme .sidebar .nav-link {
    color: var(--text-secondary-dark) !important;
}

body.light-theme .sidebar .nav-link:hover,
body.light-theme .sidebar .nav-link.active {
    color: var(--accent-secondary) !important;
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1)) !important;
}

body.light-theme .sidebar .sidebar-section-title,
body.light-theme .sidebar .section-title {
    color: var(--text-muted-light) !important;
}

body.light-theme .sidebar-user-card {
    background: linear-gradient(137.5deg, var(--accent-secondary-10, rgba(102, 126, 234, 0.1)), rgba(118, 75, 162, 0.1)) !important;
    border: 1px solid var(--accent-secondary-20, rgba(102, 126, 234, 0.191)) !important;
}

body.light-theme .sidebar-user-name {
    color: var(--text-dark) !important;
}

body.light-theme .sidebar-user-role {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar .bi,
body.light-theme .sidebar i {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar .nav-link:hover .bi,
body.light-theme .sidebar .nav-link:hover i,
body.light-theme .sidebar .nav-link.active .bi,
body.light-theme .sidebar .nav-link.active i {
    color: var(--accent-secondary) !important;
}

/* === MODALS FORCE LIGHT === */
body.light-theme .modal-content {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    color: var(--text-dark) !important;
}

body.light-theme .modal-content * {
    color: var(--text-dark);
}

body.light-theme .modal-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--phi-dark-100) !important;
}

body.light-theme .modal-header .modal-title,
body.light-theme .modal-header h5,
body.light-theme .modal-header h4 {
    color: var(--text-dark) !important;
}

body.light-theme .modal-header .btn-close {
    filter: none !important;
}

body.light-theme .modal-body {
    background: var(--white, #ffffff) !important;
    color: var(--text-dark) !important;
}

body.light-theme .modal-body label,
body.light-theme .modal-body .form-label {
    color: var(--text-dark-secondary) !important;
}

body.light-theme .modal-body .form-control,
body.light-theme .modal-body .form-select,
body.light-theme .modal-body input,
body.light-theme .modal-body textarea,
body.light-theme .modal-body select {
    background: var(--bg-lightest, #f9fafb) !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    color: var(--text-dark) !important;
}

body.light-theme .modal-body .form-control::placeholder,
body.light-theme .modal-body input::placeholder,
body.light-theme .modal-body textarea::placeholder {
    color: var(--text-muted-light) !important;
}

body.light-theme .modal-footer {
    background: var(--bg-lightest, #f8fafc) !important;
    border-top: var(--space-1) solid var(--phi-dark-100) !important;
}

body.light-theme .modal-body .nav-link,
body.light-theme .modal-body .nav-tabs .nav-link {
    color: var(--text-muted-dark) !important;
}

body.light-theme .modal-body .nav-link.active,
body.light-theme .modal-body .nav-tabs .nav-link.active {
    color: var(--accent-secondary) !important;
    background: var(--white, #ffffff) !important;
}

/* === SLIDE PANEL FORCE LIGHT === */
body.light-theme .slide-panel,
body.light-theme .user-slide-panel,
body.light-theme [class*="slide-panel"] {
    background: var(--white, #ffffff) !important;
    border-left: var(--space-1) solid var(--phi-dark-100) !important;
}

body.light-theme .slide-panel *,
body.light-theme .user-slide-panel *,
body.light-theme [class*="slide-panel"] * {
    color: var(--text-dark);
}

body.light-theme .slide-panel .slide-panel-header,
body.light-theme .user-slide-panel .slide-panel-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--phi-dark-100) !important;
}

/* === DROPDOWNS FORCE LIGHT === */
body.light-theme .dropdown-menu {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.light-theme .dropdown-menu * {
    color: var(--text-dark) !important;
}

body.light-theme .dropdown-item {
    color: var(--text-dark) !important;
}

body.light-theme .dropdown-item:hover,
body.light-theme .dropdown-item:focus {
    background: var(--bg-lighter, #f1f5f9) !important;
    color: var(--accent-secondary) !important;
}

body.light-theme .dropdown-divider {
    border-color: var(--phi-dark-100) !important;
}

/* === CARDS FORCE LIGHT === */
body.light-theme .card,
body.light-theme .glass-card,
body.light-theme [class*="-card"] {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.light-theme .card *,
body.light-theme .glass-card * {
    color: var(--text-dark);
}

body.light-theme .card-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--phi-dark-100) !important;
    color: var(--text-dark) !important;
}

body.light-theme .card-body {
    background: var(--white, #ffffff) !important;
}

body.light-theme .card-footer {
    background: var(--bg-lightest, #f8fafc) !important;
    border-top: var(--space-1) solid var(--phi-dark-100) !important;
}

/* === TABLES FORCE LIGHT === */
body.light-theme .table {
    color: var(--text-dark) !important;
}

body.light-theme .table th {
    background: var(--bg-lightest, #f8fafc) !important;
    color: var(--text-secondary-dark) !important;
    border-color: var(--phi-dark-100) !important;
}

body.light-theme .table td {
    color: var(--text-dark) !important;
    border-color: var(--phi-dark-100) !important;
}

body.light-theme .table tbody tr:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
}

/* === ALERTS & TOASTS FORCE LIGHT === */
body.light-theme .alert {
    border: 1px solid var(--phi-dark-100) !important;
}

body.light-theme .toast {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    color: var(--text-dark) !important;
}

/* === TOOLTIPS FORCE LIGHT === */
body.light-theme .tooltip-inner {
    background: var(--text-dark) !important;
    color: var(--white, #ffffff) !important;
}

body.light-theme .tooltip .tooltip-arrow::before {
    border-top-color: var(--text-dark) !important;
}

/* === POPOVERS FORCE LIGHT === */
body.light-theme .popover {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
}

body.light-theme .popover-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--phi-dark-100) !important;
    color: var(--text-dark) !important;
}

body.light-theme .popover-body {
    color: var(--text-dark) !important;
}

/* === FORM ELEMENTS FORCE LIGHT === */
body.light-theme input,
body.light-theme textarea,
body.light-theme select,
body.light-theme .form-control,
body.light-theme .form-select {
    background: var(--bg-lightest, #f9fafb) !important;
    border: 1px solid var(--border-light, #d1d5db) !important;
    color: var(--text-dark) !important;
}

body.light-theme input:focus,
body.light-theme textarea:focus,
body.light-theme select:focus,
body.light-theme .form-control:focus,
body.light-theme .form-select:focus {
    background: var(--white, #ffffff) !important;
    border-color: var(--accent-secondary) !important;
    box-shadow: 0 0 0 3px var(--accent-secondary-15, rgba(102, 126, 234, 0.13)) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: var(--text-muted-light) !important;
}

/* === BUTTONS SECONDARY FORCE LIGHT === */
body.light-theme .btn-secondary,
body.light-theme .btn-outline-secondary {
    color: var(--text-secondary-dark) !important;
    border-color: var(--border-light, #d1d5db) !important;
}

body.light-theme .btn-secondary:hover,
body.light-theme .btn-outline-secondary:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
    color: var(--text-dark) !important;
}

/* === LIST GROUPS FORCE LIGHT === */
body.light-theme .list-group-item {
    background: var(--white, #ffffff) !important;
    border-color: var(--phi-dark-100) !important;
    color: var(--text-dark) !important;
}

body.light-theme .list-group-item:hover {
    background: var(--bg-lightest, #f8fafc) !important;
}

/* === ACCORDIONS FORCE LIGHT === */
body.light-theme .accordion-item {
    background: var(--white, #ffffff) !important;
    border-color: var(--phi-dark-100) !important;
}

body.light-theme .accordion-button {
    background: var(--bg-lightest, #f8fafc) !important;
    color: var(--text-dark) !important;
}

body.light-theme .accordion-button:not(.collapsed) {
    background: var(--bg-lighter, #f1f5f9) !important;
    color: var(--accent-secondary) !important;
}

body.light-theme .accordion-body {
    background: var(--white, #ffffff) !important;
    color: var(--text-dark) !important;
}

/* === SPECIFIC HELIOS COMPONENTS === */

/* Stats cards with gradients - keep gradients but adjust text */
body.light-theme .stats-card .stats-value,
body.light-theme .stat-card .stat-value {
    color: var(--text-dark) !important;
}

/* User cards */
body.light-theme .user-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
}

body.light-theme .user-card:hover {
    background: var(--bg-lightest, #f8fafc) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Autocomplete dropdowns */
body.light-theme .autocomplete-dropdown,
body.light-theme [class*="autocomplete"] {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .autocomplete-item {
    color: var(--text-dark) !important;
}

body.light-theme .autocomplete-item:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
}

/* Progress bars */
body.light-theme .progress {
    background: var(--bg-light, #e2e8f0) !important;
}

/* Badges text - ensure readable */
body.light-theme .badge {
    font-weight: 600 !important;
}

/* Module header */
body.light-theme .module-header {
    background: var(--phi-gray-800) !important;
    border: 1px solid var(--phi-dark-100) !important;
    backdrop-filter: blur(var(--blur-md, 8px)) !important;
}

body.light-theme .module-header-title {
    color: var(--text-dark) !important;
}

body.light-theme .notification-btn {
    background: var(--phi-dark-50) !important;
    border: 1px solid var(--phi-dark-100) !important;
    color: var(--text-secondary-dark) !important;
}

body.light-theme .notification-btn:hover {
    background: var(--phi-dark-100) !important;
}

/* Context menus */
body.light-theme .context-menu,
body.light-theme [class*="context-menu"] {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--phi-dark-100) !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .context-menu-item {
    color: var(--text-dark) !important;
}

body.light-theme .context-menu-item:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
}

/* ========================================
   BODY BACKGROUND FORCE LIGHT
   Utilise --theme-bg-gradient défini en haut
   ======================================== */
body.light-theme {
    /* Utilise les variables définies dans la section Light Theme */
    background: var(--theme-bg-gradient) !important;
    background-attachment: fixed !important;
}

/* Override inline background styles on body (legacy safety) */
body.light-theme[style*="background"] {
    background: var(--theme-bg-gradient) !important;
    background-attachment: fixed !important;
}

/* ========================================
   MAIN WRAPPER AND CONTENT AREAS
   ======================================== */
body.light-theme .main-wrapper,
body.light-theme .main-content,
body.light-theme .content-area {
    background: transparent !important;
}

body.light-theme .container-fluid {
    background: transparent !important;
}

/* ========================================
   SIDEBAR COMPLETE OVERRIDE
   Force all sidebar elements to light
   ======================================== */
body.light-theme .sidebar,
body.light-theme aside.sidebar,
body.light-theme #sidebar {
    background: linear-gradient(180deg, var(--white, #ffffff) 0%, var(--bg-lighter, #f1f5f9) 50%, var(--bg-light, #e2e8f0) 100%) !important;
    border-right: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
    box-shadow: var(--shadow-glow-md) !important;
}

body.light-theme .sidebar-header {
    background: linear-gradient(137.5deg, var(--bg-lightest, #f8fafc) 0%, var(--bg-lighter, #f1f5f9) 100%) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .sidebar-header::before {
    background: linear-gradient(45deg, transparent 30%, var(--accent-secondary-10, rgba(102, 126, 234, 0.1)) 50%, transparent 70%) !important;
}

body.light-theme .sidebar-brand {
    color: var(--text-dark) !important;
}

body.light-theme .sidebar-brand span {
    color: var(--text-dark) !important;
}

body.light-theme .sidebar-brand i {
    color: var(--accent-secondary) !important;
}

body.light-theme .sidebar-menu {
    background: transparent !important;
}

body.light-theme .sidebar-item {
    background: transparent !important;
}

body.light-theme .sidebar-link {
    color: var(--text-secondary-dark) !important;
    background: transparent !important;
}

body.light-theme .sidebar-link::before {
    background: linear-gradient(180deg, var(--accent-secondary) 0%, var(--accent-tertiary, #764ba2) 100%) !important;
}

body.light-theme .sidebar-link::after {
    background: radial-gradient(circle, var(--accent-secondary-30, rgba(102, 126, 234, 0.309)), transparent) !important;
}

body.light-theme .sidebar-link:hover {
    color: var(--accent-secondary) !important;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.13) 0%, rgba(102, 126, 234, 0.04) 100%) !important;
}

body.light-theme .sidebar-link.active {
    color: var(--accent-secondary) !important;
    background: linear-gradient(90deg, var(--accent-secondary-20, rgba(102, 126, 234, 0.191)) 0%, rgba(102, 126, 234, 0.08) 100%) !important;
}

body.light-theme .sidebar-link i,
body.light-theme .sidebar-link .bi {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-link:hover i,
body.light-theme .sidebar-link:hover .bi,
body.light-theme .sidebar-link.active i,
body.light-theme .sidebar-link.active .bi {
    color: var(--accent-secondary) !important;
}

body.light-theme .sidebar-section {
    border-top-color: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .sidebar-section::before {
    background: linear-gradient(90deg, transparent 0%, var(--accent-secondary) 50%, transparent 100%) !important;
}

body.light-theme .sidebar-section-title {
    color: var(--text-muted-light) !important;
}

body.light-theme .sidebar-section-title.collapsible:hover {
    background: rgba(102, 126, 234, 0.08) !important;
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-section-title .section-icon {
    color: var(--accent-secondary) !important;
}

body.light-theme .sidebar-section-title .chevron {
    color: var(--text-muted-light) !important;
}

/* User card in sidebar */
body.light-theme .sidebar-user-card {
    background: linear-gradient(137.5deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 100%) !important;
    border: 1px solid var(--accent-secondary-15, rgba(102, 126, 234, 0.13)) !important;
}

body.light-theme .sidebar-user-card:hover {
    background: linear-gradient(137.5deg, var(--accent-secondary-15, rgba(102, 126, 234, 0.13)) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border-color: rgba(102, 126, 234, 0.309) !important;
}

body.light-theme .sidebar-user-avatar img {
    border-color: rgba(102, 126, 234, 0.382) !important;
}

body.light-theme .sidebar-user-initials {
    background: linear-gradient(137.5deg, var(--accent-secondary) 0%, var(--accent-tertiary, #764ba2) 100%) !important;
    color: var(--white, #ffffff) !important;
}

body.light-theme .sidebar-user-status {
    border-color: var(--bg-lighter, #f1f5f9) !important;
}

body.light-theme .sidebar-user-name {
    color: var(--text-dark) !important;
}

body.light-theme .sidebar-user-role {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-user-role i {
    color: var(--accent-secondary) !important;
}

body.light-theme .sidebar-user-arrow {
    color: var(--text-muted-light) !important;
}

body.light-theme .sidebar-user-card:hover .sidebar-user-arrow {
    color: var(--accent-secondary) !important;
}

/* Sidebar search */
body.light-theme .sidebar-search-wrapper {
    border-bottom-color: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .sidebar-search-input {
    background: var(--phi-dark-50, rgba(0, 0, 0, 0.03)) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .sidebar-search-input::placeholder {
    color: var(--text-muted-light) !important;
}

body.light-theme .sidebar-search-input:focus {
    background: var(--white, #ffffff) !important;
    border-color: var(--accent-secondary) !important;
}

body.light-theme .sidebar-search-icon {
    color: var(--text-muted-light) !important;
}

body.light-theme .sidebar-search-clear {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-search-clear:hover {
    background: var(--phi-dark-50) !important;
}

body.light-theme .sidebar-search-shortcut kbd {
    background: var(--phi-dark-50) !important;
    border-color: var(--bg-light, #e2e8f0) !important;
    color: var(--text-muted-dark) !important;
}

/* Sidebar badge */
body.light-theme .sidebar-badge {
    background: linear-gradient(137.5deg, var(--danger), var(--danger-dark, var(--danger))) !important;
    color: var(--white, #ffffff) !important;
}

/* Sidebar scrollbar */
body.light-theme .sidebar::-webkit-scrollbar-track {
    background: var(--bg-lighter, #f1f5f9) !important;
}

body.light-theme .sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--text-muted-light), var(--text-muted-dark)) !important;
}

body.light-theme .sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary) !important;
}

/* Collapse tab */
body.light-theme .sidebar-collapse-tab {
    background: linear-gradient(180deg, var(--bg-lightest, #f8fafc) 0%, var(--bg-lighter, #f1f5f9) 100%) !important;
    border-color: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .sidebar-collapse-tab i {
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-collapse-btn {
    background: var(--phi-dark-50) !important;
    border-color: var(--bg-light, #e2e8f0) !important;
    color: var(--text-muted-dark) !important;
}

body.light-theme .sidebar-collapse-btn:hover {
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1)) !important;
    color: var(--accent-secondary) !important;
}

/* ========================================
   CHAT MODULE STYLES
   ======================================== */
body.light-theme .chat-container,
body.light-theme .chat-area {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .contacts-panel {
    background: var(--white, #ffffff) !important;
    border-right: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .contacts-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .contacts-search input {
    background: var(--bg-lighter, #f1f5f9) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .contacts-list {
    background: transparent !important;
}

body.light-theme .contact-item {
    color: var(--text-dark) !important;
}

body.light-theme .contact-item:hover,
body.light-theme .contact-item.active {
    background: var(--bg-lighter, #f1f5f9) !important;
}

body.light-theme .chat-header {
    background: var(--white, #ffffff) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .chat-header * {
    color: var(--text-dark) !important;
}

body.light-theme .chat-messages {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .message-bubble {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .message-bubble.own {
    background: linear-gradient(137.5deg, var(--accent-secondary), var(--accent-tertiary, #764ba2)) !important;
    color: var(--white, #ffffff) !important;
    border: none !important;
}

body.light-theme .chat-input-area,
body.light-theme .message-input-area {
    background: var(--white, #ffffff) !important;
    border-top: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .chat-input,
body.light-theme .message-textarea {
    background: var(--bg-lighter, #f1f5f9) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .autocomplete-results {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .autocomplete-results .autocomplete-item {
    color: var(--text-dark) !important;
}

body.light-theme .autocomplete-results .autocomplete-item:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
}

/* ========================================
   FORUM MODULE STYLES
   ======================================== */
body.light-theme .forum-container,
body.light-theme .forum-wrapper {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .discord-layout {
    background: transparent !important;
}

body.light-theme .channels-sidebar {
    background: var(--white, #ffffff) !important;
    border-right: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .channels-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .channels-header h2 {
    color: var(--text-dark) !important;
}

body.light-theme .channels-list {
    background: transparent !important;
}

body.light-theme .channel-item,
body.light-theme .channel-link {
    color: var(--text-secondary-dark) !important;
}

body.light-theme .channel-item:hover,
body.light-theme .channel-link:hover,
body.light-theme .channel-item.active,
body.light-theme .channel-link.active {
    background: var(--bg-lighter, #f1f5f9) !important;
    color: var(--accent-secondary) !important;
}

body.light-theme .messages-area {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .messages-header {
    background: var(--white, #ffffff) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .messages-header * {
    color: var(--text-dark) !important;
}

body.light-theme .messages-container {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .forum-message,
body.light-theme .message-item {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .forum-message:hover,
body.light-theme .message-item:hover {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .message-author {
    color: var(--accent-secondary) !important;
}

body.light-theme .message-content {
    color: var(--text-dark) !important;
}

body.light-theme .message-timestamp {
    color: var(--text-muted-light) !important;
}

body.light-theme .channel-welcome {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .channel-welcome h2 {
    color: var(--text-dark) !important;
}

body.light-theme .channel-welcome p {
    color: var(--text-muted-dark) !important;
}

body.light-theme .message-toolbar {
    background: var(--bg-lightest, #f8fafc) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .toolbar-btn {
    color: var(--text-muted-dark) !important;
}

body.light-theme .toolbar-btn:hover {
    background: var(--bg-light, #e2e8f0) !important;
    color: var(--accent-secondary) !important;
}

/* Picker popups */
body.light-theme .picker-popup,
body.light-theme #emojiPicker,
body.light-theme #giphyPicker {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ========================================
   GLASS MODAL OVERRIDE
   ======================================== */
body.light-theme .glass-modal,
body.light-theme .modal-content.glass-modal {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    box-shadow: var(--shadow-xl) !important;
    backdrop-filter: blur(var(--blur-xl, 21px)) !important;
}

body.light-theme .glass-modal * {
    color: var(--text-dark);
}

body.light-theme .glass-modal .modal-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .glass-modal .modal-body {
    background: var(--white, #ffffff) !important;
}

body.light-theme .glass-modal .modal-footer {
    background: var(--bg-lightest, #f8fafc) !important;
    border-top: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .glass-modal .btn-close {
    filter: none !important;
    opacity: 0.6;
    transition: transform var(--duration-normal) var(--ease-golden),
                background var(--duration-normal) var(--ease-golden),
                opacity var(--duration-normal) var(--ease-golden);
}

body.light-theme .glass-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
    background: var(--danger-bg, rgba(239, 68, 68, 0.1));
}

/* ========================================
   PAGE HEADER GLASSMORPHISM
   ======================================== */
body.light-theme .page-header-glassmorphism {
    background: var(--phi-gray-800) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    backdrop-filter: blur(var(--blur-lg, 13px)) !important;
}

body.light-theme .page-header-glassmorphism h1,
body.light-theme .page-header-glassmorphism h2,
body.light-theme .page-header-glassmorphism h3 {
    color: var(--text-dark) !important;
}

body.light-theme .page-header-glassmorphism p,
body.light-theme .page-header-glassmorphism .text-muted {
    color: var(--text-muted-dark) !important;
}

body.light-theme .page-header-glassmorphism .btn {
    background: var(--phi-dark-50) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-secondary-dark) !important;
}

body.light-theme .page-header-glassmorphism .btn:hover {
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1)) !important;
    border-color: var(--accent-secondary) !important;
    color: var(--accent-secondary) !important;
}

/* ========================================
   TOP NAVBAR
   ======================================== */
body.light-theme .top-navbar {
    background: var(--phi-gray-800) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
    backdrop-filter: blur(var(--blur-xl, 21px)) !important;
}

body.light-theme .top-navbar * {
    color: var(--text-dark) !important;
}

/* ========================================
   IMPERSONATE BANNER
   Keep it visible with warning colors
   ======================================== */
body.light-theme [style*="impersonat"] {
    /* Don't override the impersonate banner */
}

/* ========================================
   HEADINGS AND TEXT OVERRIDES
   ======================================== */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: var(--text-dark) !important;
}

body.light-theme p,
body.light-theme span,
body.light-theme div,
body.light-theme label {
    color: var(--text-dark-secondary);
}

body.light-theme small,
body.light-theme .text-muted {
    color: var(--text-muted-dark) !important;
}

body.light-theme .text-secondary {
    color: var(--text-secondary-dark) !important;
}

body.light-theme a {
    color: var(--accent-secondary);
}

body.light-theme a:hover {
    color: var(--accent-secondary);
}

/* ========================================
   BLOG MODULE
   ======================================== */
body.light-theme .blog-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .blog-card:hover {
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .blog-card-title {
    color: var(--text-dark) !important;
}

body.light-theme .blog-card-excerpt {
    color: var(--text-muted-dark) !important;
}

body.light-theme .blog-filters-bar {
    background: var(--phi-gray-800) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

/* ========================================
   COMING SOON / PLACEHOLDER PAGES
   ======================================== */
body.light-theme .coming-soon-card {
    background: var(--phi-gray-900) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .coming-soon-title {
    color: var(--text-dark) !important;
}

body.light-theme .coming-soon-text {
    color: var(--text-muted-dark) !important;
}

body.light-theme .feature-item {
    background: var(--bg-lightest, #f8fafc) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .feature-item i {
    color: var(--accent-secondary) !important;
}

/* ========================================
   CRA MODULE
   ======================================== */
body.light-theme .cra-calendar {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .calendar-day {
    color: var(--text-dark) !important;
    border-color: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .calendar-day:hover {
    background: var(--bg-lighter, #f1f5f9) !important;
}

body.light-theme .calendar-header {
    background: var(--bg-lightest, #f8fafc) !important;
    color: var(--text-dark) !important;
}

/* ========================================
   ATS MODULES
   ======================================== */
body.light-theme .candidate-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .candidate-card:hover {
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .opportunity-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .kanban-column {
    background: var(--bg-lightest, #f8fafc) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .kanban-header {
    background: var(--bg-lighter, #f1f5f9) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .kanban-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .kanban-card:hover {
    box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   MOBILE TOGGLE BUTTON
   ======================================== */
body.light-theme .mobile-toggle {
    background: var(--accent-secondary) !important;
    color: var(--white, #ffffff) !important;
}

body.light-theme .mobile-toggle:hover {
    background: var(--accent-secondary) !important;
}

/* ========================================
   NO RESULTS / EMPTY STATES
   ======================================== */
body.light-theme .sidebar-no-results,
body.light-theme .empty-state,
body.light-theme .no-results {
    color: var(--text-muted-light) !important;
}

body.light-theme .empty-conversations {
    color: var(--text-muted-dark) !important;
}

body.light-theme .empty-conversations i {
    color: var(--text-muted-light) !important;
}

/* ========================================
   WYSIWYG EDITOR
   ======================================== */
body.light-theme .wysiwyg-toolbar {
    background: var(--bg-lightest, #f8fafc) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .wysiwyg-editor {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .toolbar-select {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

/* ========================================
   LANGUAGE SELECTOR
   ======================================== */
body.light-theme .language-selector {
    background: var(--bg-lightest, #f8fafc) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .language-option {
    color: var(--text-secondary-dark) !important;
}

body.light-theme .language-option:hover,
body.light-theme .language-option.active {
    background: var(--bg-lighter, #f1f5f9) !important;
    color: var(--accent-secondary) !important;
}

/* ========================================
   UNIFIED FILTERS
   ======================================== */
body.light-theme .unified-filters {
    background: var(--phi-gray-800) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .filter-group label {
    color: var(--text-secondary-dark) !important;
}

/* ========================================
   LOADING STATES
   ======================================== */
body.light-theme .loading-state,
body.light-theme .skeleton {
    background: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .spinner {
    border-color: var(--bg-light, #e2e8f0) !important;
    border-top-color: var(--accent-secondary) !important;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
body.light-theme .toast-container .toast {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

body.light-theme .toast-header {
    background: var(--bg-lightest, #f8fafc) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

/* ========================================
   GLASS NOTIFICATION (Custom Helios)
   ======================================== */
body.light-theme .glass-notification {
    background: var(--phi-gray-900) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
    color: var(--text-dark) !important;
}

/* ========================================
   FLOATING SHAPES DISABLE IN LIGHT MODE
   ======================================== */
body.light-theme .floating-shape {
    opacity: 0.03 !important;
}

/* ========================================
   LOGIN / AUTH PAGES
   Keep special styling but adjust for readability
   ======================================== */
body.light-theme .login-container {
    background: var(--phi-gray-900) !important;
    border: 1px solid var(--phi-dark-100) !important;
}

body.light-theme .login-container .brand-name {
    background: linear-gradient(137.5deg, var(--text-dark), var(--accent-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.light-theme .login-container .brand-tagline {
    color: var(--text-muted-dark) !important;
}

body.light-theme .login-container .form-label {
    color: var(--text-dark-secondary) !important;
}

body.light-theme .orb {
    opacity: 0.3 !important;
}

/* ========================================
   PRESENCE MODULE
   ======================================== */
body.light-theme .presence-card {
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--bg-light, #e2e8f0) !important;
}

body.light-theme .presence-status {
    color: var(--text-dark) !important;
}

/* ========================================
   DOCUMENT VIEWER
   ======================================== */
body.light-theme .document-viewer {
    background: var(--bg-lightest, #f8fafc) !important;
}

body.light-theme .document-viewer-toolbar {
    background: var(--white, #ffffff) !important;
    border-bottom: var(--space-1) solid var(--bg-light, #e2e8f0) !important;
}

/* ========================================
   SWITCH/TOGGLE BUTTONS
   ======================================== */
body.light-theme .form-switch .form-check-input {
    background-color: var(--bg-light, #e2e8f0) !important;
}

body.light-theme .form-switch .form-check-input:checked {
    background-color: var(--accent-secondary) !important;
}

/* ========================================
   TAB CONTENT
   ======================================== */
body.light-theme .tab-content {
    background: transparent !important;
}

body.light-theme .tab-pane {
    color: var(--text-dark) !important;
}

/* ========================================
   RESPONSIVE - Mobile adjustments
   ======================================== */
@media (max-width: 768px) {
    body.light-theme .sidebar {
        box-shadow: var(--shadow-glow-md) !important;
    }

    body.light-theme .mobile-menu-overlay {
        background: var(--phi-dark-300) !important;
    }
}

/* ========================================
   PRINT STYLES
   Always use light theme for printing
   ======================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .sidebar {
        display: none !important;
    }

    .card, .glass-card, .modal-content {
        background: white !important;
        border: 1px solid var(--border-light, #ccc) !important;
        box-shadow: none !important;
    }
}