/* ============================================================
   YABOX DS 2026 — Design System unique
   Tokens + composants. UNE seule source de vérité.
   Thèmes : [data-ds="2026"] (clair/bleu) · [data-ds="signature"] (sombre/orange)
   ⚠️ Non référencé par index.html tant que la palette n'est pas validée.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root, [data-ds="2026"]{
  /* Palette Vision 2026 (claire) */
  --ds-bg:#F8FAFC;            --ds-surface:#FFFFFF;       --ds-surface-2:#F1F5F9;
  --ds-border:#E2E8F0;        --ds-border-strong:#CBD5E1;
  --ds-text:#0F172A;          --ds-text-2:#475569;        --ds-muted:#64748B;
  --ds-primary:#2563EB;       --ds-primary-h:#1D4ED8;     --ds-primary-bg:#EFF6FF;
  --ds-success:#16A34A;       --ds-success-bg:#F0FDF4;
  --ds-warning:#F59E0B;       --ds-warning-bg:#FFFBEB;
  --ds-danger:#DC2626;        --ds-danger-bg:#FEF2F2;
  --ds-accent:#7C3AED;        --ds-accent-bg:#F5F3FF;
  /* Typo */
  --ds-font:'Plus Jakarta Sans',-apple-system,sans-serif;
  --ds-mono:'DM Mono',monospace;
  /* Échelles */
  --ds-r-sm:8px; --ds-r-md:11px; --ds-r-lg:14px; --ds-r-pill:999px;
  --ds-sp-1:4px; --ds-sp-2:8px; --ds-sp-3:12px; --ds-sp-4:16px; --ds-sp-5:24px;
  --ds-shadow-1:0 1px 3px rgba(15,23,42,.06);
  --ds-shadow-2:0 6px 20px rgba(15,23,42,.08);
  --ds-shadow-3:0 14px 40px rgba(15,23,42,.12);
  --ds-t:.14s ease;
}
[data-ds="signature"]{
  /* Palette Signature YABOX (sombre/orange actuelle, tokenisée) */
  --ds-bg:#0F0F12;            --ds-surface:#1E1E24;       --ds-surface-2:#16161A;
  --ds-border:#2A2A35;        --ds-border-strong:#3A3A48;
  --ds-text:rgba(255,255,255,.92); --ds-text-2:rgba(255,255,255,.72); --ds-muted:rgba(255,255,255,.5);
  --ds-primary:#E8400C;       --ds-primary-h:#FF7A45;     --ds-primary-bg:rgba(232,64,12,.14);
  --ds-success:#22C55E;       --ds-success-bg:rgba(34,197,94,.13);
  --ds-warning:#F59E0B;       --ds-warning-bg:rgba(245,158,11,.13);
  --ds-danger:#EF4444;        --ds-danger-bg:rgba(239,68,68,.13);
  --ds-accent:#C89B3C;        --ds-accent-bg:rgba(200,155,60,.13);
  --ds-shadow-1:0 1px 3px rgba(0,0,0,.35);
  --ds-shadow-2:0 6px 20px rgba(0,0,0,.45);
  --ds-shadow-3:0 14px 40px rgba(0,0,0,.55);
}

/* ── BASE ───────────────────────────────────────────────── */
.ds{font-family:var(--ds-font);color:var(--ds-text);background:var(--ds-bg);}
.ds *{box-sizing:border-box;}
.ds-mono{font-family:var(--ds-mono);}

