/* ===========================================================================
   Vistara Health Advisors — design system
   Brand palette pulled from the logo: deep navy, sunrise orange, road blue.
   =========================================================================== */
:root {
  /* Brand */
  --navy-900: #0E1B3D;
  --navy-800: #14274E;
  --navy-700: #1D3462;
  --navy-600: #294a86;
  --orange:   #EC8324;
  --orange-strong: #D9721A;
  --orange-soft:   #FDECD8;
  --blue:     #2E6FED;
  --blue-soft:#E5EDFD;
  --amber:    #F6A21E;

  /* Neutrals / surfaces */
  --bg: #EEF2F9;
  --panel: #ffffff;
  --panel-raised: #F3F6FB;
  --border: #E4E9F2;
  --border-strong: #D3DBEA;
  --text: #17223D;
  --text-dim: #667089;
  --text-mute: #97A1B5;

  /* Semantic */
  /* Heading/emphasis text. Distinct from --navy-800 because that token is also
     used as a solid button background, which must stay navy in both themes —
     only the TEXT role flips for dark mode. */
  --heading: var(--navy-800);
  --pos: #1a9d5a;                 /* up/good, e.g. grade indicators */
  --neg: #c2410c;                 /* down/bad */
  --purple: #6d3bef;              /* funnel stage accent */
  --accent: var(--orange);        /* primary actions */
  --accent-dim: var(--orange-strong);
  --success: #0E9F6E;
  --success-soft: #DFF3EB;
  --danger: #E5484D;
  --danger-soft: #FCE6E7;
  --warn: #D9822B;
  --warn-soft: #FBECD9;
  --info: var(--blue);
  --info-soft: var(--blue-soft);

  /* Shape & depth */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(16,33,62,.06), 0 1px 3px rgba(16,33,62,.05);
  --shadow-md: 0 6px 20px rgba(16,33,62,.08);
  --shadow-lg: 0 18px 48px rgba(16,33,62,.16);
  --ring: 0 0 0 3px rgba(236,131,36,.22);

  /* The strip along the bottom of the viewport owned by the floating Copilot
     and Team Chat launchers (public/copilot.js, public/chat.js): 56px tall,
     20px off the bottom, plus clearance. Both sit at z-index 2500, above every
     modal, so anything a modal draws inside this strip is covered — which is
     how the quoter's total and effective-premium figures ended up underneath
     them. Modals reserve it rather than the launchers hiding, so an agent can
     still open either one mid-quote. */
  --fab-reserve: 88px;
  /* The nav column. A token rather than a literal so the sidebar tracks the
     brand navy the logo and the orange active-state were picked against. */
  --sidebar-bg: var(--navy-900);

  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* Dark mode — overrides the neutral/surface tokens. The navy sidebar already
   reads as dark, so this mainly darkens the content surfaces + soft badges. */
body.theme-dark {
  --bg: #0b1220;
  --panel: #131c31;
  --panel-raised: #1b2740;
  --border: #263450;
  --border-strong: #33456a;
  --text: #e7ecf6;
  /* Was inheriting --navy-800 (#14274E), which sits at 1.15:1 against --panel
     and 1.01:1 against --panel-raised — headings were effectively invisible in
     dark mode. Kept a touch brighter than --text so headings still read as
     headings, mirroring the light theme. */
  --heading: #f2f6fd;
  /* These three, and --text-mute below, all failed AA against the dark
     surfaces at their light-theme values (2.50-3.37:1). Lifted, not
     recolored — same hues, enough luminance to read. */
  --pos: #34d399;
  --neg: #fb923c;
  --purple: #a78bfa;
  --text-dim: #9aa7c2;
  --text-mute: #8b99b8;
  --success-soft: rgba(14,159,110,.20);
  --danger-soft: rgba(229,72,77,.20);
  --warn-soft: rgba(217,130,43,.20);
  --info-soft: rgba(46,111,237,.22);
  --orange-soft: rgba(236,131,36,.20);
  --blue-soft: rgba(46,111,237,.22);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
/* Responsive rules live at the end of the file so they override base rules. */

/* ------------------------------------------------------------------ Sidebar */
.sidebar {
  background: var(--sidebar-bg);
  color: #cdd6ea;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Scroll internally when the nav is taller than the viewport so the navy
     background always covers the full column (incl. the footer). */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Brand lockup: logo chip + wordmark */
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
/* The real logo lockup — mark, wordmark and tagline in one asset
   (img/vistara-logo.png). The sidebar previously paired the square mark with a
   CSS-rendered "VISTARA / HEALTH ADVISORS", which re-set type the artwork
   already carries and could never match its spacing or the tagline. */
.sidebar__brand-logo { width: 100%; max-width: 202px; height: auto; display: block; }

.sidebar__brand-chip {
  width: 44px; height: 44px;
  flex: none;
  background: transparent;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sidebar__brand-chip img { width: 40px; height: 40px; display: block; object-fit: contain; }
.sidebar__brand-name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .14em;
  color: var(--heading);
  line-height: 1;
}
.sidebar__brand-sub {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--orange);
  font-weight: 600;
  margin-top: 4px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.sidebar__link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidebar__link.active {
  background: rgba(236,131,36,.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--orange);
}

.sidebar__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12px;
  color: #93a0bd;
}
.sidebar__footer #whoami, .sidebar__footer > div:first-child { padding: 0 8px 4px; color: rgba(255,255,255,.9); font-weight: 600; }
.sidebar__footer .sidebar__link { color: rgba(255,255,255,.8); font-size: 13px; }
.sidebar__footer .sidebar__link:hover { color: #fff; }

/* --------------------------------------------------------------- Main area */
.main {
  padding: 30px 34px 48px;
  overflow-y: auto;
  max-height: 100vh;
}
.main__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.main__title { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--heading); }
.main__subtitle { color: var(--text-dim); font-size: 13px; margin-top: 3px; }

/* -------------------------------------------------------------- Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--orange);
  opacity: .9;
}
.stat-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  font-weight: 600;
}
.stat-card__value {
  font-size: 28px;
  font-weight: 800;
  margin-top: 8px;
  color: var(--heading);
  letter-spacing: -.02em;
}

/* -------------------------------------- Colored dashboard tiles (EnrollHere-style)
   Each top-of-page metric gets its own hue + icon. Saturated gradient with white
   text so it reads in light AND dark. Use: <div class="tile tile--blue"> with
   .tile__top(.tile__label + .tile__icon) + .tile__value + optional .tile__sub. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.tile {
  --tile-a: #3b82f6; --tile-b: #2563eb;
  position: relative;
  border-radius: var(--radius);
  padding: 15px 17px;
  min-height: 106px;
  color: #fff;
  background: linear-gradient(140deg, var(--tile-a), var(--tile-b));
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile__label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; opacity: .96; }
.tile__icon {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .20);
}
.tile__icon svg { width: 20px; height: 20px; display: block; stroke: #fff; }
.tile__value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-top: 12px; }
.tile__sub { font-size: 11.5px; opacity: .88; margin-top: 4px; }
/* Hue variants — --tile-a lighter (top-left), --tile-b darker (bottom-right). */
.tile--sky    { --tile-a: #38bdf8; --tile-b: #0284c7; }
.tile--blue   { --tile-a: #3b82f6; --tile-b: #2563eb; }
.tile--indigo { --tile-a: #6366f1; --tile-b: #4f46e5; }
.tile--green  { --tile-a: #22c55e; --tile-b: #16a34a; }
.tile--purple { --tile-a: #a855f7; --tile-b: #7c3aed; }
.tile--amber  { --tile-a: #f59e0b; --tile-b: #d97706; }
.tile--pink   { --tile-a: #ec4899; --tile-b: #db2777; }
.tile--teal   { --tile-a: #14b8a6; --tile-b: #0d9488; }
.tile--navy   { --tile-a: var(--navy-600); --tile-b: var(--navy-900); }
.tile--slate  { --tile-a: #64748b; --tile-b: #475569; }
.tile--orange { --tile-a: #f7962f; --tile-b: var(--orange-strong); }

/* ------------------------------------------------------------------ Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
/* The one section-header rule. `.lead-section__head` is the same thing on
   detail pages (lead / agent) and is kept as an alias rather than a second,
   drifting copy of these values. */
.panel__title,
.lead-section__head {
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--heading);
  letter-spacing: -.01em;
}
/* A sub-section header inside a panel (any .panel__title that isn't the first
   child) gets a full-width divider above it + generous spacing, so a settings
   page reads as clearly separated blocks (EnrollHere-style sectioning). */
.panel > .panel__title:not(:first-child) {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
/* A panel header with an action on the right — the pattern that was being
   hand-rolled with an inline flex wrapper on every panel that has a button. */
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.panel__head .panel__title { margin: 0; }
/* A panel carrying a warning (e.g. a paused queue). */
.panel--warn { border-left: 4px solid var(--warn); }
/* Grids that carry their own trailing margin for standalone use must not add it
   to the panel's padding when they are the last thing inside one. */
.panel > .stat-grid:last-child,
.panel > .live-board:last-child { margin-bottom: 0; }

/* A standalone search box in a page header — the one that used to be
   hand-styled inline on Leads, Pay and Recruiting, each slightly differently. */
.search-input {
  background: var(--panel-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.search-input::placeholder { color: var(--text-mute); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* The trailing action cell of a table row: buttons, right-aligned, never wrapped. */
.cell-actions { white-space: nowrap; text-align: right; }
.cell-actions .btn + .btn { margin-left: 6px; }

/* One saved version in the queue editor's history list. */
.version-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.version-row:last-child { border-bottom: 0; }

/* A read-only value with a Copy button beside it. */
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1; min-width: 0; }

/* Queue editor top bar: back, name, status, and the state actions. Save is not
   here — it lives in the sticky bar at the bottom of the form. */
.flow-editor__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.flow-editor__name { font-size: 17px; font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
.flow-editor__acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Optional one-line description under a section header. */
.panel__desc {
  font-size: 13px;
  color: var(--text-dim);
  margin: -10px 0 16px;
}

/* ------------------------------------------------------------------ Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-raised);
  position: sticky; top: 0;
}
th:first-child { border-top-left-radius: var(--radius-sm); }
th:last-child { border-top-right-radius: var(--radius-sm); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--panel-raised); }
tr:last-child td { border-bottom: none; }
td.mono, th.mono, .mono { font-family: var(--mono); font-size: 12.5px; }

/* ------------------------------------------------------------------ Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--panel-raised);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.badge--active, .badge--approved, .badge--completed, .badge--authorized, .badge--available,
.badge--enabled, .badge--standard, .badge--success, .badge--default, .badge--converted,
.badge--sold, .badge--unl-approved, .badge--signed {
  background: var(--success-soft); color: var(--success); border-color: transparent;
}
.badge--inactive, .badge--rejected, .badge--failed, .badge--suspended, .badge--on-call,
.badge--dnc, .badge--do-not-call, .badge--disabled, .badge--dead, .badge--bad-number, .badge--lost {
  background: var(--danger-soft); color: var(--danger); border-color: transparent;
}
.badge--submitted, .badge--pending, .badge--ringing, .badge--in-progress, .badge--wrap-up,
.badge--suppression, .badge--callback, .badge--follow-up, .badge--ic-sent, .badge--paused {
  background: var(--warn-soft); color: var(--warn); border-color: transparent;
}

/* A paused queue's row reads as "stopped" without hiding it. */
tr.row--paused > td { background: var(--warn-soft); }
.badge--away, .badge--new, .badge--no-answer, .badge--contacted, .badge--prospect {
  background: var(--info-soft); color: var(--info); border-color: transparent;
}
.badge--offline, .badge--not-interested, .badge--other, .badge--removed {
  background: var(--panel-raised); color: var(--text-dim); border-color: transparent;
}

/* Disposition badges. Every other badge here takes its color from its own
   text, which only works for outcomes we ship. Dispositions are admin-defined,
   so the color is stored on the result and named explicitly — a new outcome an
   admin invents still gets a deliberate color rather than falling through to
   grey. */
.badge--dispo-red    { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge--dispo-amber  { background: var(--warn-soft);    color: var(--warn);    border-color: transparent; }
.badge--dispo-green  { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--dispo-blue   { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.badge--dispo-slate  { background: var(--panel-raised); color: var(--text-dim); border-color: transparent; }
/* Complaints: severity / status / SLA badges */
.badge--critical, .badge--high, .badge--breached {
  background: var(--danger-soft); color: var(--danger); border-color: transparent;
}
.badge--medium, .badge--at-risk, .badge--open {
  background: var(--warn-soft); color: var(--warn); border-color: transparent;
}
.badge--low, .badge--on-track, .badge--met, .badge--resolved, .badge--scheduled,
.badge--billable, .badge--sold, .badge--sent {
  background: var(--success-soft); color: var(--success); border-color: transparent;
}
.badge--closed, .badge--none {
  background: var(--panel-raised); color: var(--text-dim); border-color: transparent;
}

/* Transcript speaker labels — alternate colors so the two sides of a call read
   at a glance. Odd speakers (A/C/…) blue, even (B/D/…) orange. */
.badge--speaker-a, .badge--speaker-c, .badge--speaker-e {
  background: var(--info-soft); color: var(--info); border-color: transparent;
}
.badge--speaker-b, .badge--speaker-d, .badge--speaker-f {
  background: var(--warn-soft); color: var(--warn); border-color: transparent;
}

/* Grouped sidebar nav (collapsible sections + leaf icons) */
.sidebar__group { display: flex; flex-direction: column; }
.sidebar__group-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 12px 5px; margin-top: 2px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: rgba(255,255,255,.8); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.sidebar__group-head:hover { color: #fff; }
.sidebar__group-head svg { width: 13px; height: 13px; flex: none; transition: transform .18s ease; opacity: .8; }
.sidebar__group.collapsed .sidebar__group-head svg { transform: rotate(-90deg); }
.sidebar__group.collapsed .sidebar__group-items { display: none; }
.sidebar__group-items { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link svg.nav-ico { width: 17px; height: 17px; flex: none; opacity: .78; }
.sidebar__link:hover svg.nav-ico, .sidebar__link.active svg.nav-ico { opacity: 1; }

/* Segmented control (period toggles) */
.seg { display: inline-flex; background: rgba(0,0,0,.05); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 6px 13px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel); color: var(--heading); box-shadow: 0 1px 3px rgba(20,39,78,.12); }

/* Agent performance cards */
.agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.agent-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 13px; transition: box-shadow .15s ease, border-color .15s ease; }
.agent-card:hover { box-shadow: 0 6px 22px rgba(20,39,78,.10); border-color: var(--border-strong); }
.agent-card__head { display: flex; align-items: flex-start; gap: 11px; }
.agent-card__avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: rgba(46,111,237,.13); color: #2E6FED; }
.agent-card__name { font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.2; }
.agent-card__email { font-size: 11.5px; color: var(--text-dim); word-break: break-all; margin-top: 2px; }
.agent-card__open { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-mute); padding: 3px; border-radius: 7px; display: flex; }
.agent-card__open:hover { color: var(--orange); background: rgba(236,131,36,.12); }
.agent-card__grade { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.agent-card__label { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; margin-bottom: 4px; }
.agent-card__grade-val { font-size: 27px; font-weight: 800; line-height: 1; }
.agent-card__grade-val small { font-size: 13px; font-weight: 600; color: var(--text-mute); }
.g-hi { color: var(--pos); } .g-mid { color: var(--heading); } .g-lo { color: var(--neg); }
.agent-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.agent-card__stat { padding: 10px 4px; text-align: center; }
.agent-card__stat + .agent-card__stat { border-left: 1px solid var(--border); }
.agent-card__stat-val { font-size: 16px; font-weight: 700; color: var(--text); }
.agent-card__foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-dim); }
.agent-card__foot .fu { color: #2E6FED; font-weight: 600; }
.spark { display: block; overflow: visible; }

/* Funnel mini indicator (call grid) + stage filter chips */
.funnel-mini { display: inline-flex; gap: 3px; align-items: center; }
.funnel-mini span { width: 11px; height: 5px; border-radius: 2px; background: var(--border-strong); }
.funnel-mini span.on { background: var(--purple); }
.funnel-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.funnel-chips button { border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 14px; cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.funnel-chips button:hover { color: var(--text); }
.funnel-chips button.on { background: rgba(109,59,239,.12); border-color: var(--purple); color: var(--purple); }

/* Call detail page */
.cd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .cd-cols { grid-template-columns: 1fr; } }
.cd-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.cd-card__title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.cd-kv { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; }
.cd-kv__k { color: var(--text-dim); min-width: 92px; display: inline-flex; align-items: center; gap: 6px; }
.cd-kv__v { color: var(--text); font-weight: 500; }
.cd-funnel-bar { display: flex; gap: 4px; margin: 12px 0 10px; }
.cd-funnel-bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--border-strong); }
.cd-funnel-bar span.on { background: var(--purple); }
.cd-tag { display: inline-block; background: rgba(0,0,0,.05); color: var(--text-dim); font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 12px; margin: 0 5px 5px 0; }
.cd-sub { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; margin: 10px 0 4px; }

/* ---------------------------------------------------- Dialer shell (agent) */
.sidebar__sub { display: flex; flex-direction: column; }
.sidebar__link--child { padding-left: 28px; font-size: 13px; opacity: 0.9; }
/* Parent of a submenu. It is icon + label + caret, so the label must sit
   beside the icon exactly like every other nav item and only the caret is
   pushed right. space-between here had two children to work with (icon and
   label) and threw the label to the far edge. */
.sidebar__link--parent { display: flex; align-items: center; }
.nav-caret { margin-left: auto; font-size: 11px; line-height: 1; opacity: .7; }
/* Collapsed sidebar = a compact icon rail. Keep the nav icons AND the collapse
   toggle visible (so it can always be expanded again) and hide only the text
   labels. Also narrow the grid column, or the content area breaks. */
.app.sidebar-collapsed { grid-template-columns: 68px 1fr; }
.app.sidebar-collapsed .sidebar { width: 68px; padding-left: 10px; padding-right: 10px; overflow: hidden; }
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav-caret,
.app.sidebar-collapsed .sidebar__brand-name,
.app.sidebar-collapsed .sidebar__brand-sub,
.app.sidebar-collapsed .sidebar__sub,
.app.sidebar-collapsed #whoami,
.app.sidebar-collapsed .sidebar__footer .sidebar__link:not(#collapseBtn) { display: none; }
.app.sidebar-collapsed .sidebar__brand { justify-content: center; }
.app.sidebar-collapsed .sidebar__link { justify-content: center; padding-left: 0; padding-right: 0; }
.app.sidebar-collapsed .nav-ico { opacity: .95; }
.app.sidebar-collapsed #collapseBtn .nav-ico { transform: rotate(180deg); } /* chevrons flip to "expand" */

/* Persistent softphone bar. Sticks to the top of the scrolling content area so
   the live-call controls (Hang up, Mute, Transfer) stay reachable while the
   agent works down the caller's lead page. */
.softphone-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 16px;
  position: sticky; top: 0; z-index: 60;
  box-shadow: 0 6px 18px rgba(14, 27, 61, .10);
}
/* display:flex above would override the [hidden] attribute — keep hiding working. */
.softphone-bar[hidden] { display: none; }
.softphone-bar__status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.softphone-bar .active-call { margin: 0; flex: 1; min-width: 260px; }
.active-call {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, rgba(236,131,36,0.10), rgba(236,131,36,0.02));
  border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px;
}
/* The class sets display:flex, which would override the [hidden] attribute the
   JS uses to hide the panel — this makes hiding it actually work. */
.active-call[hidden] { display: none; }

/* Queue type selector (admin queue editor) */
.qtype-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qtype-btn {
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.qtype-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Skill / queue chip pickers (admin agent detail) */
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; color: var(--text-dim);
}
.skill-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Appointments calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-dim); font-weight: 600; padding: 2px; }
.cal-cell { min-height: 78px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; }
.cal-cell--out { opacity: 0.4; }
.cal-day-num { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.cal-appt {
  background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 5px; margin-top: 3px;
  font-size: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Performance dashboard (phase e) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.stat-tile__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.stat-tile__value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat-tile__sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dash-legend { display: flex; flex-direction: column; gap: 8px; }
.dash-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.dash-legend__swatch { width: 12px; height: 12px; border-radius: 3px; }
.dash-legend__item.off { opacity: 0.4; text-decoration: line-through; }
.dash-bars { overflow-x: auto; }

/* Compact search input used across phase-c filter bars */
.inp {
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; color: var(--text); font-size: 13px; min-width: 200px;
}

/* Call Logs filter bar */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-wrap { position: relative; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.filter-pill--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 12px;
}
.filter-panel--wide { min-width: 290px; }
.filter-panel hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.filter-preset { text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 13px; cursor: pointer; }
.filter-preset:hover { background: var(--panel-raised); }
.filter-link { background: transparent; border: 0; color: var(--text-dim); font-size: 13px; cursor: pointer; text-decoration: underline; }
.filter-link--muted { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
/* Classic mode: render filter panels inline instead of as dropdowns. */
.filters--classic .filter-panel { position: static; display: block; box-shadow: none; margin-top: 8px; }

/* Call Logs cell icons */
.cell-icon { display: inline-flex; align-items: center; gap: 6px; }
.cell-icon svg { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }
.cell-icon.dir-in { color: var(--success); }
.cell-icon.dir-out { color: var(--info); }
th .col-menu { float: right; color: var(--text-dim); cursor: pointer; opacity: 0.45; font-weight: 700; padding: 0 2px; }
th .col-menu:hover { opacity: 1; }
.icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; color: var(--text-dim); cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 15px; height: 15px; display: block; }

/* Tabs (lead detail) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 12px 0 14px; flex-wrap: wrap; }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Apps switcher cards */
.apps-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.apps-card:hover { border-color: var(--accent); }
.apps-card--current { opacity: 0.7; }

/* Files drop zone */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: 10px; padding: 26px;
  text-align: center; color: var(--text-dim); font-size: 13px; cursor: pointer;
}
.dropzone.dragover { border-color: var(--accent); background: var(--panel-raised); }

/* --------------------------------------------------- Softphone status bar */
.softphone-controls { display: flex; gap: 8px; align-items: center; }
.status-wrap { position: relative; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.status-pill__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); }
.status-pill.is-available .status-pill__dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-pill.is-follow_up .status-pill__dot { background: var(--info); }
.status-pill.is-paused .status-pill__dot { background: var(--warn); }
.status-pill.is-on_call .status-pill__dot,
.status-pill.is-wrap_up .status-pill__dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-pill.is-offline .status-pill__dot { background: var(--text-dim); }

.status-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 6px; min-width: 200px;
}
.status-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 12px;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.status-menu__item:hover { background: var(--panel-raised); }
.status-submenu {
  margin: 2px 0 2px 8px; padding-left: 6px; border-left: 2px solid var(--border);
  max-height: 260px; overflow-y: auto;
}
.status-menu .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); display: inline-block; }
.status-menu .dot--available { background: var(--success); }
.status-menu .dot--follow_up { background: var(--info); }
.status-menu .dot--paused { background: var(--warn); }
.status-menu .dot--offline { background: var(--text-dim); }

/* ---------------------------------------------------------------- Kanban */
.viewtoggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.viewtoggle .btn { border-radius: 0; border: none; box-shadow: none; }
.viewtoggle .btn.active { background: var(--navy-800); color: #fff; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; overflow-x: auto; }
@media (max-width: 1000px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
.kanban__col { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 14px; padding: 12px; min-height: 140px; transition: background .12s ease, outline .12s ease; }
.kanban__col.drop-over { outline: 2px dashed var(--orange); outline-offset: -2px; background: var(--orange-soft); }
.kanban__colhead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--heading); margin-bottom: 10px; }
.kanban__count { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-family: var(--mono); font-weight: 700; }
.kanban__card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: grab; }
.kanban__card:hover { border-color: var(--border-strong); }
.kanban__card.dragging { opacity: .45; }
.kanban__card-name { font-weight: 600; font-size: 13px; color: var(--heading); }
.kanban__card-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.kanban__empty { font-size: 12px; color: var(--text-mute); text-align: center; padding: 14px 0; }

/* ------------------------------------------------------------------- Forms */
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: var(--ring);
}
/* Dispositions: drag to reorder, and the category color grid. */
.dispo-row { cursor: default; }
.dispo-row .dispo-grip {
  cursor: grab; color: var(--text-mute); font-size: 15px; user-select: none;
  text-align: center; letter-spacing: -2px;
}
.dispo-row .dispo-grip:active { cursor: grabbing; }
.dispo-row.dragging { opacity: .4; }
.dispo-row.drop-target > td { box-shadow: inset 0 2px 0 var(--accent); }
.dispo-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
.dispo-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs);
}

/* "You are LIVE" — the banner an agent gets when a queue call auto-answers.
   Queue calls connect with no ringing phase, so without this the only cue is a
   sub-second beep and a panel swap, and agents were discovering they were on a
   call by hearing the customer speak. */
.live-flash {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10002;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: var(--accent, #16a34a); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  transform: translateY(-110%);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;   /* never blocks the lead page underneath */
}
.live-flash.on { transform: translateY(0); }
.live-flash__dot {
  width: 11px; height: 11px; border-radius: 50%; background: #fff; flex: none;
  animation: liveFlashPulse .9s ease-in-out infinite;
}
@keyframes liveFlashPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* Live supervision bar — pinned to the top of the admin portal while a
   supervisor is inside someone else's call. Deliberately loud: being silently
   present in a customer conversation is the thing to avoid. */
#supBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--danger); color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  font-size: 13px;
}
#supBar[hidden] { display: none; }
/* Push the app down so the bar never covers the header it overlaps. */
body.is-supervising { padding-top: 44px; }
.sup-bar__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: supPulse 1.2s ease-in-out infinite; flex: none;
}
@keyframes supPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sup-bar__mode { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sup-bar__who { opacity: .92; }
.sup-bar__timer { margin-left: auto; opacity: .92; }
.sup-bar__modes { display: flex; gap: 6px; }
.sup-bar__modes button {
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-xs); padding: 4px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.sup-bar__modes button:hover { background: rgba(255, 255, 255, .3); }
.sup-bar__modes button.active { background: #fff; color: var(--danger); border-color: #fff; }
#supBar .btn--ghost { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .38); }
#supBar .btn--ghost:hover { background: rgba(255, 255, 255, .3); }
#supBar .btn--danger { background: #7f1d1d; border-color: #7f1d1d; }
@media (max-width: 700px) {
  .sup-bar__who, .sup-bar__timer { display: none; }
}

/* A required field, and the state it lands in when someone submits without it.
   Used by the disposition selects, which are the one thing an agent must not be
   able to skip on the way out of a call. */
.field label .req { color: var(--danger); font-weight: 700; }
.field select.field--invalid,
.field input.field--invalid,
.field textarea.field--invalid {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .field-row, .field-row--3 { grid-template-columns: 1fr; } }

/* Lead detail — grouped, denser form so it reads at a glance */
.lead-detail .field { margin-bottom: 12px; }
.lead-section { margin-bottom: 26px; }
/* A block that is NOT part of the form above it (e.g. the agent's timesheet,
   which sits below the settings save bar and saves its own rows). The gap and
   rule say "different thing" so the Save button's scope is unambiguous. */
.lead-section--detached { margin-top: 34px; padding-top: 26px; border-top: 2px solid var(--border); }
/* On detail pages the header also carries a divider, because the sections are
   siblings in one panel rather than separate cards. Typography comes from the
   shared rule up with .panel__title. */
.lead-section__head {
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
/* A row of checkboxes. `.lead-checks` is the original name (lead detail);
   `.check-row` is the same thing for every other form, so a checkbox never
   again needs a hand-written inline flex/width:auto. */
.lead-checks, .check-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 2px 0 12px; }
.lead-checks label, .check-row label {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
}
.lead-checks input, .check-row input { width: auto; }
/* A checkbox whose meaning needs a sentence, not just a name. */
.check-row--stacked { flex-direction: column; align-items: flex-start; gap: 12px; }
.check-row label > span > .main__subtitle { font-weight: 400; display: block; margin-top: 2px; }

/* A hint under a control: the one-line "what this actually does" that keeps a
   settings page readable without a manual. */
.field__hint { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.field__hint code { font-size: 11.5px; }
.lead-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 12px; color: var(--text-dim); margin: 2px 0 14px;
}
/* Sticks to the bottom of the scroll area so Save is always reachable, and
   lights up the moment anything on the form changes — nothing here
   auto-saves, so an agent who edits and walks away loses the lot. */
.lead-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 10px; padding: 14px 0;
  border-top: 1px solid var(--border); background: var(--panel);
}
.lead-actions .btn--save { margin-left: auto; }
/* The same bar used outside a panel (queue editor), so it needs the panel's own
   inset and a border all the way round rather than just a top rule. */
.lead-actions--bare {
  padding: 14px 22px; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.btn--save {
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
  padding: 12px 28px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(236,131,36,.45);
}
.btn--save:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(236,131,36,.55); }
.lead-actions__dirty {
  display: none; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--warn);
}
.lead-actions__dirty::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
}
.lead-actions--dirty .lead-actions__dirty { display: inline-flex; }
.lead-actions--dirty .btn--save { animation: savePulse 1.7s ease-in-out infinite; }
@keyframes savePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,131,36,.5), 0 4px 16px rgba(236,131,36,.45); }
  50%      { box-shadow: 0 0 0 8px rgba(236,131,36,0), 0 4px 16px rgba(236,131,36,.45); }
}
@media (prefers-reduced-motion: reduce) { .lead-actions--dirty .btn--save { animation: none; } }

