/* ============================================================================
   COMPANY CONSOLE — "Control Tower"
   ============================================================================
   The client's own view of their calling operation, and the screen a prospect
   sees first in a demo. It is deliberately NOT the super-admin theme: that one
   is the machine room — porcelain, graphite, instrument lamps, everything
   optimised for an operator staring at it for twelve hours. This is the bridge.
   A business owner opens it a few times a day to answer three questions: is my
   calling working right now, what did it cost, and what do I do next.

   So the frame is dark and the content is bright. A deep ink-teal chrome holds
   the topbar and the navigation rail; everything inside it is warm ivory and
   white with generous air. That contrast is what makes the panel read as a
   product rather than a form, and it is what survives a projector in a meeting
   room, where a pale-on-pale interface turns to mush.

   Type does the rest of the work. Instrument Serif appears in exactly two
   places — section titles and the one hero number — so the panel has a voice
   without becoming a magazine. Instrument Sans carries the interface. JetBrains
   Mono carries every figure in a table, because a column of numbers that does
   not align is a column you cannot scan.

   SCOPE — every selector in this file begins with `#view-company` or
   `body.sw-company`. The body flag is set in showView() and exists for the
   things that render outside the view element: modals, toasts, dropdowns. The
   super-admin panel and the agent portal cannot see any of this, and nothing
   here changes behaviour — no layout mechanic, no toggle, no handler.

   CONTENTS
     1  Tokens
     2  Chrome — topbar
     3  Chrome — navigation rail
     4  Section heads
     5  Overview — service cards and readouts
     6  Tables
     7  Status pills
     8  Controls
     9  Forms
    10  Modals
    11  Table states
    12  Toasts
    13  Traffic band (signature)
    14  Quality floor
   ========================================================================== */


/* ============================================================================
   1 · TOKENS
   ============================================================================
   One place. Every rule below reads from here, which is what makes the dark
   variant a swap rather than a second stylesheet.
   ========================================================================== */
#view-company,
body.sw-company {
  /* Chrome — topbar, navigation rail and the traffic band.
     In day these are light: white surfaces on the warm ivory ground, which is
     what separates the rail and the band from the content without a dark band
     cutting across the screen. In night the same tokens go to graphite. Every
     chrome surface below reads from a token rather than a literal, which is what
     lets one appearance become the other. */
  --co-chrome:      #FFFFFF;  /* topbar and rail ground */
  --co-chrome-2:    #F1F0EB;  /* raised chrome: hover, active rail item */
  --co-chrome-fg:   #10221F;  /* chrome text */
  --co-chrome-fg2:  #646F6D;  /* chrome secondary text — AA on white and on the wells */
  --co-chrome-rule: #E4E3DC;  /* chrome edges and internal dividers */
  --co-chrome-well: #F4F3EE;  /* inset pills: live count, wallet, buttons */
  --co-chrome-edge: #DFDED6;  /* those pills' borders */
  --co-chrome-top:  transparent;  /* inner top highlight — night only */
  --co-scroll:      #CFCEC5;  /* rail scrollbar */
  --co-bar-track:   #EAE9E3;  /* unlit histogram bar */

  /* Content */
  --co-paper:  #F6F5F1;      /* ground — warm ivory, never blue-white */
  --co-panel:  #FFFFFF;
  --co-sunk:   #F1F0EB;      /* table heads, wells, disabled */
  --co-ink:    #10221F;
  --co-ink-2:  #414F4C;
  --co-ink-3:  #646F6D;   /* AA on every light ground here: 4.56–5.20:1 */
  --co-rule:   #E4E3DC;
  --co-rule-2: #CFCEC5;

  /* Signals. Three, and no more — a console that speaks in six colours is a
     console where none of them mean anything. */
  --co-jade:      #0E8A6A;   /* live, connected, good — fills and edges */
  --co-jade-ink:  #0C7E61;   /* the same signal as TEXT on a light ground: 4.53–5.03:1 */
  --co-jade-bg:   #E4F2EE;
  --co-marigold:  #C07C18;   /* waiting, attention, paused */
  --co-marigold-bg:#FBF0DC;
  --co-clay:      #B0392C;   /* failed, over limit, destructive */
  --co-clay-bg:   #FAEAE7;
  --co-quiet:     #9AA5A2;   /* nothing happening — information too */

  /* Type */
  --co-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --co-sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --co-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Depth. Shallow and tight — a business console should feel like paper on a
     desk, not cards floating in space. */
  --co-lift:   0 1px 2px rgba(16, 34, 31, .05);
  --co-lift-2: 0 4px 14px rgba(16, 34, 31, .08), 0 1px 3px rgba(16, 34, 31, .06);
  --co-lift-3: 0 18px 44px rgba(16, 34, 31, .16), 0 4px 12px rgba(16, 34, 31, .10);
}

#view-company {
  font-family: var(--co-sans);
  color: var(--co-ink);
  background: var(--co-paper);
  /* The view must own the whole viewport: on a short page whatever is behind it
     shows below the content, and that ground does not follow this theme. */
  min-height: 100dvh;
}
body.sw-company { background: var(--co-paper); }
/* The base sheet paints html as well as body, and html is body's PARENT — a
   token redefined on body never reaches it. On pages shorter than the screen
   that canvas is what shows below the content, so it is themed directly.
   Literal values, not var(): html cannot read tokens defined on its child. */
html:has(body.sw-company) { background: #F6F5F1; }
html:has(body.sw-company.co-dark) { background: #0B1412; }


/* ============================================================================
   2 · CHROME — TOPBAR
   ============================================================================
   Dark, thin, and quiet. It carries identity on the left and state on the
   right, and it is the only band on the screen allowed to be dark, so the eye
   reads it as the edge of the application rather than as content.
   ========================================================================== */
#view-company .topbar {
  background: var(--co-chrome);
  border-bottom: 1px solid var(--co-chrome-rule);
  box-shadow: 0 1px 0 var(--co-chrome-top) inset;
}
#view-company .topbar .brand {
  font-family: var(--co-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--co-chrome-fg);
}
#view-company .company-logo-img { filter: none; }

/* Live calls: the one number in the chrome that changes on its own, so it gets
   the jade and a lamp. At zero it stays grey — colouring a nought would cry
   wolf, and an operator learns to ignore a light that is always on. */
#view-company .live-calls-widget {
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  border-radius: 999px;
  color: var(--co-chrome-fg2);
  font-family: var(--co-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
#view-company .live-calls-widget.calls-active {
  background: var(--co-jade-bg);
  border-color: #BFE0D6;
  color: #0A6851;
}
#view-company .live-dot { background: var(--co-quiet); box-shadow: none; }
#view-company .live-dot.active {
  background: #2ED3A3;
  box-shadow: 0 0 0 3px rgba(46,211,163,.20);
}
#view-company .lc-bd { color: var(--co-chrome-fg2); font-size: 11px; }

#view-company .credits-widget {
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  border-radius: 999px;
  color: var(--co-chrome-fg);
  font-family: var(--co-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#view-company .credits-widget .credits-icon { color: var(--co-chrome-fg2); }
#view-company .credits-widget.credits-low {
  background: var(--co-clay-bg);
  border-color: #EDC9C3;
  color: #8C2C21;
}

#view-company .nav-layout-btn,
#view-company .co-theme-btn {
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  border-radius: 7px;
  color: var(--co-chrome-fg2);
  font-family: var(--co-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#view-company .nav-layout-btn:hover,
#view-company .co-theme-btn:hover {
  background: var(--co-chrome-2);
  color: var(--co-chrome-fg);
  border-color: var(--co-rule-2);
}

#view-company .user-avatar-btn {
  background: var(--co-jade);
  color: #FFFFFF;
  font-family: var(--co-sans);
  font-weight: 700;
  border: 1px solid transparent;
}
#view-company .user-avatar-btn:hover { background: #12A07C; }

body.sw-company .user-dropdown {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 10px;
  box-shadow: var(--co-lift-3);
}
body.sw-company .ud-header { border-bottom: 1px solid var(--co-rule); }
body.sw-company .ud-name { font-weight: 600; color: var(--co-ink); }
body.sw-company .ud-meta { color: var(--co-ink-3); font-size: 12px; }
body.sw-company .ud-item { font-family: var(--co-sans); color: var(--co-ink-2); }
body.sw-company .ud-item:hover { background: var(--co-sunk); color: var(--co-ink); }
body.sw-company .ud-item.ud-danger { color: var(--co-clay); }
body.sw-company .ud-item.ud-danger:hover { background: var(--co-clay-bg); }


/* ============================================================================
   3 · CHROME — NAVIGATION RAIL
   ============================================================================
   Thirty-four destinations in nine groups. The rail's whole job is to make that
   survivable, so the group headers do the structural work: they are the only
   uppercase text in the panel, they sit tight against their children, and the
   gap between groups is larger than the gap within one. Nothing else is
   decorated. The active item is marked by a jade edge and a raised ground —
   not by a colour change on the label, which is easy to miss at a glance.

   Both layouts are supported, because the toggle that switches them is existing
   behaviour and must keep working exactly as it does.
   ========================================================================== */