/* ── BOUTONS (remplace les 42 classes) ──────────────────── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);
  border-radius:var(--ds-r-md);padding:8px 14px;font:600 13px var(--ds-font);
  cursor:pointer;transition:var(--ds-t);white-space:nowrap;}
.ds-btn:hover{border-color:var(--ds-border-strong);transform:translateY(-1px);box-shadow:var(--ds-shadow-1);}
.ds-btn:active{transform:translateY(0);}
.ds-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;}
.ds-btn--primary{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff;}
.ds-btn--primary:hover{background:var(--ds-primary-h);border-color:var(--ds-primary-h);box-shadow:var(--ds-shadow-2);}
.ds-btn--success{background:var(--ds-success);border-color:var(--ds-success);color:#fff;}
.ds-btn--danger{background:var(--ds-danger-bg);border-color:transparent;color:var(--ds-danger);}
.ds-btn--ghost{background:transparent;border-color:transparent;color:var(--ds-text-2);}
.ds-btn--sm{padding:5px 10px;font-size:12px;border-radius:var(--ds-r-sm);}
.ds-btn--lg{padding:12px 20px;font-size:14px;}

/* ── CARDS ──────────────────────────────────────────────── */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-1);}
.ds-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--ds-border);}
.ds-card__title{font:700 13px var(--ds-font);letter-spacing:.2px;}
.ds-card__body{padding:14px 16px;}
.ds-card--hover{transition:var(--ds-t);cursor:pointer;}
.ds-card--hover:hover{box-shadow:var(--ds-shadow-2);transform:translateY(-2px);border-color:var(--ds-border-strong);}

/* ── KPI (hiérarchie 3 secondes) ────────────────────────── */
.ds-kpi{background:var(--ds-surface);border:1px solid var(--ds-border);border-top:3px solid var(--ds-muted);
  border-radius:var(--ds-r-md);padding:12px 14px;box-shadow:var(--ds-shadow-1);}
.ds-kpi__label{font:700 9.5px var(--ds-font);text-transform:uppercase;letter-spacing:.6px;color:var(--ds-muted);}
.ds-kpi__value{font:800 22px var(--ds-mono);margin-top:3px;line-height:1;color:var(--ds-text);}
.ds-kpi__delta{font:700 11px var(--ds-font);margin-top:4px;}
.ds-kpi--primary{border-top-color:var(--ds-primary);} .ds-kpi--primary .ds-kpi__value{color:var(--ds-primary);}
.ds-kpi--success{border-top-color:var(--ds-success);} .ds-kpi--success .ds-kpi__value{color:var(--ds-success);}
.ds-kpi--warning{border-top-color:var(--ds-warning);} .ds-kpi--warning .ds-kpi__value{color:var(--ds-warning);}
.ds-kpi--danger{border-top-color:var(--ds-danger);}  .ds-kpi--danger .ds-kpi__value{color:var(--ds-danger);}
.ds-kpi__delta.up{color:var(--ds-success);} .ds-kpi__delta.down{color:var(--ds-danger);}

/* ── BADGES ─────────────────────────────────────────────── */
.ds-badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--ds-r-pill);
  padding:3px 10px;font:700 10.5px var(--ds-font);}
.ds-badge--primary{background:var(--ds-primary-bg);color:var(--ds-primary);}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success);}
.ds-badge--warning{background:var(--ds-warning-bg);color:#92600A;}
[data-ds="signature"] .ds-badge--warning{color:var(--ds-warning);}
.ds-badge--danger{background:var(--ds-danger-bg);color:var(--ds-danger);}
.ds-badge--neutral{background:var(--ds-surface-2);color:var(--ds-text-2);}

/* ── ALERTES ────────────────────────────────────────────── */
.ds-alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--ds-r-md);
  padding:11px 14px;font:600 12.5px var(--ds-font);border:1px solid;}
.ds-alert--danger{background:var(--ds-danger-bg);border-color:color-mix(in srgb,var(--ds-danger) 30%,transparent);color:var(--ds-danger);}
.ds-alert--warning{background:var(--ds-warning-bg);border-color:color-mix(in srgb,var(--ds-warning) 35%,transparent);color:#92600A;}
[data-ds="signature"] .ds-alert--warning{color:var(--ds-warning);}
.ds-alert--info{background:var(--ds-primary-bg);border-color:color-mix(in srgb,var(--ds-primary) 30%,transparent);color:var(--ds-primary);}

/* ── TABLES (sticky + lisible) ──────────────────────────── */
.ds-table-wrap{overflow:auto;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-1);max-height:70vh;}
.ds-table{width:100%;border-collapse:collapse;font:500 12.5px var(--ds-font);}
.ds-table th{position:sticky;top:0;z-index:2;background:var(--ds-surface-2);color:var(--ds-muted);
  font:700 10px var(--ds-font);text-transform:uppercase;letter-spacing:.6px;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--ds-border);white-space:nowrap;}
