/* =========================================================================
   RPM — COMPONENTS & LAYOUT
   -------------------------------------------------------------------------
   Structure only. All colors, fonts, radii and shadows come from the design
   tokens in theme.css — edit THAT file to reskin the product. See DESIGN.md.
   ========================================================================= */
* {
  box-sizing: border-box;
  transition: background-color .5s, fill .5s;
}
html, body {
  margin: 0;
  padding: 0;
  /* Firefox's scrollbar properties are inherited, so setting them here covers
     every scrollable pane. Chromium uses the ::-webkit-scrollbar rules further
     down. Anything wanting a different scrollbar (the subnav) overrides with a
     class selector, which outranks both. */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: auto;
  background-color: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-ui);
  font-size: 13px;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  min-height: 100vh;
  transition: background .5s, filter .5s;
}
html[data-theme="dark"] .leaflet-tile {
    filter:
        invert(1)
        brightness(.9)
        contrast(.9)
        saturate(1)
}

/* atmospheric gradient + grain */
@property --color-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(167, 139, 250, 0.08);
}
@property --color-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(109, 245, 208, 0.045);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 12% -20%, var(--color-1), transparent 60%),
    radial-gradient(800px 600px at 105% 10%, var(--color-2), transparent 65%);
  transition: --color-1 0.5s, --color-2 0.5s, background .5s;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-image);
}
body > * { position: relative; z-index: 1; }
/* …except <main>: z-index 1 would trap its fixed drawers (z-index 90-100)
   inside a stacking context BELOW the topbar (z-index 50), clipping their
   top edge under the header. With auto, main still paints above the fixed
   body::before/::after backgrounds (z-index 0) by DOM order, and the
   drawers join the root stacking context where their z-index wins. */
body > main { z-index: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* The hidden attribute must always win. Without this, any element whose class
   sets display (flex/grid/…) ignores hidden — this bit us twice (the tool
   drawer's spinner kept spinning after load; the add-package form showed on
   page load). JS throughout the app toggles visibility via el.hidden. */
[hidden] { display: none !important; }

/* Clickable rows: CSS (not per-row JS styling) so rows injected later — e.g.
   by the watchlist auto-refresh — keep the pointer cursor. */
tr[data-href] { cursor: pointer; }

/* =========================================================================
   TOPBAR
   ========================================================================= */
.topbar {
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line-faint);
  background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* The switcher is a fourth in-flow child of a three-track grid. Give it its
   own track — scoped with :has() so a deployment with CROSS_SYSTEM_URL empty,
   which renders no switcher, keeps the original three-column layout. */
.topbar:has(.system-switch) { grid-template-columns: minmax(220px, auto) auto 1fr auto; }


.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--brand-mark-1) 0%, var(--brand-mark-2) 45%, var(--brand-mark-3) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 22px -8px color-mix(in srgb, var(--brand-base) 55%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark-r {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.04em;
  color: #1a0e3a;
  line-height: 1;
}
.brand-mark-arc {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px var(--bg-0), 0 0 14px var(--mint-dim);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.85); }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--fg-0);
}
.brand-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 3px;
  letter-spacing: 0;
}

.primary-nav {
  display: flex;
  gap: 2px;
  align-items: center;
}
.primary-nav-item {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  padding: 8px 14px;
  border-radius: var(--r-md);
  transition: color 0.15s, background 0.15s;
}
.primary-nav-item:hover {
  color: var(--fg-0);
  background: var(--bg-2);
}
.primary-nav-item.is-active {
  color: var(--fg-0);
  background: linear-gradient(180deg, var(--brand-glow), transparent);
  box-shadow: 0 0 0 1px var(--brand-ring) inset;
}
.primary-nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -10px;
  height: 1px;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.iconbtn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--fg-1);
  transition: color 0.15s, background 0.15s;
}
.iconbtn:hover { color: var(--fg-0); background: var(--bg-2); }
.iconbtn-theme .theme-icon-sun,
.iconbtn-theme .theme-icon-moon { transition: opacity 0.2s, transform 0.25s; }
.iconbtn-theme .theme-icon-moon { display: none; }
.iconbtn-theme .theme-icon-sun  { display: block; }
[data-theme="light"] .iconbtn-theme .theme-icon-sun  { display: none; }
[data-theme="light"] .iconbtn-theme .theme-icon-moon { display: block; }
.iconbtn-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--bg-0);
}
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-size: 11.5px;
  color: var(--fg-1);
  border: 1px solid var(--line-faint);
}
.topbar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: var(--ok-glow);
}
.topbar-status.is-warn { border-color: var(--warn-line); color: var(--warn); }
.topbar-status.is-warn .topbar-status-dot { background: var(--warn); box-shadow: var(--warn-glow); }
.topbar-status.is-crit { border-color: var(--crit-line); color: var(--crit); background: var(--crit-bg); }
.topbar-status.is-crit .topbar-status-dot { background: var(--crit); box-shadow: var(--crit-glow); animation: pulse 1s ease-in-out infinite; }

/* =========================================================================
   SUBNAV
   ========================================================================= */
.subnav {
  height: var(--subnav-h);
  border-bottom: 1px solid var(--line-faint);
  background: var(--bg-1);
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.subnav::-webkit-scrollbar { height: 0; }
.subnav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 14px;
  height: 100%;
  min-width: max-content;
}
.subnav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color 0.12s;
}
.subnav-item:hover { color: var(--fg-0); }
.subnav-item.is-active {
  color: var(--fg-0);
  font-weight: 600;
}
.subnav-item.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px var(--brand-glow);
}

/* =========================================================================
   PAGE LAYOUT
   ========================================================================= */
.page {
  padding: 22px 22px 60px;
  max-width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  height: var(--pagehead-h);
  margin-bottom: 18px;
  padding: 0 10px;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fg-0);
  line-height: 1.05;
}
.page-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-2);
  font-size: 0.85em;
  margin-left: 8px;
}
.page-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-2);
  font-feature-settings: "tnum";
}
.page-sub b { color: var(--fg-0); font-weight: 600; }

/* metric strip — small status chips at top */
.metric-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.metric {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 500;
}
.metric b {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 14px;
  color: var(--fg-0);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.metric.is-ok   b { color: var(--ok); }
.metric.is-warn b { color: var(--warn); }
.metric.is-crit b { color: var(--crit); }
.metric.is-mute b { color: var(--fg-1); }

/* =========================================================================
   TOOLBAR
   ========================================================================= */
@property --color-1 {
  initial-value: var(--bg-2);
}
@property --color-2 {
  initial-value: var(--bg-1);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--toolbar-bmargin);
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--color-1), var(--color-2));
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
  transition: --color-1 .5s, --color-2 .5s;
  height: var(--toolbar-h);
}

