/* ══════════════════════════════════════════════════════
   THEME — Thème global clair / sombre de l'interface
   <html data-theme="light|dark"> est posé avant le rendu (index.php)
   puis suit le style de carte choisi (map-controller.js) :
   Clair → clair · Sombre / Satellite → sombre · Système → appareil.
   Chargé en DERNIER. Deux jeux de variables coexistent :
   - base (--bg-card, --ink…) : barre de recherche, FABs, fiches…
   - panneau (--dk-*)         : panneaux, réglages, fiche bus…
   Chaque thème donne ses valeurs aux DEUX jeux.
══════════════════════════════════════════════════════ */

/* ── Variables propres au thème (valeurs claires par défaut) ── */
:root {
  --bg-sheet:    #edeff2;   /* corps des fiches horaire / arrêt / notifs */
  --bg-past:     #e3e5ea;   /* arrêts déjà passés */
  --row-cur:     #fff7dc;   /* arrêt actuel */
  --skl:         #e3e6ec;
  --skl-shine:   rgba(255, 255, 255, .72);
  --tint-1:      rgba(14, 17, 24, .06);
  --tint-2:      rgba(14, 17, 24, .08);
  --tint-3:      rgba(14, 17, 24, .15);
  --map-bg:      #e8eaef;
  --primary-ink: #8a6a00;   /* texte jaune lisible sur fond clair */
  --red-ink:     #7f1d1d;
  --warn-ink:    #c2410c;
  --dk-blue:     #60a5fa;
  --on-primary:  #171204;   /* texte sur fond jaune, identique dans les deux thèmes */
}

/* ═════════════════════════ CLAIR ═════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  /* les panneaux (historiquement sombres) passent en clair */
  --dk-bg:       #ffffff;
  --dk-card:     #f5f6f8;
  --dk-card-2:   #eceef2;
  --dk-border:   #e6e8ee;
  --dk-border-2: #d6d9e1;
  --dk-text:     #0e1118;
  --dk-muted:    #5b6070;
  --dk-muted-2:  #8a8f9c;
  --dk-green:    #16a34a;
  --dk-red:      #dc2626;
  --dk-blue:     #2563eb;
}

/* ═════════════════════════ SOMBRE ════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* la base (historiquement claire) passe en sombre */
  --bg:           #101114;
  --bg-card:      #1c1e25;
  --bg-subtle:    #22252d;
  --bg-hover:     #2a2d36;
  --ink:          #f4f5f7;
  --ink-2:        #c9cdd6;
  --ink-3:        #9aa1ae;
  --ink-4:        #6d7380;
  --border:       #2b2e37;
  --border-dark:  #3a3e4a;
  --green:        #34d399;
  --green-soft:   rgba(52, 211, 153, .14);
  --red:          #f87171;
  --red-soft:     rgba(248, 113, 113, .15);
  --orange:       #fb923c;
  --blue:         #60a5fa;
  --primary-soft: rgba(255, 204, 0, .12);

  --shadow-xs:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-s:     0 2px 8px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.28);
  --shadow-m:     0 4px 16px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);
  --shadow-l:     0 8px 32px rgba(0,0,0,.48), 0 4px 12px rgba(0,0,0,.32);

  --bg-sheet:     #121318;
  --bg-past:      #17191e;
  --row-cur:      rgba(255, 204, 0, .10);
  --skl:          #262932;
  --skl-shine:    rgba(255, 255, 255, .06);
  --tint-1:       rgba(255, 255, 255, .06);
  --tint-2:       rgba(255, 255, 255, .09);
  --tint-3:       rgba(255, 255, 255, .16);
  --map-bg:       #1a1c21;
  --primary-ink:  var(--primary);
  --red-ink:      #fca5a5;
  --warn-ink:     #fdba74;
}

body {
  background: var(--map-bg);
}

/* ── Ajustements de composants en sombre ── */
:root[data-theme="dark"] .rchip.bus {
  background: rgba(34, 211, 238, .14);
  color: #67e8f9;
}

:root[data-theme="dark"] .tviz-status.early {
  background: rgba(96, 165, 250, .16);
}

/* catégories de perturbations : teintes plus claires, lisibles sur fond sombre */
:root[data-theme="dark"] .dsr-card-works     { --dsr-c: #fb923c; }
:root[data-theme="dark"] .dsr-card-deviation { --dsr-c: #a78bfa; }
:root[data-theme="dark"] .dsr-card-moved     { --dsr-c: #60a5fa; }
:root[data-theme="dark"] .dsr-card-removed   { --dsr-c: #f87171; }
:root[data-theme="dark"] .dsr-card-event     { --dsr-c: #f472b6; }
:root[data-theme="dark"] .dsr-card-strike    { --dsr-c: #f87171; }
:root[data-theme="dark"] .dsr-card-info      { --dsr-c: #94a3b8; }