/* 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. Borders, text and
   * the small radius use the platform tokens directly (--border, --text-1,
   * --text-2, --r-sm, --bg-raised): the DECT dialogs mount on <body>,
   * outside .dectmon, so an alias declared here would not reach them. */
  /* --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-md);

  background: var(--bg);
  color: var(--text-1);
  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 the old .layout
 * (Replay, and Live when v2 is off) scrolls inside its panels. 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. flex and min-height live here, not on the
 * mount's inline style, so the v2 Live exception below can win. */
.m-dect-mount {
  max-height: calc(100dvh - 64px - var(--safe-top));
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
/* v2 Live sizes to the networks list and the intruder detail. The document
   scrolls. Replay removes .dm-v2-live, so the cap above comes back. */
.m-dect-mount:has(.dectmon.dm-v2-live) {
  max-height: none;
  flex: none;
  min-height: min-content;
}
/* .m-body is overflow:auto, which is a scrollport even when the box grows
   with the page and the window is what actually moves. A sticky toolbar
   inside that port pins to the box and scrolls away with it. visible makes
   the viewport the scrollport, so the toolbar can sit under .m-subhdr.
   Replay and Presence drop .dm-v2-live and keep the capped inner scroller. */
.monitor-view:has(.dectmon.dm-v2-live) > .m-body {
  overflow: visible;
}
.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(--border); 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.
   * DECT v1 only: with dect_monitor_v2 on, every mode (Live, Replay,
   * Presence) uses the v2 EventToolbar and dect-monitor-v2.css hides this bar
   * (.dectmon.dm-v2-on > .topbar). Owner decision OD7: v1 is retired after v2
   * is kit-aligned (R30), not ported; tests/event-shell-bands.test.js pins it
   * as the only .topbar in an event view. It sits in .m-body, whose top is
   * the event tab bar, so sticky top:0 pins it there. z-index stays under
   * .m-subhdr (100) and above the carrier grid. */
  height: auto; flex: none;
  position: sticky; top: 0; z-index: 40;
}
/* Event shell only. The war-room cell also hosts .dectmon; the negative offset
   there pulls the bar past the cell edge. .dectmon is overflow:hidden, so it
   is the sticky containing block — a viewport-sized --event-toolbar-top would
   push the bar down inside the panel. Negative top cancels .m-body padding. */
.m-dect-mount .dectmon:not(.compact) .topbar {
  position: sticky; top: calc(-1 * var(--m-body-pad-top, 0px)); z-index: 90;
  margin-top: calc(-1 * var(--m-body-pad-top, 0px));
  margin-left: calc(-1 * var(--m-body-pad-x, 0px));
  margin-right: calc(-1 * var(--m-body-pad-x, 0px));
  width: calc(100% + 2 * var(--m-body-pad-x, 0px));
  max-width: none; box-sizing: border-box;
}
.dectmon .topbar-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Phone: the bar's top bleed (above) lands OUTSIDE .dectmon, which clips (overflow:hidden), so
   the first row of tabs lost its top edge and ring. Keep the bar inside the box. The tabs also
   grow to the touch floor, so the host sizes to them instead of the fixed 30px. */
@media (max-width: 760px) {
  .m-dect-mount .dectmon:not(.compact) .topbar { top: 0; margin-top: 0; }
  .dectmon .topbar-meta > .seg-host { height: auto; min-height: 30px; }
}
/* 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(--border);
  border-radius: var(--r-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-muted); 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(--border-strong); 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-text); 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(--border); flex: none; }
.dectmon .zones-strip[hidden] { display: none; }
.dectmon .zones-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); 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(--border); color: var(--text-1); cursor: pointer; }
.dectmon .zone-chip:hover { background: var(--bg-raised); }
.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-raised); 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-muted); 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(--border);
  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(--border); color: var(--text-1);
  cursor: default; max-width: 100%;
}
.dectmon .alert-chip.has-scope { cursor: pointer; }
.dectmon .alert-chip.has-scope:hover { background: var(--bg-2); }
.dectmon .alert-title { font-weight: 600; white-space: nowrap; }
.dectmon .alert-detail { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .alert-chip.sev-critical .alert-dot { animation: dm-pulse 1.6s ease-in-out infinite; }
/* 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(--border);
  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(--border)); }
.dectmon .metric-label { font-size: 10px; color: var(--text-2); }
.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-text); }
.dectmon .metric-foot { font-size: 9.5px; color: var(--text-muted); 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-2); }

/* 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; }
/* Fleet stats sit in the body. Live v2 has its own KPI cards; Presence has its board. */
.dectmon.dm-v2-live > .dect-body-stats,
.dectmon.dm-presence > .dect-body-stats { display: 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-2); }
.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-1); 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-raised); }
.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-muted); }
.dectmon .status-pill.st-live { border-color: color-mix(in srgb, var(--live) 45%, var(--border)); }
.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(--border)); 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(--border)); }
.dectmon .status-pill.st-replay .status-dot { background: var(--accent); }
.dectmon .status-pill.st-replay .meta-value { color: var(--accent-text); }
.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(--border)); }
.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; } }

