/* 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;
}
.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: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);
}
.ms-track-list.compact .ms-track-row {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "chip name speed";
    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 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; }

/* ---- 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;
}
.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; }
.ms-asset-pct { color: var(--ms-text); font-family: var(--ms-font-mono); font-size: 11px; }
.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) ---- */
.ms-track-detail {
    position: absolute;
    top: 12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 24px));
    background: rgba(8, 16, 28, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--ms-text);
    padding: 10px 14px 12px;
    z-index: 6;
    pointer-events: auto;
}
html[dir="rtl"] .ms-track-detail { transform: translateX(50%); }

.ms-track-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    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;
}
.ms-kv-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 12px;
}
.ms-kv-row:last-child { border-bottom: none; }
/* Labels (KURS, FAHRT, LAT/LON …) — amber/gold so they read clearly as
   field names against the dark backdrop. */
.ms-kv-row > span:first-child {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--ms-font-mono);
    color: #e7b53c;
}
/* Values (195°, 28.0 kn, coords …) — bright white + bold for legibility. */
.ms-kv-row > span:last-child {
    color: #ffffff;
    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;
}
/* 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: #ffffff;
    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: #eafeff;
}
.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(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-modal {
    width: min(560px, calc(100% - 32px));
    max-height: 80vh;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    color: var(--ms-text);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ms-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 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);
}
.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;
    grid-template-columns: 1.2fr 1fr 70px 80px 80px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    color: var(--ms-text);
    cursor: var(--ms-cursor-pointer);
    text-align: start;
    font-family: inherit;
}
.ms-rec-row:hover { border-color: var(--ms-accent); }
.ms-rec-row.selected { border-color: var(--ms-accent); box-shadow: inset 3px 0 0 var(--ms-accent); }
html[dir="rtl"] .ms-rec-row.selected { box-shadow: inset -3px 0 0 var(--ms-accent); }
.ms-rec-row.best { border-color: var(--ms-ok); }
.ms-rec-name { font-weight: 600; }
.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;
}
.ms-suspicion-bar-fill { height: 100%; background: var(--sc); transition: width 400ms ease; }
.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; }