/* OCTOPUS PTT — Console de dispatch, langage visuel 2026 — v0.5 « couleurs fonctionnelles »
   Source of truth: docs/design/2026/LANGUAGE.md §14 (overrides §13 on dispatch) + docs/design/2026/dispatch-v05/.
   No shadow, no blur, no gradient (except the hard hazard pattern), radius ≤ 4 px, no pills.
   v0.5 (owner feedback 2026-10-25): softer surfaces, one hue per alert type used identically on every screen
   (SOS red + hazard, Chute magenta, Isolé / Check-in amber, Zone violet), open = loud / handled = quiet,
   cyan = someone talks (tint), green = console on air (fill) / online dot, brand orange only for the logo,
   the active-tab underline and the focus ring (never a fill, never a state), selection is white. */

:root {
  /* surfaces: page → panel → raised → hover / selected row (each step visible) */
  --ink-0: #14171C;
  --ink-1: #1A1E24;
  --ink-2: #232830;
  --ink-3: #2D333C;
  --rule: #2C323A;
  --rule-2: #444C57;
  --fg-1: #EEF1F4;
  --fg-2: #C2C9D2;
  --fg-3: #97A0AC;   /* labels, handled rows — 6.3:1 on ink-1 */
  --paper: #EEF1F4;
  --brand: #F26A21;  /* logo, active-tab underline, focus ring ONLY */
  /* alert palette (§14.2): text/stroke on dark, fill, text on fill, row tint */
  --sos: #FF5C57;  --sos-f: #D92B26;  --on-sos: #FFFFFF;  --sos-t: rgba(255, 70, 64, .16);  --sos-deep: #4A1414;
  --chute: #F57AD8;  --on-chute: #22061C;  --chute-t: rgba(245, 122, 216, .13);  --chute-deep: #3A1634;
  --isole: #FFAE33;  --on-isole: #231400;  --isole-t: rgba(255, 174, 51, .10);
  --zone: #A898FF;   --on-zone: #110A30;   --zone-t: rgba(168, 152, 255, .11);
  /* status */
  --ok: #4FD18B;     /* online dot, acknowledged check */
  --off: #8E97A3;    /* hollow dot */
  --tx: #2FE07B;   --on-tx: #03160A;  --tx-tint: rgba(47, 224, 123, .14);   /* the console on air: a fill */
  --rx: #45CFF5;   --on-rx: #03141C;  --rx-tint: rgba(69, 207, 245, .12);   /* someone talks: a tint */
  /* v0.4 "busy" = every attention (low battery, link down, errors) → the Isolé amber (§14.2) */
  --busy: var(--isole); --on-busy: var(--on-isole); --busy-tint: var(--isole-t);
  --scrim: rgba(8, 10, 12, 0.72);
  /* channel identity (groups.color → channelSwatch): 10 px chip + 4 px module edge only, never a row tint.
     Stored colours keep their names; the display is the desaturated v0.5 set (--ch1…--ch6). */
  --ch-bleu: #7393BD;    /* ch1 */
  --ch-orange: #BFA273;  /* ch2 sand: an "orange" channel must never read as the brand or an alert */
  --ch-vert: #5EA69C;    /* ch3 */
  --ch-olive: #949E5E;   /* ch4 */
  --ch-brique: #B5836F;  /* ch5 */
  --ch-violet: #8C8FB8;  /* ch6 */
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-semi: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --f-mono: "JetBrains Mono", Consolas, monospace;
  --hazard: repeating-linear-gradient(45deg, var(--sos-f) 0 6px, #0A0B0C 6px 12px);
  --hatch: repeating-linear-gradient(-45deg, var(--isole) 0 3px, transparent 3px 8px);
  --dock-h: 84px;
  --gap: 12px;
  /* legacy tokens still referenced by some scripts */
  --status-online: var(--ok);
  --status-busy: var(--busy);
  --status-battery: var(--busy);
  --status-offline: var(--off);
  --status-sos: var(--isole); /* legacy name: errors are amber, red is SOS only */
  --text-2: var(--fg-2);
  --surface-3: var(--ink-2);
}

* { box-sizing: border-box; border-color: var(--rule); }
html, body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--ink-0); color: var(--fg-1);
  font-family: var(--f-semi); font-weight: 500; font-size: 15px; line-height: 20px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) var(--ink-0); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--ink-0); }