/* ============================ 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(--border);
  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(--border);
}
.dectmon .panel-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-2); }
.dectmon .panel-sub { font-size: 11px; color: var(--text-muted); }
.dectmon .panel-count {
  font-size: 12px; font-weight: 700; background: var(--bg-raised);
  border-radius: 12px; padding: 1px 9px; color: var(--text-2); 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-muted); 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(--r-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-muted); 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; background: var(--dm-hue, transparent); }
.dectmon .tw-badge, .dectmon .tw-bearers {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-2);
  background: var(--bg-raised); 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-raised); }
.dectmon .tw-vendor-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-fgn { color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dectmon .tw-meta { font-size: 10px; color: var(--text-muted); 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-raised); }
.dectmon .tree-bcast.is-none .tw-bcast-name { color: var(--text-muted); }
.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-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dectmon .tw-bcast-sub { font-size: 10px; color: var(--text-muted); 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-muted); 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-muted); 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: 66%; flex: 0 1 auto; }
.dectmon .tw-ant-sub { font-size: 10px; color: var(--text-muted); 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(--border); color:var(--text-muted); }
.dectmon .tree-sec-known { color: var(--accent-text); }
.dectmon .tree-sec-unknown { color: var(--warn); }
.dectmon .tree-sec-n { font-variant-numeric: tabular-nums; background: var(--bg-raised); 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-muted); background: var(--bg-raised); }
.dectmon .tw-state.pinned { color: var(--accent-text); 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(--border)); background: color-mix(in srgb, var(--warn) 6%, transparent); border-radius: var(--r-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(--r-sm); }
.dectmon .tw-unknown-acts { display:flex; gap:4px; padding-right:4px; flex:none; }
/* 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-2); }
/* DECT modal fields are the platform field (base.css, components.css): one
   box, focus ring and select chevron. These rules only size and place. */
.dect-wl-modal .dect-wl-in { text-transform:none; letter-spacing:normal; }
.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-muted); white-space: nowrap; }
.dectmon .hm-half { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.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-2); 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-muted); 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(--border-strong); border-radius: var(--r-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-1); }
.dectmon .hm-tooltip .muted { color: var(--text-muted); }

/* ---- 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-muted); padding: 4px 2px; }
.dectmon .ov-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--text-faint);
  border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.dectmon .ov-row:hover { background: var(--bg-raised); }
.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); }
/* --dm-hue: the network's hue, set per element by applyDataStyles (dect-monitor.js; UI audit D8). */
.dectmon .ov-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--dm-hue, transparent); }
.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-muted); 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; background: var(--dm-hue, transparent); }
.dectmon .ov-stats { display: flex; align-items: center; gap: 9px; flex: none; }
.dectmon .ov-bearers { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.dectmon .ov-bearers b { color: var(--text-1); }
.dectmon .ov-load { font-size: 12px; font-weight: 700; color: var(--text-2); min-width: 36px; text-align: right; }
/* 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(--border);
}
.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-2); }
.dectmon .ov-head-h { font-size: 10.5px; color: var(--text-muted); }
.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-1); }
.dectmon .ov-bcast-sub { font-size: 10.5px; color: var(--text-muted); }

/* ---- legends ---- */
.dectmon .legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-2); flex: none; }
.dectmon .legend[hidden] { display: none; }
.dectmon .legend-title { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.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-muted); border: 1px solid var(--border-strong); }
/* Same grey as the canvas STATE_COLORS.unmeasured, with a dashed edge. */
.dectmon .leg-swatch.s-unmeasured { background: #4a4d55; border: 1px dashed color-mix(in srgb, var(--text-1) 72%, transparent); }
.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(--accent-text); }
.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(--border); 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(--border); border-left: 3px solid var(--text-faint); border-radius: var(--r-sm); padding: 7px 10px; font: inherit; color: var(--text-1); cursor: pointer; }
.dectmon .dh-row:hover { background: var(--bg-raised); }
.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-muted); 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(--border); }
.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-text); cursor: pointer; padding: 2px 4px; }
.dectmon .dh-link:hover { text-decoration: underline; }
.dectmon .dh-empty { padding: 14px 10px; font-size: 12px; color: var(--text-muted); }

