/* ============================================================================
   SUPERADMIN THEME — "Switchboard"
   ============================================================================
   Loaded AFTER styles.css and scoped entirely under #view-admin.
   Nothing here can reach the login, signup, onboarding or company-admin views,
   which share the same stylesheet — that is what makes a superadmin-first
   rollout possible without touching the other two panels.

   Zero JavaScript depends on this file. It restyles primitives the app already
   emits (.btn, .badge, .tbl, .panel-head, .nav-tab, .modal …), so every screen
   changes at once and no behaviour does. Removing the <link> reverts it whole.

   DIRECTION
   The product is a switchboard: one operator watching lines light up across many
   tenants. So colour is reserved for STATE, never decoration — and there is no
   blue, because in an operations console a colour that means "button" is a
   colour that can no longer mean "connected".

     graphite  structure and primary action
     teal      a call is up
     brass     capacity pressure / attention   (the switchboard lamp)
     oxide     fault

   Numerals are set in IBM Plex Mono throughout — phone numbers, channel counts,
   durations and SIP codes are read and compared, not prose.
   ========================================================================== */

/* Fonts are loaded from index.html with preconnect rather than @import here:
   an @import inside a stylesheet serialises the request behind this file, which
   delays first paint. Every family below has a real fallback stack, so the panel
   is fully usable if the font host is unreachable (offline / locked-down net). */

#view-admin,
body.sw-admin {
  /* ---- Structure ---- */
  --sw-ink:        #12161C;   /* graphite: text, primary buttons, rail */
  --sw-ink-2:      #3A4149;   /* secondary text */
  --sw-ink-3:      #6B7480;   /* captions, meta */
  --sw-paper:      #FAFAF8;   /* app ground — porcelain, faintly warm */
  --sw-panel:      #FFFFFF;
  --sw-sunk:       #F3F3F0;   /* inset wells: table heads, filter bars */
  --sw-rule:       #E3E4E0;   /* hairline */
  --sw-rule-2:     #CFD1CC;   /* emphasised hairline */

  /* ---- State (the only colours in the system) ---- */
  --sw-live:       #0F9D77;   /* connected */
  --sw-live-bg:    #E7F5F0;
  --sw-lamp:       #C8811F;   /* pressure / attention */
  --sw-lamp-bg:    #FBF1E0;
  --sw-fault:      #B4342A;   /* fault */
  --sw-fault-bg:   #FBEBE9;
  --sw-idle:       #9AA1A9;   /* dark lamp */

  --sw-radius:     10px;
  --sw-radius-sm:  7px;
  --sw-shadow:     0 1px 2px rgba(18,22,28,.05), 0 1px 1px rgba(18,22,28,.04);
  --sw-shadow-lift:0 10px 24px -14px rgba(18,22,28,.35);

  --sw-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sw-cond:  'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, sans-serif;
  --sw-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  background: var(--sw-paper);
  color: var(--sw-ink);
  font-family: var(--sw-sans);
  -webkit-font-smoothing: antialiased;
}

/* Every numeral in the panel is tabular and monospaced, so columns of counts,
   durations and phone numbers line up and can be compared down the column. */
#view-admin .tbl td,
#view-admin .tbl th,
#view-admin code,
#view-admin .page-info,
#view-admin input[type="number"],
#view-admin .badge {
  font-variant-numeric: tabular-nums;
}
#view-admin code,
#view-admin .tbl td:first-child strong { font-family: var(--sw-mono); }

/* ============================================================================
   1 · SWITCHBOARD HEADER
   The old topbar carried a brand and a role chip. An operator does not need to
   be told which product they are in — they need to know whether the platform is
   healthy. So the header states platform condition and nothing else decorative.
   ========================================================================== */
#view-admin .topbar {
  background: var(--sw-ink);
  border-bottom: 1px solid #000;
  box-shadow: none;
  padding: 0 18px;
  min-height: 56px;
  backdrop-filter: none;
}
#view-admin .topbar .brand {
  font-family: var(--sw-cond);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
/* The role chip becomes a quiet stencil rather than a coloured badge. */
#view-admin .role-tag,
#view-admin .role-tag.admin {
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.72);
  font-family: var(--sw-cond);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Live-call counter: the one thing on the header that must catch the eye when it
   changes. Lamp-lit when calls are up, dark when the platform is quiet. */
#view-admin .live-calls-widget {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  font-family: var(--sw-mono);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px 5px 10px;
  letter-spacing: .02em;
}
#view-admin .live-calls-widget .live-dot {
  background: var(--sw-live);
  box-shadow: 0 0 0 3px rgba(15,157,119,.22);
  width: 7px; height: 7px;
}
#view-admin .nav-layout-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
  border-radius: var(--sw-radius-sm);
  font-size: 12px;
  padding: 5px 10px;
}
#view-admin .nav-layout-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

#view-admin .user-avatar-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: var(--sw-cond);
  font-weight: 600;
  letter-spacing: .04em;
}
#view-admin .user-avatar-btn:hover { background: rgba(255,255,255,.18); }
#view-admin .user-dropdown {
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-lift);
}
#view-admin .ud-name { font-weight: 600; color: var(--sw-ink); }
#view-admin .ud-meta { font-family: var(--sw-mono); font-size: 11.5px; color: var(--sw-ink-3); }
#view-admin .ud-item { color: var(--sw-ink-2); border-radius: 6px; }
#view-admin .ud-item:hover { background: var(--sw-sunk); color: var(--sw-ink); }
#view-admin .ud-item.ud-danger { color: var(--sw-fault); }
#view-admin .ud-item.ud-danger:hover { background: var(--sw-fault-bg); }

/* The view owns the whole viewport, and the html canvas — which sits BEHIND
   body and never sees tokens defined on it — follows the theme by literal.
   Without both, any page shorter than the screen ends in a light strip. */