#view-company .nav-tabs {
  background: var(--co-chrome);
  border-bottom: 1px solid var(--co-chrome-rule);
  scrollbar-color: var(--co-scroll) transparent;
}
#view-company .nav-tabs::-webkit-scrollbar-thumb { background: var(--co-scroll); }

body.sw-company.layout-sidebar #view-company .nav-tabs {
  border-right: 1px solid var(--co-chrome-rule);
  border-bottom: none;
  padding: 10px 8px 18px;
}

#view-company .nav-tab {
  font-family: var(--co-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--co-chrome-fg2);
  border-radius: 7px;
  position: relative;
  transition: background .12s ease, color .12s ease;
}
#view-company .nav-tab:hover {
  background: var(--co-chrome-2);
  color: var(--co-chrome-fg);
}
#view-company .nav-tab.active {
  background: var(--co-chrome-2);
  color: var(--co-chrome-fg);
  font-weight: 600;
}
/* The jade edge. In the rail it runs down the left; in top-nav it runs along
   the bottom, because that is where a tab's underline belongs. */
#view-company .nav-tab.active::after {
  content: '';
  position: absolute;
  background: var(--co-jade);
  border-radius: 2px;
}
body.sw-company.layout-sidebar #view-company .nav-tab.active::after {
  left: 0; top: 6px; bottom: 6px; width: 2.5px;
}
body.sw-company:not(.layout-sidebar) #view-company .nav-tab.active::after {
  left: 8px; right: 8px; bottom: -5px; height: 2.5px;
}

#view-company .nav-separator,
#view-company .nav-group-hdr {
  font-family: var(--co-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
  border: none;
  cursor: pointer;
}
#view-company .nav-group-hdr:hover { color: var(--co-chrome-fg2); }
body.sw-company.layout-sidebar #view-company .nav-separator {
  padding: 16px 10px 5px;
}
#view-company .grp-caret { opacity: .55; font-size: 9px; }

#view-company .nav-collapse-btn {
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  color: var(--co-chrome-fg2);
  border-radius: 6px;
}
#view-company .nav-collapse-btn:hover { background: var(--co-chrome-2); color: var(--co-chrome-fg); }

/* Unread counts on Conversation / Tickets. */
#view-company .nav-badge {
  background: var(--co-clay);
  color: #FFFFFF;
  font-family: var(--co-mono);
  font-size: 10px;
  font-weight: 600;
}


/* ============================================================================
   4 · SECTION HEADS
   ============================================================================
   Serif title, hairline beneath, actions on the right. The rule is what makes a
   dense screen legible: it says "this heading owns everything below me until the
   next one", which is exactly what a panel of stacked sections needs.
   ========================================================================== */
#view-company .panel-head {
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--co-rule);
  margin-bottom: 18px;
}
#view-company .panel-head h2 {
  font-family: var(--co-display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .002em;
  line-height: 1.15;
  color: var(--co-ink);
}
#view-company .panel-head h3 {
  font-family: var(--co-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--co-ink);
}
/* An eyebrow above the title, when the markup offers one. It names the area the
   section belongs to, so a client who has never seen the product can place the
   screen without reading the body. */
#view-company .panel-head h2[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  font-family: var(--co-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--co-jade-ink);
  margin-bottom: 5px;
}
#view-company .tab-panel > .muted,
#view-company .tab-panel > p.muted { color: var(--co-ink-3); font-size: 13px; line-height: 1.55; }


/* ============================================================================
   5 · OVERVIEW — SERVICE CARDS AND READOUTS
   ============================================================================
   This is the screen the demo opens on, so it is the one place where hierarchy
   matters more than density. The service cards are the doors into the product
   and are treated as such: full width, one line each, a jade rule down the left
   edge, and a hover that moves the arrow rather than the card.

   The readouts below them are inventory — how many numbers, how much wallet.
   They are deliberately smaller and quieter than the service cards, because a
   count of announcements is not as important as "your call centre is running",
   and a grid of nine equally-loud numbers tells the reader nothing about what
   to look at first.
   ========================================================================== */
#view-company .svc-card {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-left: 3px solid var(--co-jade);
  border-radius: 3px 9px 9px 3px;
  padding: 15px 18px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--co-lift);
  transition: box-shadow .16s ease, border-color .16s ease;
}
#view-company .svc-card:hover { box-shadow: var(--co-lift-2); }
#view-company .svc-title {
  font-family: var(--co-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--co-ink);
  line-height: 1.2;
}
#view-company .svc-stats {
  font-size: 12.5px;
  color: var(--co-ink-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
#view-company .svc-body { flex: 1; min-width: 0; }
#view-company .svc-icon { display: none; }  /* the jade edge already marks it */

/* The arrow moves, not the card — motion that points somewhere reads as an
   affordance; motion that lifts a whole panel reads as decoration. */
#view-company .svc-card .btn { transition: transform .16s ease, background .12s ease; }
#view-company .svc-card:hover .btn { transform: translateX(3px); }

#view-company .stat-grid { gap: 10px; }
#view-company .stat-card {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 8px;
  padding: 13px 15px 14px;
  box-shadow: none;
  transition: border-color .14s ease;
}
#view-company .stat-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--co-rule-2);
}
#view-company .stat-card .label {
  font-family: var(--co-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
#view-company .stat-card .value {
  font-family: var(--co-mono);
  font-size: 25px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--co-ink);
  margin-top: 4px;
  line-height: 1.1;
}
#view-company .stat-card .sub { font-size: 11.5px; color: var(--co-ink-3); margin-top: 2px; }


/* ============================================================================
   6 · TABLES
   ============================================================================
   Most of this panel is tables, so they get the most attention. Three rules do
   almost all of the work: the head is a quiet sunken band with condensed caps
   labels; every figure is mono with tabular numerals so digits line up down the
   column; and rows are separated by a hairline rather than by stripes, because
   zebra striping on a fourteen-column table is noise, not structure.
   ========================================================================== */
#view-company .table-wrap {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 9px;
  overflow: auto;
  box-shadow: var(--co-lift);
}
#view-company .tbl { border-collapse: separate; border-spacing: 0; width: 100%; }
#view-company .tbl thead th {
  background: var(--co-sunk);
  border-bottom: 1px solid var(--co-rule-2);
  padding: 9px 13px;
  font-family: var(--co-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--co-ink-3);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
#view-company .tbl tbody td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--co-rule);
  font-size: 13px;
  color: var(--co-ink-2);
  vertical-align: middle;
}
#view-company .tbl tbody tr:last-child td { border-bottom: none; }
#view-company .tbl tbody tr { transition: background .1s ease; }
#view-company .tbl tbody tr:hover td { background: #FBFBF8; }
#view-company .tbl tbody td strong { color: var(--co-ink); font-weight: 600; }

/* Figures. Applied by attribute as well as by class so numeric cells that were
   never given a class still align. */
#view-company .tbl td.num,
#view-company .tbl td .num,
#view-company .tbl td code,
#view-company .tbl td .mono {
  font-family: var(--co-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  letter-spacing: -.01em;
}
#view-company .tbl td code {
  background: var(--co-sunk);
  border: 1px solid var(--co-rule);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Progress on a campaign row: a filled bar is the right instrument here — the
   question is "how far through", which is genuinely a proportion. */
#view-company .progress-bar-wrap {
  background: var(--co-sunk);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  border: none;
}
#view-company .progress-bar { background: var(--co-jade); border-radius: 999px; }
#view-company .progress-bar.warn { background: var(--co-marigold); }
#view-company .progress-bar.danger { background: var(--co-clay); }


/* ============================================================================
   7 · STATUS PILLS
   ============================================================================
   A campaign, a call and a ticket all have states, and across the panel they
   collapse into four meanings: running, waiting, finished, failed. Giving each
   meaning one appearance — everywhere — is what lets a client learn the
   interface once instead of per screen.
   ========================================================================== */
#view-company .badge {
  font-family: var(--co-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2.5px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  text-transform: capitalize;
  white-space: nowrap;
}
#view-company .badge.running,
#view-company .badge.active,
#view-company .badge.answered,
#view-company .badge.completed,
#view-company .badge.credit,
#view-company .badge.connected {
  background: var(--co-jade-bg); color: #0A6851; border-color: #BFE0D6;
}
#view-company .badge.pending,
#view-company .badge.paused,
#view-company .badge.scheduled,
#view-company .badge.queued,
#view-company .badge.ringing,
#view-company .badge.initiated,
#view-company .badge.no_answer,
#view-company .badge.busy {
  background: var(--co-marigold-bg); color: #8A5810; border-color: #EBD6AC;
}
#view-company .badge.failed,
#view-company .badge.unreachable,
#view-company .badge.congestion,
#view-company .badge.debit,
#view-company .badge.invalid_number {
  background: var(--co-clay-bg); color: #8C2C21; border-color: #EDC9C3;
}
#view-company .badge.inactive,
#view-company .badge.draft,
#view-company .badge.stopped,
#view-company .badge.cancelled,
#view-company .badge.finished,
#view-company .badge.machine {
  background: var(--co-sunk); color: var(--co-ink-3); border-color: var(--co-rule-2);
}

