/* ============================================================
   v4/voitures.css — Voitures · module Matériel (maquette 23)

   Relevé au pixel sur le DOM Claude Design (23-voitures) :
   bandeau ambre 12/15, bande de 5 compteurs 12/15, pilules de
   filtre h30, table en grille 10 colonnes (250px · minmax(150px,
   1fr) · 110 · 92 · 108 · 108 · 108 · 78 · 74 · 34, gap 12,
   padding 11/18). Relevé à nouveau le 01/09/2026 sur l'atlas 1600×1000
   des deux rendus : la table est sur --panel (verre .66 + flou 20) et
   la bande d'en-tête sur --panel-2 (.42), pas --panel-solid / --inset.
   Jetons v2 partout, avec repli ; les deux thèmes suivent seuls.
   Seule encre nommée : --sur-accent sur aplat ambre ; la plaque
   bleue #1b3b8f / #fff (objet dessiné, identique nuit et jour).
   ============================================================ */

.x4-voitures {
  font-family: var(--font, 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  /* Interligne MESURÉ sur la maquette : 1,2 (12,5px→15, 11px→13,
     13,5px→16, 24px→28). L'app héritait ~1,4 et gonflait tout : bandeau
     60 au lieu de 59, carte compteur 76 au lieu de 69, tête de table
     38 au lieu de 36, compte de filtre 18 au lieu de 15. */
  line-height: 1.2;
}

/* [hidden] doit rester masqué, même si un display flex/grid traîne. */
.x4-voitures [hidden] { display: none !important; }

/* ── La page : colonne, gap 12, min 1180 (la maquette) ───────── */
.x4-voitures-page {
  /* #kanban-container (v2-coque.css) pose déjà `20px 30px` : les
     doubler poussait le contenu à x=288 et le rétrécissait à 1252 au
     lieu de x=258 / 1312 (la colonne Conducteur tombait à 150 au lieu
     de 204). On ne garde que le bas : 20 (coque) + 66 = 86 mesurés. */
  padding: 0 0 66px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 1180px;
}

/* ── Bandeau d'incomplétude — AMBRE : du travail, pas une panne ── */
.x4-voitures-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: var(--r-md, 18px);
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
}
/* Le triangle est un TRAIT : encre --v2-accent (olive de jour,
   ambre de nuit), jamais l'aplat --accent-bright. */
