/**
 * ============================================================
 * 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: transform var(--duration-medium, 0.309s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1)), background-color var(--duration-medium, 0.309s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1)), border-color var(--duration-medium, 0.309s) var(--ease-golden, cubic-bezier(0.382, 0, 0.618, 1)), box-shadow 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(230, 57, 70, 0.191));
    color: var(--accent-secondary, #E63946);
    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);
}

/* --- 1f-bis. KPI « A COMPLETER » ---
   Variante d'une carte KPI qui, faute de donnee, cesse d'annoncer un nombre et
   invite a saisir. Elle est CLIQUABLE : c'est un raccourci vers les fiches
   concernees.

   Pourquoi une variante scopee, et pas un assouplissement de .phi-kpi-label :
   la regle generale impose `white-space: nowrap` + ellipse a TOUTES les cartes
   KPI de l'application. La detendre globalement changerait la hauteur de
   dizaines de cartes d'un coup — un correctif plus risque que le defaut. Ici
   seule la carte en mode « a completer » se replie.

   Le defaut corrige : « DISPONIBILITE A RENSEIG… » etait ampute a 1355 px,
   vu a l'oeil sur la capture (la sonde d'overflow, elle, mesurait le bon
   conteneur — cf. lecon 188).
   ------------------------------------ */
.phi-kpi-card.phi-kpi-a-completer {
    cursor: pointer;
    /* transform/opacity uniquement : aucune propriete qui declenche un calcul
       de mise en page pendant l'animation. */
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.phi-kpi-card.phi-kpi-a-completer:hover {
    transform: translateY(-2px);
}

/* Le focus doit se voir au clavier autant que le survol a la souris. */
.phi-kpi-card.phi-kpi-a-completer:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* Le libelle se replie au lieu d'etre ampute.

   Trois choix, tous imposes par la CAPTURE a 320 px, ou la premiere version
   rendait « DISPONIBILI / TE A… » — le mot coupe en son milieu puis tronque :

   1. pas de `-webkit-line-clamp` : il masque la troncature au lieu de
      l'empecher, et une sonde d'overflow horizontal ne la voit pas ;
   2. pas de MAJUSCULES sur cette variante : elles coutent ~15 % de largeur
      pour un libelle deja long, et se lisent moins bien sur deux lignes ;
   3. `word-break: keep-all` + `overflow-wrap: normal` : un retour a la ligne
      se prend ENTRE deux mots, jamais au milieu de l'un d'eux. */
/* Le libelle se replie LA OU IL Y A LA PLACE, c'est-a-dire au-dessus de 768 px.

   Pourquoi pas a 320 px : la grille KPI y impose deux colonnes — decision
   produit deliberee, inscrite en commentaire dans ce fichier. Il reste alors
   68 px de large, quand le seul mot « Disponibilite » en mesure 88. AUCUN
   libelle reel n'y tient : tous les autres y sont coupes a l'ellipse. Forcer
   celui-ci a se replier le faisait deborder de 20 px sur la carte voisine, ou
   couper le mot en son milieu. On ne combat pas le design system pour une
   carte : en dessous de 768 px, elle se comporte comme ses soeurs, et le texte
   entier reste accessible par `title` et `aria-label`.

   RETIRER une declaration ne l'annule pas : la regle mobile de ce fichier
   (§1g-ter) repose `-webkit-line-clamp: 2` sur tout .phi-kpi-label ; il faut la
   neutraliser explicitement. */
@media (min-width: 769px) {
    .phi-kpi-card.phi-kpi-a-completer .phi-kpi-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.3;
        word-break: keep-all;
        overflow-wrap: normal;
        hyphens: none;
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
    }

    /* `.phi-kpi-info` porte `overflow: hidden`, qui rognait le libelle replie
       meme une fois le clamp leve. */
    .phi-kpi-card.phi-kpi-a-completer .phi-kpi-info {
        overflow: visible;
    }

    .phi-kpi-card.phi-kpi-a-completer {
        height: auto;
        align-items: flex-start;
    }
}