*::-webkit-scrollbar-thumb { background: var(--rule-2); }
::placeholder { color: var(--fg-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon, svg[aria-hidden="true"] { width: 16px; height: 16px; stroke-width: 1.5; flex: none; }

/* ── Type scale (dispatch) ─────────────────────────────────────── */
/* v0.5 (§14.3 rule 8): UPPERCASE Barlow Condensed only for channel names (t-name / t-readout), state words
   (t-state) and section heads (t-section). Tables and panels are Barlow Semi Condensed 15 px sentence case
   (14 px minimum); JetBrains Mono only for the clock, timers, durations, IDs and counts. */
.t-readout { font-family: var(--f-cond); font-weight: 700; font-size: 28px; line-height: 30px; text-transform: uppercase; letter-spacing: .02em; }
.t-state   { font-family: var(--f-cond); font-weight: 700; font-size: 20px; line-height: 22px; text-transform: uppercase; letter-spacing: .02em; }
.t-name    { font-family: var(--f-cond); font-weight: 700; font-size: 20px; line-height: 22px; text-transform: uppercase; letter-spacing: .02em; }
.t-section { font-family: var(--f-cond); font-weight: 700; font-size: 15px; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.t-timer   { font-family: var(--f-mono); font-weight: 700; font-size: 22px; line-height: 24px; font-variant-numeric: tabular-nums slashed-zero; }
.t-body    { font-family: var(--f-semi); font-weight: 500; font-size: 15px; line-height: 20px; }
.t-button  { font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0; }
.t-data, .mono { font-family: var(--f-mono); font-weight: 500; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums slashed-zero; }
.t-label   { font-family: var(--f-semi); font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.t-label .mono, .t-label.mono { font-size: 12px; }
.fg1 { color: var(--fg-1); } .fg2 { color: var(--fg-2); } .fg3 { color: var(--fg-3); }
.busy-text { color: var(--busy); }
.grow { flex: 1 1 auto; min-width: 0; }
.self-start { align-self: flex-start; }
.w40 { width: 40px; } .w24 { width: 24px; } .w72 { width: 72px; } .w96 { width: 96px; } .w120 { width: 120px; } .w130 { width: 130px; }
.w160 { width: 160px; } .w180 { width: 180px; } .w240 { width: 240px; } .w420 { width: 420px; max-width: 100%; }
.hatch { background-color: var(--ink-1); background-image: var(--hatch); }
.hazard { background-image: var(--hazard); }
@media (max-width: 1599px) { .wide-only { display: none !important; } }
/* FIX-1 M4-16: at 1366 px the Units table shares the screen with the fiche: optional columns hidden. */
@media (max-width: 1500px) { .mid-only { display: none !important; } }

/* ── Primitives ────────────────────────────────────────────────── */
.keycap { display: inline-flex; align-items: center; height: 14px; padding: 0 4px; border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; line-height: 12px; color: var(--fg-2); letter-spacing: 0; text-transform: uppercase; flex: none; }
.badge-frame { display: inline-flex; flex: none; border: 1px solid var(--rule-2); background: var(--ink-0); padding: 3px; }
.badge-frame img { display: block; }
.wordmark { font-family: var(--f-cond); font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-1); white-space: nowrap; }
.wordmark.dark { color: var(--ink-0); font-size: 18px; }

/* Keys (§11) */
.key, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-height: 28px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--ink-2); color: var(--fg-1); white-space: nowrap; text-decoration: none;
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0;
}
.key:hover, .btn:hover { color: var(--fg-1); background: var(--ink-3); border-color: #4A5462; }
.key:active, .btn:active { background: var(--ink-3); }
.key.on, .key[aria-pressed="true"] { background: var(--ink-3); color: var(--fg-1); border-color: var(--fg-3); }
/* primary action = thick white frame on ink-2 (§14.3 rule 5: orange never fills anything) */
.key.primary { background: var(--ink-2); border: 2px solid var(--fg-1); color: var(--fg-1); }
.key.primary:hover { background: var(--ink-3); border-color: var(--fg-1); color: var(--fg-1); }
/* frameless row action: becomes a key on hover / on the active row */
.key.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.key.ghost:hover { background: var(--ink-3); border-color: var(--rule-2); color: var(--fg-1); }
.key.tx { background: var(--tx); border-color: var(--tx); color: var(--on-tx); }
/* state-resolving key = fill of the state (ACQUITTER, one per screen) */
.key.sos-action { background: var(--sos-f); border: 1px solid var(--sos-f); color: var(--on-sos);
  font-family: var(--f-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.key.sos-action:hover { background: #E8352F; border-color: #E8352F; color: var(--on-sos); }
.key.sos-action .keycap { border-color: rgba(255, 255, 255, .5); color: var(--on-sos); }
.key.chute-action { background: var(--chute); border: 1px solid var(--chute); color: var(--on-chute);
  font-family: var(--f-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.key.chute-action:hover { background: #FF8FE2; border-color: #FF8FE2; color: var(--on-chute); }
.key.chute-action .keycap { border-color: rgba(34, 6, 28, .5); color: var(--on-chute); }
.key:disabled, .btn:disabled, .key[aria-disabled="true"] {
  border-style: dashed; border-color: var(--rule-2); color: var(--fg-3); background: transparent; cursor: default; }
.key.h6 { min-height: 24px; height: 24px; padding: 0 6px; font-size: 12px; }
.key.h7 { min-height: 28px; height: 28px; padding: 0 8px; }
.key.h8 { min-height: 32px; height: 32px; }
.key.h10 { min-height: 40px; height: 40px; padding: 0 16px; }
.key.sq { width: 32px; padding: 0; }
.key.h10.sq { width: 40px; }
.btn-xs { min-height: 24px; padding: 0 6px; font-size: 12px; }
.btn-sm { min-height: 28px; }
.link-btn { color: var(--fg-2); }
.link-btn:hover { color: var(--fg-1); }
.link-btn b { color: var(--fg-1); font-weight: 500; }

/* Segmented key group */
.kgroup { display: inline-flex; flex: none; border: 1px solid var(--rule-2); border-radius: 2px; }
.kgroup > button { height: 32px; padding: 0 12px; white-space: nowrap; background: var(--ink-1); color: var(--fg-2);
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0; }
.kgroup > button + button { border-left: 1px solid var(--rule-2); }
.kgroup > button:hover { color: var(--fg-1); background: var(--ink-2); }
.kgroup > button[aria-pressed="true"], .kgroup > button.active { background: var(--ink-3); color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
.kgroup.paper > button[aria-pressed="true"] { background: var(--ink-3); color: var(--fg-1); }
.kgroup.full { display: flex; }
.kgroup.full > button { flex: 1; }
.kgroup .mono { font-size: 13px; margin-left: 2px; }
.kgroup.disabled > button { color: var(--fg-3) !important; background: var(--ink-1) !important; pointer-events: none; }

/* Two-state switch INACTIF | ACTIF (paper = imposed by the dispatcher) */
.switch2 { display: inline-flex; flex: none; border: 1px solid var(--rule-2); border-radius: 2px; overflow: hidden; }
.switch2 > .s2-off, .switch2 > .s2-on { display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; }
.switch2 > .s2-on { border-left: 1px solid var(--rule-2); }
.switch2[aria-checked="false"] > .s2-off { background: var(--ink-3); color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
.switch2[aria-checked="false"] > .s2-on { background: var(--ink-1); color: var(--fg-3); }
.switch2[aria-checked="true"] > .s2-off { background: var(--ink-1); color: var(--fg-3); }
.switch2[aria-checked="true"] > .s2-on { background: var(--ink-3); color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
.switch2:hover > span { filter: none; }
.switch2[aria-busy="true"] { border-style: dashed; }
/* checkbox drawn as the same switch */
.sw-check { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 128px; height: 34px; border: 1px solid var(--rule-2); border-radius: 2px; cursor: pointer;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) left / 50% 100% no-repeat,
    var(--ink-1); position: relative; }
.sw-check::before, .sw-check::after { position: absolute; top: 0; height: 32px; width: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; }
.sw-check::before { content: "Inactif"; left: 0; color: var(--fg-1); }
.sw-check::after { content: "Actif"; right: 0; color: var(--fg-3); border-left: 1px solid var(--rule-2); }
.sw-check:checked { background: linear-gradient(var(--fg-1), var(--fg-1)) right bottom / 50% 2px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) right / 50% 100% no-repeat, var(--ink-1); }
.sw-check:checked::before { color: var(--fg-3); }
.sw-check:checked::after { color: var(--fg-1); }

/* Inputs */
.input { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-1); outline: none; }
.input:focus { outline: 2px solid var(--brand); outline-offset: 0; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background: var(--ink-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23A7ACA6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.input.h8 { height: 32px; }
.input.w-auto { width: auto; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field .input + .input { margin-top: 4px; }
.field-row { display: flex; gap: 8px; }
.field-row > .field { flex: 1; }
.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid2 .span2 { grid-column: span 2; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-input { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-3); }
.search-input:focus-within { outline: 2px solid var(--brand); }
.search-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg-1); font-family: var(--f-semi); font-size: 14px; }
.search-input input::-webkit-search-cancel-button { filter: invert(.6); }
.clear-btn { color: var(--fg-3); display: flex; }
.select-key { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 0 0 10px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-2); }
.select-key select { height: 30px; border: 0; background: transparent; color: var(--fg-1); font-family: var(--f-semi); font-weight: 600; font-size: 14px; padding: 0 8px; outline: none; }
.select-key option, select option { background: var(--ink-1); color: var(--fg-1); text-transform: none; }

/* Segments (S2) */
.seg { display: flex; gap: 2px; min-width: 0; }
.seg > i { flex: 1 1 0; height: 8px; border-radius: 2px; border: 1px solid var(--rule); background: var(--ink-2); }
.seg > i.on { border-color: transparent; background: var(--fg-2); }
.seg > i.on.c-tx { background: var(--tx); }
.seg > i.on.c-rx { background: var(--rx); }
.seg > i.on.c-busy { background: var(--busy); }
.seg-tape > i { height: 10px; }

/* Battery 5 bars / signal 4 bars */
.hw { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.bat { display: inline-flex; align-items: center; gap: 4px; }
.bat-bars, .sig-bars { display: inline-flex; gap: 2px; }
.bat-bars > i { width: 4px; height: 10px; border-radius: 2px; border: 1px solid var(--rule); background: var(--ink-2); }
.bat-bars > i.on { border-color: transparent; background: var(--fg-2); }
.bat.low .bat-bars > i.on { background: var(--busy); }
.bat-val { width: 32px; text-align: right; color: var(--fg-2); }
.bat-low-tag { padding: 0 4px; border-radius: 2px; background: var(--busy); color: var(--on-busy); }
.sig { display: inline-flex; align-items: flex-end; gap: 4px; }
.sig-bars { align-items: flex-end; }
.sig-bars > i { width: 3px; border-radius: 2px; border: 1px solid var(--rule); background: var(--ink-2); }
.sig-bars > i:nth-child(1) { height: 4px; } .sig-bars > i:nth-child(2) { height: 6px; } .sig-bars > i:nth-child(3) { height: 8px; } .sig-bars > i:nth-child(4) { height: 10px; }
.sig-bars > i.on { border-color: transparent; background: var(--fg-2); }
.sig-net { color: var(--fg-2); }

/* Tags (S4 / DISP) */
.unit-tag { display: inline-flex; align-items: center; flex: none; padding: 0 4px; border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; line-height: 14px; color: var(--fg-2); white-space: nowrap; }
.unit-tag.console { background: var(--ink-3); border-color: var(--rule-2); color: var(--fg-1); }
.unit-tag.off { border-style: dashed; border-color: var(--off); color: var(--off); }
.utag { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.utag .un { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-1); }
.utag.off .un { color: var(--fg-3); }
.disp-tag { display: inline-flex; align-items: center; height: 16px; flex: none; padding: 0 4px; border-radius: 2px; background: var(--ink-3); color: var(--fg-2); border: 1px solid var(--rule-2);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; line-height: 12px; white-space: nowrap; text-transform: uppercase; }
.paper-strip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; background: var(--paper); color: var(--ink-0);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; white-space: nowrap; text-transform: uppercase; }
.hatch-tag { display: inline-flex; align-items: center; height: 20px; margin-left: 6px; padding: 0 6px; border: 1px solid var(--isole); border-radius: 2px; background: var(--isole-t); color: var(--isole); font-family: var(--f-semi); font-size: 13px; }
/* Alert type tag (§14.2): filled = open (SOS: white on red, Barlow Condensed), quiet = coloured glyph + grey word.
   Glyph always with the word: SOS word, Chute arrow to the ground, Isolé person, Check-in clock, Zone hexagon. */
.atag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border-radius: 2px; font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 16px; white-space: nowrap; flex: none; }
.atag svg { width: 14px; height: 14px; flex: none; }
.atag.sos { padding: 0 8px; background: var(--sos-f); color: var(--on-sos); font-family: var(--f-cond); font-weight: 700; font-size: 16px; letter-spacing: .05em; }
.atag.chute { background: var(--chute); color: var(--on-chute); }
.atag.isole, .atag.checkin { background: var(--isole); color: var(--on-isole); }
.atag.zone { background: var(--zone); color: var(--on-zone); }
.atag.sm { height: 20px; font-size: 13px; }
.atag.sos.sm { font-size: 14px; }
.atag.q { height: auto; padding: 0; background: transparent; color: var(--fg-2); font-family: var(--f-semi); font-weight: 500; font-size: 14px; letter-spacing: 0; }
.atag.q.sos { color: var(--sos); font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.atag.q.chute svg { color: var(--chute); }
.atag.q.isole svg, .atag.q.checkin svg { color: var(--isole); }
.atag.q.zone svg { color: var(--zone); }
.chan { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-2); white-space: nowrap; }
.chan > span { overflow: hidden; text-overflow: ellipsis; }
.pin { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--fg-3); border-radius: 2px; }
.pin svg { width: 18px; height: 18px; }
button.pin:hover { color: var(--fg-1); background: var(--ink-3); }
.okc { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); white-space: nowrap; }
.okc svg { width: 14px; height: 14px; color: var(--ok); }
.ico { display: inline-flex; }
.ico svg { width: 14px; height: 14px; }
.empty-line { padding: 12px 16px; color: var(--fg-2); font-family: var(--f-semi); font-size: 14px; line-height: 18px; }
.empty-cell { padding: 16px 12px !important; color: var(--fg-2); font-family: var(--f-semi); font-size: 14px; }

/* S1 Readout: notched top-right corner */
.readout { --fw: 1px; --fc: var(--rule); position: relative; background: var(--ink-1); border: var(--fw) solid var(--fc);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.readout::after { content: ""; position: absolute; top: calc(-1 * var(--fw)); left: calc(100% + var(--fw) - 10px); width: 14.15px; height: var(--fw);
  background: var(--fc); transform-origin: 0 0; transform: rotate(45deg); pointer-events: none; }
.readout[data-frame="tx"] { --fw: 2px; --fc: var(--tx); }
.readout[data-frame="rx"] { --fw: 2px; --fc: var(--rx); }
.readout[data-frame="busy"] { --fw: 2px; --fc: var(--busy); }
.readout[data-frame="sos-ack"] { --fw: 2px; --fc: var(--sos); background: var(--sos-deep); }
.readout[data-frame="sos"] { --fw: 4px; --fc: var(--sos); background: var(--sos-deep); border-image: var(--hazard) 4; }
.readout[data-frame="off"] { border-style: dashed; --fc: var(--off); }


/* ── App shell ─────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; background: var(--ink-0); }

/* Top bar (§14.3 rule 9): 44 px, never wraps at 1366 — badge + wordmark · site · tabs (F-keys in tooltips) ·
   one link light · operator · clock HH:MM · Quitter. Alert counters live in the Alertes tab, one coloured box per
   type with a non-zero count. */
.topbar { display: flex; align-items: stretch; gap: 16px; height: 44px; flex: none; padding: 0 12px 0 0; background: var(--ink-1); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tb-brand { display: flex; align-items: center; gap: 8px; height: 100%; padding-left: 8px; flex: none; }
.tb-nav { display: flex; align-items: stretch; height: 100%; min-width: 0; margin-left: 8px; }
.tb-tab { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--fg-2); }
.tb-tab .t-button { font-size: 15px; font-weight: 600; }
.tb-tab:hover { background: var(--ink-2); color: var(--fg-1); }
.tb-tab.active { color: var(--fg-1); background: var(--ink-2); }
.tb-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); }
.tab-counts { display: inline-flex; gap: 4px; }
.tab-counts:empty { display: none; }
.cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 2px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; line-height: 12px; font-variant-numeric: tabular-nums; }
.cnt.sos { background: var(--sos-f); color: var(--on-sos); }
.cnt.chute { background: var(--chute); color: var(--on-chute); }
.cnt.warn { background: var(--isole); color: var(--on-isole); }
.cnt.zone { background: var(--zone); color: var(--on-zone); }
.tb-right { display: flex; align-items: center; gap: 16px; height: 100%; flex: none; margin-left: auto; }
/* link light (also used on the login screen, where both words stay visible) */
.link-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; font-family: var(--f-semi); font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.link-state > .t-label { color: var(--fg-3); }
.link-state .ls-mark { width: 8px; height: 8px; border-radius: 4px; border: 1.5px solid var(--off); flex: none; }
.link-state .ls-word { color: var(--fg-2); }
.link-state[data-state="ok"] .ls-mark { background: var(--ok); border-color: var(--ok); }
.link-state[data-state="warn"] .ls-mark, .link-state[data-state="down"] .ls-mark { background: var(--isole); border-color: var(--isole); }
.link-state[data-state="warn"], .link-state[data-state="down"],
.link-state[data-state="warn"] > .t-label, .link-state[data-state="down"] > .t-label,
.link-state[data-state="warn"] .ls-word, .link-state[data-state="down"] .ls-word { color: var(--isole); }
.topbar .link-state[data-state="ok"] > .t-label { display: none; }
.topbar .link-state:not([data-state="ok"]) .ls-word { text-transform: lowercase; }
/* one light: the server link hides itself while ok; while it is down it is the only light */
#serverStatusChip[data-state="ok"] { display: none; }
#serverStatusChip:not([data-state="ok"]) ~ #headerStatusChip { display: none; }
#headerConnectBtn { display: none; margin-left: 4px; }
#headerStatusChip[data-state="down"] #headerConnectBtn { display: inline-flex; }
.tb-operator { display: inline-flex; align-items: center; white-space: nowrap; }
.tb-operator #headerOperator { font-size: 15px; }
.tb-clock { display: flex; align-items: center; }
.tb-time { font-family: var(--f-mono); font-weight: 700; font-size: 16px; line-height: 16px; color: var(--fg-1); font-variant-numeric: tabular-nums slashed-zero; }
.tb-logout { color: var(--fg-2); white-space: nowrap; font-size: 14px; }
.tb-logout:hover { color: var(--fg-1); }
@media (max-width: 1599px) { .topbar { gap: 12px; } .tb-right { gap: 12px; } .tb-tab { padding: 0 11px; } }

.views { flex: 1 1 auto; min-height: 0; display: flex; }
.view { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* ── SOS takeover (§14.3 rule 10): 4 px hazard frame, 48 px band, the one loud moment ─── */
html[data-sos="active"] .app { border: 4px solid transparent; border-image: var(--hazard) 4; }
html[data-sos="ack"] .app { border: 2px solid var(--sos-f); }
html[data-sos="active"][data-sos-kind="chute"] .app { border: 4px solid var(--chute); border-image: none; }
html[data-sos="ack"][data-sos-kind="chute"] .app { border-color: var(--chute); }
.sos-band { position: relative; display: flex; align-items: center; gap: 16px; height: 48px; flex: none; padding: 0 12px 0 0; background: var(--sos-deep); border-bottom: 2px solid var(--sos-f); color: var(--on-sos); overflow: hidden; white-space: nowrap; }
.sos-band .sb-hz { align-self: stretch; width: 28px; flex: none; background-image: var(--hazard); }
.sos-band .sb-word { font-family: var(--f-cond); font-weight: 700; font-size: 28px; line-height: 30px; letter-spacing: .04em; }
.sos-band .sb-who { font-weight: 600; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sos-band .chan { color: rgba(255, 255, 255, .8); }
.sos-band .sb-timer { color: var(--on-sos); font-size: 20px; }
.sos-band .sb-more { padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 2px; font-weight: 600; font-size: 15px; }
.sos-band .sb-acked { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); }
.sos-band .sb-acked svg { width: 14px; height: 14px; color: var(--ok); }
.sos-band .sb-keys { margin-left: auto; display: flex; gap: 8px; flex: none; }
.sos-band .key { height: 32px; border-color: rgba(255, 255, 255, .5); color: var(--on-sos); background: transparent; }
.sos-band .key:hover { background: rgba(255, 255, 255, .08); }
.sos-band .key.sos-action { background: var(--sos-f); border-color: var(--sos-f); }
.sos-band .key.chute-action { background: var(--chute); border-color: var(--chute); color: var(--on-chute); }
.sos-band.ack .sb-hz { background: var(--sos-f); }
.sos-band.chute { background: var(--chute-deep); border-bottom-color: var(--chute); }
.sos-band.chute .sb-hz { background: var(--chute); }
@media (max-width: 1400px) { .sos-band { gap: 12px; } .sos-band .chan { display: none; } }
/* ── CONSOLE view ──────────────────────────────────────────────── */
/* Three panels separated by a 1 px rule: Canaux (2 columns) | carte | Unités + Rappel (dispatch-v05 f1-console). */
.view-console { display: flex; }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--ink-1); }
.col-head .t-section .mono { display: none; }
.col-head-right { display: flex; gap: 12px; }
.col-head .link-btn { font-family: var(--f-semi); font-size: 14px; color: var(--fg-3); }
.col-head .link-btn:hover { color: var(--fg-1); }
.col-head .link-btn b { color: var(--fg-3); font-weight: 500; }
.col-channels { display: flex; flex-direction: column; width: 500px; flex: none; border-right: 1px solid var(--rule); min-height: 0; background: var(--ink-0); }
.col-channels > .col-head { background: var(--ink-0); border-bottom: 0; height: 36px; }
.mc-return-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.mc-return-btn { font-family: var(--f-semi); font-size: 13px; color: var(--fg-2); border: 1px solid var(--rule-2); border-radius: 2px; padding: 0 8px; height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-return-btn:hover { color: var(--fg-1); background: var(--ink-2); }
.channel-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: var(--gap); padding: 0 var(--gap) var(--gap); overflow-y: auto; align-content: start; }
.channel-grid > .empty-line { grid-column: 1 / -1; }
@media (max-width: 1400px) { .col-channels { width: 420px; } .channel-grid { gap: 8px; padding: 0 8px 8px; } }

/* Channel module: 4 px channel edge, NAME, one state line, online count, Sél · Surv · PTT.
   Selected = 2 px white frame; someone talks = cyan frame + tinted state line; SOS = red frame + hazard line. */
.chm { --ch: var(--rule-2); position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 12px 10px 14px;
  background: var(--ink-1); border: 1px solid var(--rule-2); clip-path: none; }
.chm::after { display: none; }
.chm-stripe { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--ch); z-index: 1; }
.chm-head { display: flex; align-items: center; gap: 8px; }
.chm-head .ch-chip { display: none; }
.ch-chip { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--ch, var(--rule-2)); }
.chm-name { flex: 1; min-width: 0; color: var(--fg-1); font-size: 20px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chm-body { display: contents; }
.chm-state { display: flex; align-items: center; gap: 6px; height: 28px; flex: none; white-space: nowrap; overflow: hidden; color: var(--fg-3); font-size: 14px; }
.chm-state > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.chm-state .st-t { margin-left: auto; font-family: var(--f-mono); font-size: 13px; }
.chm-state[data-k="rx"], .chm-state[data-k="tx"], .chm-state[data-k="busy"] { padding: 0 8px; font-weight: 600; font-size: 15px; }
.chm-state[data-k="rx"] { background: var(--rx-tint); color: var(--rx); }
.chm-state[data-k="tx"] { background: var(--tx-tint); color: var(--tx); }
.chm-state[data-k="busy"] { background: var(--isole-t); color: var(--isole); }
.chm-state[data-k="off"] { color: var(--off); }
.chm-state[data-k="unheard"] { color: var(--fg-3); }
.chm-state[data-k="sos"] { padding: 0 8px 0 0; gap: 8px; background: var(--sos-deep); color: var(--on-sos); font-weight: 600; font-size: 15px; }
.chm-state[data-k="sos"]::before { content: ""; align-self: stretch; width: 16px; flex: none; background-image: var(--hazard); }
.chm-state[data-k="sos"][data-kind="chute"] { background: var(--chute-deep); }
.chm-state[data-k="sos"][data-kind="chute"]::before { background: var(--chute); }
.chm-level { flex: none; }
.chm-level > i { height: 6px; }
.chm-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-2); font-size: 14px; line-height: 18px; }
.chm-meta .on-dot { width: 8px; height: 8px; border-radius: 4px; flex: none; border: 1.5px solid var(--off); }
.chm-meta.has-online .on-dot { background: var(--ok); border-color: var(--ok); }
.chm-meta .chm-count { white-space: nowrap; }
.chm-meta .chm-count b { font-weight: 500; color: var(--fg-2); }
.chm-meta .chm-cid { display: none; }
.chm-keys { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.chm-keys .key { flex: 1; height: 30px; min-height: 30px; padding: 0 6px; background: transparent; }
.chm-keys .key:hover { background: var(--ink-3); }
.chm-keys .k-sel[aria-pressed="true"], .chm-keys .k-surv[aria-pressed="true"] { background: var(--ink-3); border-color: var(--fg-2); color: var(--fg-1); }
.chm-keys .k-ptt.on, .chm-keys .k-ptt.tx { background: var(--tx); border-color: var(--tx); color: var(--on-tx); }
.chm[data-selected="true"] { border: 2px solid var(--fg-1); padding: 9px 11px 9px 13px; }
.chm[data-selected="true"] .chm-stripe { left: -2px; top: -2px; bottom: -2px; }
.chm:not([data-selected="true"])[data-frame="rx"] { border-color: var(--rx); }
.chm:not([data-selected="true"])[data-frame="tx"] { border-color: var(--tx); }
.chm[data-frame="sos"], .chm[data-frame="sos-ack"] { border: 2px solid var(--sos-f); padding: 9px 11px 9px 13px; }
.chm[data-frame="sos"][data-kind="chute"], .chm[data-frame="sos-ack"][data-kind="chute"] { border-color: var(--chute); }
.chm[data-frame="sos"] .chm-stripe, .chm[data-frame="sos-ack"] .chm-stripe { left: -2px; top: -2px; bottom: -2px; }
@media (max-height: 799px) { .chm { gap: 6px; } .chm-keys .key { height: 28px; min-height: 28px; } }
/* recorded calls rows (Rappel list, SOS sheet) */
.play-mini { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-2); color: var(--fg-2); font-size: 8px; }
.play-mini:hover:not(:disabled) { color: var(--fg-1); background: var(--ink-3); }
.play-mini:disabled { border-style: dashed; color: var(--fg-3); background: transparent; cursor: not-allowed; }
.play-mini.playing { background: var(--rx); color: var(--on-rx); border-color: var(--rx); }

