/* Panel base styles — ported from marisight_UI_Desing/styles.css.
   Hex literals replaced with var(--ms-*) tokens; logical CSS properties for RTL. */

.ms-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--ms-panel);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
}
.ms-panel + .ms-panel { border-top-width: 0 !important; }

.ms-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    flex-shrink: 0;
    min-height: 34px;
    background: var(--ms-panel-header);
    border-bottom: 1px solid var(--ms-panel-border);
}
.ms-panel-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--ms-font-mono);
    color: var(--ms-text);
}
.ms-panel-sub {
    margin-inline-start: 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
    font-family: var(--ms-font-mono);
    color: var(--ms-text-mute);
    opacity: 0.85;
}
.ms-panel-right { display: flex; gap: 6px; align-items: center; }
.ms-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 12px;
    min-height: 0;
}
.ms-panel-body.dense { padding: 4px 12px 8px; }

.ms-panel-body::-webkit-scrollbar { width: 6px; }
.ms-panel-body::-webkit-scrollbar-thumb { background: var(--ms-panel-border); border-radius: 0; }
.ms-panel-body::-webkit-scrollbar-track { background: transparent; }

.ms-chip {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-family: var(--ms-font-mono);
    letter-spacing: 0.06em;
    /* Status chips recolour live (mission/unit state changes) — ease the
       swap instead of snapping (#ui-polish 2026-06-12). */
    transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .ms-chip { transition: none; }
}
.ms-chiprow { display: flex; gap: 4px; flex-wrap: wrap; }

.ms-empty {
    padding: 20px 0;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--ms-text-mute);
}