/* Live tag — the only pill that pulses, because it is the only one that means
   "this is happening as you read it". */
#view-company .live-tag {
  background: var(--co-jade-bg);
  color: #0A6851;
  border: 1px solid #BFE0D6;
  font-family: var(--co-sans);
  font-size: 11px;
  font-weight: 600;
}


/* ============================================================================
   8 · CONTROLS
   ============================================================================
   One primary action per screen, in ink. Everything else is quiet. A panel with
   six blue buttons has no primary action, which is the state most dashboards
   are in and the reason nobody knows what to click.
   ========================================================================== */
#view-company .btn {
  font-family: var(--co-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .005em;
  border-radius: 7px;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
#view-company .btn:active:not(:disabled) { transform: translateY(1px); }

#view-company .btn-primary {
  background: var(--co-ink);
  color: #F7FBFA;
  border: 1px solid var(--co-ink);
  box-shadow: var(--co-lift);
}
#view-company .btn-primary:hover:not(:disabled) { background: #1B3733; border-color: #1B3733; }

#view-company .btn-secondary {
  background: var(--co-panel);
  color: var(--co-ink-2);
  border: 1px solid var(--co-rule-2);
}
#view-company .btn-secondary:hover:not(:disabled) { background: var(--co-sunk); color: var(--co-ink); }

#view-company .btn-ghost {
  background: transparent;
  color: var(--co-ink-3);
  border: 1px solid transparent;
}
#view-company .btn-ghost:hover:not(:disabled) {
  background: var(--co-sunk);
  color: var(--co-ink);
  border-color: var(--co-rule);
}

#view-company .btn-danger {
  background: var(--co-clay);
  color: #FFF4F2;
  border: 1px solid var(--co-clay);
}
#view-company .btn-danger:hover:not(:disabled) { background: #C24234; border-color: #C24234; }

#view-company .btn-sm { font-size: 12px; padding: 5px 10px; border-radius: 6px; }
#view-company .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Sub-tabs inside a panel (reports, profile, STT providers). A segmented strip
   rather than a row of underlines: it reads as one control with several
   positions, which is what it is. */
#view-company .subtab {
  font-family: var(--co-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-ink-3);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background .12s ease, color .12s ease;
}
#view-company .subtab:hover { background: var(--co-sunk); color: var(--co-ink); }
#view-company .subtab.active { background: var(--co-ink); color: #F7FBFA; }

#view-company .chip {
  font-family: var(--co-sans);
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--co-rule-2);
  background: var(--co-panel);
  color: var(--co-ink-2);
}
#view-company .chip.on { background: var(--co-jade-bg); border-color: #BFE0D6; color: #0A6851; }
#view-company .chip.off { background: var(--co-clay-bg); border-color: #EDC9C3; color: #8C2C21; }


/* ============================================================================
   9 · FORMS
   ============================================================================
   Inputs sit slightly sunken and rise to white on focus, with a jade ring. The
   movement is small but it answers the only question a form field ever raises:
   am I typing in this one.
   ========================================================================== */
#view-company .field label,
body.sw-company .modal .field label {
  font-family: var(--co-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--co-ink-2);
  letter-spacing: .01em;
}
#view-company input[type="text"],
#view-company input[type="number"],
#view-company input[type="email"],
#view-company input[type="password"],
#view-company input[type="search"],
#view-company input[type="tel"],
#view-company input[type="date"],
#view-company input[type="datetime-local"],
#view-company select,
#view-company textarea,
#view-company .inp {
  font-family: var(--co-sans);
  font-size: 13px;
  color: var(--co-ink);
  background: var(--co-sunk);
  border: 1px solid var(--co-rule-2);
  border-radius: 7px;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#view-company input:focus,
#view-company select:focus,
#view-company textarea:focus,
#view-company .inp:focus {
  background: var(--co-panel);
  border-color: var(--co-jade);
  box-shadow: 0 0 0 3px rgba(14,138,106,.14);
  outline: none;
}
#view-company input::placeholder,
#view-company textarea::placeholder { color: #A3ADAA; }
#view-company .hint,
#view-company .field .hint { font-size: 11.5px; color: var(--co-ink-3); line-height: 1.45; }


/* ============================================================================
   10 · MODALS
   ============================================================================
   Rendered outside the view, so scoped on the body flag. A darker, warmer
   backdrop than the default: the dialog needs to be the only lit thing on the
   screen, and a thin grey veil leaves the page competing with it.
   ========================================================================== */
/* The overlay is .modal-backdrop; the dialog itself is .modal (or .modal-lg).
   Getting that pair the wrong way round tints the dialog instead of the page,
   which is why they are named explicitly here rather than guessed at. */
body.sw-company .modal-backdrop { background: rgba(11, 26, 24, .52); backdrop-filter: blur(2px); }
body.sw-company .modal,
body.sw-company .modal-lg {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 12px;
  box-shadow: var(--co-lift-3);
}
body.sw-company .modal-head {
  border-bottom: 1px solid var(--co-rule);
}
body.sw-company .modal-head h3 {
  font-family: var(--co-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--co-ink);
}
body.sw-company .modal-x {
  color: var(--co-ink-3);
  border-radius: 6px;
  background: transparent;
  border: none;
}
body.sw-company .modal-x:hover { background: var(--co-sunk); color: var(--co-ink); }
/* Footer action row, generated in app.js rather than declared in the markup. */
body.sw-company .modal-actions { border-top: 1px solid var(--co-rule); }

/* The in-app confirm / prompt dialogs replace window.confirm and window.prompt,
   so they are part of the panel's voice and get the same treatment. */
body.sw-company .ui-dialog-ov { background: rgba(11, 26, 24, .52); backdrop-filter: blur(2px); }
body.sw-company .ui-dialog {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 12px;
  box-shadow: var(--co-lift-3);
}
body.sw-company .ui-dialog-title {
  font-family: var(--co-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--co-ink);
}
body.sw-company .ui-dialog-msg { color: var(--co-ink-2); font-size: 13.5px; line-height: 1.5; }


/* ============================================================================
   11 · TABLE STATES
   ============================================================================
   Empty, loading and failed are three different things and a client can tell
   them apart at a glance only if they look different. An empty table is an
   invitation; a failed one says what to do next.
   ========================================================================== */
#view-company .tbl .empty,
#view-company .tbl td.empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--co-ink-3);
  font-size: 13px;
}
#view-company .tbl td.co-loading {
  position: relative;
  overflow: hidden;
  /* The text stays for screen readers; sighted users get the skeleton. */
  font-size: 0;
  color: transparent;
  padding: 22px 18px;
}
/* Three ghost rows of unequal width — the shape of data arriving, which reads
   as "working" faster than any word does. */
#view-company .tbl td.co-loading::before {
  content: '';
  display: block;
  height: 58px;
  max-width: 520px;
  margin: 0 auto;
  background:
    linear-gradient(var(--co-sunk), var(--co-sunk)) 0 0    / 62% 12px no-repeat,
    linear-gradient(var(--co-sunk), var(--co-sunk)) 0 23px / 88% 12px no-repeat,
    linear-gradient(var(--co-sunk), var(--co-sunk)) 0 46px / 44% 12px no-repeat;
  animation: co-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes co-pulse { from { opacity: .5; } to { opacity: 1; } }
/* A jade sweep, once every second and a half — enough to say "working", not
   enough to pull the eye off the content. */
#view-company .tbl td.co-loading::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--co-jade), transparent);
  animation: co-sweep 1.5s ease-in-out infinite;
}
@keyframes co-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
#view-company .tbl td.co-error { color: var(--co-clay); }


/* ============================================================================
   12 · TOASTS
   ============================================================================
   Bottom-right, ink, with a signal edge — in BOTH appearances, which is the one
   deliberate exception to the day/night swap. A toast is a momentary overlay
   rather than part of the frame, and an ink slab is how it separates itself from
   whatever it appears on top of. It reads from --co-ink rather than the chrome
   tokens precisely so it does not follow them to white.
   ========================================================================== */
body.sw-company #toast,
body.sw-company .toast {
  background: var(--co-ink);
  color: #F2F6F5;
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid var(--co-jade);
  border-radius: 9px;
  font-family: var(--co-sans);
  font-size: 13px;
  box-shadow: var(--co-lift-3);
}
body.sw-company #toast.err,
body.sw-company .toast.err { border-left-color: var(--co-clay); }


