/* =====================================================================
   SASP MDT — THÈME « INSTRUMENT DE PRÉCISION »  (2026)
   ---------------------------------------------------------------------
   Couche de modernisation chargée APRÈS style.css.
   Ne réécrit pas l'existant : redéfinit les tokens (le CSS d'origine est
   entièrement piloté par variables) puis affine les composants clés.

   → Pour revenir en arrière : retirer le <link> dans includes/mdt_header.php

   Direction : terminal de commandement + gravité judiciaire.
     · Texte blanc froid et net (remplace le sépia daté)
     · Bordures neutres — l'or redevient un accent RARE
     · Profondeur par surfaces superposées + halo, pas par bordures dorées
     · Données en monospace = caractère « instrument »
     · Typo institutionnelle (IBM Plex) + serif éditoriale (Newsreader)
   ===================================================================== */

/* ── 1. TOKENS — thème NAVY (défaut) ──────────────────────────────── */
:root {
  /* Fonds : near-black froid, conserve l'ADN navy du SASP */
  --navy:    #070A0F;
  --navy2:   #0C1118;
  --navy3:   #121A24;
  --navy4:   #1A2430;
  --navy5:   #24303E;

  /* Or affiné : laiton/champagne, plus lumineux et moins boueux */
  --gold:    #E0B155;
  --gold2:   #F2CB7D;
  --gold3:   #FADFA6;
  --gd:      rgba(224,177,85,0.12);
  --gb:      rgba(224,177,85,0.30);

  /* Texte : blanc froid net — LE changement qui rajeunit tout */
  --text:    #E8EDF5;
  --t2:      #94A5BC;
  --t3:      #5D6E85;
  --text2:   #94A5BC;
  --text3:   #5D6E85;

  /* Bordures NEUTRES (l'or n'est plus structurel) */
  --border:  rgba(150,178,214,0.11);
  --border2: rgba(150,178,214,0.06);

  /* Statuts modernisés */
  --green:   #3ECF8E;
  --gn:      rgba(62,207,142,0.12);
  --red:     #F2555F;
  --rd:      rgba(242,85,95,0.12);
  --blue:    #5B9DF9;
  --bd:      rgba(91,157,249,0.12);
  --amber:   #E9A23B;
  --ad:      rgba(233,162,59,0.12);
  --purp:    #A78BFA;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 28px -6px rgba(0,0,0,.55);

  --sidebar-w:   224px;
  --topbar-h:    58px;
  --sidebar-bg:  rgba(9,13,19,0.72);
  --topbar-bg:   rgba(9,13,19,0.80);
  --item-hover:  rgba(150,178,214,0.055);
  --item-active: rgba(224,177,85,0.12);
  --gold-dim:    rgba(224,177,85,0.12);
  --gold-border: rgba(224,177,85,0.28);
  --green-dim:   rgba(62,207,142,0.11);
  --red-dim:     rgba(242,85,95,0.11);
  --blue-dim:    rgba(91,157,249,0.11);
  --amber-dim:   rgba(233,162,59,0.11);
  --purple-dim:  rgba(167,139,250,0.11);

  --font-ui:      'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ── 2. TOKENS — thème DARK (gris neutres) ────────────────────────── */
[data-theme="dark"] {
  --navy:    #0B0B0C;
  --navy2:   #131315;
  --navy3:   #1A1A1D;
  --navy4:   #232326;
  --navy5:   #2E2E33;
  --text:    #ECECEE;
  --t2:      #A0A0A8;
  --t3:      #6B6B75;
  --text2:   #A0A0A8;
  --text3:   #6B6B75;
  --border:  rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.055);
  --shadow:  0 1px 2px rgba(0,0,0,.5), 0 8px 28px -6px rgba(0,0,0,.7);
  --sidebar-bg: rgba(10,10,11,0.80);
  --topbar-bg:  rgba(10,10,11,0.88);
  --item-hover: rgba(255,255,255,0.05);
}