/* Map column */
.col-map { position: relative; flex: 1 1 auto; min-width: 0; background: var(--ink-0); }
#map { position: absolute; inset: 0; }
#map.map-placing { cursor: crosshair; }
.map-tools { position: absolute; left: 12px; top: 12px; z-index: 1000; display: flex; flex-direction: column; }
.sq-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); background: var(--ink-1); color: var(--fg-2); }
.sq-btn + .sq-btn { margin-top: -1px; }
.sq-btn:hover, .sq-btn[aria-pressed="true"] { background: var(--ink-2); color: var(--fg-1); }
.map-search { position: absolute; top: 12px; right: 12px; z-index: 1000; width: 280px; }
.map-search .search-input { background: var(--ink-1); height: 34px; }
.search-dropdown { flex-direction: column; margin-top: 2px; border: 1px solid var(--rule-2); background: var(--ink-1); max-height: 260px; overflow-y: auto; }
.address-search-item { display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.address-search-item:hover { background: var(--ink-2); }
.address-search-item .item-type { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); }
.address-search-item .item-icon { color: var(--fg-3); }
.map-legend { position: absolute; left: 12px; bottom: 12px; z-index: 1000; max-width: calc(100% - 72px); border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-2); font-family: var(--f-semi); font-size: 13px; }
.map-legend > summary { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; cursor: pointer; list-style: none; color: var(--fg-2); user-select: none; }
.map-legend > summary::-webkit-details-marker { display: none; }
.map-legend > summary::after { content: "▴"; font-size: 10px; color: var(--fg-3); }
.map-legend[open] > summary::after { content: "▾"; }
.map-legend > summary:hover { color: var(--fg-1); }
.map-legend .lg-items { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 10px 8px; }
.map-legend .lg-items > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend i { width: 8px; height: 8px; display: inline-block; font-style: normal; }
.lg-sq { background: var(--fg-1); }
.lg-rx { width: 8px; height: 8px; background: var(--rx); }
.lg-off { border: 1px dashed var(--off); }
.lg-zone { border: 1px dashed var(--zone); }
.lg-viol { background: var(--zone); }
.lg-isole { background: var(--isole); }
.lg-sos { background: var(--sos); }
.map-offline { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); z-index: 1000; padding: 4px 8px 4px 12px; background: var(--ink-1); border-left: 4px solid var(--busy); font-size: 13px; }
.draw-bar { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ink-1); border: 1px solid var(--rule-2); }
.draw-bar .db-text { display: flex; flex-direction: column; margin-right: 8px; }
.map-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1100; width: 360px; display: flex; flex-direction: column; background: var(--ink-1); border-left: 1px solid var(--rule-2); }
.map-panel .mp-head { display: flex; align-items: center; gap: 8px; height: 44px; flex: none; padding: 0 8px 0 16px; border-bottom: 1px solid var(--rule); }
.map-panel .mp-head > .t-button { font-family: var(--f-cond); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-1); }
.map-panel .mp-head > .t-button { flex: 1; }
.map-panel .mp-tabs { margin: 8px 12px; }
.map-panel .mp-body { flex: 1; min-height: 0; overflow-y: auto; }
.map-panel .form-stack { padding: 12px; }
.poi-item { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.poi-item .zi-title { display: flex; align-items: center; gap: 8px; }
.zone-mark { width: 12px; height: 12px; flex: none; border: 1px solid var(--fg-2); }
.zone-mark.off { border-style: dashed; border-color: var(--fg-3); }
.zone-mark { border-color: var(--zone); }
.zone-mark.viol { border: 2px solid var(--zone); background: var(--zone-t); }
.poi-item .zi-keys { display: flex; gap: 8px; }
.poi-filter-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--rule); }
.poi-filter-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-2);
  font-family: var(--f-semi); font-weight: 600; font-size: 13px; }
.poi-filter-btn.active { background: var(--ink-3); color: var(--fg-1); border-color: var(--fg-3); }
.pk { font-family: var(--f-mono); font-size: 10px; }
.map-panel#mapUnitsPanel { width: 340px; }
.map-unit-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.map-unit-card:hover { background: var(--ink-2); }
.map-unit-header, .map-unit-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-unit-details { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.map-unit-actions { display: flex; gap: 6px; }
.unit-status-dot { width: 8px; height: 8px; display: inline-block; }
.playback-bar { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 1002; width: min(620px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--ink-1); border: 1px solid var(--rule-2); }
.pb-head, .pb-row { display: flex; align-items: center; gap: 8px; }
.pb-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pb-row input[type=range] { flex: 1; accent-color: var(--fg-1); }
.pb-addr { color: var(--fg-2); }
.route-pin { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--fg-1); color: var(--ink-0); font-family: var(--f-mono); font-weight: 700; font-size: 11px; }
.route-pin svg { width: 12px; height: 12px; }
.route-pin.playback { background: var(--paper); border: 2px solid var(--ink-0); }
.view-console.map-expanded .col-channels, .view-console.map-expanded .col-right { display: none; }