/* ============================================================================
   13 · TRAFFIC BAND — the signature
   ============================================================================
   The one element this panel is remembered by, and the answer to "is my calling
   working right now".

   Every other reading on the overview is a stock: how many numbers, how much
   wallet. Those are true but static, and a static dashboard is indistinguishable
   from a screenshot. Calling is a flow, so the band shows the flow: the live
   count as one large serif figure, and beside it the last thirty samples of that
   count as a row of thin bars. The bars are built from the poll the panel
   already runs every ten seconds — no new request, no new endpoint — so the
   history fills in as you watch, and a demo that has been open two minutes is
   visibly alive.

   Bar height is proportional to the licensed channel limit, so the band answers
   the second question too: not just "are calls happening" but "how much of what
   I pay for am I using".
   ========================================================================== */
#view-company .co-band {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--co-chrome);
  border: 1px solid var(--co-chrome-rule);
  border-radius: 11px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--co-lift-2);
}

/* The hero figure. The only place in the panel where a number is set in the
   display face, which is what makes it read as the headline. */
#view-company .co-band-live {
  flex: none;
  padding: 15px 20px 13px;
  border-right: 1px solid var(--co-chrome-rule);
  background: var(--co-chrome-well);
  min-width: 132px;
}
#view-company .co-band-label {
  font-family: var(--co-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--co-chrome-fg2);
}
#view-company .co-band-n {
  font-family: var(--co-display);
  font-size: 42px;
  line-height: 1;
  color: var(--co-chrome-fg);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#view-company .co-band-n.quiet { color: var(--co-quiet); }
#view-company .co-band-cap {
  font-family: var(--co-mono);
  font-size: 12px;
  color: var(--co-chrome-fg2);
  letter-spacing: -.02em;
}
#view-company .co-band-split {
  font-family: var(--co-mono);
  font-size: 11px;
  color: var(--co-chrome-fg2);
  margin-top: 5px;
  letter-spacing: -.01em;
}

/* The histogram. Bars, not a line: each bar is one real sample, and a smoothed
   curve would imply readings between them that were never taken. */
#view-company .co-band-graph {
  flex: 1;
  min-width: 0;
  padding: 15px 20px 13px;
  display: flex;
  flex-direction: column;
}
#view-company .co-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 38px;
  margin-top: 7px;
}
#view-company .co-bar {
  flex: 1;
  min-width: 2px;
  max-width: 9px;
  background: var(--co-bar-track);
  border-radius: 1.5px;
  transition: height .45s cubic-bezier(.4,0,.2,1), background .3s ease;
}
#view-company .co-bar.on   { background: var(--co-jade); }
#view-company .co-bar.tight{ background: var(--co-marigold); }
#view-company .co-bar.full { background: var(--co-clay); }
/* The newest sample sits at the right and is the brightest — the eye should
   land on "now" first, then read backwards for the trend. */
#view-company .co-bar.now.on    { background: #0A6851; }
#view-company .co-bar.now.tight { background: #8A5810; }
#view-company .co-bar.now.full  { background: #8C2C21; }

#view-company .co-band-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 7px;
  font-family: var(--co-mono);
  font-size: 10.5px;
  color: var(--co-ink-3);
  letter-spacing: -.01em;
}

/* Wallet sits at the far end, because "what is this costing" is the third
   question and belongs beside the first two rather than three screens away. */
#view-company .co-band-wallet {
  flex: none;
  padding: 15px 20px 13px;
  border-left: 1px solid var(--co-chrome-rule);
  background: var(--co-chrome-well);
  min-width: 118px;
  text-align: right;
}
#view-company .co-band-wallet .v {
  font-family: var(--co-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--co-chrome-fg);
  white-space: nowrap;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
#view-company .co-band-wallet .v.low { color: var(--co-clay); }

@media (max-width: 860px) {
  #view-company .co-band { flex-wrap: wrap; }
  #view-company .co-band-graph { order: 3; flex-basis: 100%; border-top: 1px solid var(--co-chrome-rule); }
  #view-company .co-band-wallet { border-left: none; text-align: left; }
}


/* ============================================================================
   14 · QUALITY FLOOR
   ============================================================================
   Not features — the things whose absence people notice. Keyboard focus that is
   actually visible, motion that can be switched off, and a panel that does not
   fall apart on a laptop screen in a meeting room.
   ========================================================================== */
#view-company :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--co-jade);
  outline-offset: 2px;
  border-radius: 4px;
}
#view-company .topbar :is(button, a):focus-visible,
#view-company .nav-tabs :is(button, a, span[data-group]):focus-visible {
  outline: 2px solid #2ED3A3;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  #view-company *,
  body.sw-company .modal,
  body.sw-company #toast {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #view-company .co-bar { transition: none; }
}

@media (max-width: 720px) {
  #view-company .panel-head h2 { font-size: 22px; }
  #view-company .co-band-n { font-size: 34px; }
  #view-company .svc-card { flex-wrap: wrap; }
}

/* Tables must scroll inside their own frame — the page body never scrolls
   sideways, however many columns a report has. */
#view-company .table-wrap { max-width: 100%; }

/* ============================================================================
   15 · NIGHT — dark variant
   ============================================================================
   A token swap, exactly like the day theme's tokens: every rule above already
   reads from a variable, so redefining them turns the whole panel over and there
   is only one place where dark can drift from light.

   Two things are remapped, and the second is the one that matters. The --co-*
   tokens are this file's own, and swapping them handles everything this theme
   draws. But most of the panel's content is drawn by styles.css from ITS tokens
   — --surface, --bg, --border and friends — so those are remapped here too.
   Without that the chrome goes dark and the content below it stays white, which
   is exactly the half-finished result that swapping only the local tokens gives.

   The frame inverts its relationship to the content: in day the chrome is the
   only dark band, at night it is the darkest band. The hierarchy survives
   because the gap in luminance is preserved, not because either value is.
   ========================================================================== */
body.sw-company.co-dark #view-company,
body.sw-company.co-dark {
  /* Chrome goes to graphite. These are the same tokens the day theme sets to
     white — the topbar, the rail and the traffic band all read from them, so the
     whole frame turns over here rather than in a dozen separate rules. */
  --co-chrome:      #05100F;
  --co-chrome-2:    #162925;
  --co-chrome-fg:   #E8EDEB;
  --co-chrome-fg2:  #8CA29D;
  --co-chrome-rule: #1B2C29;
  --co-chrome-well: #0C1917;
  --co-chrome-edge: #1F312E;
  --co-chrome-top:  rgba(255,255,255,.04);   /* inner rim, so the frame has an edge */
  --co-scroll:      rgba(255,255,255,.16);
  --co-bar-track:   rgba(255,255,255,.10);

  --co-paper:  #0B1412;
  --co-panel:  #121D1B;
  --co-sunk:   #182524;
  --co-ink:    #E9EEEC;
  --co-ink-2:  #B2BFBC;
  --co-ink-3:  #8B9995;
  --co-rule:   #1F2E2B;
  --co-rule-2: #2C3F3B;

  /* Signals lift in luminance. The day jade reads as moss on this ground and the
     clay disappears into it, so both are brightened rather than merely reused. */
  --co-jade:       #2ED3A3;
  --co-jade-ink:   #45E0B4;   /* eyebrow text on graphite */
  --co-jade-bg:    #0F3129;
  --co-marigold:   #E8A33D;
  --co-marigold-bg:#33260F;
  --co-clay:       #F1655A;
  --co-clay-bg:    #331A18;
  --co-quiet:      #6B7A76;

  --co-lift:   0 1px 2px rgba(0,0,0,.5);
  --co-lift-2: 0 4px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --co-lift-3: 0 18px 44px rgba(0,0,0,.62), 0 4px 12px rgba(0,0,0,.45);

  /* --- base tokens from styles.css, remapped so all shared content follows --- */
  --bg:            #0B1412;
  --bg-2:          #121D1B;
  --bg-3:          #182524;
  --bg-1:          #121D1B;
  --surface:       #121D1B;
  --card:          #121D1B;
  --ink:           #E9EEEC;
  --ink-2:         #B2BFBC;
  --ink-3:         #85938F;
  --ink-4:         #7E948F;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --line:          #1F2E2B;
  --muted:         #85938F;
  --hover:         #182524;
  --primary:       #2ED3A3;
  --blue:          #4C9AF5;
  --blue-h:        #63A8F7;
  --blue-d:        #3B87E0;
  --danger:        #F1655A;
  --green:         #2ED3A3;
  --orange:        #E8A33D;
  --red:           #F1655A;

  /* Names that styles.css only ever reads as var(--x, #light) and never defines,
     so the light fallback wins until they are given a value here. */
  --text:          #E9EEEC;
  --text2:         #85938F;
  --ink-1:         #E9EEEC;
  --bg2:           #0B1412;
  --card-bg:       #121D1B;
  --surface-2:     #182524;
  --chip:          #1C2B29;
  --code-bg:       #08110F;
  --accent:        #2ED3A3;

  --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 standing in for the pastels that
     styles.css hardcodes as raw literals no token can reach. */
  --co-tint-neutral:   #1E2C2A;  --co-tint-neutral-fg: #B2BFBC;
  --co-tint-info:      #15293D;  --co-tint-info-fg:    #7FB4F5;
  --co-tint-good:      #0F3129;  --co-tint-good-fg:    #2ED3A3;
  --co-tint-warn:      #33260F;  --co-tint-warn-fg:    #E8A33D;
  --co-tint-bad:       #331A18;  --co-tint-bad-fg:     #F1655A;
  --co-tint-special:   #241C38;  --co-tint-special-fg: #B69BF0;
}