.viewmodes {
  display: inline-flex;
  align-items: center;
  background: var(--bg-0);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-faint);
}
.viewmodes-label {
  font-size: 11px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px 0 8px;
  border-right: 1px solid var(--line-faint);
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: 3px;
}
.viewmode {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 5px 11px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.viewmode:hover { color: var(--fg-0); }
.viewmode.is-active {
  background: var(--bg-3);
  color: var(--fg-0);
  box-shadow: 0 0 0 1px var(--line-soft) inset;
}

.toolbar-spacer { flex: 1; }

.pagesize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.pagesize select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--field-bg);
  color: var(--fg-0);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  padding: 5px 26px 5px 9px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11.5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%237d8699' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

.search {
  position: relative;
  width: 280px;
}
.search input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--fg-0);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 28px 7px 32px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search input::placeholder { color: var(--fg-3); }
.search input:focus {
  outline: none;
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}
.search-kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--line-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  color: var(--fg-1);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-md);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--bg-hover); color: var(--fg-0); border-color: var(--line-strong); }
.btn-primary {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-base) 75%, #fff),
    color-mix(in oklab, var(--brand-base) 90%, #000));
  border-color: var(--brand-dim);
  color: var(--brand-on);
}
.btn-primary:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-base) 65%, #fff),
    color-mix(in oklab, var(--brand-base) 80%, #000));
  color: var(--brand-on);
}
.btn-danger {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--crit) 82%, #fff),
    color-mix(in oklab, var(--crit) 94%, #000));
  border-color: color-mix(in oklab, var(--crit) 70%, #000);
  color: #fff;
}
.btn-danger:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--crit) 72%, #fff),
    color-mix(in oklab, var(--crit) 84%, #000));
  border-color: color-mix(in oklab, var(--crit) 60%, #000);
  color: #fff;
}

/* =========================================================================
   DATA TABLE
   ========================================================================= */
@property --tablecolor-1 {
  initial-value: var(--bg-1);
}
@property --tablecolor-2 {
  initial-value: var(--bg-0);
}
.tablewrap {
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--tablecolor-1), var(--tablecolor-2));
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  transition: --tablecolor-1 .5s, --tablecolor-2 .5s;
}
.tableshell {
  overflow: auto;
  height: calc(100vh - var(--topbar-h) - var(--subnav-h) - var(--pagehead-h) - var(--toolbar-h) - var(--toolbar-bmargin) - var(--thead-h) - var(--tablefoot-h) + 5px);
  min-height: 420px;
}
.tableshell.notoolbar {
  height: calc(100vh - var(--topbar-h) - var(--subnav-h) - var(--pagehead-h) - var(--thead-h) - var(--tablefoot-h) + 5px);
}
/* The heights above are for a table that IS the page — they pin it to the
   viewport so the list pages fill the screen. A table inside a card is a
   detail, not the page: the same rule turns a one-row packages list into a
   420px-minimum, viewport-tall slab. Size to content there, and only scroll
   once a long history would run away with the page. */
.card .tableshell {
  height: auto;
  min-height: 0;
  max-height: 60vh;
}
/* Scrollbars — global, not per-pane.
   Seven things scroll (data tables, drawers, popovers, the page itself) and
   only .tableshell was ever styled, so most scrollbars were browser default
   and the styled one was invisible: the thumb used --bg-3, which is two points
   off a card in dark mode and pure white in light mode.

   The inset is a transparent border clipped to the padding box rather than a
   solid --bg-0 one. The old version hardcoded the *page* colour, which painted
   a dark halo around the thumb whenever the scrollbar sat inside a card.

   14px with a 3px inset gives an 8px thumb, up from 6px. Firefox gets `auto`
   instead of `thin`; the subnav overrides both back, deliberately. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

.dt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.dt thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-1);
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-0);
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  user-select: none;
  transition: background .5s !important;
  height: var(--thead-h);
}
.dt thead th[data-sort] {
  cursor: pointer;
  transition: color 0.12s;
}
.dt thead th[data-sort]:hover { color: var(--fg-0); }
.dt thead th .sort-ind {
  display: inline-block;
  width: 8px;
  margin-left: 6px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.dt thead th.is-sorted { color: var(--fg-0); }
.dt thead th.is-sorted .sort-ind { color: var(--brand); }

.dt tbody td {
  padding: 0 12px;
  height: var(--row-h);
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--fg-1);
}
.dt tbody tr:nth-child(even) td { background: var(--bg-row-stripe); }
.dt tbody tr {
  transition: background 0.08s;
}
.dt tbody tr:hover td { background: var(--bg-hover); color: var(--fg-0); }
.dt tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--brand);
}
.dt tbody tr.is-crit td:first-child {
  box-shadow: inset 2px 0 0 var(--crit);
}
.dt tbody tr.is-warn td:first-child {
  box-shadow: inset 2px 0 0 var(--warn);
}
.dt tbody tr.is-crit:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--crit), 0 0 0 transparent;
}

.col-cust   { font-weight: 500; color: var(--fg-0); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.row-link   { color: inherit; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.row-link:hover { color: var(--brand); }
.col-addr   { color: var(--fg-1); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
/* Numeric cells left-align under their headers (plant-wide preference,
   set to match the Flap List / Summary treatment). */
.col-num    { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--fg-1); text-align: left; }
.col-mac    { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); letter-spacing: 0.02em; }
.col-pkg    { color: var(--fg-2); font-size: 11.5px; }

.power      { font-family: var(--font-mono); font-feature-settings: "tnum"; text-align: left; font-weight: 500; }
.power.is-ok    { color: var(--ok); }
.power.is-warn  { color: var(--warn); }
.power.is-crit  { color: var(--crit); }
.power.is-zero  { color: var(--fg-mute); }

/* status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  text-transform: capitalize;
  font-feature-settings: "tnum";
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status.is-online   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.status.is-online .status-dot   { background: var(--ok);   box-shadow: var(--ok-glow); }
.status.is-warning  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.status.is-warning .status-dot  { background: var(--warn); box-shadow: var(--warn-glow); }
.status.is-offline  { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
.status.is-offline .status-dot  { background: var(--crit); box-shadow: var(--crit-glow); }
.status.is-unknown  { background: var(--bg-3);    color: var(--fg-2); border-color: var(--line-soft); }
.status.is-unknown .status-dot  { background: var(--fg-3); }

/* =========================================================================
   TABLE FOOTER / PAGINATION
   ========================================================================= */
.tablefoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--line-faint);
  background: var(--bg-1);
  font-size: 11.5px;
  color: var(--fg-2);
  gap: 12px;
  transition: background .5s;
  height: var(--tablefoot-h);
}
.tablefoot-info b {
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-weight: 500;
}
.pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-0);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  padding: 2px;
}
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-1);
}
.pager a:hover { background: var(--bg-3); color: var(--fg-0); }
.pager .is-active {
  background: var(--brand);
  color: var(--brand-on);
  font-weight: 600;
}
.pager .is-disabled { color: var(--fg-mute); pointer-events: none; }

/* =========================================================================
   STUB / PLACEHOLDER PAGE
   ========================================================================= */