/* The floating launchers (Copilot, Team chat) sit bottom-right and would cover
   the sticky Save bar on detail pages — Save is pushed to the right of that bar
   by `margin-left:auto`, so both land in the same corner. There is no way to
   clear it at bottom:20px: the bar occupies the full height below it. So when a
   *visible* section contains a sticky action bar, the launchers lift above it.

   `section:not([hidden])` is what makes this precise. Views are shown and hidden
   with the `hidden` attribute, and gModal reuses `.lead-actions` for its own
   button row — but that row is appended to <body>, outside any section, so a
   modal never triggers this. Higher specificity than the widgets' own injected
   rules, so it wins regardless of stylesheet order.

   The `:not(:has(.modal-overlay…))` half undoes the lift while a modal is open,
   and it is not optional. The Save bar is behind the overlay then, so there is
   nothing to clear — but a launcher raised to 124px is no longer at the edge of
   the viewport, it is 124px *into* the modal, which is how the quoter's
   effective-premium figure ended up sitting underneath the Copilot button on the
   lead page. Dropped back to rest, they are cleared by the bottom padding on
   .modal-overlay (--fab-reserve) and both stay usable mid-quote. */
body:has(section:not([hidden]) .lead-actions):not(:has(.modal-overlay:not([hidden]))) .cpw__launcher,
body:has(section:not([hidden]) .lead-actions):not(:has(.modal-overlay:not([hidden]))) .chatw__launcher {
  bottom: 124px;
}