/* ── 3. ATMOSPHÈRE — profondeur & grain ───────────────────────────── */
body.mdt-body {
  font-family: var(--font-ui);
  font-size: 14.5px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 520px at 18% -8%,  rgba(224,177,85,0.055), transparent 60%),
    radial-gradient(900px  480px at 92% 4%,   rgba(91,157,249,0.05),  transparent 62%),
    var(--navy);
}
/* Grain fin — casse le plat des aplats */
body.mdt-body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 4. TOPBAR — verre dépoli ─────────────────────────────────────── */
.mdt-topbar {
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
}
.mdt-brand-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  letter-spacing: .01em; color: var(--text);
}
.mdt-brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t3);
}
/* Horloge : une seule ligne, sans encadré doré.
   Heure en mono tabulaire (largeur stable, pas de saut à chaque seconde),
   date en retrait, séparées par une fine barre verticale. */
.mdt-clock-wrap {
  flex-direction: row; align-items: baseline; gap: 9px;
  white-space: nowrap;
}
.mdt-clock {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500;
  color: var(--text); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  background: none; border: none; padding: 0; border-radius: 0;
}
.mdt-date {
  position: relative;
  font-size: 11.5px; color: var(--t3);
  letter-spacing: .01em; padding-left: 10px;
}
.mdt-date::before {                    /* séparateur discret */
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--border);
}
@media (max-width: 760px) { .mdt-date { display: none; } }

.mdt-avatar {
  width: 30px; height: 30px; font-size: 11.5px;
  background: linear-gradient(150deg, var(--gold2), #B98A32);
  color: #14100A; font-weight: 700;
  font-family: var(--font-ui); letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(224,177,85,.28);
  border: none;
}
.mdt-user-info { line-height: 1.25; }
.mdt-username  { font-size: 13px; font-weight: 600; color: var(--text); }
.mdt-userrole  { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--gold); }
.mdt-status-dot { box-shadow: 0 0 0 3px rgba(62,207,142,.15); }
.mdt-status-label { font-size: 11px; color: var(--t3); }
/* Séparateur discret avant le bloc utilisateur */
.mdt-topbar-user { gap: 12px; }
.mdt-topbar-user .mdt-avatar { margin-left: 4px; }

.mdt-btn-logout, .theme-toggle {
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(150,178,214,.04);
  color: var(--t2); font-size: 12px;
  transition: all .16s cubic-bezier(.4,0,.2,1);
}
.mdt-btn-logout:hover { color: var(--red); border-color: rgba(242,85,95,.4); background: var(--rd); }
.theme-toggle {
  width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px; padding: 0;
}
.theme-toggle:hover   { color: var(--gold2); border-color: var(--gb); }

/* Cloche de notification — icône SVG, badge recalé */
.notif-bell {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--t2);
  transition: color .15s, background .15s, border-color .15s;
}
.notif-bell svg { width: 18px; height: 18px; display: block; }
.notif-bell:hover { color: var(--gold2); background: rgba(150,178,214,.06); border-color: var(--border); }
.notif-badge {
  top: 2px; right: 2px;
  min-width: 16px; height: 16px; line-height: 16px;
  padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  box-shadow: 0 0 0 2px rgba(9,13,19,.95);
}