/* Generic count badge for placeholder panels in Phase C1. */
.ms-count {
    font-family: var(--ms-font-mono);
    font-size: 28px;
    color: var(--ms-text);
    text-align: center;
    padding: 16px 0 4px;
    letter-spacing: 0.05em;
}
.ms-count-label {
    text-align: center;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Buttons */
.ms-btn {
    padding: 6px 10px;
    font-size: 11px;
    cursor: var(--ms-cursor-pointer);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    background: transparent;
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
}
.ms-btn.small { padding: 4px 8px; font-size: 10px; }
.ms-btn { transition: filter 120ms ease, border-color 120ms ease, background 120ms ease; }
.ms-btn:hover { filter: brightness(1.15); }
.ms-btn.accent { color: var(--ms-accent); border-color: var(--ms-accent); }
.ms-btn.alert  { color: var(--ms-alert);  border-color: var(--ms-alert); }

/* ---- Tracks list (ms-track-row) ----
 * Two layouts depending on the panel mode (Phase #106-B):
 *   .ms-track-list.compact   — chip + name + speed on a single row.
 *                              Default. Stakeholder ask: "die sind echt zu viel".
 *   .ms-track-list.detailed  — adds coord cell underneath, like the
 *                              original 2-row layout for power users.
 */
.ms-track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Virtualized variant (>100 contacts): a bounded, scrollable container so
   Blazor's <Virtualize> has a definite height to compute its window against.
   gap:0 because Virtualize lays rows out via absolute spacers — a flex gap
   would desync ItemSize from the real row pitch. */
.ms-track-list-virtual {
    display: block;
    max-height: 320px;
    overflow-y: auto;
    gap: 0;
}
.ms-track-list-virtual .ms-track-row { margin: 0; }
.ms-track-list-virtual::-webkit-scrollbar { width: 6px; }
.ms-track-list-virtual::-webkit-scrollbar-thumb { background: var(--ms-panel-border); }
.ms-track-list-virtual::-webkit-scrollbar-track { background: transparent; }
.ms-track-row {
    display: grid;
    gap: 2px 8px;
    padding: 4px 6px;
    border-bottom: 1px dashed var(--ms-panel-border);
    font-size: 12px;
    cursor: var(--ms-cursor-pointer);
}
/* Bridge readout rows (2026-07-18): every contact shows BRG °T · RNG nm on a
   second line (+ CPA nm chip when the ARPA delivered one). Row heights must
   stay in lock-step with TracksPanel.RowHeight (Virtualize spacer math). */
.ms-track-list.compact .ms-track-row {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "chip name speed" "chip brg cpa";
    align-items: center;
    padding: 5px 6px;
}
.ms-track-list.detailed .ms-track-row {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "chip name speed" "chip brg cpa" "chip coord coord";
    padding: 6px 6px;
}
.ms-track-row:hover { background: var(--ms-panel-header); }
.ms-track-row.selected {
    background: var(--ms-panel-header);
    box-shadow: inset 3px 0 0 var(--ms-accent);
}
html[dir="rtl"] .ms-track-row.selected { box-shadow: inset -3px 0 0 var(--ms-accent); }
.ms-track-row > .ms-chip { grid-area: chip; align-self: center; text-align: center; }
.ms-track-name { grid-area: name; color: var(--ms-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-track-coord { grid-area: coord; color: var(--ms-text-dim); font-family: var(--ms-font-mono); font-size: 10px; }
.ms-track-speed { grid-area: speed; color: var(--ms-text); font-family: var(--ms-font-mono); font-size: 11px; text-align: end; }
.ms-track-brg   { grid-area: brg; color: var(--ms-text-dim); font-family: var(--ms-font-mono); font-size: 10px; white-space: nowrap; }
.ms-track-cpa   { grid-area: cpa; color: var(--ms-text-dim); font-family: var(--ms-font-mono); font-size: 10px; text-align: end; white-space: nowrap; }
/* CPA under half a mile = collision-relevant → alarm tone. */
.ms-track-cpa.danger { color: var(--ms-alert); font-weight: 700; }

/* ---- Alerts list (ms-alert-card) ---- */
.ms-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-alert-card {
    padding: 8px 10px;
    border: 1px solid;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.35;
    /* Entry beat (#ui-polish): a fresh alert slides in with a brief glow so a
       new alarm registers in the operator's periphery. Runs once per DOM
       insertion — existing cards re-rendered in place don't re-flash. */
    animation: ms-alert-in 450ms ease-out;
}
@keyframes ms-alert-in {
    0%   { opacity: 0; transform: translateY(-4px); box-shadow: 0 0 0 0 transparent; }
    40%  { opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent); }
    100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-alert-card { animation: none; }
}
.ms-alert-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ms-alert-time { font-family: var(--ms-font-mono); font-size: 10px; color: var(--ms-text-mute); }
.ms-alert-msg { color: var(--ms-text); font-weight: 500; }
.ms-alert-actions { margin-top: 6px; display: flex; gap: 6px; }

/* Acknowledgement trail — sits between the message and the actions
   row, only renders for acked alerts. Mono-font lines up the time
   nicely; muted colour keeps it from competing with the live message. */
.ms-alert-ack {
    margin-top: 4px;
    font-family: var(--ms-font-mono);
    font-size: 10px;
    color: var(--ms-text-mute);
    letter-spacing: 0.04em;
}

/* Click-to-fly affordance — only added when the alert's track is still
   in the live cache. Cursor + hover background mirror the kv-row.clickable
   pattern in the track-detail panel so the operator gets the same
   "interactive" cue across the lagebild. focus-visible re-uses the
   accent token from .ms-btn so keyboard navigation looks consistent. */
.ms-alert-card.clickable { cursor: var(--ms-cursor-pointer); }
.ms-alert-card.clickable:hover { filter: brightness(1.08); }
.ms-alert-card.clickable:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 1px;
}

/* ---- Assets list (ms-asset-row) ---- */
.ms-asset-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-asset-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--ms-panel-border);
}
.ms-asset-row:last-child { border-bottom: none; }
/* Units with a known position are click-to-fly (focusOnMap). */
.ms-asset-row.clickable { cursor: var(--ms-cursor-pointer); }
.ms-asset-row.clickable:hover { background: var(--ms-panel-header); }
.ms-asset-l { display: flex; align-items: center; gap: 10px; }
.ms-asset-r { text-align: end; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.ms-asset-kind {
    width: 36px; padding: 3px 0; text-align: center;
    border: 1px solid var(--ms-panel-border);
    color: var(--ms-text-dim);
    font-size: 10px;
    font-family: var(--ms-font-mono);
    letter-spacing: 0.08em;
}
.ms-asset-name { color: var(--ms-text); font-size: 12px; display: flex; flex-direction: column; min-width: 0; }
/* Person on board — small dim sub-line under the unit name (AssetsPanel). */
.ms-asset-operator {
    color: var(--ms-text-dim);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Direct operator info under the Stammdaten picker on /units (admin). */
.ms-unit-operator-info {
    display: block;
    color: var(--ms-text-dim);
    font-size: 10px;
    margin-top: 2px;
}
.ms-asset-pct { color: var(--ms-text); font-family: var(--ms-font-mono); font-size: 11px; }
.ms-asset-sig { font-family: var(--ms-font-mono); font-size: 10px; margin-inline-end: 6px; white-space: nowrap; }
.ms-asset-bar {
    width: 76px; height: 4px;
    border: 1px solid var(--ms-panel-border);
    overflow: hidden;
    display: block;
}
.ms-asset-bar-fill { height: 100%; transition: width 0.6s ease-out; display: block; }

/* ---- Radar health grid ---- */
.ms-rad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-rad-cell {
    padding: 8px;
    border: 1px solid var(--ms-panel-border);
    display: flex; flex-direction: column; gap: 4px;
}
.ms-rad-top { display: flex; justify-content: space-between; align-items: center; }
.ms-rad-name { font-size: 11px; color: var(--ms-text); font-weight: 600; }
.ms-rad-station { font-size: 10px; color: var(--ms-text-dim); }
.ms-rad-coord { font-size: 10px; color: var(--ms-text-mute); font-family: var(--ms-font-mono); }
.ms-rad-lastseen {
    font-size: 9px;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Camera placeholder ---- */
.ms-cam-placeholder {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--ms-panel-border);
    border-top: none;
    overflow: hidden;
    display: block;
}

.ms-cam-meta {
    padding: 8px 12px 10px;
    border-inline: 1px solid var(--ms-panel-border);
    border-bottom: 1px solid var(--ms-panel-border);
    border-top: none;
    background: var(--ms-bg2);
}
.ms-cam-meta .ms-kv-row {
    border-bottom: 1px dashed var(--ms-panel-border);
    padding: 4px 0;
}
.ms-cam-meta .ms-kv-row:last-child { border-bottom: none; }

/* ---- Track detail floating overlay (centre column, RTL-aware) ----
   The horizontal centring offset lives in --ms-drawer-x so the slide-in
   keyframes can re-state the full transform without knowing the direction
   (RTL flips the variable, not the animation).

   Surfaces the same tokens as .ms-modal (panel background / border /
   radius) so drawer and dialogs read as one design family in all three
   themes — the old hardcoded rgba glass only worked on dark. The slight
   translucency + blur is kept via color-mix over the panel token. */
.ms-track-detail {
    --ms-drawer-x: -50%;
    position: absolute;
    top: 12px;
    inset-inline-start: 50%;
    transform: translateX(var(--ms-drawer-x));
    /* WIDE drawer (customer ask #8): the dispatch flow spreads into two
       columns instead of one tall stack. Shrinks with the map column down
       to a usable floor (a very slim centre column may be overlapped a
       little rather than rendering an unusable sliver); the container
       query below drives the column ↔ stack switch. */
    width: clamp(300px, calc(100% - 24px), 880px);
    container-type: inline-size;
    /* The inline dispatch flow is open by default — the drawer scrolls
       instead of growing past the map edge. */
    max-height: calc(100% - 24px);
    overflow-y: auto;
    /* Customer bug 2026-06-12 ("Panels übereinander"): on browsers without
       color-mix() the mixed background was dropped entirely, leaving the
       drawer transparent — the tracks list read straight through it. Plain
       opaque token first as the universal fallback, frosted mix for modern
       engines on top. */
    background: var(--ms-panel);
    background: color-mix(in srgb, var(--ms-panel) 97%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ms-panel-border);
    border-radius: 10px;
    color: var(--ms-text);
    padding: 10px 14px 12px;
    /* Above every other map overlay (area toolbar z6, help markers z6, AIS
       filter) — the detail drawer is the foreground task while it's open. */
    z-index: 8;
    pointer-events: auto;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    animation: ms-drawer-in 300ms ease-out;
}
html[dir="rtl"] .ms-track-detail { --ms-drawer-x: 50%; }

/* While the detail drawer is the foreground task, the floating overlays it
   can collide with (AIS source filter, area-select toolbar) fade back and
   stop catching clicks — "nicht übereinander". Browsers without :has()
   simply keep them behind the now-opaque drawer. */
.ms-lagebild-map:has(> .ms-track-detail) .ms-ais-filter,
.ms-lagebild-map:has(> .ms-track-detail) .ms-area-toolbar {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 150ms ease-out;
}
@keyframes ms-drawer-in {
    from { opacity: 0; transform: translateX(var(--ms-drawer-x)) translateY(-10px); }
    to   { opacity: 1; transform: translateX(var(--ms-drawer-x)) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ms-track-detail { animation: none; }
}

.ms-track-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* room for the absolute ✕ anchored at the drawer's top inline-end */
    padding-inline-end: 22px;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ms-panel-border);
    margin-bottom: 8px;
}
.ms-track-detail-titles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.ms-track-detail-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-kv {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}
/* On the wide drawer the target read-out packs into two columns so the
   header zone stays short (customer ask #8). */
@container (min-width: 640px) {
    .ms-kv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }
}
.ms-kv-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--ms-panel-border);
    font-size: 12px;
}
.ms-kv-row:last-child { border-bottom: none; }
/* Labels (KURS, FAHRT, LAT/LON …) — amber warn token so they read clearly
   as field names in every theme (the old hardcoded gold broke light). */
