/* DECT Monitor — embedded SPA tab styles. Scoped under `.dectmon` so it drops
 * into spectrum-platform-next without touching global styles. Ported from
 * dect-monitor/ui/styles.css (the standalone dashboard). Variables live on the
 * `.dectmon` root; `#heatmap` id selector became `.dm-heatmap`; `@keyframes
 * pulse` became `dm-pulse`. Markup is built by js/views/dect-monitor.js. */

.dectmon {
  /* Re-themed onto the platform design system (tokens.css) so the DECT tab reads
   * native instead of as a ported standalone dashboard. DECT-private names point
   * at the global tokens; names that COLLIDE with a global token (--bg-2,
   * --accent, --ok, --warn) are intentionally NOT redefined here so they inherit
   * the global value — redefining `--accent: var(--accent)` would be a CSS
   * self-reference cycle. Two DECT-DOMAIN hues stay literal because they carry
   * meaning with no platform equivalent: --foreign (teal = other operator),
   * --s-usable (muted green = available slot fill). */
  --bg:         var(--bg-0);          /* tab fill = the monitor-shell background */
  --bg-1:       var(--bg-card);       /* panels / topbar (first surface, lifted) */
  /* --bg-2 inherits the global secondary-surface token */
  --bg-3:       var(--bg-raised);     /* raised / hovered surfaces */
  --line:       var(--border);
  --line-2:     var(--border-strong);
  --text:       var(--text-1);
  --text-dim:   var(--text-2);
  --text-faint: var(--text-muted);
  /* --accent inherits the global indigo accent */

  --own:        var(--accent);        /* my network = platform identity color */
  --foreign:    #25b6a8;              /* other operator (domain teal — kept) */
  --rogue:      var(--danger);        /* unknown / rogue */

  --s-free:     var(--bg-2);          /* empty slot = neutral surface */
  --s-usable:   #2a6f5d;              /* available slot fill (domain green — kept) */
  --s-interfered: var(--warn);        /* degraded slot */
  --s-active:   var(--accent);        /* my live carrier */

  /* --ok, --warn inherit the global semantic tokens */
  --bad:        var(--danger);

  --radius:     var(--r-lg);
  --radius-sm:  var(--r-md);

  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font-ui);
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  /* Clip so internal panels scroll, never the page (the carrier-grid scroll fix). */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* The monitor shell (.monitor-view) is min-height:100vh — it GROWS to fit tall
 * content instead of bounding this tab, so flex:1 alone never caps the height
 * and the page scrolls. Cap the DECT mount to the viewport so .layout is bounded
 * and its panels scroll internally. The 64px budget = the event tab bar (~41px
 * to the mount top) + the m-body padding below the mount (~20px) + a few px of
 * slack (live-measured: 61px is exact fit). dvh tracks mobile browser chrome.
 * This is the real fix for the tall carrier grid. */
.m-dect-mount { max-height: calc(100dvh - 64px); }
.dectmon * { box-sizing: border-box; }
.dectmon .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.dectmon h1, .dectmon h2 { margin: 0; font-weight: 600; }

/* ============================ TOP BAR ============================ */
.dectmon .topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 18px; background: var(--bg-1);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
  /* Override the global fixed `.topbar { height: var(--topbar-h) }` (base.css):
   * the DECT bar's meta wraps to several rows on narrow screens, and the fixed
   * height clipped it so the content overflowed onto the panels below
   * (pre-existing mobile bug). Size to content instead. */
  height: auto; flex: none;
}
.dectmon .topbar-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* FIXED control height so every box in the bar is the same size and vertically
 * centred (chips are 2-line, buttons/segmented/pill are shorter — a fixed height +
 * the row's align-items:center equalises them; min-height let the pill sit low). */
.dectmon .topbar-meta > * { height: 30px; box-sizing: border-box; }
.dectmon .topbar-meta .seg-host,
.dectmon .topbar-meta .reg-host,
.dectmon .topbar-meta .badge-host { display: flex; align-items: center; }

.dectmon .meta-chip {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.2;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 10px; min-width: 60px;
}
/* `.meta-chip { display:flex }` overrides the [hidden] UA rule, so the dormant
 * gate-chip stayed visible — re-hide it explicitly. */
.dectmon .meta-chip[hidden] { display: none; }
.dectmon .meta-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .6px; }
.dectmon .meta-value { font-size: 12px; font-weight: 600; }
.dectmon .gate-pill { display: flex; align-items: center; gap: 6px; color: var(--warn); }
.dectmon .gate-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

.dectmon .mode-badge {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  border: 1px solid var(--line-2); background: var(--bg-2);
}
.dectmon .mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dectmon .mode-badge[data-mode="live"]       { color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.dectmon .mode-badge[data-mode="live"] .mode-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dectmon .mode-badge[data-mode="synthetic"]  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.dectmon .mode-badge[data-mode="synthetic"] .mode-dot { background: var(--warn); }
.dectmon .mode-badge[data-mode="replay"]     { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dectmon .mode-badge[data-mode="replay"] .mode-dot { background: var(--accent); }
.dectmon .mode-badge[data-mode="unavailable"], .dectmon .mode-badge[data-mode="error"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.dectmon .mode-badge[data-mode="unavailable"] .mode-dot, .dectmon .mode-badge[data-mode="error"] .mode-dot { background: var(--bad); }
.dectmon .mode-badge[data-mode="connecting"] .mode-dot { animation: dm-pulse 1s infinite; }
@keyframes dm-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ============================ METRICS ============================ */
/* ---- zones strip (SPEC C1) ---- */
.dectmon .zones-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 9px 12px 10px; border-top: 1px solid var(--line); flex: none; }
.dectmon .zones-strip[hidden] { display: none; }
.dectmon .zones-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-right: 2px; }
.dectmon .zone-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; font: inherit; font-size: 11.5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.dectmon .zone-chip:hover { background: var(--bg-3); }
.dectmon .zone-chip.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.dectmon .zone-chip.over-warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.dectmon .zone-chip.over-crit { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--bg-1)); }
.dectmon .zone-name { font-weight: 600; white-space: nowrap; }
.dectmon .zone-bar { width: 46px; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; flex: none; }
.dectmon .zone-fill { display: block; height: 100%; background: var(--accent); }
.dectmon .zone-chip.over-warn .zone-fill { background: var(--warn); }
.dectmon .zone-chip.over-crit .zone-fill { background: var(--danger); }
.dectmon .zone-stats { color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 8px; }
/* fixed-width numeric fields → the chip width stays constant as values tick
 * (1/2/3 digits no longer resize the box). */