/* Panels open upward from the launcher, so they move with it and give back the
   height they gained, or they would run off the top of a short viewport. */
body:has(section:not([hidden]) .lead-actions):not(:has(.modal-overlay:not([hidden]))) .cpw__panel,
body:has(section:not([hidden]) .lead-actions):not(:has(.modal-overlay:not([hidden]))) .chatw__panel {
  bottom: 192px; max-height: calc(100vh - 212px);
}

/* ----------------------------------------------------------------- Buttons */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 2px 8px rgba(236,131,36,.32); }
.btn--primary:hover:not(:disabled) { background: var(--orange-strong); box-shadow: 0 4px 14px rgba(236,131,36,.38); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #cf3b40; }
.btn--ghost { background: var(--panel); color: var(--heading); border-color: var(--border-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--panel-raised); border-color: var(--navy-600); }
.btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }

/* ------------------------------------------------------------------ Toasts */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy-700);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 500;
  max-width: 340px;
  box-shadow: var(--shadow-lg);
  z-index: 3000;
  animation: toastIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes admInPulse {
  0%   { box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 0 0 rgba(236,131,36,.5); }
  70%  { box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 0 12px rgba(236,131,36,0); }
  100% { box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 0 0 rgba(236,131,36,0); }
}
.toast--error { border-left-color: var(--danger); color: var(--danger); }
.toast--success { border-left-color: var(--success); color: var(--success); }