.stub {
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-lg);
  padding: 64px 28px;
  text-align: center;
  color: var(--fg-2);
  background: var(--bg-1);
}
.stub h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  color: var(--fg-0);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.stub p { margin: 0; font-size: 13px; max-width: 520px; margin: 0 auto; line-height: 1.6; }
.stub-hint {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* =========================================================================
   BRAND LOGO (image variant)
   ========================================================================= */
.brand-logo {
  height: 54px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.login-brand-logo {
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .brand-logo { max-width: 130px; height: 30px; }
}

/* =========================================================================
   USER CHIP + DROPDOWN
   ========================================================================= */
.user-chip {
  position: relative;
}
.user-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  color: var(--fg-1);
  font: inherit;
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.user-chip-btn:hover { background: var(--bg-3); border-color: var(--line-soft); color: var(--fg-0); }
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-mark-1), var(--brand-mark-2), var(--brand-mark-3));
  color: var(--brand-on);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 1px;
  text-align: left;
}
.user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-0);
}
.user-role {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.user-role-admin { color: var(--brand); }
.user-chip-caret { color: var(--fg-2); transition: transform 0.15s; }
.user-chip[data-open="true"] .user-chip-caret { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-pop);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.user-chip[data-open="true"] .user-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.user-menu-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-faint);
  margin-bottom: 4px;
}
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--fg-0); }
.user-menu-email { font-size: 11px; color: var(--fg-2); font-family: var(--font-mono); margin-top: 2px; }
.user-menu-item {
  display: block;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--fg-1);
  border-radius: var(--r-md);
  transition: background 0.1s, color 0.1s;
}
.user-menu-item:hover { background: var(--bg-3); color: var(--fg-0); }
.user-menu-item.is-danger { color: var(--crit); }
.user-menu-item.is-danger:hover { background: var(--crit-bg); color: var(--crit); }
.user-menu-sep { height: 1px; background: var(--line-faint); margin: 4px 0; }

/* =========================================================================
   MOBILE NAV — hamburger + sheet drawer
   ========================================================================= */
.nav-toggle { display: none; }

.nav-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-theme="light"] .nav-sheet-backdrop { background: rgba(15, 23, 42, 0.35); }
.nav-sheet-backdrop[hidden] { display: block; } /* override the [hidden] default — managed by opacity */
body[data-nav-open="true"] .nav-sheet-backdrop { opacity: 1; pointer-events: auto; }

.nav-sheet {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(86vw, 320px);
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  z-index: 80;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 24px 0 48px -28px rgba(0, 0, 0, 0.6);
}
body[data-nav-open="true"] .nav-sheet { transform: none; }
.nav-sheet[aria-hidden="true"] { /* keep it discoverable to AT until opened */ }

.nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-faint);
}
.nav-sheet-head .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.nav-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 16px;
}
.nav-sheet-group { padding: 10px 4px 4px; }
.nav-sheet-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-2);
  padding: 0 8px 6px;
  font-weight: 600;
}
.nav-sheet-item {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  border-radius: var(--r-md);
}
.nav-sheet-item:hover { background: var(--bg-2); color: var(--fg-0); }
.nav-sheet-item.is-active {
  background: var(--brand-glow);
  color: var(--fg-0);
  box-shadow: inset 2px 0 0 var(--brand);
}
.nav-sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-faint);
  background: var(--bg-2);
}
.nav-sheet-foot-name {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.1;
  gap: 2px;
}
.nav-sheet-signout {
  font-size: 11px;
  padding: 5px 10px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot {
  border-top: 1px solid var(--line-faint);
  padding: 14px 22px 18px;
  margin-top: 40px;
  font-size: 11px;
  color: var(--fg-2);
  background: linear-gradient(180deg, transparent, var(--bg-1));
}
.site-foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 100%;
}
.site-foot-brand { letter-spacing: 0.01em; }
.site-foot-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-foot-meta a { color: var(--fg-2); }
.site-foot-meta a:hover { color: var(--fg-0); }
.site-foot-sep { color: var(--fg-mute); }

/* =========================================================================
   PILL — generic small label (status pills already defined above, this is
   for non-status uses like role badges, etc.)
   ========================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  text-transform: capitalize;
  font-feature-settings: "tnum";
}
.pill-brand { background: var(--brand-dark-glow); color: var(--brand); border-color: var(--brand-ring); }
.pill-mute  { background: var(--bg-3);       color: var(--fg-2); border-color: var(--line-soft); }
.pill-info  { background: rgba(125, 211, 252, 0.10); color: var(--info); border-color: rgba(125, 211, 252, 0.30); }

/* =========================================================================
   PAGE HEAD ACTIONS — title + right-aligned action cluster
   ========================================================================= */
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-search { width: 240px; }

/* =========================================================================
   FLASH MESSAGES
   ========================================================================= */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  animation: rise 0.4s ease-out both;
}
.flash-success { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.flash-error   { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
.flash-warn    { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.flash-info    { background: var(--bg-2);    color: var(--fg-1); }
.flash-msg  { flex: 1; }
.flash-x {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  padding: 0 4px;
  cursor: pointer;
}
.flash-x:hover { opacity: 1; }

/* =========================================================================
   USER MANAGEMENT — table & action buttons
   ========================================================================= */
.users-table .col-actions { width: 1%; white-space: nowrap; }

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.user-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.user-cell-name {
  font-weight: 500;
  color: var(--fg-0);
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-cell-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 2px;
}
.self-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  background: var(--brand-glow);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 6px;
  vertical-align: 1px;
}
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.action-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.action-btn:hover { background: var(--bg-3); color: var(--fg-0); border-color: var(--line-soft); }
.action-btn-danger:hover { color: var(--crit); border-color: var(--crit-line); background: var(--crit-bg); }
.action-btn form { display: inline-flex; }

/* =========================================================================
   DRAWER (right-side panel)
   ========================================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-theme="light"] .drawer-backdrop { background: rgba(15, 23, 42, 0.35); }
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(94vw, 440px);
  background: var(--bg-1);
  border-left: 1px solid var(--line-soft);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: -24px 0 48px -28px rgba(0, 0, 0, 0.6);
}
.drawer-wide { width: min(94vw, 680px); }
/* Tool drawer (Modem Log / RF Data / Realtime Diagnostics): CMTS verbose
   output has long lines — give it half the viewport so they don't wrap,
   without dragging the other wide drawers along. */
#tool-drawer { width: min(94vw, max(50vw, 680px)); }
.drawer[data-mode]:not([data-mode="closed"]) { transform: none; }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-faint);
}
.drawer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg-0);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-faint);
  background: var(--bg-2);
}

/* =========================================================================
   FORM — used inside drawers and elsewhere
   ========================================================================= */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
.form-row-2     { grid-template-columns: 1fr 1fr; }
.form-row-3     { grid-template-columns: 1fr 1fr 1fr; }
.form-row-csz   { grid-template-columns: 2fr 1fr 1fr; } /* city, state, zip */
.form-field-span-2 { grid-column: span 2; }
.form-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-ui);
}
.form-hint-error {
  color: var(--crit);
  font-weight: 500;
}
.form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
}

