/* JayDN Operations Portal
 * Final product theme layered over the legacy stylesheet.
 * Tokens and component rules follow design-system/jaydn-operations-portal/MASTER.md.
 */

:root,
:root[data-theme="theme-olive"] {
  color-scheme: dark;
  --j-canvas: #141511;
  --j-surface: #252620;
  --j-surface-subtle: #2d2e27;
  --j-surface-active: #36382f;
  --j-ink: #deddd7;
  --j-ink-strong: #f5f4ef;
  --j-muted: #b0ada6;
  --j-muted-soft: #929087;
  --j-border: #4a4c42;
  --j-border-strong: #5d6053;
  --j-control-border: #6b6e60;
  --j-primary: #a5af69;
  --j-primary-hover: #bac37c;
  --j-primary-solid: #9aa665;
  --j-primary-solid-hover: #a9b574;
  --j-on-primary: #181a12;
  --j-primary-soft: #30351f;
  --j-healthy: #5ee0a6;
  --j-healthy-soft: #173328;
  --j-info: #8bbcff;
  --j-info-soft: #192b40;
  --j-warning: #f2b35b;
  --j-warning-soft: #3b2b18;
  --j-critical: #ff8989;
  --j-critical-soft: #3a2020;
  --j-focus: #aeb86f;
  --j-radius-control: 10px;
  --j-radius-card: 14px;
  --j-radius-dialog: 16px;
  --j-shadow-menu: 0 16px 38px rgba(0, 0, 0, .42);
  --j-shadow-dialog: 0 28px 80px rgba(0, 0, 0, .58);
  --j-sidebar: 248px;
  --bg: var(--j-canvas);
  --bg-panel: var(--j-surface);
  --bg-panel-2: var(--j-surface-subtle);
  --bg-elev: var(--j-surface-active);
  --bg-input: var(--j-surface);
  --text: var(--j-ink-strong);
  --text-dim: var(--j-ink);
  --muted: var(--j-muted);
  --border: var(--j-border);
  --border-strong: var(--j-border-strong);
  --accent: var(--j-primary);
  --accent-bright: var(--j-primary-hover);
  --accent-soft: var(--j-primary-soft);
  --good: var(--j-healthy);
  --info: var(--j-info);
  --warn: var(--j-warning);
  --bad: var(--j-critical);
  --shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

html { background: var(--j-canvas); }

body,
button,
input,
select,
textarea {
  font-family: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  color: var(--j-ink);
  background: var(--j-canvas);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
summary,
[role="button"] { cursor: pointer; }

button:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--j-focus) !important;
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled { cursor: not-allowed; opacity: .58; }

/* Application shell */

.app-shell { min-height: 100dvh; background: var(--j-canvas); }

.sidebar {
  width: var(--j-sidebar);
  min-width: var(--j-sidebar);
  padding: 18px 14px 14px;
  border-right: 1px solid var(--color-stone-700, #44403c);
  color: var(--color-stone-300, #d6d3d1);
  background: var(--color-stone-900, #1c1917);
  box-shadow: none;
}

.brand {
  min-height: 68px;
  margin: 0 4px 18px;
  padding: 4px 8px 17px;
  border-bottom: 1px solid rgba(231, 229, 228, .14);
  text-align: center;
}

.brand-name { color: var(--color-stone-50, #fafaf9); font-size: 25px; letter-spacing: -.04em; white-space: nowrap; }
.brand-name strong { color: var(--color-preline-avocado-300, oklch(72.4% .055 120)); }
.brand-wordmark {
  display: inline-grid;
  width: max-content;
  grid-template-areas:
    "jay dn"
    ". cloud";
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: center;
  color: var(--j-ink-strong);
  font-family: "Quicksand", Inter, "SF Pro Text", "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.075em;
  white-space: nowrap;
}
.brand-wordmark-jay { grid-area: jay; }
.brand-wordmark .brand-wordmark-dn {
  grid-area: dn;
  color: inherit;
  font: inherit;
}
.brand-wordmark-cloud {
  grid-area: cloud;
  justify-self: stretch;
  margin-top: .20em;
  padding-left: .18em;
  transform: translate(.18em, -.08em);
  color: var(--j-primary-hover);
  font-family: Inter, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: .27em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2em;
  text-align: center;
}
.brand-cloud {
  position: relative;
  top: -.72em;
  display: inline-block;
  margin-left: .48em;
  color: var(--j-primary-hover);
  font-family: var(--font-ui);
  font-size: .36em;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.brand-subtitle { margin-top: 1px; color: var(--color-stone-400, #a8a29e); font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.brand-wordmark + .brand-subtitle { margin-top: 7px; }

.sidebar-nav { gap: 2px; }
.sidebar-nav > p {
  margin: 17px 10px 7px;
  color: var(--color-stone-500, #78716c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-item {
  min-height: 39px;
  gap: 11px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  color: var(--color-stone-300, #d6d3d1);
  font-size: 13px;
  font-weight: 560;
  transition: color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out;
}
.nav-item:hover { color: var(--color-stone-50, #fafaf9); background: var(--color-stone-800, #292524); }
.nav-item.active {
  color: var(--color-stone-50, #fafaf9);
  background: var(--color-stone-800, #292524);
  box-shadow: none;
}
.nav-icon { width: 18px; height: 18px; border: 0; border-radius: 0; color: var(--color-stone-400, #a8a29e); background: transparent; box-shadow: none; }
.nav-item.active .nav-icon { color: var(--color-preline-avocado-300, oklch(72.4% .055 120)); background: transparent; }
.nav-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

.user-chip {
  gap: 10px;
  margin-top: auto;
  padding: 12px 9px 4px;
  border-top: 1px solid rgba(231, 229, 228, .13);
  background: transparent;
}
.avatar { width: 31px; height: 31px; color: var(--color-stone-50, #fafaf9); background: var(--j-primary); font-size: 12px; }
.user-copy strong { color: var(--color-stone-100, #f5f5f4); font-size: 12px; }
.user-copy small { max-width: 116px; color: var(--color-stone-400, #a8a29e); font-size: 11px; }
.sign-out { display: grid; width: 30px; height: 30px; padding: 6px; place-items: center; border-radius: 7px; color: var(--color-stone-400, #a8a29e); }
.sign-out:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sign-out img { width: 17px; height: 17px; filter: invert(77%) sepia(9%) saturate(460%) hue-rotate(104deg); }

.main { min-width: 0; padding: 0; background: var(--j-canvas); }

.page-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 82px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--j-border);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(41, 37, 36, .02);
  backdrop-filter: blur(12px);
}
.page-heading h1 { color: var(--j-ink-strong); font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.page-subtitle { margin-top: 2px; color: var(--j-muted); font-size: 12px; }
.page-actions {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}
.page-body { width: 100%; max-width: 1680px; margin-inline: auto; padding: 22px 26px 40px; }

/* Shared controls */

.time-range-presets {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--j-border);
  border-radius: 9px;
  background: var(--j-surface-subtle);
}
.time-range-presets button {
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 650;
  transition: color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.time-range-presets button:hover { color: var(--j-ink); background: #fff; }
.time-range-presets button.active { color: var(--j-primary-hover); background: #fff; box-shadow: 0 1px 3px rgba(41, 37, 36, .1); }

.scope-selector > summary {
  min-width: 214px;
  min-height: 39px;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--j-border-strong);
  border-radius: 9px;
  color: var(--j-ink);
  background: #fff;
  box-shadow: none;
}
.scope-selector > summary:hover { border-color: var(--color-stone-400, #a8a29e); background: var(--j-surface-subtle); }
.scope-selector-label { color: var(--j-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-selector summary strong { max-width: 176px; color: var(--j-ink-strong); font-size: 13px; font-weight: 650; }
.scope-selector-count { color: var(--j-primary); background: var(--j-primary-soft); }
.scope-menu,
.custom-time-range {
  margin-top: 8px;
  border: 1px solid var(--j-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--j-shadow-menu);
}
.scope-menu { width: min(420px, calc(100vw - 32px)); }
.scope-menu-heading,
.scope-menu-footer { padding: 14px 16px; border-color: var(--j-border); }
.scope-menu-heading strong { color: var(--j-ink); font-size: 13px; }
.scope-menu-heading small,
.scope-selection-status { color: var(--j-muted); font-size: 12px; }
.scope-options { padding: 8px; }

.scope-add-button,
.scope-connect-button,
.form-submit,
.auth-submit,
.copy-command-button,
.site-dialog-actions button[type="submit"] {
  border: 1px solid var(--j-primary);
  border-radius: var(--j-radius-control);
  color: #fff;
  background: var(--j-primary);
  box-shadow: none;
  font-weight: 650;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.scope-add-button:hover,
.scope-connect-button:hover,
.form-submit:hover,
.auth-submit:hover,
.copy-command-button:hover,
.site-dialog-actions button[type="submit"]:hover { border-color: var(--j-primary-hover); background: var(--j-primary-hover); }

.scope-all-button,
.scope-manage-button,
.secondary-button,
.topology-tool-button,
.refresh-button,
.panel-link,
.icon-button,
.site-dialog-actions button[type="button"] {
  border-color: var(--j-border-strong);
  border-radius: var(--j-radius-control);
  color: var(--j-ink);
  background: #fff;
  box-shadow: none;
}

input,
select,
textarea,
.site-dialog input[type="text"],
.site-dialog select,
.site-management-dialog input[type="text"] {
  min-height: 40px;
  border: 1px solid var(--j-border-strong);
  border-radius: var(--j-radius-control);
  color: var(--j-ink);
  background: #fff;
  box-shadow: none;
  font-size: 14px;
}
input[type="checkbox"],
input[type="radio"] {
  border-color: var(--j-border-strong);
  color: var(--j-primary);
}
input[type="checkbox"] {
  display: inline-grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  place-content: center;
  border: 1.5px solid var(--j-control-border);
  border-radius: 4px;
  color: var(--j-on-primary);
  background: var(--j-surface);
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    border-color 140ms ease-out,
    background-color 140ms ease-out;
}
input[type="checkbox"]::before {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease-out;
}
input[type="checkbox"]:checked {
  border-color: var(--j-primary-solid);
  background: var(--j-primary-solid);
}
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--j-primary); }
input[type="checkbox"]:disabled {
  opacity: .46;
  cursor: not-allowed;
}
input[type="radio"] {
  display: inline-grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  place-content: center;
  border: 1.5px solid var(--j-control-border);
  border-radius: 50%;
  color: var(--j-primary-solid);
  background: var(--j-surface);
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    border-color 140ms ease-out,
    background-color 140ms ease-out;
}
input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: scale(0);
  transition: transform 140ms ease-out;
}
input[type="radio"]:checked {
  border-color: var(--j-primary);
  background: var(--j-primary-soft);
}
input[type="radio"]:checked::before { transform: scale(1); }
input[type="radio"]:hover:not(:disabled) { border-color: var(--j-primary); }
input[type="radio"]:disabled {
  opacity: .46;
  cursor: not-allowed;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  --tw-ring-color: color-mix(in srgb, var(--j-focus) 28%, transparent);
}
input[type="checkbox"]:focus {
  border-color: var(--j-primary);
  outline: none;
  box-shadow: none;
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--j-focus) !important;
  outline-offset: 3px;
}
input[type="radio"]:focus {
  border-color: var(--j-primary);
  outline: none;
  box-shadow: none;
}
input[type="radio"]:focus-visible {
  outline: 2px solid var(--j-focus) !important;
  outline-offset: 3px;
}
label:has(> input[type="radio"]) { cursor: pointer; }
label:has(> input[type="radio"]:disabled) { cursor: not-allowed; }
label:has(> input[type="checkbox"]) { cursor: pointer; }
label:has(> input[type="checkbox"]:disabled) { cursor: not-allowed; }
@media (forced-colors: active) {
  input[type="checkbox"],
  input[type="radio"] { appearance: auto; }
  input[type="checkbox"]::before,
  input[type="radio"]::before { display: none; }
}
input:hover,
select:hover,
textarea:hover { border-color: var(--color-stone-400, #a8a29e); }
input:focus,
select:focus,
textarea:focus { border-color: var(--j-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 18%, transparent); }
.field-label,
.auth-field label { color: var(--j-ink); font-size: 12px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.field-hint { color: var(--j-muted); font-size: 12px; }

/* Operational overview */

.overview-posture {
  min-height: 0;
  gap: 20px;
  margin-bottom: 14px;
  padding: 17px 19px;
  border: 1px solid var(--j-border);
  border-left: 4px solid var(--color-stone-400, #a8a29e);
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: none;
}
.overview-posture[data-tone="healthy"],
.overview-posture[data-tone="good"] { border-left-color: var(--j-healthy); background: var(--j-healthy-soft); }
.overview-posture[data-tone="warning"],
.overview-posture[data-tone="warn"] { border-left-color: var(--j-warning); background: #fffdf9; }
.overview-posture[data-tone="critical"],
.overview-posture[data-tone="bad"] { border-left-color: var(--j-critical); background: #fffafa; }
.overview-posture-kicker { gap: 9px; margin-bottom: 6px; }
.eyebrow { color: var(--j-muted); font-size: 11px; font-weight: 750; letter-spacing: .11em; }
.overview-posture h2 { color: var(--j-ink-strong); font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.overview-posture-copy > p:last-child { max-width: 720px; margin-top: 4px; color: var(--j-muted); font-size: 13px; }
.overview-posture-badge { padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.overview-context { gap: 0; border-left: 1px solid var(--j-border); }
.overview-context > div { min-width: 112px; padding: 2px 14px; }
.overview-context dt { color: var(--j-muted); font-size: 11px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.overview-context dd { margin-top: 3px; color: var(--j-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

.overview-metrics,
.summary-grid { gap: 10px; margin-bottom: 14px; }
.overview-metric,
.summary-card {
  min-height: 116px;
  padding: 14px 15px;
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: none;
}
.overview-metric::before,
.summary-card::before { width: 3px; border-radius: 3px 0 0 3px; }
.metric-status { color: var(--j-muted); font-size: 11px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.metric-label { margin-top: 7px; color: var(--j-ink); font-size: 12px; font-weight: 650; }
.metric-value,
.summary-card strong { color: var(--j-ink-strong); font-size: 27px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.metric-sub,
.summary-card span { color: var(--j-muted); font-size: 12px; }

.overview-columns { gap: 14px; }
.data-panel,
.carrier-fleet-panel,
.topology-panel {
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: none;
}
.panel-heading { min-height: 64px; padding: 15px 17px 12px; border-bottom: 1px solid var(--j-border); }
.panel-heading h2 { color: var(--j-ink-strong); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.panel-heading p:not(.eyebrow) { color: var(--j-muted); font-size: 12px; }
.status-message { margin: 0; padding: 10px 17px; color: var(--j-muted); background: var(--j-surface-subtle); font-size: 12px; }
.alarm-flow-summary,
.dispatch-flow-summary { margin: 0 17px; padding: 11px 0; border-bottom: 1px solid var(--j-border); }
.alert-feed,
.timeline { padding: 4px 10px 10px; }
.alert-feed li,
.timeline li { border-right: 0; border-left: 0; border-radius: 0; transition: background-color 160ms ease-out; }
.alert-feed li:hover,
.timeline li:hover { border-right-color: transparent; border-left-color: transparent; background: var(--j-surface-subtle); }
.overview-alarm,
.dispatch-activity {
  border-left: 0 !important;
  border-radius: 0;
}
.overview-alarm-row,
.dispatch-activity-row { padding-left: 18px; border-radius: 0; }

/* Dense data surfaces */

.table-wrap { border: 0; border-radius: 0 0 var(--j-radius-card) var(--j-radius-card); }
table { color: var(--j-ink); font-size: 12px; }
thead th {
  padding: 10px 13px;
  border-bottom: 1px solid var(--j-border-strong);
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .085em;
  text-transform: uppercase;
}
tbody td { padding: 11px 13px; border-bottom: 1px solid var(--j-border); }
tbody tr { transition: background-color 160ms ease-out; }
tbody tr:hover { background: var(--j-surface-subtle); }
tbody tr:last-child td { border-bottom: 0; }
.pill { border-radius: 999px; font-size: 11px; font-weight: 700; }
.segmented { padding: 3px; border: 1px solid var(--j-border); border-radius: 9px; background: var(--j-surface-subtle); }
.segmented button { border-radius: 6px; color: var(--j-muted); font-size: 12px; }
.segmented button.active { color: var(--j-primary-hover); background: #fff; box-shadow: 0 1px 3px rgba(41, 37, 36, .09); }

.topology-toolbar,
.health-toolbar { border-color: var(--j-border); background: var(--j-surface); }
.topology-search input { padding-left: 37px; }
.topology-site-group,
.topology-node { border-color: var(--j-border); border-radius: 9px; box-shadow: none; }
.topology-node:hover { border-color: var(--color-stone-400, #a8a29e); background: var(--j-surface-subtle); }
.carrier-fleet-summary { border-color: var(--j-border); border-radius: 9px; background: var(--j-surface-subtle); }

/* Dialogs */

dialog,
.site-dialog,
.site-management-dialog,
.dispatch-detail-dialog,
.account-dialog {
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius-dialog);
  background: #fff;
  box-shadow: var(--j-shadow-dialog);
}
dialog::backdrop { background: rgba(28, 25, 23, .48); backdrop-filter: blur(3px); }
.dialog-heading,
.site-dialog-header { border-bottom: 1px solid var(--j-border); background: #fff; }
.dialog-heading h2,
.site-dialog-header h2 { color: var(--j-ink-strong); font-size: 22px; font-weight: 720; letter-spacing: -.025em; }
.dialog-close-button,
.dispatch-detail-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--j-border);
  border-radius: 9px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.dialog-close-button:hover,
.dispatch-detail-close:hover { border-color: var(--j-border-strong); color: var(--j-ink); background: #fff; transform: none; }
.dialog-close-button svg,
.dispatch-detail-close svg { width: 17px; height: 17px; }
.site-dialog-body { background: #fff; }
.site-form-section + .site-form-section { border-color: var(--j-border); }
.site-section-number { color: var(--j-primary-hover); background: var(--j-primary-soft); }
.site-security-note,
.site-install-step { border-color: var(--color-preline-avocado-200, oklch(80.4% .035 120)); border-radius: 9px; background: var(--j-primary-soft); }
.site-dialog-actions { border-top: 1px solid var(--j-border); background: var(--j-surface-subtle); }
.site-management-summary { border-color: var(--j-border); border-radius: 9px; background: var(--j-surface-subtle); }
.site-danger-zone { border-color: #edcccc; border-radius: 10px; background: #fffafa; }

.dispatch-route-overview { border-color: var(--j-border); border-radius: 11px; background: var(--j-surface-subtle); }
.dispatch-route-endpoint strong { color: var(--j-ink-strong); }
.dispatch-routing-context { border-radius: 8px 10px 10px 8px; }
.dispatch-detail-section,
.dispatch-route-history,
.dispatch-technical { border-color: var(--j-border); border-radius: 10px; box-shadow: none; }

.portal-notice { border: 1px solid var(--j-border); border-radius: 10px; box-shadow: var(--j-shadow-menu); }

/* Sign-in: restrained internal-service presentation */

.auth-body {
  min-height: 100dvh;
  color: var(--j-ink);
  background:
    linear-gradient(90deg, rgba(41, 37, 36, .055) 1px, transparent 1px),
    linear-gradient(rgba(41, 37, 36, .055) 1px, transparent 1px),
    var(--color-stone-100, #f5f5f4);
  background-size: 42px 42px;
}
.auth-body::before { background: radial-gradient(circle at 28% 35%, color-mix(in srgb, var(--j-primary) 16%, transparent), transparent 33%); }
.auth-shell { width: min(960px, calc(100% - 40px)); min-height: 560px; border: 1px solid rgba(68, 64, 60, .16); border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(28, 25, 23, .16); }
.auth-context { padding: 48px; color: var(--color-stone-200, #e7e5e4); background: var(--color-stone-900, #1c1917); }
.auth-context::before { opacity: .35; }
.auth-brand-lockup {
  width: 100%;
  color: var(--j-ink-strong);
}
body.auth-body .auth-context .auth-brand-lockup {
  display: block;
  margin: 0;
  text-align: center;
}
.auth-brand-lockup .brand-wordmark {
  color: var(--j-ink-strong);
  font-size: 31px;
  text-transform: none;
}
.auth-brand-lockup .brand-subtitle { color: var(--j-muted); }
.auth-context-copy h1 { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -.035em; }
.auth-context-intro { max-width: 370px; color: var(--color-stone-300, #d6d3d1); font-size: 14px; }
.auth-panel { padding: 48px; background: #fff; }
.auth-card { width: min(100%, 360px); }
.auth-card-header h2 { color: var(--j-ink-strong); font-size: 27px; font-weight: 720; letter-spacing: -.03em; }
.auth-card-header > p:last-child { color: var(--j-muted); }
.auth-field > input,
.auth-password-control {
  min-height: 44px;
  border-color: var(--j-border-strong);
  color: var(--j-ink);
  background: var(--j-surface);
  box-shadow: none;
}
.auth-field > input:hover,
.auth-password-control:hover { border-color: var(--color-stone-400, #a8a29e); }
.auth-field > input:focus {
  border-color: var(--j-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 18%, transparent);
}
.auth-password-control:focus-within {
  border-color: var(--j-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 18%, transparent);
}
.auth-form .auth-password-toggle {
  min-height: 36px;
  border-color: transparent;
  color: var(--j-ink);
  background: var(--j-surface-active);
  box-shadow: none;
}
.auth-form .auth-password-toggle:hover { color: var(--j-primary-hover); background: var(--j-primary-soft); box-shadow: none; transform: none; }
.auth-form .auth-password-toggle:focus-visible { outline-color: var(--j-focus); }
.auth-form .auth-submit {
  min-height: 44px;
  border-color: var(--j-primary);
  background: var(--j-primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--j-primary) 20%, transparent);
}
.auth-form .auth-submit:hover {
  border-color: var(--j-primary-hover);
  background: var(--j-primary-hover);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--j-primary) 24%, transparent);
}
.auth-form .auth-submit:active { background: var(--j-primary-hover); box-shadow: none; }
.auth-form .auth-submit:disabled { border-color: var(--color-stone-400, #a8a29e); background: var(--color-stone-400, #a8a29e); }
.auth-form .auth-submit:focus-visible { outline-color: color-mix(in srgb, var(--j-focus) 32%, transparent); }
.auth-password-toggle { font-weight: 650; }
.auth-access-note { color: var(--j-muted); }
.auth-error { border: 1px solid #e9c4c4; border-radius: 9px; color: #873333; background: var(--j-critical-soft); }

/* Composite primary actions that also carry a legacy secondary-button class. */
.refresh-button.form-submit {
  border-color: var(--j-primary);
  color: #fff;
  background: var(--j-primary);
}
.refresh-button.form-submit:hover {
  border-color: var(--j-primary-hover);
  color: #fff;
  background: var(--j-primary-hover);
}

/* Preline component migration
 * These primitives replace the geometry and hierarchy inherited from the
 * legacy portal stylesheet. Existing IDs and native controls stay intact.
 */

.ui-app-shell {
  background: var(--j-canvas);
}

.ui-sidebar {
  padding: 16px 12px 12px;
  border-right: 1px solid var(--j-border);
  color: var(--j-ink);
  background: var(--j-surface);
}

.ui-sidebar .brand {
  min-height: 66px;
  margin: 0 4px 16px;
  padding: 5px 8px 16px;
  border-bottom-color: var(--j-border);
}

.ui-sidebar .brand-name { color: var(--j-ink-strong); }
.ui-sidebar .brand-wordmark { font-size: 31px; }
.ui-sidebar .brand-name strong { color: var(--j-primary); }
.ui-sidebar .brand-wordmark .brand-wordmark-dn { color: inherit; }
.ui-sidebar .brand-subtitle { color: var(--j-muted); font-size: 11px; }
.ui-sidebar .sidebar-nav > p { color: var(--j-muted-soft); }

.ui-sidebar .nav-item {
  min-height: 40px;
  color: var(--j-muted);
  font-weight: 600;
}
.ui-sidebar .nav-item:hover {
  color: var(--j-ink-strong);
  background: var(--j-surface-active);
}
.ui-sidebar .nav-item:disabled,
.ui-sidebar .nav-item:disabled:hover {
  cursor: not-allowed;
  opacity: .48;
  color: var(--j-muted-soft);
  background: transparent;
}
.ui-sidebar .nav-item:disabled .nav-icon { color: inherit; }
.ui-sidebar .nav-item.active {
  color: var(--color-preline-avocado-800, oklch(35.4% .055 120));
  background: var(--j-primary-soft);
}
.ui-sidebar .nav-icon { color: var(--j-muted-soft); }
.ui-sidebar .nav-item.active .nav-icon { color: var(--j-primary-hover); }

.ui-sidebar .user-chip {
  padding-top: 13px;
  border-top-color: var(--j-border);
}
.ui-sidebar .user-profile-link:hover .user-copy strong { color: var(--j-primary-hover); }
.ui-sidebar .user-profile-link:focus-visible { outline-color: var(--j-primary-hover); }
.ui-sidebar .user-copy strong { color: var(--j-ink-strong); }
.ui-sidebar .user-copy small { color: var(--j-muted-soft); }
.ui-sidebar .sign-out { color: var(--j-muted); }
.ui-sidebar .sign-out:hover { color: var(--j-critical); background: var(--j-critical-soft); }
.ui-sidebar .sign-out img { filter: none; opacity: .58; }

.ui-workspace { background: var(--j-canvas); }

.page-header.ui-topbar {
  min-height: 76px;
  gap: 18px;
  padding: 14px 24px;
  border-bottom-color: var(--j-border);
  background: color-mix(in srgb, var(--j-canvas) 92%, transparent);
  box-shadow: none;
}
.ui-topbar .page-heading h1 { font-size: 24px; font-weight: 700; }
.ui-topbar .page-subtitle { color: var(--j-muted); }
.ui-toolbar { gap: 8px; }

.ui-segmented-control {
  min-height: 40px;
  gap: 1px;
  padding: 3px;
  border-color: var(--j-border);
  border-radius: var(--j-radius-control);
  background: var(--j-surface);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.ui-segmented-control button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  color: var(--j-muted);
  background: transparent;
  box-shadow: none;
}
.ui-segmented-control button:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.ui-segmented-control button.active {
  color: var(--color-preline-avocado-800, oklch(35.4% .055 120));
  background: var(--j-primary-soft);
  box-shadow: none;
}

.ui-site-picker > summary {
  min-height: 40px;
  border-color: var(--j-border);
  border-radius: var(--j-radius-control);
  background: var(--j-surface);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.ui-site-picker[open] > summary {
  border-color: var(--color-preline-avocado-400, oklch(64.6% .075 120));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 14%, transparent);
}
.ui-site-picker .scope-selector-count {
  border-radius: 999px;
  color: var(--color-preline-avocado-800, oklch(35.4% .055 120));
  background: var(--j-primary-soft);
}
.ui-site-picker .scope-menu {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--j-shadow-menu);
}

.page-body {
  max-width: 1600px;
  gap: 18px;
  padding: 26px 28px 44px;
}
.read-model-view { gap: 18px; }

.overview-posture.ui-status-card {
  position: relative;
  min-height: 116px;
  gap: 22px;
  margin-bottom: 0;
  padding: 20px;
  overflow: visible;
  border: 1px solid var(--j-border);
  border-left-width: 1px;
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.overview-posture.ui-status-card::before {
  position: absolute;
  top: 25px;
  left: 21px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--j-muted-soft);
  box-shadow: 0 0 0 4px var(--j-surface-active);
  content: "";
}
.overview-posture.ui-status-card[data-tone="good"]::before,
.overview-posture.ui-status-card[data-tone="healthy"]::before { background: var(--j-healthy); box-shadow: 0 0 0 4px var(--j-healthy-soft); }
.overview-posture.ui-status-card[data-tone="warn"]::before,
.overview-posture.ui-status-card[data-tone="warning"]::before { background: var(--j-warning); box-shadow: 0 0 0 4px var(--j-warning-soft); }
.overview-posture.ui-status-card[data-tone="bad"]::before,
.overview-posture.ui-status-card[data-tone="critical"]::before { background: var(--j-critical); box-shadow: 0 0 0 4px var(--j-critical-soft); }
.overview-posture.ui-status-card[data-tone] { border-left-color: var(--j-border); }
.ui-status-card .overview-posture-copy { min-width: 0; padding-left: 23px; }
.ui-status-card .overview-posture-kicker { margin-bottom: 4px; }
.ui-status-card .overview-posture-badge {
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--j-border);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.ui-status-card h2 { font-size: 16px; }
.ui-status-card .overview-context {
  flex: 0 1 470px;
  overflow: hidden;
  border: 1px solid var(--j-border);
  border-radius: 11px;
  background: var(--j-surface-subtle);
}
.ui-status-card .overview-context > div { padding: 11px 14px; }

.overview-metrics.ui-stat-grid,
.overview-metrics,
.summary-grid {
  gap: 14px;
  margin-bottom: 0;
}
.overview-metric,
.summary-card {
  min-height: 142px;
  padding: 18px;
  border: 1px solid var(--j-border);
  border-top-color: var(--j-border) !important;
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.summary-card::before,
.summary-card::after { display: none; }
.overview-metric-action {
  grid-template-areas:
    "label status"
    "value value"
    "sub sub"
    "action action";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
}
.overview-metric-action .metric-label { grid-area: label; }
.overview-metric-action .metric-status { grid-area: status; }
.overview-metric-action .metric-value { grid-area: value; }
.overview-metric-action .metric-sub { grid-area: sub; }
.overview-metric-action .metric-action-label { grid-area: action; }
.overview-metric-action:hover {
  border-color: var(--j-border-strong);
  box-shadow: 0 8px 22px rgba(28, 25, 23, .07);
}
.metric-label {
  margin: 0;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 600;
}
.metric-status {
  min-height: 22px;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.metric-value,
.summary-card strong {
  align-self: end;
  margin-top: 10px;
  color: var(--j-ink-strong);
  font-size: 32px;
  font-weight: 700;
}
.metric-sub { margin-top: 7px; color: var(--j-muted); font-size: 11px; }
.metric-action-label {
  margin-top: 10px;
  color: var(--j-primary-hover);
  font-size: 11px;
  font-weight: 650;
}
.metric-action-label::after { margin-left: 4px; content: "→"; }

.data-panel,
.ui-panel,
.carrier-fleet-panel,
.topology-panel {
  overflow: hidden;
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius-card);
  background: var(--j-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.panel-heading {
  min-height: 70px;
  align-items: center;
  padding: 17px 18px;
  border-bottom: 1px solid var(--j-border);
  background: var(--j-surface);
}
.panel-heading h2 { font-size: 16px; }
.panel-heading .eyebrow { margin-bottom: 3px; }
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--j-border);
  border-radius: 9px;
  color: var(--j-ink);
  background: var(--j-surface);
}
.panel-link:hover { border-color: var(--j-border-strong); color: var(--j-primary-hover); background: var(--j-surface-subtle); }
.panel-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.status-message {
  min-height: 40px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.alarm-flow-summary,
.dispatch-flow-summary { margin-inline: 16px; padding-block: 10px; }
.alert-feed,
.timeline { padding: 2px 8px 8px; }

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 0;
}
table { min-width: 760px; }
thead th {
  padding: 9px 12px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
tbody td { padding: 11px 12px; }
tbody tr:hover { background: var(--j-surface-subtle); }

.filter {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.filter select,
.field select,
.field input,
.field textarea {
  min-height: 40px;
  border: 1px solid var(--j-border-strong);
  border-radius: var(--j-radius-control);
  color: var(--j-ink-strong);
  background-color: var(--j-surface);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.filter select {
  min-width: 104px;
  padding: 7px 32px 7px 10px;
  font-size: 12px;
  font-weight: 600;
}
.filter select:hover,
.field select:hover,
.field input:hover,
.field textarea:hover { border-color: var(--color-stone-400, #a8a29e); }
.filter select:focus,
.field select:focus,
.field input:focus,
.field textarea:focus {
  border-color: var(--color-preline-avocado-500, oklch(53.2% .066 120));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 14%, transparent);
}

.refresh-button,
.secondary-button,
.topology-tool-button {
  min-height: 38px;
  border-radius: var(--j-radius-control);
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.refresh-button {
  border-color: var(--j-primary);
  color: #fff;
  background: var(--j-primary);
}
.refresh-button:hover {
  border-color: var(--j-primary-hover);
  color: #fff;
  background: var(--j-primary-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--j-primary) 18%, transparent);
}
.secondary-button,
.topology-tool-button {
  border-color: var(--j-border-strong);
  color: var(--j-ink);
  background: var(--j-surface);
}
.secondary-button:hover,
.topology-tool-button:hover {
  border-color: var(--color-stone-400, #a8a29e);
  color: var(--j-ink-strong);
  background: var(--j-surface-subtle);
}
.refresh-button:active,
.secondary-button:active,
.topology-tool-button:active { box-shadow: none; }
.refresh-button:disabled,
.secondary-button:disabled,
.topology-tool-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }

.segmented {
  gap: 1px;
  padding: 3px;
  border-color: var(--j-border);
  border-radius: var(--j-radius-control);
  background: var(--j-surface);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.segmented button {
  min-height: 32px;
  border-radius: 6px;
  color: var(--j-muted);
  background: transparent;
}
.segmented button:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.segmented button.active {
  color: var(--color-preline-avocado-800, oklch(35.4% .055 120));
  background: var(--j-primary-soft);
}

.pill {
  min-height: 22px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.pill.delivered,
.pill.online,
.pill.resolved,
.pill.completed,
.pill.success { border-color: color-mix(in srgb, var(--j-healthy) 18%, transparent); }
.pill.faulty,
.pill.offline,
.pill.active,
.pill.class-3,
.pill.failed,
.pill.failure,
.pill.denied,
.pill.stalled { border-color: color-mix(in srgb, var(--j-critical) 18%, transparent); }
.pill.class-1,
.pill.class-2,
.pill.class-4,
.pill.canceled,
.pill.purged,
.pill.stale,
.pill.in_flight,
.pill.queued,
.pill.running,
.pill.pending,
.pill.processing,
.pill.retry { border-color: color-mix(in srgb, var(--j-warning) 18%, transparent); }

.field-label,
.auth-field label {
  color: var(--j-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

dialog,
.site-dialog,
.site-management-dialog,
.dispatch-detail-dialog,
.account-dialog {
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(28, 25, 23, .2);
}
.dialog-heading,
.site-dialog-header {
  min-height: 72px;
  padding: 16px 18px;
}
.dialog-heading h2,
.site-dialog-header h2 { font-size: 20px; }
.dialog-close-button,
.dispatch-detail-close {
  border-radius: 8px;
  background: var(--j-surface);
}

dialog::backdrop {
  background: rgba(28, 25, 23, .48);
  backdrop-filter: blur(2px);
}

/* Dark Olive / Stone theme
 * The diagonal line texture belongs only to the application canvas. Data
 * surfaces remain opaque so the pattern never competes with operational text.
 */

::selection { color: var(--j-ink-strong); background: #465029; }

.app-shell,
.ui-app-shell { background: var(--j-canvas); }

.main,
.ui-workspace {
  background-color: var(--j-canvas);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(214, 211, 209, .026) 0,
    rgba(214, 211, 209, .026) 1px,
    transparent 1px,
    transparent 18px
  );
  background-attachment: fixed;
}

.sidebar,
.ui-sidebar { background: #141512; }

.page-header,
.page-header.ui-topbar {
  background: rgba(16, 17, 14, .91);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015);
}

.time-range-presets,
.ui-segmented-control,
.segmented { background: var(--j-surface); }
.time-range-presets button:hover,
.ui-segmented-control button:hover,
.segmented button:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.time-range-presets button.active,
.ui-segmented-control button.active,
.segmented button.active {
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
  box-shadow: none;
}

.scope-selector > summary,
.ui-site-picker > summary,
.scope-menu,
.custom-time-range,
.scope-all-button,
.scope-manage-button,
.secondary-button,
.topology-tool-button,
.panel-link,
.icon-button,
.site-dialog-actions button[type="button"] {
  color: var(--j-ink);
  background: var(--j-surface);
}
.scope-selector > summary:hover,
.scope-all-button:hover,
.scope-manage-button:hover,
.secondary-button:hover,
.topology-tool-button:hover,
.panel-link:hover,
.icon-button:hover,
.site-dialog-actions button[type="button"]:hover {
  border-color: var(--j-border-strong);
  color: var(--j-ink-strong);
  background: var(--j-surface-active);
}
.scope-selector-count,
.ui-site-picker .scope-selector-count { color: var(--j-primary-hover); background: var(--j-primary-soft); }

.scope-add-button,
.scope-connect-button,
.form-submit,
.auth-submit,
.copy-command-button,
.refresh-button,
.refresh-button.form-submit,
.site-dialog-actions button[type="submit"] {
  border-color: var(--j-primary-solid);
  color: var(--j-on-primary);
  background: var(--j-primary-solid);
}
.scope-add-button:hover,
.scope-connect-button:hover,
.form-submit:hover,
.auth-submit:hover,
.copy-command-button:hover,
.refresh-button:hover,
.refresh-button.form-submit:hover,
.site-dialog-actions button[type="submit"]:hover {
  border-color: var(--j-primary-solid-hover);
  color: var(--j-on-primary);
  background: var(--j-primary-solid-hover);
}

input,
select,
textarea,
.filter select,
.field select,
.field input,
.field textarea,
.site-dialog input[type="text"],
.site-dialog select,
.site-management-dialog input[type="text"],
.auth-field > input,
.auth-password-control {
  border-color: var(--j-control-border);
  color: var(--j-ink-strong);
  background: var(--j-surface);
}
input::placeholder,
textarea::placeholder { color: var(--j-muted-soft); opacity: 1; }
input:hover,
select:hover,
textarea:hover,
.filter select:hover,
.field select:hover,
.field input:hover,
.field textarea:hover { border-color: #626358; }

.ui-sidebar .nav-item.active {
  color: var(--j-ink-strong);
  background: var(--j-primary-soft);
}
.ui-sidebar .nav-item.active .nav-icon,
.ui-sidebar .brand-name strong,
.metric-action-label { color: var(--j-primary-hover); }
.ui-sidebar .sign-out img { filter: invert(88%) sepia(3%) saturate(252%) hue-rotate(345deg); opacity: .7; }

/* ID-level legacy selectors in app.css must not reintroduce light-theme text. */
#siteSelectionLabel { color: var(--j-ink-strong); }
#overviewPostureSummary {
  color: var(--j-muted);
  font-size: 13px;
}
.scope-all-button.active {
  border-color: var(--j-primary);
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
}

.overview-posture[data-tone="healthy"],
.overview-posture[data-tone="good"],
.overview-posture[data-tone="warning"],
.overview-posture[data-tone="warn"],
.overview-posture[data-tone="critical"],
.overview-posture[data-tone="bad"] { background: var(--j-surface); }

.overview-metric,
.summary-card,
.data-panel,
.ui-panel,
.carrier-fleet-panel,
.topology-panel,
.overview-posture.ui-status-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018), 0 12px 30px rgba(0, 0, 0, .07);
}
.overview-metric-action:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }

/* Status glow stays inside each overview card and follows its semantic tone. */
.overview-metric {
  --metric-glow: var(--j-muted-soft);
  --metric-glow-opacity: .07;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      90% 76% at 50% 112%,
      color-mix(in srgb, var(--metric-glow) 19%, transparent) 0%,
      color-mix(in srgb, var(--metric-glow) 7%, transparent) 45%,
      transparent 74%
    ),
    var(--j-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .018),
    inset 0 -36px 58px -46px color-mix(in srgb, var(--metric-glow) 54%, transparent),
    0 12px 30px rgba(0, 0, 0, .07);
}
.overview-metric::after {
  position: absolute;
  inset: auto 14% -42px;
  z-index: 0;
  display: block;
  height: 82px;
  border-radius: 50%;
  background: var(--metric-glow);
  filter: blur(34px);
  opacity: var(--metric-glow-opacity);
  pointer-events: none;
  content: "";
  transition: opacity 180ms ease-out;
}
.overview-metric > * { position: relative; z-index: 1; }
.overview-metric.metric-good {
  --metric-glow: var(--j-healthy);
  --metric-glow-opacity: .24;
  border-color: color-mix(in srgb, var(--j-healthy) 26%, var(--j-border));
}
.overview-metric.metric-info {
  --metric-glow: var(--j-info);
  --metric-glow-opacity: .21;
  border-color: color-mix(in srgb, var(--j-info) 24%, var(--j-border));
}
.overview-metric.metric-warn {
  --metric-glow: var(--j-warning);
  --metric-glow-opacity: .21;
  border-color: color-mix(in srgb, var(--j-warning) 27%, var(--j-border));
}
.overview-metric.metric-bad {
  --metric-glow: var(--j-critical);
  --metric-glow-opacity: .26;
  border-color: color-mix(in srgb, var(--j-critical) 29%, var(--j-border));
}
.overview-metric-action:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    inset 0 -38px 64px -44px color-mix(in srgb, var(--metric-glow) 64%, transparent),
    0 12px 30px rgba(0, 0, 0, .22);
}
.overview-metric-action:hover::after { opacity: min(1, calc(var(--metric-glow-opacity) + .07)); }

.pill.delivered,
.pill.online,
.pill.resolved,
.pill.completed,
.pill.success { color: var(--j-healthy); background: var(--j-healthy-soft); }
.pill.faulty,
.pill.offline,
.pill.active,
.pill.class-3,
.pill.failed,
.pill.failure,
.pill.denied,
.pill.disabled,
.pill.stalled { color: var(--j-critical); background: var(--j-critical-soft); }
.pill.class-1,
.pill.class-2,
.pill.class-4,
.pill.canceled,
.pill.purged,
.pill.stale,
.pill.in_flight,
.pill.queued,
.pill.running,
.pill.pending,
.pill.processing,
.pill.retry { color: var(--j-warning); background: var(--j-warning-soft); }
.pill.owner,
.pill.admin,
.pill.operator { color: var(--j-primary-hover); background: var(--j-primary-soft); }
.pill.viewer,
.pill.you,
.pill.unknown,
.pill.ready { color: var(--j-muted); background: var(--j-surface-active); }

.site-agent-update-notice {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 34px;
  border: 1px solid color-mix(in srgb, var(--j-warning) 26%, var(--j-border));
  border-radius: var(--j-radius-control);
  color: var(--j-ink);
  background: color-mix(in srgb, var(--j-warning-soft) 58%, var(--j-surface));
  font-size: 12px;
  line-height: 1.45;
}
.site-agent-update-notice::before {
  position: absolute;
  top: 10px;
  left: 12px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--j-warning) 70%, transparent);
  border-radius: 50%;
  color: var(--j-warning);
  content: "!";
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

dialog,
.site-dialog,
.site-management-dialog,
.dispatch-detail-dialog,
.account-dialog,
.dialog-heading,
.site-dialog-header,
.site-dialog-body,
.auth-shell,
.auth-panel { background: var(--j-surface); }
.dialog-close-button:hover,
.dispatch-detail-close:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.site-security-note,
.site-install-step { border-color: #46502e; }
.site-danger-zone { border-color: #673535; background: #291919; }
.site-management-dialog .site-danger-heading .eyebrow {
  color: color-mix(in srgb, var(--j-critical) 82%, var(--j-ink));
}
.site-management-dialog .site-delete-confirmation {
  gap: 16px;
  padding: 18px;
  border-top-color: color-mix(in srgb, var(--j-critical) 30%, var(--j-border));
  color: var(--j-ink);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--j-critical-soft) 34%, var(--j-surface)) 0%,
      color-mix(in srgb, var(--j-critical-soft) 18%, var(--j-surface)) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.site-management-dialog .site-delete-confirmation[hidden] { display: none; }
.site-management-dialog .site-delete-confirmation > p {
  color: var(--j-muted);
  font-size: 13px;
}
.site-management-dialog .site-delete-confirmation .field-label {
  color: var(--j-ink);
}
.site-management-dialog .site-delete-confirmation .field input {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--j-critical) 24%, var(--j-control-border));
  color: var(--j-ink-strong);
  background: var(--j-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.site-management-dialog .site-delete-confirmation .field input:hover {
  border-color: color-mix(in srgb, var(--j-critical) 42%, var(--j-control-border));
}
.site-management-dialog .site-delete-confirmation .field input:focus {
  border-color: var(--j-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 14%, transparent);
}
.site-management-dialog .delete-tenant-option {
  border-color: color-mix(in srgb, var(--j-critical) 24%, var(--j-border));
  color: var(--j-ink);
  background: color-mix(in srgb, var(--j-critical-soft) 45%, var(--j-surface-subtle));
}
.site-management-dialog .site-delete-actions {
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--j-critical) 18%, var(--j-border));
}
.site-management-dialog .site-delete-actions button { min-height: 44px; }
.site-management-dialog .danger-button-solid {
  border-color: var(--j-critical);
  color: #241414;
  background: var(--j-critical);
}
.site-management-dialog .danger-button-solid:hover {
  border-color: #ff9d9d;
  background: #ff9d9d;
}
.site-management-dialog .danger-button-solid:disabled {
  border-color: color-mix(in srgb, var(--j-critical) 34%, var(--j-border));
  color: var(--j-muted);
  background: color-mix(in srgb, var(--j-critical-soft) 56%, var(--j-surface-active));
}
.auth-error { border-color: #673535; color: var(--j-critical); background: var(--j-critical-soft); }
dialog::backdrop { background: rgba(5, 5, 4, .72); }

.auth-body {
  color: var(--j-ink);
  background:
    repeating-linear-gradient(135deg, rgba(214, 211, 209, .025) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 28% 35%, rgba(154, 164, 91, .1), transparent 32%),
    var(--j-canvas);
}
.auth-body::before { opacity: .45; }
.auth-shell { border-color: var(--j-border); box-shadow: var(--j-shadow-dialog); }
.auth-context { border-right: 1px solid var(--j-border); background: #11120f; }
.auth-form .auth-submit {
  border-color: var(--j-primary-solid);
  background: var(--j-primary-solid);
  box-shadow: 0 10px 24px rgba(101, 112, 58, .24);
}
.auth-form .auth-submit:hover {
  border-color: var(--j-primary-solid-hover);
  background: var(--j-primary-solid-hover);
  box-shadow: 0 12px 28px rgba(101, 112, 58, .3);
}
.auth-remember {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: fit-content;
  color: var(--j-ink);
  cursor: pointer;
}
.auth-remember input[type="checkbox"] { margin-top: 2px; }
.auth-remember span { display: grid; gap: 2px; }
.auth-remember strong {
  color: var(--j-ink-strong);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.auth-remember small {
  color: var(--j-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

/* Legacy data components normalized to the dark semantic surfaces. */
.metric-status,
.overview-posture-badge {
  border-color: var(--j-border);
  color: var(--j-muted);
  background: var(--j-surface-active);
}
.metric-good .metric-status,
.overview-posture[data-tone="good"] .overview-posture-badge {
  border-color: #285743;
  color: var(--j-healthy);
  background: var(--j-healthy-soft);
}
.metric-warn .metric-status,
.overview-posture[data-tone="warn"] .overview-posture-badge {
  border-color: #664823;
  color: var(--j-warning);
  background: var(--j-warning-soft);
}
.metric-bad .metric-status,
.overview-posture[data-tone="bad"] .overview-posture-badge {
  border-color: #693737;
  color: var(--j-critical);
  background: var(--j-critical-soft);
}

.alarm-flow-summary,
.dispatch-flow-summary {
  margin-inline: 0;
  padding-block: 10px;
  border-color: var(--j-border);
  background: var(--j-surface-subtle);
}
.alarm-flow-summary > div,
.dispatch-flow-summary > div { border-color: var(--j-border); }
.ui-status-card .overview-context > div { border-color: var(--j-border); }
.alarm-flow-summary > div::before,
.dispatch-flow-summary > div::before { background: var(--j-border-strong); }
.alarm-flow-summary dt,
.dispatch-flow-summary dt {
  color: var(--j-muted);
  font-size: 11px;
}
.alarm-flow-summary dd,
.dispatch-flow-summary dd { color: var(--j-ink-strong); }
.alarm-flow-summary > div[data-tone="info"]::before { background: var(--j-info); }

.metric-sub,
.metric-action-label,
.panel-description,
.alarm-activity-age,
.alarm-activity-meta,
.timeline-time,
.timeline-target,
.dispatch-activity-time,
.dispatch-activity-meta { font-size: 12px; }
.alarm-site,
.dispatch-site,
.alarm-activity-target small,
.dispatch-route-node small { font-size: 11px; }

/* Keep the two Overview activity panels on the same compact rhythm. */
.overview-columns > .data-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.overview-columns .alert-feed,
.overview-columns .timeline {
  min-height: 96px;
  flex: 1;
  padding: 0;
}
#overviewAlarmFeed > .status-message,
.dispatch-activity-empty {
  display: grid;
  min-height: 96px;
  margin: 0;
  padding: 22px 18px;
  place-items: center;
  border: 0;
  color: var(--j-muted);
  background: transparent;
  line-height: 1.5;
  text-align: center;
}

.overview-alarm,
.timeline-item,
.dispatch-activity { border-color: var(--j-border); }
.overview-alarm-row:hover,
.timeline-row:hover,
.dispatch-activity-row:hover { background: var(--j-surface-active); }
.overview-alarm-row:focus-visible,
.timeline-row:focus-visible,
.dispatch-activity-row:focus-visible { background: var(--j-primary-soft); }
.overview-alarm-title,
.alarm-reference,
.timeline-actor,
.dispatch-reference,
.alarm-activity-target strong,
.dispatch-route-node strong { color: var(--j-ink-strong); }
.overview-alarm-meta,
.overview-alarm-age,
.alarm-activity-age,
.alarm-activity-meta,
.timeline-time,
.timeline-target,
.dispatch-activity-time,
.dispatch-activity-meta,
.dispatch-activity-empty { color: var(--j-muted); }
.alarm-site,
.dispatch-site { color: var(--j-primary-hover); background: var(--j-primary-soft); }
.alarm-activity-target,
.dispatch-route-node {
  border-color: var(--j-border);
  background: var(--j-surface-subtle);
}
.alarm-activity-target small,
.dispatch-route-node small { color: var(--j-muted-soft); }
.dispatch-route-arrow {
  border-color: var(--j-border-strong);
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
}
.dispatch-flag,
.alarm-activity-flag { color: var(--j-ink); }
.dispatch-flag-warn,
.alarm-activity-flag-warn { color: var(--j-warning); }

.topology-toolbar,
.topology-legend,
.topology-tree,
.topology-site-group,
.topology-site-group > summary,
.topology-node,
.topology-site-version,
.topology-search,
.carrier-fleet-summary,
.carrier-fleet-empty,
.site-agent-update,
.site-agent-update-facts div,
.site-agent-update-policy label,
.history-import-panel,
.site-management-summary,
.site-lifecycle-action,
.tenant-mode-option,
.connect-now-option,
.delete-tenant-option,
.account-mode,
.account-access,
.report-choice {
  border-color: var(--j-border);
  color: var(--j-ink);
  background: var(--j-surface-subtle);
}
.topology-tree { background-image: linear-gradient(180deg, var(--j-surface), var(--j-surface-subtle)); }
.topology-site-group,
.topology-node,
.topology-search,
.topology-site-version,
.site-agent-update-facts div,
.site-agent-update-policy label { background: var(--j-surface); }
.topology-site-group > summary:hover,
.topology-branch > .topology-node:hover { border-color: var(--j-border-strong); background: var(--j-surface-active); }
.topology-site-summary-copy strong,
.topology-node-copy strong,
.site-agent-update-heading h3,
.site-agent-update-facts dd,
.site-agent-update-policy strong { color: var(--j-ink-strong); }
.topology-site-summary-copy small,
.topology-node-copy small,
.topology-legend,
.site-agent-update-heading p,
.site-agent-update-action p,
.site-agent-update-policy small { color: var(--j-muted); }
.topology-level::before,
.topology-level > li::before { background: var(--j-border); }
.topology-node-marker,
.topology-legend-dot { background: var(--j-primary); box-shadow: 0 0 0 3px var(--j-primary-soft); }
.topology-legend-dot-muted { background: var(--j-muted-soft); box-shadow: 0 0 0 3px var(--j-surface-active); }
.topology-kind { color: var(--j-primary-hover); background: var(--j-primary-soft); }
.topology-children { color: var(--j-muted); background: var(--j-surface-active); }
.topology-deleted { color: var(--j-warning); background: var(--j-warning-soft); }
.topology-node.is-deleted { border-color: var(--j-border); color: var(--j-muted); background: var(--j-surface-subtle); }

.health-group,
.health-zone,
.health-events,
.health-device-down { border-color: var(--j-border); background: var(--j-surface-subtle); }
.health-group summary:hover { background: var(--j-surface-active); }
.health-banner { border-color: #664823; color: var(--j-warning); background: var(--j-warning-soft); }

.integrity-panel { overflow: hidden; border-left: 3px solid var(--j-muted); }
.integrity-panel[data-status="healthy"] { border-left-color: var(--j-healthy); }
.integrity-panel[data-status="attention"] { border-left-color: var(--j-warning); }
.integrity-panel[data-status="critical"] { border-left-color: var(--j-critical); }
.integrity-heading { align-items: flex-start; gap: 20px; }
.integrity-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.integrity-title-row h2 { margin: 0; }
.integrity-status-badge,
.integrity-severity,
.protocol-tier {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--j-border);
  border-radius: 999px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.integrity-panel[data-status="healthy"] .integrity-status-badge,
.integrity-severity-info,
.protocol-tier-confirmed { color: var(--j-healthy); background: var(--j-healthy-soft); }
.integrity-panel[data-status="attention"] .integrity-status-badge,
.integrity-severity-warning,
.protocol-tier-binary { color: var(--j-warning); background: var(--j-warning-soft); }
.integrity-panel[data-status="critical"] .integrity-status-badge,
.integrity-severity-critical { color: var(--j-critical); background: var(--j-critical-soft); }
.protocol-tier-raw { color: var(--j-muted); background: var(--j-surface-active); }
.integrity-facts { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); margin: 0; border: 1px solid var(--j-border); border-radius: 9px; }
.integrity-facts > div { min-width: 74px; padding: 9px 12px; }
.integrity-facts > div + div { border-left: 1px solid var(--j-border); }
.integrity-facts dt { color: var(--j-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.integrity-facts dd { margin: 3px 0 0; color: var(--j-ink-strong); font-weight: 750; }
.integrity-findings { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--j-border); list-style: none; }
.integrity-findings li { display: grid; gap: 5px; padding: 12px 20px; }
.integrity-findings li + li { border-top: 1px solid var(--j-border); }
.integrity-findings li > div { display: flex; align-items: center; gap: 9px; }
.integrity-findings small { color: var(--j-muted); }
.integrity-empty { color: var(--j-muted); }

.dispatch-protocol-panel { overflow: hidden; border: 1px solid var(--j-border); border-radius: 10px; background: var(--j-surface-subtle); }
.dispatch-protocol-panel > summary { padding: 13px 16px; color: var(--j-ink-strong); font-weight: 700; cursor: pointer; }
.dispatch-protocol-panel[open] > summary { border-bottom: 1px solid var(--j-border); }
.dispatch-protocol-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; }
.dispatch-protocol-heading h3 { margin: 2px 0 4px; }
.dispatch-protocol-heading p:last-child { margin: 0; color: var(--j-muted); font-size: 11px; }
.dispatch-protocol-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dispatch-protocol-actions a { text-decoration: none; }
.dispatch-protocol-counts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 13px; }
.dispatch-protocol-table-wrap { max-height: 380px; overflow: auto; border-top: 1px solid var(--j-border); }
.dispatch-protocol-table-wrap table { min-width: 760px; }
.dispatch-protocol-table-wrap th { position: sticky; top: 0; z-index: 1; background: var(--j-surface); }
.dispatch-protocol-table-wrap tr[data-tier="RAW"] { color: var(--j-muted); }

@media (max-width: 700px) {
  .integrity-heading,
  .dispatch-protocol-heading { flex-direction: column; }
  .integrity-facts { width: 100%; }
  .dispatch-protocol-actions { width: 100%; }
  .dispatch-protocol-actions > * { min-height: 44px; flex: 1; }
}

/* System Health: separate confirmed downtime from degraded and unknown time. */

#healthView {
  --health-grid: minmax(220px, 1.45fr) minmax(178px, 1.1fr) 126px 112px 104px 84px 96px 112px;
}

.health-toolbar {
  align-items: flex-end;
  padding: 19px 20px;
}
.health-toolbar h2 { margin: 1px 0 2px; }
.health-toolbar .page-subtitle { max-width: 670px; }
.health-controls { flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.health-controls .filter {
  min-width: 142px;
  color: var(--j-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.health-controls .filter select {
  min-height: 40px;
  margin-left: 7px;
  border-color: var(--j-control-border);
  color: var(--j-ink-strong);
  background: var(--j-surface-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.health-affected-toggle {
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid var(--j-control-border);
  border-radius: 9px;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
  font-size: 12px;
  font-weight: 720;
}
.health-affected-toggle:hover { border-color: var(--j-primary); color: var(--j-ink-strong); }
.health-affected-toggle.active,
.health-affected-toggle[aria-pressed="true"] {
  border-color: #737d43;
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
}

.health-banner {
  margin: 0;
  border-radius: 10px;
  font-size: 12px;
}

.mfa-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--j-warning) 48%, var(--j-border));
  border-radius: var(--j-radius-card);
  color: var(--j-ink);
  background: color-mix(in srgb, var(--j-warning) 7%, var(--j-surface));
}
.mfa-reminder strong { color: var(--j-ink-strong); }
.mfa-reminder p { margin: 3px 0 0; color: var(--j-muted); font-size: 13px; }
.mfa-reminder-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.mfa-reminder-primary,
.mfa-reminder-dismiss { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 8px 13px; border-radius: var(--j-radius-control); font-size: 13px; font-weight: 750; text-decoration: none; }
.mfa-reminder-primary { border: 1px solid var(--j-primary-solid); color: var(--j-on-primary); background: var(--j-primary-solid); }
.mfa-reminder-primary:hover { background: var(--j-primary-solid-hover); }
.mfa-reminder-dismiss { color: var(--j-muted); }
.mfa-reminder-dismiss:hover { color: var(--j-ink-strong); background: var(--j-surface-subtle); }

@media (max-width: 620px) {
  .mfa-reminder { align-items: stretch; flex-direction: column; }
  .mfa-reminder-actions { align-items: stretch; flex-direction: column; }
  .mfa-reminder-primary,
  .mfa-reminder-dismiss { min-height: 44px; }
}

.health-posture {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 1.15fr) minmax(520px, 1.85fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 124px;
  padding: 0;
  isolation: isolate;
}
.health-posture::after {
  position: absolute;
  z-index: -1;
  top: -70px;
  left: -80px;
  width: 320px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--health-glow, rgba(146, 144, 135, .11)), transparent 68%);
  content: "";
  pointer-events: none;
}
.health-posture[data-status="healthy"] { --health-color: var(--j-healthy); --health-soft: var(--j-healthy-soft); --health-glow: rgba(94, 224, 166, .15); }
.health-posture[data-status="degraded"] { --health-color: var(--j-warning); --health-soft: var(--j-warning-soft); --health-glow: rgba(242, 179, 91, .16); }
.health-posture[data-status="unavailable"] { --health-color: var(--j-critical); --health-soft: var(--j-critical-soft); --health-glow: rgba(255, 137, 137, .17); }
.health-posture[data-status="unknown"] { --health-color: var(--j-muted); --health-soft: var(--j-surface-active); --health-glow: rgba(176, 173, 166, .11); }
.health-posture-copy {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 22px 22px 20px;
}
.health-state-marker {
  width: 9px;
  height: 9px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--health-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--health-color) 13%, transparent), 0 0 18px color-mix(in srgb, var(--health-color) 30%, transparent);
}
.health-posture-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.health-posture-title-row h2 {
  margin: 2px 0 0;
  color: var(--j-ink-strong);
  font-size: clamp(19px, 1.65vw, 24px);
  letter-spacing: -.025em;
}
.health-posture-copy > div > p:last-child {
  max-width: 580px;
  margin: 8px 0 0;
  color: var(--j-muted);
  font-size: 12px;
}
.health-state-badge,
.health-state-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--health-color, var(--j-muted)) 48%, transparent);
  border-radius: 7px;
  color: var(--health-color, var(--j-muted));
  background: color-mix(in srgb, var(--health-soft, var(--j-surface-active)) 82%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .065em;
  line-height: 1;
  text-transform: uppercase;
}
.health-state-healthy { --health-color: var(--j-healthy); --health-soft: var(--j-healthy-soft); }
.health-state-degraded { --health-color: var(--j-warning); --health-soft: var(--j-warning-soft); }
.health-state-unavailable { --health-color: var(--j-critical); --health-soft: var(--j-critical-soft); }
.health-state-unknown { --health-color: var(--j-muted); --health-soft: var(--j-surface-active); }
.health-posture-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(98px, 1fr));
  align-self: stretch;
  margin: 0;
  border-left: 1px solid var(--j-border);
}
.health-posture-facts > div {
  display: flex;
  min-width: 0;
  padding: 22px 14px 19px;
  border-left: 1px solid var(--j-border);
  flex-direction: column;
  justify-content: center;
}
.health-posture-facts > div:first-child { border-left: 0; }
.health-posture-facts dt {
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .085em;
}
.health-posture-facts dd {
  overflow: hidden;
  margin-top: 7px;
  color: var(--j-ink-strong);
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-timeline-panel { padding-bottom: 18px; }
.health-timeline-panel .panel-heading { padding-bottom: 8px; }
.health-timeline {
  display: flex;
  overflow: hidden;
  min-height: 22px;
  margin: 4px 20px 0;
  border: 1px solid var(--j-border-strong);
  border-radius: 6px;
  background: var(--j-surface-active);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .24);
}
.health-timeline > .status-message { width: 100%; margin: 0; padding: 7px 10px; }
.health-timeline-segment {
  display: block;
  min-width: 2px;
  transition: filter 150ms ease-out, opacity 150ms ease-out;
}
.health-timeline-segment:hover { z-index: 1; filter: brightness(1.25); }
.health-timeline-healthy { background: var(--j-healthy); }
.health-timeline-degraded { background: var(--j-warning); }
.health-timeline-unavailable { background: var(--j-critical); }
.health-timeline-unknown {
  background-color: #54564e;
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(222, 221, 215, .16) 5px 7px);
}
.health-timeline-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 19px;
  margin: 10px 20px 0;
  color: var(--j-muted);
  font-size: 10px;
}
.health-timeline-legend span { display: inline-flex; align-items: center; gap: 7px; }
.health-timeline-legend span::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--j-muted);
  content: "";
}
.health-timeline-legend [data-status="healthy"]::before { background: var(--j-healthy); }
.health-timeline-legend [data-status="degraded"]::before { background: var(--j-warning); }
.health-timeline-legend [data-status="unavailable"]::before { background: var(--j-critical); }
.health-timeline-legend [data-status="unknown"]::before { background: #72746b; }

.health-inventory-panel { overflow: hidden; }
.health-inventory-panel .panel-heading { padding-bottom: 7px; }
.health-inventory-panel .status-message { margin: 0; padding-top: 0; padding-bottom: 12px; }
.health-inventory-panel .status-message {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.health-status-error { color: var(--j-critical); }
.health-retry-button { min-height: 34px; padding: 5px 10px; }
.health-table-pane {
  overflow-x: auto;
  border-top: 1px solid var(--j-border);
  scrollbar-color: var(--j-border-strong) transparent;
}
.health-table-columns,
.health-table-row {
  display: grid;
  grid-template-columns: var(--health-grid);
  min-width: 1120px;
}
.health-table-columns {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid var(--j-border-strong);
  background: var(--j-surface-subtle);
}
.health-table-columns > span { min-width: 0; border-right: 1px solid var(--j-border); }
.health-table-columns > span:last-child { border-right: 0; }
.health-table-columns button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  border: 0;
  color: var(--j-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
}
.health-table-columns button:hover,
.health-table-columns button.active { color: var(--j-primary-hover); background: var(--j-surface-active); }
.health-table-columns button i { min-width: 10px; color: var(--j-primary-hover); font-style: normal; }
.health-table-row {
  position: relative;
  min-height: 57px;
  border-bottom: 1px solid var(--j-border);
  background: var(--j-surface);
  transition: background-color 150ms ease-out;
}
.health-table-row:last-child { border-bottom: 0; }
.health-table-row:hover { background: var(--j-surface-subtle); }
.health-table-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--health-row-color, transparent);
  content: "";
}
.health-row-unavailable { --health-row-color: var(--j-critical); }
.health-row-unknown { --health-row-color: var(--j-muted-soft); }
.health-table-row > [role="cell"] {
  display: flex;
  min-width: 0;
  padding: 10px 11px;
  border-right: 1px solid var(--j-border);
  color: var(--j-ink);
  font-size: 12px;
  flex-direction: column;
  justify-content: center;
}
.health-table-row > [role="cell"]:last-child { border-right: 0; }
.health-device-cell strong,
.health-scope-cell strong {
  overflow: hidden;
  color: var(--j-ink-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-device-cell small,
.health-scope-cell small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--j-muted-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-number-cell { font-variant-numeric: tabular-nums; }
.health-last-change {
  gap: 3px;
  color: var(--j-muted) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.health-last-change-time {
  overflow: hidden;
  color: var(--j-ink);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.health-last-change-age {
  overflow: hidden;
  color: var(--j-muted-soft);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.health-table-empty { min-width: 1120px; }
.health-table-empty-cell {
  display: flex;
  min-height: 114px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--j-muted);
  font-size: 12px;
}
.health-table-empty-cell button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--j-control-border);
  border-radius: 8px;
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
  font-weight: 720;
}
.health-row-loading span { margin: 13px 11px; padding: 0 !important; border: 0 !important; border-radius: 5px; background: var(--j-surface-active); animation: health-loading 1.5s ease-in-out infinite; }
.health-row-loading span:nth-child(2n) { animation-delay: 160ms; }
@keyframes health-loading { 50% { opacity: .42; } }

.health-incidents-panel { overflow: hidden; }
.health-events { gap: 0; padding: 0; background: transparent; }
.health-events > .status-message { margin: 0; padding: 18px 20px 21px; border-top: 1px solid var(--j-border); }
.health-event {
  border: 0;
  border-top: 1px solid var(--j-border);
  border-radius: 0;
  background: var(--j-surface);
}
.health-event summary { min-height: 53px; padding: 10px 20px; }
.health-event summary::marker { color: var(--j-primary); }
.health-event-open summary strong { color: var(--j-critical); }
.health-event-recovered summary strong { color: var(--j-ink-strong); }
.health-event-zone { border-top: 1px solid var(--j-border); background: var(--j-surface-subtle); }
.health-event-members { background: var(--j-surface-subtle); }

@media (max-width: 1180px) {
  .health-posture { grid-template-columns: 1fr; }
  .health-posture-facts { border-top: 1px solid var(--j-border); border-left: 0; }
}

@media (max-width: 900px) {
  .health-toolbar { align-items: stretch; flex-direction: column; }
  .health-controls { justify-content: flex-start; }
  .health-posture-facts { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .health-posture-facts > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--j-border); }
  .health-posture-facts > div:nth-child(5) { border-top: 1px solid var(--j-border); }
}

@media (max-width: 600px) {
  .health-controls { align-items: stretch; }
  .health-controls .segmented { width: 100%; }
  .health-controls .segmented button { flex: 1; }
  .health-controls .filter { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; width: 100%; }
  .health-controls .filter select { margin-left: 0; }
  .health-affected-toggle { width: 100%; }
  .health-posture-copy { padding: 18px 16px; }
  .health-posture-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-posture-facts > div { padding: 14px 13px; border-top: 1px solid var(--j-border); }
  .health-posture-facts > div:nth-child(odd) { border-left: 0; }
  .health-posture-facts > div:nth-child(even) { border-left: 1px solid var(--j-border); }
  .health-posture-facts > div:first-child,
  .health-posture-facts > div:nth-child(2) { border-top: 0; }
  .health-timeline { margin-inline: 16px; }
  .health-timeline-legend { margin-inline: 16px; }
  .health-event summary { align-items: flex-start; padding-inline: 16px; flex-direction: column; }
  .health-group-meta { margin-left: 0; }
  .health-table-columns button,
  .health-table-empty-cell button,
  .health-retry-button { min-height: 44px; }
}
.carrier-fleet-summary div { border-color: var(--j-border); }
.carrier-fleet-summary dt,
.carrier-fleet-table time { color: var(--j-muted); }
.carrier-fleet-summary dd { color: var(--j-ink-strong); }
.carrier-fleet-loading span { background: var(--j-surface-active); }
.carrier-in_transit { color: var(--j-info); background: var(--j-info-soft); }
.carrier-active { color: var(--j-healthy); background: var(--j-healthy-soft); }
.carrier-no_activity { color: var(--j-muted); background: var(--j-surface-active); }
.carrier-source_unavailable { color: var(--j-warning); background: var(--j-warning-soft); }

.tenant-mode-option:has(input:checked),
.connect-now-option:has(input:checked),
.delete-tenant-option:has(input:checked) {
  border-color: #596331;
  background: var(--j-primary-soft);
  box-shadow: 0 0 0 2px rgba(154, 164, 91, .09);
}
.tenant-mode-option:has(input:focus-visible),
.connect-now-option:has(input:focus-visible),
.delete-tenant-option:has(input:focus-visible) {
  border-color: var(--j-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--j-focus) 18%, transparent);
}

/* One checkbox geometry across static forms and JavaScript-rendered choices. */
.access-option input[type="checkbox"],
.site-choice input[type="checkbox"],
.delivery-options input[type="checkbox"],
.schedule-enabled input[type="checkbox"],
.tenant-mode-option input[type="checkbox"],
.connect-now-option input[type="checkbox"],
.delete-tenant-option input[type="checkbox"],
.scope-option input[type="checkbox"],
.archived-sites-toggle input[type="checkbox"],
.account-dialog .access-switch input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex-basis: 18px;
  padding: 0;
}

/* Agent enrollment stays on the same dark surface system as the dialog. */
.site-dialog .site-agent-fields {
  grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr);
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border-color: var(--j-border);
  border-radius: 10px;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--j-ink-strong) 3%, transparent);
}
.site-dialog .site-install-command {
  padding: 14px;
  border-color: var(--j-border);
  border-radius: 9px;
  background: var(--j-surface);
}
.site-dialog .site-install-step {
  border: 1px solid color-mix(in srgb, var(--j-primary) 60%, var(--j-border));
  color: var(--j-on-primary);
  background: var(--j-primary-solid);
}
.site-dialog .site-install-command h4,
.site-dialog .site-security-note strong { color: var(--j-ink-strong); }
.site-dialog .site-install-command p,
.site-dialog .site-security-note span { color: var(--j-muted); }
.site-dialog .site-install-command code {
  border-color: var(--j-border);
  color: var(--j-ink);
  background: var(--j-canvas);
}
.site-dialog .copy-command-button {
  border-color: var(--j-primary-solid);
  color: var(--j-on-primary);
  background: var(--j-primary-solid);
}
.site-dialog .copy-command-button:hover {
  border-color: var(--j-primary-solid-hover);
  color: var(--j-on-primary);
  background: var(--j-primary-solid-hover);
}
.site-dialog .site-install-copy-status { color: var(--j-healthy) !important; }
.site-dialog .site-security-note {
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--j-primary) 32%, var(--j-border));
  border-left: 3px solid var(--j-primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--j-primary-soft) 68%, var(--j-surface));
}
@media (max-width: 700px) {
  .site-dialog .site-agent-fields { grid-template-columns: 1fr; }
}

/* Explicit site scope selection and unified site operations. */
.scope-menu-heading,
.scope-menu-footer,
.archived-sites-toggle,
.site-agent-connection-row,
.site-agent-update-action { border-color: var(--j-border); }
.scope-selection-toolbar > span,
.scope-selection-status,
.scope-option small,
.archived-sites-toggle,
.archived-sites-toggle small { color: var(--j-muted); }
.scope-option strong { color: var(--j-ink-strong); }
.scope-site-settings { color: var(--j-muted); }
.scope-site-settings:hover {
  border-color: var(--j-border-strong);
  color: var(--j-ink-strong);
  background: var(--j-surface-active);
}
.scope-option:hover { background: var(--j-surface-active); }
.scope-option:has(input:checked) {
  color: var(--j-ink-strong);
  background: var(--j-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--j-primary) 50%, var(--j-border));
}
.scope-option input[type="checkbox"],
.archived-sites-toggle input[type="checkbox"] {
  margin: 0;
}
.scope-selection-toolbar .scope-all-button.active {
  border-color: var(--j-primary);
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
}
.site-management-section,
.site-agent-update-progress span::before,
.history-import-readiness span,
.history-import-status-card {
  border-color: var(--j-border);
  color: var(--j-ink);
  background: var(--j-surface-subtle);
}
.site-management-section-heading h3,
.site-agent-update-heading h4,
.site-agent-connection-copy strong { color: var(--j-ink-strong); }
.site-management-section-heading p,
.site-agent-update-heading p,
.site-agent-connection-copy p { color: var(--j-muted); }
.danger-outline-button {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: #ffc2c2;
  background: color-mix(in srgb, var(--j-critical-soft) 72%, var(--j-surface));
}
.danger-outline-button:hover {
  border-color: var(--j-critical);
  color: var(--j-ink-strong);
  background: color-mix(in srgb, var(--j-critical-soft) 86%, var(--j-surface-active));
}
.danger-outline-button:focus-visible {
  outline: 2px solid var(--j-focus);
  outline-offset: 2px;
}
.site-agent-update {
  border: 0;
  background: transparent;
}
.site-management-dialog .site-disconnect-confirmation {
  display: grid;
  gap: 14px;
  margin: -2px 0 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--j-critical) 36%, var(--j-border));
  border-radius: 10px;
  color: var(--j-ink);
  background: color-mix(in srgb, var(--j-critical-soft) 58%, var(--j-surface-subtle));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--j-critical) 8%, transparent),
    inset 3px 0 0 color-mix(in srgb, var(--j-critical) 68%, transparent);
}
.site-management-dialog .site-disconnect-confirmation[hidden] { display: none; }
.site-management-dialog .site-disconnect-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 12px;
}
.site-disconnect-message > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.site-disconnect-symbol {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--j-critical) 52%, var(--j-border));
  border-radius: 9px;
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 84%, var(--j-surface));
}
.site-disconnect-symbol svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.site-disconnect-message .eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--j-critical) 82%, var(--j-muted));
  font-size: 9.5px;
}
.site-disconnect-message strong {
  color: var(--j-ink-strong);
  font-size: 14px;
  line-height: 1.35;
}
.site-disconnect-message #siteDisconnectConsequence {
  max-width: 72ch;
  margin: 2px 0 0;
  color: var(--j-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-management-dialog .site-disconnect-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 1px;
}
.site-management-dialog .site-disconnect-actions button {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.site-management-dialog #disconnectAgentButton {
  border-color: var(--j-critical);
  color: #281414;
  background: var(--j-critical);
}
.site-management-dialog #disconnectAgentButton:hover {
  border-color: color-mix(in srgb, var(--j-critical) 88%, white);
  color: #1e1010;
  background: color-mix(in srgb, var(--j-critical) 88%, white);
}
.site-management-dialog #disconnectAgentButton:active {
  background: color-mix(in srgb, var(--j-critical) 82%, black);
}
.site-management-dialog .site-disconnect-confirmation .form-error {
  margin: 0;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--j-critical) 46%, var(--j-border));
  border-radius: 8px;
  color: color-mix(in srgb, var(--j-critical) 78%, var(--j-ink-strong));
  background: color-mix(in srgb, var(--j-critical-soft) 82%, var(--j-surface));
  font-size: 12px;
  line-height: 1.45;
}
.site-management-tenant {
  margin: 5px 0 0;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.site-management-dialog { width: min(780px, calc(100% - 32px)); }
.site-management-body { gap: 12px; }
.site-management-section { gap: 12px; padding: 16px; border-radius: 10px; }
.site-agent-update-policy {
  gap: 6px 18px;
  margin-bottom: 0;
}
.site-agent-update-policy label {
  width: auto;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.site-agent-update-policy input[type="radio"] {
  flex-basis: 18px;
  margin: 0;
}
.site-agent-update-policy label:has(input:checked) {
  color: var(--j-ink-strong);
  background: transparent;
}
.site-agent-update-policy-help { color: var(--j-muted); }
.site-history-import .history-window-options.management-segmented {
  max-width: 286px;
  gap: 2px;
  padding: 3px;
  border-color: var(--j-border);
  border-radius: 8px;
  background: var(--j-surface);
}
.site-history-import .management-segmented span {
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--j-muted);
  font-size: 11px;
}
.site-history-import .management-segmented input:checked + span {
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--j-primary) 40%, var(--j-border));
}
.site-agent-update-facts div,
.history-import-readiness span,
.history-import-status-card { background: var(--j-surface); }
.site-agent-update-progress span { color: var(--j-muted-soft); }
.site-agent-update-progress span:not(:last-child)::after { background: var(--j-border-strong); }
.site-agent-update-progress span::before { background: var(--j-surface-subtle); }
.site-agent-update-progress[data-state="checking"] span:nth-child(-n+1),
.site-agent-update-progress[data-state="queued"] span:nth-child(-n+1),
.site-agent-update-progress[data-state="downloading"] span:nth-child(-n+2),
.site-agent-update-progress[data-state="installing"] span:nth-child(-n+3),
.site-agent-update-progress[data-state="restarting"] span:nth-child(-n+4),
.site-agent-update-progress[data-state="completed"] span:nth-child(-n+4) { color: var(--j-primary-hover); }
.site-agent-update-progress[data-state="checking"] span:nth-child(-n+1)::before,
.site-agent-update-progress[data-state="queued"] span:nth-child(-n+1)::before,
.site-agent-update-progress[data-state="downloading"] span:nth-child(-n+2)::before,
.site-agent-update-progress[data-state="installing"] span:nth-child(-n+3)::before,
.site-agent-update-progress[data-state="restarting"] span:nth-child(-n+4)::before,
.site-agent-update-progress[data-state="completed"] span:nth-child(-n+4)::before {
  border-color: var(--j-primary);
  background: var(--j-primary);
}
@media (max-width: 700px) {
  .site-management-dialog .site-disconnect-confirmation { padding: 14px; }
  .site-management-dialog .site-disconnect-message {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .site-management-dialog .site-disconnect-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .site-management-dialog .site-disconnect-actions button {
    width: 100%;
    min-height: 44px;
  }
}
.history-import-readiness span.ready::before { background: var(--j-healthy); }
.history-import-readiness span.unavailable { color: var(--j-warning); background: var(--j-warning-soft); }
.history-import-readiness span.unavailable::before { background: var(--j-warning); }
.site-section-heading h3,
.site-management-actions h3,
.site-danger-heading h3,
.tenant-mode-option strong,
.connect-now-option strong,
.delete-tenant-option strong { color: var(--j-ink-strong); }
.site-section-heading p,
.site-management-actions p,
.site-danger-heading p,
.tenant-mode-option small,
.connect-now-option small,
.delete-tenant-option small { color: var(--j-muted); }

.dispatch-detail-heading h2,
.dispatch-detail-section h3,
.dispatch-section-heading h3,
.dispatch-route-endpoint strong,
.dispatch-routing-context strong,
.dispatch-fact-grid dd { color: var(--j-ink-strong); }
.dispatch-route-overview,
.dispatch-detail-section,
.dispatch-route-history,
.dispatch-technical,
.dispatch-hop-list .dispatch-hop-empty {
  border-color: var(--j-border);
  background: var(--j-surface-subtle);
}
.dispatch-route-overview { background-image: linear-gradient(135deg, var(--j-surface-subtle), var(--j-surface-active)); }
.dispatch-routing-context { border-left-color: var(--j-primary); background: var(--j-primary-soft); }
.dispatch-routing-context.is-equivalent {
  border-left-color: var(--j-healthy);
  background: var(--j-healthy-soft);
}
.dispatch-route-status[data-tone="success"] {
  border-color: rgba(154, 164, 91, .48);
  color: #cbd596;
  background: rgba(86, 99, 47, .3);
}
.dispatch-routing-context p,
.dispatch-fact-grid dt,
.dispatch-hop-list time,
.dispatch-technical summary { color: var(--j-muted); }
.dispatch-routing-context.is-clearing,
.dispatch-routing-context.is-diverted:not(.is-clearing) { border-left-color: var(--j-warning); background: var(--j-warning-soft); }
.dispatch-routing-context.is-clearing strong { color: var(--j-warning); }
.dispatch-routing-context.is-clearing p { color: #d7b77e; }
.dispatch-hop-marker { border-color: var(--j-border-strong); color: var(--j-primary-hover); background: var(--j-surface); }
.dispatch-hop-list li:not(:last-child)::after { background: var(--j-border-strong); }
.dispatch-hop-count { color: var(--j-primary-hover); background: var(--j-primary-soft); }

.custom-time-range-heading strong { color: var(--j-ink-strong); }
.custom-time-range-heading small,
.custom-time-range-fields label,
.custom-time-range-actions span { color: var(--j-muted); }
.custom-time-range-heading button { border-color: var(--j-border); color: var(--j-muted); background: var(--j-surface-active); }
.custom-time-range-actions button { color: #fff; background: var(--j-primary-solid); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--j-canvas); }
::-webkit-scrollbar-thumb { border: 3px solid var(--j-canvas); border-radius: 999px; background: #4b4c43; }
::-webkit-scrollbar-thumb:hover { background: #626358; }

@media (max-width: 1040px) {
  :root { --j-sidebar: 204px; }
  .page-header { padding-inline: 20px; }
  .page-body { padding-inline: 20px; }
  .overview-context > div { min-width: 96px; padding-inline: 10px; }
}

@media (max-width: 900px) {
  .overview-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .sidebar { width: 100%; min-width: 0; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--j-border); }
  .brand { min-height: 46px; margin: 0; padding: 2px 8px 9px; }
  .brand-name { font-size: 21px; }
  .sidebar-nav { padding-block: 8px 2px; }
  .sidebar-nav > p { display: none; }
  .ui-sidebar .nav-item { min-height: 44px; padding-inline: 10px; }
  .nav-item.active { box-shadow: none; }
  .user-chip { border-top: 0; }
  .sign-out,
  .icon-button,
  .scope-site-settings,
  .dialog-close-button,
  .dispatch-detail-close,
  #closeCustomTimeRange { min-width: 44px; min-height: 44px; }
  .scope-option-row.can-manage { grid-template-columns: minmax(0, 1fr) auto; }
  .panel-link,
  .scope-selector > summary,
  .scope-all-button,
  .scope-manage-button,
  .scope-add-button,
  .scope-connect-button,
  .segmented button,
  .topology-tool-button { min-height: 44px; }
  .page-header { position: relative; min-height: 0; }
  .overview-posture { align-items: stretch; flex-direction: column; }
  .overview-context { border-top: 1px solid var(--j-border); border-left: 0; padding-top: 11px; }
  .auth-shell { width: min(700px, calc(100% - 32px)); }
  .auth-context,
  .auth-panel { padding: 36px; }
  .auth-brand-lockup .brand-wordmark { font-size: 31px; }
}

@media (max-width: 620px) {
  .page-header { gap: 13px; padding: 15px 16px; }
  .page-heading h1 { font-size: 23px; }
  .page-actions { width: 100%; align-items: stretch; }
  .time-range-filter,
  .scope-selector { flex: 1; }
  .time-range-presets { width: 100%; }
  .time-range-presets button { min-height: 44px; flex: 1; min-width: 0; padding-inline: 4px; font-size: 12px; }
  .scope-selector > summary { width: 100%; min-width: 0; min-height: 44px; }
  .site-management-dialog .site-delete-actions {
    grid-template-columns: 1fr;
  }
  .site-management-dialog .site-delete-actions button {
    width: 100%;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .site-dialog input[type="text"],
  .site-dialog select,
  .site-management-dialog input[type="text"],
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
  .page-body { padding: 16px 12px 30px; }
  .site-agent-update-policy label,
  .site-history-import .management-segmented span { min-height: 44px; }
  .overview-posture { padding: 15px; }
  .overview-posture h2 { overflow: visible; white-space: normal; text-overflow: clip; }
  .overview-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-context > div { min-width: 0; padding: 7px 8px; }
  .panel-heading { padding-inline: 14px; }
  .auth-body { display: flex; padding: 10px; overflow-x: hidden; }
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 480px;
    min-height: 0;
    margin: auto;
    border-radius: 13px;
  }
  .auth-context { min-height: 180px; padding: 28px; }
  .auth-context-copy h1 { font-size: 26px; }
  .auth-panel { padding: 30px 28px 34px; }
  .auth-context,
  .auth-panel,
  .auth-card,
  .auth-form,
  .auth-field,
  .auth-password-control { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* Dispatch workspace: operational summary and scan-friendly activity list. */
.summary-grid.dispatch-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dispatch-summary-card {
  display: grid;
  min-height: 146px;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 5px;
}
.dispatch-summary-card[data-tone="good"] { border-color: color-mix(in srgb, var(--j-healthy) 35%, var(--j-border)); }
.dispatch-summary-card[data-tone="info"] { border-color: color-mix(in srgb, var(--j-info) 32%, var(--j-border)); }
.dispatch-summary-card[data-tone="warn"] { border-color: color-mix(in srgb, var(--j-warning) 35%, var(--j-border)); }
.dispatch-summary-card[data-tone="bad"] { border-color: color-mix(in srgb, var(--j-critical) 35%, var(--j-border)); }
.dispatch-summary-status {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface-active);
  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.dispatch-summary-card[data-tone="good"] .dispatch-summary-status { color: var(--j-healthy); background: var(--j-healthy-soft); }
.dispatch-summary-card[data-tone="info"] .dispatch-summary-status { color: var(--j-info); background: var(--j-info-soft); }
.dispatch-summary-card[data-tone="warn"] .dispatch-summary-status { color: var(--j-warning); background: var(--j-warning-soft); }
.dispatch-summary-card[data-tone="bad"] .dispatch-summary-status { color: var(--j-critical); background: var(--j-critical-soft); }
.dispatch-summary-label {
  margin-top: 7px;
  color: var(--j-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.dispatch-summary-card .dispatch-summary-value {
  align-self: end;
  margin-top: 5px;
  font-size: 31px;
}
.dispatch-summary-detail {
  margin-top: 4px;
  color: var(--j-muted) !important;
  font-size: 11px !important;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.dispatch-list-heading { align-items: center; }
.dispatch-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
}
.dispatch-refresh-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--j-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.dispatch-refresh-state > span:first-child {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--j-healthy);
  box-shadow: 0 0 0 4px var(--j-healthy-soft);
}
.dispatch-refresh-state[data-state="refreshing"] > span:first-child {
  background: var(--j-info);
  box-shadow: 0 0 0 4px var(--j-info-soft);
  animation: dispatch-refresh-pulse 1s ease-in-out infinite;
}
.dispatch-refresh-state[data-state="delayed"] { color: var(--j-warning); }
.dispatch-refresh-state[data-state="delayed"] > span:first-child {
  background: var(--j-warning);
  box-shadow: 0 0 0 4px var(--j-warning-soft);
}

.dispatch-page-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dispatch-page-columns {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(380px, 2.1fr) minmax(126px, .55fr) minmax(190px, .9fr);
  align-items: center;
  gap: 16px;
  padding: 7px 16px;
  border-top: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted-soft);
  background: var(--j-surface-subtle);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
}
.dispatch-page-item { border-bottom: 1px solid var(--j-border); }
.dispatch-page-item:last-child { border-bottom: 0; }
.dispatch-page-loading {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(150px, .72fr) minmax(380px, 2.1fr) minmax(190px, 1.45fr);
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--j-border);
}
.dispatch-page-loading span {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--j-surface-active) 25%, var(--j-border) 50%, var(--j-surface-active) 75%);
  background-size: 200% 100%;
  animation: dispatch-loading-shimmer 1.4s ease-in-out infinite;
}
.dispatch-page-loading span:first-child { width: 74%; }
.dispatch-page-loading span:last-child { width: 70%; }
.dispatch-page-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: minmax(150px, .72fr) minmax(380px, 2.1fr) minmax(126px, .55fr) minmax(190px, .9fr);
  grid-template-areas: "heading route status meta";
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  transition: background-color 160ms ease-out;
}
.dispatch-page-row:hover { background: var(--j-surface-active); }
.dispatch-page-row:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
  background: var(--j-primary-soft);
}
.dispatch-page-top,
.dispatch-page-heading,
.dispatch-page-status,
.dispatch-page-meta {
  display: flex;
  align-items: center;
  min-width: 0;
}
.dispatch-page-top { display: contents; }
.dispatch-page-heading {
  grid-area: heading;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}
.dispatch-page-heading .dispatch-reference { font-size: 14px; }
.dispatch-page-heading .dispatch-site {
  overflow: hidden;
  max-width: 100%;
  color: var(--j-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dispatch-page-status {
  grid-area: status;
  align-items: flex-start;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.dispatch-page-route {
  display: grid;
  grid-area: route;
  grid-template-columns: minmax(125px, 1fr) 48px minmax(125px, 1fr);
  align-items: center;
  min-width: 0;
  gap: 7px;
}
.dispatch-page-route .dispatch-route-node {
  min-height: 0;
  justify-content: stretch;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.dispatch-page-route .dispatch-route-node:last-child { text-align: right; }
.dispatch-page-route .dispatch-route-node small { font-size: 9px; }
.dispatch-page-route .dispatch-route-node strong { font-size: 12px; }
.dispatch-page-route .dispatch-overview-connector { width: 48px; }
.dispatch-page-meta {
  grid-area: meta;
  flex-wrap: wrap;
  align-content: center;
  gap: 2px 10px;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.35;
}
.dispatch-page-meta > span:first-child { flex-basis: 100%; color: var(--j-ink); }
.dispatch-page-meta > span:not(:first-child)::before {
  margin-right: 10px;
  color: var(--j-border-strong);
  content: "·";
}
.dispatch-page-empty {
  display: grid;
  min-height: 180px;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 30px 18px;
  color: var(--j-muted);
  text-align: center;
}
.dispatch-page-empty strong { color: var(--j-ink-strong); font-size: 14px; }
.dispatch-page-empty span { max-width: 430px; }
.dispatch-page-empty button { margin-top: 8px; }

@keyframes dispatch-refresh-pulse {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes dispatch-loading-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1100px) {
  .summary-grid.dispatch-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dispatch-page-columns { display: none; }
  .dispatch-page-row {
    min-height: 94px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "heading status"
      "route meta";
    row-gap: 8px;
  }
  .dispatch-page-route { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
  .dispatch-page-loading { min-height: 94px; grid-template-columns: .7fr 2fr 1fr; }
}

@media (max-width: 700px) {
  .dispatch-list-heading,
  .dispatch-list-controls { align-items: stretch; flex-direction: column; }
  .dispatch-list-controls { width: 100%; gap: 8px; }
  .dispatch-list-controls .filter { justify-content: space-between; }
  .dispatch-list-controls .filter select { flex: 1; }
  .dispatch-page-row {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "top" "route" "meta";
    gap: 8px;
    padding-block: 12px;
  }
  .dispatch-page-top {
    display: flex;
    grid-area: top;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .dispatch-page-heading { display: flex; }
  .dispatch-page-status { width: auto; align-items: flex-end; justify-content: flex-start; }
  .dispatch-page-route { grid-template-columns: 1fr; gap: 7px; }
  .dispatch-page-route .dispatch-route-node:last-child { text-align: left; }
  .dispatch-page-route .dispatch-overview-connector { display: block; width: 28px; height: 28px; margin-left: 12px; transform: rotate(90deg); }
  .dispatch-page-meta { gap: 4px 9px; }
  .dispatch-page-meta > span:not(:first-child)::before { margin-right: 9px; }
  .dispatch-page-loading { min-height: 112px; grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
  .dispatch-page-loading span:first-child,
  .dispatch-page-loading span:last-child { width: 58%; }
}

@media (max-width: 460px) {
  .summary-grid.dispatch-summary { grid-template-columns: 1fr; }
  .dispatch-summary-card { min-height: 132px; }
  .dispatch-page-row { padding-inline: 14px; }
  .dispatch-page-status { align-items: flex-start; flex-direction: column; }
  .dispatch-activity-time { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-refresh-state[data-state="refreshing"] > span:first-child,
  .dispatch-page-loading span { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Event detail dialogs: one resilient shell, domain-specific information hierarchy. */
.event-detail-dialog,
.dispatch-detail-dialog.event-detail-dialog,
.alarm-detail-dialog.event-detail-dialog {
  width: min(980px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--j-border-strong);
  border-radius: var(--j-radius-dialog);
  color: var(--j-ink);
  background: var(--j-surface);
  box-shadow: var(--j-shadow-dialog);
}
.event-detail-shell,
.dispatch-detail-shell.event-detail-shell,
.alarm-detail-shell.event-detail-shell {
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.event-detail-heading {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--j-border);
  background: color-mix(in srgb, var(--j-surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.event-detail-title { min-width: 0; flex: 1; }
.event-detail-title .eyebrow { margin: 0 0 5px; color: var(--j-primary-hover); }
.event-detail-title h2,
.dispatch-detail-heading.event-detail-heading h2 {
  margin: 0;
  color: var(--j-ink-strong);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.event-detail-subtitle {
  max-width: 680px;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--j-muted);
  font-size: 13px;
  line-height: 1.5;
}
.event-detail-heading .dispatch-detail-badges { margin-top: 14px; }
.event-detail-close,
.dispatch-detail-close.event-detail-close {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  transform: none;
}
.event-detail-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.event-detail-close:hover,
.dispatch-detail-close.event-detail-close:hover {
  border-color: var(--j-border-strong);
  color: var(--j-ink-strong);
  background: var(--j-surface-active);
  transform: none;
}
.event-detail-close:focus-visible { outline: 3px solid rgba(165, 175, 105, .24); outline-offset: 2px; }

.event-detail-content {
  display: grid;
  gap: 16px;
  padding: 24px 28px 28px;
}
.event-detail-state {
  display: grid;
  min-height: 320px;
  padding: 48px 28px;
  place-items: center;
  align-content: center;
  text-align: center;
}
.event-detail-state-title { margin-top: 16px; color: var(--j-ink-strong); font-size: 16px; }
.event-detail-state-message { max-width: 430px; margin: 7px 0 0; color: var(--j-muted); font-size: 13px; line-height: 1.55; }
.event-detail-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--j-surface-active);
  border-top-color: var(--j-primary);
  border-radius: 50%;
  animation: event-detail-spin .75s linear infinite;
}
.event-detail-state[data-state="error"] .event-detail-spinner {
  position: relative;
  display: grid;
  border: 1px solid #6d4b28;
  color: var(--j-warning);
  background: var(--j-warning-soft);
  animation: none;
  place-items: center;
}
.event-detail-state[data-state="error"] .event-detail-spinner::after { content: "!"; font-size: 15px; font-weight: 800; }
.event-detail-retry { min-width: 112px; margin-top: 20px; }
@keyframes event-detail-spin { to { transform: rotate(360deg); } }

.event-detail-content .dispatch-route-overview,
.event-detail-content .dispatch-routing-context,
.event-detail-content .dispatch-detail-sections,
.event-detail-content .dispatch-route-history,
.event-detail-content .dispatch-technical { margin-top: 0; }
.event-detail-content .dispatch-route-overview {
  padding: 22px 24px;
  border-color: var(--j-border);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--j-surface-subtle), var(--j-surface-active));
}
.event-detail-content .dispatch-route-endpoint strong { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.event-detail-content .dispatch-routing-context {
  border: 1px solid var(--j-border);
  border-left: 3px solid var(--j-primary);
  border-radius: 4px 10px 10px 4px;
}
.event-detail-content .dispatch-routing-context.is-clearing,
.event-detail-content .dispatch-routing-context.is-diverted:not(.is-clearing) {
  border-left-color: var(--j-warning);
  background: var(--j-warning-soft);
}
.event-detail-content .dispatch-detail-section,
.event-detail-content .dispatch-route-history,
.event-detail-content .dispatch-technical,
.alarm-revision-history {
  border-color: var(--j-border);
  border-radius: 12px;
  background: var(--j-surface-subtle);
}
.event-detail-content .dispatch-detail-section,
.event-detail-content .dispatch-route-history,
.alarm-revision-history { padding: 20px; }
.event-detail-content .dispatch-detail-sections { gap: 16px; }
.event-detail-content .dispatch-fact-grid { gap: 16px 24px; }
.event-detail-content .dispatch-fact-grid dt,
.event-detail-label,
.alarm-owner-card dt {
  color: var(--j-muted-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.event-detail-content .dispatch-fact-grid dd { margin-top: 5px; color: var(--j-ink-strong); font-size: 13px; font-weight: 600; }
.event-detail-content .dispatch-technical summary { min-height: 44px; padding: 14px 18px; color: var(--j-ink); }
.event-detail-content .dispatch-technical summary:hover { color: var(--j-primary-hover); background: var(--j-surface-active); }

.alarm-signal-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(230px, .55fr);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--j-border);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--j-surface-subtle), var(--j-surface-active));
}
.alarm-signal-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #664823;
  border-radius: 10px;
  color: var(--j-warning);
  background: var(--j-warning-soft);
}
.alarm-signal-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.alarm-signal-copy { min-width: 0; }
.alarm-object-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 5px; }
.alarm-signal-copy h3 { margin: 0; overflow-wrap: anywhere; color: var(--j-ink-strong); font-size: 18px; line-height: 1.3; }
.alarm-signal-copy p { margin: 5px 0 0; color: var(--j-muted); font-size: 12px; line-height: 1.45; }
.alarm-object-context-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--j-border-strong);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.alarm-object-context-badge[hidden] { display: none; }
.alarm-object-context-badge[data-source="missing"],
.alarm-object-context-badge[data-source="unidentified"] {
  border-color: #664823;
  color: var(--j-warning);
  background: var(--j-warning-soft);
}
.alarm-signal-copy .alarm-object-context-message {
  max-width: 720px;
  color: var(--j-muted-soft);
}
.alarm-signal-copy .alarm-object-context-message[data-source="missing"],
.alarm-signal-copy .alarm-object-context-message[data-source="unidentified"] { color: var(--j-warning); }
.alarm-owner-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  background: var(--j-surface);
}
.alarm-owner-card > div { min-width: 0; padding: 12px 14px; }
.alarm-owner-card > div + div { border-left: 1px solid var(--j-border); }
.alarm-owner-card dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--j-ink-strong); font-size: 12px; font-weight: 600; }

.alarm-detail-sections { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.alarm-detail-section .dispatch-section-heading { align-items: flex-start; }
.alarm-lifecycle { display: grid; gap: 0; margin: 17px 0 0; padding: 0; list-style: none; }
.alarm-lifecycle li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; min-height: 60px; }
.alarm-lifecycle li:not(:last-child)::after { position: absolute; top: 17px; bottom: 0; left: 5px; width: 1px; background: var(--j-border-strong); content: ""; }
.alarm-lifecycle-marker { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 2px solid var(--j-surface-subtle); border-radius: 50%; background: var(--j-primary); box-shadow: 0 0 0 2px var(--j-primary-soft); }
.alarm-lifecycle .is-pending .alarm-lifecycle-marker { background: var(--j-muted-soft); box-shadow: 0 0 0 2px var(--j-surface-active); }
.alarm-lifecycle strong { color: var(--j-ink-strong); font-size: 12px; }
.alarm-lifecycle p { margin: 3px 0; color: var(--j-muted); font-size: 11px; line-height: 1.35; }
.alarm-lifecycle time { color: var(--j-primary-hover); font-size: 10px; font-variant-numeric: tabular-nums; }
.alarm-lifecycle .is-pending time { color: var(--j-muted-soft); }

.alarm-revision-history { padding: 20px; border: 1px solid var(--j-border); }
.alarm-revision-list { display: grid; gap: 0; margin: 17px 0 0; padding: 0; list-style: none; }
.alarm-revision-list li:not(.alarm-revision-empty) {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--j-border);
}
.alarm-revision-list li:first-child { border-top: 0; }
.alarm-revision-marker { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--j-border-strong); border-radius: 8px; color: var(--j-primary-hover); background: var(--j-surface); font-size: 10px; font-weight: 800; }
.alarm-revision-list strong { color: var(--j-ink-strong); font-size: 12px; }
.alarm-revision-list p { margin: 3px 0; color: var(--j-muted); font-size: 11px; }
.alarm-revision-list time { color: var(--j-muted-soft); font-size: 10px; }
.alarm-revision-empty { padding: 18px; border: 1px dashed var(--j-border); border-radius: 10px; color: var(--j-muted); background: var(--j-surface); font-size: 12px; text-align: center; }

@media (max-width: 760px) {
  .event-detail-dialog,
  .dispatch-detail-dialog.event-detail-dialog,
  .alarm-detail-dialog.event-detail-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .event-detail-shell,
  .dispatch-detail-shell.event-detail-shell,
  .alarm-detail-shell.event-detail-shell { max-height: calc(100dvh - 16px); }
  .event-detail-heading { padding: 20px 18px 17px; }
  .event-detail-content { padding: 18px; }
  .alarm-signal-overview { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .alarm-owner-card { grid-column: 1 / -1; }
  .alarm-detail-sections { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .event-detail-heading { gap: 14px; }
  .event-detail-title h2,
  .dispatch-detail-heading.event-detail-heading h2 { font-size: 23px; }
  .event-detail-content { gap: 12px; padding: 14px; }
  .alarm-signal-overview { grid-template-columns: minmax(0, 1fr); }
  .alarm-signal-icon { width: 38px; height: 38px; }
  .alarm-owner-card { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .alarm-owner-card > div + div { border-top: 1px solid var(--j-border); border-left: 0; }
  .event-detail-content .dispatch-detail-section,
  .event-detail-content .dispatch-route-history,
  .alarm-revision-history { padding: 16px; }
}

/* Dispatch detail: make the operational answer clear before the PTS record. */
.event-detail-content .dispatch-route-overview {
  position: relative;
  padding: 20px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--j-surface-subtle), color-mix(in srgb, var(--j-surface-active) 72%, var(--j-surface-subtle)));
}
.event-detail-content .dispatch-route-endpoint > span {
  margin-bottom: 8px;
  color: var(--j-muted-soft);
  font-size: 10px;
}
.event-detail-content .dispatch-route-endpoint strong {
  color: var(--j-ink-strong);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}
.event-detail-content .dispatch-route-endpoint small {
  margin-top: 6px;
  color: var(--j-muted);
  font-size: 11px;
}
.event-detail-content .dispatch-route-direction::before {
  background: color-mix(in srgb, var(--j-primary) 48%, var(--j-border));
}
.event-detail-content .dispatch-route-direction::after { border-color: var(--j-primary); }
.event-detail-content .dispatch-route-direction span {
  border-color: var(--j-surface-subtle);
  background: var(--j-primary);
}

.dispatch-route-verdict {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  background: var(--j-surface-subtle);
}
.dispatch-route-verdict-icon {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  place-items: center;
  border: 1px solid var(--j-border-strong);
  border-radius: 8px;
  color: var(--j-muted);
  background: var(--j-surface);
}
.dispatch-route-verdict-icon::before {
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  content: "";
}
.dispatch-route-verdict .eyebrow {
  margin: 0 0 4px;
  color: var(--j-muted-soft);
  font-size: 10px;
}
.dispatch-route-verdict strong {
  display: block;
  color: var(--j-ink-strong);
  font-size: 14px;
  line-height: 1.35;
}
.dispatch-route-verdict p:not(.eyebrow) {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--j-muted);
  font-size: 12px;
  line-height: 1.5;
}
.dispatch-route-verdict[data-tone="success"] {
  border-color: color-mix(in srgb, var(--j-primary) 35%, var(--j-border));
  background: color-mix(in srgb, var(--j-primary-soft) 62%, var(--j-surface-subtle));
}
.dispatch-route-verdict[data-tone="success"] .dispatch-route-verdict-icon {
  border-color: color-mix(in srgb, var(--j-primary) 52%, var(--j-border));
  color: var(--j-primary);
  background: color-mix(in srgb, var(--j-primary-soft) 78%, var(--j-surface));
}
.dispatch-route-verdict[data-tone="attention"] {
  border-color: color-mix(in srgb, var(--j-warning) 45%, var(--j-border));
  background: color-mix(in srgb, var(--j-warning-soft) 68%, var(--j-surface-subtle));
}
.dispatch-route-verdict[data-tone="attention"] .dispatch-route-verdict-icon {
  border-color: color-mix(in srgb, var(--j-warning) 55%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 75%, var(--j-surface));
}
.dispatch-route-verdict[data-tone="attention"] .dispatch-route-verdict-icon::before {
  width: auto;
  height: auto;
  margin: -1px 0 0;
  border: 0;
  transform: none;
  content: "!";
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.dispatch-route-verdict[data-tone="critical"] {
  border-color: color-mix(in srgb, var(--j-critical) 46%, var(--j-border));
  background: color-mix(in srgb, var(--j-critical-soft) 70%, var(--j-surface-subtle));
}
.dispatch-route-verdict[data-tone="critical"] .dispatch-route-verdict-icon {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 78%, var(--j-surface));
}
.dispatch-route-verdict[data-tone="critical"] .dispatch-route-verdict-icon::before {
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  transform: none;
  content: "×";
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.dispatch-recovery-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--j-warning) 42%, var(--j-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--j-warning-soft) 46%, var(--j-surface-subtle));
}
.dispatch-recovery-panel[hidden] { display: none; }
.dispatch-recovery-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.dispatch-recovery-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--j-warning) 56%, var(--j-border));
  border-radius: 8px;
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 74%, var(--j-surface));
}
.dispatch-recovery-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.dispatch-recovery-heading .eyebrow { margin: 0 0 4px; color: var(--j-muted-soft); }
.dispatch-recovery-heading h3 { margin: 0; color: var(--j-ink-strong); font-size: 14px; line-height: 1.35; }
.dispatch-recovery-heading p:not(.eyebrow) { max-width: 760px; margin: 4px 0 0; color: var(--j-muted); font-size: 12px; line-height: 1.5; }
.dispatch-recovery-events { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--j-border); list-style: none; }
.dispatch-recovery-events[hidden] { display: none; }
.dispatch-recovery-events li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--j-border);
}
.dispatch-recovery-events li > div { display: grid; gap: 3px; }
.dispatch-recovery-events strong { color: var(--j-ink-strong); font-size: 12px; }
.dispatch-recovery-events small,
.dispatch-recovery-events time { color: var(--j-muted); font-size: 11px; line-height: 1.45; }
.dispatch-recovery-events time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dispatch-related-panel[hidden] { display: none; }
.dispatch-related-panel > .eyebrow { margin: 0 0 7px; color: var(--j-muted-soft); }
.dispatch-related-dispatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dispatch-related-link {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--j-border);
  border-radius: 8px;
  color: var(--j-ink);
  background: var(--j-surface);
  text-align: left;
}
.dispatch-related-link:hover { border-color: var(--j-border-strong); background: var(--j-surface-active); }
.dispatch-related-link:focus-visible { outline: 3px solid rgba(165, 175, 105, .24); outline-offset: 2px; }
.dispatch-related-link > span:first-child { display: grid; min-width: 0; gap: 3px; }
.dispatch-related-link small { color: var(--j-muted); font-size: 10px; line-height: 1.4; }
.dispatch-related-link strong { overflow-wrap: anywhere; color: var(--j-ink-strong); font-size: 12px; line-height: 1.4; }

.event-detail-content .dispatch-routing-context {
  grid-template-columns: minmax(190px, .58fr) minmax(0, 1.42fr);
  gap: 20px;
  padding: 15px 18px;
  border: 1px solid var(--j-border);
  border-left: 1px solid var(--j-border);
  border-radius: 10px;
  background: var(--j-surface);
}
.event-detail-content .dispatch-routing-context.is-equivalent {
  border-color: color-mix(in srgb, var(--j-primary) 30%, var(--j-border));
  background: color-mix(in srgb, var(--j-primary-soft) 38%, var(--j-surface));
}
.event-detail-content .dispatch-routing-context.is-clearing,
.event-detail-content .dispatch-routing-context.is-diverted:not(.is-clearing) {
  border-left-color: color-mix(in srgb, var(--j-warning) 45%, var(--j-border));
  background: color-mix(in srgb, var(--j-warning-soft) 45%, var(--j-surface));
}
.event-detail-content .dispatch-routing-context strong {
  display: block;
  color: var(--j-ink-strong);
  font-size: 13px;
  line-height: 1.45;
}
.event-detail-content .dispatch-routing-context p {
  color: var(--j-muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .event-detail-content .dispatch-route-overview { padding: 18px; }
  .dispatch-route-verdict { grid-template-columns: 30px minmax(0, 1fr); padding: 15px 16px; }
  .dispatch-route-verdict-icon { width: 28px; height: 28px; }
  .event-detail-content .dispatch-routing-context { grid-template-columns: 1fr; gap: 8px; }
  .dispatch-related-dispatches { grid-template-columns: minmax(0, 1fr); }
}

/* Wide dispatch workspace with a schematic, time-aware route map. */
.dispatch-detail-dialog.event-detail-dialog {
  width: min(1180px, calc(100% - 32px));
}
.dispatch-detail-content.event-detail-content { padding: 20px 24px 24px; }
.dispatch-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}
.dispatch-detail-main {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
}

.event-detail-content .dispatch-route-map {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--j-surface-subtle) 86%, var(--j-surface));
}
.dispatch-route-map-help {
  margin: 7px 0 0;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.45;
}
.dispatch-route-map .dispatch-hop-count {
  border: 1px solid var(--j-border);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface);
}
.dispatch-route-map-status {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-direction: column;
}
.dispatch-plan-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--j-border);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dispatch-plan-status[data-state="on-route"],
.dispatch-plan-status[data-state="planned"] {
  border-color: color-mix(in srgb, var(--j-primary) 42%, var(--j-border));
  color: var(--j-primary-hover);
  background: color-mix(in srgb, var(--j-primary-soft) 55%, var(--j-surface));
}
.dispatch-plan-status[data-state="partial"] {
  border-color: color-mix(in srgb, var(--j-warning) 42%, var(--j-border));
  color: var(--j-warning);
}
.dispatch-plan-status[data-state="deviated"] {
  border-color: color-mix(in srgb, var(--j-critical) 48%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 55%, var(--j-surface));
}
.dispatch-metro-map {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
}
.dispatch-metro-map .dispatch-route-stop {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 76px;
  color: var(--j-ink);
}
.dispatch-metro-map .dispatch-route-stop:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 20px;
  bottom: -2px;
  left: 10px;
  width: 2px;
  background: color-mix(in srgb, var(--j-primary) 42%, var(--j-border));
  content: "";
}
.dispatch-metro-map .is-planned-pending:not(:last-child)::after {
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--j-muted-soft) 58%, transparent) 0 5px,
    transparent 5px 9px
  );
}
.dispatch-metro-map .dispatch-hop-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--j-primary) 68%, var(--j-border));
  border-radius: 50%;
  background: var(--j-surface-subtle);
}
.dispatch-metro-map .dispatch-hop-marker::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--j-primary);
  content: "";
}
.dispatch-metro-map .is-origin .dispatch-hop-marker,
.dispatch-metro-map .is-arrival .dispatch-hop-marker {
  border-color: var(--j-primary);
  background: var(--j-primary);
  box-shadow: 0 0 0 4px var(--j-primary-soft);
}
.dispatch-metro-map .is-origin .dispatch-hop-marker::after,
.dispatch-metro-map .is-arrival .dispatch-hop-marker::after { background: var(--j-surface); }
.dispatch-metro-map .is-pending .dispatch-hop-marker {
  border-style: dashed;
  border-color: var(--j-muted-soft);
}
.dispatch-metro-map .is-planned-pending .dispatch-hop-marker {
  border-style: solid;
  border-color: color-mix(in srgb, var(--j-muted-soft) 55%, var(--j-border));
  background: var(--j-surface-subtle);
}
.dispatch-metro-map .is-planned-pending .dispatch-hop-marker::after {
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, var(--j-muted-soft) 62%, transparent);
}
.dispatch-metro-map .is-planned-pending .dispatch-route-stop-copy strong {
  color: var(--j-muted);
}
.dispatch-metro-map .is-planned-observed .dispatch-hop-marker {
  border-color: var(--j-primary);
  background: color-mix(in srgb, var(--j-primary-soft) 72%, var(--j-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-primary-soft) 52%, transparent);
}
.dispatch-metro-map .is-deviation .dispatch-hop-marker {
  border-color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 78%, var(--j-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-critical-soft) 52%, transparent);
}
.dispatch-metro-map .is-deviation .dispatch-hop-marker::after { background: var(--j-critical); }
.dispatch-metro-map .is-deviation:not(:last-child)::after {
  background: color-mix(in srgb, var(--j-critical) 55%, var(--j-border));
}
.dispatch-metro-map .is-unverified .dispatch-hop-marker {
  border-color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 70%, var(--j-surface));
}
.dispatch-metro-map .is-pending .dispatch-hop-marker::after { background: var(--j-muted-soft); }
.dispatch-metro-map .is-canceled .dispatch-hop-marker,
.dispatch-metro-map .is-purged .dispatch-hop-marker,
.dispatch-metro-map .is-closed .dispatch-hop-marker {
  border-color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--j-warning-soft) 64%, transparent);
}
.dispatch-metro-map .is-canceled .dispatch-hop-marker::after,
.dispatch-metro-map .is-purged .dispatch-hop-marker::after,
.dispatch-metro-map .is-closed .dispatch-hop-marker::after { background: var(--j-warning); }
.dispatch-metro-map .is-faulty .dispatch-hop-marker {
  border-color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 78%, var(--j-surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--j-critical-soft) 64%, transparent);
}
.dispatch-metro-map .is-faulty .dispatch-hop-marker::after { background: var(--j-critical); }
.dispatch-metro-map .is-recovery .dispatch-hop-marker {
  border-color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
}
.dispatch-metro-map .is-recovery .dispatch-hop-marker::after { background: var(--j-warning); }
.dispatch-route-stop-copy { min-width: 0; padding-bottom: 18px; }
.dispatch-route-stop-label {
  display: block;
  margin-bottom: 4px;
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dispatch-route-stop-copy strong {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  color: var(--j-ink-strong);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}
.dispatch-route-stop-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.dispatch-route-stop-title strong { min-width: 0; }
.dispatch-route-stop-title .dispatch-hop-elapsed { margin-top: 0; }
.dispatch-route-stop-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.dispatch-route-stop-meta time {
  color: var(--j-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.dispatch-hop-elapsed {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--j-primary) 34%, var(--j-border));
  border-radius: 6px;
  color: var(--j-primary-hover);
  background: color-mix(in srgb, var(--j-primary-soft) 62%, var(--j-surface));
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.event-detail-content .dispatch-route-overview {
  margin: 0;
  padding: 18px 20px;
}
.dispatch-route-verdict-copy { min-width: 0; }
.dispatch-routing-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 13%, transparent);
}
.dispatch-routing-inline[hidden] { display: none; }
.dispatch-routing-inline > span {
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dispatch-routing-inline > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--j-ink-strong);
  font-size: 11px;
  font-weight: 650;
}
.dispatch-routing-inline > small {
  grid-column: 1 / -1;
  color: var(--j-muted);
  font-size: 10px;
  line-height: 1.45;
}