.empty-state {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 36px 0;
}

/* ------------------------------------------------------------------ Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,27,61,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bottom padding keeps every modal clear of the floating launchers — see
     --fab-reserve. Modals that declare their own max-height have to subtract it
     too, or centring lets the extra height spill back down into the strip. */
  padding: 20px 20px var(--fab-reserve);
  z-index: 2000;
  animation: overlayIn .18s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay[hidden] { display: none; }
.modal-overlay .panel {
  box-shadow: var(--shadow-lg);
  margin: 0;
  animation: modalIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------- Live Operations board */
/* Six columns, because loadLiveBoard() renders six presence states — at five
   the Offline column wrapped onto a row of its own. */
.live-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1400px) { .live-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .live-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .live-board { grid-template-columns: 1fr; } }

/* Live board → agent performance: clickable affordance */
.agent-card--clickable { cursor: pointer; }
.agent-card--clickable:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
tr.live-row { cursor: pointer; }
tr.live-row:hover td { background: var(--panel-raised); }

/* ------------------------------------------------ Agent performance modal */
.perf-modal {
  width: min(1180px, 96vw);
  max-height: calc(100vh - 20px - var(--fab-reserve));
  overflow-y: auto; padding: 0;
}
.perf-modal__head {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  border-bottom: 1px solid var(--border); padding: 18px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.perf-modal__title { font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
.perf-modal__headright { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perf-modal__body { padding: 22px; display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .perf-modal__body { grid-template-columns: 1fr; } }
.perf-main { min-width: 0; }
.perf-main .stat-grid { margin-bottom: 18px; }
.perf-side { display: flex; flex-direction: column; gap: 16px; }
.perf-card { margin: 0; }
.perf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.perf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.perf-sup { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.perf-sup__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perf-soon { font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--accent); background: var(--orange-soft); padding: 2px 8px; border-radius: 999px; }
.qpill { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--heading); margin: 0 6px 7px 0; background: var(--panel-raised); }
.perf-actions .btn.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* --------------------------------------- Agent Performance snapshot (Productivity) */
.perf-snap { display: grid; grid-template-columns: 1.25fr 1fr 1.05fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.perf-snap--nocost { grid-template-columns: 1.3fr 1.1fr; }
@media (max-width: 1000px) { .perf-snap, .perf-snap--nocost { grid-template-columns: 1fr; } }
.cm-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cm-legs { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-dim); }
.cm-leg { display: inline-flex; align-items: center; gap: 8px; }
.cm-leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cm-leg b { color: var(--heading); font-variant-numeric: tabular-nums; }
.perf-cps { background: var(--success-soft); border: 1px solid rgba(14, 159, 110, .35); display: flex; flex-direction: column; }
.perf-cps__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--success); }
.perf-cps__value { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--success); margin: 8px 0 auto; }
.perf-cps__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; border-top: 1px solid rgba(14, 159, 110, .25); padding-top: 12px; margin-top: 14px; }
.perf-cps__stats > div { display: flex; flex-direction: column; }
.perf-cps__stats span { font-size: 11px; color: var(--text-dim); }
.perf-cps__stats b { font-size: 15px; color: var(--heading); font-variant-numeric: tabular-nums; }
.perf-kcards { display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.perf-kcard__head { display: flex; align-items: center; justify-content: space-between; }
.perf-kcard__ico { font-size: 18px; line-height: 1; }
tr.prod-row { cursor: pointer; }
tr.prod-row:hover td { background: var(--panel-raised); }

.live-column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  min-height: 150px;
  box-shadow: var(--shadow-sm);
}
.live-column__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.live-column__header .count {
  background: var(--panel-raised);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
}
.live-column--on_call { border-top: 3px solid var(--danger); }
.live-column--wrap_up { border-top: 3px solid var(--warn); }
.live-column--available { border-top: 3px solid var(--success); }
.live-column--away { border-top: 3px solid var(--info); }
.live-column--follow_up { border-top: 3px solid var(--info); }
.live-column--paused { border-top: 3px solid var(--warn); }
.live-column--offline { border-top: 3px solid var(--border-strong); }
.live-column--on_call .live-column__header { color: var(--danger); }
.live-column--wrap_up .live-column__header { color: var(--warn); }
.live-column--available .live-column__header { color: var(--success); }
.live-column--away .live-column__header { color: var(--info); }
.live-column--follow_up .live-column__header { color: var(--info); }
.live-column--paused .live-column__header { color: var(--warn); }
.live-column--offline .live-column__header { color: var(--text-dim); }
.live-column__empty { font-size: 12px; color: var(--text-mute); text-align: center; padding: 18px 0; }