body.sw-company.co-dark { background: var(--co-paper); color: var(--co-ink); }

/* Surfaces the theme draws itself. */
body.sw-company.co-dark #view-company .tbl tbody tr:hover td { background: #17251F; }
body.sw-company.co-dark #view-company .svc-card { background: var(--co-panel); }
body.sw-company.co-dark #view-company input::placeholder,
body.sw-company.co-dark #view-company textarea::placeholder { color: #63726E; }
body.sw-company.co-dark #view-company input:focus,
body.sw-company.co-dark #view-company select:focus,
body.sw-company.co-dark #view-company textarea:focus,
body.sw-company.co-dark #view-company .inp:focus {
  box-shadow: 0 0 0 3px rgba(46,211,163,.16);
}

/* The primary action inverts: ink-on-paper becomes paper-on-ink's opposite, or
   the button disappears into the panel it sits on. */
body.sw-company.co-dark #view-company .btn-primary {
  background: var(--co-jade); color: #05231B; border-color: var(--co-jade);
}
body.sw-company.co-dark #view-company .btn-primary:hover:not(:disabled) {
  background: #45E0B4; border-color: #45E0B4;
}
body.sw-company.co-dark #view-company .subtab.active { background: var(--co-jade); color: #05231B; }
body.sw-company.co-dark #view-company .btn-danger { background: var(--co-clay); color: #1A0907; }

/* Status pills: the day borders were tuned against white and read as outlines
   on graphite, so the tint carries the meaning on its own. */
body.sw-company.co-dark #view-company .badge.running,
body.sw-company.co-dark #view-company .badge.active,
body.sw-company.co-dark #view-company .badge.answered,
body.sw-company.co-dark #view-company .badge.completed,
body.sw-company.co-dark #view-company .badge.credit,
body.sw-company.co-dark #view-company .badge.connected,
body.sw-company.co-dark #view-company .live-tag {
  background: var(--co-tint-good); color: var(--co-tint-good-fg); border-color: transparent;
}
body.sw-company.co-dark #view-company .badge.pending,
body.sw-company.co-dark #view-company .badge.paused,
body.sw-company.co-dark #view-company .badge.scheduled,
body.sw-company.co-dark #view-company .badge.queued,
body.sw-company.co-dark #view-company .badge.ringing,
body.sw-company.co-dark #view-company .badge.initiated,
body.sw-company.co-dark #view-company .badge.no_answer,
body.sw-company.co-dark #view-company .badge.busy {
  background: var(--co-tint-warn); color: var(--co-tint-warn-fg); border-color: transparent;
}
body.sw-company.co-dark #view-company .badge.failed,
body.sw-company.co-dark #view-company .badge.unreachable,
body.sw-company.co-dark #view-company .badge.congestion,
body.sw-company.co-dark #view-company .badge.debit,
body.sw-company.co-dark #view-company .badge.invalid_number {
  background: var(--co-tint-bad); color: var(--co-tint-bad-fg); border-color: transparent;
}
body.sw-company.co-dark #view-company .badge.inactive,
body.sw-company.co-dark #view-company .badge.draft,
body.sw-company.co-dark #view-company .badge.stopped,
body.sw-company.co-dark #view-company .badge.cancelled,
body.sw-company.co-dark #view-company .badge.finished,
body.sw-company.co-dark #view-company .badge.machine {
  background: var(--co-tint-neutral); color: var(--co-tint-neutral-fg); border-color: transparent;
}

/* Shared components styles.css paints with raw literals — grouped by meaning,
   not by module, so a straw ground still means "waiting" wherever it appears. */