/* Leaflet theming */
.leaflet-container { background: var(--ink-0) !important; font-family: var(--f-mono); }
.leaflet-control-attribution { background: var(--ink-0) !important; color: var(--fg-3) !important; font-family: var(--f-mono); font-size: 9px !important; border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.leaflet-control-attribution a { color: var(--fg-2) !important; }
.leaflet-bottom.leaflet-right { margin-bottom: 18px; }
.leaflet-control-zoom { border: 0 !important; border-radius: 0 !important; }
.leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 30px !important; background: var(--ink-1) !important; color: var(--fg-2) !important; border: 1px solid var(--rule-2) !important; border-radius: 0 !important; font-family: var(--f-mono) !important; font-size: 16px !important; }
.leaflet-control-zoom a + a { margin-top: -1px; }
.leaflet-control-zoom a:hover { background: var(--ink-2) !important; color: var(--fg-1) !important; }
.leaflet-popup-content-wrapper { background: var(--ink-1); color: var(--fg-1); border: 1px solid var(--rule-2); border-radius: 0; box-shadow: none; }
.leaflet-popup-tip { background: var(--ink-1); border: 1px solid var(--rule-2); box-shadow: none; }
.leaflet-popup-content { margin: 10px 12px; font-family: var(--f-semi); font-size: 13px; line-height: 17px; min-width: 220px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-2); }
.tactical-popup { display: flex; flex-direction: column; gap: 3px; }
.popup-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.popup-title { font-family: var(--f-semi); font-weight: 600; font-size: 15px; }
.popup-sub { color: var(--fg-2); font-size: 12px; }
.popup-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding: 2px 0; font-size: 12px; }
.popup-row > span:first-child { color: var(--fg-3); font-family: var(--f-semi); font-size: 12px; }
.popup-actions, .poi-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-status { font-family: var(--f-semi); font-weight: 600; font-size: 13px; color: var(--ok); }
.badge-status.badge-offline { color: var(--off); }
/* map markers: a 12 px square in the state colour + a name plate framed in the same colour (one name, no ID) */
.om { background: transparent !important; border: 0 !important; }
.om-wrap { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.om-sq { width: 12px; height: 12px; background: var(--fg-1); outline: 1px solid var(--ink-0); flex: none; }
.om-sq.om-isole { background: var(--isole); }
.om-rx { width: 12px; height: 12px; background: var(--rx); outline: 1px solid var(--ink-0); flex: none; }
.om-off { width: 12px; height: 12px; border: 2px dashed var(--off); flex: none; }
.om-plate { font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; padding: 1px 6px; background: var(--ink-0); color: var(--fg-1); border: 1px solid var(--fg-1); }
.om-plate-rx { border-color: var(--rx); }
.om-plate-off { color: var(--fg-3); border: 1px dashed var(--off); }
.om-plate-isole { border-color: var(--isole); }
.om-plate-chute { border-color: var(--chute); }
.om-plate-sel { border-left-width: 3px; }
.om-speed { color: var(--fg-3); margin-left: 6px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; }
.om-sos-mark { width: 16px; height: 16px; flex: none; background: var(--sos); outline: 2px solid #0A0B0C; }
.om-sos-mark.chute { background: var(--chute); }
.om-sos-plate { display: inline-flex; align-items: center; gap: 6px; padding: 1px 6px; background: var(--sos-deep); color: var(--on-sos); border: 2px solid var(--sos-f);
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; }
.om-sos-plate b { font-family: var(--f-cond); font-weight: 700; letter-spacing: .04em; }
.om-sos-plate.chute { background: var(--chute-deep); border-color: var(--chute); }
.om-sos-plate.ack { border-width: 1px; }
.om-hq { width: 12px; height: 12px; background: var(--fg-1); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); flex: none; }
.om-poi { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background: var(--ink-0); border: 1px solid var(--rule-2); color: var(--fg-1);
  font-family: var(--f-mono); font-weight: 700; font-size: 10px; line-height: 10px; flex: none; }
.om-zone-plate { font-family: var(--f-semi); font-size: 13px; line-height: 16px; padding: 1px 6px; background: var(--ink-0); color: var(--zone); border: 1px dashed var(--zone); white-space: nowrap; }
/* Right column: Unités (chip · name · word only for exceptions · battery) over Rappel / Directives / Journal */
.col-right { display: flex; flex-direction: column; width: 340px; flex: none; border-left: 1px solid var(--rule); background: var(--ink-1); min-height: 0; }
@media (max-width: 1400px) { .col-right { width: 300px; } }
.right-normal { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.roster { display: flex; flex-direction: column; flex: 60 1 0; min-height: 0; }
.roster > .col-head .t-label { color: var(--fg-3); }
.roster-tools { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rule); flex: none; }
.roster-tools .kgroup { flex: none; }
.roster-tools .kgroup > button { height: 28px; padding: 0 8px; font-size: 13px; }
.roster-tools .search-input { flex: 1; min-width: 0; height: 30px; }
.roster-list { flex: 1; min-height: 0; overflow-y: auto; }
.urow { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--rule); text-align: left; cursor: pointer; }
.urow:hover { background: var(--ink-2); }
.urow.sel { background: var(--ink-3); }
.urow .u-name { font-weight: 600; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.urow .u-word { font-size: 14px; color: var(--fg-3); white-space: nowrap; }
.urow .u-gl { display: inline-flex; color: var(--isole); }
.urow .u-gl svg { width: 14px; height: 14px; }
.urow .u-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.urow.talking { background: var(--rx-tint); }
.urow.talking .u-word { color: var(--rx); font-weight: 600; }
.urow.offline .u-name { color: var(--fg-3); font-weight: 500; }
.urow.sos { background: var(--sos-t); }
.urow.sos.chute { background: var(--chute-t); }
.urow .u-fiche { display: none; }
.urow.sel .u-fiche, .urow:hover .u-fiche { display: inline-flex; }
.urow.sel .bars, .urow:hover .bars { display: none; }
/* 5-bar battery, no number (the number is in the tooltip and in F5) */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; }
.bars > i { width: 4px; height: 10px; background: var(--fg-2); }
.bars > i.e { background: var(--ink-3); }
.bars.lo > i:not(.e) { background: var(--isole); }

.recall { display: flex; flex-direction: column; flex: 40 1 0; min-height: 0; border-top: 1px solid var(--rule); }
.tabs-line { display: flex; height: 40px; flex: none; border-bottom: 1px solid var(--rule); padding: 0 4px; }
.tab-u { position: relative; padding: 0 12px; color: var(--fg-3); font-family: var(--f-semi); font-weight: 600; font-size: 15px; }
.tab-u:hover { color: var(--fg-1); }
.tab-u.active { color: var(--fg-1); }
.tab-u.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--brand); }
.rtab-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.list-head { display: flex; align-items: center; height: 28px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--ink-1); font-size: 13px; }
.recall-list { flex: 1; min-height: 0; overflow-y: auto; }
.rc-row-r { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--rule); min-width: 0; font-size: 15px; }
.rc-row-r:hover { background: var(--ink-2); }
.rc-row-r .rr-time { color: var(--fg-3); flex: none; }
.rc-row-r .rr-ch { flex: none; display: inline-flex; align-items: center; }
.rc-row-r .rr-who { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.rc-row-r .rr-dur { flex: none; text-align: right; color: var(--fg-2); }
.rc-row-r .play-mini { width: 26px; height: 26px; font-size: 9px; }
.rc-row-r.sos .rr-time { color: var(--sos); }
.recall-player { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--rx); background: var(--rx-tint); flex: none; }
.recall-player .t-data { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* open non-SOS alerts in the right column: same stripe + tint + filled tag as F6 */
.alert-block { flex: none; max-height: 40%; overflow-y: auto; }
.alert-block:not(:empty) { border-bottom: 1px solid var(--rule-2); }
.alert-row { --c: var(--isole); --t: var(--isole-t); position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--rule); background: var(--t); }
.alert-row:last-child { border-bottom: 0; }
.alert-row .ar-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.alert-row .ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.alert-row .ar-title { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.alert-row .ar-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.alert-row .ar-when { margin-left: auto; color: var(--c); font-weight: 600; font-size: 14px; flex: none; }
.alert-row .ar-keys { display: flex; gap: 4px; flex: none; }
.alert-row.zone { --c: var(--zone); --t: var(--zone-t); flex: none; border-bottom: 1px solid var(--rule-2); }
.alert-row.k-chute { --c: var(--chute); --t: var(--chute-t); }
.alert-row.k-zone { --c: var(--zone); --t: var(--zone-t); }
.alert-row.sosfam { --c: var(--sos); --t: var(--sos-t); }
.alert-row.sosfam .ar-edge { background-image: var(--hazard); }
/* directives (telex slips) */
.dir-target { padding: 6px 12px; border-bottom: 1px solid var(--rule); flex: none; }
.dir-target span { color: var(--fg-1); }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.telex { position: relative; align-self: flex-start; max-width: 92%; padding: 6px 12px 8px 10px; background: var(--ink-3); color: var(--fg-1); border-left: 3px solid var(--fg-2);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); display: flex; flex-direction: column; gap: 2px; }
.telex .tx-h { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); }
.telex .tx-from { font-family: var(--f-mono); font-size: 11px; }
.telex .tx-body { font-family: var(--f-semi); font-weight: 600; font-size: 14px; line-height: 18px; white-space: pre-wrap; word-break: break-word; }
.telex.remote { align-self: flex-start; background: var(--ink-1); color: var(--fg-1); border: 1px solid var(--rule-2); clip-path: none; }
.telex.mine { align-self: flex-end; }
.dir-presets { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--rule); flex: none; }
.dir-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--rule); flex: none; }
.dir-input .input { height: 40px; }
.log-stream { flex: 1; min-height: 0; overflow-y: auto; }
.log-entry { display: flex; gap: 12px; min-height: 30px; align-items: center; padding: 4px 12px 4px 16px; border-bottom: 1px solid var(--rule); font-family: var(--f-semi); font-size: 13px; color: var(--fg-1); }
.log-entry .le-t { font-family: var(--f-mono); font-size: 12px; }
.log-entry .le-t { color: var(--fg-3); flex: none; }
.log-entry.error .le-m { color: var(--busy); }
.log-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; flex: none; border-top: 1px solid var(--rule); }