#view-admin { min-height: 100dvh; }
html:has(body.sw-admin) { background: #FAFAF8; }
html:has(body.sw-admin.sw-dark) { background: #0E1116; }

/* ============================================================================
   2 · NAVIGATION
   Thirteen destinations is too many to scan as identical pills. They are set as
   a quiet list with a lit left edge for the active one — a patch-panel row,
   where the selected jack is the one showing a lamp.
   ========================================================================== */
#view-admin .nav-tabs,
#view-admin #admin-nav-tabs {
  background: var(--sw-panel);
  border-right: 1px solid var(--sw-rule);
  gap: 1px;
  padding: 10px 8px;
}
#view-admin .nav-tab {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: var(--sw-radius-sm);
  color: var(--sw-ink-2);
  font-family: var(--sw-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 8px 12px 8px 14px;
  transition: background .13s, color .13s;
}
#view-admin .nav-tab:hover { background: var(--sw-sunk); color: var(--sw-ink); }
#view-admin .nav-tab.active {
  background: var(--sw-sunk);
  color: var(--sw-ink);
  font-weight: 600;
}
/* The lamp: a lit edge, not a filled pill. */
#view-admin .nav-tab.active::before {
  content: '';
  position: absolute;
  left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--sw-lamp);
}
#view-admin .nav-tab .nav-badge {
  background: var(--sw-fault);
  color: #fff;
  font-family: var(--sw-mono);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
}

/* ============================================================================
   3 · PANEL + SECTION HEADS
   Every screen gets the same three-part head: an eyebrow saying which part of
   the platform this is, the title, and the count. The eyebrow earns its place —
   with thirteen screens, naming the area is orientation, not ornament.
   ========================================================================== */
#view-admin .main,
#view-admin main { background: var(--sw-paper); }

#view-admin .panel-head {
  align-items: flex-end;
  border-bottom: 1px solid var(--sw-rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
#view-admin .panel-head h2 {
  font-family: var(--sw-sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sw-ink);
  margin: 0;
}
/* Eyebrow, injected by CSS from a data attribute so no markup has to change. */
#view-admin .tab-panel > .panel-head h2::before {
  content: attr(data-eyebrow);
  display: block;
  font-family: var(--sw-cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sw-ink-3);
  margin-bottom: 5px;
}
#view-admin .tab-panel > p.muted { color: var(--sw-ink-3); font-size: 13px; line-height: 1.55; }

/* ============================================================================
   4 · TABLES AS INSTRUMENT READOUTS
   Dense rows, hairline rules, no zebra striping (it fights the status colour),
   a sunk sticky head, and numerals in mono so a column can be scanned.
   ========================================================================== */
#view-admin .table-wrap {
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow);
  overflow: auto;
}
#view-admin .tbl, #view-admin .table { border-collapse: separate; border-spacing: 0; width: 100%; }
#view-admin .tbl thead th, #view-admin .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--sw-sunk);
  border-bottom: 1px solid var(--sw-rule-2);
  color: var(--sw-ink-3);
  font-family: var(--sw-cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 14px;
  white-space: nowrap;
}
#view-admin .tbl tbody td, #view-admin .table tbody td {
  border-bottom: 1px solid var(--sw-rule);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--sw-ink-2);
  vertical-align: middle;
}
#view-admin .tbl tbody tr:last-child td { border-bottom: 0; }
#view-admin .tbl tbody tr:hover td { background: #FCFCFB; }
#view-admin .tbl tbody td strong { color: var(--sw-ink); font-weight: 600; }
#view-admin .tbl td.empty, #view-admin .table td.empty {
  color: var(--sw-ink-3); text-align: center; padding: 34px 14px; font-size: 13px;
}
/* Right-align numeric columns so magnitudes line up. Opt in with .num. */
#view-admin .tbl td.num, #view-admin .tbl th.num { text-align: right; font-family: var(--sw-mono); }

/* ============================================================================
   5 · STATUS PILLS
   Shape AND colour carry the state: a lit dot plus a tint. Colour alone fails
   for the colour-blind and fails again on a projector.
   ========================================================================== */
#view-admin .badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sw-sunk);
  border: 1px solid var(--sw-rule-2);
  border-radius: 999px;
  color: var(--sw-ink-2);
  font-family: var(--sw-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
}
#view-admin .badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sw-idle); flex: none;
}
#view-admin .badge.active, #view-admin .badge.ok, #view-admin .badge.success {
  background: var(--sw-live-bg); border-color: rgba(15,157,119,.3); color: #0B6B52;
}
#view-admin .badge.active::before, #view-admin .badge.ok::before { background: var(--sw-live); }
#view-admin .badge.inactive, #view-admin .badge.suspended {
  background: var(--sw-sunk); border-color: var(--sw-rule-2); color: var(--sw-ink-3);
}
#view-admin .badge.warn, #view-admin .badge.pending, #view-admin .badge.signup {
  background: var(--sw-lamp-bg); border-color: rgba(200,129,31,.32); color: #8A5712;
}
#view-admin .badge.warn::before, #view-admin .badge.pending::before,
#view-admin .badge.signup::before { background: var(--sw-lamp); }
#view-admin .badge.danger, #view-admin .badge.failed, #view-admin .badge.stopped {
  background: var(--sw-fault-bg); border-color: rgba(180,52,42,.3); color: #8E2A22;
}
#view-admin .badge.danger::before, #view-admin .badge.failed::before,
#view-admin .badge.stopped::before { background: var(--sw-fault); }
#view-admin .chip {
  background: var(--sw-sunk); border: 1px solid var(--sw-rule);
  border-radius: 6px; color: var(--sw-ink-2);
  font-size: 11.5px; padding: 2px 7px;
}

/* ============================================================================
   6 · CONTROLS
   Primary is graphite, not blue — see the header note. Destructive is the only
   filled colour, because deleting a tenant should look different to saving one.
   ========================================================================== */
#view-admin .btn {
  border-radius: var(--sw-radius-sm);
  font-family: var(--sw-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.005em;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: background .13s, border-color .13s, color .13s, transform .06s;
}
#view-admin .btn:active { transform: translateY(.5px); }
#view-admin .btn-primary {
  background: var(--sw-ink); border-color: var(--sw-ink); color: #fff;
}
#view-admin .btn-primary:hover { background: #1D2430; border-color: #1D2430; }
#view-admin .btn-ghost, #view-admin .btn-secondary {
  background: var(--sw-panel); border-color: var(--sw-rule-2); color: var(--sw-ink-2);
}
#view-admin .btn-ghost:hover, #view-admin .btn-secondary:hover {
  background: var(--sw-sunk); color: var(--sw-ink); border-color: var(--sw-ink-3);
}
#view-admin .btn-danger {
  background: var(--sw-fault); border-color: var(--sw-fault); color: #fff;
}
#view-admin .btn-danger:hover { background: #9E2D24; border-color: #9E2D24; }
#view-admin .btn-sm, #view-admin .btn-xs { font-size: 12px; padding: 5px 10px; }
#view-admin .btn-block { width: 100%; }