body.sw-company.co-dark .badge.bc-warning,
body.sw-company.co-dark .badge-paused,
body.sw-company.co-dark .tk-badge.tk-prog,
body.sw-company.co-dark .tk-reopen-tag,
body.sw-company.co-dark .impersonate-banner,
body.sw-company.co-dark .impersonation-banner,
body.sw-company.co-dark .broadcast-banner.bc-warning,
body.sw-company.co-dark .btn-sm.warn,
body.sw-company.co-dark .rtm-mon-badge,
body.sw-company.co-dark .rtm-cs-wrap,
body.sw-company.co-dark .rtm-q-queued,
body.sw-company.co-dark .rtm-sip-conn,
body.sw-company.co-dark .placeholders-hint,
body.sw-company.co-dark .mk-trunc,
body.sw-company.co-dark .stt-try-note,
body.sw-company.co-dark .cstt-live-warn,
body.sw-company.co-dark .wa-cbadge {
  background: var(--co-tint-warn); color: var(--co-tint-warn-fg); border-color: transparent;
}
body.sw-company.co-dark .badge.bc-info,
body.sw-company.co-dark .badge-inbound,
body.sw-company.co-dark .badge-both,
body.sw-company.co-dark .tk-badge.tk-open,
body.sw-company.co-dark .broadcast-banner.bc-info,
body.sw-company.co-dark .summary-box.highlight,
body.sw-company.co-dark .bulk-bar,
body.sw-company.co-dark .mk-row-sel,
body.sw-company.co-dark .conv-avatar,
body.sw-company.co-dark .conv-av-superadmin,
body.sw-company.co-dark .conv-av-monitor,
body.sw-company.co-dark .tk-card-avatar,
body.sw-company.co-dark .tk-card.mine,
body.sw-company.co-dark .rtm-action-spy:hover,
body.sw-company.co-dark .rtm-mode-btn.rtm-mode-sel,
body.sw-company.co-dark .sh-opt:has(input:checked),
body.sw-company.co-dark .sh-chip input:checked + span {
  background: var(--co-tint-info); color: var(--co-tint-info-fg); border-color: transparent;
}
body.sw-company.co-dark .badge.credit,
body.sw-company.co-dark .live-tag,
body.sw-company.co-dark .broadcast-banner.bc-success,
body.sw-company.co-dark .mk-wallet,
body.sw-company.co-dark .cstt-live-ok,
body.sw-company.co-dark .live-camp-card.live-camp-active,
body.sw-company.co-dark .rtm-action-mic {
  background: var(--co-tint-good); color: var(--co-tint-good-fg); border-color: transparent;
}
body.sw-company.co-dark .badge.debit,
body.sw-company.co-dark .badge.bc-critical,
body.sw-company.co-dark .tk-prio.tk-p-high,
body.sw-company.co-dark .broadcast-banner.bc-critical,
body.sw-company.co-dark .credits-widget.credits-low,
body.sw-company.co-dark .rtm-action-barge:hover,
body.sw-company.co-dark .rtm-sip-err,
body.sw-company.co-dark .wh-shift-del:hover,
body.sw-company.co-dark .dp-dnc,
body.sw-company.co-dark .form-banner {
  background: var(--co-tint-bad); color: var(--co-tint-bad-fg); border-color: transparent;
}
body.sw-company.co-dark .badge.bc-maint,
body.sw-company.co-dark .badge.machine,
body.sw-company.co-dark .tk-card-role,
body.sw-company.co-dark .broadcast-banner.bc-maint,
body.sw-company.co-dark .rtm-action-whisper:hover,
body.sw-company.co-dark .wh-night-badge,
body.sw-company.co-dark .wh-mode-badge.wh-badge-multi,
body.sw-company.co-dark .vbr-resend-tag {
  background: var(--co-tint-special); color: var(--co-tint-special-fg); border-color: transparent;
}
body.sw-company.co-dark .badge.inactive,
body.sw-company.co-dark .badge-draft,
body.sw-company.co-dark .tk-badge.tk-closed,
body.sw-company.co-dark .tk-prio.tk-p-norm,
body.sw-company.co-dark .tk-prio.tk-p-low,
body.sw-company.co-dark .dp-badge,
body.sw-company.co-dark .dp-nd,
body.sw-company.co-dark .rtm-since,
body.sw-company.co-dark .rtm-sip-off,
body.sw-company.co-dark .ivr-node-summary code,
body.sw-company.co-dark .ivr-branch-label.dim,
body.sw-company.co-dark .rtm-action-ctrl:hover {
  background: var(--co-tint-neutral); color: var(--co-tint-neutral-fg); border-color: transparent;
}
body.sw-company.co-dark .conv-unread,
body.sw-company.co-dark .tk-dot,
body.sw-company.co-dark .nav-badge,
body.sw-company.co-dark .mic-rx-dot { background: var(--co-clay); color: #1A0907; }

/* Chat: the two sides must stay visually opposed, so both grounds come from the
   dark set rather than one of them staying white. */
body.sw-company.co-dark .conv-msgs { background: var(--co-paper); }
body.sw-company.co-dark .conv-msg.theirs .conv-bubble {
  background: var(--co-panel); color: var(--co-ink); box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.sw-company.co-dark .conv-msg.mine .conv-bubble {
  background: #14352C; color: #DCF5EC; box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.sw-company.co-dark .conv-meta,
body.sw-company.co-dark .conv-ticks { color: var(--co-ink-3); }
body.sw-company.co-dark .conv-ticks.seen { color: var(--co-jade); }
body.sw-company.co-dark .conv-input { background: var(--co-panel); border-top-color: var(--co-rule); }
body.sw-company.co-dark .conv-input input,
body.sw-company.co-dark .conv-search { background: var(--co-sunk); border-color: var(--co-rule-2); color: var(--co-ink); }
body.sw-company.co-dark .conv-emoji-panel,
body.sw-company.co-dark .conv-target { background: var(--co-panel); border-color: var(--co-rule); }
body.sw-company.co-dark .conv-del { color: var(--co-clay); }

/* WhatsApp keeps its own brand grounds — clients recognise it by them — but they
   are darkened so the module does not glow white inside a dark console. */
body.sw-company.co-dark .wa-chats-wrap,
body.sw-company.co-dark .wa-side,
body.sw-company.co-dark .wa-list { background: var(--co-panel); }
body.sw-company.co-dark .wa-side-hd,
body.sw-company.co-dark .wa-main-hd,
body.sw-company.co-dark .wa-compose,
body.sw-company.co-dark .wa-reply-bar { background: var(--co-sunk); }
body.sw-company.co-dark .wa-main,
body.sw-company.co-dark .wa-msgs { background: #0E1A17; background-color: #0E1A17; }
body.sw-company.co-dark .wa-bubble.in { background: var(--co-panel); color: var(--co-ink); }
body.sw-company.co-dark .wa-bubble { color: var(--co-ink); }
body.sw-company.co-dark .wa-li-name,
body.sw-company.co-dark .wa-hd-name,
body.sw-company.co-dark .wa-tpl-t { color: var(--co-ink); }
body.sw-company.co-dark .wa-li { border-bottom-color: var(--co-rule); }
body.sw-company.co-dark .wa-li:hover { background: var(--co-sunk); }
body.sw-company.co-dark .wa-li.active { background: #17251F; }
body.sw-company.co-dark .wa-side-hd .inp,
body.sw-company.co-dark .wa-compose .wa-inp,
body.sw-company.co-dark .wa-pg-btn,
body.sw-company.co-dark .wa-pg-size select { background: var(--co-sunk); color: var(--co-ink); }
body.sw-company.co-dark .wa-react { background: var(--co-panel); }
body.sw-company.co-dark .wa-tpl-item:hover { background: var(--co-sunk); }

/* The IVR builder and dial-plan canvases are white boards by design; on a dark
   console they become dark boards, with the node cards as the lit elements. */
body.sw-company.co-dark .ivr-iconbtn,
body.sw-company.co-dark .ivr-branch-close,
body.sw-company.co-dark .ivr-picker,
body.sw-company.co-dark .ivr-edit-grid input,
body.sw-company.co-dark .ivr-dest-head .ivr-dest-kind select { background: var(--co-sunk); color: var(--co-ink); }
body.sw-company.co-dark .ivr-dest-card { background: var(--co-panel); }
body.sw-company.co-dark .ivr-iconbtn.danger:hover { background: var(--co-tint-bad); }

/* Code, curl samples and pre blocks read as sunken wells. */
body.sw-company.co-dark .api-code,
body.sw-company.co-dark .ctc-pre,
body.sw-company.co-dark .api-try-inner .try-curl { background: #08110F; color: #C7D6D2; border-color: var(--co-rule); }
body.sw-company.co-dark .api-method-blue   { background: var(--co-tint-info);    color: var(--co-tint-info-fg); }
body.sw-company.co-dark .api-method-green  { background: var(--co-tint-good);    color: var(--co-tint-good-fg); }
body.sw-company.co-dark .api-method-orange { background: var(--co-tint-warn);    color: var(--co-tint-warn-fg); }
body.sw-company.co-dark .api-method-red    { background: var(--co-tint-bad);     color: var(--co-tint-bad-fg); }

/* Controls whose light values were literals with no token to reach. */
body.sw-company.co-dark .btn-secondary:hover:not(:disabled),
body.sw-company.co-dark .btn-sm:hover,
body.sw-company.co-dark .pagination .page-num:hover:not(:disabled),
body.sw-company.co-dark .wa-pg-btn:hover:not(:disabled) { background: var(--co-sunk); }
body.sw-company.co-dark .pagination .page-num.active,
body.sw-company.co-dark .tbl-pager .page-num.active,
body.sw-company.co-dark .vbr-subtab.active,
body.sw-company.co-dark .vbr-chip.active,
body.sw-company.co-dark .ctc-code-tab.active,
body.sw-company.co-dark .wh-mode-btn.active,
body.sw-company.co-dark .apidoc-nav-btn.active,
body.sw-company.co-dark .mk-vbtn.active,
body.sw-company.co-dark .wa-pg-num.active { color: #05231B; }
body.sw-company.co-dark .info-btn,
body.sw-company.co-dark .col-i { background: var(--co-rule-2); color: var(--co-ink); }
body.sw-company.co-dark .wh-switch input + .wh-slider { background: var(--co-rule-2); }
body.sw-company.co-dark .wh-switch input:checked + .wh-slider { background: var(--co-jade); }
body.sw-company.co-dark .wh-slider::before { background: #F5F8F7; }
body.sw-company.co-dark .ud-item.ud-danger:hover { background: var(--co-tint-bad); color: var(--co-tint-bad-fg); }

/* --- chrome details that only make sense on graphite --- */
/* The lit pills glow rather than tint: on a dark ground a pale tint reads as a
   smudge, where a saturated fill with a lifted text colour reads as lit. */
body.sw-company.co-dark #view-company .live-calls-widget.calls-active {
  background: rgba(46,211,163,.16); border-color: rgba(46,211,163,.42); color: #7FE3C4;
}
body.sw-company.co-dark #view-company .credits-widget.credits-low {
  background: rgba(241,101,90,.18); border-color: rgba(241,101,90,.45); color: #F5A79C;
}
body.sw-company.co-dark #view-company .user-avatar-btn { color: #05231B; }
body.sw-company.co-dark #view-company .nav-badge { color: #1A0907; }
body.sw-company.co-dark #view-company .nav-tab.active { color: #FFFFFF; }
body.sw-company.co-dark #view-company .nav-separator,
body.sw-company.co-dark #view-company .nav-group-hdr { color: #5F7570; }

/* The newest histogram sample: a halo is grime on white but the right cue on
   graphite, so it comes back here. */
body.sw-company.co-dark #view-company .co-bar.now.on    { background: #2ED3A3; box-shadow: 0 0 6px rgba(46,211,163,.4); }
body.sw-company.co-dark #view-company .co-bar.now.tight { background: #E8A33D; box-shadow: 0 0 6px rgba(232,163,61,.4); }
body.sw-company.co-dark #view-company .co-bar.now.full  { background: #F1655A; box-shadow: 0 0 6px rgba(241,101,90,.4); }
body.sw-company.co-dark #view-company .co-band-foot { color: #5F7570; }

/* ============================================================================
   16 · COMMAND PALETTE AND RAIL FILTER
   ============================================================================
   Thirty-four destinations in the rail, and about thirty more inside hubs. No
   amount of styling makes a list that long navigable, so the fix is a way to
   not read it: Ctrl-K for the keyboard, a filter box for the mouse.

   The palette is styled as a single sheet of paper lifted off the page — one
   input, one list, one row of key hints — because the moment it opens it owns
   the whole screen and anything decorative competes with the thing being typed.
   The selected row is marked with a jade edge and a ground, never with a colour
   change on the label: at four rows a second the eye tracks position, not hue.
   ========================================================================== */
body.sw-company .cmdk-ov {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(16, 34, 31, .42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
body.sw-company .cmdk {
  width: 100%;
  max-width: 560px;
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 13px;
  box-shadow: var(--co-lift-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  animation: cmdk-in .13s cubic-bezier(.2,.7,.3,1);
}
@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

body.sw-company .cmdk-inp-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--co-rule);
  flex: none;
}
body.sw-company .cmdk-mag { color: var(--co-ink-3); font-size: 17px; line-height: 1; }
body.sw-company .cmdk-inp {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--co-sans);
  font-size: 15.5px;
  color: var(--co-ink);
  padding: 15px 0;
}
body.sw-company .cmdk-inp::placeholder { color: var(--co-ink-3); }

body.sw-company .cmdk-list { overflow-y: auto; padding: 6px; flex: 1; }
body.sw-company .cmdk-hdr {
  font-family: var(--co-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
  padding: 10px 10px 5px;
}
body.sw-company .cmdk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  min-height: 34px;
}
body.sw-company .cmdk-row.sel { background: var(--co-sunk); }
body.sw-company .cmdk-row.sel::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--co-jade);
}
/* The glyph distinguishes going somewhere from starting something — the two
   kinds of thing in the list, and the one distinction worth a mark. */
body.sw-company .cmdk-kind {
  flex: none;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: var(--co-sunk);
  color: var(--co-ink-3);
  border: 1px solid var(--co-rule);
}
body.sw-company .cmdk-row.sel .cmdk-kind { background: var(--co-panel); }
body.sw-company .cmdk-kind.do { background: var(--co-jade-bg); color: var(--co-jade-ink); border-color: #BFE0D6; }
body.sw-company .cmdk-label {
  font-family: var(--co-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--co-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Where it lives, pushed to the right so labels stay left-aligned and scannable. */
body.sw-company .cmdk-path {
  margin-left: auto;
  font-family: var(--co-mono);
  font-size: 10.5px;
  color: var(--co-ink-3);
  white-space: nowrap;
  flex: none;
  padding-left: 12px;
}
body.sw-company .cmdk-none {
  padding: 26px 14px;
  text-align: center;
  color: var(--co-ink-3);
  font-size: 13px;
  line-height: 1.5;
}
body.sw-company .cmdk-foot {
  flex: none;
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--co-rule);
  background: var(--co-sunk);
  font-family: var(--co-sans);
  font-size: 11px;
  color: var(--co-ink-3);
}
body.sw-company .cmdk-foot kbd {
  font-family: var(--co-mono);
  font-size: 10px;
  background: var(--co-panel);
  border: 1px solid var(--co-rule-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  color: var(--co-ink-2);
}

/* --- rail filter --- */
#view-company .nav-find {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 8px;
  flex: none;
}
#view-company .nav-find-inp {
  flex: 1;
  min-width: 0;
  font-family: var(--co-sans);
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  color: var(--co-chrome-fg);
}
#view-company .nav-find-inp:focus {
  background: var(--co-chrome);
  border-color: var(--co-jade);
  box-shadow: 0 0 0 3px rgba(14,138,106,.14);
  outline: none;
}
#view-company .nav-find-inp::placeholder { color: var(--co-chrome-fg2); }
/* The shortcut is advertised, not hidden — a keyboard affordance nobody knows
   about is not an affordance. It is also a button, because on a touch device
   there is no Ctrl to hold. */
#view-company .nav-find-k {
  flex: none;
  font-family: var(--co-mono);
  font-size: 10px;
  padding: 5px 6px;
  border-radius: 5px;
  background: var(--co-chrome-well);
  border: 1px solid var(--co-chrome-edge);
  color: var(--co-chrome-fg2);
  cursor: pointer;
}
#view-company .nav-find-k:hover { background: var(--co-chrome-2); color: var(--co-chrome-fg); }

/* Filtered-out items. The !important is answering an !important: the base sheet
   hides collapsed-group members that way, and a match inside a collapsed group
   must still be able to show itself — otherwise filtering silently misses half
   the rail. */
#view-company .nav-tab.nf-hidden,
#view-company .nav-group-hdr.nf-hidden { display: none !important; }
#view-company .nav-tabs.filtering .nav-tab.grp-hidden:not(.nf-hidden) { display: flex !important; }

/* In top-nav layout the rail is a horizontal strip, so the filter would eat the
   width the tabs need. The palette covers that case. */
body.sw-company:not(.layout-sidebar) #view-company .nav-find { display: none; }

/* --- night --- */
body.sw-company.co-dark .cmdk-ov { background: rgba(0, 0, 0, .58); }
body.sw-company.co-dark .cmdk-kind.do { border-color: transparent; }
body.sw-company.co-dark .cmdk-foot kbd { background: var(--co-sunk); }
body.sw-company.co-dark #view-company .nav-find-inp:focus { box-shadow: 0 0 0 3px rgba(46,211,163,.16); }

@media (prefers-reduced-motion: reduce) {
  body.sw-company .cmdk { animation: none; }
}

/* ============================================================================
   17 · NEEDS ATTENTION
   ============================================================================
   The list sits directly under the traffic band, which puts the two halves of
   "how is my calling doing" together: the band is what is happening, this is what
   needs a person. Rows are wide and quiet with the action on the right, because
   the action is the point — a warning with no control beside it is just bad news.

   Colour is carried by a dot and a left edge, not by a tinted row. A screen of
   tinted rows reads as an error page even when the top item is minor, and it
   makes the one genuinely broken thing harder to find, not easier.
   ========================================================================== */
#view-company .att-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
#view-company .att-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-left: 3px solid var(--co-rule-2);
  border-radius: 3px 8px 8px 3px;
  padding: 11px 14px;
  box-shadow: var(--co-lift);
}
#view-company .att-row.att-stop { border-left-color: var(--co-clay); }
#view-company .att-row.att-warn { border-left-color: var(--co-marigold); }

#view-company .att-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--co-rule-2);
}
#view-company .att-stop .att-dot { background: var(--co-clay); }
#view-company .att-warn .att-dot { background: var(--co-marigold); }

#view-company .att-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#view-company .att-t {
  font-family: var(--co-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--co-ink);
}
#view-company .att-d {
  font-size: 12px;
  color: var(--co-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-company .att-btn {
  flex: none;
  background: var(--co-panel);
  color: var(--co-ink);
  border: 1px solid var(--co-rule-2);
}
#view-company .att-btn:hover { background: var(--co-sunk); }

/* The all-clear. One line, jade, no card — it should register and then get out
   of the way, which is the opposite of how a warning should behave. */
#view-company .att-clear {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--co-jade-bg);
  border: 1px solid #BFE0D6;
  border-radius: 8px;
}
#view-company .att-tick {
  flex: none;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--co-jade);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
}
#view-company .att-clear-t {
  font-family: var(--co-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--co-jade-ink);
}
#view-company .att-clear-s {
  font-family: var(--co-mono);
  font-size: 11.5px;
  color: var(--co-jade-ink);
  opacity: .8;
  margin-left: auto;
}