/* SOS sheet: the right column becomes the numbered fiche (1 Localiser, 2 ACQUITTER, 3 Parler, 4 Enregistrement) */
.sos-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.ss-head { --c: var(--sos-f); position: relative; flex: none; padding: 12px 16px 12px 24px; background: var(--sos-deep); border-bottom: 2px solid var(--c); color: var(--on-sos); }
.ss-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--hazard); }
.ss-head.k-chute { --c: var(--chute); background: var(--chute-deep); }
.ss-head.k-chute::before { background: var(--chute); }
.ss-head.acked::before { background: var(--c); }
.ss-head .ss-l1 { display: flex; align-items: center; gap: 10px; }
.ss-head .ss-l1 .chan { color: rgba(255, 255, 255, .85); }
.ss-head .sb-timer { margin-left: auto; font-size: 18px; color: var(--on-sos); }
.ss-head .ss-name { margin: 6px 0 4px; font-family: var(--f-cond); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-head .ss-l3 { font-size: 14px; color: rgba(255, 255, 255, .8); }
.ss-head .ss-l3 .mono { font-size: 13px; color: var(--on-sos); }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 4px; width: 100%; min-height: 52px; padding: 10px 16px 10px 12px; border-bottom: 1px solid var(--rule); background: var(--ink-1); text-align: left; flex: none; }
.step .st-n { font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--fg-3); }
.step .st-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step .st-title { font-weight: 600; font-size: 15px; color: var(--fg-1); }
.step .st-sub { font-size: 14px; line-height: 18px; color: var(--fg-3); }
button.step:hover { background: var(--ink-2); }
.step.done .st-title { color: var(--fg-2); }
.step.done .st-n { color: var(--ok); }
.step.next { min-height: 56px; background: var(--sos-f); color: var(--on-sos); }
.step.next .st-n, .step.next .st-title, .step.next .st-sub { color: var(--on-sos); }
.step.next .st-title { font-family: var(--f-cond); font-weight: 700; font-size: 24px; line-height: 26px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.next .keycap { height: 20px; padding: 0 6px; font-size: 11px; border-color: rgba(255, 255, 255, .5); color: var(--on-sos); }
.step.next.k-chute { background: var(--chute); }
.step.next.k-chute .st-n, .step.next.k-chute .st-title, .step.next.k-chute .st-sub { color: var(--on-chute); }
.step.next.k-chute .keycap { border-color: rgba(34, 6, 28, .5); color: var(--on-chute); }
.step.next.k-ack { background: var(--ink-2); outline: 2px solid var(--fg-1); outline-offset: -2px; }
.step.next.k-ack .st-n, .step.next.k-ack .st-title, .step.next.k-ack .st-sub { color: var(--fg-1); }
.step.next.k-ack .st-title { font-size: 20px; }
button.step.next:hover { filter: brightness(1.08); }
.step > .key { grid-column: 3; }
.ss-block { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--rule); flex: none; font-size: 15px; }
.ss-keys { display: flex; gap: 8px; margin-top: 6px; }
.ss-keys .key { flex: 1; }
.ss-tl { display: flex; flex-direction: column; padding: 10px 16px 4px; flex: none; }
.ss-tl .t-section { margin-bottom: 6px; }
.ss-tl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ss-tl .mono { color: var(--fg-3); line-height: 20px; }
.ss-spacer { flex: 1; }
/* Dock — selected channel → one state block (RX = cyan frame + tint) → ÉMETTRE (white frame, green fill on air) → Prio → audio */
.dock { display: flex; align-items: stretch; gap: 12px; height: var(--dock-h); flex: none; padding: 10px 12px; background: var(--ink-1); border-top: 1px solid var(--rule); }
html:not([data-view="console"]) .dock { display: none; }
.dock-readout { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 280px; flex: none; padding: 0 8px 0 12px; background: transparent; border: 0; clip-path: none; }
.dock-readout::after { display: none; }
.dock-readout .dr-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ch, var(--rule-2)); z-index: 1; }
.dock-readout .dr-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; font-size: 13px; line-height: 16px; }
.dock-readout .dr-label .mono { display: none; }
.dock-readout .dr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; line-height: 28px; flex: none; }
.dock-readout .dr-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--f-semi); font-size: 14px; line-height: 18px; color: var(--fg-2); }
.dock-readout .dr-sub .on-dot { display: none; }
.dock-readout .dr-sub > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-readout .dr-sub > #dockOnline { flex: none; }
.dock-readout .dr-sub > .hatch-tag { margin-left: 0; flex: none; }
.dock-readout .dr-rec { margin-left: auto; flex: none; height: 22px; min-height: 22px; padding: 0 6px; font-size: 13px; background: transparent; border-color: transparent; color: var(--fg-2); }
.dock-readout .dr-rec:hover:not(:disabled) { background: var(--ink-3); border-color: var(--rule-2); color: var(--fg-1); }
.dock-readout .dr-rec:disabled { display: none; }
.dock-readout .dr-rec[aria-pressed="true"] { background: var(--rx-tint); border-color: var(--rx); color: var(--rx); }
.dock-readout.empty .dr-name { font-family: var(--f-semi); font-weight: 600; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--fg-2); }
/* the one state block: idle is quiet (word + hint), activity earns frame + tint + timer + meter */
.state-strip { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; padding: 0 16px; border: 1px solid var(--rule-2); background: transparent; }
.state-strip .ss-word { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; overflow: hidden; color: var(--fg-2); font-size: 22px; line-height: 24px; }
.state-strip .ss-word span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state-strip .ss-timer { display: flex; align-items: center; flex: none; color: var(--fg-3); font-size: 20px; }
.state-strip .ss-meters { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 0; }
.state-strip .ss-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state-strip[data-k="idle"] .ss-timer, .state-strip[data-k="idle"] .seg,
.state-strip[data-k="off"] .ss-timer, .state-strip[data-k="off"] .seg,
.state-strip[data-k="recon"] .ss-timer, .state-strip[data-k="recon"] .seg,
.state-strip[data-k="busy"] .ss-timer, .state-strip[data-k="busy"] .seg { display: none; }
.state-strip[data-k="idle"] .ss-word { color: var(--fg-3); }
.state-strip[data-k="rx"] #ssTape, .state-strip[data-k="rx"] .ss-caption, .state-strip[data-k="tx"] .ss-caption:not(.busy-text) { display: none; }
.state-strip[data-k="tx"] { border: 2px solid var(--tx); background: var(--tx-tint); }
.state-strip[data-k="tx"] .ss-word, .state-strip[data-k="tx"] .ss-timer { color: var(--tx); }
.state-strip[data-k="rx"] { border: 2px solid var(--rx); background: var(--rx-tint); }
.state-strip[data-k="rx"] .ss-word, .state-strip[data-k="rx"] .ss-timer { color: var(--rx); }
.state-strip[data-k="busy"] { border: 2px solid var(--isole); background: var(--isole-t); }
.state-strip[data-k="busy"] .ss-word { color: var(--isole); }
.state-strip[data-k="off"] { border: 1px dashed var(--off); }
.state-strip[data-k="off"] .ss-word { color: var(--off); }
.state-strip[data-k="recon"] { border: 1px dashed var(--isole); }
.state-strip[data-k="recon"] .ss-word { color: var(--isole); }
.state-strip .seg > i { height: 6px; border: 0; background: var(--ink-3); }
.state-strip .seg > i.on.c-rx { background: var(--rx); }
/* ÉMETTRE: primary = 2 px white frame at rest, green fill on air, dashed when the channel is not connected */
.ptt-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 220px; flex: none; padding: 0 16px; border: 2px solid var(--fg-1); border-radius: 2px; background: var(--ink-2); color: var(--fg-1); user-select: none; touch-action: none; }
.ptt-key:hover { background: var(--ink-3); }
.ptt-key .pk-word { font-family: var(--f-cond); font-weight: 700; font-size: 24px; line-height: 26px; text-transform: uppercase; letter-spacing: .03em; }
.ptt-key.transmitting, .dock[data-state="tx"] .ptt-key { background: var(--tx); border-color: var(--tx); color: var(--on-tx); }
.ptt-key.transmitting .pk-cap { display: none; }
.ptt-key:disabled, .ptt-key[aria-disabled="true"] { border: 1px dashed var(--rule-2); color: var(--fg-3); background: transparent; }
.ptt-key[aria-disabled="true"] .pk-cap { border-color: var(--rule-2); color: var(--fg-3); }
.keycap.pk-cap { height: 20px; padding: 0 6px; font-size: 11px; }
.dock-prio { display: flex; flex-direction: column; justify-content: center; align-items: stretch; flex: none; }
.dock-prio .key { height: 100%; width: 72px; }
.dock-prio .t-label { display: none; }
.dock-prio .key[aria-pressed="true"] { background: var(--isole-t); color: var(--isole); border-color: var(--isole); }
.dock-audio { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 250px; flex: none; }
.da-row { display: flex; align-items: center; gap: 8px; }
.da-row .t-label { color: var(--fg-3); font-size: 13px; }
.vol-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.vol-wrap .seg { flex: 1; }
.vol-wrap .seg > i { height: 6px; border: 0; background: var(--ink-3); }
.vol-wrap .seg > i.on { background: var(--fg-2); }
.vol-wrap input[type=range] { position: absolute; inset: -6px 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.vol-wrap:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
#volVal { color: var(--fg-2); }
#muteSpeakerBtn { height: 24px; min-height: 24px; font-size: 13px; padding: 0 8px; }
#muteSpeakerBtn[aria-pressed="true"] { background: var(--isole-t); color: var(--isole); border-color: var(--isole); }
#micLevel > i { height: 4px; border: 0; background: var(--ink-3); }
#micLevel > i.on.c-tx { background: var(--tx); }
.pedal { text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); }
.pedal:hover { color: var(--fg-1); }
.pedal .pedal-status-dot { width: 6px; height: 6px; border-radius: 3px; border: 1px solid var(--off); }
.pedal.pedal-connected .pedal-status-dot { background: var(--ok); border: 0; }
.pedal.pedal-active { color: var(--tx); }
@media (max-width: 1400px) {
  .dock-readout { width: 220px; }
  .ptt-key { width: 190px; }
  .dock-audio { width: 190px; }
  .state-strip .ss-caption { display: none; }
}
/* ── UNITÉS view (F5, dispatch-v05 f5-unites) ──────────────────── */
.view-units, .view-alerts, .view-rec, .view-admin { display: flex; }
.units-main, .alerts-main, .rec-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.view-toolbar { display: flex; align-items: center; gap: 12px; min-height: 52px; flex: none; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--ink-0); flex-wrap: nowrap; }
.table-scroll { flex: 1; min-height: 0; overflow: auto; }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { position: sticky; top: 0; z-index: 2; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--rule-2); background: var(--ink-0); text-align: left;
  font-family: var(--f-semi); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--fg-3); white-space: nowrap; }