.event-detail-content .dispatch-detail-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.event-detail-content .dispatch-detail-section {
  padding: 18px;
  border-radius: 10px;
}
.dispatch-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dispatch-card-heading .eyebrow { margin: 0 0 3px; color: var(--j-muted-soft); }
.dispatch-card-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--j-border-strong);
  border-radius: 8px;
  color: var(--j-primary-hover);
  background: var(--j-surface);
}
.dispatch-card-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.dispatch-timing-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 16px;
}
.dispatch-timing-progress::before {
  position: absolute;
  top: 5px;
  right: 16.66%;
  left: 16.66%;
  height: 2px;
  background: var(--j-border-strong);
  content: "";
}
.dispatch-timing-progress span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--j-muted-soft);
}
.dispatch-timing-progress i {
  width: 12px;
  height: 12px;
  border: 2px solid var(--j-border-strong);
  border-radius: 50%;
  background: var(--j-surface-subtle);
}
.dispatch-timing-progress small { font-size: 9px; font-style: normal; }
.dispatch-timing-progress .is-complete { color: var(--j-primary-hover); }
.dispatch-timing-progress .is-complete i {
  border-color: var(--j-primary);
  background: var(--j-primary);
  box-shadow: 0 0 0 3px var(--j-primary-soft);
}
.dispatch-timing-progress[data-tone="attention"] [data-step="arrived"].is-complete {
  color: var(--j-warning);
}
.dispatch-timing-progress[data-tone="attention"] [data-step="arrived"].is-complete i {
  border-color: var(--j-warning);
  background: var(--j-warning);
  box-shadow: 0 0 0 3px var(--j-warning-soft);
}
.dispatch-timing-progress[data-tone="critical"] [data-step="arrived"].is-complete {
  color: var(--j-critical);
}
.dispatch-timing-progress[data-tone="critical"] [data-step="arrived"].is-complete i {
  border-color: var(--j-critical);
  background: var(--j-critical);
  box-shadow: 0 0 0 3px var(--j-critical-soft);
}
.dispatch-carrier-feature {
  margin: 16px 0 2px;
  padding: 12px 0;
  border-top: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
}
.dispatch-carrier-feature small {
  display: block;
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dispatch-carrier-feature strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--j-ink-strong);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.dispatch-detail-main .dispatch-technical { margin: 0; border-radius: 10px; }

