/*!
 * cockpit.css — couche cockpit du Design System Lamarck v1.0.
 *
 * PLUS AUCUNE COULEUR EN DUR ICI : la palette vit dans ds-tokens.css
 * (source de vérité unique, light + dark). Ce fichier ne contient que :
 *   1. des ALIAS d'historique (--surface2 → --surface-2…) pour le CSS
 *      écrit avant la convergence des noms de tokens ;
 *   2. une couche de COMPAT legacy tokenisée (.kpi/.fbtn/.filter-bar/.dp/
 *      .panel…) encore consommée par intercontrat/crm/connect/leave —
 *      à retirer quand ces apps auront migré vers .kpi-card/.segmented/
 *      .filter-chip (cf. ds-components.css) ;
 *   3. le STRUCTUREL cockpit sans équivalent DS : zone filtres repliable,
 *      sparklines, icônes coin de carte, spinner KPI, modales helper et
 *      drill-down, toasts, grisage « données mock ».
 *
 * Chargé par app_base_v2.html AVANT ds-tokens/ds-components (les var()
 * se résolvent à l'usage, l'ordre est sans effet sur les alias).
 */

/* ── 1. Alias d'historique vers les tokens DS ───────────────────────── */
:root{
  --surface2:     var(--surface-2);
  --border2:      var(--border-2);
  --mono:         var(--font-mono);
  --shm:          var(--sh-lg);
  /* Marquage « données fictives » (cartes mock) */
  --surface-mock: var(--amber-light);
  --border-mock:  var(--amber);
}

/* ── 2. Compat legacy (tokenisée) ───────────────────────────────────── */
/* Barres de filtres pilule — remplacées par .filter-row/.segmented/
   .filter-chip (ds-components.css) dans les cockpits migrés. */