.agent-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 9px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.agent-card__name {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agent-card__meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.agent-card__actions { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }

/* --------------------------------------------------- Funnel breakdown cards */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
.funnel-card__count { font-size: 28px; font-weight: 800; color: var(--heading); letter-spacing: -.02em; }
.funnel-card__count-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-left: 6px; font-weight: 600; }
.funnel-row { margin-top: 13px; }
.funnel-row__label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
  font-weight: 600;
}
.funnel-row__bar { height: 7px; background: var(--panel-raised); border-radius: 5px; overflow: hidden; }
.funnel-row__fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--orange)); border-radius: 5px; }
.funnel-card__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

/* -------------------------------------------------------------- Login page */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(46,111,237,.10), transparent 60%),
    radial-gradient(760px 420px at 92% 108%, rgba(236,131,36,.12), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 38px 36px;
  box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 26px; }
/* The full lockup (img/vistara-logo.png), which already contains the mark, the
   wordmark and the tagline — the three things this card used to rebuild in CSS
   beside an 84px square mark. Sized by width, since it is roughly 4.4:1. */
.login-brand img { width: 100%; max-width: 268px; height: auto; margin-bottom: 6px; object-fit: contain; }
.login-brand__name { font-family: var(--serif); font-size: 30px; letter-spacing: .16em; color: var(--heading); line-height: 1; }
.login-brand__sub { font-size: 11px; letter-spacing: .26em; color: var(--orange); font-weight: 600; margin-top: 7px; }
.login-brand__tag { font-size: 11px; letter-spacing: .04em; color: var(--text-dim); margin-top: 12px; }
.login-card h1 { font-size: 18px; margin: 0 0 4px; color: var(--heading); text-align: center; }
.login-card p { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; text-align: center; }

