/* ============================================================
   v4/missions.css — Simulateur · Missions fusionné (maquettes 14 + 15)

   Repris au pixel de la maquette : commutateur Missions/Modifications
   en pilule sur --inset, bandeau de KPI sur --panel, barre « Regrouper
   par » sur --panel-2, table sur --panel-solid avec bandes de groupe
   sur --inset et rail 3 px coloré. Les pistes de la grille viennent
   d'UNE variable posée par la logique (--x4-missions-grid), lue par
   l'en-tête et par les lignes : la colonne du critère de regroupement
   disparaît avec sa piste.

   Jetons v2 partout, avec repli ; aucune encre de texte codée en dur.
   Les deux thèmes suivent seuls via tokens-v2.css.
   ============================================================ */

.x4-missions {
  /* Largeur, pas position : la maquette pose 30 px sur un main de
     1362 → contenu de 1302 px. Ici .sim-content (styles.css, hors
     périmètre) a déjà mangé 24 px de chaque côté et me laisse une
     boîte de 1316 px : il reste 7 px à poser pour retrouver 1302.
     Mesuré : table à 1304 px avec 6 px, 1302 px avec 7 px. */
  padding: 22px 7px 86px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font, 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  /* La maquette ne déclare AUCUN line-height : elle hérite `normal`.
     Mais l'atlas de référence a été relevé sans que Manrope charge —
     les largeurs y sont au pixel celles de SF Pro (« SAID » 30 px,
     « ANDROS » 63 px, « Compléter 13 horaires (auto) » 171 px, contre
     29/60/166 en Manrope). Or `normal` vaut 1,19 en SF Pro et 1,366 en
     Manrope : hériter `normal` ici donnerait des lignes de 54 px là où
     la maquette en mesure 49. 1,2 est la valeur qui redonne, en
     Manrope, les boîtes mesurées sur la maquette (nom 13→15,6 pour 15,
     sub 11→13,2 pour 13, tarif 13,5→16,2 pour 16, en-tête 10,5→12,6
     pour 12, ligne 50 pour 49). Ne pas la « corriger » en `normal`. */
  line-height: 1.2;
  color: var(--v2-text, #16171a);
}

/* [hidden] doit rester masqué, même sur du flex/grid. */
.x4-missions [hidden] { display: none !important; }

/* :where() garde le reset à spécificité (0,1,0) : écrit `.x4-missions
   button`, il pesait (0,1,1) et écrasait TOUTES les classes simples —
   mesuré à l'écran : segments en 14 px/400/encre noire au lieu de
   12,5 px/600/gris, pastille active sans fond ambre, bouton « auto »
   sans fond ni encre accent. */
.x4-missions :where(button) {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Toute colonne de chiffres, sinon elles tremblent au défilement. */
.x4-missions-num { font-variant-numeric: tabular-nums; }

/* ── Commutateur Missions · Modifications ───────────────────── */
.x4-missions-vues {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
  align-self: flex-start;
}

/* ── Segments (regrouper par, filtres, commutateur) ─────────── */
.x4-missions-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
}
.x4-missions-seg-btn {
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}
/* Mesuré maquette : ces boutons-là sont en `display:grid;
   place-items:center` — donc SANS gouttière, contrairement aux
   segments de filtre qui portent une pastille de compte à 7 px.
   Ils n'ont jamais de compte (la logique passe n = null) : la
   gouttière remise à 0 les aligne sur la maquette. */
.x4-missions-seg-by { padding: 0 13px; gap: 0; font-weight: 620; }
/* Après .x4-missions-seg-btn (même spécificité) pour que la hauteur 30
   et le retrait 15 gagnent — mesuré maquette : boutons du commutateur
   30×… / 0 15px, contre 28 / 0 12px pour les segments de la barre. */
.x4-missions-vue { height: 30px; padding: 0 15px; gap: 8px; font-weight: 620; }
.x4-missions-seg-on {
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.x4-missions-seg-n {
  font-size: 11px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ── Bandeau de KPI ─────────────────────────────────────────── */
.x4-missions-kpis {
  display: flex;
  align-items: center;
  padding: 12px 18px 13px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.x4-missions-kpi {
  flex: 1 1 0%;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
}
.x4-missions-kpi:first-child { padding-left: 0; border-left-color: transparent; }
.x4-missions-kpi-in { display: flex; align-items: baseline; gap: 7px; }
.x4-missions-kpi-val {
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--v2-text, #16171a);
}
.x4-missions-kpi-pos { color: var(--pos-fg, #136d45); }
.x4-missions-kpi-neg { color: var(--neg-fg, #a74137); }
.x4-missions-kpi-lbl {
  min-width: 0;
  font-size: 12px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Barre « Regrouper par » + filtres ──────────────────────── */
.x4-missions-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255, 255, 255, 0.42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
}
.x4-missions-barre-lbl {
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}
.x4-missions-sep {
  width: 1px;
  height: 20px;
  background: var(--stroke-2, rgba(20, 20, 25, 0.05));
}

/* ── « Compléter n horaires (auto) » ────────────────────────── */
.x4-missions-auto-row { display: flex; justify-content: flex-end; }
.x4-missions-auto {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  color: var(--v2-accent, #7d640d);
  font-size: 12.5px;
  font-weight: 620;
}
.x4-missions-auto:hover { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); }

/* ── La table : panneau opaque, coins ronds, une seule grille ─ */
.x4-missions-table {
  background: var(--panel-solid, #fff);
  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-missions-head {
  display: grid;
  grid-template-columns: var(--x4-missions-grid);
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 40px;
  background: var(--panel-2, rgba(255, 255, 255, 0.42));
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: 0.08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-missions-col-r { text-align: right; }

/* ── Bande de groupe : sur --inset, rail 3 px à gauche ──────── */
.x4-missions-bande {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 12px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  border-top: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-left: 3px solid var(--pos-fg, #136d45);
}
.x4-missions-bande-mono {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs, 9px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  color: var(--v2-text-2, #55595f);
  font-size: 10.5px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-missions-bande-nom {
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-missions-bande-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  font-size: 10.5px;
  font-weight: 620;
  color: var(--v2-accent, #7d640d);
  flex-shrink: 0;
}
.x4-missions-bande-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  font-size: 11px;
  color: var(--v2-text-2, #55595f);
  flex-shrink: 0;
}
.x4-missions-bande-stats {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-shrink: 0;
}
.x4-missions-bande-stat { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-missions-bande-stat strong {
  font-size: 13px;
  font-weight: 680;
  color: var(--v2-text, #16171a);
  font-variant-numeric: tabular-nums;
}
.x4-missions-bande-stat strong.x4-missions-b-pos { color: var(--pos-fg, #136d45); }
.x4-missions-bande-stat strong.x4-missions-b-neg { color: var(--neg-fg, #a74137); }
.x4-missions-bande-last {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--v2-text-3, #6b6f76);
  flex-shrink: 0;
}

/* ── Les lignes : même liste de pistes que l'en-tête ────────── */
.x4-missions-row {
  display: grid;
  grid-template-columns: var(--x4-missions-grid);
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 40px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, 0.05));
}
.x4-missions-row-clic { cursor: pointer; }
.x4-missions-row-clic:hover { background: var(--inset, rgba(0, 0, 0, 0.035)); }

.x4-missions-c1 { min-width: 0; }
.x4-missions-nom {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-missions-sub {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-missions-poste {
  min-width: 0;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-missions-poste-sub {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pastille de créneau : point coloré + libellé, encre du texte. */
.x4-missions-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 21px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
}
.x4-missions-slot-dot { width: 6px; height: 6px; border-radius: 99px; }
.x4-missions-slot-jour { background: var(--pos, rgba(23, 128, 81, 0.15)); }
.x4-missions-slot-jour .x4-missions-slot-dot { background: var(--pos-fg, #136d45); }
.x4-missions-slot-nuit { background: var(--info-soft, rgba(53, 104, 196, 0.11)); }
.x4-missions-slot-nuit .x4-missions-slot-dot { background: var(--info-fg, #3160b4); }
.x4-missions-slot-we { background: var(--accent-soft, rgba(245, 213, 71, 0.26)); }
.x4-missions-slot-we .x4-missions-slot-dot { background: var(--v2-accent, #7d640d); }
.x4-missions-slot-autre { background: var(--inset, rgba(0, 0, 0, 0.035)); }
.x4-missions-slot-autre .x4-missions-slot-dot { background: var(--v2-text-3, #6b6f76); }

.x4-missions-cout {
  text-align: right;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  font-variant-numeric: tabular-nums;
}
.x4-missions-tarif {
  text-align: right;
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Marge : pastille + cible en dessous du seuil, encre par zone. */
.x4-missions-marge-c {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.x4-missions-marge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.x4-missions-marge-pos { background: var(--pos, rgba(23, 128, 81, 0.15)); color: var(--pos-fg, #136d45); }
.x4-missions-marge-accent { background: var(--accent-soft, rgba(245, 213, 71, 0.26)); color: var(--v2-accent, #7d640d); }
.x4-missions-marge-neg { background: var(--neg-soft, rgba(193, 75, 64, 0.11)); color: var(--neg-fg, #a74137); }
.x4-missions-cible {
  font-size: 10.5px;
  color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
}

/* Statut. */
.x4-missions-statut {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
}
.x4-missions-statut-cours { background: var(--pos, rgba(23, 128, 81, 0.15)); color: var(--pos-fg, #136d45); }
.x4-missions-statut-nego { background: var(--accent-soft, rgba(245, 213, 71, 0.26)); color: var(--v2-accent, #7d640d); }
.x4-missions-statut-stop { background: var(--inset, rgba(0, 0, 0, 0.035)); color: var(--v2-text-2, #55595f); }

/* ── Vue Modifications : pastille d'action + colonne « Par » ── */
.x4-missions-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 23px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
  justify-self: start;
}
.x4-missions-act svg { flex-shrink: 0; }
.x4-missions-act-add { background: var(--pos, rgba(23, 128, 81, 0.15)); }
.x4-missions-act-add svg { stroke: var(--pos-fg, #136d45); }
.x4-missions-act-del { background: var(--neg-soft, rgba(193, 75, 64, 0.11)); }
.x4-missions-act-del svg { stroke: var(--neg-fg, #a74137); }
.x4-missions-act-mod { background: var(--info-soft, rgba(53, 104, 196, 0.11)); }
.x4-missions-act-mod svg { stroke: var(--info-fg, #3160b4); }
.x4-missions-act-dup { background: var(--accent-soft, rgba(245, 213, 71, 0.26)); }
.x4-missions-act-dup svg { stroke: var(--v2-accent, #7d640d); }

.x4-missions-par {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.x4-missions-par-av {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  color: var(--v2-accent, #7d640d);
  font-size: 9.5px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-missions-par-nom {
  font-size: 11.5px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-missions-par-vide { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }

/* ── État vide : dit quoi faire, jamais un chiffre inventé ──── */
.x4-missions-vide {
  padding: 44px 24px 48px;
  text-align: center;
}
.x4-missions-vide-titre {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
}
.x4-missions-vide-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--v2-text-3, #6b6f76);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}