@media (max-width: 960px) {
  .dispatch-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .dispatch-detail-main { order: 1; }
  .event-detail-content .dispatch-route-map { order: 2; }
}

@media (max-width: 700px) {
  .dispatch-detail-content.event-detail-content { padding: 14px; }
  .event-detail-content .dispatch-detail-sections { grid-template-columns: minmax(0, 1fr); }
  .event-detail-content .dispatch-route-map { padding: 16px; }
  .dispatch-routing-inline { grid-template-columns: minmax(0, 1fr); }
  .dispatch-routing-inline > small { grid-column: auto; }
}

/* One status-chip language for lifecycle, outcome, and route assessment. */
.event-detail-heading .dispatch-detail-badges {
  align-items: center;
  gap: 6px;
}
.event-detail-heading .dispatch-detail-badges > .pill,
.event-detail-heading .dispatch-detail-badges > .dispatch-route-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid var(--j-border-strong);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface-active);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
}
.event-detail-heading .dispatch-detail-badges > .pill.completed,
.event-detail-heading .dispatch-detail-badges > .pill.delivered,
.event-detail-heading .dispatch-detail-badges > .pill.success,
.event-detail-heading .dispatch-detail-badges > .dispatch-route-status[data-tone="success"] {
  border-color: color-mix(in srgb, var(--j-healthy) 36%, var(--j-border));
  color: var(--j-healthy);
  background: color-mix(in srgb, var(--j-healthy-soft) 78%, var(--j-surface));
}
.event-detail-heading .dispatch-detail-badges > .pill.purged,
.event-detail-heading .dispatch-detail-badges > .pill.canceled,
.event-detail-heading .dispatch-detail-badges > .pill.in_flight,
.event-detail-heading .dispatch-detail-badges > .dispatch-route-status[data-tone="attention"] {
  border-color: color-mix(in srgb, var(--j-warning) 36%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
}
.event-detail-heading .dispatch-detail-badges > .pill.faulty,
.event-detail-heading .dispatch-detail-badges > .pill.stalled {
  border-color: color-mix(in srgb, var(--j-critical) 38%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 80%, var(--j-surface));
}
.event-detail-heading .dispatch-detail-badges > .dispatch-route-status[data-tone="neutral"] {
  border-color: var(--j-border-strong);
  color: var(--j-muted);
  background: var(--j-surface-active);
}
.event-detail-heading .dispatch-detail-badges .dispatch-route-status-icon {
  width: 13px;
  height: 13px;
  stroke-width: 1.9;
}

/* Dispatch route connector: outcome is expressed by icon, line style, label, and color. */
.event-detail-content .dispatch-route-overview {
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  align-items: start;
}
.event-detail-content .dispatch-route-direction {
  position: relative;
  display: grid;
  width: 100%;
  height: 54px;
  min-width: 0;
  margin-top: 20px;
  place-items: start center;
  transform: none;
  color: var(--j-muted);
}
.event-detail-content .dispatch-route-direction::before {
  position: absolute;
  top: 13px;
  right: 7px;
  left: 7px;
  height: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    var(--j-border-strong) 0 6px,
    transparent 6px 10px
  );
  content: "";
}
.event-detail-content .dispatch-route-direction::after {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--j-muted-soft);
  border-right: 2px solid var(--j-muted-soft);
  transform: rotate(45deg);
  content: "";
}
.event-detail-content .dispatch-route-direction > .dispatch-route-state-icon {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid var(--j-border-strong);
  border-radius: 50%;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  transform: translateX(-50%);
}
.dispatch-route-state-icon svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.dispatch-route-state-icon [data-icon] { display: none; }
.dispatch-route-direction[data-state="delivered"] [data-icon="delivered"],
.dispatch-route-direction[data-state="in_flight"] [data-icon="in_flight"],
.dispatch-route-direction[data-state="stalled"] [data-icon="stalled"],
.dispatch-route-direction[data-state="pending"] [data-icon="pending"],
.dispatch-route-direction[data-state="canceled"] [data-icon="canceled"],
.dispatch-route-direction[data-state="faulty"] [data-icon="faulty"],
.dispatch-route-direction[data-state="purged"] [data-icon="purged"],
.dispatch-route-direction[data-state="closed"] [data-icon="closed"] { display: initial; }
.event-detail-content .dispatch-route-state-label {
  position: absolute;
  top: 34px;
  left: 50%;
  width: max-content;
  max-width: 128px;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--j-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .035em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.event-detail-content .dispatch-route-direction[data-state="delivered"]::before {
  background: var(--j-healthy);
}
.event-detail-content .dispatch-route-direction[data-state="delivered"]::after {
  border-color: var(--j-healthy);
}
.event-detail-content .dispatch-route-direction[data-state="delivered"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-healthy) 58%, var(--j-border));
  color: var(--j-healthy);
  background: color-mix(in srgb, var(--j-healthy-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="delivered"] .dispatch-route-state-label {
  color: var(--j-healthy);
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"]::before {
  background: linear-gradient(
    90deg,
    var(--j-warning) 0 52%,
    var(--j-border-strong) 52% 100%
  );
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"]::after {
  border-color: var(--j-muted-soft);
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"] > .dispatch-route-state-icon,
.event-detail-content .dispatch-route-direction[data-state="purged"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-warning) 58%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"] .dispatch-route-state-label,
.event-detail-content .dispatch-route-direction[data-state="purged"] .dispatch-route-state-label,
.event-detail-content .dispatch-route-direction[data-state="canceled"] .dispatch-route-state-label {
  color: var(--j-warning);
}
.event-detail-content .dispatch-route-direction[data-state="purged"]::before {
  background: repeating-linear-gradient(
    90deg,
    var(--j-warning) 0 7px,
    color-mix(in srgb, var(--j-warning) 25%, transparent) 7px 11px
  );
}
.event-detail-content .dispatch-route-direction[data-state="purged"]::after {
  border-color: var(--j-warning);
}
.event-detail-content .dispatch-route-direction[data-state="canceled"]::after,
.event-detail-content .dispatch-route-direction[data-state="faulty"]::after,
.event-detail-content .dispatch-route-direction[data-state="closed"]::after {
  border-color: var(--j-muted-soft);
}
.event-detail-content .dispatch-route-direction[data-state="canceled"][data-progress="started"]::before {
  background: linear-gradient(90deg, var(--j-warning) 0 48%, var(--j-border-strong) 48% 100%);
}
.event-detail-content .dispatch-route-direction[data-state="canceled"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-warning) 58%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="faulty"][data-progress="started"]::before {
  background: linear-gradient(90deg, var(--j-critical) 0 48%, var(--j-border-strong) 48% 100%);
}
.event-detail-content .dispatch-route-direction[data-state="faulty"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="faulty"] .dispatch-route-state-label {
  color: var(--j-critical);
}
.event-detail-content .dispatch-route-direction[data-state="stalled"]::before {
  background: repeating-linear-gradient(
    90deg,
    var(--j-critical) 0 7px,
    color-mix(in srgb, var(--j-critical) 22%, transparent) 7px 11px
  );
}
.event-detail-content .dispatch-route-direction[data-state="stalled"]::after {
  border-color: var(--j-critical);
}
.event-detail-content .dispatch-route-direction[data-state="stalled"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="stalled"] .dispatch-route-state-label {
  color: var(--j-critical);
}

/* Live dispatch language: the overview and detail use the same truthful state map. */
.pill.in_flight {
  border-color: color-mix(in srgb, var(--j-info) 28%, transparent);
  color: var(--j-info);
  background: var(--j-info-soft);
}
.event-detail-heading .dispatch-detail-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}
.event-detail-heading .dispatch-detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 5px;
}
.event-detail-heading .dispatch-detail-title-row h2 { margin: 0; }
.event-detail-heading .dispatch-detail-status-line .dispatch-detail-badges {
  margin-top: 0;
}
.event-detail-heading .dispatch-detail-badges > .pill.in_flight {
  border-color: color-mix(in srgb, var(--j-info) 40%, var(--j-border));
  color: var(--j-info);
  background: color-mix(in srgb, var(--j-info-soft) 82%, var(--j-surface));
}
.dispatch-live-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid var(--j-border);
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.dispatch-live-status[hidden] { display: none; }
.dispatch-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--j-healthy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-healthy) 14%, transparent);
}
.dispatch-live-status[data-status="updated"] {
  border-color: color-mix(in srgb, var(--j-info) 38%, var(--j-border));
  color: var(--j-info);
  background: color-mix(in srgb, var(--j-info-soft) 80%, var(--j-surface));
}
.dispatch-live-status[data-status="updated"] .dispatch-live-dot { background: var(--j-info); }
.dispatch-live-status[data-status="delayed"] {
  border-color: color-mix(in srgb, var(--j-warning) 38%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 80%, var(--j-surface));
}
.dispatch-live-status[data-status="delayed"] .dispatch-live-dot { background: var(--j-warning); }