/* ------------------------------------------------------------- Responsive */
/* The mobile toggle (public/nav-mobile.js). Hidden on desktop, where the
   sidebar is a permanent column and there is nothing to collapse. */
.sidebar__toggle { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* Sidebar becomes a top bar that COLLAPSES. It wrapped instead of collapsing
     before, which was fine at a handful of links; at twenty it stood 494px tall
     on a 375px phone — 61% of the screen before any content. Now it clips to
     the brand row and opens on tap. */
  .sidebar {
    position: sticky; top: 0; z-index: 70;
    height: auto;
    max-height: 62px;          /* the brand row; everything below is clipped */
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
  }
  /* Open simply removes the cap and lets the page scroll the menu.
     Deliberately `none` rather than a vh cap with a height transition: as a
     sticky grid item that combination did not resolve — max-height stayed
     pinned at the closed value even when set inline — and an animated menu is
     not worth a fragile one. Static positioning while open so a long list
     scrolls with the page instead of being trapped in a stuck bar. */
  .sidebar.is-open {
    max-height: none;
    overflow: visible;
    position: static;
  }

  /* Brand shrinks and shares the first row with the toggle, instead of taking
     a full row to itself.
     `flex: 0 1 auto` so the white card hugs the mark and wordmark. Letting it
     grow stretched the card to the full row, leaving a wide empty white slab
     to the right of a small logo. The toggle takes the leftover space instead. */
  .sidebar__brand {
    flex: 0 1 auto; min-width: 0; width: auto;
    margin-bottom: 0; padding: 5px 10px; border-bottom: none;
  }
  /* The lockup is wide (roughly 4.4:1), so cap it by width and let the height
     follow — the collapsed bar is only 62px tall. */
  .sidebar__brand-logo { max-width: 138px; }
  .sidebar__brand-chip { width: 30px; height: 30px; }
  .sidebar__brand-chip img { width: 28px; height: 28px; }
  .sidebar__brand-name { font-size: 15px; letter-spacing: .1em; }
  .sidebar__brand-sub { font-size: 7.5px; letter-spacing: .18em; }

  .sidebar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    /* `order` rather than moving it in the DOM: it stays next to the brand for
       screen readers and tab order, and sits left of the logo visually. */
    order: -1;
    flex: none; width: 44px; height: 44px;   /* a real tap target */
    background: rgba(255,255,255,.10); border: none; border-radius: 11px;
    color: #fff; cursor: pointer;
  }
  .sidebar__toggle .sidebar__toggle-x { display: none; }
  .sidebar.is-open .sidebar__toggle svg:first-child { display: none; }
  .sidebar.is-open .sidebar__toggle .sidebar__toggle-x { display: block; }

  /* Full-width rows once open: easier to hit than wrapped chips, and the list
     reads as a menu rather than a jumble. */
  .sidebar__link { width: 100%; padding: 11px 12px; }
  .sidebar__link.active { box-shadow: inset 3px 0 0 var(--orange); }
  .sidebar__group, .sidebar__sub { width: 100%; }

  .sidebar__footer {
    margin-top: 8px; width: 100%; padding-top: 12px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .sidebar__footer #whoami, .sidebar__footer > div:first-child { padding: 0; }

  .main { max-height: none; padding: 18px 14px 40px; }
  .main__title { font-size: 20px; }
  .main__header { flex-wrap: wrap; gap: 10px; }

  /* The softphone controls had no wrap of their own, so the status pill — the
     control that decides whether calls ring at all — was clipped off-screen. */
  .softphone-bar { padding: 10px 12px; gap: 10px; }
  .softphone-controls { flex-wrap: wrap; width: 100%; }
  .softphone-bar .active-call { min-width: 0; width: 100%; }

  /* Wide data tables (Leads, Queues, Numbers) scroll inside their own card.
     They were spilling past the panel edge and dragging the whole page
     sideways, because only `.main` scrolled and nothing closer did. */
  .main div:has(> table), .panel:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Let columns keep their width inside that scroller rather than crushing. */
  .main div:has(> table) > table, .panel:has(> table) > table { min-width: max-content; }
}