.dtable td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dtable .name { font-weight: 600; color: var(--fg-1); }
.dtable tbody tr:hover { background: var(--ink-2); }
.dtable tr.sel { background: var(--ink-3); }
.dtable tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--fg-1); }
.dtable tr.clickable { cursor: pointer; }
.w220 { width: 220px; }
/* units table: state dot / word only for exceptions, one name + open alert tag, coloured edge for an open alert */
.units-table tr.talking { background: var(--rx-tint); }
.units-table tr.off .name { color: var(--fg-3); font-weight: 500; }
.units-table tr.k-sos td:first-child { box-shadow: inset 4px 0 0 var(--sos-f); }
.units-table tr.k-chute td:first-child { box-shadow: inset 4px 0 0 var(--chute); }
.units-table tr.k-isole td:first-child, .units-table tr.k-checkin td:first-child { box-shadow: inset 4px 0 0 var(--isole); }
.units-table tr.k-zone td:first-child { box-shadow: inset 4px 0 0 var(--zone); }
.units-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--fg-1); }
.u-state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--fg-2); white-space: nowrap; }
.u-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.u-state.rx { color: var(--rx); font-weight: 600; }
.u-state.rx .dot { background: var(--rx); }
.u-state.off { color: var(--fg-3); }
.u-state.off .dot { background: none; border: 1.5px solid var(--off); }
.u-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bat-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.bat-cell.lo { color: var(--isole); }
.cons-tags { display: inline-flex; gap: 6px; }
.cons-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.cons-tag svg { width: 12px; height: 12px; }
.units-side, .alerts-side { width: 400px; flex: none; overflow-y: auto; border-left: 1px solid var(--rule); background: var(--ink-1); display: flex; flex-direction: column; }
@media (max-width: 1400px) { .units-side, .alerts-side { width: 340px; } }
.rc-empty { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.rc-fiche { flex-direction: column; }
.rc-top { flex: none; border-bottom: 1px solid var(--rule); }
.rc-readout { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.rc-readout .t-readout { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--fg-2); }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.rc-readout.off .rc-dot { background: none; border: 1.5px solid var(--off); }
.rc-sub { display: flex; align-items: center; gap: 0; min-width: 0; color: var(--fg-2); }
.rc-sub .mono { color: var(--fg-2); }
#rcAddress { font-size: 14px; color: var(--fg-3); }
.rc-hw:empty { display: none; }
.rc-offline { margin: 0 16px 12px; padding: 8px 12px; border: 1px dashed var(--off); color: var(--fg-2); }
.rc-alert-note { --c: var(--isole); --t: var(--isole-t); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 0 16px 16px; padding: 10px 12px; border-left: 3px solid var(--c); background: var(--t); font-size: 15px; }
.rc-alert-note.k-sos { --c: var(--sos-f); --t: var(--sos-t); }
.rc-alert-note.k-chute { --c: var(--chute); --t: var(--chute-t); }
.rc-alert-note.k-zone { --c: var(--zone); --t: var(--zone-t); }
.rc-alert-note b { font-weight: 600; color: var(--fg-1); }
.rc-alert-note .link-btn { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.rc-section-head { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.rc-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.rc-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.rc-line { display: flex; align-items: center; gap: 12px; }
.rc-line.gap8 { gap: 8px; }
.rc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-text .t-button { font-size: 15px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px; }
.rc-actions .key { background: transparent; }
.rc-actions .key:hover { background: var(--ink-3); }
.scan-checklist { display: flex; flex-wrap: wrap; gap: 4px; }
.scan-chip { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-2); font-family: var(--f-semi); font-size: 14px; cursor: pointer; }
.scan-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scan-chip:has(input:checked) { background: var(--ink-3); border-color: var(--fg-1); color: var(--fg-1); }
.scan-chip:focus-within { outline: 2px solid var(--brand); }
.scan-checklist.disabled .scan-chip { color: var(--fg-3); }
/* ── ALERTES view (F6, dispatch-v05 f6-alertes) ─────────────────── */
/* Open = loud (6 px edge in the type colour — SOS hazard —, row tint, filled tag, bold name, elapsed time in colour,
   neutral Acquitter key); handled = quiet (fg-3 text, only the glyph keeps its colour, then ✓ 52 s). */
.w200 { width: 200px; }
.alerts-table { table-layout: fixed; }
.alerts-table th.c-type { width: 168px; padding-left: 18px; } .alerts-table th.c-unit { width: 190px; } .alerts-table th.c-ch { width: 160px; }
.alerts-table th.c-site { width: 140px; } .alerts-table th.c-when { width: 130px; } .alerts-table th.c-ack { width: 128px; } .alerts-table th.c-pin { width: 52px; }
@media (max-width: 1400px) {
  .alerts-table th.c-type { width: 150px; } .alerts-table th.c-unit { width: 168px; } .alerts-table th.c-ch { width: 140px; }
  .alerts-table th.c-when { width: 112px; } .alerts-table th.c-ack { width: 112px; } .alerts-table th.c-pin { width: 44px; }
  .view-alerts .w200 { width: 150px; }
}
.alerts-table td { overflow: hidden; text-overflow: ellipsis; }
.alerts-table td:first-child { padding-left: 18px; position: relative; }
.alerts-table tbody tr:hover { background: var(--ink-2); }
.alerts-table tr.sec td { height: 34px; background: var(--ink-0); color: var(--fg-1); font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--rule-2); padding-left: 12px; }
.alerts-table tr.sec td .n { margin-left: 8px; font-family: var(--f-mono); font-weight: 700; letter-spacing: 0; color: var(--fg-3); }
.alerts-table tr.sec td .n.hot { color: var(--sos); }
.alerts-table tr.sec:hover { background: transparent; }
.alerts-table tr.none td { color: var(--fg-3); padding-left: 18px; }
tr.open { --c: var(--isole); --t: var(--isole-t); }
tr.open.k-sos { --c: var(--sos); --t: var(--sos-t); }
tr.open.k-chute { --c: var(--chute); --t: var(--chute-t); }
tr.open.k-zone { --c: var(--zone); --t: var(--zone-t); }
.alerts-table tr.open td { background: var(--t); }
.alerts-table tr.open td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.alerts-table tr.open.k-sos td:first-child::before { background: var(--hazard); }
.alerts-table tr.open .name { font-size: 16px; }
.alerts-table tr.open .when { font-weight: 600; color: var(--c); }
.alerts-table tr.open .pin { color: var(--fg-1); }
.alerts-table tr.open .detail { color: var(--fg-1); }
.alerts-table tr.open.sel td { background: color-mix(in srgb, var(--c) 24%, var(--ink-1)); }
.alerts-table tr.open.sel td:first-child { box-shadow: none; }
.alerts-table tr.done td { color: var(--fg-3); }
.alerts-table tr.done .name { color: var(--fg-2); font-weight: 500; }
.alerts-table tr.done .chan { color: var(--fg-3); }
.alerts-table tr.done.child td { background: var(--ink-1); }
.alerts-table tr.done.child td:first-child { padding-left: 34px; }
.alerts-table tr.done .detail { color: var(--fg-2); }
.alerts-table .row-ack { background: var(--ink-2); }
.alerts-table .chev { display: inline-flex; width: 14px; margin-left: -16px; margin-right: 2px; color: var(--fg-3); vertical-align: -2px; }
.alerts-table .chev svg { width: 14px; height: 14px; }
.alerts-table .grp-n { margin-left: 6px; font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: var(--fg-1); }
.alerts-table tr.grp { cursor: pointer; }
.synthese { display: flex; align-items: center; gap: 20px; height: 40px; flex: none; padding: 0 16px; border-top: 1px solid var(--rule); background: var(--ink-0); color: var(--fg-3); font-size: 14px; white-space: nowrap; overflow: hidden; }
.synthese .sy-item { display: inline-flex; align-items: center; gap: 6px; }
.synthese .sy-warn { color: var(--busy); font-weight: 600; }
.synthese b { font-family: var(--f-mono); font-weight: 700; color: var(--fg-1); }
.synthese .sq { width: 8px; height: 8px; display: inline-block; }
/* detail (right column): coloured head, ACQUITTER in the fill of the state (one per screen), facts, map, journal */
.ad-head2 { --c: var(--isole); position: relative; padding: 14px 16px 14px 24px; background: color-mix(in srgb, var(--c) 18%, var(--ink-1)); border-bottom: 2px solid var(--c); flex: none; }
.ad-head2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); }
.ad-head2.k-sos { --c: var(--sos-f); background: var(--sos-deep); }
.ad-head2.k-sos::before { background: var(--hazard); }
.ad-head2.k-chute { --c: var(--chute); }
.ad-head2.k-zone { --c: var(--zone); }
.ad-head2.done { background: var(--ink-1); border-bottom: 1px solid var(--rule); }
.ad-head2.done::before { background: var(--rule-2); }
.ad-head2 .l1 { display: flex; align-items: center; gap: 10px; }
.ad-head2 .since { margin-left: auto; font-family: var(--f-mono); font-weight: 700; font-size: 18px; color: var(--fg-1); }
.ad-head2 .big { margin: 8px 0 6px; font-family: var(--f-cond); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-acts { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); flex: none; }
.ad-acts:empty { display: none; }
.key.isole-action { background: var(--isole); border: 1px solid var(--isole); color: var(--on-isole); font-family: var(--f-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.key.zone-action { background: var(--zone); border: 1px solid var(--zone); color: var(--on-zone); font-family: var(--f-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.key.isole-action:hover, .key.zone-action:hover { filter: brightness(1.08); }
.ad-grp { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px 0; padding: 10px 12px; border-left: 3px solid var(--isole); background: var(--isole-t); font-size: 15px; }
.ad-grp svg { width: 16px; height: 16px; flex: none; color: var(--isole); margin-top: 2px; }
.ad-grp b { color: var(--fg-1); }
.facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.facts dt { color: var(--fg-3); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .mono { font-size: 14px; }
.ad-map { height: 160px; border-bottom: 1px solid var(--rule); flex: none; }
.ad-tl { display: flex; flex-direction: column; padding: 10px 16px; flex: none; }
.ad-tl .t-section { margin-bottom: 6px; }
.ad-tl > div:not(#alertCalls), .ad-tl #alertCalls > div { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 15px; gap: 0 8px; }
.ad-tl .mono { color: var(--fg-3); }
.ad-rec .fg3, .ad-rec .busy-text { grid-column: 1 / -1; }
.ad-keys { display: flex; gap: 6px; padding: 8px 16px 16px; flex-wrap: wrap; }

/* shared with other modules: emergency call flag (recordings.js), open zone event (groups.js) */
.open-state { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 2px; background: var(--zone); font-family: var(--f-semi); font-weight: 600; font-size: 13px; color: var(--on-zone); white-space: nowrap; }
/* ── APPELS view (F9, dispatch-v05 f9-appels) ─────────────────── */
.rec-side { width: 260px; flex: none; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--rule); background: var(--ink-1); }
.rec-ch { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; text-align: left; width: 100%; color: var(--fg-2); }
.rec-ch:hover { background: var(--ink-2); }
.rec-ch.active { background: var(--ink-3); }
.rec-ch.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fg-1); }
.rec-ch .rc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-size: 15px; }
.rec-ch.active .rc-name { color: var(--fg-1); font-weight: 600; }
#recChannelList { border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.rec-block { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.rec-block .kgroup > button { padding: 0 9px; }
.calls-health { margin: 12px; padding: 10px 12px; border-left: 3px solid var(--ok); background: var(--ink-2); gap: 4px; }
.hatch-banner { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; background: var(--isole-t); border-top: 1px solid var(--rule); flex: none; color: var(--fg-1); }
.hatch-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--isole); }
.hatch-banner > .t-body { flex: 1; }
.calls-table { table-layout: fixed; }
.calls-table td { overflow: hidden; text-overflow: ellipsis; }
.calls-table td.t-time { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.calls-table td.num { color: var(--fg-1); }
.calls-table tr.day td { height: 34px; background: var(--ink-0); color: var(--fg-2); font-size: 15px; border-bottom: 1px solid var(--rule-2); }
.calls-table tr.day td b { color: var(--fg-1); font-weight: 600; margin-right: 4px; }
.calls-table tr.day:hover { background: transparent; }
.calls-table .who { display: inline-flex; align-items: center; gap: 8px; }
.calls-table .who .ico { color: var(--fg-3); }
.calls-table .who .name { font-weight: 600; color: var(--fg-1); }
.calls-table .acc-actions .key { background: transparent; border-color: transparent; color: var(--fg-2); }
.calls-table tr:hover .acc-actions .key, .calls-table tr.sel .acc-actions .key, .calls-table tr.active .acc-actions .key { border-color: var(--rule-2); color: var(--fg-1); background: var(--ink-2); }
.calls-table .key.call-play.on { color: var(--rx); border-color: var(--rx); background: var(--rx-tint); }
.calls-table .key.call-more { min-width: 32px; padding: 0 6px; font-size: 16px; }
.rec-player { flex-direction: column; gap: 4px; flex: none; padding: 8px 16px; border-top: 1px solid var(--rule); background: var(--ink-1); }
.rp-title { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; overflow: hidden; }
.rp-title #playerTitle { color: var(--fg-1); font-weight: 600; font-size: 15px; }
.rp-title #playerMeta { color: var(--fg-2); }
.rp-wave { display: flex; align-items: center; gap: 1px; height: 24px; flex: none; cursor: pointer; }
.rp-wave > i { flex: 1; min-width: 1px; background: var(--ink-3); }
.rp-wave > i.p { background: var(--fg-1); }
.rp-controls { display: flex; align-items: center; gap: 12px; }
.seg-vol > i { width: 6px; flex: none; height: 10px; cursor: pointer; }
/* ── ADMINISTRATION view ───────────────────────────────────────── */
.admin-nav { display: flex; flex-direction: column; width: 230px; flex: none; border-right: 1px solid var(--rule); background: var(--ink-1); }
.admin-tab { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--rule); text-align: left; color: var(--fg-2);
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; }
.admin-tab:hover { color: var(--fg-1); }
.admin-tab.active { background: var(--ink-3); color: var(--fg-1); }
.admin-tab.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fg-1); }
.admin-role { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.admin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.admin-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.admin-panel.active { display: flex; }
.ap-head { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-bottom: 1px solid var(--rule); flex: none; background: var(--ink-1); }
.ap-pad { padding: 16px; }
.acc-form { display: flex; align-items: flex-end; gap: 8px; padding: 16px; border-bottom: 1px solid var(--rule); flex: none; flex-wrap: wrap; }
.acc-form .field.grow { flex: 1; min-width: 160px; }
.acc-paper { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ink-3); color: var(--fg-1); border-left: 3px solid var(--ok); flex: none; }
.acc-paper .t-body { flex: 1; }
.acc-paper code { font-family: var(--f-mono); font-weight: 700; }
.acc-paper .key { background: var(--ink-2); }
.acc-actions { display: flex; gap: 4px; }
.prov-wrap { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px; }
.prov-form { display: flex; flex-direction: column; gap: 16px; width: 400px; max-width: 100%; }
.prov-actions { display: flex; gap: 8px; }
.prov-print { display: flex; flex-direction: column; gap: 8px; }
.prov-sheet { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 297px; padding: 24px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-0); }
.prov-sheet .ps-brand { display: flex; align-items: center; gap: 8px; align-self: flex-start; }
.prov-sheet .provisioning-print-title { align-self: flex-start; }
.prov-sheet .ps-qr { display: inline-flex; border: 1px solid var(--ink-0); background: #fff; padding: 6px; }
.prov-sheet .ps-qr canvas { display: block; image-rendering: pixelated; width: 160px; height: 160px; }
.prov-sheet .ps-link { word-break: break-all; text-align: center; font-size: 10px; }
.prov-sheet .ps-address { align-self: flex-start; word-break: break-all; }
.prov-sheet .ps-steps { margin: 0; padding: 0; list-style: none; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
.integ-list, .integ-recent { list-style: none; margin: 0; padding: 0; }
.integ-row { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.integ-row .t-button { width: 180px; }
.webhooks-status-active { color: var(--fg-1); }
.webhooks-status-disabled, .webhooks-status-unconfigured { color: var(--off); }
.webhooks-recent-item, .webhooks-recent-empty { display: flex; align-items: center; min-height: 32px; padding: 0 16px; border-bottom: 1px solid var(--rule); font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.mfa-state { padding: 8px 16px; border-bottom: 1px solid var(--rule); }
.mfa-state .badge-status::before { content: "○ "; }
.mfa-state .badge-status.badge-online::before { content: "● "; }
.mfa-wrap { display: flex; flex-wrap: wrap; gap: 32px; padding: 16px; border-bottom: 1px solid var(--rule); }
.mfa-col { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.mfa-qr { width: 196px; height: 196px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); background: var(--ink-1); }
.mfa-qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; }
.code-input { width: 180px; font-size: 20px; letter-spacing: .3em; text-align: center; }
.kv-row { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.kv-row .t-body { width: 360px; }
.hq-wrap { display: flex; gap: 24px; padding: 16px; border-bottom: 1px solid var(--rule); }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; }
.shortcuts > div { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.shortcuts .keycap { min-width: 56px; justify-content: center; }
@media (max-width: 1599px) { .shortcuts { grid-template-columns: 1fr; } }
.swatches { display: flex; align-items: center; gap: 8px; }
.swatch { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-2); }
.swatch[aria-pressed="true"] { border-color: var(--fg-1); }
.swatch i { width: 16px; height: 16px; display: block; }
.group-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.group-row .row-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-swatch { width: 12px; height: 12px; flex: none; display: inline-block; }
.row-text { display: flex; flex-direction: column; min-width: 0; }
.row-title { font-family: var(--f-cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.row-sub { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.btn-delete-group { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-2); color: var(--fg-1);
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; }
.btn-delete-group:hover { color: var(--fg-1); background: var(--ink-2); }
.members-list { margin-top: 16px; border-top: 1px solid var(--rule); }
html:not([data-role="admin"]) .admin-only { display: none !important; }
/* Supervisor (FIX-1 C4): operates its site, no administration area. */
html[data-role="supervisor"] .tb-tab[data-goto="administration"] { display: none !important; }

/* ── Dialogs ───────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: var(--scrim); }
.dialog { display: flex; flex-direction: column; gap: 12px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; background: var(--ink-1); border: 1px solid var(--rule-2); }
.dialog.w440 { width: 440px; } .dialog.w520 { width: 520px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.stats-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#confirmActionMessage { margin: 0; }

/* ── Toasts ────────────────────────────────────────────────────── */
.toast-container { position: fixed; right: 12px; bottom: calc(var(--dock-h) + 12px); z-index: 4000; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { position: relative; display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 10px 14px 10px 18px; background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--fg-1); transition: opacity .2s; pointer-events: auto; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ok); }
.toast.error::before { background-color: var(--ink-1); background-image: var(--hatch); }
.toast.info::before { background: var(--fg-3); }
.toast .icon-wrap { display: none; }

/* ── Login (auth gate) ─────────────────────────────────────────── */
.auth-gate-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; background: var(--ink-0); }
.auth-frame { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: auto; padding: 24px; }
.auth-center { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 420px; margin: auto; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-brand .auth-logo { display: block; width: 184px; height: 184px; margin-bottom: 4px; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(255, 107, 0, .18)); }
@media (min-height: 900px) { .auth-brand .auth-logo { width: 232px; height: 232px; } }
@media (max-height: 760px) { .auth-brand .auth-logo { width: 150px; height: 150px; } }
.auth-brand .as-word { font-family: var(--f-cond); font-weight: 700; font-size: 40px; line-height: 40px; letter-spacing: .12em; text-transform: uppercase; }
.auth-card { width: 100%; padding: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.auth-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-form .login-step { flex-direction: column; gap: 16px; }
.caps-hint { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--busy); }
.caps-hint::before { content: ""; width: 12px; height: 12px; background-color: var(--ink-1); background-image: var(--hatch); }
.auth-gate-reason, .auth-gate-error { position: relative; margin: 0; padding: 8px 12px 8px 16px; background: var(--ink-1); }
.auth-gate-reason::before, .auth-gate-error::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--ink-1); background-image: var(--hatch); }
.auth-gate-error:empty { display: none; }
.auth-lock { display: flex; flex-direction: column; gap: 8px; }
.otp-boxes { display: flex; gap: 8px; }
.otp-boxes input { width: 48px; height: 48px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--ink-1); color: var(--fg-1); text-align: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 22px; outline: none; }
.otp-boxes input:focus { border-color: var(--brand); outline: 1px solid var(--brand); }
.otp-boxes input:disabled { border-color: var(--rule); }
.link-plain { align-self: flex-start; color: var(--fg-2); }
.link-plain:hover { color: var(--fg-1); }

