:root {
  --brand: #c40808;
  --brand-dark: #9e0606;
  --brand-tint: #fdecec;
  --ink: #1c2330;
  --muted: #6b7280;
  --faint: #98a1b1;
  --line: #e5e7eb;
  --line-strong: #d5dae3;
  --bg: #f4f5f7;
  --card: #ffffff;
  --panel-2: #f7f8fb;
  /* Semantic state colours — deliberately NOT the red brand accent, so meaning reads at a glance. */
  --ok: #148f4b;      --ok-tint: #e7f4ec;
  --warn: #bd6a06;    --warn-tint: #fbefdd;
  --parked: #5a6472;  --parked-tint: #edeff3;
  --ready: #2563eb;   --ready-tint: #e8effc;
}
/* Shared inline-SVG icon sizing (line icons in the top bar + command bar). */
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
* { box-sizing: border-box; }
/* Stop iOS Safari / Android Chrome from auto-inflating ("font boosting") long unbreakable text
   runs — e.g. an 11-digit phone number in a table cell was rendering ~2-3x its 12px size on mobile,
   which also blew out the Mobile column width. Pinning this makes fonts render exactly as authored. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The `hidden` attribute must always win — author `display` rules (e.g. .drawer{display:flex})
   otherwise override the UA [hidden]{display:none} and the panel never hides. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif; font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 22px; padding: 0 20px; height: 56px;
  background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { height: 24px; }
.brand-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--brand); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav button {
  position: relative; border: none; background: none; padding: 9px 13px; border-radius: 8px; color: var(--muted);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav button:hover { background: var(--panel-2); color: var(--ink); }
/* One consistent active style: brand text + a thin underline (no filled pill). */
.nav button.active { color: var(--brand); background: none; }
.nav button.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -8px; height: 2.5px; border-radius: 2px; background: var(--brand);
}
/* Secondary sections live in the More ▾ menu — hidden from the bar but kept in the DOM. */
.nav .more-item { display: none !important; }
.nav-more { display: inline-flex; align-items: center; gap: 5px; }
.nav-more .caret { font-size: 10px; color: var(--faint); }
.nav-more.active .caret { color: var(--brand); }