body.sw-company.co-dark #view-company .att-clear { border-color: transparent; }
body.sw-company.co-dark #view-company .att-tick { color: #05231B; }
body.sw-company.co-dark #view-company .att-btn { background: var(--co-sunk); }

@media (max-width: 640px) {
  #view-company .att-row { flex-wrap: wrap; }
  #view-company .att-d { white-space: normal; }
  #view-company .att-clear-s { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================================
   18 · INVITATIONS AND ARRIVAL
   ============================================================================
   A fresh account is all empty tables, which makes the empty state the most
   seen screen in any demo. It carries the create button itself — the same
   control the toolbar shows, so permissions come along for free.
   ========================================================================== */
#view-company .tbl td.co-invite {
  padding: 44px 18px 40px;
}
#view-company .co-invite-glyph {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--co-sunk);
  border: 1px solid var(--co-rule);
  font-size: 20px;
}
#view-company .co-invite-t {
  display: block;
  font-family: var(--co-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--co-ink);
}
#view-company .co-invite-h {
  display: block;
  font-size: 12.5px;
  color: var(--co-ink-3);
  margin-top: 4px;
  line-height: 1.5;
}
#view-company .co-invite .btn { margin-top: 14px; }

/* Panels arrive instead of snapping: 180ms, 4px of rise, once per switch.
   Enough that the interface feels alive; little enough that nobody waits. */
#view-company .tab-panel:not(.hidden) {
  animation: co-panel-in .18s ease-out;
}
@keyframes co-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

body.sw-company.co-dark #view-company .co-invite-glyph { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  #view-company .tab-panel:not(.hidden) { animation: none; }
  #view-company .tbl td.co-loading::before { animation: none; opacity: .8; }
}

/* Live-campaign cards (top of the Campaigns screen while anything is running) —
   the most-watched element in a live demo, so it gets the full treatment: mono
   count, quiet name, and the active card lit by a jade edge and count. */