/* La carte reste une cible confortable une fois devenue actionnable. */
.phi-kpi-card.phi-kpi-a-completer .phi-kpi-info {
    min-height: 44px;
}

/* Deux libelles, un seul visible. Les DEUX textes existent dans le HTML et dans
   les fichiers de traduction : la media query choisit lequel s'affiche, elle
   n'invente aucun contenu. */
.phi-kpi-label-court { display: none; }

@media (max-width: 768px) {
    .phi-kpi-label-long { display: none; }
    .phi-kpi-label-court { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .phi-kpi-card.phi-kpi-a-completer,
    .phi-kpi-card.phi-kpi-a-completer:hover {
        transition: none;
        transform: none;
    }
}

/* --- 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(230, 57, 70, 0.191));
    color: var(--accent-secondary, #E63946);
}

/* 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(212, 175, 55, 0.191));
    color: var(--phi-violet-light, #D4AF37);
}

/* 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(196, 30, 58, 0.191));
    color: var(--accent-primary, #C41E3A);
}

/* 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(184, 150, 46, 0.191));
    color: var(--phi-pink, #B8962E);
}

/* 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(230, 57, 70, 0.618)); }
body .phi-kpi-blue .phi-kpi-value { color: var(--info-light, #FF5A67); }

.phi-kpi-purple { border-left: 3px solid var(--accent-tertiary-60, rgba(212, 175, 55, 0.618)); }
body .phi-kpi-purple .phi-kpi-value { color: var(--accent-tertiary-light, #E5C158); }

.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(196, 30, 58, 0.618)); }
body .phi-kpi-cyan .phi-kpi-value { color: var(--accent-primary-light, #E63946); }

.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(184, 150, 46, 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(230, 57, 70, 0.191));
    color: var(--accent-secondary, #E63946);
}

/* 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(212, 175, 55, 0.191));
    color: var(--accent-tertiary, #D4AF37);
}

/* 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(196, 30, 58, 0.191));
    color: var(--accent-primary, #C41E3A);
}

/* 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, #C41E3A);
    border-width: 2px;
    background: var(--accent-primary-10, rgba(196, 30, 58, 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) {
    /* 2 colonnes conservées (voir bloc φ 838px plus bas, qui a le dernier mot
       en cascade) — jamais d'empilement pleine largeur sur mobile. */
    .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);
    }

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

/* --- 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: #1A1A1A !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(230, 57, 70, 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, #B8962E), 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(230, 57, 70, 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, #B8962E), 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(230, 57, 70, 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(230, 57, 70, 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);
    }
}

/* --- φ breakpoint 838px : grille KPI compacte 2 colonnes ---
   Root cause troncature mobile : les anciennes règles ci-dessus
   passaient en 1 colonne pleine largeur (≤480px) SANS jamais autoriser
   le wrap du texte (nowrap+ellipsis figés sur .phi-kpi-value/.phi-kpi-label).
   Fix : grille 2 colonnes systématique dès ≤838px (φ) + wrap 2 lignes
   + cartes plus basses (padding/icone réduits) pour tenir le contenu
   actionnable au-dessus de la ligne de flottaison mobile.
   ------------------------------------------------------------------ */
@media (max-width: 838px) {
    .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);
        margin-bottom: var(--space-3, 8px);
    }

    .phi-kpi-card,
    body .kpi-card,
    body .ats-kpi-card,
    body .stat-card,
    body .mc-kpi-card {
        padding: var(--space-3, 8px);
        gap: var(--space-2, 8px);
        align-items: flex-start;
    }

    .phi-kpi-icon,
    body .kpi-icon,
    body .stat-icon {
        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);
    }

    /* Autorise le wrap sur 2 lignes : plus de troncature "AUJO…", "CETTE…" */
    .phi-kpi-value,
    body .kpi-value,
    body .stat-value {
        font-size: var(--text-lg, 21px);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
    }

    .phi-kpi-label,
    body .kpi-label,
    body .stat-label {
        font-size: var(--text-2xs, 10px);
        letter-spacing: 0.02em;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
    }

    /* Variante .phi-kpi-compact (utilisée par /ats/interviews) : les
       sélecteurs source (1g-quater) sont plus spécifiques que .phi-kpi-value
       seul ci-dessus et gagneraient sinon la cascade → wrap répété ici. */
    .phi-kpi-compact,
    body .kpi-card.compact,
    body .kpi-card.extra-compact,
    body .kpi-card-compact,
    body .ats-kpi-card-compact {
        padding: var(--space-2, 8px) var(--space-3, 8px);
        gap: var(--space-2, 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 {
        width: var(--space-5, 21px);
        height: var(--space-5, 21px);
        min-width: var(--space-5, 21px);
        font-size: var(--text-xs, 13px);
    }

    .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-base, 16px);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
    }

    .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, 10px);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* --- General Components Responsive (768px) --- */