/* ------------------------------------------------------------- Quoting tool */
/* Short-Term Home Health Care quoter (public/quoting/*). Opened from a lead
   detail page or the Quote nav item; carriers render side by side so an agent
   can compare on the call. */
.qt-panel {
  width: min(1180px, 96vw);
  /* Not 92vh: the total and effective-premium figures sit at the bottom of each
     carrier card, and at 92vh they landed under the Copilot launcher. */
  max-height: calc(100vh - 20px - var(--fab-reserve));
  overflow-y: auto;
  padding: 20px 22px 22px;
}
.qt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.qt-srcs { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; }
.qt-close {
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: var(--text-mute); padding: 0 4px;
}
.qt-close:hover { color: var(--text); }

.qt-inputs {
  display: grid; grid-template-columns: 2fr 1.3fr 1fr 1.2fr; gap: 14px;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.qt-inputs .field { margin-bottom: 0; }
.qt-hint { font-size: 11px; color: var(--text-mute); margin-top: 4px; }

.qt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.qt-card {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 16px; background: var(--panel); display: flex; flex-direction: column;
}
.qt-card--muted { background: var(--panel-raised); }
.qt-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qt-card__name { font-weight: 700; font-size: 15px; color: var(--text); }
.qt-card__prod { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.qt-card__meta { font-size: 11.5px; color: var(--text-mute); margin: 6px 0 12px; }
.qt-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin: 14px 0 8px;
}
.qt-sub--rx { margin-top: 22px; }
.qt-note { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-mute); font-size: 11px; }
.qt-note--block { display: block; margin-top: 2px; }
.qt-empty, .qt-unavail { font-size: 12.5px; color: var(--text-dim); padding: 10px 0; }
.qt-unavail { padding: 22px 0; text-align: center; }
.qt-warn {
  font-size: 12px; color: var(--warn); background: var(--warn-soft);
  border-radius: var(--radius-xs); padding: 7px 10px; margin-bottom: 10px;
}

.qt-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qt-plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--panel); padding: 10px 11px; cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .12s, background .12s;
}
.qt-plan:hover { border-color: var(--navy-600); }
.qt-plan--on { border-color: var(--orange); background: var(--orange-soft); }
.qt-plan__name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.qt-plan__price { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.qt-plan__mode { font-size: 11px; color: var(--text-mute); }

.qt-riders { display: flex; flex-direction: column; gap: 6px; }
.qt-rider {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 9px 11px; cursor: pointer; font-size: 12.5px;
}
.qt-rider:hover { border-color: var(--border-strong); }
.qt-rider--on { border-color: var(--blue); background: var(--blue-soft); }
.qt-rider input[type="checkbox"] { width: auto; margin: 0; }
.qt-rider__label { color: var(--text); }
.qt-rider__cost { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.qt-rider--on .qt-rider__cost { color: var(--text); font-weight: 600; }
.qt-rider__cost--credit { color: var(--success); }
.qt-mini {
  font-family: inherit; font-size: 11.5px; padding: 4px 6px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
.qt-mini--num { width: 74px; }

.qt-rx-sum {
  margin-top: 14px; padding: 10px 12px;
  background: var(--success-soft); border-radius: var(--radius-xs);
}
.qt-rx-sum--empty { background: var(--panel-raised); color: var(--text-mute); font-size: 12px; }
.qt-rx-sum__top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.qt-rx-sum__top strong { font-size: 16px; }
.qt-rx-sum__note { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.qt-cap { color: var(--warn); }

.qt-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
}
.qt-total__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.qt-total__sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.qt-total__amt { font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.qt-apply { margin-top: 12px; width: 100%; }

.qt-rx-head, .qt-rx-row {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr .8fr 32px; gap: 8px; align-items: center;
}
.qt-rx-head { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 5px; }
.qt-rx-row { margin-bottom: 7px; }
.qt-rx-row input, .qt-rx-row select {
  font-family: inherit; font-size: 12.5px; padding: 7px 9px; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--panel); color: var(--text);
}
.qt-rx-del {
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  color: var(--text-mute); font-size: 17px; line-height: 1; cursor: pointer; padding: 5px 0;
}
.qt-rx-del:hover { color: var(--danger); border-color: var(--danger); }
.qt-rx > .btn { margin-top: 6px; }

@media (max-width: 760px) {
  .qt-inputs { grid-template-columns: 1fr 1fr; }
  .qt-cards { grid-template-columns: 1fr; }
}

/* Lead-page quoting bits (public/quoting/lead-quote.js) */
.lead-quote-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; }
.lead-rx-benefit {
  margin-top: 14px; padding: 12px 14px;
  background: var(--success-soft); border-radius: var(--radius-xs); font-size: 12.5px;
}
.lead-rx-benefit__head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 7px;
}
.lead-rx-benefit__row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 3px 0; color: var(--text);
}
.lead-rx-benefit__note { font-size: 11px; color: var(--text-dim); margin-top: 7px; }

/* Premium net of the prescription reimbursement. Sits directly under the
   total; turns green when the drug benefit outruns the premium. */
.qt-effective {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 11px 13px;
  background: var(--panel-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
}
.qt-effective--credit { background: var(--success-soft); border-color: var(--success); }
.qt-effective__label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.qt-effective--credit .qt-effective__label { color: var(--success); }
.qt-effective__sub { font-size: 11.5px; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.qt-effective__note { font-size: 10.5px; color: var(--text-mute); margin-top: 3px; }
.qt-effective__amt {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap;
}
.qt-effective--credit .qt-effective__amt { color: var(--success); }

/* Base-plan summary + per-rider benefit amounts in the quoter. */
.qt-base {
  padding: 10px 12px; margin-bottom: 4px;
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.qt-base__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 12.5px; color: var(--text); margin-bottom: 5px;
}
.qt-base__top strong { font-size: 15px; }
.qt-base__period { font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.qt-base__lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.qt-base__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11.5px; color: var(--text-dim);
}
.qt-base__row strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-base__text { font-size: 11px; line-height: 1.5; color: var(--text-mute); }
.qt-benefit {
  display: block; margin-top: 3px; font-size: 11px; line-height: 1.45;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-dim);
}

/* Segmented toggle — counts vs. specific drugs on the prescription block. */
.qt-seg-group { display: inline-flex; gap: 0; margin-left: 10px; vertical-align: middle; }
.qt-seg-group--lead { margin: 0 0 10px; }
.qt-seg {
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-dim);
}
.qt-seg:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.qt-seg:last-child { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; border-left: 0; }
.qt-seg:hover { color: var(--text); }
.qt-seg--on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.qt-seg--on:hover { color: #fff; }
.qt-rx-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 460px; }
.qt-rx-counts .field { margin-bottom: 6px; }

/* Read-only field value — the state echoed beside the address, which mirrors
   the editable State field above the quote button. */
.field-static {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--panel-raised); color: var(--text-dim); font-size: 13px;
  min-height: 40px; display: flex; align-items: center;
}
/* Lead status — top right of the page header, color-coded so an agent can
   read where the lead stands at a glance. The color is driven straight off
   the selected option with :has(), so neither portal needs JS for it; browsers
   without :has() just get the neutral pill. */