/* Row actions read as one control group rather than a scatter of buttons. */
#view-admin td.actions { white-space: nowrap; }
#view-admin td.actions .btn-sm,
#view-admin td.actions .btn-xs,
#view-admin .btn-sm.info {
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule-2);
  color: var(--sw-ink-2);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  margin-right: 4px;
}
#view-admin td.actions .btn-sm:hover { border-color: var(--sw-ink-3); color: var(--sw-ink); background: var(--sw-sunk); }
#view-admin td.actions .btn-sm.danger,
#view-admin td.actions .btn-xs.danger { color: var(--sw-fault); border-color: rgba(180,52,42,.28); }
#view-admin td.actions .btn-sm.danger:hover { background: var(--sw-fault-bg); border-color: var(--sw-fault); }

/* Inputs: inset wells, so a field looks like something you type into. */
#view-admin input[type="text"], #view-admin input[type="email"],
#view-admin input[type="password"], #view-admin input[type="number"],
#view-admin input[type="tel"], #view-admin input[type="url"],
#view-admin input[type="search"], #view-admin input[type="date"],
#view-admin input[type="time"], #view-admin input[type="datetime-local"],
#view-admin input:not([type]), #view-admin select, #view-admin textarea, #view-admin .inp {
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule-2);
  border-radius: var(--sw-radius-sm);
  color: var(--sw-ink);
  font-family: var(--sw-sans);
  font-size: 13.5px;
  box-shadow: inset 0 1px 2px rgba(18,22,28,.04);
  transition: border-color .13s, box-shadow .13s;
}
#view-admin input:focus, #view-admin select:focus, #view-admin textarea:focus, #view-admin .inp:focus {
  outline: none;
  border-color: var(--sw-ink);
  box-shadow: 0 0 0 3px rgba(18,22,28,.1);
}
#view-admin label, #view-admin .field label {
  font-family: var(--sw-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sw-ink-3);
}

/* Filter bar + pager: the shared components, dressed as an instrument surround. */
#view-admin .filter-bar {
  background: var(--sw-sunk);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius);
}
#view-admin .tbl-pager {
  border-top: 1px solid var(--sw-rule);
  background: var(--sw-panel);
  padding: 10px 14px;
  border-radius: 0 0 var(--sw-radius) var(--sw-radius);
}
#view-admin .page-info { font-family: var(--sw-mono); font-size: 11.5px; color: var(--sw-ink-3); }
#view-admin .page-num {
  background: var(--sw-panel); border: 1px solid var(--sw-rule-2);
  border-radius: 6px; color: var(--sw-ink-2);
  font-family: var(--sw-mono); font-size: 11.5px; padding: 4px 9px;
}
#view-admin .page-num:hover:not([disabled]) { border-color: var(--sw-ink-3); color: var(--sw-ink); }
#view-admin .page-num.active { background: var(--sw-ink); border-color: var(--sw-ink); color: #fff; }
#view-admin .page-size-select { font-family: var(--sw-mono); font-size: 11.5px; padding: 3px 6px; }

/* ============================================================================
   7 · SIGNATURE — THE LINE-LAMP STRIP
   A progress bar answers "what percent". An operator asks "how many lines are
   lit, and how many are left". So capacity is drawn as discrete cells, one per
   channel: lit for in-use, dark for free, brass when the last few remain.
   Used inline in tables and full-width in the header.
   ========================================================================== */
#view-admin .lamps {
  display: inline-flex; gap: 2px; align-items: center; vertical-align: middle;
}
#view-admin .lamp {
  width: 6px; height: 15px; border-radius: 1.5px;
  background: var(--sw-rule-2);
  box-shadow: inset 0 0 0 1px rgba(18,22,28,.05);
}
#view-admin .lamp.on {
  background: var(--sw-live);
  box-shadow: 0 0 5px rgba(15,157,119,.5), inset 0 0 0 1px rgba(0,0,0,.06);
}
/* Nearly full is the state worth noticing — the last lamps burn brass. */
#view-admin .lamps.tight .lamp.on {
  background: var(--sw-lamp);
  box-shadow: 0 0 5px rgba(200,129,31,.5), inset 0 0 0 1px rgba(0,0,0,.06);
}
#view-admin .lamps.full .lamp.on {
  background: var(--sw-fault);
  box-shadow: 0 0 5px rgba(180,52,42,.5), inset 0 0 0 1px rgba(0,0,0,.06);
}
#view-admin .lamp-label {
  font-family: var(--sw-mono); font-size: 11.5px; color: var(--sw-ink-3);
  margin-left: 8px; white-space: nowrap;
}
#view-admin .lamp-label b { color: var(--sw-ink); font-weight: 600; }

/* Header strip: the whole platform's occupancy in one line. */
#view-admin .switchboard {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow);
  padding: 13px 16px;
  margin-bottom: 18px;
}
#view-admin .sw-metric { display: flex; flex-direction: column; gap: 3px; min-width: 84px; }
#view-admin .sw-metric-label {
  font-family: var(--sw-cond); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-3);
}
#view-admin .sw-metric-value {
  font-family: var(--sw-mono); font-size: 19px; font-weight: 500;
  letter-spacing: -.02em; color: var(--sw-ink); line-height: 1.1;
}
#view-admin .sw-metric-value.is-live  { color: var(--sw-live); }
#view-admin .sw-metric-value.is-fault { color: var(--sw-fault); }
#view-admin .sw-sep { width: 1px; align-self: stretch; background: var(--sw-rule); }
#view-admin .sw-strip { flex: 1 1 260px; min-width: 200px; }

/* ============================================================================
   8 · MODALS
   ========================================================================== */
body.sw-admin .modal, body.sw-admin .modal-lg {
  border-radius: 14px;
  border: 1px solid var(--sw-rule);
  box-shadow: 0 30px 70px -30px rgba(18,22,28,.5);
}
body.sw-admin .modal-head {
  border-bottom: 1px solid var(--sw-rule);
  background: var(--sw-panel);
}
body.sw-admin .modal-head h3 {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--sw-ink);
}
body.sw-admin .modal-actions {
  border-top: 1px solid var(--sw-rule);
  padding-top: 14px;
  gap: 8px;
}

/* ============================================================================
   9 · QUALITY FLOOR
   ========================================================================== */
#view-admin :focus-visible {
  outline: 2px solid var(--sw-lamp);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  #view-admin *, #view-admin *::before, #view-admin *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}