@media (max-width: 768px) {
    .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) - reste 2 colonnes compactes (cf. bloc φ 838px) :
   1 seule colonne pleine largeur = 2-3 écrans de scroll avant tout contenu
   actionnable (mesuré /ats/ma-journee = 3.5 écrans). Grille 2 colonnes
   conservée jusqu'à 320px, seul le gap se resserre. */
@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: repeat(2, 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: #FF5A67;
}

/* --- Extension Update Badge (Banner) --- */
.extension-update-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-0, 2px) var(--space-2, 8px);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: #fff;
    animation: pulse-glow 2s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.extension-update-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 0 var(--space-3, 13px) rgba(34, 197, 94, 0.4);
}

.extension-update-badge i {
    font-size: var(--text-sm, 13px);
}

/* --- Extension Version Badge (Header Button) --- */
.extension-version-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-4, 18px);
    height: var(--space-4, 18px);
    padding: 0 var(--space-1, 4px);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 2px solid var(--bg-card, #1A1A1A);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    z-index: 10;
}

.extension-version-badge.pulse-animation {
    animation: badge-pulse 1.5s ease-in-out infinite;
}

.extension-version-badge.fade-out {
    animation: badge-fade-out 0.3s ease-out forwards;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 var(--space-3, 13px) rgba(34, 197, 94, 0.6);
    }
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 var(--space-2, 8px) rgba(34, 197, 94, 0.7);
    }
}

@keyframes badge-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Header button positioning for badge */
.btn-header-linkedin {
    position: relative;
}

.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;
}

/* --- 8e-bis. BANNER REPLIEE (1 ligne, quick-win UX) ---
   Etat compact affiche apres clic sur la croix : plus de bandeau haut qui
   pousse le kanban sous la ligne de flottaison, juste un rappel discret
   avec bouton pour ré-ouvrir. Persistance : localStorage
   helios_linkedin_banner_collapsed (cf. ats-candidates.js). */
.linkedin-extension-banner-collapsed {
    display: flex;
    align-items: center;
    gap: var(--space-3, 8px);
    padding: var(--space-2, 8px) var(--space-4, 13px);
    margin-bottom: var(--space-4, 13px);
    background: rgba(10, 102, 194, 0.08);
    border: 1px solid rgba(10, 102, 194, 0.2);
    border-radius: var(--radius-lg, 13px);
    color: var(--text-tertiary, rgba(255, 255, 255, 0.6));
    font-size: var(--text-xs, 11px);
}

.linkedin-extension-banner-collapsed i.bi-linkedin {
    color: #0A66C2;
    font-size: var(--text-sm, 13px);
}

.linkedin-extension-banner-collapsed-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linkedin-extension-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5, 21px);
    height: var(--space-5, 21px);
    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;
    flex: 0 0 auto;
    transition: all var(--duration-fast, 0.191s) ease;
}

.linkedin-extension-expand-btn:hover {
    background: rgba(10, 102, 194, 0.15);
    border-color: rgba(10, 102, 194, 0.4);
    color: #0A66C2;
}

body.light-theme .linkedin-extension-banner-collapsed,
.light-theme .linkedin-extension-banner-collapsed {
    background: rgba(10, 102, 194, 0.06);
    color: var(--text-secondary, rgba(15, 23, 42, 0.65));
}

/* --- 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: #1A1A1A;
}

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: #1A1A1A;
}

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;
}