/* ── 5. SIDEBAR & NAVIGATION ──────────────────────────────────────── */
.mdt-sidebar {
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  scrollbar-color: var(--navy5) transparent;
}
/* Filtre rapide du menu */
.mdt-nav-filter {
  position: sticky; top: 0; z-index: 2;      /* reste visible au défilement */
  display: flex; align-items: center;
  padding: 2px 0 10px; margin: 0 4px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #090D13 72%, rgba(9,13,19,0));
}
[data-theme="dark"] .mdt-nav-filter {
  background: linear-gradient(180deg, #0A0A0B 72%, rgba(10,10,11,0));
}
.mdt-nav-filter svg {
  position: absolute; left: 11px; z-index: 1;
  width: 12px; height: 12px;
  color: var(--t3); pointer-events: none;
  transition: color .15s;
}
/* NB : sélecteur volontairement qualifié par [type="search"].
   Sans cela, la règle générique input[type="search"] du §11 — même
   spécificité mais plus bas dans le fichier — écrasait le padding
   gauche réservé à l'icône, et le texte passait dessous. */
.mdt-nav-filter input[type="search"] {
  width: 100%;
  padding: 7px 11px 7px 31px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.3;
  background: rgba(150,178,214,.05);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.mdt-nav-filter input[type="search"]::placeholder {
  color: var(--t3); font-size: 12px; letter-spacing: .01em;
}
.mdt-nav-filter input[type="search"]:focus {
  outline: none; border-color: var(--gb);
  background: rgba(7,10,15,.6);
  box-shadow: 0 0 0 3px rgba(224,177,85,.10);
}
.mdt-nav-filter:focus-within svg { color: var(--gold2); }
.mdt-nav-filter input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Titre de section — devient un bouton repliable */
.mdt-nav-section {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t3);
  padding: 13px 10px 6px; font-weight: 500;
  background: none; border: none; cursor: pointer;
  text-align: left; transition: color .14s;
}
.mdt-nav-section:hover { color: var(--t2); }
.mdt-nav-chev {
  width: 11px; height: 11px; flex-shrink: 0; opacity: .5;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .14s;
}
.mdt-nav-section:hover .mdt-nav-chev { opacity: .9; }

/* Repli / dépli — animation par max-height mesurée en JS.
   Choisi volontairement plutôt que l'astuce grid 1fr→0fr : celle-ci exige
   un moteur récent, or l'app tourne aussi dans le CEF de FiveM. */
.mdt-nav-group-body {
  overflow: hidden;
  transition: max-height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.mdt-nav-group.is-collapsed .mdt-nav-group-body { opacity: 0; }
.mdt-nav-group.is-collapsed .mdt-nav-chev { transform: rotate(-90deg); }

.mdt-nav-item {
  border-left: none;
  border-radius: 9px;
  padding: 7px 10px;
  margin-bottom: 1px;
  font-size: 13.5px; font-weight: 450;
  gap: 10px;
  transition: background .14s, color .14s, transform .14s;
}
.mdt-nav-item:hover { background: var(--item-hover); color: var(--text); transform: translateX(2px); }
.mdt-nav-item.active {
  background: linear-gradient(90deg, var(--item-active), rgba(224,177,85,.03));
  color: var(--gold2); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(224,177,85,.16);
}
/* Barre d'accent de l'item actif */
.mdt-nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 3px 3px 0;
  background: var(--gold2); box-shadow: 0 0 10px rgba(224,177,85,.55);
}

/* Icônes emoji : désaturées au repos pour un menu homogène,
   couleur restituée au survol et sur l'item actif. */
.mdt-nav-icon {
  width: 19px; height: 19px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; line-height: 1;
  /* Désaturation légère : harmonise des emojis de couleurs très diverses
     sans les transformer en taches grises (un grayscale total les rend
     illisibles sur fond sombre). */
  filter: saturate(.7) opacity(.82);
  transition: filter .16s, transform .16s;
}
.mdt-nav-item:hover .mdt-nav-icon  { filter: saturate(1) opacity(1); transform: scale(1.08); }
.mdt-nav-item.active .mdt-nav-icon { filter: none; }

.mdt-nav-badge {
  margin-left: auto;
  background: var(--gold); color: #14100A;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  border-radius: 5px; padding: 1px 5px; line-height: 1.5;
}
.mdt-nav-item.active .mdt-nav-badge { background: var(--gold2); }

/* Pendant le filtrage, on force l'ouverture de toutes les sections */
.mdt-nav.is-filtering .mdt-nav-group .mdt-nav-group-body {
  max-height: none !important; opacity: 1 !important;
}

/* Mode réduit (sidebar 48px) : pas de filtre ni de chevrons,
   et les sections restent toujours dépliées (icônes seules). */
@media (max-width: 900px) {
  .mdt-nav-filter { display: none; }
  .mdt-nav-chev   { display: none; }
  .mdt-nav-group .mdt-nav-group-body { max-height: none !important; opacity: 1 !important; }
  .mdt-nav-item   { justify-content: center; padding: 8px 0; }
  .mdt-nav-icon   { filter: grayscale(.2) opacity(.85); }
  .mdt-nav-badge  { margin-left: 0; }
}
.mdt-sidebar-footer {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .1em; color: var(--t3);
}

/* ── 6. TITRES DE PAGE — gravité éditoriale ───────────────────────── */
.pg-header { margin-bottom: 26px; }
.pg-title {
  font-family: var(--font-display);
  font-size: 31px; font-weight: 500;
  letter-spacing: -0.018em; line-height: 1.12;
  color: var(--text);
}
.pg-title em {
  font-style: italic; font-weight: 500;
  color: var(--gold2);
}
.gold-rule {
  height: 2px; width: 46px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold2), transparent);
  margin: 11px 0 9px;
}
.pg-sub { font-size: 13px; color: var(--t2); letter-spacing: 0; }