/* ---- selected-system detail (identity + occupancy) ---- */
.dectmon .sysd-card { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--foreign); border-radius: var(--r-sm); padding: 9px 11px; }
.dectmon .sysd-card.is-own { border-left-color: var(--own); }
.dectmon .sysd-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.dectmon .sysd-tag { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }
.dectmon .sysd-card.is-own .sysd-tag { color: var(--accent-text); border-color: var(--own); }
.dectmon .sysd-kv { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.dectmon .sysd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dectmon .sysd-row dt { flex: none; font-size: 11px; color: var(--text-muted); }
.dectmon .sysd-row dd { margin: 0; font-size: 11.5px; text-align: right; word-break: break-word; }
.dectmon .sysd-note { line-height: 1.5; }
.dectmon .sysd-note b { color: var(--text-1); }

/* ---- 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(--border); border-left: 3px solid var(--text-faint); border-radius: var(--r-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-muted); 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-raised); overflow: hidden; }
.dectmon .sig-fill { height: 100%; background: var(--accent); }
.dectmon .sys-bearers { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.dectmon .sys-bearers b { color: var(--text-1); }
.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-muted); font-size: 10.5px; }
.dectmon .bp-loc { margin-left: auto; color: var(--text-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.dectmon .bp-anon { color: var(--text-muted); font-style: italic; }

/* ---- replay scrubber ---- */
.dectmon .replaybar {
  display: flex; align-items: center; gap: 12px; padding: 9px 18px;
  border-top: 1px solid var(--border); background: var(--bg-1); flex-wrap: wrap;
}
.dectmon .replaybar[hidden] { display: none; }
.dectmon .rp-scrub { flex: 1; min-width: 120px; accent-color: var(--accent); }
.dectmon .rp-time { font-size: 11.5px; color: var(--text-2); 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(--border);
  color: var(--text-muted); background: var(--bg-2);
}
.dectmon .dm-prov-own, .dectmon .dm-prov-event { color: var(--accent-text); 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-2); }
.dectmon .dm-prov-unresolved { opacity: .55; }
.dectmon .sys-company { font-size: 11px; color: var(--text-2); 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(--border); background: var(--bg-2); color: var(--text-2); cursor: pointer;
}
.dectmon .dm-cat-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-1); 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 ~1080px so
 * normal laptop windows (~1100–1280) don't drop into the stacked, taller 2-row
 * layout that forced the page to scroll. Below 1080 (iPad landscape 1024
 * included — at 1024 the 3-column grid squeezed the middle overview column to
 * ~150px of word-per-line soup) the systems panel wraps under and the bounded
 * mount scrolls .layout internally. The tree rail keeps 240px (200px truncated
 * every network title and wrapped row metas onto 3–4 lines on iPad). */
@media (max-width: 1080px) {
  .dectmon .metrics { grid-template-columns: repeat(2, 1fr); }
  .dectmon .layout { grid-template-columns: 240px minmax(0, 1fr); }
  .dectmon .systems-panel { grid-column: 1 / -1; max-height: 320px; }
}
/* iPad portrait (768/834): even a 240px rail is cramped next to the network
 * overview — stack to one column like the phone layout below. */