.dispatch-slow-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--j-warning);
  font-weight: 700;
  white-space: nowrap;
}
.dispatch-slow-flag svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.event-detail-heading .dispatch-slow-badge {
  min-height: 26px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--j-warning) 36%, var(--j-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
  font-size: 10px;
  line-height: 1;
}

.dispatch-route {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
}
.dispatch-overview-connector {
  position: relative;
  display: grid;
  width: 48px;
  height: 28px;
  place-items: center;
  color: var(--j-muted-soft);
}
.dispatch-overview-connector::before {
  position: absolute;
  right: 3px;
  left: 3px;
  height: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--j-border-strong) 0 5px, transparent 5px 8px);
  content: "";
}
.dispatch-overview-connector::after {
  position: absolute;
  right: 3px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--j-muted-soft);
  border-right: 2px solid var(--j-muted-soft);
  transform: rotate(45deg);
  content: "";
}
.dispatch-overview-state-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 23px;
  height: 23px;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid var(--j-border-strong);
  border-radius: 50%;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.dispatch-overview-state-icon svg {
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.dispatch-overview-state-icon [data-icon] { display: none; }
.dispatch-overview-connector[data-state="delivered"] [data-icon="delivered"],
.dispatch-overview-connector[data-state="in_flight"] [data-icon="in_flight"],
.dispatch-overview-connector[data-state="stalled"] [data-icon="stalled"],
.dispatch-overview-connector[data-state="pending"] [data-icon="pending"],
.dispatch-overview-connector[data-state="canceled"] [data-icon="canceled"],
.dispatch-overview-connector[data-state="faulty"] [data-icon="faulty"],
.dispatch-overview-connector[data-state="purged"] [data-icon="purged"],
.dispatch-overview-connector[data-state="closed"] [data-icon="closed"] { display: initial; }
.dispatch-overview-connector[data-state="delivered"]::before { background: var(--j-healthy); }
.dispatch-overview-connector[data-state="delivered"]::after { border-color: var(--j-healthy); }
.dispatch-overview-connector[data-state="delivered"] .dispatch-overview-state-icon {
  border-color: color-mix(in srgb, var(--j-healthy) 58%, var(--j-border));
  color: var(--j-healthy);
  background: color-mix(in srgb, var(--j-healthy-soft) 84%, var(--j-surface));
}
.dispatch-overview-connector[data-state="in_flight"]::before {
  background: linear-gradient(90deg, var(--j-info) 0 54%, var(--j-border-strong) 54% 100%);
}
.dispatch-overview-connector[data-state="in_flight"]::after { border-color: var(--j-info); }
.dispatch-overview-connector[data-state="in_flight"] .dispatch-overview-state-icon {
  border-color: color-mix(in srgb, var(--j-info) 58%, var(--j-border));
  color: var(--j-info);
  background: color-mix(in srgb, var(--j-info-soft) 84%, var(--j-surface));
}
.dispatch-overview-connector[data-state="purged"]::before {
  background: repeating-linear-gradient(90deg, var(--j-warning) 0 6px, color-mix(in srgb, var(--j-warning) 22%, transparent) 6px 9px);
}
.dispatch-overview-connector[data-state="purged"]::after { border-color: var(--j-warning); }
.dispatch-overview-connector[data-state="purged"] .dispatch-overview-state-icon,
.dispatch-overview-connector[data-state="canceled"] .dispatch-overview-state-icon {
  border-color: color-mix(in srgb, var(--j-warning) 58%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 84%, var(--j-surface));
}
.dispatch-overview-connector[data-state="canceled"][data-progress="started"]::before {
  background: linear-gradient(90deg, var(--j-warning) 0 48%, var(--j-border-strong) 48% 100%);
}
.dispatch-overview-connector[data-state="faulty"][data-progress="started"]::before {
  background: linear-gradient(90deg, var(--j-critical) 0 48%, var(--j-border-strong) 48% 100%);
}
.dispatch-overview-connector[data-state="faulty"] .dispatch-overview-state-icon {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 84%, var(--j-surface));
}
.dispatch-overview-connector[data-state="stalled"]::before {
  background: repeating-linear-gradient(
    90deg,
    var(--j-critical) 0 6px,
    color-mix(in srgb, var(--j-critical) 22%, transparent) 6px 9px
  );
}
.dispatch-overview-connector[data-state="stalled"]::after {
  border-color: var(--j-critical);
}
.dispatch-overview-connector[data-state="stalled"] .dispatch-overview-state-icon {
  border-color: color-mix(in srgb, var(--j-critical) 58%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 84%, var(--j-surface));
}