/* When .form is used as a full-page card (create flow), give it more room */
.card.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-0);
}
.form-label em {
  font-style: normal;
  color: var(--brand);
  margin-left: 2px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--fg-0);
  font: inherit;
  font-size: 13px;
  padding: 9px 11px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%237d8699' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.form-field input:invalid:not(:placeholder-shown),
.form-field input.is-invalid {
  border-color: var(--crit-line);
  box-shadow: 0 0 0 3px var(--crit-bg);
}
.form-hint {
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.4;
}

/* Toggle switch (CSS-only) */
.form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-1);
  cursor: pointer;
  user-select: none;
  padding-bottom: 4px;
}
.form-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.form-toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  transition: background 0.15s, border-color 0.15s;
}
.form-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--fg-2);
  border-radius: 50%;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.15s;
}
.form-toggle input:checked + .form-toggle-track {
  background: var(--brand-glow);
  border-color: var(--brand-ring);
}
.form-toggle input:checked + .form-toggle-track .form-toggle-knob {
  background: var(--brand);
  transform: translateX(14px);
}
.form-toggle input:focus-visible + .form-toggle-track {
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.form-toggle-text { color: var(--fg-1); }

@media (max-width: 720px) {
  .drawer { width: 100vw; max-width: 100%; border-left: 0; }
  .col-email, .users-table th[data-col="email"] { display: none; }
  .col-last, .users-table th[data-col="last"]   { display: none; }
  .page-head-actions { width: 100%; }
  .inline-search { flex: 1; min-width: 0; width: auto; }
}

/* =========================================================================
   LOGIN PAGE
   ========================================================================= */
.login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-shell { width: 100%; max-width: 380px; }
.login-card {
  background: var(--bg-1);
  border: 1px solid var(--line-faint);
  border-radius: 16px;
  padding: 28px 26px 22px;
  box-shadow: var(--shadow-pop);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.login-brand-mark { width: 36px; height: 36px; }
.login-brand-mark .brand-mark-r { font-size: 19px; }
.login-brand-logo { height: 36px; width: auto; max-width: 200px; }
.login-brand-text { display: flex; flex-direction: column; line-height: 1; }
.login-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.025em;
  color: var(--fg-0);
}
.login-brand-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--fg-2);
  margin-top: 4px;
}
.login-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--fg-0);
  line-height: 1.05;
}
.login-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-2);
  font-size: 0.65em;
  margin-left: 8px;
}
.login-error {
  background: var(--crit-bg);
  border: 1px solid var(--crit-line);
  color: var(--crit);
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  margin-bottom: 14px;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 5px; }
.login-field span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.login-field input {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--fg-0);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.login-submit {
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 13px;
  justify-content: center;
}
.login-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}

/* =========================================================================
   SEARCH PAGE — multi-field grid
   ========================================================================= */
.search-form {
  background-color: var(--bg-3);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  padding: 18px;
}
.search-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.search-field-wide { grid-column: span 2; }
.search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-faint);
}

/* =========================================================================
   LIST PAGE EXTRAS
   ========================================================================= */
.row-meta { color: var(--fg-3); font-weight: 400; margin-left: 6px; }
.page-sub-mono {
  font-family: var(--font-mono);
  color: var(--fg-1);
}

/* =========================================================================
   ACCOUNT DETAIL — card grid layout
   ========================================================================= */
/* Provisioning ▸ Account: details left, packages right, history full width
   below (the history card lives outside this grid).

   Differs from Cable deliberately. Cable stacks a separate Email card under
   Packages and needs a three-row area map to do it; here the email address is
   just a row in the account card's definition list, so the same map would
   reserve two empty rows and hang a stray 32px gap under Packages. Same two
   columns and same 1.4:1 proportion, one row.

   align-items: start matters — without it the short Packages card stretches to
   the height of the account card and reads as a huge empty pane. */
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "account  packages";
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}
.card-account  { grid-area: account; }
.card-packages { grid-area: packages; }
.card-history  { margin-top: 0; }

/* Infrastructure detail pages — Overview, Access Point, Tower. A narrow
   summary card beside a wide table; those pages mark the wide one with an
   inline grid-column:span 2, which needs a multi-column grid to mean anything.
   Without this rule they stacked full width, the same defect the account page
   had. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.card {
  background-color: var(--bg-3);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-pop);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg-0);
}
.card-sub {
  font-size: 11.5px;
  color: var(--fg-2);
}
.card-sub b { color: var(--fg-0); font-family: var(--font-mono); font-weight: 500; }
.card-rule {
  border: 0;
  border-top: 1px solid var(--line-faint);
  margin: 14px 0;
}
.card-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--fg-3);
  font-size: 12.5px;
  font-style: italic;
}

/* Key/Value list */
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 12.5px;
}
.kv dt {
  color: var(--fg-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding-top: 2px;
}
.kv dd { margin: 0; color: var(--fg-0); }
.kv-mono { font-family: var(--font-mono); }

/* Address block */
.address-block {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-1);
}
.address-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.005em;
}
.address-company { color: var(--fg-2); }

/* "View on map" deep link — account page (inside the Address value) and CPE
   page (its own kv row). Sits under the address on both, so the top margin is
   what separates it from the last address line. */
.address-map-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--brand);
  width: fit-content;
}
.address-map-link:hover { text-decoration: underline; }
.address-map-link svg { opacity: 0.85; }

.phone-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.phone {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brand);
  width: fit-content;
}
.phone:hover { text-decoration: underline; }
.phone-sec { color: var(--fg-2); }

/* Notes */
.notes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  font-weight: 600;
  margin-bottom: 6px;
}
.notes-body {
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-1);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 240px;
  overflow-y: auto;
  line-height: 1.5;
}

/* Packages list */
/* Add-package inline form (progressive disclosure) */
/* display:flex would defeat the hidden attribute — keep [hidden] winning */
.pkg-add-form[hidden], .pkg-add-fields[hidden] { display: none; }
.pkg-add-form {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-add-row { display: flex; align-items: center; gap: 10px; }
.pkg-add-label {
  width: 120px;
  flex: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-2);
}
.pkg-add-label em { font-style: normal; color: var(--brand); }
.pkg-add-form select,
.pkg-add-form input[type="text"] {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--fg-0);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  flex: 1;
  min-width: 0;
}
.pkg-add-form select:focus,
.pkg-add-form input:focus { outline: none; border-color: var(--brand-ring); box-shadow: 0 0 0 3px var(--brand-glow); }
.pkg-add-fields { display: flex; flex-direction: column; gap: 10px; }
.pkg-add-actions { display: flex; gap: 8px; margin-left: 130px; }

.package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.package-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  transition: border-color 0.12s, background 0.12s;
}
.package-item:hover { border-color: var(--line-soft); background: var(--bg-3); }
.package-main { flex: 1; min-width: 0; }
.package-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
}
.package-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-2);
  font-family: var(--font-mono);
}
.package-mac    { color: var(--brand); }
.package-mac:hover { text-decoration: underline; }
.package-ip     { color: var(--fg-1); }
.package-serial { color: var(--fg-3); }
/* "Computer IP" and "Radio IP" differ in length, so the addresses would ragged
   down the left edge without a fixed column for the label. */