/* print: only the provisioning sheet */
/* Planche par radio: built in #provisioningLabelSheet (child of body), printed alone on A4. */
.prov-labels { display: none; }
@media print {
  body.prov-labels-print-mode > *:not(#provisioningLabelSheet), body.license-print-mode > *:not(#licenseLabelSheet) { display: none !important; }
  html:has(body.prov-labels-print-mode), body.prov-labels-print-mode, html:has(body.license-print-mode), body.license-print-mode { overflow: visible; height: auto; background: #fff !important; }
  body.prov-labels-print-mode .prov-labels, body.license-print-mode #licenseLabelSheet { display: block; background: #fff; color: #000; font-family: var(--f-semi), sans-serif; }
  .prov-labels .pl-page { break-after: page; display: flex; flex-direction: column; gap: 3mm; }
  .prov-labels .pl-page:last-child { break-after: auto; }
  .prov-labels .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64mm; border-top: 1px dashed #999; border-left: 1px dashed #999; }
  .prov-labels .pl-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; border-right: 1px dashed #999; border-bottom: 1px dashed #999; break-inside: avoid; }
  .prov-labels .pl-qr { display: block; width: 36mm; height: 36mm; }
  .prov-labels .pl-qr svg { width: 100%; height: 100%; }
  .prov-labels .pl-id { font-family: var(--f-mono), monospace; font-size: 15pt; font-weight: 700; }
  .prov-labels .pl-name { font-size: 10.5pt; text-align: center; max-width: 58mm; }
  .prov-labels .pl-site { font-size: 8pt; color: #444; }
  .prov-labels .pl-foot { margin: 0; font-size: 7.5pt; color: #444; }
  .prov-labels .pl-conf { font-size: 7pt; font-weight: 600; letter-spacing: .02em; }
}
@media print {
  body.provisioning-print-mode .app > *:not(.views), body.provisioning-print-mode .toast-container { display: none !important; }
  body.provisioning-print-mode .app { border: 0 !important; height: auto; }
  body.provisioning-print-mode .view:not(.view-admin), body.provisioning-print-mode .admin-nav, body.provisioning-print-mode .ap-head, body.provisioning-print-mode .prov-form, body.provisioning-print-mode .prov-print > .t-label { display: none !important; }
  body.provisioning-print-mode, body.provisioning-print-mode .app { overflow: visible; background: #fff; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* remote-control inline states written by dashboard.js / remote-scan.js */
#rcLwStatusBadge, #rcScanStatusBadge { display: none !important; }
#rcScanAckBadge { font-family: var(--f-semi); font-size: 13px; color: var(--fg-3); }
#rcScanAckBadge::before { content: "· "; }
#rcScanAckBadge.warn { color: var(--busy); }
.rec-block .kgroup { align-self: flex-start; }

/* ── JOURNAL DES APPELS (une émission = un appel enregistré) ───── */
/* SOS family mark for an emergency call: a small hazard square (red = SOS only). */
.sos-mini { display: inline-block; width: 10px; height: 10px; flex: none; background-image: repeating-linear-gradient(45deg, var(--sos) 0 3px, #000 3px 6px); border: 1px solid var(--sos); }
.rc-row-r.sos .rr-time { color: var(--sos); }
.rc-row-r .rr-who { display: flex; align-items: center; gap: 6px; }
.calls-table td.num, .dtable th.num, .dtable td.num { text-align: right; }
.dtable th.right, .dtable td.right { text-align: right; }
.dtable td .acc-actions { justify-content: flex-end; }
.dtable tr.sos td:first-child { background-image: repeating-linear-gradient(45deg, var(--sos) 0 3px, #000 3px 6px); background-size: 4px 100%; background-repeat: no-repeat; }
.dtable tr.sos.sel td:first-child { box-shadow: none; }
.calls-flags { display: inline-flex; align-items: center; gap: 4px; }
.calls-flags .hatch-tag { margin-left: 0; height: 20px; }
.call-flag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: 2px; font-family: var(--f-semi); font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.call-flag.dashed { border-style: dashed; color: var(--fg-3); }
.call-flag.ok { border-color: var(--ok); color: var(--ok); }
.key.call-play { min-width: 92px; }
.acc-row td { height: auto; padding: 0; background: var(--ink-1); }
.acc-row:hover { background: var(--ink-1) !important; }
.acc-wrap { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-left: 3px solid var(--rule-2); }
.acc-log { display: grid; grid-template-columns: max-content minmax(120px, max-content) minmax(110px, max-content) 1fr; column-gap: 24px; row-gap: 2px; }
.calls-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--rule); }
.calls-status { display: flex; align-items: center; padding: 0 12px; white-space: nowrap; }
.calls-filter { display: flex; flex-direction: column; }
.calls-filter.disabled { opacity: .45; pointer-events: none; }
.calls-filter .field { gap: 4px; }
.calls-filter-keys { display: flex; gap: 6px; }
.calls-filter-keys .key { flex: 1; }
.mono-input { font-family: var(--f-mono); font-size: 13px; color-scheme: dark; }
.key.calls-sos-key { justify-content: flex-start; gap: 8px; }
.key.calls-sos-key[aria-pressed="true"] { background: var(--sos-deep); border: 1px solid var(--sos-f); color: var(--on-sos); }
.calls-health { gap: 4px; }
.rec-main > .tabs-line { padding-left: 4px; }
.rec-main > .tabs-line > .tab-u { display: flex; align-items: center; }

/* ── ZONES (geofence v2): panel, zone sheet, wizard, alarms ──────── */
/* Alarm family = amber (--busy + hatch). Red stays SOS / chute only. */
.gz-tag { display: inline-flex; align-items: center; height: 16px; flex: none; padding: 0 4px; border: 1px solid var(--rule-2);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; line-height: 12px; letter-spacing: .04em; color: var(--fg-1); white-space: nowrap; text-transform: uppercase; }
.gz-tag.alarm { background: var(--zone); border-color: var(--zone); color: var(--on-zone); }
.gz-tag.off { border-style: dashed; border-color: var(--off); color: var(--off); }
.map-panel.gz-panel { width: 380px; }
.gz-view { flex: 1; min-height: 0; }
.gz-row { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.gz-row:hover { background: var(--ink-2); }
.gz-row.viol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--zone); }
.gz-row.viol { background: var(--zone-t); }
.gz-occ .ar-edge.hatch, .gz-hist-row .ar-edge.hatch { background: var(--zone); }
.gz-row.inactive .gz-name { color: var(--fg-3); }
.gz-l1, .gz-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-l1-right { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.gz-l2 .t-data { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-count { color: var(--fg-2); white-space: nowrap; font-size: 13px; }
.gz-unk { font-size: 13px; white-space: nowrap; }
.gz-shape { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-count b, .gz-pop-count b { color: var(--fg-1); font-weight: 700; }
.gz-row .zi-keys { display: flex; gap: 4px; }
.gz-pop-count { display: inline-flex; gap: 6px; align-items: center; }
/* zone sheet */
.gz-sheet { flex-direction: column; }
.gz-sheet-top { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: none; border-bottom: 1px solid var(--rule); }
.gz-readout { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.gz-readout-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-readout .t-data { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gz-sheet-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.gz-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.gz-sheet-keys { display: flex; gap: 4px; padding: 8px; border-top: 1px solid var(--rule-2); flex: none; }
.gz-sheet-keys .key { flex: 1; padding: 0 6px; }
.gz-note { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: 13px; }
.gz-occ-head { display: grid; grid-template-columns: 1fr 104px 72px; gap: 8px; }
.gz-occ { position: relative; display: grid; grid-template-columns: 1fr 104px 72px; gap: 8px; align-items: center; min-height: 36px; padding: 0 12px; border-bottom: 1px solid var(--rule); }
.gz-occ .ar-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.gz-occ-who { min-width: 0; overflow: hidden; }
.gz-occ-state { color: var(--fg-1); }
.gz-occ.unk .gz-occ-state, .gz-occ.unk .utag .un { color: var(--fg-3); }
.gz-occ-since { text-align: right; }
.gz-hist { flex: 1; min-height: 0; flex-direction: column; }
.gz-hist-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex: none; }
.gz-hist-bar .select-key { flex: 1; min-width: 0; }
.gz-hist-bar .select-key select { flex: 1; min-width: 0; text-transform: none; font-family: var(--f-semi); font-weight: 500; }
.gz-hist-bar .kgroup > button { padding: 0 8px; }
.gz-hist-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--ink-1); flex: none; }
.gz-hist-row { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--rule); }
.gz-hist-row .ar-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.gz-h1, .gz-h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gz-h-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gz-ack-strip { height: 16px; font-size: 10px; }
/* wizard */
.gz-wizard { flex-direction: column; }
.gz-steps { display: flex; height: 40px; flex: none; border-bottom: 1px solid var(--rule); }
.gz-step { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--fg-3);
  font-family: var(--f-semi); font-weight: 600; font-size: 14px; }
.gz-step + .gz-step { border-left: 1px solid var(--rule); }
.gz-step .mono { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--rule-2); font-size: 10px; }
.gz-step:hover { color: var(--fg-1); }
.gz-step.done { color: var(--fg-2); }
.gz-step.done .mono { background: var(--fg-2); border-color: var(--fg-2); color: var(--ink-0); }
.gz-step.active { color: var(--fg-1); }
.gz-step.active .mono { border-color: var(--fg-1); }
.gz-step.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--fg-1); }
.gz-wiz-body { flex: 1; min-height: 0; overflow-y: auto; }
.gz-wiz-body .form-stack { padding: 12px; }
.gz-pane { display: flex; flex-direction: column; }
.gz-rules { display: flex; flex-direction: column; }
.gz-rule { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.gz-rule:hover { background: var(--ink-2); }
.gz-rule input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; border: 1px solid var(--rule-2); background: var(--ink-1); cursor: pointer; }
.gz-rule input:checked { background: var(--fg-1); border-color: var(--fg-1); box-shadow: inset 0 0 0 3px var(--ink-1); }
.gz-rule input:focus-visible { outline: 2px solid var(--brand); }
.gz-rule.selected { background: var(--ink-2); }
.gz-rule.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fg-1); }
.gz-rule-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gz-opts { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--rule); }
.gz-opts .sw-check:disabled { cursor: default; opacity: .55; }
.gz-hint { margin: 0; }
.gz-error { position: relative; padding: 6px 8px 6px 12px; background: var(--ink-1); color: var(--busy); font-size: 13px; }
.gz-error::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-image: var(--hatch); }
.gz-picker { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.gz-picker.disabled .gz-pick-list { opacity: .45; }
.gz-picker .kgroup > button.active { background: var(--ink-2); color: var(--fg-1); }
.gz-pick-bar { display: flex; gap: 4px; }
.gz-pick-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--rule-2); }
.gz-pick-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.gz-pick-row:last-child { border-bottom: 0; }
.gz-pick-row:hover { background: var(--ink-2); }
.gz-pick-row input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; border: 1px solid var(--rule-2); background: var(--ink-1); cursor: pointer; }
.gz-pick-row input:checked { background: var(--fg-1); border-color: var(--fg-1); box-shadow: inset 0 0 0 3px var(--ink-1); }
.gz-pick-row input:focus-visible { outline: 2px solid var(--brand); }
.gz-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-pick-foot { display: flex; flex-direction: column; gap: 2px; }
.gz-wiz-foot { display: flex; align-items: center; gap: 4px; padding: 8px; border-top: 1px solid var(--rule-2); flex: none; }
/* alarms in the right column + information row */
.alert-row.gz-alarm { --c: var(--zone); --t: var(--zone-t); }
.alert-row.gz-alarm .ar-edge { background: var(--zone); }
.alert-row.gz-alarm .busy-text { color: var(--zone); }
.alert-row.gz-alarm .ar-title { gap: 6px; }
.gz-alarm-zone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row.zone .ar-title { gap: 6px; }
.alert-row.zone .gz-info-edge { background: var(--zone); }
.alert-row.zone[data-tone="resolved"] .gz-info-edge { background: var(--fg-1); }
.alert-row.zone[data-tone="resolved"] .gz-tag { background: var(--paper); border-color: var(--paper); color: var(--ink-0); }
/* map: zone plates and units in violation */
.om-zone-plate.off { border-style: dashed; border-color: var(--fg-3); color: var(--fg-3); }
.om-zone-plate.viol { border: 1px solid var(--zone); background: var(--zone); color: var(--on-zone); }
.om-sq.om-viol { background: var(--zone); outline: 2px solid var(--ink-0); }
.om-plate.om-plate-viol { border-color: var(--zone); }
.om-viol-word { margin-left: 6px; padding: 0 4px; background: var(--zone); color: var(--on-zone); }
.alert-row .rc-line > .grow { overflow: hidden; }
.alert-row .rc-line > .grow > .utag { max-width: 100%; }
.draw-bar .db-text > span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── v0.4 calm: running text never in mono (hints, sub-lines, empty states) ───── */
.ok-text { color: var(--ok); }
.rc-text .t-data, .gz-hint, .gz-opts .t-data, .db-text .t-data, .step .st-sub, .rc-empty .t-body, .calls-health .t-data,
.map-unit-details, .gz-pick-foot .t-data, #provisioningServerStatus, #provisioningCopyConfirm, .log-foot .t-label { font-family: var(--f-semi); font-size: 13px; line-height: 17px; }
.field > .t-label, label.field > .t-label { color: var(--fg-2); }
.view-toolbar { background: var(--ink-1); }
.rec-side, .admin-nav { background: var(--ink-1); }
.rec-side .col-head .t-label, .rc-empty .t-label { font-family: var(--f-cond); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.col-head > .t-label:only-child { font-family: var(--f-cond); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.auth-gate-overlay { background: var(--ink-0); }
.auth-card { background: var(--ink-1); }

/* ── Sites (phase 2, SITES-SPEC §5) ──────────────────────────────── */
/* Top bar: admin site selector / dispatcher site name, right of the wordmark. */
.tb-site { display: flex; align-items: center; min-width: 0; height: 100%; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--rule); }
.tb-site:empty { display: none; }
.tb-site-name { display: inline-flex; align-items: baseline; max-width: 220px; white-space: nowrap; }
.tb-site-name .t-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tb-site-name .t-body { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; }
.tb-sitesel { height: 28px; max-width: 240px; }
.tb-sitesel select { height: 26px; max-width: 190px; text-overflow: ellipsis; }
.tb-sitesel > .t-label { color: var(--fg-3); }
/* A site filter is a selection: white underline (§14.3 rule 6). */
.tb-sitesel.on { border-color: var(--fg-3); box-shadow: inset 0 -2px 0 var(--fg-1); }
/* Site columns: admin looking at every site only (a filtered or a site console shows one site). */
html:not([data-role="admin"]) .site-col, html[data-site-filter] .site-col { display: none; }
.acc-hint { flex-basis: 100%; }
.sites-table .site-rename { width: 260px; }
/* Quiet until used: reads as text in the row, becomes a key on hover / focus (§12.1). */
.acc-site-sel { height: 28px; width: auto; max-width: 200px; padding-left: 6px; border-color: transparent; background-color: transparent; color: var(--fg-2); font-family: var(--f-semi); font-size: 14px; cursor: pointer; }
.acc-site-sel:hover, .acc-site-sel:focus { border-color: var(--rule-2); background-color: var(--ink-1); color: var(--fg-1); }
/* Administration › Mises à jour (app-updates.js) */
.app-upd-progress { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--rule); flex: none; }
.app-upd-bar { flex: 1; height: 6px; background: var(--ink-2); border: 1px solid var(--rule-2); }
.app-upd-bar > i { display: block; height: 100%; width: 0; background: var(--fg-2); }
.app-upd-notify { align-items: center; }
.app-upd-notify .grow { flex: 1; }
.app-upd-notes { max-width: 420px; white-space: pre-wrap; }
#appUpdatesSection .table-scroll { flex: none; }
#appUploadFile { padding-top: 4px; color: var(--fg-2); font-family: var(--f-semi); font-size: 14px; }
#appUploadFile::file-selector-button { height: 30px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--ink-2); color: var(--fg-1); font-family: var(--f-semi); font-weight: 600; font-size: 14px; cursor: pointer; }
#appUploadFile::file-selector-button:hover { background: var(--ink-3); }

