/**
 * ============================================================
 * HELIOS φ COMPONENTS - Golden Ratio Based Components
 * ============================================================
 *
 * ORDRE DE CHARGEMENT: 7/10 (après helios-layout-aliases.css)
 * Dépend de: helios-golden-ratio.css (variables φ)
 *
 * Ce fichier fournit des composants réutilisables basés sur φ.
 * Tous les modules DOIVENT utiliser ces classes pour garantir
 * une harmonie visuelle basée sur le nombre d'or.
 *
 * Fibonacci: 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
 *
 * @version 1.0.0
 * @date 2026-01-26
 * ============================================================
 */

/* ============================================================
   1. KPI SYSTEM - Centralized φ-based KPI Components
   ============================================================
   Source de vérité UNIQUE pour TOUS les KPIs du projet.
   Basé sur le pattern Goodies Admin, harmonisé avec φ = 1.618.

   Classes canoniques:
     .phi-kpi-grid, .phi-kpi-card, .phi-kpi-icon,
     .phi-kpi-info, .phi-kpi-value, .phi-kpi-label

   Aliases backward-compatible:
     Grid:  .kpi-dashboard, .kpi-grid, .ats-kpi-grid,
            .mc-kpi-grid, .admin-header-stats
     Card:  .kpi-card, .ats-kpi-card, .stat-card, .mc-kpi-card
     Icon:  .kpi-icon, .stat-icon
     Info:  .stat-info, .kpi-info
     Value: .kpi-value, .stat-value
     Label: .kpi-label, .stat-label

   Fibonacci spacing: 4, 8, 13, 21, 34, 55px
   ============================================================ */

/* --- 1a. KPI GRID CONTAINER ---
   Auto-fit responsive grid with φ gap
   ----------------------------------- */
.phi-kpi-grid,
body .kpi-dashboard,
body .kpi-grid,
body .ats-kpi-grid,
body .mc-kpi-grid,
body .admin-header-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4, 13px);
    margin-bottom: var(--space-4, 13px);
}

/* --- 1b. KPI CARD ---
   Horizontal layout: [icon] [info (value + label)]
   Matches Goodies Admin reference pattern
   ------------------------------------------------ */
.phi-kpi-card,
body .kpi-card,
body .ats-kpi-card,
body .stat-card,
body .mc-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--space-4, 13px);
    padding: var(--space-5, 21px);
    background: var(--bg-glass, rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(var(--blur-md, 13px));
    -webkit-backdrop-filter: blur(var(--blur-md, 13px));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 21px);
    overflow: hidden;
    transition: all var(--duration-medium, 0.309s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1));
    position: relative;
}

.phi-kpi-card:hover,
body .kpi-card:hover,
body .ats-kpi-card:hover,
body .stat-card:hover,
body .mc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* --- 1c. KPI ICON ---
   55×55px Fibonacci square with 13px radius
   ----------------------------------------- */
.phi-kpi-icon,
body .kpi-icon,
body .stat-icon {
    width: var(--space-8, 55px);
    height: var(--space-8, 55px);
    min-width: var(--space-8, 55px);
    border-radius: var(--radius-lg, 13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl, 34px);
    background: var(--accent-secondary-20, rgba(59, 130, 246, 0.191));
    color: var(--accent-secondary, #667eea);
    transition: transform var(--duration-fast, 0.191s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1));
}

/* --- 1d. KPI INFO CONTAINER ---
   Flex child for value + label
   ----------------------------- */
.phi-kpi-info,
body .stat-info,
body .kpi-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* --- 1e. KPI VALUE ---
   34px Fibonacci font-size, 700 weight
   ------------------------------------- */