.filter-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:8px;height:42px;overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-bar2{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:8px;height:38px;overflow-x:auto;scrollbar-width:none}
.filter-bar2::-webkit-scrollbar{display:none}
.filter-bar-period .filter-period.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.dp{
  font-family:var(--mono); font-size:11px; padding:4px 8px;
  border:1px solid var(--border2); border-radius:6px;
  background:var(--surface); color:var(--text); outline:none;
  cursor:pointer;
}
.dp:focus{ border-color:var(--accent); }
:root[data-theme="dark"] .dp::-webkit-calendar-picker-indicator{ filter:invert(1); }
.flbl{font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.fsep{width:1px;height:16px;background:var(--border2);flex-shrink:0}
.fbtn{flex-shrink:0;font-family:var(--font);font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.fbtn.active{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}
.fbtn:not(.active):hover{background:var(--surface2);color:var(--text)}

/* KPI card legacy — remplacée par .kpi-card (ds-components.css). */
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:13px 14px 11px;
  display:grid; grid-template-columns:1fr;
  cursor:pointer; position:relative;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.kpi:hover{ border-color:var(--border2); box-shadow:var(--sh); }
.klbl{
  grid-row:1; margin:0; padding-right:70px;  /* réserve la place du .kicons absolute en top-right */
  font-size:10px; font-weight:500; color:var(--muted);
  letter-spacing:.4px; text-transform:uppercase;
}
.kdelta{
  grid-row:2; justify-self:start; margin:5px 0 0;
  font-size:10px; font-weight:500;
  padding:2px 8px; border-radius:999px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ksub{
  grid-row:4; margin:4px 0 0;
  font-size:10px; color:var(--muted); white-space:nowrap;
}
.ksub:empty{ display:none; }
.kdelta:empty{ display:none; }
.kdelta.up   { background:var(--green-light); color:var(--green); }
.kdelta.down { background:var(--red-light);   color:var(--red);   }
.kdelta.neu  { background:var(--surface2);    color:var(--muted); }
.kval{
  grid-row:3; margin:8px 0 0;
  font-size:30px; font-weight:400; color:var(--text);
  line-height:1; letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
}
@media(max-width:760px){.kval{font-size:26px}}

/* Panneau legacy — remplacé par .card + .card-h/.card-body. */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px;box-shadow:var(--sh)}
.ptitle{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}

/* Grilles KPI legacy — remplacées par .kpi-grid / .kpi-grid.mini. */
.g4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
@media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}}
.g2{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
@media(min-width:768px){.g2{grid-template-columns:1fr 1fr}}
.g31{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
@media(min-width:900px){.g31{grid-template-columns:2fr 1fr}}

/* Onglets cockpit legacy (.nav/.ntab) — préférer app_tabs (rangée 2 de
   la lkbar, cf. topbar_v2.html) ; conservé pour les pages non migrées. */
.nav{background:var(--surface);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.ntab{flex-shrink:0;padding:0 16px;height:42px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;user-select:none}
.ntab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ntab:hover:not(.active){color:var(--text)}

/* Badges source legacy (ceo) — alignés sur .badge de ds-components. */
.b-boond{background:var(--green-light);color:var(--green);border:1px solid var(--green)}
.b-excel{background:var(--amber-light);color:var(--amber);border:1px solid var(--amber)}

/* ── 3. Structurel cockpit (sans équivalent DS) ─────────────────────── */
html{font-size:16px}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.main{padding:14px 12px;max-width:1400px;margin:0 auto}
@media(min-width:768px){.main{padding:20px 24px}}

/* ── Zone filtres repliable (cockpit-filters) ──────────────────────
   Wrapper <details> partagé par les cockpits (recrutement/ceo/commerce).
   Les barres/rangées de filtres vivent dans .cockpit-filters-body.
   En light comme en dark, le summary reste discret (header de section). */
.cockpit-filters{background:var(--surface);border-bottom:1px solid var(--border)}
.cockpit-filters-summary{cursor:pointer;list-style:none;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.3px;color:var(--muted);
  display:flex;align-items:center;gap:8px;padding:9px 16px;user-select:none}
.cockpit-filters-summary::-webkit-details-marker{display:none}
.cockpit-filters-summary:hover{color:var(--text)}
.cf-caret{display:inline-block;transition:transform .15s;font-size:10px}
.cockpit-filters[open] .cf-caret{transform:rotate(90deg)}
/* Quand replié, le summary porte lui-même le séparateur ; quand ouvert,
   ce sont les barres internes qui l'apportent → on neutralise le double. */
.cockpit-filters[open] .cockpit-filters-summary{border-bottom:1px solid var(--border)}
.cockpit-filters-body .filter-bar:last-child,
.cockpit-filters-body .filter-bar2:last-child,
.cockpit-filters-body .filter-row:last-child,
.cockpit-filters-body .bu-banner:last-child{border-bottom:none}
/* Rangées de filtres DS dans la zone repliable : même rythme que les
   anciennes barres (padding horizontal aligné sur .lk-main/.main). */
.cockpit-filters-body .filter-row{padding:8px 16px;border-bottom:1px solid var(--border)}

.bu-banner{display:none;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.bu-banner.show{display:flex}
.bu-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bu-name{font-size:12px;font-weight:500}
.bu-hint{font-size:11px;color:var(--muted)}

/* Grisage des éléments mock — direct (`[data-source="mock"]`) ou hérité
   d'un container parent. On désature aussi pour signaler clairement
   « données factices » sans les masquer. Cible les cartes DS (.kpi-card/
   .card) ET la compat legacy (.kpi/.panel). */
.kpi[data-source="mock"], .kpi-card[data-source="mock"],
[data-source="mock"] .kpi:not([data-source="live"]),
[data-source="mock"] .kpi-card:not([data-source="live"]),
[data-source="mock"] .panel,
[data-source="mock"] .card {
  background: var(--surface-mock);
  border-color: var(--border-mock);
  filter: saturate(0.45);
}
.kpi[data-source="mock"]:hover, .kpi-card[data-source="mock"]:hover,
[data-source="mock"] .kpi:not([data-source="live"]):hover,
[data-source="mock"] .kpi-card:not([data-source="live"]):hover,
[data-source="mock"] .panel:hover,
[data-source="mock"] .card:hover {
  filter: saturate(0.6);  /* léger uplift au hover pour confirmer interactivité */
}

/* Les cartes KPI DS accueillent les icônes coin haut-droit (.kicons) et
   les sparklines : il leur faut le positionnement relatif du legacy. */
.kpi-card{ position:relative; }

.spark-wrap{ height:42px; margin-top:8px; }
.spark-wrap canvas{ width:100%!important; height:42px!important; }
/* Card avg_salary : sparkline plus haute (lecture/usage du tooltip plus confortable) */
[data-kpi="avg_salary"] .spark-wrap{ height:80px; margin-top:10px; }
[data-kpi="avg_salary"] .spark-wrap canvas{ height:80px!important; }

.shim{display:inline-block;width:80px;height:30px;background:var(--surface2);border-radius:4px;animation:shim 1.5s ease-in-out infinite}
@keyframes shim{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Spinner KPI ─────────────────────────────────────────────────── */
/* Pattern : KPI card en cours de chargement (calcul SQL latent côté
   PG OVH). On affiche un rond rotatif centré dans la card pour donner
   un feedback visuel "ça calcule, pas planté". Adopté par commerce,
   recrutement, ceo, et toute autre app KPI qui hit Boond Silver. */
.kpi-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 2.5px solid var(--surface2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lk-spin 0.8s linear infinite;
  vertical-align: middle;
}
.kpi-spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.kpi-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes lk-spin { to { transform: rotate(360deg); } }

/* Container helper : centre le spinner + libellé secondaire dans une
   card KPI pendant le chargement. */
.kpi-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* HTMX indicator : visible uniquement pendant le swap (htmx ajoute
   `.htmx-request` au déclencheur). Évite le flash si la requête est
   instantanée (< 100ms). */
.kpi-spinner.htmx-indicator { opacity: 0; transition: opacity 0.15s 0.1s; }
.htmx-request .kpi-spinner.htmx-indicator,
.kpi-spinner.htmx-indicator.htmx-request { opacity: 1; }

/* Source = dot coloré dans le conteneur .kicons (top-right avec helper et annot).
   Texte caché, gardé pour title tooltip. */
.src-badge{
  width:8px; height:8px; padding:0; margin:0;
  font-size:0; color:transparent; line-height:0;
  border-radius:50%; border:none;
  flex:0 0 auto;
}
.src-live { background:var(--green); }
.src-cache{ background:var(--accent); }
.src-mock { background:var(--amber); }

/* Conteneur des icônes top-right : helper, annotation, source dot.
   Flexbox aligne les 3 sur la même ligne avec un gap propre. */
.kicons{
  position:absolute; top:9px; right:10px; z-index:2;
  display:flex; align-items:center; gap:7px;
}
.khelper{
  width:14px; height:14px; line-height:13px; text-align:center;
  border-radius:50%; font-size:9px; font-weight:600;
  background:var(--surface2); color:var(--muted);
  cursor:pointer; user-select:none; transition:all .15s;
  border:1px solid var(--border);
}
.khelper:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.kannot{
  font-size:12px; line-height:1; color:var(--accent);
  cursor:help; user-select:none;
}

/* Modale helper KPI (séparée de la modale drill-down — petit format infos métier) */
.khm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.khm-overlay.open{ display:flex; }
.khm-modal{
  background:var(--surface); border-radius:12px; padding:22px 24px;
  width:100%; max-width:820px; box-shadow:var(--sh-lg);
  max-height:85vh; overflow-y:auto;
}
.khm-title{ font-size:16px; font-weight:500; color:var(--text); margin-bottom:6px; }
.khm-desc{ font-size:12px; color:var(--muted); margin-bottom:18px; line-height:1.5; }
.khm-row{ display:grid; grid-template-columns:90px 1fr; gap:8px; padding:8px 0; border-top:1px solid var(--border); font-size:12px; }
.khm-row:first-of-type{ border-top:none; }
.khm-row dt{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding-top:2px; }
.khm-row dd{ margin:0; color:var(--text); line-height:1.5; }
.khm-row dd code{ background:var(--surface2); padding:2px 6px; border-radius:3px; font-family:var(--mono); font-size:11px; }
.khm-close{
  float:right; background:transparent; border:none; font-size:20px; color:var(--muted);
  cursor:pointer; padding:0 4px; line-height:1;
}
.khm-close:hover{ color:var(--text); }

/* Barres horizontales, alertes, scorecards, funnel (panneaux cockpit). */
.brow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.blbl{font-size:10px;color:var(--muted);width:90px;flex-shrink:0;text-align:right}
.btrack{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.bfill{height:100%;border-radius:3px;transition:width .7s ease}
.bval{font-size:10px;color:var(--text);width:38px;flex-shrink:0;font-family:var(--mono);font-weight:500}
.alert{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);margin-bottom:6px}
.adot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px}
.dr{background:var(--red)}.da{background:var(--amber)}.dg{background:var(--green)}.db{background:var(--accent)}
.atxt{font-size:11px;color:var(--text);line-height:1.45}
.atag{font-size:9px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.scg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sci{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:7px;background:var(--surface2);border:1px solid var(--border)}
.scl{font-size:10px;color:var(--muted)}.scv{font-size:11px;font-weight:600;font-family:var(--mono)}
.svg{color:var(--green)}.sva{color:var(--amber)}.svr{color:var(--red)}.svn{color:var(--muted)}
.sdiv{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin:12px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.frow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.flblf{font-size:10px;color:var(--muted);width:80px;flex-shrink:0}
.fbar{height:24px;border-radius:5px;display:flex;align-items:center;padding:0 10px;font-size:10px;font-weight:600;font-family:var(--mono)}

.ai-box{background:var(--green-light);border:1px solid var(--green);border-radius:var(--rl);padding:16px 18px;margin-top:14px}
.ai-hdr{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ai-ttl{font-size:11px;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.ai-body{font-size:12px;color:var(--text-2);line-height:1.7}
.ai-btn{margin-top:10px;font-family:var(--font);font-size:11px;font-weight:500;padding:7px 14px;border-radius:7px;background:var(--surface);border:1px solid var(--green);color:var(--green);cursor:pointer;transition:all .15s}
.ai-btn:hover{background:var(--green);color:#fff}
.ai-btn:disabled{opacity:.5;cursor:not-allowed}

/* Modale drill-down KPI. */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;padding:16px}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--rl);padding:24px;width:100%;max-width:820px;box-shadow:var(--sh-lg);position:relative;max-height:90vh;overflow-y:auto}
.mcl{position:absolute;top:14px;right:14px;background:var(--surface2);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.mttl{font-size:13px;font-weight:600;margin-bottom:3px}
.mmeta{font-size:11px;color:var(--muted);margin-bottom:14px}
.mval{font-size:36px;font-weight:300;font-variant-numeric:tabular-nums}
.mdelta{font-size:12px;margin-bottom:4px}
.mperiod{font-size:10px;color:var(--muted);font-family:var(--mono);margin-bottom:16px}
.mspark{height:140px;margin-bottom:14px}
.mspark canvas{height:140px!important}

/* Utility classes (utilisées aussi par .mdelta dans la modale) */
.up{color:var(--green)}.down{color:var(--red)}.neu{color:var(--muted)}

.pane{display:none}.pane.active{display:block}
.spacer{height:24px}

/* Logo PNG en sombre (utilisé par le portail) :
   - invert(1) : fond blanc → noir, lettres noires → blanches
   - mix-blend-mode:lighten : le noir résultant se fond dans le chrome sombre,
     les lettres blanches restent visibles. */
:root[data-theme="dark"] .logo-img{ filter:invert(1); mix-blend-mode:lighten; }

/* ── Toasts (notifications d'état : succès / warning / erreur / info) ──
   Conteneur fixe en haut de page, centré, 3/4 de la largeur sur desktop
   et quasi pleine largeur sur mobile (iPhone). Empilables. API JS :
   window.lkToast(msg, type). Style par type via la classe .is-<type>. */
.lk-toasts{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  width:min(75%,1100px); z-index:4000;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.lk-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-left:4px solid var(--muted);
  border-radius:var(--rl); padding:13px 16px;
  box-shadow:var(--shm);
  font-size:13.5px; line-height:1.45; font-family:var(--font);
  opacity:0; transform:translateY(-12px);
  transition:opacity .22s ease, transform .22s ease;
}
.lk-toast.show{ opacity:1; transform:translateY(0); }
.lk-toast.hide{ opacity:0; transform:translateY(-12px); }
.lk-toast-ico{ flex:0 0 auto; font-size:15px; line-height:1.4; }
.lk-toast-msg{ flex:1 1 auto; }
.lk-toast-close{
  flex:0 0 auto; cursor:pointer; border:0; background:transparent;
  color:var(--muted); font-size:17px; line-height:1; padding:0 0 0 6px; opacity:.7;
}
.lk-toast-close:hover{ opacity:1; }
.lk-toast.is-success{ border-left-color:var(--green); background:var(--green-light); }
.lk-toast.is-success .lk-toast-ico{ color:var(--green); }
.lk-toast.is-warning{ border-left-color:var(--amber); background:var(--amber-light); }
.lk-toast.is-warning .lk-toast-ico{ color:var(--amber); }
.lk-toast.is-error{ border-left-color:var(--red); background:var(--red-light); }
.lk-toast.is-error .lk-toast-ico{ color:var(--red); }
.lk-toast.is-info{ border-left-color:var(--accent); background:var(--accent-light); }
.lk-toast.is-info .lk-toast-ico{ color:var(--accent); }
@media (max-width:720px){
  .lk-toasts{ width:calc(100% - 20px); top:10px; }
  .lk-toast{ font-size:13px; padding:12px 14px; }
}