@media (max-width: 860px) {
  .dectmon .layout { grid-template-columns: 1fr; }
  .dectmon .tree-panel { max-height: 240px; }
}
@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(--border-strong) 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(--border-strong); 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(--r-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 td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dect-reg-modal .dect-reg-empty { color: var(--text-muted); text-align: center; padding: 14px; }
.dect-reg-modal .dect-reg-del { background: none; border: 0; color: var(--text-muted); 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[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(--r-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-2); padding: 8px 2px 3px; border-bottom: 1px solid var(--border); 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-muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* ---- beltpack receipts modal (SPEC E) ---- */
.dect-receipts-modal .receipts-head { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.dect-receipts-modal .receipts-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); 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: var(--warn); }
.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(--border); }
.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-muted); 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-2); }
.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; }
.dect-devices-modal .dv-chip { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); cursor: pointer; }
.dect-devices-modal .dv-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); 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: minmax(80px, 1.2fr) minmax(124px, 1.4fr) 150px 136px 92px 14px; gap: 12px; align-items: center; }
@media (max-width: 720px) {
  .dect-devices-modal .dv-colhead, .dect-devices-modal .dv-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) 12px; gap: 6px; }
  .dect-devices-modal .dv-dbm, .dect-devices-modal .dv-loc, .dect-devices-modal .dv-batt-sub { white-space: normal; }
}
.dect-devices-modal .dv-colhead { padding: 10px 12px 8px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--border); 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(--border); color: var(--text-2); 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-raised); }
/* fold button + its "Remove offline" button side by side (no button inside a button) */
.dect-devices-modal .dv-group-line { display: flex; align-items: center; gap: 9px; background: var(--bg-2); border-top: 1px solid var(--border); padding-right: 10px; }
.dect-devices-modal .dv-group-line > .dv-group-head { flex: 1; min-width: 0; border-top: 0; }
.dect-devices-modal .dv-gh-tw { width: 9px; font-size: 9px; color: var(--text-muted); }
.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-muted); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-row-wrap { border: 1px solid var(--border); 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-1); 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); }
/* Offline: a token step, not opacity (R14). The Status cell says the word. */
.dect-devices-modal .dv-row.offline, .dect-devices-modal .dv-row.offline .dv-dbm { color: var(--text-muted); }
.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); }
/* Bolero signal_level grade: 4 ascending segments, not the dBm meter above. */
.dect-devices-modal .dv-grade { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.dect-devices-modal .dv-grade i { display: block; width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--text-2) 42%, transparent); }
.dect-devices-modal .dv-grade i:nth-child(1) { height: 4px; }
.dect-devices-modal .dv-grade i:nth-child(2) { height: 7px; }
.dect-devices-modal .dv-grade i:nth-child(3) { height: 10px; }
.dect-devices-modal .dv-grade i:nth-child(4) { height: 13px; }
.dect-devices-modal .dv-grade i.on { background: var(--ok); }
.dect-devices-modal .dv-grade.is-bad i.on { background: var(--warn); }
.dect-devices-modal .dv-dbm { flex: none; font-size: 11px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dect-devices-modal .dv-dbm.dv-grade-bad { color: var(--warn); }
/* battery cell + muted Bolero charge / temp / health subline */
.dect-devices-modal .dv-batt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 11px; color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dect-devices-modal .dv-batt-main { display: inline-flex; align-items: center; gap: 7px; }
.dect-devices-modal .dv-batt-sub { font-size: 10px; line-height: 1.3; color: var(--text-muted); white-space: normal; }
.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-2); font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.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-2); }
.dect-devices-modal .dv-exp { font-size: 10px; color: var(--text-muted); text-align: center; }
.dect-devices-modal .dv-hist { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px 12px; flex-wrap: wrap; }
.dect-devices-modal .dv-hist-meta { font-size: 10.5px; color: var(--text-muted); }
/* Extended per-beltpack telemetry (FreeSpeak / RTS OCA): full-width chip strip
   above the history row. Chips appear only for fields the pack actually reports. */