.dectmon .zone-stats .zs-load { display: inline-block; min-width: 30px; text-align: right; }
.dectmon .zone-stats .zs-ant { display: inline-block; min-width: 38px; text-align: right; }
.dectmon .zone-stats .zs-bp { display: inline-block; min-width: 34px; text-align: right; }

/* ---- alerts (SPEC B) ---- */
/* unified status header (B5): alerts + KPIs + zones, one cohesive panel */
.dectmon .status-panel {
  margin: 8px 18px 0; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; flex: none;
}
.dectmon .alerts-strip {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 9px 12px 0; flex: none;
}
.dectmon .alerts-strip[hidden] { display: none; }
.dectmon .alert-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11.5px;
  background: var(--bg-1); border: 1px solid var(--line); color: var(--text);
  cursor: default; max-width: 100%;
}
.dectmon .alert-chip.has-scope { cursor: pointer; }
.dectmon .alert-chip.has-scope:hover { background: var(--bg-2); }
.dectmon .alert-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); }
.dectmon .alert-title { font-weight: 600; white-space: nowrap; }
.dectmon .alert-detail { color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .alert-chip.sev-critical { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 12%, var(--bg-1)); }
.dectmon .alert-chip.sev-critical .alert-dot { background: var(--danger); animation: dm-pulse 1.6s ease-in-out infinite; }
.dectmon .alert-chip.sev-warning { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--bg-1)); }
.dectmon .alert-chip.sev-warning .alert-dot { background: var(--warn); }
.dectmon .alert-chip.sev-info .alert-dot { background: var(--text-faint); }
/* topbar critical-count chip */
.dectmon .alerts-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: default; color: var(--danger); }
.dectmon .alerts-chip .alerts-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: dm-pulse 1.6s ease-in-out infinite; }
.dectmon .alerts-chip .meta-value { color: var(--danger); font-weight: 700; }

.dectmon .metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 12px; flex: none;
}
.dectmon .metric-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 11px; min-width: 0;
}
.dectmon .metric-card.accent-active { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dectmon .metric-label { font-size: 10px; color: var(--text-dim); }
.dectmon .metric-value { font-size: 18px; font-weight: 700; line-height: 1.15; margin-top: 0; }
.dectmon .metric-card.accent-active .metric-value { color: var(--accent); }
.dectmon .metric-foot { font-size: 9.5px; color: var(--text-faint); margin-top: 0; }
.dectmon .sparkline-card { display: flex; flex-direction: column; }
.dectmon .sparkline { width: 100%; height: 24px; margin: 2px 0 1px; display: block; }
/* Nodes card: icon-tagged role breakdown (antennas / SDR sensors) instead of text */
.dectmon .node-foot { display: flex; align-items: center; gap: 12px; }
.dectmon .node-kind { display: inline-flex; align-items: center; gap: 4px; }
.dectmon .node-kind .kind-ic { opacity: .75; flex: none; }
.dectmon .node-kind .tnum { font-size: 11px; font-weight: 600; color: var(--text-dim); }

/* KPIs folded into the top bar (consolidated header): compact inline metrics —
 * label + value on one baseline, the verbose foot (unknown/approved counts, node
 * split) hidden in the bar (still in the DOM + panels). Reclaims the old card row. */
.dectmon .topbar-meta .metrics { display: flex; align-items: center; gap: 16px; padding: 0 2px; background: none; border: 0; grid-template-columns: none; }
.dectmon .topbar-meta .metric-card { display: flex; align-items: baseline; gap: 6px; background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.dectmon .topbar-meta .metric-card .metric-label { font-size: 11px; color: var(--text-dim); }
.dectmon .topbar-meta .metric-card .metric-value { font-size: 15px; font-weight: 600; line-height: 1.2; }
.dectmon .topbar-meta .metric-card .metric-foot { display: none; }

/* ---- status pill (doubles as the Simulate control) ---- */
.dectmon .status-pill {
  flex-direction: row; align-items: center; gap: 5px; height: 24px;
  padding: 2px 8px; min-width: 0;
  position: relative; font: inherit; color: var(--text); white-space: nowrap;
}
/* ~30% smaller than the rest of the bar — it's a status badge, not a metric */
.dectmon .status-pill .meta-value { font-size: 10px; }
.dectmon .status-pill .meta-label { font-size: 8px; }
.dectmon .status-pill .status-dot { width: 6px; height: 6px; }
.dectmon .status-pill.is-clickable { cursor: pointer; }
.dectmon .status-pill.is-clickable:hover { background: var(--bg-3); }
.dectmon .status-pill .status-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; text-align: left; }
.dectmon .status-pill .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); }
.dectmon .status-pill .status-caret { font-size: 9px; color: var(--text-faint); }
.dectmon .status-pill.st-live { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.dectmon .status-pill.st-live .status-dot { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.dectmon .status-pill.st-live .meta-value { color: var(--live); }
.dectmon .status-pill.st-sim { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--bg-2)); }
.dectmon .status-pill.st-sim .status-dot { background: var(--warn); }
.dectmon .status-pill.st-sim .meta-value { color: var(--warn); }
.dectmon .status-pill.st-replay { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dectmon .status-pill.st-replay .status-dot { background: var(--accent); }
.dectmon .status-pill.st-replay .meta-value { color: var(--accent); }
.dectmon .status-pill.st-wait .status-dot { background: var(--text-faint); }
.dectmon .status-pill.st-err { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--bg-2)); }
.dectmon .status-pill.st-err .status-dot { background: var(--danger); animation: dm-pulse 1.6s ease-in-out infinite; }
.dectmon .status-pill.st-err .meta-value { color: var(--danger); }

/* live-data freshness — the status dot replaces the standalone "Updated" clock.
 * Only on st-live (real data): fresh = green pulsing ring, stale = amber, dead =
 * red pulsing. SIMULATED (st-sim) stays a steady amber dot — it isn't "stale". */