.sec-label, .mdt-section-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--t3);
  font-weight: 500;
}

/* ── 7. SURFACES / CARTES ─────────────────────────────────────────── */
.mdt-section, .form-zone, .table-container, .tbl-wrap, .mdt-tbl-wrap {
  background: linear-gradient(180deg, rgba(150,178,214,.035), rgba(150,178,214,.012));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mdt-section { padding: 20px 22px; }

/* ── 8. BOUTONS ───────────────────────────────────────────────────── */
.btn, .btn-gold, .btn-ghost, .btn-danger, .btn-success, .btn-purple, .btn-amber {
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .005em;
  padding: 8px 15px;
  border-radius: 9px;
  transition: transform .14s cubic-bezier(.4,0,.2,1), box-shadow .14s, filter .14s, background .14s;
}
.btn-gold {
  background: linear-gradient(160deg, var(--gold2), #C89A3E);
  color: #14100A; font-weight: 600;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px -3px rgba(224,177,85,.42);
}
.btn-gold:hover  { transform: translateY(-1px); filter: brightness(1.07);
                   box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 8px 22px -4px rgba(224,177,85,.55); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(150,178,214,.05);
  border: 1px solid var(--border);
  color: var(--t2);
}
.btn-ghost:hover { background: rgba(150,178,214,.09); color: var(--text);
                   border-color: rgba(150,178,214,.2); transform: translateY(-1px); }

.btn-danger  { background: var(--rd); border: 1px solid rgba(242,85,95,.3);  color: var(--red); }
.btn-danger:hover  { background: rgba(242,85,95,.2);  transform: translateY(-1px); }
.btn-success { background: var(--gn); border: 1px solid rgba(62,207,142,.3); color: var(--green); }
.btn-success:hover { background: rgba(62,207,142,.2); transform: translateY(-1px); }
.btn-sm { padding: 6px 11px; font-size: 11.5px; border-radius: 8px; }

/* ── 9. BADGES ────────────────────────────────────────────────────── */
.badge, .statut-badge, .badge-statut, .tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}

/* ── 10. TABLEAUX — lisibilité de terminal ────────────────────────── */
.mdt-table, .mdt-tbl, table.listing { font-size: 13.5px; border-collapse: collapse; width: 100%; }
.mdt-table thead th, .mdt-tbl thead th, .tbl-wrap thead th {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3);
  background: rgba(150,178,214,.035);
  border-bottom: 1px solid var(--border);
  padding: 11px 14px; text-align: left; white-space: nowrap;
}
.mdt-table tbody td, .mdt-tbl tbody td, .tbl-wrap tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border2);
  color: var(--text);
}
.mdt-table tbody tr, .mdt-tbl tbody tr { transition: background .13s; }
.mdt-table tbody tr:hover, .mdt-tbl tbody tr:hover { background: rgba(150,178,214,.045); }
.mdt-table tbody tr:last-child td { border-bottom: none; }

/* ── 11. FORMULAIRES ──────────────────────────────────────────────── */
.form-label, .pl-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t3);
  font-weight: 500; margin-bottom: 6px; display: block;
}
.form-control, .pl-input, input[type="text"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="password"], input[type="search"], select, textarea {
  font-family: var(--font-ui);
  font-size: 13.5px;
  background: rgba(7,10,15,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus, .pl-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gb);
  background: rgba(7,10,15,.75);
  box-shadow: 0 0 0 3px rgba(224,177,85,.11);
}
input::placeholder, textarea::placeholder { color: var(--t3); }

/* ── 12. STATISTIQUES (dashboard) ─────────────────────────────────── */
.mdt-stat {
  background: linear-gradient(165deg, rgba(150,178,214,.05), rgba(150,178,214,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 19px;
  transition: transform .17s cubic-bezier(.4,0,.2,1), border-color .17s, box-shadow .17s;
}
.mdt-stat:hover { transform: translateY(-2px); border-color: var(--gb); box-shadow: var(--shadow); }
.mdt-stat-number {
  font-family: var(--font-mono);
  font-size: 30px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--gold2);
  line-height: 1.05;
}
.mdt-stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t3);
  margin-top: 5px;
}