.ms-kv-row > span:first-child {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--ms-font-mono);
    color: var(--ms-warn);
}
/* Values (195°, 28.0 kn, coords …) — full-strength text + bold for legibility. */
.ms-kv-row > span:last-child {
    color: var(--ms-text);
    font-weight: 700;
}

/* CPA convergence row in TrackDetailPanel — same alert colour as the
   AIS popup's threat line so the operator reads it as a paired signal
   no matter which side they clicked first. Stays inside the kv grid
   so the row aligns with the rest of the data, only the colour pops. */
.ms-kv-row.ms-kv-row-alert > span { color: var(--ms-alert); font-weight: 600; }
.ms-kv-row.ms-kv-row-alert > span:first-child { color: var(--ms-alert); }

/* Clickable kv-row variant — used for the CPA convergence line that
   flies the map to the converging AIS contact when activated. Cursor +
   hover background communicate "this is interactive" without changing
   the row's layout slot. Keyboard: tabindex on the markup makes it
   focusable; outline-on-focus reuses the accent token from buttons. */
.ms-kv-row.clickable { cursor: var(--ms-cursor-pointer); }
.ms-kv-row.clickable:hover { background: var(--ms-panel-header); }
.ms-kv-row.clickable:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 1px;
}

.ms-track-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Collapsible section header inside the drawer (dispatch flow) — same
   posture as the AIS-filter group heads: full-width, mono-uppercase, a
   leading disclosure arrow. */
