/* ══════════════════════════════════════════════════════════════
   ATLAS ADMIN — polish PREMIUM (pilote Dashboard)
   Additif, non-destructif, CSS-only. Aligné sur le Design System.
   Dark (défaut) + Light (body.theme-light). Gated reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── PONT DESIGN SYSTEM · tokens sémantiques mappés sur la palette Atlas ──
   Rend les tokens DS (var(--bg-*), var(--text-*), var(--status-*)…)
   disponibles dans toute l'app, en dark ET en light, sans toucher aux
   CSS des modules. Point d'entrée du refactor progressif. */
:root{
  --bg-canvas:var(--navy,#050b22);
  --bg-surface:var(--panel,#0c1736);
  --bg-elevated:var(--panel2,#0e1c44);
  --bg-interactive:rgba(96,165,250,.06);
  --text-primary:var(--txt,#eaf0fb);
  --text-secondary:var(--mid,#aab6d0);
  --text-muted:var(--dim,#7f8db0);
  --border-default:var(--line,rgba(96,165,250,.14));
  --border-strong:var(--line2,rgba(96,165,250,.22));
  --action-primary:var(--blue,#2563eb);
  --action-hover:#3b82f6;
  --status-success:var(--green,#22c55e);
  --status-warning:var(--amber,#f59e0b);
  --status-danger:var(--red,#f87171);
  --status-info:var(--blue-l,#60a5fa);
  --ai-primary:var(--violet,#a882ff);
  --focus-ring:rgba(96,165,250,.5);
}
/* en clair, les primitives --txt/--line/… sont déjà réécrites par
   body.theme-light : les tokens DS suivent automatiquement. On ajuste
   seulement l'anneau de focus. */
body.theme-light{ --focus-ring:rgba(37,99,235,.42); }

/* ── KPI · reflet balayant au survol (non permanent) ── */
.kpi::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(150,200,255,.14) 50%,transparent);
  transform:skewX(-14deg);opacity:0}
.kpi:hover::after{animation:adSheen 1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes adSheen{0%{left:-60%;opacity:0}16%{opacity:1}100%{left:130%;opacity:0}}
body.theme-light .kpi::after{background:linear-gradient(105deg,transparent,rgba(37,99,235,.10) 50%,transparent)}

/* ── KPI · liseré supérieur qui s'allume au survol (hiérarchie) ── */
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--blue-l),transparent 70%);opacity:0;transition:opacity .3s}
.kpi:hover::before{opacity:.85}

/* ── Focus rings unifiés (accessibilité + finition) ── */
.kpi:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,
.act-btn:focus-visible,.icon-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--focus-ring) !important}
body.theme-light .kpi:focus-visible,body.theme-light .btn:focus-visible,
body.theme-light .btn-ghost:focus-visible,body.theme-light .act-btn:focus-visible,
body.theme-light .icon-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.42) !important}

/* ── KPI cliquable : curseur + micro-press ── */
.kpi[data-view],.kpi[role="button"],.kpi.clickable,.kpi[onclick]{cursor:pointer}
.kpi:active{transform:translateY(-1px) scale(.996)}

@media (prefers-reduced-motion:reduce){
  .kpi::after{display:none}
  .kpi::before{transition:none}
}

/* ── CRM · lignes client (.lcard) : accent gauche au survol + focus ── */
.lcard{transition:box-shadow .25s,border-color .25s,transform .2s}
.lcard:hover{box-shadow:var(--sh-lift),inset 3px 0 0 var(--blue-l)}
.lcard:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring) !important}
body.theme-light .lcard:hover{box-shadow:0 14px 34px -22px rgba(15,23,42,.28),inset 3px 0 0 var(--blue)}
body.theme-light .lcard:focus-visible{box-shadow:0 0 0 3px var(--focus-ring) !important}

/* ── Conversion tokens (démonstration · dashboard/KPI) ──
   Propriétés pilotées par les tokens DS (valeurs identiques au rendu
   actuel, mais désormais centralisées et dual-thème). */
.kpi{border-color:var(--border-default)}
.kpi .kpi-lbl{color:var(--text-secondary)}
.kpi .kpi-sub{color:var(--text-muted)}
.card{border-color:var(--border-default)}
.act-btn,.btn-ghost{border-color:var(--border-strong)}