/* In-flight is informational, not a warning. Keep detail and overview consistent. */
.event-detail-content .dispatch-route-direction[data-state="in_flight"]::before {
  background: linear-gradient(90deg, var(--j-info) 0 52%, var(--j-border-strong) 52% 100%);
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"]::after {
  border-color: var(--j-info);
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"] > .dispatch-route-state-icon {
  border-color: color-mix(in srgb, var(--j-info) 58%, var(--j-border));
  color: var(--j-info);
  background: color-mix(in srgb, var(--j-info-soft) 82%, var(--j-surface));
}
.event-detail-content .dispatch-route-direction[data-state="in_flight"] .dispatch-route-state-label {
  color: var(--j-info);
}

.dispatch-live-updated .dispatch-route-direction,
.dispatch-live-updated .dispatch-detail-badges,
.dispatch-route-stop.is-live-new {
  animation: dispatch-live-change 280ms ease-out both;
}
@keyframes dispatch-live-change {
  from { opacity: .58; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dispatch-flow-summary > div[data-tone="info"]::before { background: var(--j-info); }

@media (max-width: 700px) {
  .dispatch-route { grid-template-columns: minmax(0, 1fr); }
  .dispatch-overview-connector { display: none; }
}

@media (max-width: 560px) {
  .event-detail-heading .dispatch-detail-title-row { align-items: flex-start; }
  .event-detail-heading .dispatch-detail-status-line { width: 100%; }
}

@media (max-width: 700px) {
  .event-detail-content .dispatch-route-overview {
    grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  }
  .event-detail-content .dispatch-route-state-label { max-width: 100px; }
}

@media (max-width: 430px) {
  .event-detail-content .dispatch-route-overview { grid-template-columns: minmax(0, 1fr); }
  .event-detail-content .dispatch-route-direction {
    width: 100%;
    height: 58px;
    margin-top: 0;
    place-items: start;
  }
  .event-detail-content .dispatch-route-direction::before {
    top: 0;
    right: auto;
    bottom: 4px;
    left: 13px;
    width: 2px;
    height: auto;
  }
  .event-detail-content .dispatch-route-direction::after {
    top: auto;
    right: auto;
    bottom: 4px;
    left: 9px;
    border-top: 0;
    border-right: 2px solid var(--j-muted-soft);
    border-bottom: 2px solid var(--j-muted-soft);
    transform: rotate(45deg);
  }
  .event-detail-content .dispatch-route-direction > .dispatch-route-state-icon {
    top: 10px;
    left: 0;
    transform: none;
  }
  .event-detail-content .dispatch-route-state-label {
    top: 17px;
    left: 40px;
    max-width: calc(100% - 48px);
    text-align: left;
    transform: none;
  }
}

/* Alarm detail: preserve the source signal while adding derived incident context. */
.alarm-detail-dialog.event-detail-dialog {
  width: min(1120px, calc(100% - 32px));
}
.alarm-detail-title-row { align-items: center; }
.event-detail-heading .alarm-detail-title-row .dispatch-detail-badges { margin-top: 0; }
.event-detail-heading .dispatch-detail-badges > .pill.stale,
.event-detail-heading .dispatch-detail-badges > .pill.unconfirmed,
.event-detail-heading .dispatch-detail-badges > .pill.class-1,
.event-detail-heading .dispatch-detail-badges > .pill.class-2,
.event-detail-heading .dispatch-detail-badges > .pill.class-4 {
  border-color: color-mix(in srgb, var(--j-warning) 36%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
}
.event-detail-heading .dispatch-detail-badges > .pill.active,
.event-detail-heading .dispatch-detail-badges > .pill.class-3 {
  border-color: color-mix(in srgb, var(--j-critical) 38%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 80%, var(--j-surface));
}
.event-detail-heading .dispatch-detail-badges > .pill.alarm-origin-badge {
  border-color: color-mix(in srgb, var(--j-info) 42%, var(--j-border));
  color: var(--j-info);
  background: color-mix(in srgb, var(--j-info-soft) 82%, var(--j-surface));
}

.alarm-assessment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(290px, .72fr);
  align-items: center;
  gap: 16px 20px;
  padding: 18px 20px;
  border: 1px solid var(--j-border);
  border-radius: 12px;
  background: var(--j-surface-subtle);
}
.alarm-assessment-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--j-border-strong);
  border-radius: 9px;
  color: var(--j-muted);
  background: var(--j-surface);
}
.alarm-assessment-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.alarm-assessment h3 { margin: 3px 0 0; color: var(--j-ink-strong); font-size: 15px; line-height: 1.35; }
.alarm-assessment > div > p:last-child { max-width: 650px; margin: 5px 0 0; color: var(--j-muted); font-size: 12px; line-height: 1.5; }
.alarm-assessment[data-tone="success"] .alarm-assessment-icon {
  border-color: color-mix(in srgb, var(--j-healthy) 35%, var(--j-border));
  color: var(--j-healthy);
  background: color-mix(in srgb, var(--j-healthy-soft) 75%, var(--j-surface));
}
.alarm-assessment[data-tone="attention"] .alarm-assessment-icon {
  border-color: color-mix(in srgb, var(--j-warning) 38%, var(--j-border));
  color: var(--j-warning);
  background: color-mix(in srgb, var(--j-warning-soft) 78%, var(--j-surface));
}
.alarm-assessment[data-tone="critical"] .alarm-assessment-icon {
  border-color: color-mix(in srgb, var(--j-critical) 38%, var(--j-border));
  color: var(--j-critical);
  background: color-mix(in srgb, var(--j-critical-soft) 78%, var(--j-surface));
}
.alarm-assessment-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--j-border);
  border-radius: 9px;
  background: var(--j-surface);
}
.alarm-assessment-facts > div { min-width: 0; padding: 10px 12px; }
.alarm-assessment-facts > div + div { border-left: 1px solid var(--j-border); }
.alarm-assessment-facts > div:nth-child(odd) { border-left: 0; }
.alarm-assessment-facts > div:nth-child(n + 3) { border-top: 1px solid var(--j-border); }
.alarm-assessment-facts dt {
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.alarm-assessment-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--j-ink-strong); font-size: 12px; font-weight: 650; }