.package-ip-label {
  display: inline-block;
  min-width: 76px;
  color: var(--fg-3);
}

/* Email */
.email-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand);
}
.email-link:hover { text-decoration: underline; }

/* History */
.history-table tbody td { font-size: 12px; }
.history-table .col-num { font-size: 11.5px; }
.tableshell-inset {
  max-height: 460px;
  border-radius: var(--r-md);
}

/* Small button + danger ghost */
.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.btn-danger-ghost {
  background: transparent;
  color: var(--crit);
  border-color: var(--crit-line);
}
.btn-danger-ghost:hover {
  background: var(--crit-bg);
  color: var(--crit);
  border-color: var(--crit);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .topbar { gap: 16px; padding: 0 14px; }
  .topbar-status-text { display: none; }
  .topbar-status { padding: 6px; }
  .brand-tag { display: none; }
  .user-meta { display: none; }
  .user-chip-caret { display: none; }
  .user-chip-btn { padding: 3px; }
}
@media (max-width: 860px) {
  .primary-nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar:has(.system-switch) { grid-template-columns: auto auto 1fr auto; }
  .topbar-status { display: none; }
}
@media (max-width: 960px) {
  .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field-wide { grid-column: span 2; }
  .account-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "packages";
  }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > [style*="span 2"] { grid-column: auto !important; }
}
@media (max-width: 720px) {
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .search { width: 100%; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page { padding: 14px; }
  .search-grid { grid-template-columns: 1fr; }
  .search-field-wide { grid-column: auto; }
  .kv { grid-template-columns: 90px 1fr; }
  .brand-name { font-size: 14px; }
  .brand { gap: 8px; }
  .col-mac, .col-pkg, .dt thead th[data-col="mac"], .dt thead th[data-col="pkg"],
  .dt tbody td.col-mac, .dt tbody td.col-pkg { display: none; }
  .site-foot { padding: 14px 14px 18px; }
}
@media (max-width: 480px) {
  .brand-text { display: none; }
  .topbar { padding: 0 10px; gap: 8px; }
}

/* =========================================================================
   ANIMATIONS — staged page reveal
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .page-head, .toolbar, .tablewrap {
    animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .toolbar  { animation-delay: 0.08s; }
  .tablewrap { animation-delay: 0.16s; }
  .dt tbody tr {
    animation: rowin 0.4s ease-out both;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rowin {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* selection */
::selection { background: var(--brand-glow); color: var(--fg-0); }

/* View-mode column visibility is now done server-side in pages/all-modems.php
   via col_visible() — the table only emits the cells for the active view. */

/* small in-cell utilities */
.dim  { color: var(--fg-mute); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Rows with data-href are fully clickable — show the affordance. */
.dt tbody tr[data-href] { cursor: pointer; }

/* additional column classes — share base styling with the older ones */
.col-us-snr, .col-ds-snr { font-family: var(--font-mono); font-feature-settings: "tnum"; text-align: left; font-weight: 500; }
.col-model { color: var(--fg-1); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* small in-cell utilities (cont.) */
.td-empty { text-align: center; padding: 60px 12px; color: var(--fg-2); }

/* =========================================================================
   MODEM DETAIL — card grid, RF tiles, CPE list, tools, charts
   ========================================================================= */
.modem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  grid-template-areas:
    "account modem"
    "account cpe";
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.card-modem        { grid-area: modem; }
.card-account-snap { grid-area: account; }
.card-cpe          { grid-area: cpe; }

/* RF metric tiles */
.rf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.rf-tile {
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 10px 12px;
}
.rf-tile-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-2);
  margin-bottom: 4px;
  white-space: nowrap;
}
.rf-tile-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  line-height: 1.1;
}
.rf-tile-unit {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--fg-3);
  margin-left: 4px;
}
.rf-tile.is-ok   { border-color: var(--ok-line);   background: var(--ok-bg); }
.rf-tile.is-ok   .rf-tile-value { color: var(--ok); }
.rf-tile.is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.rf-tile.is-warn .rf-tile-value { color: var(--warn); }
.rf-tile.is-crit { border-color: var(--crit-line); background: var(--crit-bg); }
.rf-tile.is-crit .rf-tile-value { color: var(--crit); }
.rf-tile.is-zero .rf-tile-value { color: var(--fg-mute); }

/* live tool buttons */
.modem-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ping result inside the button */
.ping-result { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.ping-result.is-ok   { color: var(--ok); }
.ping-result.is-crit { color: var(--crit); }
/* The alive/dead green sits at 11px inside the Ping button; the default --ok
   green is too light on the light-mode button bg (CSR couldn't read it). Use a
   darker green here only — this is a readability tweak, not a new meaning. */
[data-theme="light"] .ping-result.is-ok { color: #166534; }

/* CPE lease list */
.cpe-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpe-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  transition: border-color 0.12s, background 0.12s;
}
.cpe-item:hover { border-color: var(--line-soft); background: var(--bg-3); }
.cpe-main { flex: 1; min-width: 0; }
.cpe-ip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
}
.cpe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-2);
}

/* RF history charts */
.card-graphs { margin-bottom: 16px; }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.chart {
  margin: 0;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 10px 12px 6px;
  min-width: 0;
}
.chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.chart-unit { font-weight: 400; color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.chart canvas { display: block; width: 100%; }
.chart-tip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-0);
  white-space: nowrap;
}
.chart-tip small { color: var(--fg-2); display: block; font-size: 10px; }

/* tool drawer output */
.tool-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-2);
  font-size: 12.5px;
  padding: 8px 0 16px;
}
.tool-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-soft);
  border-top-color: var(--brand);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tool-output pre {
  background: var(--bg-0);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-1);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
}
.tool-output .tool-error {
  background: var(--crit-bg);
  border: 1px solid var(--crit-line);
  color: var(--crit);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.tool-output h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-0);
  margin: 16px 0 8px;
}
.tool-output h3:first-child { margin-top: 0; }
.tool-output table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tool-output th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-2);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.tool-output td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--font-mono);
  color: var(--fg-1);
}
.tool-output .is-primary td { color: var(--fg-0); font-weight: 500; }

@media (max-width: 960px) {
  .modem-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "account" "modem" "cpe";
  }
  .chart-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ACTIVE-FILTER AFFORDANCES — make a filtered table state obvious and
   one-click clearable (filters live in the URL, so they survive reloads)
   ========================================================================= */
.filtered-note {
  color: var(--warn);
  font-weight: 500;
}
.filtered-note:hover { text-decoration: underline; }

.search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.search-clear:hover { background: var(--crit-bg); color: var(--crit); }

.filter-clear {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  white-space: nowrap;
}
.filter-clear:hover {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}
.live-filter-hint td.td-empty { padding: 16px 12px; font-size: 12px; }

/* =========================================================================
   USAGE PAGE — top consumers table
   ========================================================================= */