.dect-devices-modal .dv-tele { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dect-devices-modal .dv-tele-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--border); font-size: 10.5px; }
.dect-devices-modal .dv-tele-k { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 9.5px; }
.dect-devices-modal .dv-raw { flex: 1 0 100%; margin-bottom: 6px; }
.dect-devices-modal .dv-raw-h { display: block; margin-bottom: 4px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 9.5px; }
.dect-devices-modal .dv-tele-v { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ===== 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(--border); 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-2); cursor: pointer; }
.dect-devices-modal .dv-vt + .dv-vt { border-left: 1px solid var(--border); }
.dect-devices-modal .dv-vt.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
/* 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(--border); 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-2); cursor: pointer; }
.dect-devices-modal .dv-density button + button { border-left: 1px solid var(--border); }
.dect-devices-modal .dv-density button.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.dect-devices-modal .dv-newseg { font: inherit; font-size: 11.5px; padding: 5px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
.dect-devices-modal .dv-newseg:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

/* 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(--border)); 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-2); }
.dect-devices-modal .dv-seg-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-seg.is-pinned-seg .dv-seg-name { color: var(--accent-text); }
.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(--border); border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-2); 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(--border)); }
.dect-devices-modal .dv-seg-rename:hover { color: var(--accent-text); }
.dect-devices-modal .dv-seg-empty { font-size: 11px; color: var(--text-muted); 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(--border); 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); }
.dect-devices-modal .dv-tile.offline .dv-tile-name, .dect-devices-modal .dv-tile.offline .dv-tile-rssi { color: var(--text-muted); }
.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-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dect-devices-modal .dv-detected { margin-left: 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 8px; font-size: 9.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); vertical-align: 1px; opacity: .85; }
.dect-devices-modal .dv-tile-pin, .dect-devices-modal .dv-tile-menu { border: 0; background: transparent; color: var(--text-muted); 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; }
/* Keyboard and touch reach them too (UI audit N11): a focused tile (or its open
   ⋯ menu) and hover-less devices show the controls without a mouse. */
.dect-devices-modal .dv-tile:focus-within .dv-tile-pin, .dect-devices-modal .dv-tile:focus-within .dv-tile-menu, .dect-devices-modal .dv-tile-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .dect-devices-modal .dv-tile-pin, .dect-devices-modal .dv-tile-menu { 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-text); }
.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-batt { display: flex; align-items: center; gap: 5px; }
.dect-devices-modal .dv-tile-batt .dv-tile-bar { flex: 1; }
.dect-devices-modal .dv-batt-ico { flex: none; width: 15px; height: 9px; color: var(--ok); }
.dect-devices-modal .dv-batt-ico.dv-batt-warn { color: var(--warn); }
.dect-devices-modal .dv-batt-ico.dv-batt-crit { color: var(--danger); }
.dect-devices-modal .dv-batt-ico.dv-batt-none { color: color-mix(in srgb, var(--text-faint) 55%, transparent); }
.dect-devices-modal .dv-tile-batpct { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-tile-rssi { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dect-devices-modal .dv-tile-rssi .dv-grade { height: 10px; }
.dect-devices-modal .dv-tile-rssi .dv-grade i:nth-child(1) { height: 3px; }
.dect-devices-modal .dv-tile-rssi .dv-grade i:nth-child(2) { height: 5px; }
.dect-devices-modal .dv-tile-rssi .dv-grade i:nth-child(3) { height: 8px; }
.dect-devices-modal .dv-tile-rssi .dv-grade i:nth-child(4) { height: 10px; }
.dect-devices-modal .dv-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dect-devices-modal .dv-tile-last { color: var(--text-muted); }

/* the ⋯ move-to menu (drag-drop fallback) */
/* ---- zone-assignment select (SPEC C2) ---- */
.dect-reg-modal .dect-zone-sel { min-width: 140px; }

/* ---- load trend modal (SPEC F) ---- */
.dect-trend-modal .trend-head { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.dect-trend-modal .trend-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); 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: var(--warn); }
.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-2); margin-bottom: 12px; }
.dect-geo-modal .dect-geo-warn { color: var(--warn); }
.dect-geo-modal .dect-reg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dect-geo-modal .dect-reg-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dect-geo-modal .dect-reg-empty { color: var(--text-muted); text-align: center; padding: 14px; }
.dect-geo-modal .dect-geo-untagged { color: var(--text-muted); }
.dect-geo-modal .dect-geo-coords { font-size: 12px; }
.dect-geo-modal .dect-geo-acc { font-size: 10px; color: var(--text-muted); margin-left: 6px; }
.dect-geo-modal .dect-geo-live { font-size: 11.5px; color: var(--accent-text); }
.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(--border); border-radius: var(--r-sm); color: var(--text-1); 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) ---- */
/* A row button and its action (kit Button: + add antennas, edit antenna,
   assign) side by side — never an action inside the row's <button>. */