/* ── 13. DONNÉES EN MONOSPACE (caractère « instrument ») ──────────── */
.mono, .num, code, kbd,
td .mono, .mdt-clock, .ref, .matricule {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 14. NOTIFICATIONS ────────────────────────────────────────────── */
.notif-dropdown {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(12,17,24,.97);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 16px 50px -10px rgba(0,0,0,.72);
}
.notif-header { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--gold); }
.notif-badge  { background: var(--red); font-family: var(--font-mono); font-weight: 600;
                box-shadow: 0 0 0 2px var(--topbar-bg); }
.notif-item.unread { background: rgba(224,177,85,.055); }
.notif-title { font-size: 12.5px; }

/* ── 15. SCROLLBARS ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--navy5); border-radius: 5px; border: 2px solid transparent;
                            background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gb); background-clip: content-box; }

/* ── 16. APPARITION AU CHARGEMENT ─────────────────────────────────── */
@keyframes mdtFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.mdt-page > * { animation: mdtFade .34s cubic-bezier(.4,0,.2,1) backwards; }
.mdt-page > *:nth-child(1) { animation-delay: .02s; }
.mdt-page > *:nth-child(2) { animation-delay: .06s; }
.mdt-page > *:nth-child(3) { animation-delay: .10s; }
.mdt-page > *:nth-child(4) { animation-delay: .14s; }
.mdt-page > *:nth-child(n+5) { animation-delay: .17s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .mdt-nav-item:hover, .btn-gold:hover, .btn-ghost:hover, .mdt-stat:hover { transform: none; }
}

/* ── 17. COMPATIBILITÉ ANCIENNES POLICES ──────────────────────────
   style.css et quelques styles inline référencent encore
   'JetBrains Mono' / 'Playfair Display' (plus chargées).
   On remappe ces sélecteurs vers la nouvelle typo.                    */
.td-mono, .mdt-stat-num, .stat-num, .enq-num, .veh-immat,
.infr-art-num, .infr-art, .casier-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.mdt-page-title, .rapport-title { font-family: var(--font-display); }
/* Filet de sécurité pour les styles inline des fichiers PHP */
[style*="JetBrains"] { font-family: var(--font-mono) !important; }
[style*="Playfair"]  { font-family: var(--font-display) !important; }

/* ── 18. LIENS & SÉLECTION ────────────────────────────────────────── */
a { transition: color .14s; }
::selection { background: rgba(224,177,85,.26); color: var(--text); }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
   19. CORRECTIFS DE RÉGRESSION
   Ce fichier étant chargé en dernier, ses règles priment sur style.css.
   Les blocs ci-dessous rattrapent ce que la surcouche cassait ou laissait
   au style d'origine. À garder en FIN de fichier.
   ===================================================================== */

/* 19.1 (BLOQUANT) — Restaurer les paliers responsives de la sidebar.
   Une @media n'ajoute PAS de spécificité : notre `:root{--sidebar-w:224px}`
   écrasait les paliers de style.css, laissant sous 900px une colonne de
   224px sans libellés et une topbar qui débordait. */
@media (max-width: 900px) {
  :root { --sidebar-w: 48px; }
  .mdt-nav-section { display: none; }   /* redevenu visible car restylé en bouton */
}
@media (max-width: 640px) {
  :root { --sidebar-w: 0px; }           /* mode tiroir */
}

/* 19.2 — <label> sans classe : ils gardaient l'ancien or (style.css:289).
   Ils sont largement majoritaires dans les formulaires. */
label:not(.form-label):not(.pl-label) {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t3);
}
/* …sauf ceux qui enveloppent une case à cocher : ce sont des phrases à lire,
   pas des libellés de champ. Si :has() n'est pas supporte (vieux CEF), cette
   règle est simplement ignorée et seul le style du dessus s'applique. */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--t2);
}

/* 19.3 — Options des <select> : texte sépia sur navy clair à l'ouverture. */
select option { background: var(--navy2); color: var(--text); }
select option:checked,
select option:hover { background: var(--navy4); color: var(--gold2); }

/* 19.4 — Le bloc [data-theme="dark"] de style.css a une spécificité
   supérieure (0,2,x) et battait nos règles : en thème sombre, les labels
   restaient dorés et le fond perdait ses halos. */
