/* ============================================================================
   AVIACS — Charte UI partagée (extrait fidèle d'AVIACS Omega)
   À importer EN PREMIER, avant les CSS de page (app.css).
   Règle d'or : plus jamais de hex en dur dans un composant — toujours var(--…).
   ============================================================================ */

:root {
  /* ── Neutres ──────────────────────────────────────────────────────── */
  --bg:           #f4f3f0;
  --surface:      #ffffff;
  --surface2:     #f9f8f6;
  --border:       #e2e0da;
  --border2:      #cccac3;
  --text:         #1a1916;
  --text2:        #5a5850;
  --text3:        #6e6d63;   /* assombri pour contraste AA (4.5:1) */
  --white:        #ffffff;

  /* ── Sémantique (statuts) ─────────────────────────────────────────── */
  --accent:       #1a3a5c;  --accent-light: #e8edf3;
  --accent-solid: #1a3a5c;  /* boutons pleins accent — reste sombre en dark (texte blanc lisible AA) */
  --green:        #1e6b45;  --green-light:  #e6f2ec;
  --amber:        #8a5a00;  --amber-light:  #fdf3e0;
  --red:          #8a1f1f;  --red-light:    #fde8e8;
  --danger-solid: #8a1f1f;  /* badge « critique » plein, texte blanc lisible clair ET dark */
  --blue:         #1a4a7a;  --blue-light:   #e6eef7;
  --violet:       #5e3a86;  --violet-light: #ece7f4;
  --teal:         #0f6b6b;  --teal-light:   #e3f1f1;
  --orange:       #b5490c;  --orange-light: #fff2e8;
  --pink:         #9d174d;  --pink-light:   #fbe9f1;

  /* Bordures teintées (pills actives, tags) — fixes clair/sombre */
  --bd-accent:     #cbd8e4;
  --bd-blue:       #cfe0ef;
  --bd-green:      #cfe8db;
  --bd-amber:      #f0e2c2;
  --bd-red:        #eccaca;
  --bd-red-strong: #e0b4b4;

  /* ── Marque ───────────────────────────────────────────────────────── */
  --brand-navy:   #023F75;          /* SOURCE UNIQUE : header/hero/theme-color en dérivent */
  --navy:         var(--brand-navy);
  --navy-dark:    #011f3a;
  --theme-color:  #023F75;          /* barre de statut PWA (meta theme-color) */

  /* ── Bandes chrome (panneaux/tooltips sombres — dsp, planning, mission) ─ */
  --chrome-band:        #0d2040;   /* fond navy foncé des bandes de section */
  --chrome-band-border: #1a3a5c;
  --chrome-band-pil:    #3d1500;   /* bandes « PIL » (brun foncé) */
  --tooltip-bg:         #1e293b;
  --tooltip-text:       #e2e8f0;
  /* Textes internes des tooltips (chrome sombre) — STABLES clair/sombre (pas d'override dark) */
  --tooltip-accent:     #9ec3e8;   /* infos bleutées (client, réf, horaires) */
  --tooltip-muted:      #9aa7b5;   /* libellés atténués (clés) */
  --tooltip-danger:     #f2a6a0;   /* conflits / alertes */
  --tooltip-warn:       #e6b45c;   /* VIP / avertissements */

  /* ── Typographie (auto-héberger via @font-face, pas de CDN Google) ─── */
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* ── Échelles ─────────────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --radius:5px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-h2:18px; --fs-h1:22px;
  --shadow:    0 1px 4px rgba(0,0,0,.07);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.20);

  /* ── Bandeau (hero) ───────────────────────────────────────────────── */
  --hero-grad:  linear-gradient(118deg, var(--brand-navy) 0%, #3f6c9b 52%, #7aa3c8 100%);
  --hero-curve1:#4F78A3;
  --hero-curve2:#A2C2DD;

  /* ── Couches (z-index) ────────────────────────────────────────────── */
  --z-header:100; --z-overlay:400; --z-popover:9999; --z-toast:10050;

  color-scheme: light;
}

/* ===== DARK MODE — dark neutre gris-bleu dérivé du navy (pas « tout-navy ») =====
   Redéfinir les MÊMES noms de tokens bascule bureau ET PWA sans toucher un composant.
   On ne touche PAS --white ni --brand-navy (marque + texte sur fonds colorés). */
[data-theme="dark"] {
  color-scheme: dark;
  --theme-color:  #0e1621;
  --bg:           #0e1621;
  --surface:      #18222f;
  --surface2:     #202c3b;
  --border:       #2c3a4b;
  --border2:      #3c4c5f;
  --text:         #e9eef3;
  --text2:        #a6b2c0;
  --text3:        #7c8795;
  --accent:       #5c9bd6;  --accent-light: #1b2e44;
  --accent-solid: #2f6296;  /* bouton plein accent en dark — texte blanc ~6.5:1 */
  --green:        #5cc08a;  --green-light:  #15291e;
  --amber:        #d8a445;  --amber-light:  #2a2211;
  --red:          #e8746b;  --red-light:    #2d1817;
  --danger-solid: #a52a20;
  --blue:         #6aa6e0;  --blue-light:   #16273b;
  --violet:       #a98cdb;  --violet-light: #271f3b;
  --teal:         #4fb3b3;  --teal-light:   #122a2a;
  --orange:       #e8934a;  --orange-light: #2b1a0d;
  --pink:         #e78bb0;  --pink-light:   #2e131f;
  --hero-grad:    linear-gradient(118deg, #0c2540 0%, #163a5f 52%, #1f4d7a 100%);
  --shadow:       0 1px 4px rgba(0,0,0,.4);
  --shadow-sm:    0 1px 4px rgba(0,0,0,.4);
  --shadow-md:    0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 48px rgba(0,0,0,.55);
  --chrome-band:        #1a2534;
  --chrome-band-border: #2c3a4b;
  --chrome-band-pil:    #2a1a0a;
  --tooltip-bg:         #202c3b;
  --tooltip-text:       #e9eef3;
  /* Bordures teintées — variantes sombres (sinon bordures claires « brillantes » sur badges sombres) */
  --bd-accent:     #2d4d70;
  --bd-blue:       #2a4e72;
  --bd-green:      #2c5a41;
  --bd-amber:      #5a4a24;
  --bd-red:        #6a3733;
  --bd-red-strong: #7d3e39;
}

/* ===== BASE ===== */
body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--sans); font-size: 13px; }

/* ===== HEADER (barre de navigation haute) ===== */
.header {
  background: linear-gradient(180deg, #0a3c6e 0%, var(--brand-navy) 100%);
  height: 58px;
  border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 2px 12px rgba(2,30,58,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  flex-shrink: 0;
}
.brand-main { font-family: var(--sans); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.brand-sub  { font-family: var(--sans); font-weight: 300; font-size: 14px; color: rgba(255,255,255,.55); }

/* ===== BADGE — un seul composant, ton par classe (tokens) ===== */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-blue     { background: var(--blue-light);   color: var(--blue); }
.badge-green    { background: var(--green-light);  color: var(--green); }
.badge-amber    { background: var(--amber-light);  color: var(--amber); }
.badge-red      { background: var(--red-light);    color: var(--red); }
.badge-violet   { background: var(--violet-light); color: var(--violet); }
.badge-gray     { background: var(--surface2);     color: var(--text3); }
.badge-teal     { background: var(--teal-light);   color: var(--teal); }
.badge-critical { background: var(--danger-solid); color: var(--white); }

/* Mapping AVIACS OPS (planning) :
   Option → .badge-amber · Confirmé → .badge-blue · Réalisé → .badge-green · Annulé → .badge-red */