.dectmon .status-pill.st-live.fresh .status-dot { animation: dm-dot-pulse 1.8s ease-out infinite; }
.dectmon .status-pill.st-live.stale { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.dectmon .status-pill.st-live.stale .status-dot { background: var(--warn); box-shadow: none; animation: none; }
.dectmon .status-pill.st-live.stale .meta-value { color: var(--warn); }
.dectmon .status-pill.st-live.dead { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--bg-2)); }
.dectmon .status-pill.st-live.dead .status-dot { background: var(--danger); box-shadow: none; animation: dm-pulse 1.4s ease-in-out infinite; }
.dectmon .status-pill.st-live.dead .meta-value { color: var(--danger); }
@keyframes dm-dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Simulate On/Off menu — anchored under the status pill */
.dectmon .dm-sim-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 10px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); min-width: 150px; cursor: default;
}
.dectmon .dm-sim-cap { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); }

/* ============================ LAYOUT ============================ */
.dectmon .layout {
  /* Side panels (rail + spotter) carry the dense content; the centre heatmap is
     given ~30% less width and the outer bezels are halved (18→9) so the sides
     breathe. cf the center-compact refinement. */
  flex: 1; display: grid; gap: 10px; padding: 12px 9px 14px;
  grid-template-columns: 340px minmax(0, 1fr) 470px; align-items: stretch;
  min-height: 0; overflow-y: auto;
}
.dectmon .panel {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.dectmon .panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.dectmon .panel-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-dim); }
.dectmon .panel-sub { font-size: 11px; color: var(--text-faint); }
.dectmon .panel-count {
  font-size: 12px; font-weight: 700; background: var(--bg-3);
  border-radius: 12px; padding: 1px 9px; color: var(--text-dim); min-width: 22px; text-align: center;
}

/* ---- vendor / network / antenna tree ---- */
.dectmon .tree { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-height: 0; flex: 1; }
.dectmon .tree-empty { color: var(--text-faint); font-size: 12px; padding: 14px 10px; }
.dectmon .tree-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 1px solid transparent; color: inherit;
  border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; text-align: left;
  font: inherit;
}
.dectmon .tree-row:hover { background: var(--bg-2); }
.dectmon .tree-row.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }

.dectmon .tw-twist { width: 12px; flex: none; color: var(--text-faint); font-size: 9px; text-align: center; transition: transform .12s; }
.dectmon .tw-twist.collapsed { transform: rotate(-90deg); }
.dectmon .tw-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dectmon .tw-badge, .dectmon .tw-bearers {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-3); border-radius: 10px; padding: 0 7px; min-width: 20px; text-align: center; flex: none;
}
.dectmon .tw-bearers { margin-left: 4px; }