/* ── A1 · Comptes : import CSV, fiche compte, radio perdue ─────── */
.acc-tools { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--rule); flex: none; }
.acc-tools > .t-body { flex: 1; min-width: 0; }
.acc-import { display: flex; flex-direction: column; flex: none; border-bottom: 1px solid var(--rule); background: var(--ink-1); }
.imp-head { display: flex; align-items: center; gap: 24px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.imp-steps { display: flex; gap: 20px; flex: 1; margin: 0; padding: 0; list-style: none; font-family: var(--f-semi); font-size: 14px; color: var(--fg-3); }
.imp-steps li { display: inline-flex; align-items: center; gap: 6px; height: 32px; }
.imp-steps li .mono { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--rule-2); font-size: 12px; }
.imp-steps li.on { color: var(--fg-1); box-shadow: inset 0 -2px 0 var(--fg-1); }
.imp-steps li.done { color: var(--fg-2); }
.imp-body { display: flex; flex-wrap: wrap; gap: 32px; padding: 16px; }
.imp-col { display: flex; flex-direction: column; gap: 8px; width: 420px; max-width: 100%; }
.imp-file { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.imp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.imp-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.imp-summary b { color: var(--fg-1); }
.imp-table { flex: none; max-height: 320px; }
.imp-table tr.imp-error td:first-child { box-shadow: inset 3px 0 0 var(--busy); }
.imp-table tr.imp-skip td { color: var(--fg-3); }
.imp-actions { display: flex; gap: 8px; padding: 12px 16px; }
.imp-details { padding: 0 16px 12px; }
.imp-details summary { cursor: pointer; padding: 6px 0; }
.acc-import > .hatch-banner { margin: 0 16px 16px; }
/* Credentials sheet: paper, printed alone (body.cred-print-mode). */
.cred-sheet { display: flex; flex-direction: column; gap: 12px; margin: 0 16px 16px; padding: 20px 24px; max-width: 900px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-0); }
.cred-head { display: flex; align-items: center; gap: 16px; }
.cred-head .ps-brand { display: flex; align-items: center; gap: 8px; }
.cred-head .t-button { flex: 1; }
.cred-table { width: 100%; border-collapse: collapse; font-family: var(--f-semi); font-size: 14px; }
.cred-table th { text-align: left; padding: 4px 8px; border-bottom: 2px solid var(--ink-0); font-size: 12px; }
.cred-table td { padding: 6px 8px; border-bottom: 1px solid #A9B1BC; vertical-align: top; }
.cred-table .mono { font-family: var(--f-mono); }
.cred-table .cred-pw { font-weight: 700; letter-spacing: .04em; }
.cred-foot { color: #3A434F; }
@media print {
  body.cred-print-mode .app > *:not(.views), body.cred-print-mode .toast-container { display: none !important; }
  body.cred-print-mode .app { border: 0 !important; height: auto; }
  body.cred-print-mode .view:not(.view-admin), body.cred-print-mode .admin-nav, body.cred-print-mode .admin-panel:not(.active),
  body.cred-print-mode #agentManagementSection > *:not(.acc-import), body.cred-print-mode .acc-import > *:not(.cred-sheet) { display: none !important; }
  body.cred-print-mode, body.cred-print-mode .app, body.cred-print-mode .admin-panel { overflow: visible; background: #fff; }
  body.cred-print-mode .cred-sheet { margin: 0; border: 0; max-width: none; }
  body.cred-print-mode .cred-table tr { break-inside: avoid; }
}
/* Lost radio: busy tag + word (never red: red is SOS only). */
.lost-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--busy); border-radius: 2px; background: var(--busy-tint); color: var(--busy); font-family: var(--f-semi); font-weight: 600; font-size: 13px; }
/* Account sheet, opened under its row by « Gérer ». */
.acc-sheet-row td { height: auto; padding: 0; white-space: normal; background: var(--ink-1); }
.acc-sheet-row:hover { background: var(--ink-1) !important; }
.acc-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-left: 3px solid var(--fg-1); }
.as-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.as-line { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.as-out .acc-paper { padding: 8px 12px; }
/* Units fiche: lost radio */
.rc-lost { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; border-top: 1px solid var(--rule-2); }
/* Canaux & membres: batch add */
.batch-members { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bm-head { display: flex; align-items: center; gap: 16px; }
.bm-head .t-button { flex: 1; }
.bm-all { border: 1px solid var(--rule-2); }
.bm-list { max-height: 280px; }
.bm-member { cursor: default; }
.bm-member .gz-pick-name { color: var(--fg-3); }
.gz-pick-row input:disabled { border-style: dashed; cursor: default; }
.gz-pick-row input:disabled:checked { background: var(--fg-3); border-color: var(--fg-3); }
.bm-actions { display: flex; gap: 8px; }
#safety-alert-banner { display: none !important; } /* legacy ids kept for safety.js; the right-column alert block shows these alerts */
.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.chm-lvrow { display: flex; align-items: center; gap: 8px; }
.chm-lvrow .chm-level { flex: 1; }
.chm-lvrow .chm-level > i { height: 6px; border: 0; background: var(--ink-3); }
.chm-lvrow .chm-level > i.on.c-rx { background: var(--rx); }
.chm-lvrow .chm-level > i.on.c-tx { background: var(--tx); }
.chm-lvrow .lv-t { color: var(--rx); }
.chm[data-frame="tx"] .chm-lvrow .lv-t { color: var(--tx); }
.rc-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sub .chan { display: inline-flex; vertical-align: -1px; }
#rcAddress { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.calls-status { font-family: var(--f-semi); font-size: 14px; color: var(--fg-3); }
.calls-health.down { border-left-color: var(--isole); }

/* ── ADMINISTRATION v0.5 (dispatch-v05 f8-admin) ─────────────────── */
.ap-head { gap: 4px; padding: 14px 16px 12px; background: var(--ink-0); border-bottom: 0; }
.ap-head.row { flex-direction: row; align-items: baseline; gap: 12px; }
.ap-head > .t-state { font-size: 22px; line-height: 24px; letter-spacing: .03em; }
.ap-head > .t-body { color: var(--fg-3); max-width: 980px; }
.view-admin .acc-form { padding: 0 16px 14px; border-bottom: 1px solid var(--rule); background: var(--ink-0); }
.view-admin .acc-tools { background: var(--ink-0); }
.view-admin .acc-tools > .t-body { color: var(--fg-3); }
.view-admin .table-scroll { background: var(--ink-0); }
.admin-body { background: var(--ink-0); }
.admin-role .t-label { color: var(--fg-3); }
.admin-role .t-body { font-size: 14px; line-height: 19px; }
.dtable td.name.off { color: var(--fg-3); font-weight: 500; }
.dtable tr.inactive td { color: var(--fg-3); }
.act-on { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); }
.act-on .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.acc-group td { height: 40px; background: var(--ink-0); }
.acc-group:hover { background: transparent !important; }
.acc-group-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 600; }
.acc-group-btn::before { content: "›"; display: inline-block; width: 10px; color: var(--fg-3); font-size: 18px; transition: none; }
.acc-group-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
.acc-group-btn:hover { color: var(--fg-1); }
.dtable td .acc-actions .key.ghost { color: var(--fg-2); }
.dtable tr:hover .acc-actions .key.ghost, .dtable tr.sel .acc-actions .key.ghost { border-color: var(--rule-2); background: var(--ink-2); color: var(--fg-1); }
.integ-row .t-button { font-size: 15px; }
.kv-row .t-data { font-family: var(--f-semi); font-size: 15px; }
.badge-status { color: var(--ok); }
.alerts-table td:has(> .pin), .alerts-table td:has(> .key) { padding: 0 8px; text-overflow: clip; }

/* FIX-1 M4-08: open repeats grouped (right column + F6 detail). */
.alert-row .grp-n { flex: none; font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: var(--fg-1); }
.ad-grp .key { margin-left: auto; flex: none; }

/* FIX-1 M4-03: site of a channel when the admin views every site. */
.chm-head .chm-site { flex: none; max-width: 40%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg-3); }
.rec-ch-site { padding: 10px 12px 4px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FIX-1 M4-05: Administration > Accounts at 1366 px: the row actions (Gerer, Fiche radio) stay on screen. */
.acc-table td:last-child, .acc-table th:last-child { position: sticky; right: 0; z-index: 1; background: var(--ink-0); box-shadow: -1px 0 0 var(--rule); }
.acc-table th:last-child { z-index: 3; }
@media (max-width: 1500px) {
  .acc-table th.w220, .acc-table th.w180 { width: auto; }
  .acc-table td { padding: 0 8px; }
}

/* FIX-1 M4-13: many units below zoom 15: plates only for selected / talking / alerting units and on hover. */
.om-labels-off .om-plate:not(.om-plate-sel):not(.om-plate-rx):not(.om-plate-isole):not(.om-plate-viol) { display: none; }
.om-labels-off .om-wrap:hover .om-plate { display: inline-block; }

/* FIX-1 M4-19: a long channel name in a table cell ends with an ellipsis (full name in the tooltip). */
.dtable td > .chan { max-width: 200px; }