.phi-kpi-value,
body .kpi-value,
body .stat-value {
    display: block;
    font-size: var(--text-2xl, 34px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--leading-tight, 1.236);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 1f. KPI LABEL ---
   13px Fibonacci font-size, uppercase
   ------------------------------------ */
.phi-kpi-label,
body .kpi-label,
body .stat-label {
    display: block;
    font-size: var(--text-xs, 13px);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-top: var(--space-1, 4px);
}

/* --- 1g. KPI COLOR VARIANTS ---
   Usage: <div class="phi-kpi-card phi-kpi-blue">
   Or legacy: <div class="stat-card stat-pending">
   Opacity: 0.191 ≈ φ⁻³ (golden ratio harmonic)
   ----------------------------------------------- */

/* Blue / Primary */
.phi-kpi-blue > .phi-kpi-icon,
.phi-kpi-blue > .kpi-icon,
.phi-kpi-blue > .stat-icon,
body .stat-budget .stat-icon {
    background: var(--accent-secondary-20, rgba(59, 130, 246, 0.191));
    color: var(--accent-secondary, #667eea);
}

/* Purple */
.phi-kpi-purple > .phi-kpi-icon,
.phi-kpi-purple > .kpi-icon,
.phi-kpi-purple > .stat-icon,
body .stat-processing .stat-icon {
    background: var(--accent-tertiary-20, rgba(139, 92, 246, 0.191));
    color: var(--phi-violet-light, #8b5cf6);
}

/* Green / Success */
.phi-kpi-green > .phi-kpi-icon,
.phi-kpi-green > .kpi-icon,
.phi-kpi-green > .stat-icon,
body .stat-delivered .stat-icon,
body .stat-success .stat-icon {
    background: var(--success-bg, rgba(16, 185, 129, 0.191));
    color: var(--success, #10b981);
}

/* Gold / Warning */
.phi-kpi-gold > .phi-kpi-icon,
.phi-kpi-gold > .kpi-icon,
.phi-kpi-gold > .stat-icon,
body .stat-pending .stat-icon,
body .stat-warning .stat-icon {
    background: var(--warning-bg, rgba(245, 158, 11, 0.191));
    color: var(--warning, #f59e0b);
}

/* Cyan / Info */
.phi-kpi-cyan > .phi-kpi-icon,
.phi-kpi-cyan > .kpi-icon,
.phi-kpi-cyan > .stat-icon,
body .stat-shipped .stat-icon,
body .stat-info-color .stat-icon {
    background: var(--accent-primary-20, rgba(6, 182, 212, 0.191));
    color: var(--accent-primary, #06b6d4);
}

/* Red / Danger */
.phi-kpi-red > .phi-kpi-icon,
.phi-kpi-red > .kpi-icon,
.phi-kpi-red > .stat-icon,
body .stat-rejected .stat-icon,
body .stat-danger .stat-icon {
    background: var(--danger-bg, rgba(239, 68, 68, 0.191));
    color: var(--danger, #ef4444);
}

/* Pink */
.phi-kpi-pink > .phi-kpi-icon,
.phi-kpi-pink > .kpi-icon,
.phi-kpi-pink > .stat-icon,
body .stat-users .stat-icon {
    background: var(--phi-pink-bg, rgba(236, 72, 153, 0.191));
    color: var(--phi-pink, #ec4899);
}

/* Orange */
.phi-kpi-orange > .phi-kpi-icon,
.phi-kpi-orange > .kpi-icon,
.phi-kpi-orange > .stat-icon {
    background: var(--phi-orange-bg, rgba(249, 115, 22, 0.191));
    color: var(--phi-orange, #f97316);
}

/* Amber */
.phi-kpi-amber > .phi-kpi-icon,
.phi-kpi-amber > .kpi-icon,
.phi-kpi-amber > .stat-icon {
    background: var(--phi-amber-bg, rgba(217, 119, 6, 0.191));
    color: var(--phi-amber, #d97706);
}

/* --- 1g-ter. CARD-LEVEL COLOR ACCENTS ---
   Adds a subtle left border and value color to differentiate cards.
   Uses the same hue palette as icon backgrounds.
   body prefix ensures specificity over base .phi-kpi-value rule.
   ---------------------------------------------------- */

.phi-kpi-blue { border-left: 3px solid var(--accent-secondary-60, rgba(59, 130, 246, 0.618)); }
body .phi-kpi-blue .phi-kpi-value { color: var(--info-light, #60a5fa); }

.phi-kpi-purple { border-left: 3px solid var(--accent-tertiary-60, rgba(139, 92, 246, 0.618)); }
body .phi-kpi-purple .phi-kpi-value { color: var(--accent-tertiary-light, #a78bfa); }

.phi-kpi-green { border-left: 3px solid var(--success-60, rgba(16, 185, 129, 0.618)); }
body .phi-kpi-green .phi-kpi-value { color: var(--success-light, #34d399); }

.phi-kpi-gold { border-left: 3px solid var(--warning-60, rgba(245, 158, 11, 0.618)); }
body .phi-kpi-gold .phi-kpi-value { color: var(--warning-light, #fbbf24); }

.phi-kpi-cyan { border-left: 3px solid var(--accent-primary-60, rgba(6, 182, 212, 0.618)); }
body .phi-kpi-cyan .phi-kpi-value { color: var(--accent-primary-light, #22d3ee); }

.phi-kpi-red { border-left: 3px solid var(--danger-60, rgba(239, 68, 68, 0.618)); }
body .phi-kpi-red .phi-kpi-value { color: var(--danger-light, #f87171); }

.phi-kpi-orange { border-left: 3px solid var(--phi-orange-60, rgba(249, 115, 22, 0.618)); }
body .phi-kpi-orange .phi-kpi-value { color: var(--phi-orange-light, #fb923c); }

.phi-kpi-pink { border-left: 3px solid var(--phi-pink-60, rgba(236, 72, 153, 0.618)); }
body .phi-kpi-pink .phi-kpi-value { color: var(--phi-pink-light, #f472b6); }

.phi-kpi-amber { border-left: 3px solid var(--phi-amber-60, rgba(217, 119, 6, 0.618)); }
body .phi-kpi-amber .phi-kpi-value { color: var(--warning-light, #fbbf24); }

/* --- 1g-bis. LEGACY COLOR VARIANT ALIASES ---
   Maps old .kpi-card.primary / .ats-kpi-card.purple etc.
   to the φ-based icon backgrounds (rgba at φ⁻³ = 0.191)
   ---------------------------------------------------- */

/* Blue aliases: primary, blue */
body .kpi-card.primary > .kpi-icon,
body .kpi-card.primary > .kpi-header .kpi-icon,
body .ats-kpi-card.blue > .kpi-icon,
body .ats-kpi-card.blue > .kpi-header .kpi-icon,
body .mm-kpi-card.primary > .kpi-icon,
body .mm-kpi-card.primary > .kpi-header .kpi-icon {
    background: var(--accent-secondary-20, rgba(59, 130, 246, 0.191));
    color: var(--accent-secondary, #667eea);
}

/* Purple aliases: secondary, purple */
body .kpi-card.secondary > .kpi-icon,
body .kpi-card.secondary > .kpi-header .kpi-icon,
body .kpi-card.purple > .kpi-icon,
body .kpi-card.purple > .kpi-header .kpi-icon,
body .ats-kpi-card.purple > .kpi-icon,
body .ats-kpi-card.purple > .kpi-header .kpi-icon,
body .mm-kpi-card.secondary > .kpi-icon,
body .mm-kpi-card.secondary > .kpi-header .kpi-icon {
    background: var(--accent-tertiary-20, rgba(139, 92, 246, 0.191));
    color: var(--accent-tertiary, #8b5cf6);
}

/* Green aliases: success, green */
body .kpi-card.success > .kpi-icon,
body .kpi-card.success > .kpi-header .kpi-icon,
body .ats-kpi-card.green > .kpi-icon,
body .ats-kpi-card.green > .kpi-header .kpi-icon,
body .mm-kpi-card.success > .kpi-icon,
body .mm-kpi-card.success > .kpi-header .kpi-icon {
    background: var(--success-bg, rgba(16, 185, 129, 0.191));
    color: var(--success, #10b981);
}

/* Gold aliases: warning, gold, orange (legacy) */
body .kpi-card.warning > .kpi-icon,
body .kpi-card.warning > .kpi-header .kpi-icon,
body .ats-kpi-card.gold > .kpi-icon,
body .ats-kpi-card.gold > .kpi-header .kpi-icon,
body .mm-kpi-card.warning > .kpi-icon,
body .mm-kpi-card.warning > .kpi-header .kpi-icon {
    background: var(--warning-bg, rgba(245, 158, 11, 0.191));
    color: var(--warning, #f59e0b);
}

/* Cyan aliases: info, cyan */
body .kpi-card.info > .kpi-icon,
body .kpi-card.info > .kpi-header .kpi-icon,
body .ats-kpi-card.cyan > .kpi-icon,
body .ats-kpi-card.cyan > .kpi-header .kpi-icon,
body .mm-kpi-card.info > .kpi-icon,
body .mm-kpi-card.info > .kpi-header .kpi-icon {
    background: var(--accent-primary-20, rgba(6, 182, 212, 0.191));
    color: var(--accent-primary, #06b6d4);
}

/* Red aliases: danger, red */
body .kpi-card.danger > .kpi-icon,
body .kpi-card.danger > .kpi-header .kpi-icon,
body .ats-kpi-card.red > .kpi-icon,
body .ats-kpi-card.red > .kpi-header .kpi-icon,
body .mm-kpi-card.danger > .kpi-icon,
body .mm-kpi-card.danger > .kpi-header .kpi-icon {
    background: var(--danger-bg, rgba(239, 68, 68, 0.191));
    color: var(--danger, #ef4444);
}

/* --- 1g-ter. LEGACY KPI-HEADER RESET ---
   Old vertical pattern had .kpi-header wrapper around .kpi-icon.
   Reset it to not interfere with horizontal layout.
   ------------------------------------------------------- */
body .kpi-card > .kpi-header,
body .ats-kpi-card > .kpi-header,
body .mm-kpi-card > .kpi-header {
    display: contents;
}

/* --- 1g-quater. COMPACT VARIANT ---
   Smaller cards for dense layouts (salary, interviews, invoices)
   Padding: var(--space-3), Icon: 34x34px, Value: text-lg
   ----------------------------------------------------------- */
.phi-kpi-compact,
body .kpi-card.compact,
body .kpi-card.extra-compact,
body .kpi-card-compact,
body .ats-kpi-card-compact {
    padding: var(--space-3, 8px) var(--space-4, 13px);
    gap: var(--space-3, 8px);
}

.phi-kpi-compact > .phi-kpi-icon,
body .kpi-card.compact .kpi-icon,
body .kpi-card.extra-compact .kpi-icon,
body .kpi-card-compact .kpi-icon,
body .ats-kpi-card-compact .kpi-icon,
body .ats-kpi-card-compact .kpi-icon-inline {
    width: var(--space-6, 34px);
    height: var(--space-6, 34px);
    min-width: var(--space-6, 34px);
    font-size: var(--text-base, 16px);
    border-radius: var(--radius-md, 8px);
}

.phi-kpi-compact > .phi-kpi-info .phi-kpi-value,
body .kpi-card.compact .kpi-value,
body .kpi-card.extra-compact .kpi-value,
body .kpi-card-compact .kpi-value,
body .ats-kpi-card-compact .kpi-value {
    font-size: var(--text-lg, 21px);
}

.phi-kpi-compact > .phi-kpi-info .phi-kpi-label,
body .kpi-card.compact .kpi-label,
body .kpi-card.extra-compact .kpi-label,
body .kpi-card-compact .kpi-label,
body .ats-kpi-card-compact .kpi-label {
    font-size: var(--text-2xs, 8px);
}

/* Compact container aliases */
body .kpi-dashboard-compact,
body .ats-kpi-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3, 8px);
    margin-bottom: var(--space-3, 8px);
}

/* --- 1g-quinquies. TREND INDICATOR ---
   Inline percentage badge for KPI cards (salary evolution)
   -------------------------------------------------------- */
.phi-kpi-trend,
body .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-2xs, 8px);
    font-weight: 600;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    margin-left: var(--space-2, 8px);
}

.phi-kpi-trend-up,
body .kpi-trend.up,
body .kpi-trend-up {
    background: var(--success-bg, rgba(16, 185, 129, 0.191));
    color: var(--success, #10b981);
}

.phi-kpi-trend-down,
body .kpi-trend.down,
body .kpi-trend-down {
    background: var(--danger-bg, rgba(239, 68, 68, 0.191));
    color: var(--danger, #ef4444);
}

/* --- 1g-sexies. CLICKABLE / SELECTED STATES ---
   For interactive KPI cards (ATS opportunities filter)
   --------------------------------------------------- */
.phi-kpi-card.clickable,
body .kpi-card.clickable {
    cursor: pointer;
    user-select: none;
}

.phi-kpi-card.clickable:active,
body .kpi-card.clickable:active {
    transform: translateY(0) scale(0.98);
}

.phi-kpi-card.selected,
body .kpi-card.selected {
    border-color: var(--accent-primary, #06b6d4);
    border-width: 2px;
    background: var(--accent-primary-10, rgba(6, 182, 212, 0.08));
}

/* --- 1g-sexies-bis. NAV TITLE VARIANT ---
   For KPI cards showing text titles instead of numbers
   (Dashboard ATS navigation tiles)
   Font-size: var(--text-sm) instead of var(--text-2xl)
   ---------------------------------------------------- */
.phi-kpi-nav-title {
    font-size: var(--text-sm, 13px) !important;
    font-weight: 600;
    white-space: normal;
    line-height: var(--leading-normal, 1.618);
}

/* --- 1g-septies. ADDITIONAL GRID CONTAINER ALIASES ---
   Map remaining legacy containers to phi-kpi-grid behavior
   -------------------------------------------------------- */
body .mm-kpi-dashboard,
body .bonus-stats,
body .stat-cards,
body .stats-container,
body .stats-wrapper,
body .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4, 13px);
    margin-bottom: var(--space-4, 13px);
}

/* --- 1g-octies. KPI SUBLABEL ---
   Secondary info line below the main label
   ---------------------------------------- */
.phi-kpi-sublabel,
body .kpi-sublabel {
    display: block;
    font-size: var(--text-2xs, 8px);
    color: var(--text-muted);
    margin-top: var(--space-1, 4px);
}

/* --- 1g-novies. RESPONSIVE KPI GRID ---
   Consolidated responsive rules for ALL KPI grids
   ------------------------------------------------ */
@media (max-width: 1200px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .ats-kpi-grid,
    body .mm-kpi-dashboard,
    body .bonus-stats,
    body .stat-cards {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 992px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .ats-kpi-grid,
    body .mm-kpi-dashboard,
    body .bonus-stats,
    body .stat-cards {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .phi-kpi-value,
    body .kpi-value,
    body .stat-value {
        font-size: var(--text-xl, 21px);
    }
}

@media (max-width: 768px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .ats-kpi-grid,
    body .mm-kpi-dashboard,
    body .bonus-stats,
    body .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .ats-kpi-grid,
    body .mm-kpi-dashboard,
    body .bonus-stats,
    body .stat-cards {
        grid-template-columns: 1fr;
    }

    .phi-kpi-card,
    body .kpi-card,
    body .ats-kpi-card,
    body .stat-card {
        padding: var(--space-4, 13px);
    }
}

/* --- 1h. STAT-CHIP VARIANT ---
   Compact vertical KPI for inline use (birthdays, kanban)
   ------------------------------------------------------- */
body .stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2, 8px) var(--space-4, 13px);
    background: var(--bg-glass, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 21px);
    min-width: var(--space-8, 55px);
    transition: transform var(--duration-normal, 0.236s) ease;
}

body .stat-chip:hover {
    transform: translateY(calc(-1 * var(--space-1, 4px)));
}

body .stat-chip .stat-value {
    font-size: var(--text-lg, 21px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--leading-tight, 1.236);
}

body .stat-chip .stat-label {
    font-size: var(--text-2xs, 8px);
    text-transform: uppercase;
    margin-top: var(--space-1, 4px);
}

/* --- 1i. LIGHT THEME OVERRIDES ---
   IMPORTANT: phi-gray-* are WHITE overlays, NOT dark colors!
   Use solid Tailwind slate colors for light mode.
   ---------------------------------------------------------- */
body.light-theme .phi-kpi-card,
body.light-theme .kpi-card,
body.light-theme .ats-kpi-card,
body.light-theme .stat-card {
    background: #ffffff;
    border-color: #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.light-theme .phi-kpi-value,
body.light-theme .kpi-value,
body.light-theme .stat-value {
    color: #1e293b !important; /* slate-800 - forced for visibility */
}

body.light-theme .phi-kpi-label,
body.light-theme .kpi-label,
body.light-theme .stat-label {
    color: #475569 !important; /* slate-600 - forced for visibility */
}

/* ============================================================
   2. HERO CARDS - Cartes héros pour métriques principales
   ============================================================ */

.phi-hero-card {
    background: linear-gradient(137.5deg,
        var(--accent-secondary-15, rgba(102, 126, 234, 0.13)),
        var(--accent-tertiary-10, rgba(118, 75, 162, 0.1))
    );
    backdrop-filter: blur(var(--blur-xl, 21px));
    -webkit-backdrop-filter: blur(var(--blur-xl, 21px));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 21px);
    padding: var(--space-5, 21px) var(--space-6, 34px);
    position: relative;
    overflow: hidden;
}

.phi-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1, 5px);
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary, #764ba2), var(--accent-primary));
    background-size: 200% 100%;
}

.phi-hero-title {
    font-size: var(--text-lg, 21px);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3, 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phi-hero-value {
    font-size: var(--text-3xl, 34px);
    font-weight: 800;
    background: linear-gradient(137.5deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   3. STATS WIDGETS - Widgets statistiques
   ============================================================ */

.phi-stats-widget {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 13px);
    padding: var(--space-4, 13px);
    overflow: hidden;
}

.phi-stats-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4, 13px);
    padding-bottom: var(--space-3, 8px);
    border-bottom: 1px solid var(--border-color);
}

.phi-stats-widget-title {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phi-stats-widget-content {
    overflow: hidden;
}

/* ============================================================
   4. TABLES - Tableaux responsifs
   ============================================================ */

.phi-table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-lg, 13px);
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
}

.phi-table {
    width: 100%;
    border-collapse: collapse;
}

.phi-table th,
.phi-table td {
    padding: var(--space-3, 8px) var(--space-4, 13px);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--size-233, 233px);
}

.phi-table th {
    background: var(--phi-gray-50);
    font-weight: 600;
    font-size: var(--text-xs, 13px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.phi-table tr:hover td {
    background: var(--phi-gray-50);
}

/* ============================================================
   5. HEADERS - En-têtes de page/section
   ============================================================ */

.phi-page-header {
    display: flex;
    align-items: center;
    gap: var(--space-4, 13px);
    padding: var(--space-5, 21px) var(--space-6, 34px);
    background: linear-gradient(137.5deg,
        var(--accent-secondary-15, rgba(102, 126, 234, 0.13)),
        var(--accent-tertiary-10, rgba(118, 75, 162, 0.1))
    );
    backdrop-filter: blur(var(--blur-xl, 21px));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 21px);
    margin-bottom: var(--space-5, 21px);
    overflow: hidden;
    position: relative;
}

.phi-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1, 5px);
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary, #764ba2), var(--accent-primary));
}

.phi-section-title {
    font-size: var(--text-xl, 21px);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.phi-title-wrapper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ============================================================
   6. TOGGLE SWITCHES - Interrupteurs
   ============================================================ */

.phi-toggle {
    position: relative;
    width: var(--space-9, 55px);
    height: var(--space-6, 34px);
    display: inline-block;
    overflow: hidden;
}

.phi-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.phi-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--phi-gray-300);
    transition: var(--duration-medium);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.phi-toggle-slider::before {
    position: absolute;
    content: "";
    height: var(--space-5, 21px);
    width: var(--space-5, 21px);
    left: var(--space-1, 5px);
    bottom: calc((var(--space-6, 34px) - var(--space-5, 21px)) / 2);
    background: white;
    transition: var(--duration-medium);
    border-radius: var(--radius-full);
}

.phi-toggle input:checked + .phi-toggle-slider {
    background: linear-gradient(137.5deg, var(--accent-primary), var(--accent-secondary));
}

.phi-toggle input:checked + .phi-toggle-slider::before {
    transform: translateX(var(--space-5, 21px));
}

/* ============================================================
   7. LOADING ANIMATIONS - Animations de chargement
   ============================================================ */

.phi-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-5, 21px);
    overflow: hidden;
}

.phi-loading-dot {
    width: var(--space-3, 8px);
    height: var(--space-3, 8px);
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: phi-pulse 1.618s ease-in-out infinite;
}

.phi-loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.phi-loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes phi-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.618);
        opacity: 1;
    }
}

.phi-spinner {
    width: var(--space-8, 55px);
    height: var(--space-8, 55px);
    border: var(--space-1, 5px) solid var(--phi-gray-200);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: phi-spin 1s linear infinite;
    overflow: hidden;
}

@keyframes phi-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   8. TABS - Onglets
   ============================================================ */

.phi-tabs {
    display: flex;
    gap: var(--space-2, 8px);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-2, 8px);
    margin-bottom: var(--space-5, 21px);
    overflow-x: auto;
    overflow-y: hidden;
}

.phi-tab {
    padding: var(--space-3, 8px) var(--space-5, 21px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: var(--duration-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phi-tab:hover {
    color: var(--text-primary);
    background: var(--phi-gray-50);
}

.phi-tab.active {
    color: var(--accent-primary);
    background: var(--accent-primary-10, rgba(0, 191, 255, 0.1));
}

.phi-tab-content {
    overflow: hidden;
}

/* ============================================================
   9. ACTION BUTTONS - Groupes de boutons
   ============================================================ */

.phi-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 8px);
    flex-wrap: wrap;
    overflow: hidden;
}

.phi-action-btn {
    padding: var(--space-2, 8px) var(--space-4, 13px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--duration-fast);
    /* overflow handled by helios-core.css */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phi-action-btn:hover {
    background: var(--phi-gray-100);
    border-color: var(--accent-primary);
}

.phi-action-btn.primary {
    background: linear-gradient(137.5deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    color: white;
}

.phi-action-btn.primary:hover {
    transform: translateY(calc(-1 * var(--space-0-5, 3px)));
    box-shadow: var(--shadow-md);
}

/* ============================================================
   10. PAYSLIP/DOCUMENT TITLES - Titres de documents
   ============================================================ */

.phi-doc-title {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.phi-doc-subtitle {
    font-size: var(--text-xs, 13px);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phi-doc-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 13px);
    padding: var(--space-4, 13px);
    overflow: hidden;
    transition: var(--duration-fast);
}

.phi-doc-card:hover {
    border-color: var(--accent-primary);
    background: var(--phi-gray-50);
}

/* ============================================================
   11. TOOLTIPS - Info-bulles
   ============================================================ */

.phi-tooltip-trigger {
    position: relative;
    cursor: help;
    overflow: visible;
}

.phi-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2, 8px) var(--space-3, 8px);
    background: var(--phi-dark-800);
    color: white;
    font-size: var(--text-xs, 13px);
    border-radius: var(--radius-md, 8px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--duration-fast);
    z-index: 100;
    margin-bottom: var(--space-2, 8px);
}

.phi-tooltip-trigger:hover .phi-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   12. BADGES - Labels et badges
   ============================================================ */

.phi-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1, 5px) var(--space-3, 8px);
    font-size: var(--text-2xs, 8px);
    font-weight: 600;
    border-radius: var(--radius-full);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phi-badge.success {
    background: var(--success-10, rgba(34, 197, 94, 0.1));
    color: var(--success);
}

.phi-badge.warning {
    background: var(--warning-10, rgba(255, 206, 0, 0.1));
    color: var(--warning-dark, var(--warning-dark));
}

.phi-badge.danger {
    background: var(--danger-10, rgba(239, 68, 68, 0.1));
    color: var(--danger);
}

.phi-badge.info {
    background: var(--accent-primary-10, rgba(0, 191, 255, 0.1));
    color: var(--accent-primary);
}

/* ============================================================
   13. MARGIN/SPACING UTILITIES - φ-based
   ============================================================ */

/* Margins following Fibonacci: 5, 8, 13, 21, 34, 55 */
.phi-m-0 { margin: 0 !important; }
.phi-m-1 { margin: var(--space-1, 5px) !important; }
.phi-m-2 { margin: var(--space-2, 8px) !important; }
.phi-m-3 { margin: var(--space-3, 8px) !important; }
.phi-m-4 { margin: var(--space-4, 13px) !important; }
.phi-m-5 { margin: var(--space-5, 21px) !important; }
.phi-m-6 { margin: var(--space-6, 34px) !important; }

.phi-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.phi-ml-auto { margin-left: auto !important; }
.phi-mr-auto { margin-right: auto !important; }

/* ============================================================
   14. OVERFLOW UTILITIES
   ============================================================ */

.phi-overflow-hidden { overflow: hidden !important; }
.phi-overflow-auto { overflow: auto !important; }
.phi-overflow-x-auto { overflow-x: auto !important; overflow-y: hidden !important; }
.phi-overflow-y-auto { overflow-y: auto !important; overflow-x: hidden !important; }

.phi-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.phi-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.phi-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   15. RESPONSIVE - Ajustements mobiles
   ============================================================ */

/* --- KPI Grid Responsive Breakpoints --- */

/* Large desktop (>1400px) - up to 6 columns */
@media (min-width: 1400px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .kpi-grid,
    body .ats-kpi-grid,
    body .mc-kpi-grid,
    body .admin-header-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Desktop (1200-1399px) - up to 5 columns */
@media (max-width: 1399px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .kpi-grid,
    body .ats-kpi-grid,
    body .mc-kpi-grid,
    body .admin-header-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Laptop (992-1199px) - up to 3 columns */
@media (max-width: 1199px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .kpi-grid,
    body .ats-kpi-grid,
    body .mc-kpi-grid,
    body .admin-header-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet (768-991px) - 2 columns */
@media (max-width: 991.98px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .kpi-grid,
    body .ats-kpi-grid,
    body .mc-kpi-grid,
    body .admin-header-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3, 8px);
    }
}

/* --- General Components Responsive (768px) --- */
@media (max-width: 768px) {
    .phi-kpi-card,
    body .kpi-card,
    body .ats-kpi-card,
    body .stat-card {
        padding: var(--space-4, 13px);
        gap: var(--space-3, 8px);
    }

    .phi-kpi-icon,
    body .kpi-icon,
    body .stat-icon {
        width: var(--space-7, 34px);
        height: var(--space-7, 34px);
        min-width: var(--space-7, 34px);
        font-size: var(--text-base, 13px);
        border-radius: var(--radius-md, 8px);
    }

    .phi-kpi-value,
    body .kpi-value,
    body .stat-value {
        font-size: var(--text-xl, 21px);
    }

    .phi-kpi-label,
    body .kpi-label,
    body .stat-label {
        font-size: var(--text-2xs, 8px);
    }

    .phi-hero-card {
        padding: var(--space-4, 13px) var(--space-5, 21px);
    }

    .phi-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3, 8px);
        padding: var(--space-4, 13px) var(--space-5, 21px);
    }

    .phi-table th,
    .phi-table td {
        padding: var(--space-2, 8px) var(--space-3, 8px);
        font-size: var(--text-xs, 13px);
    }

    .phi-tabs {
        gap: var(--space-1, 5px);
    }

    .phi-tab {
        padding: var(--space-2, 8px) var(--space-4, 13px);
        font-size: var(--text-xs, 13px);
    }
}

/* Mobile (max-width: 480px) - single column */
@media (max-width: 480px) {
    .phi-kpi-grid,
    body .kpi-dashboard,
    body .kpi-grid,
    body .ats-kpi-grid,
    body .mc-kpi-grid,
    body .admin-header-stats {
        grid-template-columns: 1fr;
        gap: var(--space-2, 8px);
    }

    .phi-kpi-card,
    body .kpi-card,
    body .ats-kpi-card,
    body .stat-card {
        padding: var(--space-3, 8px);
    }

    .phi-kpi-value,
    body .kpi-value,
    body .stat-value {
        font-size: var(--text-lg, 21px);
    }

    .phi-hero-value {
        font-size: var(--text-2xl, 34px);
    }
}

/* ============================================================
   8. LINKEDIN EXTENSION BANNER - Installation Promo
   ============================================================
   Designed with UI UX Pro Max - Soft UI Evolution style
   Glassmorphism + LinkedIn blue accent + Fibonacci spacing
   ============================================================ */

/* --- 8a. BANNER CONTAINER --- */
.linkedin-extension-banner {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
        rgba(10, 102, 194, 0.15) 0%,
        rgba(0, 119, 181, 0.08) 50%,
        rgba(10, 102, 194, 0.12) 100%);
    backdrop-filter: blur(var(--blur-lg, 21px));
    -webkit-backdrop-filter: blur(var(--blur-lg, 21px));
    border: 1px solid rgba(10, 102, 194, 0.3);
    border-radius: var(--radius-xl, 21px);
    padding: var(--space-4, 13px) var(--space-5, 21px);
    margin-bottom: var(--space-4, 13px);
    overflow: hidden;
    transition: all var(--duration-medium, 0.309s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1));
}

.linkedin-extension-banner:hover {
    border-color: rgba(10, 102, 194, 0.5);
    box-shadow: 0 var(--space-2, 8px) var(--space-5, 21px) rgba(10, 102, 194, 0.15);
}

/* Hidden state */
.linkedin-extension-banner.hidden {
    display: none !important;
}

/* Animated background */
.linkedin-extension-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(10, 102, 194, 0.05) 50%,
        transparent 100%);
    animation: linkedinBannerShimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes linkedinBannerShimmer {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(100%); }
}

/* --- 8b. BANNER CONTENT LAYOUT --- */
.linkedin-extension-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5, 21px);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* --- 8c. LEFT SIDE - INFO --- */
.linkedin-extension-banner-info {
    display: flex;
    align-items: center;
    gap: var(--space-4, 13px);
    flex: 0 0 auto;
}

.linkedin-extension-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7, 55px);
    height: var(--space-7, 55px);
    background: linear-gradient(135deg, #0A66C2 0%, #0077B5 100%);
    border-radius: var(--radius-lg, 13px);
    box-shadow: 0 var(--space-2, 8px) var(--space-4, 13px) rgba(10, 102, 194, 0.4);
}

.linkedin-extension-banner-icon i {
    font-size: var(--text-2xl, 34px);
    color: #fff;
}

.linkedin-extension-banner-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.linkedin-extension-banner-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.linkedin-extension-banner-header h4 {
    margin: 0;
    font-size: var(--text-lg, 21px);
    font-weight: 600;
    color: var(--text-primary, #fff);
    line-height: 1.2;
}

.linkedin-extension-version {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0, 2px) var(--space-2, 8px);
    background: rgba(10, 102, 194, 0.3);
    border: 1px solid rgba(10, 102, 194, 0.5);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    color: #60a5fa;
}

.linkedin-extension-banner-subtitle {
    margin: 0;
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    line-height: 1.4;
}

.linkedin-extension-banner-features {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    font-size: var(--text-xs, 11px);
    color: rgba(10, 102, 194, 0.9);
}

.linkedin-extension-banner-features i {
    color: #22c55e;
}

/* --- 8d. CENTER - INSTALLATION STEPS --- */
.linkedin-extension-banner-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 1;
    justify-content: center;
}

.linkedin-extension-step {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 8px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 8px);
    transition: all var(--duration-fast, 0.191s) ease;
}

.linkedin-extension-step:hover {
    background: rgba(10, 102, 194, 0.15);
    border-color: rgba(10, 102, 194, 0.4);
}

.linkedin-extension-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5, 21px);
    height: var(--space-5, 21px);
    background: linear-gradient(135deg, #0A66C2 0%, #0077B5 100%);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    font-weight: 700;
    color: #fff;
}

.linkedin-extension-step-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.linkedin-extension-step-title {
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: var(--text-primary, #fff);
    line-height: 1.2;
}

.linkedin-extension-step-desc {
    font-size: 10px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    line-height: 1.2;
}

.linkedin-extension-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(10, 102, 194, 0.5);
    font-size: var(--text-xs, 11px);
}

/* --- 8e. RIGHT SIDE - ACTIONS --- */
.linkedin-extension-banner-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 8px);
    flex: 0 0 auto;
}

.linkedin-extension-download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 8px) var(--space-5, 21px);
    background: linear-gradient(135deg, #0A66C2 0%, #0077B5 100%);
    border: none;
    border-radius: var(--radius-lg, 13px);
    color: #fff;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast, 0.191s) ease;
    box-shadow: 0 var(--space-2, 8px) var(--space-4, 13px) rgba(10, 102, 194, 0.3);
}

.linkedin-extension-download-btn:hover {
    background: linear-gradient(135deg, #0077B5 0%, #005885 100%);
    transform: translateY(-2px);
    box-shadow: 0 var(--space-3, 8px) var(--space-5, 21px) rgba(10, 102, 194, 0.4);
    color: #fff;
    text-decoration: none;
}

.linkedin-extension-download-btn:active {
    transform: translateY(0);
}

.linkedin-extension-download-btn i {
    font-size: var(--text-base, 16px);
}

.linkedin-extension-dismiss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5, 34px);
    height: var(--space-5, 34px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 8px);
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    transition: all var(--duration-fast, 0.191s) ease;
}

.linkedin-extension-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* --- 8f. RESPONSIVE --- */
@media (max-width: 1355px) {
    .linkedin-extension-banner-steps {
        display: none;
    }
}

@media (max-width: 838px) {
    .linkedin-extension-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4, 13px);
    }

    .linkedin-extension-banner-info {
        width: 100%;
    }

    .linkedin-extension-banner-actions {
        width: 100%;
        justify-content: space-between;
    }

    .linkedin-extension-download-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 518px) {
    .linkedin-extension-banner {
        padding: var(--space-3, 8px);
    }

    .linkedin-extension-banner-icon {
        width: var(--space-6, 34px);
        height: var(--space-6, 34px);
    }

    .linkedin-extension-banner-icon i {
        font-size: var(--text-xl, 21px);
    }

    .linkedin-extension-banner-header h4 {
        font-size: var(--text-base, 16px);
    }

    .linkedin-extension-banner-features {
        display: none;
    }
}

/* --- 8g. LIGHT THEME --- */
body.light-theme .linkedin-extension-banner,
.light-theme .linkedin-extension-banner {
    background: linear-gradient(135deg,
        rgba(10, 102, 194, 0.08) 0%,
        rgba(0, 119, 181, 0.04) 50%,
        rgba(10, 102, 194, 0.06) 100%);
    border-color: rgba(10, 102, 194, 0.2);
}

body.light-theme .linkedin-extension-banner-header h4,
.light-theme .linkedin-extension-banner-header h4 {
    color: #1e293b;
}

body.light-theme .linkedin-extension-banner-subtitle,
.light-theme .linkedin-extension-banner-subtitle {
    color: #475569;
}

body.light-theme .linkedin-extension-banner-features,
.light-theme .linkedin-extension-banner-features {
    color: #0A66C2;
}

body.light-theme .linkedin-extension-step,
.light-theme .linkedin-extension-step {
    background: rgba(10, 102, 194, 0.05);
    border-color: rgba(10, 102, 194, 0.15);
}

body.light-theme .linkedin-extension-step-title,
.light-theme .linkedin-extension-step-title {
    color: #1e293b;
}

body.light-theme .linkedin-extension-step-desc,
.light-theme .linkedin-extension-step-desc {
    color: #64748b;
}

body.light-theme .linkedin-extension-dismiss-btn,
.light-theme .linkedin-extension-dismiss-btn {
    background: rgba(10, 102, 194, 0.05);
    border-color: rgba(10, 102, 194, 0.15);
    color: #64748b;
}