.lead-status-head {
  --st: var(--text-dim);
  --st-soft: var(--panel-raised);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 16px; border-radius: 999px;
  border: 2px solid var(--st); background: var(--st-soft);
  box-shadow: var(--shadow-sm);
}
.lead-status-head:has(option[value="new"]:checked)       { --st: var(--info);    --st-soft: var(--info-soft); }
.lead-status-head:has(option[value="contacted"]:checked) { --st: var(--warn);    --st-soft: var(--warn-soft); }
/* Violet rather than the brand orange — amber "Contacted" and orange
   "Follow-up" were too close to tell apart at a glance. */
.lead-status-head:has(option[value="follow_up"]:checked) { --st: #7c3aed; --st-soft: rgba(124, 58, 237, .14); }
.lead-status-head:has(option[value="converted"]:checked) { --st: var(--success); --st-soft: var(--success-soft); }
.lead-status-head:has(option[value="dead"]:checked)      { --st: var(--danger);  --st-soft: var(--danger-soft); }

.lead-status-head::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--st); flex: none;
}
.lead-status-head label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st); opacity: .8;
}
.lead-status-head select {
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  padding: 2px 4px 2px 0; min-width: 130px;
  border: 0; background: transparent; color: var(--st); cursor: pointer;
}
.lead-status-head select:focus { outline: none; }
.lead-status-head:focus-within { box-shadow: 0 0 0 4px var(--st-soft), var(--shadow-sm); }
/* The options themselves render on the browser's own menu surface. */
.lead-status-head select option { color: var(--text); background: var(--panel); font-weight: 600; }

/* Lead detail in two columns — the fields a quote needs on the left, the
   policy it produces on the right, so an agent reads across not down. Each
   column flows on its own so uneven section heights don't leave gaps. */
.lead-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
.lead-col { min-width: 0; }
@media (max-width: 1100px) { .lead-cols { grid-template-columns: 1fr; gap: 0; } }

/* Riders attached to the lead's policy — driven by the policy type, and
   pre-ticked with the benefit amount and price when they came from a quote. */
.lead-section__sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin: 4px 0 8px;
}
.lead-riders { display: flex; flex-direction: column; gap: 6px; }
.lead-rider {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 9px 11px; cursor: pointer; font-size: 12.5px;
}
.lead-rider:hover { border-color: var(--border-strong); }
.lead-rider--on { border-color: var(--blue); background: var(--blue-soft); }
.lead-rider input[type="checkbox"] { width: auto; margin: 0; }
.lead-rider__label { color: var(--text); }
.lead-rider__cost {
  font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Carrier application links (lead page). Card-style rows rather than buttons:
   these open an external portal in a new tab, which is a heavier action than
   the in-page buttons around them and should not look identical to them. */
.carrier-links { display: flex; flex-direction: column; gap: 8px; }
.carrier-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 11px 13px; text-decoration: none; background: var(--panel);
  transition: border-color .12s ease, background .12s ease;
}
.carrier-link:hover { border-color: var(--accent); background: var(--panel-raised); }
.carrier-link__name { font-size: 13px; font-weight: 700; color: var(--heading); }
.carrier-link__product { font-size: 11.5px; color: var(--text-mute); }
/* Arrow marks these as leaving the app, without needing an icon asset. */
.carrier-link__name::after { content: " ↗"; color: var(--text-mute); font-weight: 500; }
/* Product-line grouping within the carrier applications section. The last
   group drops its bottom margin so the hint below sits tight to it. */
.carrier-group { margin-bottom: 16px; }
.carrier-group:last-of-type { margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   Sales report. Closes get their own page, so they get their own furniture:
   white KPI cards (like the Analysis page, not the colored dashboard tiles),
   a close row that reads as a record rather than a table row, and a hand-rolled
   dual-axis SVG chart.
   --------------------------------------------------------------------------- */
.sales-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sales-controls .field { margin: 0; width: auto; min-width: 150px; }
.sales-controls .field label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }

.sales-search { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.sales-search .field { margin: 0; }
.sales-search .field label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }

/* Lead type-ahead under the "Search leads" box. */
.sales-typeahead {
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xs);
  box-shadow: 0 8px 24px rgba(20,39,78,.14); max-height: 300px; overflow-y: auto;
}
.sales-typeahead button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font-family: inherit; font-size: 13px;
  padding: 9px 12px; cursor: pointer; color: var(--text);
}
.sales-typeahead button:hover { background: var(--panel-raised); }
.sales-typeahead__empty { padding: 12px; font-size: 12.5px; color: var(--text-mute); }

.sales-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.sales-kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.sales-kpi__label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.sales-kpi__value { font-size: 30px; font-weight: 800; color: var(--heading); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.sales-kpi__note { font-size: 11px; color: var(--text-mute); }
.sales-delta { font-size: 12px; font-weight: 700; }
.sales-delta.up { color: var(--success); }
.sales-delta.down { color: var(--danger); }

.sales-subbar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sales-inline { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.sales-inline input, .sales-inline select { margin: 0; width: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* One close. Details on the left, money and where the sale stands on the right. */
.sales-close {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.sales-close:last-child { border-bottom: none; }
.sales-close.is-cancelled { opacity: .55; }
.sales-close.is-cancelled .sales-close__premium { text-decoration: line-through; }
.sales-close__main { min-width: 0; }
.sales-close__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sales-close__phone { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
.sales-close__meta { font-size: 11.5px; color: var(--text-mute); }
.sales-close__side { text-align: right; flex-shrink: 0; }
.sales-close__premium { font-size: 15px; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.sales-close__eff { font-size: 10.5px; letter-spacing: .04em; color: var(--text-mute); margin: 2px 0 6px; }
.sales-close__seg { transform-origin: right center; }

/* A name that opens a record — a link, but inside a button for keyboard focus. */
.linklike {
  border: none; background: none; padding: 0; font-family: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--heading); cursor: pointer; text-align: left;
}
.linklike:hover { color: var(--accent); text-decoration: underline; }

.ta-r { text-align: right; }

.sales-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.sales-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sales-chart svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .sales-kpis, .sales-search { grid-template-columns: 1fr; }
  .sales-close { flex-direction: column; }
  .sales-close__side { text-align: left; }
}

/* Who a sale is credited to. Explicit and editable on the row, because the
   alternative — inferring it from the lead's current assignee — silently moved
   sales onto agents who never worked them. */
.sales-close__credit { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--text-mute); }
.sales-close__credit select {
  margin: 0; width: auto; height: auto; padding: 3px 22px 3px 7px;
  font-size: 11.5px; font-weight: 600; color: var(--text);
}

/* Account access on the agent detail page. The two controls do different things
   — disabling blocks sign-in, pausing only takes them out of the rotation — so
   each carries its own one-line explanation rather than a bare button. */
.access-actions { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.access-actions > div { max-width: 300px; }
.access-actions .main__subtitle { margin: 6px 0 0; }
/* A disabled account still shows on the Agents page, visibly greyed. */
.agent-card--disabled { opacity: .6; }
.agent-card--disabled .agent-card__avatar { filter: grayscale(1); }