/* all-networks root */
.dectmon .tree-all { font-weight: 600; }
.dectmon .tw-ico.all { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.dectmon .tree-all .tw-label { flex: 1; }

/* vendor group header */
.dectmon .tree-vendor { background: var(--bg-2); margin-top: 4px; }
.dectmon .tree-vendor:hover { background: var(--bg-3); }
.dectmon .tw-vendor-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-fgn { color: var(--text-faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dectmon .tw-meta { font-size: 10px; color: var(--text-faint); flex: none; }

/* broadcaster group header (top of the coordinator's operational tree) */
.dectmon .tree-bcast { background: var(--bg-2); margin-top: 4px; }
.dectmon .tree-bcast:hover { background: var(--bg-3); }
.dectmon .tree-bcast.is-none { opacity: .82; }
.dectmon .tw-bcast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dectmon .tw-bcast-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-bcast-sub { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* device row (indented under broadcaster) */
.dectmon .tree-device { padding-left: 14px; }
.dectmon .tw-dev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dectmon .tw-dev-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-dev-sub { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* network row */
.dectmon .tree-net { padding-left: 6px; }
.dectmon .tw-net-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dectmon .tw-net-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-net-sub { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* antenna row (indented under network) */
.dectmon .tree-ant { padding-left: 28px; }
.dectmon .tw-ant-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.dectmon .tw-ant-sub { font-size: 10px; color: var(--text-faint); margin-left: 6px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* known/unknown section headers + per-network states (networks-first rail) */
.dectmon .tree-sec { display:flex; align-items:center; justify-content:space-between; font-size:10px; text-transform:uppercase; letter-spacing:.6px; padding:9px 4px 4px; margin-top:4px; border-bottom:1px solid var(--line); color:var(--text-faint); }
.dectmon .tree-sec-known { color: var(--accent); }
.dectmon .tree-sec-unknown { color: var(--warn); }
.dectmon .tree-sec-n { font-variant-numeric: tabular-nums; background: var(--bg-3); border-radius:10px; padding:0 7px; }
.dectmon .tree-sec-unknown .tree-sec-n { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.dectmon .tw-state { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:1px 6px; border-radius:10px; flex:none; margin-left:auto; }
.dectmon .tw-state.onair { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.dectmon .tw-state.expected { color: var(--text-faint); background: var(--bg-3); }
.dectmon .tw-state.pinned { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dectmon .tree-bcast .tw-state { margin-left: 6px; }
.dectmon .tree-net.in-req { padding-left: 16px; }
.dectmon .tw-twist.is-hidden { visibility: hidden; }
/* unknown · investigate rows */
.dectmon .tree-unknown { display:flex; align-items:center; gap:4px; border:1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 6%, transparent); border-radius: var(--radius-sm); margin:3px 2px; padding:2px; }
.dectmon .tree-unknown.is-active { border-color: var(--accent); }
.dectmon .tw-unknown-main { display:flex; align-items:center; gap:7px; flex:1; min-width:0; background:transparent; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:5px 6px; }
.dectmon .tw-unknown-main:hover { background: var(--bg-2); border-radius: var(--radius-sm); }
.dectmon .tw-unknown-acts { display:flex; gap:4px; padding-right:4px; flex:none; }
.dectmon .tw-act { font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; border:1px solid var(--line); background:var(--bg-2); color:var(--text); cursor:pointer; }
.dectmon .tw-act.pri { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
.dectmon .tw-act:hover { background: var(--bg-3); }
/* white-label modal form */
.dect-wl-modal .dect-wl-l { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color: var(--text-dim); }
.dect-wl-modal .dect-wl-in { font:inherit; text-transform:none; letter-spacing:normal; color: var(--text); background: var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
.dect-wl-modal .dect-wl-in:focus { outline:none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.dect-wl-modal .dect-wl-actions { display:flex; justify-content:flex-end; margin-top:14px; }

/* ---- heatmap ---- */
.dectmon .heatmap-panel { min-width: 0; }
.dectmon .heatmap-head { align-items: flex-start; }
/* heatmap header: title row carries the antenna count on the right; the verbose
   sub-line is gone. DOWNLINK/UPLINK now label the two halves under the grid. */
.dectmon .heatmap-head { flex-direction: column; align-items: stretch; gap: 1px; }
.dectmon .hm-headmain { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dectmon .hm-antn { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.dectmon .hm-half { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
.dectmon .hm-half.down::before { content: "\25B8 "; }
.dectmon .hm-half.up { text-align: right; }
.dectmon .hm-half.up::before { content: "\25B8 "; }
/* Cap the carrier×slot grid height (~30% shorter) so the grid doesn't eat all
   the vertical space — frees room below for the rest of the monitor. Capping the
   WRAP (not just the canvas) keeps the row-frequency labels aligned with cells. */
.dectmon .heatmap-wrap { display: flex; gap: 8px; padding: 12px 14px 4px; flex: 1; min-height: 0; max-height: 400px; }
.dectmon .heatmap-wrap[hidden] { display: none; }
.dectmon .hm-rowlabels { display: flex; flex-direction: column; justify-content: space-around; font-size: 10px; color: var(--text-dim); text-align: right; }
.dectmon .hm-rowlabels span { line-height: 1; white-space: nowrap; }
.dectmon .hm-canvas-host { position: relative; flex: 1; min-width: 0; }
.dectmon .dm-heatmap { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dectmon .hm-collabels { display: flex; justify-content: space-between; padding: 2px 14px 8px 58px; font-size: 9.5px; color: var(--text-faint); flex: none; }
.dectmon .hm-collabels[hidden] { display: none; }
.dectmon .hm-tooltip {
  position: absolute; pointer-events: none; z-index: 5; background: var(--mon-0);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 9px;
  font-size: 11.5px; line-height: 1.5; white-space: nowrap; box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.dectmon .hm-tooltip b { color: var(--text); }
.dectmon .hm-tooltip .muted { color: var(--text-faint); }

/* ---- all-networks compact overview (the scroll-fix) ---- */
.dectmon .netoverview {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
}
.dectmon .netoverview[hidden] { display: none; }
.dectmon .ov-note { font-size: 11.5px; color: var(--text-faint); padding: 4px 2px; }
.dectmon .ov-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.dectmon .ov-row:hover { background: var(--bg-3); }
.dectmon .ov-row.own { border-left-color: var(--own); }
.dectmon .ov-row.foreign { border-left-color: var(--foreign); }
.dectmon .ov-row.rogue { border-left-color: var(--rogue); }
.dectmon .ov-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dectmon .ov-name { display: flex; flex-direction: column; min-width: 0; width: 200px; flex: none; line-height: 1.25; }
.dectmon .ov-net { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .ov-sub { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .ov-bar { flex: 1; min-width: 60px; height: 8px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.dectmon .ov-fill { display: block; height: 100%; border-radius: 5px; }
.dectmon .ov-stats { display: flex; align-items: center; gap: 9px; flex: none; }
.dectmon .ov-bearers { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.dectmon .ov-bearers b { color: var(--text); }
.dectmon .ov-load { font-size: 12px; font-weight: 700; color: var(--text-dim); min-width: 36px; text-align: right; }
/* learn-mode: "assign" pin on a Detected·unknown row */
.dectmon .ov-assign { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.dectmon .ov-assign:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* network-attribution: section + per-broadcaster group headers */
.dectmon .ov-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 12px 2px 2px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.dectmon .ov-head:first-child { margin-top: 0; }
.dectmon .ov-head-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.dectmon .ov-head-h { font-size: 10.5px; color: var(--text-faint); }
.dectmon .ov-bcast {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 7px 2px 1px; padding-left: 3px; border-left: 3px solid var(--own);
  padding-top: 1px; padding-bottom: 1px;
}
.dectmon .ov-bcast.is-none { border-left-color: var(--text-faint); }
.dectmon .ov-bcast-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.dectmon .ov-bcast-sub { font-size: 10.5px; color: var(--text-faint); }

/* ---- legends ---- */
.dectmon .legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-dim); flex: none; }
.dectmon .legend[hidden] { display: none; }
.dectmon .legend-title { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); }
.dectmon .leg-item { display: flex; align-items: center; gap: 6px; }
.dectmon .leg-swatch { width: 16px; height: 14px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #04070d; }
.dectmon .leg-swatch.s-free { background: var(--s-free); color: var(--text-faint); border: 1px solid var(--line-2); }
.dectmon .leg-swatch.s-usable { background: var(--s-usable); }
.dectmon .leg-swatch.s-interfered { background: var(--s-interfered); }
.dectmon .leg-swatch.s-active { background: var(--s-active); }
.dectmon .leg-tag { font-size: 9px; font-weight: 800; border-radius: 4px; padding: 1px 5px; letter-spacing: .4px; }
.dectmon .leg-tag.own { background: color-mix(in srgb, var(--own) 22%, transparent); color: var(--own); }
.dectmon .leg-tag.foreign { background: color-mix(in srgb, var(--foreign) 22%, transparent); color: var(--foreign); }
.dectmon .leg-tag.rogue { background: color-mix(in srgb, var(--rogue) 22%, transparent); color: var(--rogue); }

/* ---- device health triage (right panel) ---- */
.dectmon .dh-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dectmon .dh-head .dh-ico { font-size: 11px; }
.dectmon .dh-head.crit { color: var(--danger); }
.dectmon .dh-head.warn { color: var(--warn); }
.dectmon .dh-head.ok { color: var(--ok); }
.dectmon .dh-row { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--text-faint); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; color: var(--text); cursor: pointer; }
.dectmon .dh-row:hover { background: var(--bg-3); }
.dectmon .dh-row.crit { border-left-color: var(--danger); }
.dectmon .dh-row.warn { border-left-color: var(--warn); }
.dectmon .dh-name { font-weight: 600; font-size: 12.5px; }
.dectmon .dh-role { font-size: 11px; color: var(--text-faint); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .dh-metric { font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.dectmon .dh-row.crit .dh-metric { color: var(--danger); }
.dectmon .dh-row.warn .dh-metric { color: var(--warn); }
.dectmon .dh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
.dectmon .dh-healthy { font-size: 11.5px; color: var(--ok); }
.dectmon .dh-link { font: inherit; font-size: 12px; background: transparent; border: 0; color: var(--accent); cursor: pointer; padding: 2px 4px; }
.dectmon .dh-link:hover { text-decoration: underline; }
.dectmon .dh-empty { padding: 14px 10px; font-size: 12px; color: var(--text-faint); }

/* ---- systems ---- */
.dectmon .systems-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dectmon .sys-card { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--text-faint); border-radius: var(--radius-sm); padding: 9px 11px; }
.dectmon .sys-card.own { border-left-color: var(--own); }
.dectmon .sys-card.foreign { border-left-color: var(--foreign); }
.dectmon .sys-card.rogue { border-left-color: var(--rogue); }
.dectmon .sys-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dectmon .sys-mfr { font-size: 13px; font-weight: 600; }
.dectmon .sys-rfpi { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); }
.dectmon .sys-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dectmon .sig-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.dectmon .sig-fill { height: 100%; background: var(--accent); }
.dectmon .sys-bearers { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.dectmon .sys-bearers b { color: var(--text); }
.dectmon .bp-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.dectmon .bp-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.dectmon .bp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--own); flex: none; }
.dectmon .bp-name { font-weight: 600; }
.dectmon .bp-role { color: var(--text-faint); font-size: 10.5px; }
.dectmon .bp-loc { margin-left: auto; color: var(--text-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.dectmon .bp-anon { color: var(--text-faint); font-style: italic; }

/* ---- replay scrubber ---- */
.dectmon .replaybar {
  display: flex; align-items: center; gap: 12px; padding: 9px 18px;
  border-top: 1px solid var(--line); background: var(--bg-1); flex-wrap: wrap;
}
.dectmon .replaybar[hidden] { display: none; }
.dectmon .rp-btn {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; font: inherit; font-weight: 600;
}
.dectmon .rp-btn:hover { background: var(--bg-3); }
.dectmon .rp-scrub { flex: 1; min-width: 120px; accent-color: var(--accent); }
.dectmon .rp-time { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================ IDENTITY BADGES ============================ */
.dectmon .dm-prov {
  font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-faint); background: var(--bg-2);
}
.dectmon .dm-prov-own, .dectmon .dm-prov-event { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.dectmon .dm-prov-registry { color: #a9f; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.dectmon .dm-prov-manufacturer { color: var(--text-dim); }
.dectmon .dm-prov-unresolved { opacity: .55; }
.dectmon .sys-company { font-size: 11px; color: var(--text-dim); margin: 2px 0 4px; }
.dectmon .systems-catfilter { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dectmon .dm-cat-chip {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); cursor: pointer;
}
.dectmon .dm-cat-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dectmon .dm-cat-chip[aria-pressed="false"] { opacity: .45; }

/* ============================ RESPONSIVE ============================ */
/* Keep the single-row 3-column layout (and 5-up metrics) down to ~1024px so
 * normal laptop windows (~1100–1280) don't drop into the stacked, taller 2-row
 * layout that forced the page to scroll. Below 1024 the systems panel wraps
 * under and the bounded mount scrolls .layout internally. */
@media (max-width: 1023px) {
  .dectmon .metrics { grid-template-columns: repeat(2, 1fr); }
  .dectmon .layout { grid-template-columns: 200px minmax(0, 1fr); }
  .dectmon .systems-panel { grid-column: 1 / -1; max-height: 320px; }
}
@media (max-width: 720px) {
  .dectmon .metrics { grid-template-columns: repeat(2, 1fr); }
  .dectmon .layout { grid-template-columns: 1fr; }
  .dectmon .tree-panel { max-height: 240px; }
}

/* thin scrollbars — webkit + standard (Firefox) for native cross-browser feel */
.dectmon .tree, .dectmon .systems-list, .dectmon .netoverview, .dectmon .layout {
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.dectmon .tree::-webkit-scrollbar, .dectmon .systems-list::-webkit-scrollbar, .dectmon .netoverview::-webkit-scrollbar { width: 8px; }
.dectmon .tree::-webkit-scrollbar-thumb, .dectmon .systems-list::-webkit-scrollbar-thumb, .dectmon .netoverview::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* Native keyboard focus ring (the ported dashboard had none — only :hover).
 * Adopt the platform ring token so DECT controls focus like the rest of the app. */
.dectmon button:focus-visible,
.dectmon .tree-row:focus-visible,
.dectmon .ov-row:focus-visible,
.dectmon .rp-scrub:focus-visible,
.dectmon .seg-btn:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm);
}

/* ---- registrations editor modal (SPEC A2) ---- */
.dect-reg-modal .dect-reg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 12px; }
.dect-reg-modal .dect-reg-table th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 11px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dect-reg-modal .dect-reg-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.dect-reg-modal .dect-reg-empty { color: var(--text-faint); text-align: center; padding: 14px; }
.dect-reg-modal .dect-reg-del { background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 13px; }
.dect-reg-modal .dect-reg-del:hover { color: var(--danger); }
.dect-reg-modal .dect-reg-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dect-reg-modal .dect-reg-form input { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 6px 9px; font: inherit; font-size: 12.5px; }
.dect-reg-modal .dect-reg-form input[name="label"] { flex: 1; min-width: 160px; }
.dect-reg-modal .dect-reg-form input[type="number"] { width: 130px; }
.dect-reg-modal .dect-reg-form button { background: var(--accent); border: 0; border-radius: var(--radius-sm); color: #fff; padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; }

/* ---- device / rogue spotter (SPEC D1) ---- */
.dectmon .spotter-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); padding: 8px 2px 3px; border-bottom: 1px solid var(--line); margin: 4px 0 2px; }
.dectmon .spotter-head.spotter-unknown { color: var(--danger); }
.dectmon .spotter-head.spotter-registered { color: var(--foreign); }
.dectmon .spotter-count { font-variant-numeric: tabular-nums; opacity: .8; }
.dectmon .sys-guess { font-size: 11px; color: var(--danger); margin: 1px 0 2px; }
.dectmon .sys-zones { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.dectmon .sys-zone-tag { font-size: 9.5px; color: var(--text-faint); background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* ---- beltpack receipts modal (SPEC E) ---- */
.dect-receipts-modal .receipts-head { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.dect-receipts-modal .receipts-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-faint); margin-bottom: 8px; }
.dect-receipts-modal .rc-key::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 4px; vertical-align: middle; }
.dect-receipts-modal .rc-rssi::before { background: var(--accent); }
.dect-receipts-modal .rc-batt::before { background: #fbbf24; }
.dect-receipts-modal .receipt-row { display: grid; grid-template-columns: 1fr 240px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dect-receipts-modal .receipt-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dect-receipts-modal .receipt-name { font-size: 12.5px; font-weight: 600; }
.dect-receipts-modal .receipt-latest { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dect-receipts-modal .receipt-chart { width: 240px; height: 44px; }
/* ---- devices directory (device-roster redesign PR-2) ---- */
.dect-devices-modal .dv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dect-devices-modal .dv-counts { font-size: 12px; color: var(--text-dim); }
.dect-devices-modal .dv-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dect-devices-modal .dv-search { flex: 1; min-width: 140px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 6px 10px; font: inherit; font-size: 12.5px; }
.dect-devices-modal .dv-search:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.dect-devices-modal .dv-chip { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; }
.dect-devices-modal .dv-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.dect-devices-modal .dv-rows { display: flex; flex-direction: column; }
.dect-devices-modal .dv-colhead, .dect-devices-modal .dv-row { display: grid; grid-template-columns: 1.3fr 1.5fr 92px 58px 92px 14px; gap: 12px; align-items: center; }
.dect-devices-modal .dv-colhead { padding: 10px 12px 8px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* foldable network group header */
.dect-devices-modal .dv-group-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--bg-2); border: 0; border-top: 1px solid var(--line); color: var(--text-dim); font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; padding: 8px 10px; }
.dect-devices-modal .dv-group-head:hover { background: var(--bg-3); }
.dect-devices-modal .dv-gh-tw { width: 9px; font-size: 9px; color: var(--text-faint); }
.dect-devices-modal .dv-gh-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dect-devices-modal .dv-gh-warn { color: var(--warn); }
.dect-devices-modal .dv-gh-n { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-row-wrap { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 6px; overflow: hidden; background: color-mix(in srgb, var(--bg-2) 45%, transparent); }
.dect-devices-modal .dv-row { width: 100%; text-align: left; background: transparent; border: 0; border-left: 2px solid transparent; color: var(--text); font: inherit; cursor: pointer; padding: 6px 12px; }
.dect-devices-modal .dv-row:hover { background: var(--bg-2); }
.dect-devices-modal .dv-row.warn { border-left-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.dect-devices-modal .dv-row.crit { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.dect-devices-modal .dv-row.offline { opacity: .5; }
.dect-devices-modal .dv-name { font-size: 12.5px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* reception meter — bar + readout INLINE so each row stays one line (shallow) */
.dect-devices-modal .dv-recv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dect-devices-modal .dv-meter { flex: 1; min-width: 36px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text-faint) 20%, transparent); overflow: hidden; }
.dect-devices-modal .dv-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--ok)); }
.dect-devices-modal .dv-meter i.dv-lv-warn { background: var(--warn); }
.dect-devices-modal .dv-meter i.dv-lv-crit { background: var(--danger); }
.dect-devices-modal .dv-dbm { flex: none; font-size: 11px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* battery cell */
.dect-devices-modal .dv-batt { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dect-devices-modal .dv-batt-cell { display: inline-block; width: 28px; height: 13px; border: 1px solid var(--text-faint); border-radius: 3px; padding: 1.5px; position: relative; flex: none; }
.dect-devices-modal .dv-batt-cell::after { content: ''; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 5px; background: var(--text-faint); border-radius: 1px; }
.dect-devices-modal .dv-batt-fill { display: block; height: 100%; border-radius: 1px; background: var(--ok); }
.dect-devices-modal .dv-batt-fill.dv-lv-warn { background: var(--warn); }
.dect-devices-modal .dv-batt-fill.dv-lv-crit { background: var(--danger); }
.dect-devices-modal .dv-tx-warn { color: var(--warn); }
.dect-devices-modal .dv-tx-crit { color: var(--danger); }
.dect-devices-modal .dv-loc { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dect-devices-modal .dv-status { font-size: 10.5px; }
.dect-devices-modal .dv-active { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.dect-devices-modal .dv-active-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); animation: dm-pulse 2s infinite; }
.dect-devices-modal .dv-lastseen { color: var(--text-dim); }
.dect-devices-modal .dv-exp { font-size: 10px; color: var(--text-faint); text-align: center; }
.dect-devices-modal .dv-hist { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px 12px; }
.dect-devices-modal .dv-hist-meta { font-size: 10.5px; color: var(--text-faint); }

/* ===== Devices: Grid view (scalable tiles, pin, drag-drop custom segments) ===== */
/* segmented List/Grid toggle */
.dect-devices-modal .dv-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dect-devices-modal .dv-vt { font: inherit; font-size: 11.5px; padding: 5px 11px; border: 0; background: var(--bg-2); color: var(--text-dim); cursor: pointer; }
.dect-devices-modal .dv-vt + .dv-vt { border-left: 1px solid var(--line); }
.dect-devices-modal .dv-vt.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
/* grid-only tools (density + new segment) — hidden in list view */
.dect-devices-modal .dv-gridtools { display: none; align-items: center; gap: 8px; }
.dect-devices-modal[data-dvview="grid"] .dv-gridtools { display: inline-flex; }
.dect-devices-modal .dv-density { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dect-devices-modal .dv-density button { font: inherit; font-size: 11px; width: 26px; padding: 5px 0; border: 0; background: var(--bg-2); color: var(--text-dim); cursor: pointer; }
.dect-devices-modal .dv-density button + button { border-left: 1px solid var(--line); }
.dect-devices-modal .dv-density button.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.dect-devices-modal .dv-newseg { font: inherit; font-size: 11.5px; padding: 5px 10px; border: 1px dashed var(--line-2); border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; }
.dect-devices-modal .dv-newseg:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* grid host + sections */
.dect-devices-modal .dv-grid-host { display: flex; flex-direction: column; gap: 14px; }
.dect-devices-modal .dv-seg { border: 1px solid transparent; border-radius: 10px; transition: border-color .12s, background .12s; }
.dect-devices-modal .dv-seg.drop-hot { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dect-devices-modal .dv-seg-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.dect-devices-modal .dv-seg-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.dect-devices-modal .dv-seg-n { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-seg.is-pinned-seg .dv-seg-name { color: var(--accent); }
.dect-devices-modal .dv-seg-tools { margin-left: auto; display: inline-flex; gap: 4px; }
.dect-devices-modal .dv-seg-tools button { width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text-dim); font-size: 11px; cursor: pointer; padding: 0; }
.dect-devices-modal .dv-seg-del:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.dect-devices-modal .dv-seg-rename:hover { color: var(--accent); }
.dect-devices-modal .dv-seg-rename-input { font: inherit; font-size: 12px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text); padding: 2px 6px; }
.dect-devices-modal .dv-seg-empty { font-size: 11px; color: var(--text-faint); font-style: italic; padding: 8px 4px; grid-column: 1 / -1; }
.dect-devices-modal .dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dv-tile, 116px), 1fr)); gap: 8px; min-height: 8px; }
.dect-devices-modal .dv-grid-host.density-sm .dv-grid { --dv-tile: 90px; }
.dect-devices-modal .dv-grid-host.density-md .dv-grid { --dv-tile: 116px; }
.dect-devices-modal .dv-grid-host.density-lg .dv-grid { --dv-tile: 158px; }

/* a beltpack tile */
.dect-devices-modal .dv-tile { border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--ok) 60%, transparent); border-radius: 8px; background: var(--bg-2); padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.dect-devices-modal .dv-tile.offline { border-left-color: var(--text-faint); opacity: .68; }
.dect-devices-modal .dv-tile.warn { border-left-color: var(--warn); }
.dect-devices-modal .dv-tile.crit { border-left-color: var(--danger); }
.dect-devices-modal .dv-tile.is-dragging { opacity: .4; }
.dect-devices-modal .dv-tile-top { display: flex; align-items: center; gap: 6px; }
.dect-devices-modal .dv-tile-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-faint); }
.dect-devices-modal .dv-tile-dot.is-live { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.dect-devices-modal .dv-tile-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dect-devices-modal .dv-tile-pin, .dect-devices-modal .dv-tile-menu { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 1px; opacity: 0; transition: opacity .1s; line-height: 1; }
.dect-devices-modal .dv-tile:hover .dv-tile-pin, .dect-devices-modal .dv-tile:hover .dv-tile-menu, .dect-devices-modal .dv-tile-pin.is-pinned { opacity: 1; }
.dect-devices-modal .dv-tile-pin.is-pinned { filter: none; }
.dect-devices-modal .dv-tile-menu:hover, .dect-devices-modal .dv-tile-pin:hover { color: var(--accent); }
.dect-devices-modal .dv-tile-meters { display: flex; flex-direction: column; gap: 3px; }
.dect-devices-modal .dv-tile-bar { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text-faint) 20%, transparent); overflow: hidden; }
.dect-devices-modal .dv-tile-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--ok)); }
.dect-devices-modal .dv-tile-bar.batt i { background: var(--ok); }
.dect-devices-modal .dv-tile-bar i.dv-lv-warn { background: var(--warn); }
.dect-devices-modal .dv-tile-bar i.dv-lv-crit { background: var(--danger); }
.dect-devices-modal .dv-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-tile-last { color: var(--text-faint); }

/* the ⋯ move-to menu (drag-drop fallback) */
.dv-move-menu { z-index: 1000; min-width: 168px; max-height: 320px; overflow: auto; background: var(--bg-card, #16181d); border: 1px solid var(--border-strong, #333); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.5); padding: 4px; }
.dv-move-menu .dv-mm-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text, #e6e6e6); font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 6px; cursor: pointer; }
.dv-move-menu .dv-mm-item:hover { background: color-mix(in srgb, var(--accent, #6366f1) 18%, transparent); }
.dv-move-menu .dv-mm-item.is-active { color: var(--accent, #818cf8); }
.dv-move-menu .dv-mm-item.is-danger:hover { background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent); color: var(--danger, #ef4444); }
.dv-move-menu .dv-mm-sep { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint, #888); padding: 6px 9px 3px; }
/* ---- zone-assignment select (SPEC C2) ---- */
.dect-reg-modal .dect-zone-sel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 4px 8px; font: inherit; font-size: 12px; min-width: 140px; }

/* ---- load trend modal (SPEC F) ---- */
.dect-trend-modal .trend-head { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.dect-trend-modal .trend-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-faint); margin-bottom: 8px; }
.dect-trend-modal .rc-key::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 4px; vertical-align: middle; }
.dect-trend-modal .tr-load::before { background: var(--accent); }
.dect-trend-modal .tr-bp::before { background: #fbbf24; }
.dect-trend-modal .trend-chart { width: 100%; height: 160px; display: block; }

/* ---- antenna GPS-tag modal (SPEC C3) ---- */
.dectmon .tw-ant-geo { margin-left: 4px; font-size: 10px; }
.dect-geo-modal .dect-geo-note { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
.dect-geo-modal .dect-geo-warn { color: var(--warn, #fbbf24); }
.dect-geo-modal .dect-reg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dect-geo-modal .dect-reg-table th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 11px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dect-geo-modal .dect-reg-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dect-geo-modal .dect-reg-empty { color: var(--text-faint); text-align: center; padding: 14px; }
.dect-geo-modal .dect-geo-untagged { color: var(--text-faint); }
.dect-geo-modal .dect-geo-coords { font-size: 12px; }
.dect-geo-modal .dect-geo-acc { font-size: 10px; color: var(--text-faint); margin-left: 6px; }
.dect-geo-modal .dect-geo-live { font-size: 11.5px; color: var(--accent); }
.dect-geo-modal .dect-geo-act { white-space: nowrap; text-align: right; }
.dect-geo-modal .dect-geo-act button { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.dect-geo-modal .dect-geo-tag, .dect-geo-modal .dect-geo-save { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dect-geo-modal .dect-geo-act button:disabled { opacity: .5; cursor: default; }
.dect-geo-modal .dect-geo-clear:hover { color: var(--danger); }

/* ---- broadcaster (request) rail + assignment (remodel P3/P4) ---- */
.dectmon .tw-add { margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; cursor: pointer; }
.dectmon .tw-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dectmon .tree-ant { position: relative; }
.dectmon .tree-ant.is-muted { opacity: .55; }
.dectmon .tw-ant-edit { margin-left: 6px; flex: 0 0 auto; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 0 4px; border-radius: var(--radius-sm); }
.dectmon .tw-ant-edit:hover { background: var(--bg-2); color: var(--text); }
.dectmon .tw-ant-mute { margin-left: 6px; font-size: 9px; color: var(--text-faint); border: 0.5px solid var(--line); border-radius: var(--radius-sm); padding: 0 4px; vertical-align: middle; }
.dectmon .tree-ant-empty { font-size: 11px; color: var(--text-faint); padding: 6px 10px 6px 30px; font-style: italic; }

/* antenna picker modal (P4) */
.dect-pick-modal .dect-geo-note, .dect-pick-modal .dect-reg-empty { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
.dect-pick-modal .dect-pick-dev { border: 0.5px solid var(--line); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; }
.dect-pick-modal .dect-pick-devhd { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--bg-2); font-size: 12.5px; font-weight: 600; }
.dect-pick-modal .dect-pick-all { font-size: 11px; border: 0.5px solid var(--line); background: none; color: var(--text); border-radius: var(--radius-sm); padding: 2px 9px; cursor: pointer; }
.dect-pick-modal .dect-pick-ant { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; border-top: 0.5px solid var(--line); cursor: pointer; }
.dect-pick-modal .dect-pick-sub { margin-left: auto; font-size: 10px; color: var(--text-faint); }
.dect-pick-modal .dect-pick-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.dect-pick-modal .dect-pick-save { background: var(--accent); border: 0; color: #fff; border-radius: var(--radius-sm); padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; }

/* per-antenna edit modal (P4) */
.dect-aedit-modal .dect-aedit-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dect-aedit-modal .dect-aedit-row label { width: 110px; font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }
.dect-aedit-modal .ae-name, .dect-aedit-modal .ae-req { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 6px 9px; font: inherit; font-size: 12.5px; }
.dect-aedit-modal .dect-aedit-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0 12px; }
.dect-aedit-modal .dect-aedit-links { display: flex; gap: 8px; margin-bottom: 12px; }
.dect-aedit-modal .dect-aedit-links button { flex: 1; font-size: 12px; border: 0.5px solid var(--line); background: none; color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; }
.dect-aedit-modal .dect-aedit-foot { display: flex; justify-content: space-between; border-top: 0.5px solid var(--line); padding-top: 12px; }
.dect-aedit-modal .ae-clear { font-size: 12px; border: 0.5px solid var(--line); background: none; color: var(--text-faint); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; }
.dect-aedit-modal .ae-clear:hover { color: var(--danger); }
.dect-aedit-modal .ae-save { background: var(--accent); border: 0; color: #fff; border-radius: var(--radius-sm); padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; }

/* ---- antenna map modal + zone auto-assign (C3 follow-on) ---- */
.dect-map-modal .dect-map-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.dect-map-modal .dect-map-auto { background: var(--accent); border: 0; color: #fff; border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dect-map-modal .dect-map-auto:disabled { opacity: 0.6; cursor: default; }
.dect-map-modal .dect-map-canvas { width: 100%; height: 360px; display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dect-map-modal .dect-map-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-faint); margin-top: 8px; align-items: center; }
.dect-map-modal .rc-key::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 4px; vertical-align: middle; }
.dect-map-modal .tr-load::before { background: rgba(94,106,210,0.7); }
.dect-map-modal .rc-rssi::before { background: #34d399; height: 8px; border-radius: 50%; width: 8px; }
.dect-map-modal .dect-map-acc-note { margin-left: auto; font-style: italic; }
.dect-map-modal .dect-reg-empty { color: var(--text-faint); text-align: center; padding: 18px; line-height: 1.5; }
/* auto-assign-from-GPS control inside the zone-assign modal */
.dect-reg-modal .dect-reg-auto { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dect-reg-modal .dect-reg-auto-btn { background: var(--accent); border: 0; color: #fff; border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dect-reg-modal .dect-reg-auto-btn:disabled { opacity: 0.6; cursor: default; }
.dect-reg-modal .dect-reg-auto-note { font-size: 10.5px; color: var(--text-faint); }

/* bolero_am antenna radio-health dot in the fleet tree + offline subtitle (the
 * cred-light identity+health feed: node.health green|degraded|down). */
.dectmon .tw-ant-health { display: inline-block; margin-right: 5px; font-size: 9px; line-height: 1; vertical-align: middle; }
.dectmon .tw-ant-health.hl-green { color: var(--ok); }
.dectmon .tw-ant-health.hl-degraded { color: var(--warn); }
.dectmon .tw-ant-health.hl-down { color: var(--danger); }
.dectmon .tw-ant-health.hl-offline { color: var(--text-faint); }
.dectmon .tree-ant .tw-ant-off { color: var(--danger); font-weight: 600; }
/* Demoted antenna: present but not reporting — greyed, with a muted "offline" sub. */
.dectmon .tree-ant.is-offline { opacity: .5; }
.dectmon .tree-ant.is-offline .tw-ant-off { color: var(--text-faint); font-weight: 500; }

/* Sortable Devices-modal column headers (click to sort; active column accented). */
.dectmon .dv-colhead .dv-sortable { cursor: pointer; user-select: none; transition: color .12s; }
.dectmon .dv-colhead .dv-sortable:hover { color: var(--text); }
.dectmon .dv-colhead .dv-sortable.is-sorted { color: var(--accent); font-weight: 600; }