@media (max-width: 900px) {
  #view-admin .switchboard { gap: 12px; padding: 11px 12px; }
  #view-admin .sw-sep { display: none; }
  #view-admin .sw-strip { flex-basis: 100%; }
  #view-admin .tbl tbody td, #view-admin .tbl thead th { padding: 8px 10px; }
}

/* ============================================================================
   10 · SEGMENTED SUB-TABS  (DIDs: All / By Company)
   These were painted by inline JS, which no stylesheet can override — the switch
   now toggles a class instead. Set as a segmented control rather than underlined
   text links, because the two views are alternatives, not navigation.
   ========================================================================== */
#view-admin .did-sub-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sw-radius-sm);
  color: var(--sw-ink-3);
  cursor: pointer;
  font-family: var(--sw-cond);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 14px;
  transition: background .13s, color .13s;
}
#view-admin .did-sub-tab:hover { color: var(--sw-ink); background: var(--sw-sunk); }
#view-admin .did-sub-tab.active {
  background: var(--sw-ink);
  border-color: var(--sw-ink);
  color: #fff;
}
/* A segmented control needs a well, not the bottom-border strip that underline
   tabs used. Given a real class, this needs no !important and no :has(). */
#view-admin .sw-segmented {
  display: inline-flex; gap: 3px;
  background: var(--sw-sunk);
  border: 1px solid var(--sw-rule);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 16px;
}

/* ============================================================================
   11 · TABLE STATES
   An empty table is an instruction, not an apology; a loading table should keep
   the shape of what is coming; an error says what happened, in the panel's voice.
   ========================================================================== */
#view-admin .tbl .empty { font-family: var(--sw-sans); }
#view-admin .tbl-empty-ok {
  color: var(--sw-live) !important;
  font-family: var(--sw-cond) !important;
  letter-spacing: .04em;
}
#view-admin .tbl-error { color: var(--sw-fault) !important; }
#view-admin .tbl-loading {
  color: var(--sw-ink-3) !important;
  position: relative;
}
/* A quiet sweep, so a slow query reads as working rather than stalled. */
#view-admin .tbl-loading::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sw-lamp), transparent);
  animation: sw-sweep 1.1s ease-in-out infinite;
}
@keyframes sw-sweep {
  0%   { transform: translateX(-60%); opacity: .25; }
  50%  { opacity: .9; }
  100% { transform: translateX(60%); opacity: .25; }
}

/* ============================================================================
   12 · FAULTS  (Stuck Calls)
   The one screen where alarm is the point. Cards carry the tenant, the count and
   the breakdown; the leg type is a badge so it reads with the rest of the system.
   ========================================================================== */
#view-admin .fault-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sw-fault-bg);
  border: 1px solid rgba(180,52,42,.26);
  border-left: 3px solid var(--sw-fault);
  border-radius: var(--sw-radius-sm);
  padding: 9px 14px;
  font-size: 12.5px;
}
#view-admin .fault-count {
  font-family: var(--sw-mono); font-weight: 600; color: var(--sw-fault);
}
#view-admin .fault-kinds { color: var(--sw-ink-3); font-size: 11.5px; }
#view-admin .stuck-for { color: var(--sw-fault); font-weight: 600; }
/* Leg type: shape-coded by tint so vb / agent / inbound are separable at a glance
   without inventing three more palette colours. */
#view-admin .badge.kind-vb-call      { background: var(--sw-lamp-bg); border-color: rgba(200,129,31,.3); color: #8A5712; }
#view-admin .badge.kind-vb-call::before      { background: var(--sw-lamp); }
#view-admin .badge.kind-agent-call   { background: #EEF1F5; border-color: #D3D9E0; color: #3A4149; }
#view-admin .badge.kind-agent-call::before   { background: var(--sw-ink-2); }
#view-admin .badge.kind-inbound-call { background: var(--sw-live-bg); border-color: rgba(15,157,119,.3); color: #0B6B52; }
#view-admin .badge.kind-inbound-call::before { background: var(--sw-live); }

/* ============================================================================
   13 · ROW FOCUS
   Hovering a row lights its left edge — the same lamp language as the active nav
   item and the channel strip, so "this one" always reads the same way.
   ========================================================================== */
#view-admin .tbl tbody tr { position: relative; }
#view-admin .tbl tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .12s; }
#view-admin .tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--sw-lamp); }

/* Occupancy cell: keep the strip and its figure on one line in a dense row. */
#view-admin .lamp-cell { display: inline-flex; align-items: center; white-space: nowrap; }
#view-admin .lamp-cell .lamp { height: 13px; width: 5px; }
#view-admin .lamp-cell .lamp-label { margin-left: 7px; font-size: 11px; }

/* ============================================================================
   14 · TOASTS
   ========================================================================== */
body.sw-admin .toast, body.sw-admin #toast {
  background: var(--sw-ink);
  border: 1px solid #000;
  border-left: 3px solid var(--sw-live);
  border-radius: var(--sw-radius-sm);
  color: #fff;
  font-family: var(--sw-sans);
  font-size: 13px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.6);
}
body.sw-admin .toast.err, body.sw-admin .toast.error,
body.sw-admin #toast.err { border-left-color: var(--sw-fault); }

/* ============================================================================
   15 · READOUTS  (stat cards, live-calls floor)
   ============================================================================
   A stat card in this panel is an instrument reading, so it behaves like one: it
   does not lift on hover (nothing here is clickable, and a card that rises under
   the cursor promises a click that never comes), the number is set in tabular
   mono so a digit changing on the poll does not shift the ones beside it, and the
   label sits above the value in condensed caps the way a legend sits above a dial.
   ========================================================================== */
#view-admin .stat-card {
  background: var(--sw-panel);
  border: 1px solid var(--sw-rule);
  border-radius: 3px;
  padding: 13px 15px 14px;
  position: relative;
  transition: border-color .12s ease;
}
#view-admin .stat-card:hover { transform: none; box-shadow: none; border-color: var(--sw-rule-2); }

/* A hairline at the top edge — the card reads as a panel cut into the ground
   rather than a floating tile. */
#view-admin .stat-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--sw-rule-2);
  border-radius: 3px 3px 0 0;
}

#view-admin .stat-card .label {
  font-family: var(--sw-cond);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sw-ink-3);
}
#view-admin .stat-card .value {
  font-family: var(--sw-mono);
  font-size: 27px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--sw-ink);
  margin-top: 5px;
}
#view-admin .stat-card .sub {
  font-size: 11.5px; color: var(--sw-ink-3); margin-top: 3px;
}