.x4-voitures-bandeau-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--v2-accent, #7d640d);
}
.x4-voitures-bandeau-ico svg { stroke-width: 1.8; }
.x4-voitures-bandeau-txt { flex: 1 1 0%; min-width: 0; display: block; }
.x4-voitures-bandeau-txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.x4-voitures-bandeau-txt small {
  display: block;
  font-size: 11px;
  color: var(--v2-text-2, #55595f);
  margin-top: 1px;
}

/* ── Le bouton ambre : aplat + encre --sur-accent, jamais l'inverse ── */
.x4-voitures-btn-ambre {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 33px;
  padding: 0 15px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(170deg, var(--accent-bright, #f5d547), #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 620;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  flex-shrink: 0;
}

/* ── Bande de 5 compteurs ───────────────────────────────────── */
.x4-voitures-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.x4-voitures-kpi {
  background: var(--panel, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  padding: 12px 15px;
}
.x4-voitures-kpi-v {
  font-size: 24px;
  /* 28 MESURÉS (l'interligne 1,2 donnait 29, la carte 70 au lieu de 69). */
  line-height: 28px;
  font-weight: 680;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a);
}
.x4-voitures-kpi-pos { color: var(--pos-fg, #136d45); }
.x4-voitures-kpi-neg { color: var(--neg-fg, #a74137); }
.x4-voitures-kpi-mut { color: var(--v2-text-3, #6b6f76); }
.x4-voitures-kpi-l {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Filtres de complétude (pilules h30) ────────────────────── */
.x4-voitures-filtres {
  display: flex;
  align-items: center;
  gap: 8px;
}
.x4-voitures-filtre {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 32 MESURÉS : la maquette rend ses <button> en content-box, son
     `height: 30px` + 2 bordures = 32 à l'écran. Ici tout est border-box. */
  height: 32px;
  padding: 0 13px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  color: var(--v2-text-2, #55595f);
  font-size: 12.5px;
  font-weight: 550;
}
.x4-voitures-filtre.est-actif {
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  border-color: transparent;
  color: var(--v2-accent, #7d640d);
}
.x4-voitures-filtre-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
/* Pastille de compte sur pilule active : voile, pas une encre. */
.x4-voitures-filtre.est-actif .x4-voitures-filtre-n { background: rgba(0, 0, 0, 0.07); }
[data-app-theme="dark"] .x4-voitures-filtre.est-actif .x4-voitures-filtre-n { background: rgba(255, 255, 255, 0.12); }
.x4-voitures-filtre-compte {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
}

/* ── La table : 10 colonnes, verre .66 + flou 20 (mesuré) ───── */
.x4-voitures-t {
  background: var(--panel, rgba(255, 255, 255, 0.66));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.14));
  overflow: hidden;
}
.x4-voitures-grille {
  display: grid;
  grid-template-columns: 250px minmax(150px, 1fr) 110px 92px 108px 108px 108px 78px 74px 34px;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
}
/* Bande d'en-tête : rgba(255,255,255,.42) MESURÉ = --panel-2. */
.x4-voitures-head {
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  background: var(--panel-2, rgba(255, 255, 255, 0.42));
  font-size: 11px;
  font-weight: 620;
  /* 13 MESURÉS par cellule (1,2 donnait 13,2 : la ligne 1 tombait
     un pixel trop bas quand « Contrôle tech. » passe sur deux lignes). */
  line-height: 13px;
  letter-spacing: 0.08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-voitures-head .est-droite,
.x4-voitures-c-num { text-align: right; }
.x4-voitures-head .est-centre { text-align: center; }

.x4-voitures-row {
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
  cursor: pointer;
  transition: background 0.14s;
}
/* MESURÉ : la maquette garde le filet sur la DERNIÈRE ligne aussi
   (table 351 = 1 + 49 + 6×50 + 1) ; le retirer la rendait 350. */
.x4-voitures-row:hover { background: var(--inset, rgba(0, 0, 0, 0.035)); }

/* ── Colonne Véhicule : la plaque est DESSINÉE, pas écrite ──── */
.x4-voitures-c-veh {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.x4-voitures-plaque {
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  border-radius: var(--r-xs, 9px);
  overflow: hidden;
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  background: var(--panel-solid, #fff);
  flex-shrink: 0;
}
/* Bande bleue « F » : l'objet plaque, identique dans les 2 thèmes. */
.x4-voitures-plaque-eu {
  width: 15px;
  background: #1b3b8f;
  color: #fff;
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
}
.x4-voitures-plaque > b {
  padding: 0 8px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a);
}
.x4-voitures-modele {
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Colonne Conducteur : rond d'initiales, ou « + Affecter » ── */
.x4-voitures-c-cond {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.x4-voitures-cond-rond {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  font-style: normal;
  font-size: 10px;
  font-weight: 640;
  color: var(--v2-text-2, #55595f);
}
.x4-voitures-c-cond b {
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* L'invitation à saisir : pointillés + encre tertiaire — le même
   vocabulaire pour « + Affecter » et « Date » (gris non renseigné). */
.x4-voitures-affecter,
.x4-voitures-date-vide {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 27 MESURÉS (content-box maquette : 25 + 2 bordures — c'est eux
     qui donnent sa hauteur à la ligne : 27 + 22 + 1 = 50. */
  height: 27px;
  padding: 0 10px;
  border-radius: 99px;
  background: transparent;
  border: 1px dashed var(--stroke, rgba(20, 20, 25, 0.075));
  color: var(--v2-text-3, #6b6f76);
  font-size: 11px;
}
.x4-voitures-affecter:hover,
.x4-voitures-date-vide:hover {
  border-color: var(--v2-text-3, #6b6f76);
  color: var(--v2-text-2, #55595f);
}

/* ── Coûts : chiffres tabulaires, tiret quand on ne sait pas ── */
.x4-voitures-mois {
  font-size: 13.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.x4-voitures-km {
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  font-variant-numeric: tabular-nums;
}
.x4-voitures-absent {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  font-style: normal;
}

/* ── Échéances en pastilles — rouge en défaut, bleu en cours ──
   (le gris non renseigné est le bouton pointillé ci-dessus ;
   jamais l'ambre en statut.) */
.x4-voitures-date {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.x4-voitures-date-neg {
  background: var(--neg-soft, rgba(193, 75, 64, 0.11));
  color: var(--neg-fg, #a74137);
}
.x4-voitures-date-info {
  background: var(--info-soft, rgba(53, 104, 196, 0.11));
  color: var(--info-fg, #3160b4);
}

/* Cellule échéance : la pastille ou le pointillé, rien d'autre. */
.x4-voitures-c-date { min-width: 0; }

/* ── Fiche : trois points de complétude ─────────────────────── */
.x4-voitures-c-fiche {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.x4-voitures-pt {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, 0.07));
}
.x4-voitures-pt.est-plein { background: var(--pos-fg, #136d45); }

/* ── Docs + chevron ─────────────────────────────────────────── */
.x4-voitures-c-docs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  font-variant-numeric: tabular-nums;
}
.x4-voitures-doc-ico {
  display: grid;
  place-items: center;
  color: var(--v2-text-3, #6b6f76);
}
.x4-voitures-chev {
  display: grid;
  /* MESURÉ : le chevron colle au bord GAUCHE de sa colonne de 34
     (x=1517 = début de colonne) ; centré il partait 10px trop à droite. */
  place-items: center start;
  color: var(--v2-text-3, #6b6f76);
}

/* ── États vides — ils disent quoi faire ────────────────────── */
.x4-voitures-vide {
  background: var(--panel, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  padding: 46px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.x4-voitures-vide-petit { padding: 30px; }
.x4-voitures-vide-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  color: var(--v2-text-3, #6b6f76);
  margin-bottom: 4px;
}
.x4-voitures-vide b {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.x4-voitures-vide small {
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  max-width: 460px;
  line-height: 1.5;
}
.x4-voitures-vide .x4-voitures-btn-ambre { margin-top: 10px; }