.ds-table td{padding:10px 12px;border-bottom:1px solid var(--ds-border);color:var(--ds-text);}
.ds-table tbody tr{transition:var(--ds-t);}
.ds-table tbody tr:hover{background:var(--ds-surface-2);}
.ds-table .num{font-family:var(--ds-mono);text-align:right;}

/* ── INPUTS ─────────────────────────────────────────────── */
.ds-input,.ds-select{border:1.5px solid var(--ds-border);border-radius:var(--ds-r-md);
  background:var(--ds-surface);color:var(--ds-text);padding:8px 11px;
  font:600 12.5px var(--ds-font);transition:var(--ds-t);outline:none;}
.ds-input:focus,.ds-select:focus{border-color:var(--ds-primary);box-shadow:0 0 0 3px var(--ds-primary-bg);}
.ds-input::placeholder{color:var(--ds-muted);}

/* ── SKELETON ───────────────────────────────────────────── */
.ds-skeleton{border-radius:var(--ds-r-sm);background:linear-gradient(90deg,var(--ds-surface-2) 25%,var(--ds-border) 50%,var(--ds-surface-2) 75%);
  background-size:200% 100%;animation:ds-shimmer 1.3s infinite;}
@keyframes ds-shimmer{to{background-position:-200% 0;}}

/* ── EMPTY STATE unique (remplace les 20 variantes) ─────── */
.ds-empty{text-align:center;padding:42px 20px;color:var(--ds-muted);}
.ds-empty__icon{font-size:30px;margin-bottom:8px;opacity:.7;}
.ds-empty__title{font:700 14px var(--ds-font);color:var(--ds-text-2);}
.ds-empty__sub{font:500 12px var(--ds-font);margin-top:4px;}

/* ── PILOTE P3 : Dashboard (overrides scopés .ds — zéro impact ailleurs) ── */
.db-page.ds{background:var(--ds-bg);padding:4px;border-radius:0;}
.db-page.ds .db-qa-label{color:var(--ds-text);}
.db-page.ds .db-qa-sub{color:var(--ds-muted);}
.db-page.ds .db-brand-stats b{color:var(--ds-text);}
.db-page.ds .db-badge-pill{border-radius:var(--ds-r-pill);font:700 10.5px var(--ds-font);}
.db-page.ds .db-title{font:800 19px var(--ds-font);color:var(--ds-text);}
.db-page.ds .db-subtitle,.db-page.ds .db-date{color:var(--ds-muted);font:500 12px var(--ds-font);}
.db-page.ds .obtn{border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);
  border-radius:var(--ds-r-md);padding:8px 14px;font:600 12.5px var(--ds-font);cursor:pointer;transition:var(--ds-t);}
.db-page.ds .obtn:hover{border-color:var(--ds-border-strong);transform:translateY(-1px);box-shadow:var(--ds-shadow-1);}
.db-page.ds .obtn-primary{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff;}
.db-page.ds .obtn-primary:hover{background:var(--ds-primary-h);}
.db-page.ds .kpi{background:var(--ds-surface);border:1px solid var(--ds-border);border-top:3px solid var(--ds-muted);
  border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-1);transition:var(--ds-t);}