.who { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Square icon buttons (Configuration gear, etc.). */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 9px; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn.active { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
/* Account chip: avatar + email/role, opens the Change-password / Sign-out menu. */
.user-chip { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; max-width: 260px; }
.user-chip:hover { border-color: var(--line-strong); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; text-transform: uppercase; }
.user-chip .user-meta { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.user-chip .u-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.user-chip .u-role { font-size: 11px; color: var(--muted); line-height: 1.2; }
.user-chip .chev-sm { font-size: 10px; color: var(--faint); flex: none; }
/* Cross-app switch button (→ Agent Dashboard) — sits beside the Configuration gear. */
.switch-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.switch-btn:hover { border-color: var(--brand); color: var(--brand); }
.switch-btn .ico { width: 15px; height: 15px; }
.hide { display: none !important; }

/* View shell — every view's filter row is now the shared .cmdbar command bar (see the Distribution
   Center section); the old flat .toolbar was retired when the pipeline/sales/performance filters
   moved into command bars. */
.view { padding: 18px 20px 40px; }

/* Pipeline / Distribution stat cards are now the semantic .kpi cards (see the KPI-band section
   below), laid out by .kpi-row (single row) or .kpi-band (grouped). The old .stat/.dc-overview
   cards were superseded by the Distribution Center redesign. */

/* ---- Tables (one shared style for pipeline / distribution / performance / team) ---- */
/* Advisors' "Show stopped leads" toggle — sits above the pipeline table, only for roles that have a
   work-queue default (managers see everything and never get it). */
.stopped-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); margin: 0 0 8px; cursor: pointer; user-select: none; }
.stopped-toggle input { cursor: pointer; }
/* Same reason .pick-n carries one: inline-flex would otherwise beat the [hidden] attribute. */
.stopped-toggle[hidden] { display: none; }
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table.leads { width: 100%; border-collapse: collapse; font-size: 13px; }
table.leads th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  color: var(--muted); padding: 9px 14px; background: #fafafa; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.leads td { padding: 10px 14px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; font-size: 13px; color: var(--ink); }
table.leads tr:last-child td { border-bottom: none; }
table.leads tbody tr { cursor: pointer; }
table.leads tbody tr:hover { background: #fafbfc; }
/* Newly-assigned lead — green highlight until the advisor takes their first action. */
table.leads tbody tr.row-new { background: var(--ok-tint); }
table.leads tbody tr.row-new:hover { background: #dcf0e4; }
table.leads tbody tr.row-new td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
/* Denser distribution table (13 columns): shrink to fit a normal laptop screen without a
   horizontal scroll — tighter padding + font, and cap the free-text columns so they don't hog
   width. The wrapper still scrolls on genuinely narrow screens (phones). */
table.leads.dist { min-width: 900px; font-size: 12.5px; }
table.leads.dist th, table.leads.dist td { padding: 8px 9px; }
table.leads.dist th { letter-spacing: 0; }
/* Free-text columns (Student, Diploma, Last comment) truncate with ellipsis; hover shows full via title. */
table.leads.dist .cust-name { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.leads.dist .cell-trunc { max-width: 124px; }
table.leads.dist td.mini, table.leads.dist td.muted { white-space: nowrap; }
table.leads.dist .badge { padding: 2px 7px; font-size: 11.5px; }
/* Keep the phone column compact so a number can't stretch it (belt-and-suspenders with the
   text-size-adjust pin that stops mobile font-boosting). */
/* Cap the phone column so a lead with TWO numbers ("A / B") can't stretch it: fix the width and
   let it wrap (each number lands on its own line) instead of forcing the column wide with nowrap. */
table.leads.dist .col-mobile, table.leads.dist td.cell-mobile { width: 116px; }
table.leads.dist td.cell-mobile { white-space: normal; }
/* Clickable Created / Updated headers → quick sort, with a direction caret. */
table.leads th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.leads th.sortable:hover, table.leads th.sorted { color: var(--ink); }
.sort-caret { font-size: 9px; color: var(--muted); opacity: .5; margin-inline-start: 3px; }
table.leads th.sortable:hover .sort-caret { opacity: .8; }
table.leads th.sorted .sort-caret { color: var(--brand); opacity: 1; }
.cust-name { font-weight: 600; color: var(--ink); }
.cust-phone { color: var(--muted); font-size: 12px; margin-top: 2px; direction: ltr; }
.muted { color: var(--muted); }
.mini { color: var(--muted); font-size: 12px; }
.cell-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
/* "Nothing matched" and "this failed to load" must not look the same — the second is a warning, and
   reading it as the first turns a broken report into a business conclusion. */
.empty.empty-error { color: #8a1c1c; background: #fdf3f3; border-radius: 10px; font-weight: 600; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.s-pending { background: #eef2ff; color: #4338ca; }
.s-call_back { background: #fff7ed; color: #c2410c; }
.s-pre_qualified { background: #ecfdf5; color: #047857; }
.s-call_scheduled { background: #eff6ff; color: #1d4ed8; }
.s-not_reached { background: #fef2f2; color: #b91c1c; }
.s-will_call_us { background: #fefce8; color: #a16207; }
.s-closed_lost { background: #f3f4f6; color: #6b7280; }
.s-closed_junk { background: #f3f4f6; color: #9ca3af; }
.s-closed_won { background: #dcfce7; color: #15803d; }
.s-existing_customer { background: #f5f3ff; color: #6d28d9; }
.d-available { background: #ecfeff; color: #0e7490; }
.d-assigned { background: #eef2ff; color: #4338ca; }
.d-pending_review { background: #fff7ed; color: #c2410c; }
.d-stop { background: #f3f4f6; color: #6b7280; }
/* Payment-link hold: the lead is waiting on the customer, not on an advisor. */
.hold-pay { background: #fef3c7; color: #92400e; }
.pill { background: #f3f4f6; color: #4b5563; }

/* Drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(20,24,35,.35); z-index: 30; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 460px; max-width: 96vw; background: #fff;
  z-index: 31; box-shadow: -12px 0 40px rgba(20,24,35,.18); display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
/* Name/contact take the free space so the call button lands top-right on the name's line; min-width:0
   lets a long name ellipsis instead of shoving the button off. */
.dh-info { flex: 1 1 auto; min-width: 0; }
.dh-name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-sub { color: var(--muted); font-size: 13px; margin-top: 3px; direction: ltr; }
.dh-call { flex: none; }
.dh-call:empty { display: none; }
.drawer-head #drawerClose { flex: none; border: none; background: none; font-size: 18px; color: var(--muted); }
.drawer-body { padding: 16px 18px; overflow-y: auto; }

.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin-bottom: 16px; }
.kv .k { color: var(--muted); font-size: 12px; }
.kv .v { font-size: 13px; }
.section-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 4px 0 8px; }
.summary-box { background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
/* Logical padding so RTL (Arabic) summaries put the bullet on the right; dir="auto" on the <ul>/<li>
   flips direction per content. */
/* Markers INSIDE the box (list-style-position: inside) so they never hang outside the border —
   critical for RTL/Arabic, where an "outside" marker protrudes past the right edge. Inside works
   for both directions: the bullet sits at the text's start (right for Arabic, left for English). */
.summary-bullets { background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 0 0 18px; font-size: 13px; line-height: 1.55; list-style-position: inside; }
.summary-bullets li { margin-bottom: 4px; padding-inline-start: 2px; }
.summary-bullets li:last-child { margin-bottom: 0; }
.owner-hist { list-style: none; margin: 0 0 18px; padding: 0; }
.owner-hist li { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #f1f2f4; }
.owner-hist li:last-child { border-bottom: none; }

/* Timeline */
/* "Your last comment" — the viewer's own most recent note, shown above the timeline. Tinted and
   left-barred so it reads as a callout rather than a first timeline entry. */
.last-comment { border-left: 3px solid var(--brand); background: var(--tint, rgba(196,8,8,.04));
  border-radius: 0 6px 6px 0; padding: 8px 10px; margin: 0 0 14px; }
.lc-meta { font-size: 11px; color: var(--muted); font-weight: 600; }
.lc-text { font-size: 13px; margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.tl-item { position: relative; padding: 0 0 16px 16px; }
.tl-item::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.tl-item.k-ai_summary::before { background: #6366f1; }
.tl-item.k-status_change::before { background: #f59e0b; }
.tl-item.k-call::before { background: #10b981; }
.tl-meta { font-size: 12px; color: var(--ink); }
.tl-who { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tl-who b { color: var(--ink); font-weight: 600; }
.tl-ext { font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.tl-text { font-size: 13px; margin-top: 3px; white-space: pre-wrap; }
.tl-kind { font-weight: 600; }
/* A reviewed call, marked green (AMIT, B5) so a manager scanning a lead can see which recordings a
   colleague has already been through without opening each one. */
.tl-item.tl-reviewed .tl-kind { color: var(--ok); }
.tl-item.tl-reviewed::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.tl-reviewed-by { margin-top: 4px; font-size: 11px; color: var(--ok); background: var(--ok-tint);
  border-radius: 4px; padding: 3px 7px; display: inline-block; line-height: 1.5; }
.tl-reviewed-by b { font-weight: 600; }

/* ---- Advisor Manager Report: the advisor strip above the detailed rows ---- */
.rv-adv { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rv-adv button { border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--ink); }
.rv-adv button:hover { border-color: var(--brand); }
.rv-adv button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.rv-adv button b { font-weight: 700; }
.rv-adv button .rv-inactive { color: var(--muted); font-style: italic; }
.rv-adv button.active .rv-inactive { color: #e5e7eb; }
.rv-note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
/* Requirement §2: every summary number opens its detail, so every one of them has to LOOK like it. */
.perf-summary .ps-cell.ps-click { cursor: pointer; }
.perf-summary .ps-cell.ps-click b { color: var(--brand); text-decoration: underline dotted; text-underline-offset: 3px; }
.perf-summary .ps-cell.ps-click:hover { border-color: var(--brand); }
.perf-summary .ps-cell.ps-click:hover b { text-decoration: underline solid; }
.perf-summary .ps-cell.ps-click:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tl-item.k-assignment::before { background: #0ea5e9; }
/* The lead's origin — the one entry that is a milestone rather than an action, so it gets
   its own colour instead of borrowing the comment grey and disappearing into the list. */
.tl-item.k-created::before { background: #8b5cf6; }
.tl-audio { width: 100%; height: 34px; margin-top: 6px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1c2330; color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13px; z-index: 40; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.placeholder { text-align: center; color: var(--muted); padding: 80px 20px; }
.placeholder h2 { color: var(--ink); }

/* Team management */
.team-add { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.team-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Fixed height (not padding) so the role <select> matches the <input> boxes exactly — a native select
   otherwise computes a shorter box than a padded input. Checkboxes (the Assign-leads toggle) opt out. */
.team-form input:not([type=checkbox]), .team-form select {
  height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: #fff;
}
.team-form input:focus, .team-form select:focus { outline: none; border-color: var(--brand); }
.tm-msg { color: #b91c1c; font-size: 12px; margin-top: 8px; min-height: 16px; }
.team-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.team-toolbar input, .team-toolbar select { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 13px; font-family: inherit; background: #fff; color: var(--ink); }
.team-toolbar input { flex: 1 1 240px; min-width: 180px; }
.team-toolbar input:focus, .team-toolbar select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* Cap the team table's height so many members scroll INSIDE the card, and pin the header row so it
   stays visible for the lower records (the wrap is already a scroll container via overflow-x). */
#view-team .table-wrap { max-height: max(240px, calc(100vh - 300px)); overflow-y: auto; }
#view-team table.leads thead th { position: sticky; top: 0; z-index: 2; }
#teamRows select, #teamRows input[type=number] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; font-family: inherit; }
/* Row action buttons (Edit / Reset password / Delete): one tidy aligned group, never stacked. */
.row-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.row-actions .btn-sm { white-space: nowrap; }
#teamRows input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); }

/* Buttons */
.btn-primary { background: var(--brand); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { background: #d9a0a0; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; padding: 9px 16px; font-size: 13px; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

/* Auto-assign switch */
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.switch input { width: 15px; height: 15px; accent-color: var(--brand); }

/* Bulk-action bar */
.bulk-bar { display: flex; align-items: center; gap: 8px; background: #fdecec; border: 1px solid #f3c6c6; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.bulk-bar .grow { flex: 1; }
table.leads th.chk, table.leads td.chk { width: 30px; text-align: center; }
table.leads input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* Distribution table density */
a.rec-link { color: var(--brand); text-decoration: none; font-size: 15px; }

/* Row actions: one compact ⋯ button that opens a menu (keeps the wide table tidy). The action column
   is tight — just the ⋯ button; cells with no available action (e.g. a Pending-Review lead the viewer
   may not touch) are simply left blank rather than showing a lock. */
.act-col { width: 44px; text-align: center; }
.act-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px; width: 28px; height: 26px; color: var(--muted); font-size: 15px; line-height: 1; padding: 0; }
.act-btn:hover { border-color: var(--brand); color: var(--brand); }
.row-menu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,24,35,.18); padding: 5px; min-width: 150px; }
.row-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.row-menu button:hover { background: #f3f4f6; }
.row-menu button.danger:hover { background: #fef2f2; color: #b91c1c; }

/* Drawer action panels */
.act-panel { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.locked-note { padding: 12px 14px; border-radius: 9px; background: var(--warn-tint); color: var(--warn); font-size: 13px; font-weight: 600; }
.act-panel label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.act-panel select, .act-panel textarea, .act-panel input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; margin-bottom: 8px;
}
.act-panel textarea { min-height: 56px; resize: vertical; }
.act-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* In-CRM call panel (softphone popup) */
.call-panel {
  position: fixed; right: 22px; bottom: 22px; width: 236px; z-index: 4000;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .22); padding: 14px 14px 12px;
  font-size: 14px; color: var(--ink);
}
.call-panel .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-panel .cp-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-panel .cp-x { background: none; border: none; cursor: pointer; color: var(--faint); font-size: 15px; line-height: 1; }
.call-panel .cp-num { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.call-panel .cp-status { display: flex; align-items: center; gap: 7px; margin: 11px 0 9px; }
.call-panel .cp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex: none; }
.call-panel.is-live .cp-dot { background: var(--ok); animation: cp-pulse 1.2s infinite; }
.call-panel.is-ended .cp-dot { background: var(--parked); animation: none; }
.call-panel .cp-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.call-panel .cp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.call-panel .cp-key {
  padding: 9px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  cursor: pointer; font-size: 15px; color: var(--ink); transition: background .1s;
}
.call-panel .cp-key:hover { background: var(--line); }
.call-panel .cp-key.pressed { background: var(--brand-tint); border-color: var(--brand); }
.call-panel .cp-key:disabled, .call-panel .cp-hangup:disabled { opacity: .45; cursor: not-allowed; }
.call-panel .cp-hangup {
  width: 100%; padding: 9px; border: none; border-radius: 10px; background: var(--brand);
  color: #fff; cursor: pointer; font-weight: 700; font-size: 14px;
}
.call-panel .cp-hangup:hover:not(:disabled) { background: var(--brand-dark); }
/* Extension registration pill — green (registered) / amber (unreachable) / red (no phone) / grey (unknown) */
.call-panel .cp-reg {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg); max-width: 100%;
}
.call-panel .cp-reg .reg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-panel .cp-reg .reg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--parked); flex: none; }
.call-panel .cp-reg.reg-ok   { color: var(--ok);    background: var(--ok-tint);     border-color: transparent; }
.call-panel .cp-reg.reg-ok   .reg-dot { background: var(--ok); }
.call-panel .cp-reg.reg-warn { color: var(--warn);  background: var(--warn-tint);   border-color: transparent; }
.call-panel .cp-reg.reg-warn .reg-dot { background: var(--warn); }
.call-panel .cp-reg.reg-bad  { color: var(--brand); background: var(--brand-tint);  border-color: transparent; }
.call-panel .cp-reg.reg-bad  .reg-dot { background: var(--brand); animation: cp-pulse 1.2s infinite; }
.call-panel .cp-reg.reg-unk  { color: var(--muted); background: var(--parked-tint); border-color: transparent; }
/* Specific failure reason shown under the status line */
.call-panel .cp-msg {
  display: none; margin: 2px 0 10px; padding: 8px 10px; border-radius: 9px;
  background: var(--brand-tint); color: var(--brand-dark); font-size: 12px; line-height: 1.35;
}
.call-panel.is-failed .cp-state { color: var(--brand); font-weight: 700; }
.call-panel.is-failed .cp-dot { background: var(--brand); animation: none; }
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Inbound screen-pop — a prominent centred modal announcing who's calling my extension */
.incoming-modal {
  position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 24, 35, .38); animation: im-fade .15s ease-out;
}
.incoming-modal .im-card {
  position: relative; width: 380px; max-width: 92vw; background: var(--card); color: var(--ink);
  border-radius: 18px; border-top: 5px solid var(--ok); padding: 26px 26px 22px; text-align: center;
  box-shadow: 0 24px 70px rgba(17, 24, 39, .34); animation: im-pop .18s ease-out;
}
.incoming-modal .im-x { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; color: var(--faint); font-size: 17px; line-height: 1; }
.incoming-modal .im-ring { font-size: 40px; line-height: 1; display: inline-block; }
.incoming-modal .im-ring.is-ringing { animation: ip-shake 1s infinite; }
.incoming-modal .im-h { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.incoming-modal .im-h.im-live { color: var(--ok); }
.incoming-modal .im-h.im-done { color: var(--parked); }
.incoming-modal .im-timer { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.incoming-modal .im-name { margin-top: 8px; font-size: 24px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-modal .im-num { margin-top: 3px; font-size: 15px; color: var(--muted); }
.incoming-modal .im-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.incoming-modal .im-btn { padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid var(--line-strong); }
.incoming-modal .im-primary { background: var(--ok); color: #fff; border-color: transparent; }
.incoming-modal .im-danger { background: var(--brand); color: #fff; border-color: transparent; }
.incoming-modal .im-ghost { background: var(--card); color: var(--ink); }
.incoming-modal .im-hint { margin-top: 12px; font-size: 12px; color: var(--muted); }
/* Docked = a non-blocking corner card (bottom-left, clear of a right-side lead drawer + the bottom-right
   click-to-call panel) so the advisor can scroll/edit the drawer behind it while the call is live. */
.incoming-modal.docked { pointer-events: none; background: none; display: block; animation: none; }
.incoming-modal.docked .im-card {
  pointer-events: auto; position: fixed; left: 22px; bottom: 22px; width: 264px; padding: 16px 18px 14px;
  animation: im-in-corner .18s ease-out;
}
.incoming-modal.docked .im-ring { font-size: 26px; }
.incoming-modal.docked .im-name { font-size: 17px; margin-top: 4px; }
.incoming-modal.docked .im-num { font-size: 13px; }
.incoming-modal.docked .im-actions { margin-top: 12px; }
@keyframes im-in-corner { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes im-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-pop { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ip-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,24,35,.4); z-index: 50; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 380px; max-width: 94vw; background: #fff; border-radius: 14px; z-index: 51; box-shadow: 0 24px 60px rgba(20,24,35,.3); }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
.modal-head button { margin-left: auto; border: none; background: none; font-size: 16px; color: var(--muted); }
/* Cap the height so a tall modal scrolls INSIDE itself. The modal is centred with translate(-50%,-50%),
   so without this an over-tall body (the Distribute-pool preview on a big team) spills past both edges
   of the viewport with no way to reach it. Short modals are unaffected — they never hit 70vh. */
.modal-body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
.modal-body label { font-size: 12px; color: var(--muted); display: block; margin: 6px 0 4px; }
.modal-body input, .modal-body select, .modal-body textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { outline: none; border-color: var(--brand); }
.modal { max-height: 88vh; overflow-y: auto; }
/* Opt-in wide variant for list/table modals (e.g. the updated-leads drill-down); cleared by closeModal. */
/* max-width:94vw on .modal still applies, so this can't overflow a narrow screen. */
.modal.modal-wide { width: 1060px; }
.modal-body textarea { min-height: 60px; resize: vertical; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* Chat transcript modal (the "View chat" link from a lead) */
.chat-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 560px; max-width: 94vw; max-height: 84vh; background: #fff; border-radius: 14px; z-index: 51; box-shadow: 0 24px 60px rgba(20,24,35,.3); display: flex; flex-direction: column; }
.chat-modal .modal-head { flex: 0 0 auto; }
.chat-body { padding: 16px 18px; overflow-y: auto; }
.chat-msg { max-width: 82%; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.chat-msg.user { background: #f1f3f5; color: var(--ink); margin-right: auto; border-bottom-left-radius: 4px; }
.chat-msg.assistant { background: #fdecec; color: #7a0505; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-role { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
/* Agent messages render Markdown (mirrors dashboard's .tx-bubble.md) — customer .chat-text keeps pre-wrap. */
.chat-text.md { white-space: normal; }
.chat-text.md > :first-child { margin-top: 0; }
.chat-text.md > :last-child { margin-bottom: 0; }
.chat-text.md p { margin: 0 0 6px; }
.chat-text.md ul, .chat-text.md ol { margin: 6px 0; padding-inline-start: 20px; }
.chat-text.md li { margin: 2px 0; }
.chat-text.md h1, .chat-text.md h2, .chat-text.md h3, .chat-text.md h4 { margin: 6px 0 4px; font-size: 13px; font-weight: 700; }
.chat-text.md a { color: var(--brand); text-decoration: underline; word-break: break-word; }
.chat-text.md code { background: rgba(0,0,0,.08); padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.chat-text.md del { opacity: .7; }
.chat-text.md table { display: block; overflow-x: auto; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.chat-text.md th, .chat-text.md td { border: 1px solid var(--line); padding: 4px 7px; text-align: start; vertical-align: top; }
.chat-text.md th { background: rgba(0,0,0,.04); font-weight: 600; }
.chat-summary-link { font-size: 12px; color: var(--brand); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-transform: none; letter-spacing: 0; margin-left: 8px; font-weight: 600; }

/* ==================== Distribution Center — command bar / KPI band / advisor grid ==================== */
/* One cohesive command bar: search (grows) → grouped filter cluster → right-aligned actions. */
.cmdbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 1px 2px rgba(20,26,40,.05); margin-bottom: 18px;
}
.cmdbar .search { position: relative; flex: 1 1 240px; min-width: 190px; }
.cmdbar .search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.cmdbar .search input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: #fff; color: var(--ink); font-size: 13px; font-family: inherit;
}
.cmdbar .search input::placeholder { color: var(--faint); }
.cmdbar .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* Five dropdowns fused into ONE control instead of five scattered boxes. */
.filter-group { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; overflow: hidden; }
.filter-group .sel { position: relative; display: flex; align-items: center; }
.filter-group .sel + .sel { border-left: 1px solid var(--line); }
.filter-group select {
  -webkit-appearance: none; appearance: none; border: none; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 28px 9px 12px; cursor: pointer;
}
.filter-group select:focus { outline: none; background: var(--panel-2); }
.filter-group .sel .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--faint); pointer-events: none; }
.filter-group .sel.strong select { color: var(--brand); }
.cmdbar .reset { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 8px 8px; border-radius: 7px; }
.cmdbar .reset:hover { color: var(--brand); background: var(--brand-tint); }
.cmdbar .spacer { flex: 1 1 auto; }
/* Forces the following control onto a new line of the wrapping bar (zero-height full-width flex
   item). Used by the Distribution Center, whose bar cannot fit on one row at any realistic width —
   breaking on purpose beats letting it wrap wherever it runs out and orphan the last button. */
.cmdbar .cmd-break { flex: 0 0 100%; height: 0; margin: 0; }
/* margin-left:auto as well as the .spacer: once the bar wraps (the Distribution Center's filters +
   date range fill a row on their own) the spacer ends up on the previous line, and without this the
   actions would sit alone at the LEFT of the new row instead of staying right-aligned. */
.cmdbar .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
/* Named .cbtn* (NOT .act-btn — that's the table's compact ⋯ row-action button). flex:0 0 auto so the
   buttons keep their full width and never shrink/overlap when the bar gets tight. */
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; border-radius: 9px; font-size: 13px; font-weight: 600; padding: 9px 15px; border: 1px solid transparent; white-space: nowrap; }
.cbtn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.cbtn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.cbtn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(196,8,8,.3); }
.cbtn-primary:hover { background: var(--brand-dark); }
/* Square icon-only command-bar button (Refresh ↻) — matches the .cbtn height, stays compact. */
.cbtn-icon { width: 38px; padding: 9px 0; font-size: 16px; color: var(--muted); background: #fff; border-color: var(--line-strong); }
.cbtn-icon:hover { border-color: var(--brand); color: var(--brand); }
/* A muted result count that can sit inside the command bar, before the actions. */
.cmdbar .count { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; }
/* Date-range cluster (Advisor Performance) — a fused control echoing .filter-group. */
.daterange { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; padding: 4px 10px; flex-wrap: wrap; }
.daterange .dr-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.daterange .dr-sep { color: var(--faint); font-size: 13px; }
.daterange input[type=date] { border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 5px 2px; }
/* "Any date" over an EMPTY date box. What a browser draws for an empty date input is its own choice —
   Chrome writes dd/mm/yyyy, other browsers draw TODAY'S DATE in grey — and a box that reads 16/09/2026
   looks exactly like a filter somebody applied, on a screen whose whole job is showing which leads
   match. Reported on both environments, in a fresh private window. The cover is painted over the
   browser's version and says the one thing that is true: no date is set. It is pointer-events:none, so
   clicking still opens the native picker, and it lifts on focus and the moment a date exists. */
.daterange .dr-in { position: relative; display: inline-flex; align-items: center; }
.daterange .dr-any {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-start;
  padding: 0 2px; background: #fff; color: var(--faint); font-size: 12.5px; font-weight: 600;
  pointer-events: none; white-space: nowrap;
}
.daterange .dr-in.is-empty .dr-any { display: flex; }
.daterange .dr-in.is-empty:focus-within .dr-any { display: none; }
.daterange input[type=date]:focus { outline: none; }
.daterange:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* A field picker fused INTO the date range (Distribution Center: "Created At | Updated At" + window).
   Reuses .filter-group's select styling, separated by a rule so it reads as one control. */
.daterange .dr-field { position: relative; display: flex; align-items: center; border-right: 1px solid var(--line); margin: -4px 4px -4px -10px; padding-left: 4px; }
.daterange .dr-field select { -webkit-appearance: none; appearance: none; border: none; background: transparent; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 24px 9px 8px; cursor: pointer; }
.daterange .dr-field select:focus { outline: none; }
.daterange .dr-field .chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--faint); pointer-events: none; }
/* Table footer: "showing N of M" + Load more. Always visible once a table is paged, so a capped page
   never passes for the whole result set. */
.table-foot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 4px; }
/* The command bar's right-hand cluster. It had no rule while it held a single button; "Select first N"
   now sits beside that button, so it needs to be a row rather than two stacked blocks. */
.cmdbar .actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* "Select first N". Borrows .daterange's bordered pill so the label, the number and the action read as
   ONE control among the other filters, not three loose elements.
   The [hidden] rule is required: inline-flex would otherwise beat the attribute and show it. */
.pick-n { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; padding: 4px 10px; }
.pick-n[hidden] { display: none; }
.pick-n input { width: 62px; border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 5px 2px; }
.pick-n input:focus { outline: none; }
/* Inline text button (e.g. "Select all N matching") — a link that acts, inside a bar of buttons. */
.link-btn { background: none; border: none; padding: 0 2px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--brand-dark); }
.link-btn[hidden] { display: none; }
/* Section header carrying its own actions, top-right (Settings → Distribution). */
.settings-h-row { display: flex; align-items: center; gap: 12px; }
.settings-h-row > span:first-child { flex: 1 1 auto; }
.settings-h-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .settings-h-row { flex-wrap: wrap; }
  .settings-h-actions { width: 100%; }
  .settings-h-actions .cbtn { flex: 1 1 auto; }
}

/* The distribution algorithm, stated on the page rather than hidden in a tooltip (#tipPop renders
   with textContent, so a list in a data-tip collapses into one unreadable paragraph). */
.algo-box { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px;
  background: var(--panel-2); padding: 13px 16px; margin: 12px 0 18px; }
.algo-h { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.algo-lede { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.algo-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.85; color: var(--ink); }
.algo-list li::marker { font-weight: 800; color: var(--brand); }
.algo-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.algo-note b { color: var(--ink); }

/* ---- Distribute pool preview (read-only dry run) ---- */
.prev-lede { font-size: 13.5px; margin: 0 0 10px; }
.prev-notes { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.prev-notes b { color: var(--ink); }
.prev-table th.num, .prev-table td.num { text-align: right; white-space: nowrap; }
.prev-table td.num.zero { color: var(--faint); }        /* a real 0, dimmed — not an empty cell */
.prev-table tr.row-zero td:first-child { color: var(--muted); }
.prev-table tfoot tr.tot td { border-top: 1px solid var(--line-strong); font-weight: 700; }
.prev-table .chip { margin-left: 6px; }
/* The preview modal prints the same list as the Settings panel (.algo-list), just tighter. */
.modal .algo-list { font-size: 12.5px; line-height: 1.7; margin: 6px 0 12px; }
.prev-ro { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* KPI band — six stats grouped by meaning: "Unassigned pool" | "With advisors". */
.kpi-band { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.kpi-block { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,26,40,.05); padding: 13px 15px 15px; }
.kpi-block .block-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.kpi-block .block-h .dot { width: 7px; height: 7px; border-radius: 50%; }
.kpi-block .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; }
.kpi:hover { border-color: var(--brand); transform: translateY(-1px); }
.kpi.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.kpi .k-top { display: flex; align-items: center; gap: 8px; }
.kpi .k-stripe { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.kpi .k-num { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .k-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi.is-zero .k-num { color: var(--faint); }
.kpi .k-tip { position: absolute; top: 9px; right: 10px; width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--faint); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kpi:hover .k-tip { color: var(--brand); border-color: var(--brand); }
/* Reuse the dark instant-tooltip from .stat, scoped to .kpi. */
.kpi[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 55;
  width: max-content; max-width: 230px; white-space: normal; text-align: left;
  background: #1c2330; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45;
  padding: 8px 10px; border-radius: 8px; box-shadow: 0 10px 28px rgba(20,24,35,.28); pointer-events: none;
}
.kpi-block:last-child .kpis .kpi:nth-last-child(-n+1)[data-tip]:hover::after { left: auto; right: 0; }

/* Semantic stripe / dot colours (shared by KPI band + table pills). */
.s-ok { background: var(--ok); } .s-warn { background: var(--warn); } .s-park { background: var(--parked); } .s-ready { background: var(--ready); }

/* Single-row KPI band (Leads pipeline) — same .kpi cards as the Distribution band, but ungrouped:
   an auto-fitting row of semantic stat cards that click through to a distribution filter. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* Advisor workload — a uniform card grid. */
.adv-section { margin-bottom: 8px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.section-head .meta { font-size: 12.5px; color: var(--muted); }
.section-head .meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.adv {
  display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(20,26,40,.05); cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.adv:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(20,26,40,.09); }
.adv.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.adv .adv-top { display: flex; align-items: center; gap: 10px; }
.adv .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: #fff; }
.adv .name { font-weight: 700; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv .role-tag { font-size: 9.5px; font-weight: 700; color: var(--brand); background: var(--brand-tint); border-radius: 5px; padding: 1px 5px; margin-left: 3px; white-space: nowrap; }
.adv .load-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.adv .load-n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adv .load-n .cap { color: var(--faint); font-weight: 600; }
.adv .pct { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adv .pct-lo { color: var(--ok); } .adv .pct-mid { color: var(--warn); } .adv .pct-hi { color: var(--brand); }
.adv .bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.adv .bar > i { display: block; height: 100%; border-radius: 4px; }
.adv .bar.load-lo > i { background: var(--ok); } .adv .bar.load-mid > i { background: var(--warn); } .adv .bar.load-hi > i { background: var(--brand); }
.adv .chip { align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.adv .chip.ok { color: var(--ok); background: var(--ok-tint); }
.adv .chip.full { color: var(--brand); background: var(--brand-tint); }
.adv .chip.paused { color: var(--parked); background: var(--parked-tint); }
.adv.off { opacity: .66; }
.adv.off .av { background: var(--parked) !important; }

/* ============================ Responsive ============================ */
/* Dense tables must scroll inside their .table-wrap (which is overflow-x:auto), never squish the
   page. Give each a legibility floor so columns keep their width and the wrapper scrolls instead. */
#view-leads table.leads { min-width: 860px; }
#view-team table.leads { min-width: 780px; }
/* Was #view-performance, renamed with the view when both reports moved under the Reports tab. Kept at
   the same 640px: this id selector outranks table.leads.perf's 1050px floor, so it is what the Sales
   report has actually been using — the cells are nowrap, so content sets the real width anyway. */
#view-reports table.leads { min-width: 640px; }

/* Tablet */
@media (max-width: 900px) {
  .view { padding: 16px 14px 40px; }
  .topbar { gap: 14px; padding: 0 14px; }
}

/* Phone */
@media (max-width: 720px) {
  /* Top bar: brand + account on the first row, a horizontally-scrollable nav on its own row. */
  .topbar { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .brand { order: 1; flex: 0 0 auto; }
  .who { order: 2; margin-left: auto; min-width: 0; gap: 6px; }
  /* Collapse the account chip to just the avatar so it never crowds the row. */
  .user-chip { padding: 3px; }
  .user-chip .user-meta, .user-chip .chev-sm { display: none; }
  /* Switch button collapses to just its grid icon on phones. */
  .switch-btn { padding: 0 9px; }
  .switch-btn span { display: none; }
  .nav {
    order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { white-space: nowrap; padding: 7px 12px; }

  .view { padding: 14px 10px 40px; }

  /* Command bar (every view): search full width, filter cluster wraps two-per-row, the date-range
     cluster and actions share full-width rows so nothing gets clipped past the edge. */
  .cmdbar { gap: 8px; }
  .cmdbar .search { flex: 1 1 100%; }
  .filter-group { width: 100%; flex-wrap: wrap; }
  .filter-group .sel { flex: 1 1 calc(50% - 1px); }
  .filter-group .sel select { width: 100%; }
  .filter-group .sel + .sel { border-left: none; }
  .daterange { width: 100%; justify-content: space-between; }
  /* The diploma multiselect goes full width like every other filter here, and its panel anchors to
     that full-width control. THIS IS A REAL BUG FIX, not tidying: on desktop the panel is anchored
     RIGHT because the control sits at the right of a wide bar, but on a phone the bar is stacked and
     the control sits at the LEFT — so right-anchoring threw the 340px-wide panel ~173px off the LEFT
     edge of the screen and sliced every diploma name down its left side. Anchored to a full-width
     control it spans the bar exactly and cannot overflow either edge, at any phone width. */
  #dDiplomaMs { width: 100%; }
  #dDiplomaBtn { width: 100%; text-align: left; }
  #dDiplomaMenu { left: 0; right: auto; width: 100%; min-width: 0; max-width: none; }
  .cmdbar .count { width: 100%; }
  .cmdbar .spacer { display: none; }
  .cmdbar .actions { width: 100%; }
  .cmdbar .actions .cbtn-primary { flex: 1 1 auto; }

  /* KPI band stacks to one group per row. */
  .kpi-band { grid-template-columns: 1fr; }

  /* Team add-member form: stack fields full width. */
  .team-form { gap: 8px; }
  .team-form input, .team-form select, .team-form .switch, .team-form button { flex: 1 1 100%; width: 100%; }
  .team-form input[type=number] { width: 100% !important; }
}

/* Small phone */
@media (max-width: 460px) {
  .brand-tag { display: none; }
  .filter-group .sel { flex: 1 1 100%; }
  .filter-group .sel + .sel { border-top: 1px solid var(--line); }
  .kpi-block .kpis { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .kpi .k-num { font-size: 22px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}


/* ============================ Sales Leaderboard ============================ */
:root { --gold: #f5b301; --gold-2: #ffd75e; --silver: #a9b2bd; --bronze: #cd8c52; }
.lb-shell { max-width: 1200px; margin: 0 auto; }
.lb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lb-h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.lb-sub { color: var(--muted); font-size: 14px; margin-top: 2px; font-weight: 600; }
/* Sits beside the month name and spells out the 26th→25th rule, so a board that resets mid-month
   reads as intended rather than as a bug. Wraps under the name on a narrow screen. */
.lb-hint { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px; }
.lb-tools { display: flex; align-items: center; gap: 8px; }
.lb-updated { color: var(--muted); font-size: 12px; margin-right: 4px; }

/* MVP spotlight cards (day / week / month) */
.lb-mvps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.mvp { position: relative; border-radius: 16px; padding: 18px 18px 16px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #1c2330, #2c3446); box-shadow: 0 10px 26px rgba(20,24,35,.18); }
.mvp:nth-child(1) { background: linear-gradient(135deg, #d34a12, #f0872f); }
.mvp:nth-child(2) { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.mvp:nth-child(3) { background: linear-gradient(135deg, #b8860b, #f5b301); }
.mvp-ic { font-size: 26px; }
.mvp-l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; font-weight: 700; margin-top: 4px; }
.mvp-name { font-size: 22px; font-weight: 800; margin-top: 6px; line-height: 1.15; }
.mvp-rev { font-size: 18px; font-weight: 800; margin-top: 8px; }
.mvp-rev .cur, .lb-rev .cur, .pod-rev .cur { font-size: .62em; font-weight: 700; opacity: .8; }
.mvp-deals { font-size: 12px; opacity: .9; margin-top: 2px; }
.mvp.empty-mvp { background: #eef0f3; color: var(--muted); box-shadow: none; border: 1px dashed var(--line); }
.mvp.empty-mvp .mvp-l { opacity: 1; }

/* Podium — top 3 */
.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin-bottom: 22px; }
.pod { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px; text-align: center;
  box-shadow: 0 8px 22px rgba(20,24,35,.08); position: relative; }
.pod-1 { transform: translateY(14px); }         /* silver (left) sits lower */
.pod-2 { transform: translateY(22px); }         /* bronze (right) lowest */
.pod-0 { border-color: var(--gold); box-shadow: 0 12px 30px rgba(245,179,1,.28); background: linear-gradient(180deg, #fffdf5, #fff); }
.pod-medal { font-size: 30px; line-height: 1; }
.pod-av { width: 54px; height: 54px; border-radius: 50%; margin: 8px auto 6px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); font-size: 18px; }
.pod-0 .pod-av { width: 64px; height: 64px; font-size: 22px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #4a3a00; }
.pod-name { font-weight: 800; font-size: 16px; }
.pod-rev { font-weight: 800; font-size: 17px; margin-top: 4px; }
.pod-pct { color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.pod-base { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.pod.over { animation: glowpulse 2.2s ease-in-out infinite; }

/* Ranked board */
.lb-board { display: flex; flex-direction: column; gap: 10px; }
.lb-row { display: grid; grid-template-columns: 42px 44px 1fr auto; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.lb-row.over { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,179,1,.22); background: linear-gradient(180deg, #fffdf5, #fff); }
.lb-rank { font-size: 18px; font-weight: 800; text-align: center; color: var(--muted); }
.lb-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); font-size: 14px; }
.lb-nm { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.over-badge { font-size: 10px; font-weight: 800; color: #7a5200; background: var(--gold-2); padding: 2px 7px; border-radius: 999px; letter-spacing: .03em; margin-left: 6px; vertical-align: middle; }
.lb-bar { position: relative; height: 10px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.lb-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #ef5350); border-radius: 999px; transition: width .6s ease; }
.lb-bar > b { position: absolute; top: 0; left: 0; height: 100%; background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 6px, var(--gold-2) 6px, var(--gold-2) 12px); border-radius: 999px; opacity: .95; }
.lb-stats { text-align: right; }
.lb-rev { font-weight: 800; font-size: 17px; }
.lb-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.lb-note { margin-top: 16px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.linklike { background: none; border: none; color: var(--brand); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }

@keyframes glowpulse { 0%,100% { box-shadow: 0 0 0 2px rgba(245,179,1,.22); } 50% { box-shadow: 0 0 22px 4px rgba(245,179,1,.5); } }

/* Diploma prices modal */
.prices-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.prices-list { max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.price-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #f1f2f4; }
.price-row .pr-name { flex: 1; font-size: 13px; }
.price-row .pr-val { font-weight: 700; font-size: 13px; }
.price-row .pr-del { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.price-row .pr-del:hover { color: #b91c1c; }
.price-add { display: flex; gap: 8px; align-items: center; }
.price-add input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.price-add #pName { flex: 1; }

/* Kiosk / full-screen mode — an "arena" look for the big screen in the sales room */
body.kiosk .topbar { display: none; }
body.kiosk #view-leaderboard { padding: 26px 34px; min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #26304a, #10131c 70%); }
body.kiosk .lb-shell { max-width: 1500px; }
body.kiosk .lb-h1 { color: #fff; font-size: 40px; }
body.kiosk .lb-sub, body.kiosk .lb-updated { color: #aeb6c6; }
body.kiosk .lb-sub { font-size: 18px; }
/* The kiosk runs on a dark wall display — the light pill would glare. */
body.kiosk .lb-hint { background: #1a2030; border-color: #2b3450; color: #aeb6c6; font-size: 14px; }
body.kiosk .lb-mvps { gap: 20px; margin-bottom: 28px; }
body.kiosk .mvp-name { font-size: 30px; }
body.kiosk .mvp-rev { font-size: 24px; }
body.kiosk .lb-podium { gap: 20px; margin-bottom: 30px; }
body.kiosk .pod { background: #1a2030; border-color: #2b3450; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
body.kiosk .pod-0 { background: linear-gradient(180deg, #2a2410, #1a2030); border-color: var(--gold); }
body.kiosk .pod-name { color: #fff; font-size: 20px; }
body.kiosk .pod-rev { color: #fff; font-size: 22px; }
body.kiosk .pod-pct, body.kiosk .pod-base { color: #aeb6c6; }
body.kiosk .lb-row { background: #1a2030; border-color: #2b3450; }
body.kiosk .lb-row.over { background: linear-gradient(180deg, #2a2410, #1a2030); }
body.kiosk .lb-nm, body.kiosk .lb-rev { color: #fff; font-size: 20px; }
body.kiosk .lb-rank { color: #aeb6c6; font-size: 22px; }
body.kiosk .lb-meta { color: #aeb6c6; }
body.kiosk .lb-bar { height: 13px; background: #2b3450; }
body.kiosk .lb-tools .btn-ghost, body.kiosk .lb-updated { opacity: .85; }

/* Leaderboard responsive */
@media (max-width: 720px) {
  .lb-mvps { grid-template-columns: 1fr; }
  .lb-podium { grid-template-columns: 1fr; }
  .pod-1, .pod-2 { transform: none; }
  .lb-row { grid-template-columns: 30px 36px 1fr; }
  .lb-stats { grid-column: 2 / 4; text-align: left; margin-top: 4px; }
  .lb-h1 { font-size: 22px; }
}


/* ============================ Settings page ============================ */
/* 1200px to match .an-wrap (Analytics) and .lb-shell (Leaderboard) — the platform's other wrapped
   pages. It was 720, visibly narrower than every other screen. Still capped rather than full-bleed:
   the fields inside are left-aligned and short, so an unbounded card just strands them. */
.settings-wrap { max-width: 1200px; margin: 0 auto; }
.settings-title { font-size: 22px; font-weight: 800; margin: 4px 0 16px; }
.settings-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.settings-h { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
/* A titled block INSIDE a settings card, for a card that covers more than one job (Diplomas holds the
   catalog and the lead-matching scan). The rule + spacing keep the two from reading as one list with
   stray buttons; the first has no top border so it sits flush under the card heading. */
.settings-sub { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.settings-sub:first-of-type { border-top: none; margin-top: 10px; padding-top: 0; }
.settings-sub .settings-h { font-size: 13px; font-weight: 700; color: var(--muted); }
.settings-switch { margin: 12px 0 4px; font-size: 14px; color: var(--ink); }
.settings-field { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.settings-field label { font-size: 13px; font-weight: 600; }
.settings-field select, .settings-field input { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-family: inherit; }
.settings-field select:focus, .settings-field input:focus, #setCap:focus { outline: none; border-color: var(--brand); }
.settings-saved { color: #15803d; font-size: 13px; font-weight: 700; margin-left: 10px; }
.settings-card .price-add { margin-top: 12px; }

/* ============================ Top loading bar (CSV import) ============================ */
.load-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 70; }
.load-bar > i { display: block; height: 100%; width: 0; background: var(--brand);
  box-shadow: 0 0 8px rgba(196,8,8,.5); transition: width .2s ease; }
.load-bar.indeterminate > i { background: linear-gradient(90deg, var(--brand), #ef5350, var(--brand));
  background-size: 200% 100%; animation: loadshimmer 1s linear infinite; }
@keyframes loadshimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }


/* ============================ Deal panel (drawer) ============================ */
.deal-panel { border-top: 2px solid var(--gold); background: linear-gradient(180deg, #fffdf5, #fff); border-radius: 0 0 8px 8px; }
.deal-panel .ev-list { list-style: none; padding: 0; margin: 4px 0 0; }
.deal-panel .ev-list li { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: 13px; }
.ev-del { background: none; border: none; cursor: pointer; color: var(--faint); font-size: 12px; line-height: 1; padding: 0 2px; }
.ev-del:hover { color: var(--brand); }
/* Import-preview confirmation summary */
.imp-summary { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.imp-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 14px; border-top: 1px solid var(--line); }
.imp-row:first-child { border-top: none; }
.imp-row b { font-variant-numeric: tabular-nums; }
.imp-row.imp-new { background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.imp-dups { margin-top: 10px; font-size: 13px; }
.imp-dups summary { cursor: pointer; color: var(--muted); }
.imp-dup-nums { margin-top: 6px; max-height: 160px; overflow: auto; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-variant-numeric: tabular-nums; line-height: 1.6; }
/* Facebook comment-scan list */
.fbscan-list { max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.fbscan-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.fbscan-main { flex: 1; min-width: 0; }
.fbscan-phone { font-weight: 600; font-variant-numeric: tabular-nums; }
.fbscan-comment { font-size: 13px; margin: 2px 0; overflow-wrap: anywhere; }
.fbscan-link { font-size: 12px; color: var(--brand); text-decoration: none; }
.fbscan-imp.done { background: var(--ok); border-color: var(--ok); cursor: default; }
/* Multiselect checkbox dropdown: the Performance report's advisor filter and the Distribution
   Center's diploma filter. Shared so the two read as the same control. */
.ms { position: relative; }
.ms-btn { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ms-btn:hover { border-color: var(--brand); }
/* A picked filter has to be legible as picked from the bar alone — the panel is shut most of the time. */
.ms-btn.on { border-color: var(--brand); color: var(--brand); }
.ms-menu { position: absolute; top: 38px; left: 0; z-index: 30; min-width: 220px; max-width: 380px; max-height: 300px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 7px; cursor: pointer; }
.ms-opt:hover { background: var(--panel-2); }
/* Per-option lead count, pushed to the trailing edge. */
.ms-opt .n { margin-left: auto; padding-left: 8px; color: var(--faint); font-size: 12px; }
.ms-note { padding: 6px 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; }
/* Pinned to the foot of the scroll area: the option list is as long as the tenant's catalog, and a
   Clear that sits after the last option is one you have to scroll the whole catalog to reach. */
.ms-clear { position: sticky; bottom: 0; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: #fff; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; border-top: 1px solid var(--line); margin-top: 4px; }
/* The diploma control now sits at the HEAD of the bar's second row, beside the date range, so its
   panel opens rightward from the button like the Performance one. (It used to sit at the right of
   the first row and was anchored right:0 — which threw the panel off the LEFT edge of the screen on
   every width where the bar wrapped the button to the start of a row.) Either way this is only the
   DEFAULT: placeDiplomaMenu() in crm.js slides an open panel back inside whichever edge it overruns. */
#dDiplomaMenu {
  left: 0; right: auto;
  /* Sized for a REAL catalog, not a toy one: AMIT ships 16 diplomas + Other + No-diploma = 18 rows.
     At the shared 220–380px width every name wrapped to two lines, so 300px of height showed only
     SEVEN of them and sliced the seventh mid-word. Wide enough that a name fits on one line, tall
     enough to show ~13, and capped against the viewport so it can never hang below the fold. */
  min-width: 340px;
  max-width: min(460px, calc(100vw - 32px));
  max-height: min(56vh, 520px);
}
/* One line per diploma — uniform rows are what make a long list scannable. Names that outgrow the
   panel ellipsis rather than wrap (the full text is on the row's title attribute). */
#dDiplomaMenu .ms-opt > span[dir] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* THE "cropped in some browsers" BUG. Overlay scrollbars — the macOS default, and Chrome/Safari's
   behaviour with a trackpad — draw NOTHING until you actually scroll, so a capped list is
   indistinguishable from a list that has been cut off: no thumb, no gutter, no hint the other rows
   exist. Styling the scrollbar opts this element out of overlay mode so the thumb is always drawn;
   Firefox gets the same via scrollbar-width/color. Don't drop these for looking un-Mac-like — the
   affordance IS the fix. */
/* Stick to the panel's true bottom edge, not the top of its 6px padding — otherwise a sliver of the
   next row scrolls into the padding UNDER the button and reads as a half-drawn row. */
#dDiplomaMenu .ms-clear { bottom: -6px; padding-bottom: 10px; }
#dDiplomaMenu { scrollbar-width: thin; scrollbar-color: #c7ccd8 transparent; }
#dDiplomaMenu::-webkit-scrollbar { width: 11px; }
#dDiplomaMenu::-webkit-scrollbar-track { background: transparent; }
#dDiplomaMenu::-webkit-scrollbar-thumb { background: #c7ccd8; border-radius: 999px; border: 3px solid #fff; }
#dDiplomaMenu::-webkit-scrollbar-thumb:hover { background: #aab1c0; }
/* Summary cards stretch to fill the full table width (equal columns, wrap on narrow screens). */
/* Reports tab: the Sales / Marketing sub-tab picker. Deliberately an underline strip rather than
   another pill row — the top bar already owns pill-shaped nav, and repeating it one level down makes
   the two compete for "which of these is the section I'm in". */
.rep-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; }
.rep-tabs button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); padding: 10px 14px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rep-tabs button:hover { color: var(--ink); }
.rep-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.rep-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 6px 6px 0 0; }

/* ---- Custom Reports builder ---- */
.cr-layout { display: grid; grid-template-columns: 232px 1fr; gap: 16px; align-items: start; }
.cr-saved { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; position: sticky; top: 12px; }
.cr-saved-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.cbtn-sm { padding: 4px 8px; font-size: 12px; }
.cr-saved-list { display: flex; flex-direction: column; gap: 4px; }
.cr-saved-empty { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.cr-saved-item { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; }
.cr-saved-item:hover { background: var(--panel-2); }
.cr-saved-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.cr-saved-open { flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; padding: 7px 8px; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.cr-saved-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-saved-by { font-size: 11px; color: var(--muted); }
.cr-saved-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 8px; line-height: 1; }
.cr-saved-del:hover { color: #c0392b; }

.cr-main { min-width: 0; }
.cr-builder { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.cr-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.cr-pal-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 7px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip { border: 1px solid var(--line-strong); background: var(--panel-2); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: grab; user-select: none; }
.cr-chip:hover { border-color: var(--brand); color: var(--brand); }
.cr-chip.used { opacity: .38; cursor: default; }
.cr-chip.cr-dragging { opacity: .5; }
.cr-chip:active { cursor: grabbing; }

.cr-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cr-zone { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 9px 10px; background: var(--bg); min-width: 0; }
.cr-zone.cr-drop-over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.cr-zone-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.cr-zone-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.cr-zone-drop { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-content: flex-start; }
.cr-zone-empty { color: var(--faint); font-size: 12px; font-style: italic; align-self: center; }
.cr-zchip { display: inline-flex; align-items: center; gap: 5px; background: var(--brand); color: #fff; border-radius: 7px; padding: 4px 6px 4px 10px; font-size: 12.5px; font-weight: 600; }
.cr-zchip-x { border: 0; background: none; color: #fff; opacity: .8; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.cr-zchip-x:hover { opacity: 1; }
.cr-filter { width: 100%; }
.cr-filter-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.cr-filter-h .cr-zchip-x { color: var(--muted); }
.cr-fvals { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-fval { border: 1px solid var(--line-strong); background: var(--card); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--muted); }
.cr-fval.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cr-fmore { font-size: 11px; color: var(--faint); align-self: center; }

.cr-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.cr-title-input { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; min-width: 180px; }
.cr-title-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
@media (max-width: 900px) {
  .cr-layout { grid-template-columns: 1fr; }
  .cr-saved { position: static; }
  .cr-palette, .cr-zones { grid-template-columns: 1fr; }
}

.perf-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.perf-summary:empty { display: none; }

/* "Understand this report" — collapsed by default so it never pushes the table down, but always in the
   same place at the bottom for anyone reading the report cold. */
.explainer { margin: 18px 0 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.explainer > summary { padding: 11px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; border-radius: 10px; }
.explainer > summary::-webkit-details-marker { display: none; }
.explainer > summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 10px; font-weight: 700; flex: none; }
.explainer > summary::after { content: "▸"; margin-left: auto; color: var(--faint); font-size: 11px; transition: transform .15s; }
.explainer[open] > summary::after { transform: rotate(90deg); }
.explainer > summary:hover { color: var(--brand); }
.explainer > summary:hover::before { background: var(--brand); color: #fff; }
.explainer > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.explainer-body { padding: 2px 16px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink); }
.explainer-lede { margin: 13px 0 0; color: var(--muted); }
.explainer-body h4 { margin: 17px 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Two columns on a roomy screen, stacked on a narrow one — a term list of 11 rows is a lot of scroll. */
.explainer-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; align-items: baseline; }
.explainer-dl dt { font-weight: 700; white-space: nowrap; }
.explainer-dl dd { margin: 0; color: var(--muted); }
.explainer-dl dd > ul { margin: 5px 0 0; padding-left: 17px; }
.explainer-dl dd > ul li { margin-bottom: 3px; }
/* The "what this report does not claim" note — tinted so it reads as a caveat, not another column. */
.explainer-note-p { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--warn-tint); color: var(--ink); border-left: 3px solid var(--warn); }
.explainer-notes { margin: 0; padding-left: 18px; color: var(--muted); }
.explainer-notes li { margin-bottom: 5px; }
.explainer-foot { margin: 15px 0 0; padding-top: 11px; border-top: 1px dashed var(--line); color: var(--faint); font-size: 12.5px; }
@media (max-width: 640px) {
  .explainer-dl { grid-template-columns: 1fr; gap: 2px; }
  .explainer-dl dd { margin-bottom: 8px; }
}
/* position:relative + the padding-right below reserve the corner for the help badge, so a long label
   ("Total calls") runs out of room BEFORE it reaches the "?" instead of colliding with it. */
.ps-cell { position: relative; flex: 1 1 92px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.ps-l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; white-space: nowrap; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; }
.ps-cell .tip { position: absolute; top: 6px; right: 6px; margin: 0; }
.ps-cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
table.leads.perf { min-width: 1050px; font-size: 12.5px; }
table.leads.perf th, table.leads.perf td { padding: 8px 10px; white-space: nowrap; }
/* Agent-consolidated rows: one row per agent (aggregate), expandable to per-day sub-rows. */
tr.perf-agent { cursor: pointer; background: #fbfbfc; }
tr.perf-agent:hover { background: #f4f6f8; }
tr.perf-agent > td:first-child { font-weight: 600; }
.perf-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; }
tr.perf-day > td { color: var(--muted); }
tr.perf-day .perf-day-name { padding-left: 26px; }
/* Sort caret on sortable headers. */
table.leads.perf th.sortable .sort-caret { color: var(--faint); font-size: 10px; margin-left: 3px; }
table.leads.perf th.sorted .sort-caret { color: var(--brand); }

/* Updated-leads drill-down: the Updated count and the Review cell's link both open the records behind
   the figure. The link reads as redundant next to the clickable count but is the one managers reach for,
   so both stay. */
.perf-upd-link { border: none; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand); cursor: pointer; white-space: nowrap; }
.perf-upd-link:hover { text-decoration: underline; }
.perf-upd { border: none; background: none; padding: 0; font: inherit; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.perf-upd:hover { text-decoration: underline solid; }
.upd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.upd-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 8px 6px 0; }
.upd-table td { border-bottom: 1px solid var(--line); padding: 7px 8px 7px 0; vertical-align: top; }
.upd-table tr:last-child td { border-bottom: none; }
.upd-lead { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; text-align: left; }
.upd-lead:hover { text-decoration: underline; }
/* A call figure drills into the records behind it, exactly like .perf-upd does for updated leads —
   and .mkt-drill / .agt-drill do the same for every count in the Marketing and AI Agent reports. One
   rule for all: a clickable figure has to look identical wherever it appears, or it stops reading as
   clickable. */
.perf-call, .mkt-drill, .agt-drill, .rv-drill { border: none; background: none; padding: 0; font: inherit; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.perf-call:hover, .rv-drill:hover, .mkt-drill:hover, .agt-drill:hover { text-decoration: underline solid; }
/* AI Agent report: its rows don't expand, so they mustn't offer a pointer that does nothing. The
   totals row is the one people read first — it gets the weight. An idle channel stays visible and
   legible rather than being dimmed to the point of looking like a rendering fault. */
#agtTable tr.perf-agent { cursor: default; }
tr.perf-agent.agt-idle > td { color: var(--muted); }
tr.perf-agent.agt-total { background: #f4f6f8; border-top: 2px solid var(--line); }
tr.perf-agent.agt-total > td { font-weight: 600; }
.call-type { display: inline-block; min-width: 46px; text-align: center; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.call-type.t-in { background: #e7f5ec; color: #1c6b3a; }
.call-type.t-out { background: #e8eefb; color: #24478f; }
.call-type.t-missed { background: #fdeaea; color: #a12020; }
.call-no { color: var(--muted); }
/* "Not called" / "No change" — a stated FACT, not missing data. Distinct from a plain "—" so a manager
   can tell "this didn't happen" from "we don't know". */
.call-none { color: var(--faint); font-style: italic; white-space: nowrap; }
.upd-call { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.upd-call + .upd-call { margin-top: 3px; }
/* The one drill-down table (In/Out/Missed AND Updated leads all render it). It carries every column
   they could each want, so on a narrow screen it scrolls sideways inside its own wrapper rather than
   squashing — the modal itself must never scroll horizontally. */
.rec-wrap { overflow-x: auto; }
.modal.modal-wide .upd-table { font-size: 12.5px; }
.modal.modal-wide .upd-table td, .modal.modal-wide .upd-table th { padding-right: 10px; }
.rec-table { min-width: 980px; }
.rec-table td { vertical-align: top; }
.rec-note { max-width: 180px; color: var(--muted); }

/* Column help tips. The badge sits in the header; the bubble itself is a single element parked on
   <body> and positioned fixed (see wireTips) — inside .table-wrap it would be clipped, because that
   wrap is a scroll container and overflow-x:auto makes the Y axis clip too. */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 4px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 9px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; user-select: none; }
.tip:hover, .tip:focus-visible { background: var(--brand); color: #fff; outline: none; }
/* white-space:pre-line so a data-tip CAN use newlines for a list. It's filled with textContent (no
   HTML), so without this a multi-line tip silently reflows into one paragraph — which is exactly how
   the distribution algorithm ended up unreadable before it was moved onto the page. */
#tipPop { position: fixed; z-index: 90; max-width: 340px; padding: 9px 11px; border-radius: 8px; background: #1e2330; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; white-space: pre-line; box-shadow: 0 8px 26px rgba(0, 0, 0, .28); pointer-events: none; }
#tipPop[hidden] { display: none; }
.deal-info { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.deal-edit { margin-bottom: 8px; }
.deal-edit input { margin-bottom: 6px; }
.ev-link { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 12.5px; }
.ev-link:hover { text-decoration: underline; }
/* Styled file-picker (label wrapping a hidden <input type=file>) */
.file-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
/* A file-picker styled as a button is a <label>, so `.act-panel label` / `.modal-body label` (grey,
   higher specificity) would otherwise beat .btn-primary's white text. Restore the button colour. */
.file-btn.btn-primary { color: #fff; }
.file-btn.btn-ghost { color: var(--muted); }
/* Sale badges + Finance table */
.badge.sale-pending { background: #fef3c7; color: #92400e; }
.badge.sale-confirmed { background: #dcfce7; color: #166534; }
table.leads.sales td, table.leads.sales th { white-space: nowrap; }
/* Attachments */
.att-list { list-style: none; margin: 4px 0 0; padding: 0; }
.att-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.att-list a { color: var(--brand); text-decoration: none; }
.att-list a:hover { text-decoration: underline; }
.att-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; }
.att-del:hover { color: #dc2626; }
.att-add { margin-inline-start: 6px; }

/* ============================ Analytics dashboard ============================ */
.an-wrap { max-width: 1200px; margin: 0 auto; }
/* Wraps like .lb-top: the subtitle now names the financial month AND the days it covers, and on a
   narrow screen a non-wrapping row crushed that into a 5-line ribbon beside the preset buttons.
   Below ~420px of heading the range control drops to its own line instead. */
.an-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.an-top > div:first-child { flex: 1 1 340px; min-width: 0; }
.an-h1 { font-size: 24px; font-weight: 800; }
.an-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Date-range control (presets + the custom from/to, which reuses the shared .daterange). */
.an-range { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--card); }
.seg button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 7px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
/* Always-visible micro-caption inside a preset button. "This month" is a FINANCIAL month (26th →
   25th) and a hover-only tooltip left that invisible to everyone who didn't already know to look —
   the whole point is that a passer-by reads the rule off the button. currentColor so it stays
   legible when the button is active (white on brand) as well as idle (muted on white). */
.seg button .seg-note { font-style: normal; font-size: 9.5px; font-weight: 700; margin-left: 5px; opacity: .6; letter-spacing: .02em; color: currentColor; white-space: nowrap; }
.seg button.active .seg-note { opacity: .82; }
/* On a phone the caption is what tips a 5-button preset row past the edge (measured: fits at 360px
   without it, clips "Custom" with it). Drop the caption, not a button — the title tooltip and the
   leaderboard pill still carry the rule there. */
@media (max-width: 460px) { .seg button .seg-note { display: none; } }
.seg button:hover { background: var(--panel-2); color: var(--ink); }
.seg button.active { background: var(--brand); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.an-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.an-kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.an-kpi .l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.an-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.an-card-h { font-size: 14px; font-weight: 800; margin-bottom: 12px; }

/* 14-day revenue trend bars */
.an-trend { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.an-trend .tbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.an-trend .tbar > i { display: block; width: 100%; max-width: 26px; background: linear-gradient(180deg, #ef5350, var(--brand)); border-radius: 4px 4px 0 0; min-height: 2px; }
.an-trend .tbar > span { font-size: 9px; color: var(--muted); margin-top: 4px; }

/* Sales-ops mini KPIs reuse .an-kpi in a 2x2 grid */
.an-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-ops .an-kpi { padding: 12px 14px; border-radius: 10px; }
.an-ops .an-kpi .v { font-size: 20px; }

/* Horizontal bars (diplomas / funnel / channels) */
.an-bars { display: flex; flex-direction: column; gap: 9px; }
.an-bar { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 10px; font-size: 13px; }
.an-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-t { height: 9px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.an-bar-t > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #ef5350); border-radius: 999px; }
.an-bar-v { font-weight: 700; font-size: 12.5px; text-align: right; min-width: 56px; }
/* Engagement table: .an-bar-t is a block, so it fills this cell — the cell sets the track's width. */
.an-rate-cell { width: 120px; }
.an-total td { border-top: 2px solid #e6e8ec; }

@media (max-width: 720px) {
  .an-kpis { grid-template-columns: 1fr 1fr; }
  .an-grid2 { grid-template-columns: 1fr; }
  .an-bar { grid-template-columns: 1fr 70px auto; }
  .an-rate-cell { display: none; }  /* the rate % is already in its own column */
}

/* ---------------------------------------------------------------------------------------------
   Phone-system outage banner
   Shown when the on-box PBX relay has stopped checking in. Recordings are fetched from the PBX on
   demand, so when it goes quiet playback breaks for nearly every call — this replaces a team-wide
   guessing game with one sentence. Warn amber rather than brand red: the CRM itself is fine, and a
   red alarm across the top of a working app reads as "everything is broken".
   --------------------------------------------------------------------------------------------- */
.pbx-banner {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; margin: 0;
  background: var(--warn-tint); color: var(--warn);
  border-bottom: 1px solid rgba(189, 106, 6, .28);
  font-size: 13px; font-weight: 600;
}
.pbx-banner .ico { flex: none; }