[data-theme="dark"] body,
[data-theme="dark"] body.mdt-body {
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(224,177,85,0.05),  transparent 60%),
    radial-gradient(900px  480px at 92% 4%,  rgba(91,157,249,0.045), transparent 62%),
    var(--navy);
}
[data-theme="dark"] .sec-label,
[data-theme="dark"] .mdt-sec-label,
[data-theme="dark"] .mdt-section-title,
[data-theme="dark"] .mdt-nav-section { color: var(--t3); }

/* 19.5 — Polices orphelines : Inter / Playfair / JetBrains ne sont plus
   chargées. Sans ces règles, Windows et le CEF FiveM retombent sur
   Segoe UI, Times New Roman ou Courier New selon les blocs. */
.ql-container.ql-snow,
.agent-section legend, .agent-name, .agent-matricule,
.agent-role-badge, .agent-tag,
[style*="Inter"] { font-family: var(--font-ui); }

.infr-cat-header { font-family: var(--font-display); }

.arm-serie, .arm-serie-big, .rh-mat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 19.6 — En-têtes de tableaux non couverts par le §10. */
thead th, .diff-table th { color: var(--t3); }

/* 19.7 — Champs de recherche à icône.
   Ces inputs réservent 34-36px à gauche pour une loupe positionnée en
   absolu. Le sélecteur générique du §11 (input[type="text"], même
   spécificité mais plus bas dans le fichier) écrasait ce padding et le
   texte passait SOUS l'icône. On le restaure avec une spécificité
   supérieure, en ciblant aussi le type pour être certain de primer. */
.mdt-search-wrap input, .search-wrap input,
.mdt-search-wrap input[type="text"], .search-wrap input[type="text"] {
  padding-left: 34px;
}
.search-input, input#searchInput,
input.search-input[type="text"], input#searchInput[type="text"] {
  padding-left: 36px;
}
/* La loupe reste au-dessus du champ et ne capte pas le clic */
.mdt-search-icon, .search-icon { z-index: 1; pointer-events: none; opacity: .55; }

/* =====================================================================
   21. FORMULAIRES — refonte complète des contrôles
   ---------------------------------------------------------------------
   Les champs gardaient les widgets natifs : sélecteurs de date en blanc
   sur une interface sombre, flèche de select système, bouton de fichier
   gris, cases à cocher par défaut. C'est ce qui datait le plus.
   ===================================================================== */

/* color-scheme indique au navigateur de rendre ses widgets NATIFS en
   sombre : calendriers, horloges, listes déroulantes, molettes de number.
   Sans cette ligne, un calendrier blanc s'ouvre sur un fond noir. */
:root { color-scheme: dark; }

/* ── Base commune à tous les contrôles ─────────────────────────────── */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="search"], input[type="email"], input[type="url"], input[type="tel"],
select, textarea, .form-control {
  font-family: var(--font-ui);
  font-size: 13.5px; line-height: 1.4;
  color: var(--text);
  background: rgba(7,10,15,.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: rgba(150,178,214,.2);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none;
  border-color: var(--gb);
  background: rgba(7,10,15,.72);
  box-shadow: 0 0 0 3px rgba(224,177,85,.12);
}
::placeholder { color: var(--t3); opacity: 1; }

input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  opacity: .55; cursor: not-allowed;
  background: rgba(150,178,214,.03);
}

/* Champ en erreur (validation navigateur), une fois l'utilisateur passé */
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: rgba(242,85,95,.55);
  box-shadow: 0 0 0 3px rgba(242,85,95,.10);
}

textarea { resize: vertical; min-height: 96px; }

/* ── Selects : appearance native ────────────────────────────────────
   Un ancien essai dessinait la flèche via background-image (SVG data-URI)
   sur le <select> lui-même. Dans le CEF embarqué par le client FiveM (NUI),
   cette image se répète en mosaïque sur toute la liste déroulante OUVERTE
   au lieu de s'afficher une fois sur le contrôle fermé — texte illisible.
   On revient à la flèche native : color-scheme:dark (racine du fichier) la
   rend déjà correctement sombre, sans ce risque de rendu. */
select {
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
  cursor: pointer;
}
select[multiple] {
  min-height: 96px;
}
select optgroup {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t3); font-style: normal; font-weight: 500;
  background: var(--navy2);
}