.usage-rank { color: var(--fg-3); font-family: var(--font-mono); width: 1%; }
.usage-cell { white-space: nowrap; }
.usage-total {
  display: block;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-weight: 500;
  color: var(--fg-0);
}
.usage-split {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  margin-top: 1px;
}
.usage-cell.is-sorted-col .usage-total { color: var(--brand); }
.usage-table tbody td { height: auto; padding-top: 6px; padding-bottom: 6px; }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }

@media (max-width: 720px) {
  .usage-table .col-addr, .usage-table .col-pkg,
  .usage-table th:nth-child(3), .usage-table th:nth-child(5) { display: none; }
}

/* =========================================================================
   SUMMARY — CMTS ports (downstream interface → upstream children)
   ========================================================================= */
.summary-table .th-unit { color: var(--fg-2); font-weight: 400; }

/* Tree, not zebra: parents read as group headers, children indent under them. */
.summary-table tbody tr:nth-child(even) td { background: transparent; }

.summary-table tr.sum-parent { cursor: pointer; }
.summary-table tr.sum-parent td { background: var(--bg-row-stripe); font-weight: 500; }
.summary-table tr.sum-parent:hover td { background: var(--bg-hover); color: var(--fg-0); }

/* flex lives on an inner wrapper — display:flex directly on a <td> is
   nonstandard and can knock the cell out of the table's column grid */
.sum-ds-wrap { display: flex; align-items: center; gap: 9px; }

/* numbers line up under their (left-aligned) headers */
.tree-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; color: var(--fg-2);
  transition: transform 0.14s ease;
  transform: rotate(90deg);   /* expanded = chevron points down */
}
.summary-table tr.sum-parent.is-collapsed .tree-toggle { transform: rotate(0deg); }
.sum-ds-label { color: var(--fg-0); font-size: 13px; }
.sum-ds-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand); border: 1px solid var(--brand-ring); border-radius: var(--r-pill);
  padding: 1px 6px;
}
.sum-ds-count { color: var(--fg-2); font-size: 11px; }

.summary-table tr.sum-child td { color: var(--fg-1); }
.summary-table tr.sum-child:hover td { background: var(--bg-hover); }
.sum-us { padding-left: 34px !important; position: relative; }
.sum-us::before {
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0;
  border-left: 1px solid var(--line-faint);
}
.sum-us .mono { color: var(--fg-1); font-size: 12px; }
.sum-ofdma-tag {
  margin-left: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); border: 1px solid var(--line-faint); border-radius: var(--r-pill);
  padding: 1px 5px; vertical-align: 1px;
}

/* Connected-% cell: value over a thin proportional bar. */
.pct-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 52px; }
.pct-val { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: 12px; font-weight: 500; }
.pct-val.is-ok { color: var(--ok); } .pct-val.is-warn { color: var(--warn); } .pct-val.is-crit { color: var(--crit); }
.pct-bar { width: 100%; height: 3px; border-radius: 2px; background: var(--line-faint); overflow: hidden; }
.pct-bar i { display: block; height: 100%; border-radius: 2px; }
.pct-bar.is-ok i { background: var(--ok); } .pct-bar.is-warn i { background: var(--warn); } .pct-bar.is-crit i { background: var(--crit); }

@media (max-width: 720px) {
  .sum-ds-tag, .sum-ds-count { display: none; }
}

/* =========================================================================
   ADMIN TOOLS + AUDIT LOG
   ========================================================================= */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.tool-card { display: flex; flex-direction: column; gap: 10px; }
.tool-title { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-0); }
.tool-desc { font-size: 12.5px; color: var(--fg-1); line-height: 1.55; margin: 0; flex: 1; }
.tool-note { display: block; margin-top: 6px; font-size: 12px; }
.tool-note.is-warn { color: var(--warn); }
.tool-note.is-ok { color: var(--ok); font-weight: 400; }
.tool-card-danger { border-color: var(--crit-line); }
.tool-card-danger .tool-title { color: var(--crit); }

.audit-table td { white-space: normal; }
.audit-table .col-when { white-space: nowrap; font-size: 11.5px; color: var(--fg-2); }
.audit-table .col-change { font-size: 12px; }
.audit-table .col-ip { font-size: 11.5px; color: var(--fg-2); }

/* =========================================================================
   SYSTEM STATUS — detail page behind the topbar health badge
   ========================================================================= */
.sys-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.sys-card { border-left: 3px solid var(--ok-line); }
.sys-card.is-warn { border-left-color: var(--warn); }
.sys-card.is-crit { border-left-color: var(--crit); background: var(--crit-bg); }
.sys-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sys-name { font-size: 14px; font-weight: 600; margin: 0; color: var(--fg-0); }
.sys-detail { font-size: 12.5px; color: var(--fg-1); margin-bottom: 8px; }
.sys-card.is-crit .sys-detail { color: var(--crit); font-weight: 500; }
.sys-card.is-warn .sys-detail { color: var(--warn); }
.sys-desc { font-size: 11px; color: var(--fg-2); line-height: 1.5; }

/* =========================================================================
   DHCP — pool utilization + ListMessages activity log
   ========================================================================= */
.dhcp-log-card { margin-top: 16px; }
.dhcp-log {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
}
.dhcp-log a { color: var(--fg-0); }
.dhcp-log a:hover { color: var(--brand); }
.dhcp-nak   { color: var(--crit); font-weight: 600; }
.dhcp-ack   { color: var(--ok); font-weight: 600; }
.dhcp-offer { color: var(--warn); }

/* =========================================================================
   CIRCUITS — Cacti graph images
   ========================================================================= */
.circuits-card { margin-bottom: 16px; }
.circuits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 10px;
}
.circuit-graph {
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background-color: var(--bg-2);   /* cacti PNGs are white — keep them on white in both themes */
  transition: border-color 0.12s ease;
}
.circuit-graph:hover { border-color: var(--brand-ring); }
.circuit-graph img { max-width: 100%; height: auto; display: block; }
@media (max-width: 560px) {
  .circuits-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   MODEM MAP — Leaflet map with status-colored dots
   ========================================================================= */
.map-card { padding: 6px; }
#modem-map {
  height: calc(100vh - 240px);
  min-height: 420px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  z-index: 0;   /* keep Leaflet panes under the site's drawers/sheets */
}

/* Dim/invert OSM tiles in the dark theme so the map doesn't glow. */
.circuit-graph img { filter: invert(1) hue-rotate(330deg) brightness(0.95) contrast(.95) saturate(0.4); }
[data-theme="light"] .leaflet-tile { filter: none; }
[data-theme="light"] .circuit-graph img { filter: hue-rotate(130deg) brightness(1) contrast(1) saturate(0.9); }