/* Live calls: the count is the one number on the screen that means "right now",
   so it is the only one allowed to carry the live colour. Zero stays quiet —
   a grey nought is information too, and colouring it would cry wolf. */
#view-admin .lc-live {
  color: var(--sw-live);
  font-variant-numeric: tabular-nums;
}
#view-admin .lc-quiet {
  color: var(--sw-ink-3); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
#view-admin td.lc-occupancy { min-width: 150px; padding-top: 7px; padding-bottom: 7px; }

/* ============================================================================
   16 · NIGHT SHIFT — dark variant
   ============================================================================
   An operator watches this for a twelve-hour shift, often in a dim room, and the
   thing they must catch is a lamp changing colour. On a bright porcelain ground a
   lit teal cell competes with the page; on a dark ground it reads instantly.

   This is a TOKEN SWAP only — not a second stylesheet. Every rule above already
   draws from the same variables, so the whole panel turns over by redefining
   them, and there is exactly one place where dark can drift from light.

   The graphite is warmed slightly and never pure black: #000 against a lit cell
   haloes on an LCD, and a panel of pure black loses all sense of surface.
   ========================================================================== */
body.sw-admin.sw-dark #view-admin,
body.sw-admin.sw-dark {
  --sw-ink:        #ECEEF0;   /* text inverts; the name still means "ink" */
  --sw-ink-2:      #B4BAC2;
  --sw-ink-3:      #7F8792;
  --sw-paper:      #0E1116;   /* ground — warm graphite, not black */
  --sw-panel:      #161A21;   /* raised surface */
  --sw-sunk:       #1E242C;   /* table heads, wells */
  --sw-rule:       #262D36;
  --sw-rule-2:     #333C47;

  /* State colours lift in luminance so they still carry on a dark ground —
     the light-mode teal reads muddy here, and the oxide red disappears. */
  --sw-live:       #2ED3A3;
  --sw-live-bg:    #10312A;
  --sw-lamp:       #E8A33D;
  --sw-lamp-bg:    #33260F;
  --sw-fault:      #F1655A;
  --sw-fault-bg:   #311A1A;
  --sw-idle:       #4A5561;

  --sw-shadow:     0 1px 2px rgba(0,0,0,.5);
  --sw-shadow-lift:0 14px 34px -16px rgba(0,0,0,.8);
  color-scheme: dark;
}
/* Primary action inverts: on a dark ground a graphite button is invisible, so the
   filled state becomes the paper colour and the label goes dark. */
body.sw-dark #view-admin .btn-primary {
  background: var(--sw-ink); border-color: var(--sw-ink); color: #12161C;
}
body.sw-dark #view-admin .btn-primary:hover { background: #fff; border-color: #fff; }
body.sw-dark #view-admin .nav-tab.active,
body.sw-dark #view-admin .did-sub-tab.active { background: var(--sw-sunk); color: #fff; }
body.sw-dark #view-admin .did-sub-tab.active { border-color: var(--sw-rule-2); }
body.sw-dark #view-admin .tbl tbody tr:hover td { background: #1A1F26; }
body.sw-dark #view-admin .topbar { background: #090C10; border-bottom-color: #000; }
body.sw-dark #view-admin input, body.sw-dark #view-admin select,
body.sw-dark #view-admin textarea, body.sw-dark #view-admin .inp {
  background: #10141A; box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
body.sw-dark #view-admin input:focus, body.sw-dark #view-admin select:focus,
body.sw-dark #view-admin textarea:focus, body.sw-dark #view-admin .inp:focus {
  border-color: var(--sw-live); box-shadow: 0 0 0 3px rgba(46,211,163,.16);
}
body.sw-dark #view-admin .lamp { background: #2A323C; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
/* Lamps get a real glow in the dark — this is the one place the theme is allowed
   to be atmospheric, because a lit line genuinely does glow. */
body.sw-dark #view-admin .lamp.on { box-shadow: 0 0 7px rgba(46,211,163,.65); }
body.sw-dark #view-admin .lamps.tight .lamp.on { box-shadow: 0 0 7px rgba(232,163,61,.65); }
body.sw-dark #view-admin .lamps.full  .lamp.on { box-shadow: 0 0 8px rgba(241,101,90,.7); }
body.sw-dark.sw-admin .toast { background: #1E242C; border-color: #000; }

/* The switch itself: a two-state control, labelled, not a mystery icon. */
#view-admin .sw-theme-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--sw-radius-sm);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  font-family: var(--sw-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
}
#view-admin .sw-theme-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Readouts on the dark ground: the top hairline is the card's only edge cue once
   panel and paper are close in luminance, so it brightens rather than dims. */
body.sw-admin.sw-dark #view-admin .stat-card::before { background: var(--sw-rule-2); }
body.sw-admin.sw-dark #view-admin .stat-card { border-color: var(--sw-rule); }

/* ============================================================================
   17 · NIGHT SHIFT, PART TWO — the ground beneath the theme
   ============================================================================
   Section 16 swaps the --sw-* tokens, which is enough for the parts of the panel
   this theme draws itself. It is NOT enough for the panel as a whole: most content
   is drawn by styles.css from ITS tokens (--surface, --bg, --border …), so with
   only the --sw-* swap the header went dark and everything below it stayed white.

   So the base tokens are remapped too, in the same scope. Every rule in styles.css
   that reads a token follows along, which is the large majority of them.

   Three kinds of leftovers need explicit work, and they are handled below:
     · tokens used ONLY as var(--x, #fallback) and never defined in :root — the
       light fallback wins forever unless the name is given a value here;
     · raw literals with no token at all (`background:#fff`);
     · pastel tints (mint, straw, rose) that are legible on paper and mud on
       graphite — these are remapped to a dark tint set, not merely darkened.
   Everything is scoped to body.sw-admin.sw-dark, so nothing here can reach the
   company panel or the agent portal.
   ========================================================================== */