.db-page.ds .kpi:hover{box-shadow:var(--ds-shadow-2);transform:translateY(-2px);}
.db-page.ds .kpil{color:var(--ds-muted);font:700 9.5px var(--ds-font);text-transform:uppercase;letter-spacing:.6px;}
.db-page.ds .kpiv{font:800 22px var(--ds-mono);color:var(--ds-text);}
.db-page.ds .kpi-sub{color:var(--ds-text-2);font:600 10.5px var(--ds-font);}
.db-page.ds .kpi.blue{border-top-color:var(--ds-primary);}   .db-page.ds .kpi.blue .kpiv{color:var(--ds-primary);}
.db-page.ds .kpi.green{border-top-color:var(--ds-success);}  .db-page.ds .kpi.green .kpiv{color:var(--ds-success);}
.db-page.ds .kpi.sky{border-top-color:#0EA5E9;}              .db-page.ds .kpi.sky .kpiv{color:#0EA5E9;}
.db-page.ds .kpi.red{border-top-color:var(--ds-danger);}     .db-page.ds .kpi.red .kpiv{color:var(--ds-danger);}
.db-page.ds .kpi.orange{border-top-color:var(--ds-warning);} .db-page.ds .kpi.orange .kpiv{color:var(--ds-warning);}
.db-page.ds .kpi.violet{border-top-color:var(--ds-accent);}  .db-page.ds .kpi.violet .kpiv{color:var(--ds-accent);}
.db-page.ds .kpi-icon{opacity:.45;filter:grayscale(.3);}
.db-page.ds .db-widget{background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-1);}
.db-page.ds .db-widget-hdr{border-bottom:1px solid var(--ds-border);}
.db-page.ds .db-widget-title{font:700 12.5px var(--ds-font);color:var(--ds-text);}
.db-page.ds .db-widget-sub{color:var(--ds-muted);}
.db-page.ds .db-agent-name,.db-page.ds .db-brand-name{color:var(--ds-text);}
.db-page.ds .db-agent-role{color:var(--ds-muted);}
.db-page.ds .db-quick-action{background:var(--ds-surface-2);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-md);color:var(--ds-text);transition:var(--ds-t);}
.db-page.ds .db-quick-action:hover{border-color:var(--ds-primary);background:var(--ds-primary-bg);}
.db-page.ds .skeleton{background:linear-gradient(90deg,var(--ds-surface-2) 25%,var(--ds-border) 50%,var(--ds-surface-2) 75%);
  background-size:200% 100%;animation:ds-shimmer 1.3s infinite;}
.db-page.ds .loading-center{color:var(--ds-muted);}
.db-page.ds .db-ds-toggle{width:38px;padding:8px 0;text-align:center;}

/* ============================================================
   V3483 — THÈME GLOBAL : body.ds remappe les variables legacy
   vers les tokens DS. Permet au toggle topbar d'agir sur TOUTE
   l'app. Le défaut reste data-ds="2026" (clair).
   Prudence : on ne remappe que les variables de COULEUR neutres,
   pas les couleurs sémantiques de marque, pour éviter les surprises.
   ============================================================ */
body.ds[data-ds="2026"]{
  /* Fonds / surfaces / bordures / textes → palette claire */
  --bg:var(--ds-bg);            --bg-2:var(--ds-surface);     --bg2:var(--ds-surface-2);
  --bg-base:var(--ds-bg);       --bg-elev:var(--ds-surface);  --white:var(--ds-surface);
  --surface:var(--ds-surface);  --card:var(--ds-surface);
  --border:var(--ds-border);    --border2:var(--ds-border);   --border-2:var(--ds-border);
  --text:var(--ds-text);        --text2:var(--ds-text-2);     --text3:var(--ds-muted);
  --text-dim:var(--ds-text-2);  --text-faint:var(--ds-muted);
  /* Couleurs sémantiques (pour les inline qui les utilisent) */
  --green:var(--ds-success);    --red:var(--ds-danger);       --orange:var(--ds-warning);
  --blue:var(--ds-primary);     --violet:var(--ds-accent);
  --red-bg:var(--ds-danger-bg); --green-bg:var(--ds-success-bg); --orange-bg:var(--ds-warning-bg);
  --r:var(--ds-r-md);
  background:var(--ds-bg); color:var(--ds-text);
}
/* Neutraliser les !important du thème sombre UNIQUEMENT en mode clair */
body.ds[data-ds="2026"] .kpil,
body.ds[data-ds="2026"] .kpi-sub{ color:var(--ds-muted)!important; }
body.ds[data-ds="2026"] .kpi,
body.ds[data-ds="2026"] .kpi-card{ background:var(--ds-surface)!important; border-color:var(--ds-border)!important; }
body.ds[data-ds="2026"] .kpis{ background:transparent!important; }
body.ds[data-ds="2026"] .kpi-icon{ opacity:.4!important; }

/* Le thème signature = comportement historique (sombre/orange).
   On laisse les variables natives YABOX telles quelles : aucun remap,
   donc aucune régression par rapport à l'app actuelle. */
body.ds[data-ds="signature"]{ background:var(--ds-bg); color:var(--ds-text); }

/* Topbar : icône thème lisible dans les deux modes */
#btn-ds-theme{ font-size:15px; }