.ms-drawer-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    border-block-start: 1px solid var(--ms-panel-border);
    cursor: var(--ms-cursor-pointer);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ms-accent);
    padding: 8px 0 6px 0;
    margin-block-start: 6px;
    text-align: start;
}
.ms-drawer-section-head:hover { color: var(--ms-text); }
.ms-drawer-section-arrow {
    display: inline-block;
    width: 0.8em;
    font-size: 10px;
    line-height: 1;
}
/* Action buttons (ENTSENDEN / KLASSIFIZIEREN) — larger hit area, bold,
   bright text and a clear turquoise rim so they stand out from the data. */
.ms-track-detail-actions .ms-btn {
    flex: 1 1 auto;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ms-text);
    border-width: 1.5px;
}
.ms-track-detail-actions .ms-btn.accent {
    background: color-mix(in srgb, var(--ms-accent) 20%, transparent);
    border-color: var(--ms-accent);
    color: var(--ms-text);
}
.ms-track-detail-actions .ms-btn.accent:hover {
    background: color-mix(in srgb, var(--ms-accent) 32%, transparent);
    filter: none;
}
.ms-track-detail-actions .ms-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Modal (dispatch + future use) ---- */
.ms-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    z-index: var(--z-modal); /* was 100 */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ms-backdrop-in 200ms ease-out;
}
@keyframes ms-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ms-modal {
    position: relative; /* anchor for the absolute .ms-modal-close */
    width: min(560px, calc(100% - 32px));
    max-height: 80vh;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 10px;
    overflow: hidden; /* keep the squared head/foot bars inside the radius */
    color: var(--ms-text);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: ms-modal-in 300ms ease-out;
}
@keyframes ms-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ms-modal-backdrop, .ms-modal { animation: none; }
}
.ms-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* extra inline-end room so the title never runs under the absolute ✕ */
    padding: 10px 32px 10px 14px;
    padding-inline-end: 32px;
    padding-inline-start: 14px;
    background: var(--ms-panel-header);
    border-bottom: 1px solid var(--ms-panel-border);
}
.ms-modal-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--ms-font-mono);
}
/* The ONE close affordance for every dialog/drawer header on the console
   (dispatch + bulk + create-mission + mission-detail + quick-unit modals,
   track-detail drawer). Ghost ✕ — replacing the mix of bordered .ms-btn
   boxes the dialogs used before. Textual cancel stays in the action
   footers; this is the unified header dismiss.

   Anchored ABSOLUTELY at the top end of the dialog (customer feedback:
   the ✕ sat on different sides depending on each header's flex layout).
   Logical properties keep it on the reading-direction end in LTR and RTL
   alike; .ms-modal / .ms-track-detail are the positioned ancestors. */