.dectmon .tree-line, .dectmon .ov-line { display: flex; align-items: center; gap: 4px; }
.dectmon .tree-line > .tree-row, .dectmon .ov-line > .ov-row { flex: 1; min-width: 0; }
.dectmon .tree-line.is-bcast { margin-top: 4px; }
.dectmon .tree-line.is-bcast > .tree-bcast { margin-top: 0; }
/* "+ add antennas" is a kit xs Button; keep it 24x24 at least (R17 targets). */
.dectmon .tw-add { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
/* Touch: 44px wide, and only as tall as the row's 6px padding allows. */
@media (pointer:coarse), (max-width:760px) {
  .dectmon .tw-add::before { content: ''; position: absolute; inset: -6px -10px; }
}
.dectmon .tree-ant { position: relative; }
.dectmon .tree-ant.is-muted .tw-ant-name { color: var(--text-muted); }
.dectmon .tw-ant-mute { margin-left: 6px; font-size: 9px; color: var(--text-muted); border: 0.5px solid var(--border); border-radius: var(--r-sm); padding: 0 4px; vertical-align: middle; }
.dectmon .tree-ant-empty { font-size: 11px; color: var(--text-muted); 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-2); margin-bottom: 12px; }
.dect-pick-modal .dect-pick-dev { border: 0.5px solid var(--border); border-radius: var(--r-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(--border); background: none; color: var(--text-1); border-radius: var(--r-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(--border); cursor: pointer; }
.dect-pick-modal .dect-pick-sub { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.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(--r-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-2); flex: 0 0 auto; }
.dect-aedit-modal .ae-name { flex: 1; }
.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(--border); background: none; color: var(--text-1); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; }
.dect-aedit-modal .dect-aedit-foot { display: flex; justify-content: space-between; border-top: 0.5px solid var(--border); padding-top: 12px; }
.dect-aedit-modal .ae-clear { font-size: 12px; border: 0.5px solid var(--border); background: none; color: var(--text-muted); border-radius: var(--r-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(--r-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-2); margin-bottom: 8px; }
.dect-map-modal .dect-map-auto { background: var(--accent); border: 0; color: #fff; border-radius: var(--r-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(--border); border-radius: var(--r-sm); }
.dect-map-modal .dect-map-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-muted); 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: var(--ok); height: 8px; border-radius: 50%; width: 8px; }
.dect-map-modal .dect-map-acc-note { margin-left: auto; font-style: italic; }
.dect-map-modal .dect-map-note { font-size: 11px; color: var(--warn); margin: -4px 0 8px; }
.dect-map-modal .dect-reg-empty { color: var(--text-muted); 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(--r-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-muted); }

/* 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 { margin-right: 5px; vertical-align: middle; }
.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 .tw-ant-name { color: var(--text-muted); }
.dectmon .tree-ant.is-offline .tw-ant-off { color: var(--text-muted); 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-1); }
.dectmon .dv-colhead .dv-sortable.is-sorted { color: var(--accent-text); font-weight: 600; }

/* ---- Configure (gear) → per-source PINs (board dect-creds; js/dect/dect-config-panel.js) ----
   The modal lives on <body>, outside .dectmon, so it uses the global tokens. */
.dect-config-modal .dcp { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--text-1); }
.dect-config-modal .dcp-intro { margin: 0; color: var(--text-2); line-height: 1.45; }
.dect-config-modal .dcp-preview { margin: 0; padding: 7px 10px; border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--warn-dim); color: var(--text-1); font-size: 12px; }
.dect-config-modal .dcp-bar { display: flex; justify-content: flex-end; }
.dect-config-modal .dcp-list { display: flex; flex-direction: column; gap: 14px; }
.dect-config-modal .dcp-empty { margin: 0; padding: 10px 0; color: var(--text-muted); list-style: none; }
.dect-config-modal .dcp-device { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.dect-config-modal .dcp-device-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.dect-config-modal .dcp-device-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dect-config-modal .dcp-device-name { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dect-config-modal .dcp-device-sub { font-size: 11.5px; color: var(--text-muted); }
.dect-config-modal .dcp-note { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--text-2); background: color-mix(in srgb, var(--border) 25%, transparent); border-bottom: 1px solid var(--border-subtle); }
.dect-config-modal .dcp-add-host:empty { display: none; }
.dect-config-modal .dcp-add-host { padding: 12px; border-bottom: 1px solid var(--border-subtle); }
.dect-config-modal .dcp-sources { list-style: none; margin: 0; padding: 0; }
.dect-config-modal .dcp-sources > .dcp-empty { padding: 10px 12px; }
.dect-config-modal.modal { width: min(920px, calc(100vw - 32px)); }
.dect-config-modal .dcp-src { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main state" "acts acts" "extra extra"; gap: 8px 16px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.dect-config-modal .dcp-src:last-child { border-bottom: 0; }
.dect-config-modal .dcp-src-main { grid-area: main; min-width: 0; }
.dect-config-modal .dcp-src-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dect-config-modal .dcp-src-vendor { font-weight: 600; }
.dect-config-modal .dcp-src-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.dect-config-modal .dcp-src-addr { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.dect-config-modal .dcp-src-state { grid-area: state; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dect-config-modal .dcp-src-state .badge { max-width: 100%; }
.dect-config-modal .dcp-src-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.dect-config-modal .dcp-src-actions { grid-area: acts; display: flex; gap: 6px; flex-wrap: wrap; }
.dect-config-modal .dcp-src-extra { grid-area: extra; min-width: 0; }
.dect-config-modal .dcp-src-extra:empty { display: none; }
.dect-config-modal .dcp-pinform, .dect-config-modal .dcp-reveal { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); }
.dect-config-modal .dcp-pinform-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dect-config-modal .dcp-pin-input { width: 220px; max-width: 100%; }
.dect-config-modal .dcp-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--text-muted); }
.dect-config-modal .dcp-reveal { display: flex; flex-direction: column; gap: 10px; }
.dect-config-modal .dcp-reveal-row { display: flex; flex-direction: column; gap: 5px; }
.dect-config-modal .dcp-reveal-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); font-weight: 600; }
.dect-config-modal .dcp-reveal-inuse { font-weight: 500; font-size: 11px; color: var(--ok); }
.dect-config-modal .dcp-reveal-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dect-config-modal .dcp-reveal-input { width: 220px; max-width: 100%; font-family: var(--font-mono); }
.dect-config-modal .dcp-linkbar { display: flex; flex-direction: column; gap: 10px; }
.dect-config-modal .dcp-link-form { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.dect-config-modal .dcp-link-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dect-config-modal .dcp-link-controls .form-label { margin: 0; }
.dect-config-modal .dcp-device-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.dect-config-modal .dcp-host-type { font-size: 11.5px; color: var(--text-muted); }
.dect-config-modal .dcp-fw { padding: 8px 12px; }
.dect-config-modal .dcp-inline { display: inline-flex; align-items: center; gap: 4px; }
.dect-config-modal .dcp-allow { padding: 8px 10px; border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--warn-dim); }
.dect-config-modal .dcp-allow p { margin: 0 0 8px; }
.dect-config-modal .dcp-checks { display: flex; flex-direction: column; gap: 4px; }
.dect-config-modal .dcp-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dect-config-modal .dcp-link-state { font-size: 11.5px; color: var(--text-muted); }
.dect-config-modal .dcp-reveal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dect-config-modal .dcp-reveal-foot .dcp-hint { margin: 0; }
.dect-config-modal .dcp-addform .field-list { margin-bottom: 4px; }
.dect-config-modal .dcp-systems { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dect-config-modal .dcp-system {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0; text-align: left; font: inherit; font-size: 13px; line-height: 1.3;
  color: var(--text-1); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px 8px; cursor: pointer;
}
.dect-config-modal .dcp-system.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.dect-config-modal .dcp-system-name { min-width: 0; }
.dect-config-modal .dcp-addform .field-list[hidden] { display: none; }
.dect-config-modal .dcp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.dect-config-modal .dcp-addform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) {
  .dect-config-modal.modal { width: 100%; }
  .dect-config-modal .modal-body { padding: 12px; }
  .dect-config-modal .dcp-src { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "state" "acts" "extra"; gap: 8px; }
  .dect-config-modal .dcp-src-state .badge { white-space: normal; }
  .dect-config-modal .dcp-pin-input, .dect-config-modal .dcp-reveal-input { flex: 1 1 140px; width: auto; }
}