.alarm-operational-grid {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: stretch;
}
.alarm-lifecycle-card { min-height: 100%; }
.alarm-incident-context {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--j-border);
  border-radius: 12px;
  background: var(--j-surface-subtle);
}
.alarm-context-help { max-width: 660px; margin: 5px 0 0; color: var(--j-muted); font-size: 11px; line-height: 1.45; }
.alarm-context-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--j-border); }
.alarm-context-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alarm-context-heading h4 { margin: 0; color: var(--j-ink-strong); font-size: 12px; font-weight: 700; }
.alarm-context-summary { margin: 7px 0 0; color: var(--j-muted); font-size: 11px; line-height: 1.45; }
.alarm-context-list { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.alarm-context-list > li + li { border-top: 1px solid var(--j-border); }
.alarm-context-link {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 4px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.alarm-context-link:hover { color: inherit; background: color-mix(in srgb, var(--j-surface-active) 70%, transparent); transform: none; }
.alarm-context-link:focus-visible { outline: 3px solid rgba(165, 175, 105, .24); outline-offset: 2px; }
.alarm-context-link > span:first-child { display: grid; min-width: 0; gap: 2px; }
.alarm-context-link small { color: var(--j-primary-hover); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.alarm-context-link strong { overflow-wrap: anywhere; color: var(--j-ink-strong); font-size: 12px; line-height: 1.35; }
.alarm-context-link > span:first-child > span { overflow-wrap: anywhere; color: var(--j-muted); font-size: 10px; line-height: 1.35; }
.alarm-context-link > .pill { flex: 0 0 auto; }
.alarm-context-empty,
.alarm-context-more { padding: 12px 4px; color: var(--j-muted); font-size: 11px; line-height: 1.45; }
.alarm-context-more { color: var(--j-primary-hover); }

.alarm-revision-history {
  padding: 0;
  overflow: hidden;
}
.alarm-revision-history > summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}
.alarm-revision-history > summary::-webkit-details-marker { display: none; }
.alarm-revision-history > summary::after { content: "+"; color: var(--j-primary-hover); font-size: 18px; line-height: 1; }
.alarm-revision-history[open] > summary::after { content: "−"; }
.alarm-revision-history > summary > span:first-child { display: grid; gap: 2px; }
.alarm-revision-history > summary .eyebrow { margin: 0; }
.alarm-revision-history > summary strong { color: var(--j-ink-strong); font-size: 13px; }
.alarm-revision-history > summary > .dispatch-hop-count { margin-left: auto; }
.alarm-revision-history > .alarm-revision-list { margin: 0; padding: 0 18px 14px; border-top: 1px solid var(--j-border); }

.alarm-live-updated .alarm-assessment,
.alarm-live-updated .alarm-detail-badges,
.alarm-live-updated .alarm-context-list {
  animation: dispatch-live-change 280ms ease-out both;
}

@media (max-width: 900px) {
  .alarm-assessment { grid-template-columns: auto minmax(0, 1fr); }
  .alarm-assessment-facts { grid-column: 1 / -1; }
  .alarm-operational-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .alarm-detail-title-row { align-items: flex-start; }
  .alarm-assessment { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .alarm-assessment-facts { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .alarm-assessment-facts > div + div { border-top: 1px solid var(--j-border); border-left: 0; }
  .alarm-context-link { align-items: flex-start; }
  .alarm-context-link > .pill { margin-top: 2px; }
}

/* Alert workspace: semantic signal flow and scan-friendly operational rows. */
.summary-grid.alarm-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alarm-summary-card {
  display: grid;
  min-height: 146px;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 5px;
}
.alarm-summary-card[data-tone="good"] { border-color: color-mix(in srgb, var(--j-healthy) 35%, var(--j-border)); }
.alarm-summary-card[data-tone="info"] { border-color: color-mix(in srgb, var(--j-info) 32%, var(--j-border)); }
.alarm-summary-card[data-tone="warn"] { border-color: color-mix(in srgb, var(--j-warning) 35%, var(--j-border)); }
.alarm-summary-card[data-tone="bad"] { border-color: color-mix(in srgb, var(--j-critical) 35%, var(--j-border)); }
.alarm-summary-status {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--j-muted);
  background: var(--j-surface-active);
  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.alarm-summary-card[data-tone="good"] .alarm-summary-status { color: var(--j-healthy); background: var(--j-healthy-soft); }
.alarm-summary-card[data-tone="info"] .alarm-summary-status { color: var(--j-info); background: var(--j-info-soft); }
.alarm-summary-card[data-tone="warn"] .alarm-summary-status { color: var(--j-warning); background: var(--j-warning-soft); }
.alarm-summary-card[data-tone="bad"] .alarm-summary-status { color: var(--j-critical); background: var(--j-critical-soft); }
.alarm-summary-label {
  margin-top: 7px;
  color: var(--j-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.alarm-summary-card .alarm-summary-value {
  align-self: end;
  margin-top: 5px;
  font-size: 31px;
}
.alarm-summary-detail {
  margin-top: 4px;
  color: var(--j-muted) !important;
  font-size: 11px !important;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.alarm-activity-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(118px, .38fr);
  align-items: center;
  gap: 18px;
}
.alarm-signal-summary,
.alarm-condition-summary {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.alarm-signal-description {
  overflow: hidden;
  color: var(--j-ink-strong);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alarm-object-summary {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}
.alarm-object-summary small,
.alarm-condition-summary small {
  flex: 0 0 auto;
  color: var(--j-muted-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
}
.alarm-object-summary .pts-object-reference {
  overflow: hidden;
  min-width: 0;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alarm-condition-summary { justify-items: end; text-align: right; }
.alarm-condition-summary strong {
  color: var(--j-ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}
.pill.critical { color: var(--j-critical); background: var(--j-critical-soft); }
.pill.unconfirmed { color: var(--j-warning); background: var(--j-warning-soft); }
.alarm-severity,
.alarm-signal-role,
.alarm-context-flag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--j-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
}
.alarm-severity.class-0 { color: var(--j-info); }
.alarm-severity.class-1,
.alarm-severity.class-4 { color: var(--j-warning); }
.alarm-severity.class-2,
.alarm-severity.class-3 { color: var(--j-critical); }
.alarm-context-flag { color: var(--j-warning); }

.alarm-list-heading { align-items: center; }
.alarm-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
}
.alarm-page-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.alarm-page-columns {
  display: grid;
  grid-template-columns: minmax(135px, .66fr) minmax(330px, 1.82fr) minmax(118px, .5fr) minmax(180px, .84fr) minmax(138px, .62fr);
  align-items: center;
  gap: 16px;
  padding: 7px 16px;
  border-top: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted-soft);
  background: var(--j-surface-subtle);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
}
.alarm-page-columns > span:last-child { text-align: right; }
.alarm-page-item { border-bottom: 1px solid var(--j-border); }
.alarm-page-item:last-child { border-bottom: 0; }
.alarm-page-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: minmax(135px, .66fr) minmax(330px, 1.82fr) minmax(118px, .5fr) minmax(180px, .84fr) minmax(138px, .62fr);
  grid-template-areas: "heading signal status context time";
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  transition: background-color 160ms ease-out;
}
.alarm-page-row:hover { background: var(--j-surface-active); }
.alarm-page-row:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
  background: var(--j-primary-soft);
}
.alarm-page-top { display: contents; }
.alarm-page-heading,
.alarm-page-status,
.alarm-page-context {
  display: flex;
  min-width: 0;
}
.alarm-page-heading {
  grid-area: heading;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}
.alarm-page-heading .alarm-reference { font-size: 14px; }
.alarm-page-heading .alarm-site {
  overflow: hidden;
  max-width: 100%;
  color: var(--j-muted);
  background: transparent;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alarm-page-status {
  grid-area: status;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.alarm-event-timing {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 1px;
}
.alarm-page-status .alarm-event-timing { justify-items: start; }
.alarm-event-time {
  color: var(--j-muted-soft);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}
.alarm-page-time {
  display: block;
  grid-area: time;
  justify-self: end;
  text-align: right;
}
.alarm-page-signal { grid-area: signal; }
.alarm-page-signal .alarm-signal-description { font-size: 12px; }
.alarm-page-signal .alarm-object-summary small { font-size: 9px; }
.alarm-page-condition {
  overflow: hidden;
  max-width: 100%;
  color: var(--j-ink);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alarm-page-context {
  grid-area: context;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px 9px;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.35;
}
.alarm-page-context > span:not(:first-child)::before {
  margin-right: 9px;
  color: var(--j-border-strong);
  content: "·";
}
.alarm-page-loading {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(135px, .66fr) minmax(330px, 1.82fr) minmax(118px, .5fr) minmax(180px, .84fr) minmax(138px, .62fr);
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--j-border);
}
.alarm-page-loading span {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--j-surface-active) 25%, var(--j-border) 50%, var(--j-surface-active) 75%);
  background-size: 200% 100%;
  animation: dispatch-loading-shimmer 1.4s ease-in-out infinite;
}
.alarm-page-loading span:first-child { width: 74%; }
.alarm-page-loading span:last-child { width: 70%; }
.alarm-page-empty {
  display: grid;
  min-height: 180px;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 30px 18px;
  color: var(--j-muted);
  text-align: center;
}
.alarm-page-empty strong { color: var(--j-ink-strong); font-size: 14px; }
.alarm-page-empty span { max-width: 430px; }
.alarm-page-empty button { margin-top: 8px; }

@media (max-width: 1100px) {
  .summary-grid.alarm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alarm-page-columns { display: none; }
  .alarm-page-row {
    min-height: 94px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "heading status"
      "signal context"
      "time time";
    row-gap: 8px;
  }
  .alarm-page-time { justify-self: end; }
  .alarm-page-loading { min-height: 94px; grid-template-columns: .7fr 2fr 1fr; }
  .alarm-page-loading span:nth-child(n + 4) { display: none; }
}

@media (max-width: 700px) {
  .alarm-list-heading,
  .alarm-list-controls { align-items: stretch; flex-direction: column; }
  .alarm-list-controls { width: 100%; gap: 8px; }
  .alarm-list-controls .filter { justify-content: space-between; }
  .alarm-list-controls .filter select { flex: 1; }
  .alarm-page-row {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "top" "signal" "context" "time";
    gap: 9px;
    padding-block: 12px;
  }
  .alarm-page-top {
    display: flex;
    grid-area: top;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .alarm-page-status { width: auto; align-items: flex-end; }
  .alarm-page-time { justify-self: start; text-align: left; }
  .alarm-page-time .alarm-event-timing { justify-items: start; }
  .alarm-page-loading { min-height: 112px; grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
  .alarm-page-loading span:first-child,
  .alarm-page-loading span:last-child { width: 58%; }
  .overview-alarm-row { min-height: 0; }
  .alarm-activity-body { grid-template-columns: 1fr; gap: 7px; }
  .alarm-condition-summary { justify-items: start; text-align: left; }
}

@media (max-width: 460px) {
  .summary-grid.alarm-summary { grid-template-columns: 1fr; }
  .alarm-summary-card { min-height: 132px; }
  .alarm-page-row { padding-inline: 14px; }
  .alarm-page-status { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .alarm-page-loading span { animation: none; }
}

/* Topology workspace: dense hierarchy with contextual object inspection. */
.topology-panel > .panel-heading p:not(.eyebrow) {
  margin-top: 3px;
  color: var(--j-muted);
  font-size: 12px;
}
.topology-header-meta {
  padding: 6px 9px;
  border: 1px solid var(--j-border);
  border-radius: 7px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 11px;
  font-weight: 650;
}
.topology-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--j-border);
  background: var(--j-surface);
}
.topology-search {
  min-width: min(100%, 310px);
  height: 40px;
  flex: 1 1 380px;
  border: 1px solid var(--j-control-border);
  border-radius: 8px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.topology-search:focus-within {
  border-color: var(--j-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-focus) 22%, transparent);
}
.topology-search input {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--j-ink-strong);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.4;
}
.topology-search input:focus,
.topology-search input:focus-visible {
  border: 0;
  outline: 0 !important;
  box-shadow: none;
}
.topology-search input::placeholder { color: var(--j-muted-soft); }
.topology-kind-filter {
  display: grid;
  min-width: 170px;
  gap: 4px;
  color: var(--j-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.topology-kind-filter select {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--j-control-border);
  border-radius: 8px;
  color: var(--j-ink);
  background-color: var(--j-surface-subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.topology-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
.topology-tool-button {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid var(--j-control-border);
  border-radius: 8px;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
  font-size: 11px;
  font-weight: 650;
}
.topology-tool-button:hover { border-color: var(--j-border-strong); color: var(--j-ink-strong); background: var(--j-surface-active); }
.topology-tool-button:focus-visible,
.topology-kind-filter select:focus-visible { outline: 3px solid color-mix(in srgb, var(--j-focus) 35%, transparent); outline-offset: 2px; }
.topology-legend {
  min-height: 36px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 11px;
}
.topology-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--j-primary);
  box-shadow: none;
}
.topology-legend-dot-muted { background: var(--j-muted-soft); box-shadow: none; }
#topologyFilterSummary { margin-left: auto; }
.topology-workspace {
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  background: var(--j-surface);
}
.topology-tree-pane {
  min-width: 0;
  border-right: 1px solid var(--j-border);
}
.topology-tree-pane > .status-message {
  min-height: 38px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted);
  background: transparent;
}
.topology-tree {
  max-height: min(68vh, 760px);
  padding: 0;
  overflow: auto;
  background: var(--j-surface);
  background-image: none;
}
.topology-site-group {
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--j-border);
  border-radius: 0;
  background: transparent;
}
.topology-site-group:first-child { border-top: 0; }
.topology-site-group > summary {
  min-height: 54px;
  padding: 9px 14px 9px 16px;
  border: 0;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
}
.topology-site-group > summary:hover { background: var(--j-surface-active); }
.topology-site-group > summary:focus-visible { outline: 3px solid var(--j-focus); outline-offset: -3px; }
.topology-site-group > summary::before {
  width: 7px;
  height: 7px;
  border-color: var(--j-muted);
}
.topology-site-summary-copy strong { color: var(--j-ink-strong); font-size: 13px; font-weight: 700; }
.topology-site-summary-copy small { margin-top: 2px; color: var(--j-muted); font-size: 11px; }
.topology-site-version {
  border: 0;
  border-radius: 5px;
  color: var(--j-muted);
  background: var(--j-surface-active);
  font-size: 10px;
}
.topology-level {
  gap: 2px;
  padding: 7px 10px 9px 34px;
}
.topology-zone-level {
  gap: 0;
  padding-top: 4px;
  padding-bottom: 6px;
}
.topology-level::before { top: 0; bottom: 15px; left: 22px; background: var(--j-border); }
.topology-level > li::before { top: 19px; left: -12px; width: 11px; background: var(--j-border); }
.topology-branch > .topology-level { padding-top: 2px; padding-bottom: 1px; }
.topology-zone {
  border-bottom: 1px solid color-mix(in srgb, var(--j-border) 70%, transparent);
}
.topology-zone:last-child { border-bottom: 0; }
.topology-zone > .topology-zone-heading {
  min-height: 43px;
  border-radius: 0;
}
.topology-zone > .topology-zone-heading .topology-node-marker {
  border: 1px solid var(--j-primary);
  background: transparent;
}
.topology-zone[open] > .topology-zone-heading {
  background: color-mix(in srgb, var(--j-surface-active) 58%, transparent);
}
.topology-device > .topology-node { min-height: 37px; }
.topology-node {
  display: grid;
  width: 100%;
  min-height: 39px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  color: var(--j-ink);
  background: transparent;
  font: inherit;
  text-align: left;
}
.topology-branch > .topology-node,
.topology-leaf > .topology-node { cursor: pointer; }
.topology-branch > .topology-node:hover,
.topology-leaf > .topology-node:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.topology-node:focus-visible { outline: 2px solid var(--j-focus); outline-offset: -2px; }
.topology-node.is-selected,
.topology-node.is-selected:hover { color: var(--j-ink-strong); background: var(--j-primary-soft); }
.topology-node-marker {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--j-primary);
  box-shadow: none;
}
.topology-node-copy strong { color: var(--j-ink-strong); font-size: 12px; font-weight: 650; }
.topology-node-copy small { margin-top: 1px; color: var(--j-muted); font-size: 10px; }
.topology-node-meta { gap: 5px; }
.topology-children,
.topology-references,
.topology-deleted,
.topology-current {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.topology-children,
.topology-references { color: var(--j-muted); background: var(--j-surface-active); }
.topology-current { color: var(--j-healthy); background: var(--j-healthy-soft); }
.topology-deleted { color: var(--j-warning); background: var(--j-warning-soft); }
.topology-node.is-deleted { color: var(--j-muted); background: transparent; }
.topology-node.is-deleted .topology-node-marker { background: var(--j-muted-soft); box-shadow: none; }
.topology-node.is-deleted .topology-node-copy strong { color: var(--j-muted); text-decoration: line-through; }
.topology-inspector {
  min-width: 0;
  max-height: min(68vh, 798px);
  padding: 18px;
  overflow: auto;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
}
.topology-inspector-empty {
  display: grid;
  min-height: 190px;
  align-content: center;
  gap: 5px;
  color: var(--j-muted);
}
.topology-inspector-empty h3,
.topology-inspector-heading h3 { color: var(--j-ink-strong); font-size: 16px; line-height: 1.3; }
.topology-inspector-empty p:last-child,
.topology-inspector-heading p:last-child { margin-top: 2px; color: var(--j-muted); font-size: 12px; line-height: 1.5; }
.topology-inspector-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--j-border);
}
.topology-inspector-heading > div { min-width: 0; }
.topology-inspector-heading h3 { overflow-wrap: anywhere; }
.topology-inspector-facts {
  display: grid;
  margin: 0;
}
.topology-inspector-facts > div,
.topology-inspector-technical dl > div {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid var(--j-border);
}
.topology-inspector-facts dt,
.topology-inspector-technical dt {
  color: var(--j-muted-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.topology-inspector-facts dd,
.topology-inspector-technical dd {
  margin: 0;
  color: var(--j-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.topology-inspector-technical { margin-top: 4px; }
.topology-inspector-activity {
  margin-top: 14px;
  border-top: 1px solid var(--j-border);
}
.topology-inspector-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 9px;
}
.topology-inspector-section-title {
  color: var(--j-ink-strong);
  font-size: 12px;
  font-weight: 700;
}
.topology-inspector-section-meta {
  color: var(--j-muted-soft);
  font-size: 11px;
}
.topology-activity-list {
  display: grid;
  gap: 10px;
}
.topology-activity-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--j-border);
  border-radius: 7px;
  background: var(--j-surface);
}
.topology-activity-tab {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  color: var(--j-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 680;
  line-height: 1;
}
.topology-activity-tab:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.topology-activity-tab.is-active {
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
}
.topology-activity-tab:focus-visible { outline: 2px solid var(--j-focus); outline-offset: 2px; }
.topology-activity-tab-count {
  min-width: 17px;
  padding: 2px 4px;
  border-radius: 4px;
  color: inherit;
  background: color-mix(in srgb, currentColor 11%, transparent);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.topology-activity-panel {
  display: grid;
  border-top: 1px solid var(--j-border);
}
.topology-activity-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.topology-activity-row:hover { color: var(--j-ink-strong); background: var(--j-surface-active); }
.topology-activity-row:focus-visible { outline: 2px solid var(--j-focus); outline-offset: 2px; }
.topology-activity-row-heading,
.topology-activity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topology-activity-kind {
  color: var(--j-primary-hover);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.topology-activity-row[data-kind="alarm"] .topology-activity-kind { color: var(--j-warning); }
.topology-activity-time,
.topology-activity-description,
.topology-activity-footer {
  color: var(--j-muted);
  font-size: 11px;
}
.topology-activity-row > strong {
  color: var(--j-ink-strong);
  font-size: 12px;
  font-weight: 680;
}
.topology-activity-description {
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.topology-activity-footer { justify-content: flex-start; }
.topology-activity-footer > :last-child { margin-left: auto; }
.topology-activity-status,
.topology-activity-class,
.topology-activity-slow {
  width: fit-content;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.topology-activity-status.is-success { color: var(--j-healthy); background: var(--j-healthy-soft); }
.topology-activity-status.is-attention,
.topology-activity-slow { color: var(--j-warning); background: var(--j-warning-soft); }
.topology-activity-class { color: var(--j-muted); background: var(--j-surface-active); }
.topology-activity-status.is-live { color: var(--j-info); background: var(--j-info-soft); }
.topology-activity-status.is-neutral { color: var(--j-muted); background: var(--j-surface-active); }
.topology-activity-empty,
.topology-activity-loading {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.45;
}
.topology-activity-empty strong { color: var(--j-ink); font-size: 11px; }
.topology-activity-empty .text-button { width: fit-content; margin-top: 4px; }
.topology-activity-list[aria-busy="true"] .topology-activity-loading { animation: topology-activity-pulse 1.4s ease-in-out infinite; }
@keyframes topology-activity-pulse { 50% { opacity: .55; } }
.topology-inspector-technical > summary {
  padding: 11px 0;
  color: var(--j-primary-hover);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.topology-inspector-technical > summary:focus-visible { outline: 2px solid var(--j-focus); outline-offset: 2px; }
.topology-inspector-technical dl { margin: 0; }
.topology-empty {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px 18px;
  color: var(--j-muted);
  text-align: center;
}
.topology-empty strong { color: var(--j-ink-strong); font-size: 14px; }
.topology-empty button { margin-top: 7px; }

@media (max-width: 1100px) {
  .topology-toolbar { flex-wrap: wrap; }
  .topology-search { flex-basis: 55%; }
  .topology-workspace { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 820px) {
  .topology-workspace { grid-template-columns: 1fr; }
  .topology-tree-pane { border-right: 0; border-bottom: 1px solid var(--j-border); }
  .topology-tree { max-height: 54vh; }
  .topology-inspector { max-height: none; }
  .topology-activity-tab { min-height: 44px; padding-inline: 12px; }
}

@media (max-width: 700px) {
  .topology-panel > .panel-heading { align-items: flex-start; }
  .topology-header-meta { white-space: normal; }
  .topology-toolbar { align-items: stretch; flex-direction: column; padding: 12px; }
  .topology-search,
  .topology-kind-filter { width: 100%; min-width: 0; }
  .topology-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .topology-legend { padding-inline: 12px; }
  #topologyFilterSummary { width: 100%; margin-left: 0; }
  .topology-site-group > summary { padding-inline: 12px; }
  .topology-level { padding-left: 27px; }
  .topology-level::before { left: 17px; }
  .topology-node { grid-template-columns: 6px minmax(0, 1fr); gap: 8px; padding-block: 7px; }
  .topology-node-meta { grid-column: 2; justify-content: flex-start; }
  .topology-inspector { padding: 15px; }
}

@media (max-width: 460px) {
  .topology-site-version { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topology-site-group > summary::before { transition: none; }
  .topology-activity-list[aria-busy="true"] .topology-activity-loading { animation: none; }
}

/* Carrier Fleet: dedicated reliability workspace. */
.carrier-workspace-panel { overflow: hidden; }
.carrier-workspace-heading {
  align-items: center;
  gap: 18px;
}
.carrier-workspace-heading > div:first-child { max-width: 650px; }
.carrier-workspace-heading > div:first-child > p:last-child {
  max-width: 640px;
  margin: 5px 0 0;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.5;
}
.carrier-workspace-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}
.carrier-workspace-panel > .status-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.carrier-workspace-panel > .status-message.carrier-status-error { color: var(--j-critical); }
.carrier-retry-button { min-height: 36px; flex: 0 0 auto; }
.carrier-search {
  display: grid;
  width: 210px;
  height: 38px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--j-control-border);
  border-radius: var(--j-radius-control);
  color: var(--j-muted);
  background: var(--j-surface);
}
.carrier-search:focus-within {
  border-color: var(--j-focus);
  box-shadow: none;
}
.carrier-search:has(input:focus-visible) {
  outline: 2px solid var(--j-focus);
  outline-offset: 2px;
}
.carrier-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.carrier-search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--j-ink-strong);
  background: transparent;
  font: inherit;
}
.carrier-search input:focus,
.carrier-search input:focus-visible {
  border-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}
.carrier-search input::placeholder { color: var(--j-muted); opacity: 1; }
.carrier-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  border-top: 1px solid var(--j-border);
}
.carrier-table-pane {
  min-width: 0;
  overflow-x: auto;
  border-right: 1px solid var(--j-border);
}
.carrier-table-columns,
.carrier-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) 112px 78px 78px 68px 92px 55px 112px;
  align-items: center;
  min-width: 930px;
  column-gap: 10px;
}
.carrier-table-columns {
  min-height: 36px;
  padding: 0 8px;
  border-bottom: 1px solid var(--j-border);
  background: var(--j-surface-subtle);
}
.carrier-table-columns > span { min-width: 0; }
.carrier-table-columns button {
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  color: var(--j-muted-soft);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.carrier-table-columns button:hover,
.carrier-table-columns button.active { color: var(--j-primary-hover); background: var(--j-surface-active); }
.carrier-table-columns button:focus-visible { outline: 2px solid var(--j-focus); outline-offset: -2px; }
.carrier-table-columns button i {
  min-width: 10px;
  color: var(--j-primary-hover);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}
.carrier-list,
.carrier-history-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.carrier-list {
  max-height: clamp(420px, calc(100dvh - 310px), 780px);
  overflow-y: auto;
}
.carrier-list-item { border-bottom: 1px solid var(--j-border); }
.carrier-list-item:last-child { border-bottom: 0; }
.carrier-row {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: minmax(190px, 1.5fr) 112px 78px 78px 68px 92px 55px 112px;
  align-items: center;
  min-width: 930px;
  column-gap: 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  color: var(--j-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.carrier-row:hover { background: var(--j-surface-active); }
.carrier-row:has(.carrier-row-open:focus-visible) {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--j-focus);
  outline-offset: -2px;
}
.carrier-list-item.selected .carrier-row { background: var(--j-primary-soft); }
.carrier-row > [role="cell"]:not(.carrier-row-identity) {
  font-variant-numeric: tabular-nums;
}
.carrier-row-identity {
  min-width: 0;
}
.carrier-row-open {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.carrier-row-open:focus-visible { outline: none; }
.carrier-row-open strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--j-ink-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-row-open small,
.carrier-row-activity { color: var(--j-muted); font-size: 10px; }
.carrier-row-emphasis { color: var(--j-ink-strong); font-weight: 700; }
.carrier-row-risk { color: var(--j-critical); }
.carrier-row-status { min-width: 0; }
.carrier-row-status .pill { justify-self: start; white-space: nowrap; }
.carrier-row-loading {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(190px, 1.5fr) 112px 78px 78px 68px 92px 55px 112px;
  align-items: center;
  min-width: 930px;
  column-gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--j-border);
}
.carrier-row-loading span {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--j-surface-active), var(--j-border), var(--j-surface-active));
  background-size: 220% 100%;
  animation: dispatch-loading-shimmer 1.3s linear infinite;
}
.carrier-list-empty,
.carrier-inspector-empty {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
  color: var(--j-muted);
  text-align: center;
}
.carrier-list-empty { min-height: 280px; padding: 0; }
.carrier-list-empty-cell {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
}
.carrier-list-empty strong,
.carrier-inspector-empty h3 { color: var(--j-ink-strong); font-size: 14px; }
.carrier-list-empty span,
.carrier-inspector-empty p:last-child { max-width: 330px; font-size: 11px; line-height: 1.5; }
.carrier-list-empty button { margin-top: 7px; }
.carrier-inspector {
  min-width: 0;
  max-height: clamp(456px, calc(100dvh - 274px), 816px);
  overflow-y: auto;
  padding: 18px;
  background: var(--j-surface-subtle);
}
.carrier-inspector-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.carrier-inspector-heading h3 {
  margin: 4px 0 0;
  color: var(--j-ink-strong);
  font-size: 18px;
}
.carrier-inspector-heading p:last-child {
  margin: 5px 0 0;
  color: var(--j-muted);
  font-size: 11px;
}
.carrier-inspector-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 17px 0 18px;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--j-surface);
}
.carrier-inspector-facts div {
  min-width: 0;
  padding: 10px 11px;
  border-right: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
}
.carrier-inspector-facts div:nth-child(2n) { border-right: 0; }
.carrier-inspector-facts div:nth-last-child(-n+2) { border-bottom: 0; }
.carrier-inspector-facts dt {
  color: var(--j-muted-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.carrier-inspector-facts dd {
  margin: 4px 0 0;
  color: var(--j-ink-strong);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.carrier-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted);
  font-size: 10px;
}
.carrier-history-title { color: var(--j-ink); font-size: 12px; font-weight: 700; }
.carrier-history-list li { border-bottom: 1px solid var(--j-border); }
.carrier-history-list li:last-child { border-bottom: 0; }
.carrier-history-row {
  display: grid;
  width: 100%;
  gap: 7px;
  padding: 12px 1px;
  border: 0;
  border-radius: 0;
  color: var(--j-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.carrier-history-row:hover { color: var(--j-ink-strong); }
.carrier-history-row:focus-visible { outline: 2px solid var(--j-focus); outline-offset: 2px; }
.carrier-history-top,
.carrier-history-route,
.carrier-history-meta {
  display: flex;
  align-items: center;
  min-width: 0;
}
.carrier-history-top { justify-content: space-between; gap: 8px; }
.carrier-history-top strong { color: var(--j-ink-strong); font-size: 11px; }
.carrier-history-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 5px;
  color: var(--j-muted);
  font-size: 10px;
}
.carrier-history-route > span:not(.carrier-history-arrow) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carrier-history-route > span:last-child { text-align: right; }
.carrier-history-arrow { color: var(--j-primary-hover); text-align: center; }
.carrier-history-meta { gap: 8px; color: var(--j-muted); font-size: 10px; }
.carrier-history-empty {
  display: grid;
  gap: 5px;
  padding: 20px 0;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.45;
}
.carrier-history-empty strong { color: var(--j-ink); }

@media (max-width: 1220px) {
  .carrier-workspace-heading { align-items: flex-start; flex-direction: column; }
  .carrier-workspace-controls { width: 100%; justify-content: flex-start; }
  .carrier-workspace { grid-template-columns: 1fr; }
  .carrier-table-pane { border-right: 0; border-bottom: 1px solid var(--j-border); }
  .carrier-list { max-height: 520px; }
  .carrier-inspector { max-height: none; }
}

@media (max-width: 900px) {
  .carrier-workspace-controls { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .carrier-workspace-controls { align-items: stretch; flex-direction: column; }
  .carrier-search { width: 100%; height: 44px; }
  .carrier-search input { height: 42px; }
  .carrier-workspace-controls .filter { width: 100%; }
  .carrier-workspace-controls select { width: 100%; min-height: 44px; }
  .carrier-table-columns,
  .carrier-table-columns button { min-height: 44px; }
  .carrier-inspector { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrier-row-loading span { animation: none; }
}

/* Users: identity-first access directory. */

.access-directory-panel { overflow: hidden; }
.access-directory-heading { align-items: flex-start; padding-bottom: 17px; }
.access-directory-heading .page-subtitle { max-width: 760px; }
.access-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px) minmax(140px, 170px) minmax(140px, 170px);
  align-items: end;
  gap: 10px;
  padding: 14px 20px;
  border-block: 1px solid var(--j-border);
  background: var(--j-surface-subtle);
}
.access-directory-toolbar .filter { gap: 5px; color: var(--j-muted); }
.access-directory-toolbar select,
.access-search input {
  min-height: 40px;
  border-color: var(--j-control-border);
  color: var(--j-ink-strong);
  background: var(--j-surface);
}
.access-search { position: relative; display: block; }
.access-search svg {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 12px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--j-muted);
  stroke-width: 1.8;
}
.access-search input { width: 100%; padding-left: 39px; }
.access-directory-summary {
  min-height: 39px;
  margin: 0;
  padding: 11px 20px;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-muted);
  font-size: 12px;
}
.access-directory { display: grid; }
.access-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.access-directory-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  table-layout: fixed;
}
.access-directory-table th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--j-border-strong);
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.access-directory-table th:nth-child(1) { width: 20%; }
.access-directory-table th:nth-child(2) { width: 15%; }
.access-directory-table th:nth-child(3) { width: 22%; }
.access-directory-table th:nth-child(4) { width: 9%; }
.access-directory-table th:nth-child(5) { width: 12%; }
.access-directory-table th:nth-child(6) { width: 22%; }
.access-directory-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--j-border);
  color: var(--j-ink);
  vertical-align: middle;
}
.access-directory-table tbody tr {
  background: var(--j-surface);
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.access-directory-table tbody .access-identity:hover {
  background: color-mix(in srgb, var(--j-primary) 5%, var(--j-surface));
  box-shadow: inset 2px 0 var(--j-primary);
}
.access-directory-table tbody tr:last-child td { border-bottom: 0; }
.access-directory-table .access-identity.is-disabled { opacity: .68; }
.access-directory-table .account-identity {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}
.access-directory-table .account-avatar {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  color: var(--j-primary-hover);
  background: var(--j-primary-soft);
  font-size: 12px;
}
.access-directory-table .account-name,
.access-directory-table .account-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.access-directory-table .account-name { color: var(--j-ink-strong); font-size: 12px; line-height: 1.25; }
.access-directory-table .account-identity small { grid-column: 2; color: var(--j-muted); font-size: 11px; }
.access-directory-table .account-identity .pill { grid-column: 3; grid-row: 1 / span 2; }
.access-account-scope,
.access-account-state,
.access-account-activity,
.access-tenant-cell {
  min-width: 0;
}
.access-account-scope strong,
.access-tenant-cell > strong,
.access-account-activity strong {
  display: block;
  color: var(--j-ink-strong);
  font-size: 12px;
}
.access-account-scope small,
.access-account-state small,
.access-account-activity small,
.access-tenant-cell > small {
  display: block;
  margin-top: 1px;
  color: var(--j-muted);
  font-size: 11px;
  line-height: 1.3;
}
.access-account-activity time {
  display: block;
  color: var(--j-ink-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.access-account-state .pill { margin-bottom: 1px; }
.access-identity-global-action { text-align: right; }
.access-actions-heading { text-align: right !important; }
.access-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.access-row-actions .compact-button {
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
}
.access-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.access-toggle-chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease-out;
}
.access-toggle[aria-expanded="true"] .access-toggle-chevron {
  transform: rotate(180deg);
}
.access-detail-row[hidden] { display: none; }
.access-directory-table .access-detail-cell {
  padding: 0;
  background: var(--j-surface-subtle);
}
.access-grant-drawer {
  padding: 0 12px 8px 54px;
  border-bottom: 1px solid var(--j-border-strong);
  box-shadow: inset 2px 0 var(--j-primary);
}
.access-grant-drawer > header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  padding: 8px 0 6px;
  color: var(--j-muted);
}
.access-grant-drawer > header strong { color: var(--j-ink-strong); font-size: 12px; }
.access-grant-drawer > header span { font-size: 11px; }
.access-grant-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.access-grant-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 90px minmax(220px, 1.25fr) 80px 110px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 0;
  border-top: 1px solid var(--j-border);
}
.access-grant-item.is-disabled { opacity: .64; }
.access-grant-tenant,
.access-grant-role,
.access-grant-scope { display: grid; min-width: 0; gap: 2px; }
.access-grant-tenant strong,
.access-grant-scope strong {
  overflow: hidden;
  color: var(--j-ink-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.access-grant-item small {
  overflow: hidden;
  color: var(--j-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.access-grant-role { justify-items: start; }
.access-grant-state { justify-self: start; }
.access-grant-action { text-align: right; }
.access-grant-action .compact-button { min-height: 30px; padding: 5px 9px; white-space: nowrap; }
.access-directory-empty { display: grid; justify-items: start; gap: 7px; padding: 32px 20px; }
.access-directory-empty strong { color: var(--j-ink-strong); }
.access-directory-empty p { margin: 0 0 5px; color: var(--j-muted); }
.access-directory-error {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-height: 180px;
  align-content: center;
  padding: 32px 20px;
  border-left: 3px solid var(--j-warning);
  background: var(--j-warning-soft);
}
.access-directory-error strong { color: var(--j-ink-strong); }
.access-directory-error p { max-width: 560px; margin: 0 0 5px; color: var(--j-muted); }
.access-directory-loading { display: grid; }
.access-identity-loading {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1fr) minmax(130px, .65fr) minmax(220px, 1fr) 100px;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 11px 20px;
  border-top: 1px solid var(--j-border);
}
.access-identity-loading span {
  display: block;
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--j-surface-subtle), var(--j-border-strong), var(--j-surface-subtle));
  background-size: 220% 100%;
  animation: access-loading-sweep 1.4s ease-in-out infinite;
}
.access-identity-loading .access-loading-avatar { width: 32px; height: 32px; border-radius: 50%; }
.access-identity-loading .access-loading-line { max-width: 130px; }
.access-identity-loading .access-loading-line-wide { max-width: 260px; }
.access-identity-loading .access-loading-control { width: 100px; height: 30px; justify-self: end; }
@keyframes access-loading-sweep { to { background-position: -220% 0; } }

.account-dialog {
  width: min(780px, calc(100% - 24px));
  max-height: min(92dvh, 900px);
  padding: 0;
  overflow: hidden;
}
.account-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(92dvh, 900px);
}
.account-dialog-header {
  position: relative;
  z-index: 3;
  align-items: flex-start;
  flex: none;
}
.account-dialog-header > div { min-width: 0; }
.account-dialog-header h2,
.account-dialog-header .page-subtitle { overflow-wrap: anywhere; }
.account-dialog-header .page-subtitle {
  max-width: 620px;
  margin-top: 3px;
  line-height: 1.45;
}
.account-dialog-body {
  min-height: 0;
  padding: 0 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.account-form-error { margin: 18px 0 0; }
.account-form-section {
  display: grid;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--j-border);
}
.account-form-section:last-child { border-bottom: 0; }
.account-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  align-items: start;
  gap: 20px;
}
.account-section-heading h3 {
  margin: 0;
  color: var(--j-ink-strong);
  font-size: 16px;
  letter-spacing: -.012em;
}
.account-section-heading > p {
  margin: 1px 0 0;
  color: var(--j-muted);
  font-size: 12px;
  line-height: 1.5;
}
.account-scope,
.account-mode,
.account-access,
.account-platform-access {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--j-border);
  border-radius: 10px;
  color: var(--j-ink);
  background: var(--j-surface-subtle);
}
.account-scope,
.account-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-scope legend,
.account-mode legend,
.account-access legend {
  padding-inline: 4px;
  color: var(--j-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.account-dialog .account-form-grid {
  gap: 14px;
  margin: 0;
  padding: 0;
}
.account-dialog .account-context-grid { grid-template-columns: minmax(0, 1fr); }
.account-dialog .account-permission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.account-dialog .field { align-content: start; }
.account-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--j-border-strong);
  border-radius: 8px;
  background: var(--j-surface);
}
.account-password-control:focus-within {
  border-color: var(--j-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-primary) 18%, transparent);
}
.account-password-control input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}
.account-password-toggle {
  min-width: 54px;
  min-height: 34px;
  margin: 3px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--j-primary);
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}
.account-password-toggle:hover { background: var(--j-primary-soft); }
.account-password-toggle:focus-visible {
  outline: 2px solid var(--j-primary);
  outline-offset: -2px;
}
.account-dialog .field-hint {
  color: var(--j-muted);
  line-height: 1.45;
}
.account-dialog .field-error {
  color: var(--j-critical);
  font-size: 12px;
  line-height: 1.4;
}
.account-dialog [aria-invalid="true"] {
  border-color: var(--j-critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j-critical) 16%, transparent);
}
.account-dialog .access-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 58px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--j-border);
  border-radius: 8px;
  background: var(--j-surface);
  cursor: pointer;
}
.account-dialog .access-option:hover {
  border-color: var(--j-border-strong);
  background: var(--j-surface-active);
}
.account-dialog .access-option:has(input:checked) { border-color: var(--j-primary); background: var(--j-primary-soft); }
.account-dialog .access-option input,
.account-dialog .site-choice input,
.account-dialog .access-switch input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--j-primary-solid);
}
.account-dialog .access-option span,
.access-switch span { display: grid; gap: 2px; }
.account-dialog .access-option strong,
.access-switch strong { color: var(--j-ink-strong); font-size: 12px; }
.account-dialog .access-option small,
.access-switch small { color: var(--j-muted); font-size: 11px; line-height: 1.4; }
.account-dialog .access-option-critical:has(input:checked) { border-color: var(--j-warning); background: var(--j-warning-soft); }
.account-shared-note {
  margin: 0;
  border-left-color: var(--j-info);
  color: var(--j-muted);
  background: color-mix(in srgb, var(--j-info) 8%, var(--j-surface-subtle));
}
.account-platform-access {
  display: grid;
  grid-template-columns: 1fr minmax(250px, .8fr);
  align-items: center;
  gap: 16px;
}
.account-platform-access p { margin: 4px 0 0; color: var(--j-muted); font-size: 12px; }
.account-platform-access > div > strong { display: block; margin-top: 3px; color: var(--j-ink-strong); }
.access-switch {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--j-border-strong);
  border-radius: 8px;
  background: var(--j-surface);
}
.account-dialog .account-access {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.account-dialog .account-access > .field-hint,
.account-dialog .account-site-selection,
.account-dialog .account-access > .field-error {
  grid-column: 1 / -1;
}
.account-dialog .account-access > .field-hint { margin: -2px 0 2px; }
.account-site-selection {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}
.account-selection-summary {
  color: var(--j-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.account-dialog .site-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
.account-dialog .site-choice {
  align-items: center;
  min-height: 40px;
  margin: 0;
  border: 1px solid var(--j-border);
  border-radius: 8px;
  color: var(--j-ink);
  background: var(--j-surface);
  cursor: pointer;
}
.account-dialog .site-choice:hover { border-color: var(--j-border-strong); }
.account-consequence-warning {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--j-warning) 42%, var(--j-border));
  border-radius: 9px;
  color: var(--j-warning);
  background: var(--j-warning-soft);
}
.account-consequence-warning svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.account-consequence-warning strong { color: var(--j-ink-strong); font-size: 12px; }
.account-consequence-warning p { margin: 3px 0 0; color: var(--j-muted); font-size: 12px; line-height: 1.45; }
.account-dialog-actions {
  position: relative;
  z-index: 3;
  min-height: 68px;
  padding: 13px 18px;
  border-top: 1px solid var(--j-border);
  background: var(--j-surface-subtle);
}
.account-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}
.account-form-status {
  min-width: 0;
  margin: 0 auto 0 0;
  color: var(--j-muted);
  font-size: 12px;
}
.account-discard-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}
.account-discard-prompt > div:first-child { display: grid; gap: 2px; }
.account-discard-prompt strong { color: var(--j-ink-strong); font-size: 12px; }
.account-discard-prompt span { color: var(--j-muted); font-size: 11px; }
.account-discard-actions { display: flex; gap: 8px; }
.account-dialog .danger-button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--j-critical);
  border-radius: 8px;
  color: var(--j-critical);
  background: var(--j-critical-soft);
  font-size: 12px;
  font-weight: 700;
}
.account-dialog .danger-button:hover {
  color: var(--j-ink-strong);
  background: color-mix(in srgb, var(--j-critical) 25%, var(--j-surface));
}
.account-dialog #saveAccountButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.account-dialog-shell[aria-busy="true"] #saveAccountButton::before {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--j-on-primary) 34%, transparent);
  border-top-color: var(--j-on-primary);
  border-radius: 50%;
  content: "";
  animation: account-button-spin 700ms linear infinite;
}
@keyframes account-button-spin { to { transform: rotate(360deg); } }