.ms-modal-close {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ms-text-dim);
    cursor: var(--ms-cursor-pointer);
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.ms-modal-close:hover {
    color: var(--ms-text);
    background: color-mix(in srgb, var(--ms-text) 10%, transparent);
}
.ms-modal-close:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 1px;
}
.ms-modal-body {
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ms-modal-context {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--ms-panel-border);
    font-size: 12px;
}
.ms-modal-context-coords {
    font-family: var(--ms-font-mono);
    color: var(--ms-text-dim);
    font-size: 11px;
}
.ms-modal-error,
.ms-modal-warn {
    padding: 8px 10px;
    border: 1px solid;
    font-size: 11px;
}
.ms-modal-error { color: var(--ms-alert); border-color: var(--ms-alert); }
.ms-modal-warn  { color: var(--ms-warn);  border-color: var(--ms-warn); }

.ms-rec-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    margin-top: 4px;
}
.ms-rec-row {
    display: grid;
    /* icon-avatar | name | score | eta | dist; the best-match row carries an
       extra availability chip, so it gets its own 6-column template below —
       the old single 5-column template made the best row's last cell wrap. */
    grid-template-columns: auto 1fr 64px 76px 76px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    border-radius: 8px;
    color: var(--ms-text);
    cursor: var(--ms-cursor-pointer);
    text-align: start;
    font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.ms-rec-row:hover {
    border-color: var(--ms-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.ms-rec-row.selected {
    border-color: var(--ms-accent);
    box-shadow:
        inset 3px 0 0 var(--ms-accent),
        0 0 10px color-mix(in srgb, var(--ms-accent) 30%, transparent);
}
html[dir="rtl"] .ms-rec-row.selected {
    box-shadow:
        inset -3px 0 0 var(--ms-accent),
        0 0 10px color-mix(in srgb, var(--ms-accent) 30%, transparent);
}
.ms-rec-row.best {
    border-color: var(--ms-ok);
    grid-template-columns: auto 1fr auto 64px 76px 76px;
}
.ms-rec-name { font-weight: 600; display: flex; flex-direction: column; min-width: 0; }
/* Person on board, under the unit name in the dispatch picker. */
.ms-rec-operator {
    font-weight: 400;
    font-size: 10px;
    color: var(--ms-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-rec-type { color: var(--ms-text-dim); font-family: var(--ms-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.ms-rec-score { font-family: var(--ms-font-mono); font-size: 12px; color: var(--ms-accent); }
.ms-rec-eta,
.ms-rec-dist { font-family: var(--ms-font-mono); font-size: 11px; color: var(--ms-text-dim); text-align: end; }

.ms-rec-totals {
    margin-top: 4px;
    text-align: end;
    font-size: 10px;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
}

/* Dispatch dialog form fields (mission type / priority / notes). Previously
   unstyled — browser-default selects read as a foreign "plain" look next to
   the cyan recommendation rows. Now themed to match .ms-rec-row + .ms-mn-*
   so the single unified assignment dialog is visually consistent. */
.ms-dispatch-mtype {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ms-dispatch-mtype > label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
}
.ms-dispatch-mtype-select,
.ms-dispatch-notes {
    width: 100%;
    background: var(--ms-bg2);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
    border-radius: 3px;
    padding: 7px 9px;
    font: inherit;
    box-sizing: border-box;
}
.ms-dispatch-notes { min-height: 56px; resize: vertical; }
.ms-dispatch-mtype-select:focus,
.ms-dispatch-notes:focus {
    outline: none;
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 25%, transparent);
}
.ms-dispatch-mtype-hint {
    font-size: 11px;
    color: var(--ms-text-dim);
    font-style: italic;
}

/* CollapsibleSection (P6) — reusable expand/collapse wrapper. */
.ms-collapsible { display: flex; flex-direction: column; }
.ms-collapsible-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    border-block-start: 1px solid var(--ms-panel-border);
    padding: 6px 2px;
    cursor: var(--ms-cursor-pointer);
    color: var(--ms-text);
    font-family: var(--ms-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: start;
}
.ms-collapsible-head:hover { color: var(--ms-accent); }
.ms-collapsible-arrow { color: var(--ms-text-mute); width: 10px; }
.ms-collapsible-title { flex: 1; }
.ms-collapsible-badge {
    font-size: 10px;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
}
.ms-collapsible-body { padding: 4px 0 6px; }

/* Smuggling-suspicion badge (Phase 4) — score bar + risk band, colour-coded.
   --sc is set per risk level and drives the bar, level text and inline-start bar. */
.ms-suspicion {
    --sc: var(--ms-text-mute);
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent);
    border-inline-start: 3px solid var(--sc);
    border-radius: 3px;
    background: color-mix(in srgb, var(--sc) 8%, transparent);
}
.ms-suspicion.low      { --sc: var(--ms-text-mute); }
.ms-suspicion.elevated { --sc: var(--ms-warn, #fbbf24); }
.ms-suspicion.high     { --sc: var(--ms-warn-strong, #f59e0b); }
.ms-suspicion.critical { --sc: var(--ms-alert, #f43f5e); }
.ms-suspicion-head { display: flex; justify-content: space-between; align-items: baseline; }
.ms-suspicion-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--ms-font-mono);
    color: var(--ms-text-dim);
}
.ms-suspicion-score { font-family: var(--ms-font-mono); font-size: 16px; font-weight: 700; color: var(--sc); }
.ms-suspicion-max { font-size: 10px; color: var(--ms-text-mute); font-weight: 400; }
.ms-suspicion-bar {
    margin: 5px 0 4px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ms-text-mute) 25%, transparent);
    overflow: hidden;
}
/* Severity gradient instead of a flat bar: green at the origin running into
   the band colour (--sc) at the tip — low scores read as a short green sliver,
   critical scores as a full green→red sweep. Direction-explicit because
   gradients have no logical-property form; RTL mirrors the angle. */
.ms-suspicion-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ms-ok), var(--sc));
    border-radius: inherit;
    transition: width 400ms ease;
}
html[dir="rtl"] .ms-suspicion-bar-fill {
    background: linear-gradient(270deg, var(--ms-ok), var(--sc));
}
.ms-suspicion-level {
    font-size: 11px;
    font-weight: 600;
    color: var(--sc);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ms-suspicion-reasons {
    margin: 5px 0 0;
    padding-inline-start: 16px;
    font-size: 11px;
    color: var(--ms-text-dim);
    line-height: 1.5;
}

.ms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--ms-panel-border);
    background: var(--ms-panel-header);
}

/* ---- Dashboard stats panel ---- */
.ms-stats-group {
    padding: 6px 0;
    border-bottom: 1px solid var(--ms-panel-border);
}
.ms-stats-group:last-child { border-bottom: none; }
.ms-stats-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.ms-stats-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
}
.ms-stats-total {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: var(--ms-text);
}
.ms-stats-total.is-alert { color: var(--ms-alert); }
.ms-stats-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
}
.ms-stats-row-label { color: var(--ms-text-dim); }
.ms-stats-row-count {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ms-text);
}
.ms-stats-empty {
    font-size: 11px;
    color: var(--ms-text-mute);
    padding: 2px 0;
}
.ms-stats-radars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.ms-stats-radar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ms-text-dim);
}
.ms-stats-radar-name {
    font-family: var(--ms-font-mono);
    white-space: nowrap;
}
.ms-stats-trend {
    display: grid;
    grid-template-columns: 1fr 60px auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
}
.ms-stats-trend-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ms-text-mute);
}
.ms-stats-trend-sum {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ms-text);
    text-align: end;
}
.ms-stats-spark {
    display: inline-block;
    width: 60px;
    height: 16px;
    overflow: visible;
}
.ms-stats-spark polyline {
    fill: none;
    stroke: var(--ms-accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.ms-stats-spark-alert polyline { stroke: var(--ms-alert); }

/* ---- Notification settings panel ---- */
.ms-notify-group {
    padding: 6px 0;
    border-bottom: 1px solid var(--ms-panel-border);
}
.ms-notify-group:last-child { border-bottom: none; }
.ms-notify-group.ms-notify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ms-notify-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    margin-bottom: 4px;
}
.ms-notify-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.ms-notify-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ms-text-dim);
    cursor: pointer;
}
.ms-notify-check input { accent-color: var(--ms-accent); }
.ms-notify-perm {
    font-size: 10px;
    font-family: var(--ms-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border: 1px solid var(--ms-panel-border);
    color: var(--ms-text-mute);
}
.ms-notify-perm-granted { color: var(--ms-ok); border-color: var(--ms-ok); }
.ms-notify-perm-denied { color: var(--ms-alert); border-color: var(--ms-alert); }

/* ---- Track-detail classification pills (#track-detail) ---- */
.ms-cls-pills {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}
.ms-cls-pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
    border-radius: 999px;
    border: 1.5px solid var(--ms-panel-border);
    background: transparent;
    color: var(--ms-text-dim);
    font-size: 12px;
    font-weight: 700;
    cursor: var(--ms-cursor-pointer);
    white-space: nowrap;
}
.ms-cls-pill .ms-cls-ico { font-size: 11px; line-height: 1; }
.ms-cls-pill:disabled { opacity: 0.6; cursor: default; }
.ms-cls-pill.hostile { color: var(--ms-alert); border-color: var(--ms-alert); }
.ms-cls-pill.friend  { color: var(--ms-ok);    border-color: var(--ms-ok); }
.ms-cls-pill.unknown { color: var(--ms-warn);  border-color: var(--ms-warn); }
/* Active = filled, dark glyph on the classification colour. */
.ms-cls-pill.hostile.active { background: var(--ms-alert); color: #0b1220; }
.ms-cls-pill.friend.active  { background: var(--ms-ok);    color: #0b1220; }
.ms-cls-pill.unknown.active { background: var(--ms-warn);  color: #0b1220; }

/* ---- Track-detail unit tasking ---- */
.ms-link-unit {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--ms-panel-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ms-link-unit-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--ms-font-mono);
    color: var(--ms-text-mute);
}
.ms-link-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 5px currentColor;
}
.ms-link-dot.on  { background: var(--ms-ok);    color: var(--ms-ok); }
.ms-link-dot.off { background: var(--ms-alert); color: var(--ms-alert); }
.ms-link-unit-row { display: flex; gap: 6px; align-items: center; }
.ms-link-unit-row .ms-select {
    flex: 1 1 auto;
    padding: 7px 8px;
    background: var(--ms-panel-header);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
    border-radius: 6px;
    font-family: var(--ms-font-ui);
    font-size: 12px;
}
.ms-link-btn {
    width: 100%;
    padding: 9px 12px;
    font-weight: 700;
    color: #ffffff;
    background: #c2417f;            /* magenta CTA (matches the design) */
    border: 1.5px solid #d6489b;
    border-radius: 8px;
}
.ms-link-btn:hover:not(:disabled) { background: #d6489b; }
.ms-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Activity Insights panel (#v2-insights) */
.ms-insights-sub {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--ms-text-mute); margin: 8px 0 4px;
}
.ms-insights-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 3px;
    background: var(--ms-bg, #0a121c);
    border: 1px solid var(--ms-panel-border);
    border-radius: 7px;
    color: var(--ms-text-dim);
    cursor: var(--ms-cursor-pointer, pointer);
    text-align: start;
    transition: border-color .12s, background .12s;
}
.ms-insights-row:hover { border-color: var(--ms-accent); color: var(--ms-text); }
.ms-insights-place { font-size: 0.82rem; font-weight: 600; color: var(--ms-text); }
.ms-insights-coords { font-family: var(--ms-font-mono, monospace); font-size: 0.68rem; color: var(--ms-text-mute); }
.ms-insights-count {
    min-width: 24px; text-align: center; font-weight: 700; font-size: 0.8rem;
    padding: 1px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--ms-warn-strong, #fb923c) 20%, transparent);
    color: var(--ms-warn-strong, #fb923c);
}
.ms-insights-count[data-kind="contact"] {
    background: color-mix(in srgb, var(--ms-accent, #22d3ee) 18%, transparent);
    color: var(--ms-accent, #22d3ee);
}
.ms-insights-note { margin-top: 8px; font-size: 0.66rem; color: var(--ms-text-mute); line-height: 1.4; }