/* Themed popups */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--bg-1);
  color: var(--fg-0);
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--line-soft);
}
.leaflet-popup-content { margin: 10px 12px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-2); }
.map-pop { font-size: 12px; }
.map-pop-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.map-pop-name a { color: var(--fg-0); text-decoration: none; }
.map-pop-name a:hover { color: var(--brand); }
.map-pop-line { color: var(--fg-1); }
.map-pop-line a { color: var(--fg-1); }
.map-pop-line.mono { font-family: var(--font-mono); font-size: 11.5px; margin-top: 3px; }
.leaflet-container .leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-1) 80%, transparent);
  color: var(--fg-2);
}
.leaflet-bar a { background: var(--bg-3); color: var(--fg-0); border-color: var(--line-soft); }
.leaflet-bar a:hover { background: var(--bg-hover); }

/* Legend chips double as layer toggles. */
#map-legend .metric { cursor: pointer; border: 1px solid transparent; font: inherit; }
#map-legend .metric:not(.is-active) { opacity: 0.38; }
#map-legend .metric:not(.is-active) b { text-decoration: line-through; }

/* =========================================================================
   WATCHLIST — live watch card + watchlist page
   ========================================================================= */
.watch-card {
  margin-bottom: 16px;
  border-color: var(--brand-ring);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--brand-glow);
}
.watch-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 8px var(--crit);
  animation: pulse 1.2s ease-in-out infinite;
  margin-right: 2px;
  vertical-align: 1px;
}
.btn-watching {
  border-color: var(--crit-line);
  background: var(--crit-bg);
  color: var(--crit);
}
.btn-watching:hover { border-color: var(--crit); background: var(--crit-bg); color: var(--crit); }

.chart-wide { margin-bottom: 14px; }
.ping-summary {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-1);
  text-align: center;
}
.ping-summary.is-lossy { color: var(--crit); font-weight: 500; }

.chart-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .chart-grid-3 { grid-template-columns: 1fr; } }

.watch-logs { margin-top: 14px; }
.watch-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--bg-0);
}
.watch-log-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.watch-log-line:last-child { border-bottom: 0; }
.watch-log-sev {
  flex-shrink: 0;
  width: 34px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.watch-log-line.is-crit .watch-log-sev { color: var(--crit); }
.watch-log-line.is-warn .watch-log-sev { color: var(--warn); }
.watch-log-line.is-info .watch-log-sev { color: var(--fg-3); }
.watch-log-line.is-crit { background: var(--crit-bg); }
.watch-log-text { flex: 1; color: var(--fg-1); word-break: break-word; }
.watch-log-meta { flex-shrink: 0; color: var(--fg-3); font-size: 10px; }

.pill-crit { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }

/* watchlist health tiles + notes */
.watch-stats { margin-bottom: 14px; }
.rf-tile-since { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg-3); }
.rf-tile-value.is-na { color: var(--fg-mute); font-size: 13px; }
.watch-note-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.watch-note-form input[type="text"] {
  flex: 1;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  color: var(--fg-0);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
}
.watch-note-form input:focus {
  outline: none;
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.watch-note-preview {
  font-size: 11px;
  color: var(--fg-2);
  font-style: italic;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* watchlist neighbor context panel */
.watch-neighbors {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.watch-neighbors.is-plant { border-color: var(--warn-line); background: var(--warn-bg); }
.watch-nb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.watch-nb-verdict { font-size: 12px; font-weight: 500; color: var(--fg-1); }
.watch-neighbors.is-plant .watch-nb-verdict { color: var(--warn); }
.watch-nb-stats {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-2);
}
.watch-nb-sep { color: var(--fg-mute); margin: 0 4px; }

/* per-channel SNR — Option A tooltip grid */
.tip-chan-grid {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 2px 6px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line-faint);
}
.tip-chan { font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.tip-chan.is-ok   { color: var(--ok); }
.tip-chan.is-warn { color: var(--warn); }
.tip-chan.is-crit { color: var(--crit); font-weight: 600; }

/* per-channel SNR — Option B bar strip */
.chan-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  margin-top: 4px;
  padding: 0 2px;
}
.chan-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--fg-3);
  transition: opacity 0.1s;
}
.chan-bar:hover { opacity: 0.6; }
.rf-band-pow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  margin: -6px 0 14px;
  line-height: 1.6;
}

/* OFDMA channels: hatched so they read as a different animal than ATDMA */
.chan-bar.is-ofdma {
  background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255, 255, 255, 0.35) 2px 4px);
}
.chan-bar.is-ok   { background: var(--ok); }
.chan-bar.is-warn { background: var(--warn); }
.chan-bar.is-crit { background: var(--crit); }

/* =========================================================================
   ANALYZE WITH AI — button + diagnosis panel
   ========================================================================= */
.watch-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ai {
  border-color: var(--brand-ring);
  background: var(--brand-glow);
  color: var(--brand);
}
.btn-ai:hover { border-color: var(--brand); background: var(--brand-glow); color: var(--brand); }

.ai-panel {
  margin: 0 0 14px;
  border: 1px solid var(--brand-ring);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--brand-glow), transparent);
  overflow: hidden;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-faint);
}
.ai-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ai-panel-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.ai-panel-body { padding: 12px 14px; }

.ai-verdict {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.ai-verdict.is-crit { background: var(--crit-bg); }
.ai-verdict.is-warn { background: var(--warn-bg); }
.ai-verdict.is-ok   { background: var(--ok-bg); }
.ai-verdict.is-mute { background: var(--bg-2); }
.ai-sev-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.ai-verdict.is-crit .ai-sev-badge { background: var(--crit); color: #fff; }
.ai-verdict.is-warn .ai-sev-badge { background: var(--warn); color: #1a0e00; }
.ai-verdict.is-ok   .ai-sev-badge { background: var(--ok); color: #04210f; }
.ai-verdict.is-mute .ai-sev-badge { background: var(--fg-3); color: var(--bg-0); }
.ai-summary { font-size: 13.5px; font-weight: 500; color: var(--fg-0); line-height: 1.4; }

.ai-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-2);
  margin: 12px 0 6px;
}
.ai-causes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-cause {
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
}
.ai-cause-head { display: flex; align-items: baseline; gap: 8px; }
.ai-conf {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.ai-conf-high   { background: var(--crit-bg); color: var(--crit); }
.ai-conf-medium { background: var(--warn-bg); color: var(--warn); }
.ai-conf-low    { background: var(--bg-3); color: var(--fg-2); }
.ai-cause-text { font-size: 13px; font-weight: 500; color: var(--fg-0); }
.ai-evidence {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  line-height: 1.5;
}
.ai-actions {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--fg-1);
  line-height: 1.5;
}

/* AI diagnosis — standing disclaimer */
.ai-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--line-faint);
  background: var(--bg-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-2);
}
.ai-disclaimer svg { flex-shrink: 0; margin-top: 1px; color: var(--warn); }
.btn-ai[disabled] { opacity: 0.5; cursor: not-allowed; }
.ai-btn-wrap { display: inline-flex; }
.ai-btn-wrap .btn { width: 100%; }
.ai-panel-time { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--fg-3); text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* ── "?" help popovers ──────────────────────────────────────────────── */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--bg-1);
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: text-bottom;
  transition: color 0.12s, border-color 0.12s;
}
.help-btn:hover { color: var(--brand); border-color: var(--brand); }
/* Inside the RF drawer's <h3> headings */
.tool-output h3 .help-btn { margin-left: 7px; }