body.sw-admin.sw-dark {
  /* --- base surfaces, remapped onto the switchboard's own greys --- */
  --bg:            #0E1116;
  --bg-2:          #161A21;
  --bg-3:          #1E242C;
  --bg-1:          #161A21;
  --surface:       #161A21;
  --card:          #161A21;
  --ink:           #ECEEF0;
  --ink-2:         #B4BAC2;
  --ink-3:         #8B939E;
  --ink-4:         #7F8792;
  /* Borders are rgba in the base sheet so they darken whatever is under them.
     On graphite that makes them vanish, so they invert to a light film. */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --line:          #262D36;
  --muted:         #8B939E;
  --hover:         #1E242C;

  /* Accents lift so they carry on a dark ground. */
  --primary:       #4C9AF5;
  --blue:          #4C9AF5;
  --blue-h:        #63A8F7;
  --blue-d:        #3B87E0;
  --danger:        #F1655A;
  --green:         #2ED3A3;
  --orange:        #E8A33D;
  --red:           #F1655A;

  /* Names used only as var(--x, #light-fallback) and never defined in :root.
     Undefined means the fallback always wins, so dark mode cannot reach them
     unless they are given a value here. */
  --text:          #ECEEF0;
  --text2:         #8B939E;
  --ink-1:         #ECEEF0;
  --bg2:           #12161C;
  --card-bg:       #161A21;
  --surface-2:     #1E242C;
  --chip:          #232A33;
  --code-bg:       #12161C;
  --accent:        #4C9AF5;

  /* Shadows: a black shadow on a near-black ground is invisible, so depth comes
     from a deeper black plus a light top rim rather than from spread alone. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 4px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);

  /* --- the dark tint set ---
     Five semantic pairs replace roughly two hundred ad-hoc pastels. Each is a
     low-luminance ground with a lifted foreground, so a badge keeps its meaning
     and its contrast without keeping its literal colour. */
  --sw-tint-neutral:   #232A33;  --sw-tint-neutral-fg: #B4BAC2;
  --sw-tint-info:      #17263D;  --sw-tint-info-fg:    #7FB4F5;
  --sw-tint-good:      #10312A;  --sw-tint-good-fg:    #2ED3A3;
  --sw-tint-warn:      #322415;  --sw-tint-warn-fg:    #E8A33D;
  --sw-tint-bad:       #311A1A;  --sw-tint-bad-fg:     #F1655A;
  --sw-tint-special:   #241C38;  --sw-tint-special-fg: #B69BF0;
}

/* The page ground itself. body carries the flag, so it is painted directly. */
body.sw-admin.sw-dark { background: var(--sw-paper); color: var(--sw-ink); }

/* ---------------------------------------------------------------------------
   17.1 · Pastel families → the dark tint set
   Grouped by meaning, not by module: a straw background means "waiting" whether
   it is a campaign, a ticket, or a signup, and it should read the same in both
   appearances.
   ------------------------------------------------------------------------- */
body.sw-admin.sw-dark .badge.inactive,
body.sw-admin.sw-dark .badge.stopped,
body.sw-admin.sw-dark .badge.cancelled,
body.sw-admin.sw-dark .badge.invalid_number,
body.sw-admin.sw-dark .badge.congestion,
body.sw-admin.sw-dark .badge.bc-off,
body.sw-admin.sw-dark .badge-draft,
body.sw-admin.sw-dark .tk-badge.tk-closed,
body.sw-admin.sw-dark .tk-prio.tk-p-norm,
body.sw-admin.sw-dark .tk-prio.tk-p-low,
body.sw-admin.sw-dark .act-badge-out,
body.sw-admin.sw-dark .rtm-since {
  background: var(--sw-tint-neutral); color: var(--sw-tint-neutral-fg); border-color: transparent;
}

body.sw-admin.sw-dark .badge.running,
body.sw-admin.sw-dark .badge.ringing,
body.sw-admin.sw-dark .badge.initiated,
body.sw-admin.sw-dark .badge.bc-info,
body.sw-admin.sw-dark .badge.signup,
body.sw-admin.sw-dark .badge-inbound,
body.sw-admin.sw-dark .badge-both,
body.sw-admin.sw-dark .tk-badge.tk-open,
body.sw-admin.sw-dark .act-badge-clip,
body.sw-admin.sw-dark .summary-box.highlight,
body.sw-admin.sw-dark .broadcast-banner.bc-info,
body.sw-admin.sw-dark .su-note,
body.sw-admin.sw-dark .bulk-bar,
body.sw-admin.sw-dark .mk-row-sel,
body.sw-admin.sw-dark .conv-avatar,
body.sw-admin.sw-dark .conv-av-superadmin,
body.sw-admin.sw-dark .conv-av-monitor,
body.sw-admin.sw-dark .tk-card-avatar,
body.sw-admin.sw-dark .tk-card.mine {
  background: var(--sw-tint-info); color: var(--sw-tint-info-fg); border-color: transparent;
}
body.sw-admin.sw-dark .bulk-count,
body.sw-admin.sw-dark .tk-stat.s-open .tk-stat-n { color: var(--sw-tint-info-fg); }

body.sw-admin.sw-dark .badge.credit,
body.sw-admin.sw-dark .live-tag,
body.sw-admin.sw-dark .act-badge-live,
body.sw-admin.sw-dark .broadcast-banner.bc-success,
body.sw-admin.sw-dark .mk-wallet,
body.sw-admin.sw-dark .cstt-live-ok {
  background: var(--sw-tint-good); color: var(--sw-tint-good-fg); border-color: transparent;
}
body.sw-admin.sw-dark .act-ok,
body.sw-admin.sw-dark .su-rec,
body.sw-admin.sw-dark .fld-ok,
body.sw-admin.sw-dark .text-green { color: var(--sw-tint-good-fg); }

body.sw-admin.sw-dark .badge.pending,
body.sw-admin.sw-dark .badge.paused,
body.sw-admin.sw-dark .badge.busy,
body.sw-admin.sw-dark .badge.no_answer,
body.sw-admin.sw-dark .badge.bc-warning,
body.sw-admin.sw-dark .badge-paused,
body.sw-admin.sw-dark .tk-badge.tk-prog,
body.sw-admin.sw-dark .tk-reopen-tag,
body.sw-admin.sw-dark .act-badge-imp,
body.sw-admin.sw-dark .impersonate-banner,
body.sw-admin.sw-dark .broadcast-banner.bc-warning,
body.sw-admin.sw-dark .admin-role,
body.sw-admin.sw-dark .role-tag.admin,
body.sw-admin.sw-dark .btn-sm.warn,
body.sw-admin.sw-dark .mk-trunc,
body.sw-admin.sw-dark .stt-try-note,
body.sw-admin.sw-dark .cstt-live-warn,
body.sw-admin.sw-dark .placeholders-hint {
  background: var(--sw-tint-warn); color: var(--sw-tint-warn-fg); border-color: transparent;
}