/* Platform client and Zone licensing workspace */

.clients-directory-panel { overflow: hidden; }
.clients-directory-heading,
.clients-toolbar,
.client-detail-header,
.client-section-heading,
.client-form-actions,
.client-zone-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.clients-toolbar {
  padding: 14px 18px;
  border-block: 1px solid var(--j-border);
  background: var(--j-surface-subtle);
}
.clients-toolbar .access-search { flex: 1 1 340px; max-width: 620px; }
.clients-toolbar .filter { min-width: 190px; }
.clients-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: 620px;
  border-top: 1px solid var(--j-border);
}
.client-directory {
  min-width: 0;
  border-right: 1px solid var(--j-border);
  background: var(--j-surface-subtle);
}
.client-directory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  width: 100%;
  min-height: 82px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--j-border);
  border-radius: 0;
  color: var(--j-ink);
  background: transparent;
  text-align: left;
  transition: background-color 160ms ease-out;
}
.client-directory-row:hover { background: var(--j-surface-active); }
.client-directory-row[data-selected="true"] {
  background: var(--j-primary-soft);
  box-shadow: inset 3px 0 0 var(--j-primary);
}
.client-directory-row[data-archived="true"] {
  color: var(--j-muted);
  background: color-mix(in srgb, var(--j-surface-subtle) 78%, var(--j-border));
}
.client-directory-row[data-archived="true"] .client-directory-identity strong {
  color: var(--j-muted);
}
.client-directory-identity,
.client-directory-counts {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.client-directory-identity strong,
.client-directory-counts strong {
  overflow: hidden;
  color: var(--j-ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-directory-identity small,
.client-directory-counts small {
  overflow: hidden;
  color: var(--j-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-directory-counts { justify-items: end; font-variant-numeric: tabular-nums; }
.client-license-state {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 8px;
  border: 1px solid var(--j-border);
  border-radius: 999px;
  color: var(--j-muted);
  background: var(--j-surface);
  font-size: 11px;
  font-weight: 700;
}
.client-license-state[data-tone="good"],
.status-chip[data-tone="good"] {
  border-color: color-mix(in srgb, var(--j-healthy) 42%, var(--j-border));
  color: var(--j-healthy);
  background: var(--j-healthy-soft);
}
.client-license-state[data-tone="warn"],
.status-chip[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--j-warning) 42%, var(--j-border));
  color: var(--j-warning);
  background: var(--j-warning-soft);
}
.client-license-state[data-tone="bad"],
.status-chip[data-tone="bad"] {
  border-color: color-mix(in srgb, var(--j-critical) 42%, var(--j-border));
  color: var(--j-critical);
  background: var(--j-critical-soft);
}
.client-license-state[data-tone="neutral"],
.status-chip[data-tone="neutral"] {
  border-color: var(--j-border);
  color: var(--j-muted);
  background: var(--j-surface-subtle);
}
.client-empty-state,
.client-zone-empty {
  display: grid;
  place-content: center;
  min-height: 180px;
  padding: 24px;
  color: var(--j-muted);
  text-align: center;
}
.client-empty-state strong,
.client-zone-empty strong { color: var(--j-ink-strong); }
.client-empty-state p,
.client-zone-empty p { max-width: 360px; margin: 5px 0 0; }
.client-detail {
  min-width: 0;
  padding: 0 20px 24px;
  background: var(--j-surface);
}
.client-detail-header {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 88px;
  padding: 16px 0;
  border-bottom: 1px solid var(--j-border);
  background: var(--j-surface);
}
.client-detail-header h2 { margin: 2px 0; color: var(--j-ink-strong); font-size: 21px; }
.client-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.client-detail-actions .secondary-button { min-height: 36px; }
.license-restricted-card {
  border-color: color-mix(in srgb, var(--j-warning) 34%, var(--j-border));
  background: var(--j-warning-soft);
}
.license-restricted-card .metric-status,
.license-restricted-card .metric-value { color: var(--j-warning); }
.status-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--j-border);
  border-radius: 999px;
  color: var(--j-muted);
  background: var(--j-surface-subtle);
  font-size: 12px;
  font-weight: 700;
}
.client-detail-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--j-border);
}
.client-detail-section:last-child { border-bottom: 0; }
.client-section-heading { align-items: flex-start; margin-bottom: 15px; }
.client-section-heading h3,
.client-zone-selection-heading h4 {
  margin: 0;
  color: var(--j-ink-strong);
  font-size: 16px;
}
.client-section-heading p,
.client-zone-selection-heading p {
  margin: 3px 0 0;
  color: var(--j-muted);
  font-size: 12px;
}
.client-seat-count {
  flex: 0 0 auto;
  color: var(--j-primary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.client-form { display: grid; gap: 14px; }
.client-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 14px;
}
.client-form-grid label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--j-muted);
  font-size: 12px;
  font-weight: 650;
}
.client-form-grid input,
.client-form-grid select,
.client-form-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border-color: var(--j-control-border);
  border-radius: var(--j-radius-control);
  color: var(--j-ink-strong);
  background: var(--j-surface-subtle);
}
.client-form-grid textarea { resize: vertical; }
.client-form[data-archived="true"] {
  opacity: .72;
}
.client-form[data-archived="true"] :is(input, select, textarea, button) {
  cursor: not-allowed;
}
.client-field-wide { grid-column: 1 / -1; }
.client-form-actions { justify-content: flex-end; }
.client-form-actions .refresh-button { min-height: 40px; }
.client-zone-selection {
  overflow: hidden;
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius-control);
  background: var(--j-surface-subtle);
}
.client-zone-selection-heading {
  padding: 12px 14px;
  border-bottom: 1px solid var(--j-border);
}
.client-zone-rows { max-height: 360px; overflow: auto; }
.client-zone-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--j-border);
  cursor: pointer;
}
.client-zone-row:last-child { border-bottom: 0; }
.client-zone-row:hover { background: var(--j-surface-active); }
.client-zone-row[data-included="true"] { background: var(--j-primary-soft); }
.client-zone-row[data-retired="true"] { opacity: .64; cursor: not-allowed; }
.client-zone-row input { width: 16px; height: 16px; }
.client-zone-identity { display: grid; min-width: 0; gap: 2px; }
.client-zone-identity strong {
  overflow: hidden;
  color: var(--j-ink-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-zone-identity small {
  overflow: hidden;
  color: var(--j-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-zone-state {
  color: var(--j-muted);
  font-size: 11px;
  font-weight: 700;
}
.client-zone-row[data-included="true"] .client-zone-state { color: var(--j-primary); }
.client-form .scope-notice { margin: 0; }
.client-form .form-error {
  margin: 0;
  color: var(--j-critical);
  font-size: 12px;
}
.client-form .form-status {
  min-height: 18px;
  margin: 0;
  color: var(--j-muted);
  font-size: 12px;
}
.client-lifecycle-section {
  display: grid;
  gap: 14px;
}
.client-lifecycle-heading,
.client-archive-confirmation,
.client-archive-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.client-lifecycle-heading h3 {
  margin: 2px 0 0;
  color: var(--j-ink-strong);
  font-size: 16px;
}
.client-lifecycle-heading p:not(.eyebrow),
.client-archive-confirmation p {
  margin: 4px 0 0;
  color: var(--j-muted);
  font-size: 12px;
  line-height: 1.5;
}
.client-lifecycle-heading > div,
.client-archive-confirmation > div:first-child { min-width: 0; }
.client-lifecycle-heading > button { flex: 0 0 auto; min-height: 44px; }
.client-archive-confirmation {
  align-items: flex-start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--j-critical) 34%, var(--j-border));
  border-radius: var(--j-radius-control);
  background: var(--j-critical-soft);
}
.client-archive-confirmation strong { color: var(--j-ink-strong); }
.client-archive-actions { flex: 0 0 auto; gap: 8px; }
.client-archive-actions button { min-height: 44px; }
.client-lifecycle-section > .form-error,
.client-lifecycle-section > .form-status { margin: 0; font-size: 12px; }
.client-lifecycle-section > .form-error { color: var(--j-critical); }
.client-lifecycle-section > .form-status { min-height: 18px; color: var(--j-muted); }
.topology-license-locked {
  border-color: color-mix(in srgb, var(--j-warning) 40%, var(--j-border)) !important;
  color: var(--j-warning) !important;
  background: var(--j-warning-soft) !important;
}
.topology-license-message {
  margin: 0;
  padding: 10px 14px 13px 43px;
  color: var(--j-muted);
  font-size: 12px;
}
.health-row-locked { background: var(--j-warning-soft); }
.health-state-locked {
  border-color: color-mix(in srgb, var(--j-warning) 40%, var(--j-border));
  color: var(--j-warning);
  background: var(--j-warning-soft);
}

@media (max-width: 1040px) {
  .access-directory-toolbar { grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, 1fr)); }
  .access-directory-table { min-width: 980px; }
  .clients-workspace { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .access-directory-toolbar { grid-template-columns: 1fr; }
  .access-directory-toolbar select,
  .access-search input { min-height: 44px; }
  .access-directory-summary { padding-inline: 16px; }
  .access-table-wrap { scrollbar-width: thin; }
  .access-directory-table { min-width: 920px; }
  .account-scope,
  .account-mode,
  .account-platform-access { grid-template-columns: 1fr; }
  .account-dialog { width: min(100% - 16px, 780px); max-height: calc(100dvh - 16px); }
  .account-dialog-shell { max-height: calc(100dvh - 16px); }
  .account-dialog-header { min-height: 76px; padding: 14px 16px; }
  .account-dialog #closeAccountDialog { min-width: 44px; min-height: 44px; }
  .account-dialog-body { padding: 0 16px; scrollbar-gutter: auto; }
  .account-section-heading { grid-template-columns: 1fr; gap: 6px; }
  .account-dialog .account-form-grid,
  .account-dialog .account-permission-grid,
  .account-dialog .account-access,
  .account-dialog .site-choice-grid { grid-template-columns: 1fr; }
  .account-dialog .account-access > * { grid-column: 1; }
  .account-dialog-actions { padding: 12px 16px; }
  .account-primary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-form-status { grid-column: 1 / -1; min-height: 18px; }
  .account-primary-actions button { min-height: 44px; }
  .account-dialog .site-choice { min-height: 44px; }
  .account-discard-prompt { align-items: stretch; flex-direction: column; }
  .account-discard-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-discard-actions button { min-height: 44px; }
  .access-identity-loading { grid-template-columns: 40px 1fr; }
  .access-identity-loading .access-loading-line:not(.access-loading-line-wide),
  .access-identity-loading .access-loading-control { display: none; }
  .clients-toolbar,
  .client-detail-header,
  .client-section-heading,
  .client-lifecycle-heading,
  .client-archive-confirmation { align-items: stretch; flex-direction: column; }
  .clients-toolbar .access-search,
  .clients-toolbar .filter { width: 100%; max-width: none; }
  .clients-workspace { grid-template-columns: 1fr; }
  .client-directory { max-height: 360px; border-right: 0; border-bottom: 1px solid var(--j-border); }
  .client-detail { padding-inline: 16px; }
  .client-detail-header { position: static; }
  .client-detail-actions {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
  .client-detail-header .status-chip { align-self: flex-start; }
  .client-lifecycle-heading > button { width: 100%; }
  .client-archive-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .client-form-grid { grid-template-columns: 1fr; }
  .client-field-wide { grid-column: 1; }
  .client-form-grid input,
  .client-form-grid select,
  .client-form-grid textarea,
  .client-form-actions .refresh-button { min-height: 44px; font-size: 16px; }
  .client-zone-row { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .access-identity-loading span { animation: none; }
  .account-dialog-shell[aria-busy="true"] #saveAccountButton::before { animation: none; }
}