.help-pop {
  position: absolute;
  z-index: 300;   /* above drawers (90-100) and chart tooltips (200) */
  max-width: 340px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-1);
  /* Popovers open inside uppercase chart titles and table headers —
     reset to normal prose. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  white-space: normal;
  text-align: left;
  animation: helpPopIn 0.12s ease-out;
}
@keyframes helpPopIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.help-pop-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-0);
  margin-bottom: 5px;
}
.help-pop p { margin: 0 0 7px; }
.help-pop p:last-child { margin-bottom: 0; }
.help-pop p b { color: var(--fg-0); font-weight: 600; }

/* ── Neighbor context (modem page) ─────────────────────────────────── */
.nb-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nb-head .card-sub { flex: 1; min-width: 0; }
.nb-arrow {
  display: inline-flex;
  color: var(--fg-3);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.nb-head.is-open .nb-arrow { transform: rotate(90deg); }
.nb-head:hover .nb-arrow { color: var(--fg-1); }
.nb-verdict.is-ok   { color: var(--ok); }
.nb-verdict.is-warn { color: var(--warn); }
.nb-table tr[data-href] { cursor: pointer; }
.nb-table tr[data-href]:hover td { background: var(--bg-2); }
.nb-table .nb-self td { background: var(--bg-2); opacity: 0.85; }
.nb-body { margin-top: 4px; }
.nb-table th.nb-sort { cursor: pointer; user-select: none; }
.nb-table th.nb-sort:hover { color: var(--fg-0); }
.nb-table .sort-ind { margin-left: 3px; font-size: 10px; }

/* ── Usage vs package average (modem page bandwidth card) ──────────── */
.uvp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 10px 2px 2px;
}
.uvp-cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.uvp-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.uvp-val  { font-size: 13px; color: var(--fg-0); }
.uvp-avg  { font-size: 12px; color: var(--fg-2); }
.uvp-delta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-1); }
.uvp-delta.is-warn { color: var(--warn); font-weight: 600; }
.uvp-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 2px 4px;
  padding: 9px 12px;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-0);
}
.uvp-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--warn); }

/* ── Profile page ──────────────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 480px));
  gap: 16px;
  align-items: start;
}
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 2px;
  max-width: 380px;
}
.profile-form .btn { align-self: flex-start; }

/* ── Nodes pages ───────────────────────────────────────────────────── */
.nodes-table tr[data-href]:hover td { background: var(--bg-2); }
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  padding-top: 6px;
}
.sg-block .notes-label { margin-bottom: 6px; }
.sg-table td, .sg-table th { font-size: 12px; }
.rpd-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 22px;
  padding: 8px 2px 4px;
}
.rpd-kv-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.rpd-kv-value { font-size: 13px; color: var(--fg-0); }

/* ---- Monitoring: breadcrumbs, section titles, overview cards ---- */
.page-crumb { font-size: 12px; color: var(--fg-3); margin-bottom: 2px; }
.page-crumb a { color: var(--fg-2); }
.section-title { font: 600 12.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-2); margin: 24px 0 10px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ov-card canvas { width: 100%; display: block; margin-top: 8px; }
.ov-tiles { display: flex; gap: 20px; padding: 8px 2px 2px; }
.ov-tile { display: flex; flex-direction: column; gap: 2px; }
.ov-lbl { font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .05em; }
.ov-val { font: 600 16px var(--font-mono); color: var(--fg-0); }
.ov-val.is-ok { color: var(--ok); } .ov-val.is-info { color: var(--info); }
.ov-nochart { font-size: 12px; padding: 14px 2px; }

/* ── CPE detail: top cards, charts, availability strip, range tabs ─────── */
/* Account left, radio/package right — same proportions as .modem-grid on the
   DOCSIS modem page. The charts below use the shared .chart-grid (two per
   row), so this page needs no chart layout of its own. */
.cpe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
@media (max-width: 900px) { .cpe-grid { grid-template-columns: 1fr; } }
.cpe-ping-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpe-ping-btn { white-space: nowrap; }
.cpe-ping-out { font-size: 12px; font-weight: 600; }
.cpe-ping-out.is-good { color: var(--ok); }
.cpe-ping-out.is-warn { color: var(--warn); }   /* replied, but lost packets */
.cpe-ping-out.is-bad  { color: var(--crit); }
.fw-state {
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.fw-state.is-blocked { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
.fw-state.is-clear   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.cpe-fw-apply { white-space: nowrap; }
.avail-strip {
  position: relative;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  margin: 6px 0 10px;
}
.avail-seg { position: absolute; top: 0; bottom: 0; }
.avail-seg.is-up   { background: var(--ok); }
.avail-seg.is-down { background: var(--crit); }
.avail-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--fg-2);
}
.chart-absent {
  color: var(--fg-2);
  font-size: 13px;
  padding: 10px 0 14px;
}
.range-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.range-tabs a {
  padding: 3px 10px; border-radius: 5px; font-size: 13px;
  border: 1px solid var(--line-strong); color: var(--fg-2); text-decoration: none;
}
.range-tabs a.is-active { background: var(--brand); color: var(--brand-on); border-color: var(--brand); }

/* ── Cross-system switcher (beside the brand) ─────────────────────────
   Borrows the user-menu's visual language deliberately — same radius,
   shadow, border and transition — so it reads as part of the header
   rather than something bolted on. It opens from the left, hence the
   mirrored transform-origin. */
.system-switch { position: relative; margin-left: -4px; }

.system-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.system-switch-btn:hover,
.system-switch[data-open="true"] .system-switch-btn {
  color: var(--fg-0);
  background: var(--bg-2);
  border-color: var(--line-soft);
}

.system-switch-caret { transition: transform 0.15s ease; flex-shrink: 0; }
.system-switch[data-open="true"] .system-switch-caret { transform: rotate(180deg); }

.system-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-pop);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.system-switch[data-open="true"] .system-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Keyboard focus reveals the menu too: without this the link inside a closed
   menu is invisible but still tabbable, and with JS disabled it could never be
   clicked at all. Scoped to .system-menu, NOT .system-switch — the trigger
   keeps focus after the click that closes the menu, so :focus-within on the
   wrapper would fight the close handler. */
.system-menu:focus-within { opacity: 1; transform: none; pointer-events: auto; }

.system-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--fg-1);
  border-radius: var(--r-md);
  transition: background 0.1s, color 0.1s;
}
a.system-menu-item:hover { background: var(--bg-2); color: var(--fg-0); }
.system-menu-item.is-current { color: var(--fg-0); font-weight: 600; cursor: default; }
.system-menu-tick { width: 14px; flex-shrink: 0; color: var(--brand); }
.system-menu-item:not(.is-current) .system-menu-tick { visibility: hidden; }

@media (max-width: 860px) {
  .system-switch-label { display: none; }
  .system-switch-btn { padding: 5px 6px; }
}