/* ── Dates et heures : icône du calendrier lisible ─────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(.65) sepia(.4) saturate(3) hue-rotate(2deg);
  cursor: pointer; opacity: .75; transition: opacity .15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ── Nombres : molettes discrètes, visibles au survol ──────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { opacity: .35; transition: opacity .15s; }
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button { opacity: .8; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ── Fichiers : le bouton natif « Choisir un fichier » ─────────────── */
input[type="file"] {
  font-family: var(--font-ui); font-size: 13px;
  color: var(--t2);
  background: rgba(7,10,15,.4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%;
  cursor: pointer; transition: border-color .15s, background .15s;
}
input[type="file"]:hover { border-color: var(--gb); background: rgba(224,177,85,.05); }
input[type="file"]::file-selector-button {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: #14100A;
  background: linear-gradient(160deg, var(--gold2), #C89A3E);
  border: none; border-radius: 7px;
  padding: 7px 14px; margin-right: 12px;
  cursor: pointer; transition: filter .15s;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

/* ── Cases à cocher et boutons radio ───────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
  cursor: pointer; flex-shrink: 0;
  margin: 0; padding: 0;
  vertical-align: middle;
}
/* Un label contenant une case redevient une ligne lisible et cliquable */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; padding: 4px 0;
}

/* ── Rythme des formulaires ────────────────────────────────────────── */
form .mdt-section + .mdt-section { margin-top: 14px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
legend {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3); padding: 0 8px;
}

/* Champ obligatoire */
.req, .required { color: var(--red); }

/* ── Choix des unités par cases à cocher (edit_user) ───────────────── */
.unite-box {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 168px; overflow-y: auto;
  padding: 7px 9px;
  background: rgba(7,10,15,.4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.unite-choice {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 7px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px;
  text-transform: none; letter-spacing: 0; color: var(--text);
  transition: background .13s;
}
.unite-choice:hover { background: rgba(150,178,214,.07); }
.unite-choice input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.unite-empty { font-size: 12px; color: var(--t3); font-style: italic; padding: 5px 7px; }

/* =====================================================================
   20. ÉCRAN DE CONNEXION
   Porte d'entrée des agents : même langage que le MDT, en plus sobre.
   ===================================================================== */
.login-box {
  background: linear-gradient(180deg, rgba(150,178,214,.05), rgba(150,178,214,.015));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 38px 34px 30px;
  width: 100%; max-width: 400px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 60px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.login-emblem { text-align: center; margin-bottom: 26px; }
.login-logo {
  font-size: 34px; line-height: 1; margin-bottom: 14px;
  filter: saturate(.9) drop-shadow(0 3px 12px rgba(224,177,85,.35));
}
.login-title {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 500;
  letter-spacing: -.015em; color: var(--text);
}
.login-subtitle {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t3);
  margin-top: 7px;
}
/* Petit filet doré sous l'emblème, écho du gold-rule des pages internes */
.login-emblem::after {
  content: ''; display: block;
  width: 42px; height: 2px; border-radius: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
}
.login-box label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--t3);
}
.login-box input {
  font-family: var(--font-ui); font-size: 14px;
  padding: 11px 13px;
  background: rgba(7,10,15,.55);
  border: 1px solid var(--border); border-radius: 9px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-box input:focus {
  outline: none; border-color: var(--gb);
  background: rgba(7,10,15,.75);
  box-shadow: 0 0 0 3px rgba(224,177,85,.11);
}
.login-submit {
  margin-top: 6px; width: 100%;
  padding: 12px 18px; border: none; border-radius: 10px;
  background: linear-gradient(160deg, var(--gold2), #C89A3E);
  color: #14100A;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -4px rgba(224,177,85,.45);
  transition: transform .14s cubic-bezier(.4,0,.2,1), filter .14s, box-shadow .14s;
}
.login-submit:hover  { transform: translateY(-1px); filter: brightness(1.07);
                       box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 10px 26px -5px rgba(224,177,85,.55); }
.login-submit:active { transform: translateY(0); }
.login-footer {
  margin-top: 24px; text-align: center;
  font-family: var(--font-mono); font-size: 9.5px;
  line-height: 1.7; letter-spacing: .05em; color: var(--t3);
}
.login-theme-toggle {
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: rgba(150,178,214,.04) !important;
  color: var(--t2) !important;
}
.login-theme-toggle:hover {
  color: var(--gold2) !important;
  border-color: var(--gb) !important;
  background: var(--gd) !important;
}