#view-company .live-camp-card {
  background: var(--co-panel);
  border: 1px solid var(--co-rule);
  border-radius: 9px;
  box-shadow: var(--co-lift);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#view-company .live-camp-card .live-camp-count {
  font-family: var(--co-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 500;
  color: var(--co-quiet);
}
#view-company .live-camp-card .live-camp-name {
  font-size: 12px;
  color: var(--co-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-company .live-camp-card.live-camp-active {
  border-color: #BFE0D6;
  border-left: 3px solid var(--co-jade);
  background: var(--co-panel);
  box-shadow: var(--co-lift-2);
}
#view-company .live-camp-card.live-camp-active .live-camp-count { color: var(--co-jade-ink); }
body.sw-company.co-dark #view-company .live-camp-card.live-camp-active {
  border-color: rgba(46,211,163,.35);
  border-left-color: var(--co-jade);
}
body.sw-company.co-dark #view-company .live-camp-card.live-camp-active .live-camp-count {
  color: var(--co-jade);
  text-shadow: 0 0 12px rgba(46,211,163,.35);
}

/* ============================================================================
   19 · NIGHT — THE SYSTEMATIC SWEEP
   ============================================================================
   Three ways a surface escapes a token swap, each closed here for good:

   a) PRIVATE NAMESPACES. The IVR builder carries its own tokens (--ivr-text,
      --ivr-card …) defined at :root with light values — dark text on surfaces
      the remap darkened. Remapped here, same discipline as the base tokens.

   b) INLINE TINTED BOXES. Renderers emit style="background:#fef3c7" style
      pastel info/warning/success boxes. Inline beats any stylesheet rule, so
      these are matched by [style*=…] attribute selectors and overridden with
      !important — the one legitimate use of it: out-ranking an inline literal
      that can never be themed any other way. Grouped by MEANING onto the same
      five tint pairs the pills use, so straw still says "waiting" everywhere.

   c) The node TYPE colours (--t-play …) are saturated fills under white
      glyphs; they survive on graphite untouched and are left alone.
   ========================================================================== */
body.sw-company.co-dark {
  --ivr-bg:          #0F1917;
  --ivr-card:        #121D1B;
  --ivr-border:      #2C3F3B;
  --ivr-line:        #3A4C47;
  --ivr-text:        #E9EEEC;
  --ivr-text-muted:  #8B9995;
  --ivr-accent:      #8B96F8;   /* indigo lifts to carry on graphite */
  --ivr-accent-soft: #232848;
  --ivr-danger:      #F1655A;
}

/* b) inline pastels → the tint set. Warm ambers mean "waiting/caution" … */
body.sw-company.co-dark [style*="background:#fef3c7"],
body.sw-company.co-dark [style*="background:#fefce8"],
body.sw-company.co-dark [style*="background:#fffbeb"],
body.sw-company.co-dark [style*="background:#fff8e6"],
body.sw-company.co-dark [style*="background:#fff7ed"],
body.sw-company.co-dark [style*="background:#fef9c3"] {
  background: var(--co-tint-warn) !important;
  color: var(--co-tint-warn-fg) !important;
  border-color: #4A3A1A !important;
}
/* … greens mean "good/success" … */
body.sw-company.co-dark [style*="background:#f0fdf4"],
body.sw-company.co-dark [style*="background:#f0fbf3"],
body.sw-company.co-dark [style*="background:#ecfdf5"] {
  background: var(--co-tint-good) !important;
  color: var(--co-tint-good-fg) !important;
  border-color: #1D4A3D !important;
}
/* … reds mean "failed/danger" … */
body.sw-company.co-dark [style*="background:#fee2e2"],
body.sw-company.co-dark [style*="background:#fef2f2"] {
  background: var(--co-tint-bad) !important;
  color: var(--co-tint-bad-fg) !important;
  border-color: #4A2320 !important;
}
/* … violets are "special/reference" … */
body.sw-company.co-dark [style*="background:#f5f3ff"],
body.sw-company.co-dark [style*="background:#fdf4ff"] {
  background: var(--co-tint-special) !important;
  color: var(--co-tint-special-fg) !important;
  border-color: #37305A !important;
}
/* … cool greys are neutral wells … */
body.sw-company.co-dark [style*="background:#f1f5f9"],
body.sw-company.co-dark [style*="background:#f8fafc"] {
  background: var(--co-tint-neutral) !important;
  color: var(--co-tint-neutral-fg) !important;
  border-color: var(--co-rule-2) !important;
}
/* … and bare white panels become the dark panel. */
body.sw-company.co-dark [style*="background:#fff;"],
body.sw-company.co-dark [style*="background:#fff\""] {
  background: var(--co-panel) !important;
  color: var(--co-ink) !important;
}
/* Inline dark text with no background of its own goes to ink. */
body.sw-company.co-dark [style*="color:#111"] { color: var(--co-ink) !important; }

/* a) IVR chrome details the tokens alone cannot reach. */
body.sw-company.co-dark .ivr-pill.end { background: #3A4C47; }
body.sw-company.co-dark .ivr-node-card { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
body.sw-company.co-dark .ivr-picker { box-shadow: 0 14px 40px rgba(0,0,0,.6); }
body.sw-company.co-dark .ivr-picker-item:hover { background: var(--ivr-accent-soft); }

/* Inline text-only colours (no background of their own) sit on themed dark
   surfaces, so mid-dark inks vanish. Same attribute technique, same grouping by
   meaning: green stays "good", blue stays "info", grey goes to muted ink. */
body.sw-company.co-dark [style*="color:#0a7c2f"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#10b981"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#166534"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#16a34a"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#22c55e"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#34c759"]:not([style*="background"]) { color: var(--co-tint-good-fg) !important; }
body.sw-company.co-dark [style*="color:#0070f3"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#007aff"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#0369a1"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#0ea5e9"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#1d4ed8"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#2563eb"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#6366f1"]:not([style*="background"]) { color: var(--co-tint-info-fg) !important; }
body.sw-company.co-dark [style*="color:#4c1d95"]:not([style*="background"]) { color: var(--co-tint-special-fg) !important; }
body.sw-company.co-dark [style*="color:#374151"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#54656f"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#64748b"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#667781"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#6e6e73"]:not([style*="background"]),
body.sw-company.co-dark [style*="color:#111b21"]:not([style*="background"]) { color: var(--co-ink-3) !important; }

/* ============================================================================
   20 · NIGHT — COMPLETION OF THE SWEEP
   ============================================================================
   The audit of the COMPLETE code (every rule in styles.css, every inline style
   in app.js and index.html, checked by luminance against what the dark scopes
   cover) surfaced five leftovers. All closed here:
     · 8 inline pastel backgrounds the first pass's prefix-match missed
     · 9 inline dark text colours (reds, violets, amber)
     · 21 base-sheet classes with raw light literals and no dark override
     · 2 tokens used only in inline styles and never defined anywhere
       (--card2, --border-light) — their light fallbacks always won
   ========================================================================== */
body.sw-company.co-dark {
  --card2:        #182524;   /* undefined everywhere; only its fallback existed */
  --border-light: #2C3F3B;
}

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

/* Base-sheet classes with raw light literals, grouped by meaning. */
body.sw-company.co-dark .badge-active,
body.sw-company.co-dark .badge-completed,
body.sw-company.co-dark .company-role,
body.sw-company.co-dark .dp-sale,
body.sw-company.co-dark .rtm-cs-ready,
body.sw-company.co-dark .rtm-q-ringing,
body.sw-company.co-dark .rtm-sip-on,
body.sw-company.co-dark .chip-list .chip.phone,
body.sw-company.co-dark .apidoc-gen-cols .chip.phone {
  background: var(--co-tint-good); color: var(--co-tint-good-fg); border-color: transparent;
}
body.sw-company.co-dark .rtm-cs-call,
body.sw-company.co-dark .rtm-q-in_ivr,
body.sw-company.co-dark .rtm-resize-handle.rtm-resizing {
  background: var(--co-tint-info); color: var(--co-tint-info-fg);
}
body.sw-company.co-dark .dp-cb,
body.sw-company.co-dark .rtm-ctrl-break { color: var(--co-tint-warn-fg); }
body.sw-company.co-dark .dp-cb { background: var(--co-tint-warn); }
body.sw-company.co-dark .rtm-ctrl-break:hover { background: var(--co-tint-warn) !important; }
body.sw-company.co-dark .dp-del:hover,
body.sw-company.co-dark .rtm-ctrl-logout:hover { background: var(--co-tint-bad) !important; }
body.sw-company.co-dark .low-credit-tag {
  background: var(--co-tint-bad); color: var(--co-tint-bad-fg); border-color: transparent;
}
body.sw-company.co-dark input.input-bad { background: var(--co-tint-bad); }
body.sw-company.co-dark .vbr-bar-other { background: #3A4C47; }
body.sw-company.co-dark .dup-session-box { background: var(--co-panel); }
body.sw-company.co-dark .dup-session-btns .btn-secondary {
  background: var(--co-sunk); color: var(--co-ink-2);
}