body.sw-admin.sw-dark .badge.debit,
body.sw-admin.sw-dark .badge.unreachable,
body.sw-admin.sw-dark .badge.bc-critical,
body.sw-admin.sw-dark .tk-prio.tk-p-high,
body.sw-admin.sw-dark .la-inactive,
body.sw-admin.sw-dark .broadcast-banner.bc-critical,
body.sw-admin.sw-dark .credits-widget.credits-low,
body.sw-admin.sw-dark .form-banner {
  background: var(--sw-tint-bad); color: var(--sw-tint-bad-fg); border-color: transparent;
}

body.sw-admin.sw-dark .badge.machine,
body.sw-admin.sw-dark .badge.bc-maint,
body.sw-admin.sw-dark .badge.bc-by-super,
body.sw-admin.sw-dark .act-badge-sa,
body.sw-admin.sw-dark .tk-card-role,
body.sw-admin.sw-dark .broadcast-banner.bc-maint {
  background: var(--sw-tint-special); color: var(--sw-tint-special-fg); border-color: transparent;
}

/* Solid dots and counters keep their alarm colour — these are meant to shout. */
body.sw-admin.sw-dark .conv-unread,
body.sw-admin.sw-dark .tk-dot { background: var(--sw-fault); color: #0E1116; }

/* ---------------------------------------------------------------------------
   17.2 · Onboarding — the panel the user caught
   The cards and the 21-module picker are drawn from --card and --border, so the
   remap above already turns them over. What is left is the well behind the module
   list and the hover state, both of which were tuned for paper.
   ------------------------------------------------------------------------- */
body.sw-admin.sw-dark .onb-card,
body.sw-admin.sw-dark .su-modules { background: var(--sw-panel); border-color: var(--sw-rule); }
body.sw-admin.sw-dark .su-modules-head { background: var(--sw-sunk); border-color: var(--sw-rule); }
body.sw-admin.sw-dark .su-group { border-bottom-color: var(--sw-rule); }
body.sw-admin.sw-dark .su-group-name { color: var(--sw-ink-3); }
body.sw-admin.sw-dark .su-mod:hover { background: var(--sw-sunk); }
body.sw-admin.sw-dark .su-mod-desc,
body.sw-admin.sw-dark .su-modules .hint { color: var(--sw-ink-3); }
body.sw-admin.sw-dark .su-count { background: var(--sw-live); color: #08130F; }

/* The switch: the knob stays light — it is a physical part, and a dark knob on a
   dark track reads as "missing" rather than "off". Only the track changes. */
body.sw-admin.sw-dark .wh-switch input + .wh-slider { background: var(--sw-rule-2); }
body.sw-admin.sw-dark .wh-switch input:checked + .wh-slider { background: var(--sw-live); }
body.sw-admin.sw-dark .wh-slider::before { background: #F7F8F8; }

/* ---------------------------------------------------------------------------
   17.3 · Conversation — the other panel the user caught
   A chat is the one place where the two sides must stay visually opposed. Keeping
   "mine" tinted and "theirs" plain preserves that, but both grounds have to come
   from the dark set or the thread turns into two white slabs.
   ------------------------------------------------------------------------- */
body.sw-admin.sw-dark .conv-msgs { background: var(--sw-paper); }
body.sw-admin.sw-dark .conv-msg.theirs .conv-bubble {
  background: var(--sw-panel); color: var(--sw-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.sw-admin.sw-dark .conv-msg.mine .conv-bubble {
  background: #16342B; color: #DCF5EC;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.sw-admin.sw-dark .conv-meta { color: var(--sw-ink-3); }
body.sw-admin.sw-dark .conv-ticks { color: var(--sw-ink-3); }
body.sw-admin.sw-dark .conv-ticks.seen { color: var(--sw-live); }
body.sw-admin.sw-dark .conv-input { background: var(--sw-panel); border-top-color: var(--sw-rule); }
body.sw-admin.sw-dark .conv-input input,
body.sw-admin.sw-dark .conv-search {
  background: var(--sw-sunk); border-color: var(--sw-rule-2); color: var(--sw-ink);
}
body.sw-admin.sw-dark .conv-input input:focus {
  border-color: var(--sw-live); box-shadow: 0 0 0 3px rgba(46,211,163,.16);
}
body.sw-admin.sw-dark .conv-thread-prev { color: var(--sw-ink-3); }
body.sw-admin.sw-dark .conv-emoji-panel,
body.sw-admin.sw-dark .conv-target { background: var(--sw-panel); border-color: var(--sw-rule); }
body.sw-admin.sw-dark .conv-del { color: var(--sw-fault); }

/* ---------------------------------------------------------------------------
   17.4 · Controls whose light values were literals
   ------------------------------------------------------------------------- */
body.sw-admin.sw-dark .btn-secondary:hover:not(:disabled),
body.sw-admin.sw-dark .btn-sm:hover { background: var(--sw-sunk); }
body.sw-admin.sw-dark .btn-danger { background: var(--sw-fault); color: #140908; }
body.sw-admin.sw-dark .btn-danger:hover:not(:disabled) { background: #F47A70; }
body.sw-admin.sw-dark .btn-sm.info { background: var(--sw-tint-info); color: var(--sw-tint-info-fg); }
body.sw-admin.sw-dark .btn-sm.primary { color: #08130F; }

/* Active pills across the panel's several tab families. */
body.sw-admin.sw-dark .subtab.active,
body.sw-admin.sw-dark .subtab-l2 .subtab.active,
body.sw-admin.sw-dark .ob-tab.active,
body.sw-admin.sw-dark .act-range.active,
body.sw-admin.sw-dark .mk-vbtn.active,
body.sw-admin.sw-dark .apidoc-nav-btn.active { color: #08130F; }

body.sw-admin.sw-dark .pagination .page-num:hover:not(:disabled) { background: var(--sw-sunk); }
body.sw-admin.sw-dark .pagination .page-num.active,
body.sw-admin.sw-dark .tbl-pager .page-num.active { color: #08130F; }
body.sw-admin.sw-dark .chip.off { border-color: var(--sw-fault); color: var(--sw-fault); }
body.sw-admin.sw-dark .chip { background: var(--sw-sunk); border-color: var(--sw-rule-2); }

/* Avatar, user menu, nav badge, info bubble. */
body.sw-admin.sw-dark .ud-item.ud-danger:hover { background: var(--sw-tint-bad); color: var(--sw-tint-bad-fg); }
body.sw-admin.sw-dark .nav-badge { background: var(--sw-fault); color: #140908; }
body.sw-admin.sw-dark .info-btn { background: var(--sw-rule-2); color: var(--sw-ink); }
body.sw-admin.sw-dark .col-i { background: var(--sw-rule-2); color: var(--sw-ink); }

/* Code and preformatted blocks read as sunken wells rather than lit slabs. */
body.sw-admin.sw-dark .api-code,
body.sw-admin.sw-dark .ctc-pre,
body.sw-admin.sw-dark .api-try-inner .try-curl {
  background: #0A0D11; color: #C9D1D9; border-color: var(--sw-rule);
}

/* Inline tinted boxes emitted by shared renderers (style="background:#fef3c7"
   and friends). Inline beats any normal rule, so these are matched by attribute
   and overridden with !important — the one legitimate use of it — and grouped by
   meaning onto the same tint pairs the badges use. */
body.sw-admin.sw-dark [style*="background:#fef3c7"],
body.sw-admin.sw-dark [style*="background:#fefce8"],
body.sw-admin.sw-dark [style*="background:#fffbeb"],
body.sw-admin.sw-dark [style*="background:#fff8e6"],
body.sw-admin.sw-dark [style*="background:#fff7ed"],
body.sw-admin.sw-dark [style*="background:#fef9c3"] {
  background: var(--sw-tint-warn) !important; color: var(--sw-tint-warn-fg) !important; border-color: #4A3A1A !important;
}
body.sw-admin.sw-dark [style*="background:#f0fdf4"],
body.sw-admin.sw-dark [style*="background:#f0fbf3"],
body.sw-admin.sw-dark [style*="background:#ecfdf5"] {
  background: var(--sw-tint-good) !important; color: var(--sw-tint-good-fg) !important; border-color: #1D4A3D !important;
}
body.sw-admin.sw-dark [style*="background:#fee2e2"],
body.sw-admin.sw-dark [style*="background:#fef2f2"] {
  background: var(--sw-tint-bad) !important; color: var(--sw-tint-bad-fg) !important; border-color: #4A2320 !important;
}
body.sw-admin.sw-dark [style*="background:#f5f3ff"],
body.sw-admin.sw-dark [style*="background:#fdf4ff"] {
  background: var(--sw-tint-special) !important; color: var(--sw-tint-special-fg) !important; border-color: #37305A !important;
}
body.sw-admin.sw-dark [style*="background:#f1f5f9"],
body.sw-admin.sw-dark [style*="background:#f8fafc"] {
  background: var(--sw-tint-neutral) !important; color: var(--sw-tint-neutral-fg) !important; border-color: var(--sw-rule-2) !important;
}
body.sw-admin.sw-dark [style*="background:#fff;"],
body.sw-admin.sw-dark [style*="background:#fff\""] {
  background: var(--sw-panel) !important; color: var(--sw-ink) !important;
}
body.sw-admin.sw-dark [style*="color:#111"] { color: var(--sw-ink) !important; }

/* Inline text-only colours on themed surfaces — see the pastel block above. */
body.sw-admin.sw-dark [style*="color:#0a7c2f"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#10b981"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#166534"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#16a34a"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#22c55e"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#34c759"]:not([style*="background"]) { color: var(--sw-tint-good-fg) !important; }
body.sw-admin.sw-dark [style*="color:#0070f3"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#007aff"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#0369a1"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#0ea5e9"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#1d4ed8"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#2563eb"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#6366f1"]:not([style*="background"]) { color: var(--sw-tint-info-fg) !important; }
body.sw-admin.sw-dark [style*="color:#4c1d95"]:not([style*="background"]) { color: var(--sw-tint-special-fg) !important; }
body.sw-admin.sw-dark [style*="color:#374151"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#54656f"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#64748b"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#667781"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#6e6e73"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#111b21"]:not([style*="background"]) { color: var(--sw-ink-3) !important; }

/* Completion of the sweep — the same five leftovers the full-code audit found,
   in the admin scope. See the company theme for the inventory. */
body.sw-admin.sw-dark {
  --card2:        #1E242C;
  --border-light: #333C47;
}

body.sw-admin.sw-dark [style*="background:#eff6ff"],
body.sw-admin.sw-dark [style*="background:#e0f2fe"],
body.sw-admin.sw-dark [style*="background:#e0e7ff"],
body.sw-admin.sw-dark [style*="background:#dbeafe"] { background: var(--sw-tint-info) !important; color: var(--sw-tint-info-fg) !important; border-color: #1E3A5F !important; }
body.sw-admin.sw-dark [style*="background:#dcfce7"],
body.sw-admin.sw-dark [style*="background:#d1fae5"] { background: var(--sw-tint-good) !important; color: var(--sw-tint-good-fg) !important; border-color: #1D4A3D !important; }
body.sw-admin.sw-dark [style*="background:#ede9fe"] { background: var(--sw-tint-special) !important; color: var(--sw-tint-special-fg) !important; border-color: #37305A !important; }
body.sw-admin.sw-dark [style*="background:#fff1f2"] { background: var(--sw-tint-bad) !important; color: var(--sw-tint-bad-fg) !important; border-color: #4A2320 !important; }
body.sw-admin.sw-dark [style*="background:#e2e8f0"] { background: var(--sw-tint-neutral) !important; color: var(--sw-tint-neutral-fg) !important; border-color: inherit !important; }
body.sw-admin.sw-dark [style*="color:#dc2626"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#ef4444"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#e3342f"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#b91c1c"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#e53e3e"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#7f1d1d"]:not([style*="background"]) { color: var(--sw-tint-bad-fg) !important; }
body.sw-admin.sw-dark [style*="color:#7c3aed"]:not([style*="background"]),
body.sw-admin.sw-dark [style*="color:#af52de"]:not([style*="background"]) { color: var(--sw-tint-special-fg) !important; }
body.sw-admin.sw-dark [style*="color:#92400e"]:not([style*="background"]) { color: var(--sw-tint-warn-fg) !important; }

body.sw-admin.sw-dark .badge-active,
body.sw-admin.sw-dark .badge-completed,
body.sw-admin.sw-dark .company-role,
body.sw-admin.sw-dark .chip-list .chip.phone {
  background: var(--sw-tint-good); color: var(--sw-tint-good-fg); border-color: transparent;
}
body.sw-admin.sw-dark .low-credit-tag {
  background: var(--sw-tint-bad); color: var(--sw-tint-bad-fg); border-color: transparent;
}
body.sw-admin.sw-dark input.input-bad { background: var(--sw-tint-bad); }
body.sw-admin.sw-dark .dup-session-box { background: var(--sw-panel); }