/* Presence (flag dect_presence). Bars are % of the track so they scale with
 * width; the table scrolls inside .presence-scroll and cannot widen the page. */
.dectmon .layout[hidden],
.dectmon .presence-panel[hidden] { display: none !important; }
.dectmon .presence-panel {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; max-width: 100%; width: 100%; overflow: hidden;
  padding: 12px;
}
.dectmon .presence-scroll {
  overflow-x: auto; max-width: 100%; min-width: 0;
  -webkit-overflow-scrolling: touch;
}
.dectmon .presence-table { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.dectmon .presence-table th,
.dectmon .presence-table td {
  text-align: left; padding: 4px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.dectmon .presence-table th { font-size: 10px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.dectmon .dpres { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.dectmon .dpres-row {
  display: grid; grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
  gap: 6px; align-items: center; min-width: 0; max-width: 100%;
}
.dectmon .dpres-ari {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px;
}
.dectmon .dpres-track {
  position: relative; height: 14px; min-width: 0;
  background: var(--bg-2); border-radius: 3px; overflow: hidden;
}
.dectmon .dpres-bar {
  position: absolute; top: 2px; height: 10px; border-radius: 2px;
  background: #25b6a8; max-width: 100%;
}
.dectmon .dpres-bar.is-own { background: var(--accent); }
.dectmon .dpres-empty { margin: 8px 0; color: var(--text-2); font-size: 13px; }
.dectmon .replay-empty { padding: 12px 18px; }
.dectmon .replay-empty[hidden] { display: none; }
@media (max-width: 375px) {
  .dectmon .presence-panel { padding: 8px; }
  .dectmon .dpres-row { grid-template-columns: minmax(3.25rem, 32%) minmax(0, 1fr); gap: 4px; }
  .dectmon .presence-table th, .dectmon .presence-table td { padding: 4px 6px; }
}

/* Devices modal: remove / restore offline beltpacks (soft delete) */
.dect-devices-modal .dv-seg-rm,
.dect-devices-modal .dv-gh-rm,
.dect-devices-modal .dv-rm-device { font: inherit; font-size: 10.5px; text-transform: none; letter-spacing: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-2); cursor: pointer; padding: 2px 8px; white-space: nowrap; }
.dect-devices-modal .dv-seg-rm { margin-left: auto; }
.dect-devices-modal .dv-seg-rm + .dv-seg-tools { margin-left: 0; }
.dect-devices-modal .dv-seg-rm:hover,
.dect-devices-modal .dv-gh-rm:hover,
.dect-devices-modal .dv-rm-device:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.dect-devices-modal .dv-rm-device { margin: 6px 0 2px; }
.dect-devices-modal .dv-removed { margin: 0 0 8px; }
.dect-devices-modal .dv-removed[hidden] { display: none; }
.dect-devices-modal .dv-removed-toggle { font: inherit; font-size: 11.5px; color: var(--text-2); background: transparent; border: 0; padding: 2px 0; cursor: pointer; }
.dect-devices-modal .dv-removed-toggle:hover { color: var(--text-1); }
.dect-devices-modal .dv-removed-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; max-height: 180px; overflow: auto; }
.dect-devices-modal .dv-removed-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.dect-devices-modal .dv-removed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dect-devices-modal .dv-removed-when { color: var(--text-muted); font-size: 11px; }
.dect-devices-modal .dv-removed-restore { font: inherit; font-size: 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-2); color: var(--text-1); cursor: pointer; padding: 2px 8px; }
.dect-devices-modal .dv-removed-restore:hover { border-color: var(--accent); color: var(--accent-text); }
.dect-devices-modal .dv-removed-all { align-self: flex-end; margin-top: 4px; }

/* Nodes card: names the host device(s) and opens the node list */
.dectmon .metric-link { cursor: pointer; }
.dectmon .topbar-meta .metric-link:hover .metric-label,
.dectmon .topbar-meta .metric-link:hover .metric-names { color: var(--text-1); }
.dectmon .metric-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dectmon .metric-names { font-size: 11px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: baseline; }
.dectmon .metric-names:empty { display: none; }
.dect-nodes-modal { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 86vw); }
.dect-nodes-modal .dn-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); color: var(--text-1); cursor: pointer; }
.dect-nodes-modal .dn-row:hover { border-color: var(--accent); }
.dect-nodes-modal .dn-row.is-offline .dn-name { color: var(--text-2); }
.dect-nodes-modal .dn-row.is-offline .dn-sub { color: var(--text-muted); }
.dect-nodes-modal .dn-name { font-weight: 600; font-size: 13px; }
.dect-nodes-modal .dn-sub { font-size: 11px; color: var(--text-2); }