/* ============================================
   CRM — thin layer on the dashboard design system (style.css).
   Only covers patterns the native classes don't (dialer, chips, sub-nav).
   Everything else reuses .dash-stat-card / .detail-card / .table / .status-pill.
   Token-only — no hardcoded hex.
   ============================================ */

/* ----- Sub-navigation (segment tabs) ----- */
.crm-subnav {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-5);
}
.crm-subnav a {
  text-decoration: none; font-size: var(--text-data);
  padding: var(--space-2) var(--space-4); border-bottom: 2px solid transparent;
  color: var(--text-muted); transition: color .15s ease, border-color .15s ease;
}
.crm-subnav a:hover { color: var(--text-primary); }
.crm-subnav a.active { color: var(--text-primary); border-bottom-color: var(--yango-orange); }

/* ----- In-page segment tabs (queue) ----- */
.crm-tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-5); }
.crm-tab { background: none; border: none; color: var(--text-muted); font-size: var(--text-data);
  padding: var(--space-2) var(--space-4); cursor: pointer; border-bottom: 2px solid transparent;
  font-family: var(--font-body); }
.crm-tab:hover { color: var(--text-primary); }
.crm-tab.active { color: var(--text-primary); border-bottom-color: var(--yango-orange); }
.crm-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--bg-secondary); color: var(--text-muted); font-size: var(--text-xs); text-align: center; }

/* ----- Disposition / status pills (mirror .status-pill family) ----- */
.crm-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs);
  padding: 2px 8px; border-radius: var(--radius-full); font-weight: var(--weight-medium); white-space: nowrap; }
.crm-pill.is-active { color: var(--color-active); background: var(--color-active-bg); }
.crm-pill.is-churn  { color: var(--color-churn);  background: var(--color-churn-bg); }
.crm-pill.is-new    { color: var(--color-new);    background: var(--color-new-bg); }
.crm-pill.is-warn   { color: var(--color-warn);   background: var(--color-warn-bg); }
.crm-pill.is-muted  { color: var(--text-muted);   background: var(--bg-secondary); }
.crm-pill.is-accent { color: var(--yango-orange); background: var(--yango-orange-subtle); }

/* ----- Doc chips ----- */
.crm-doc { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-sm);
  margin: 2px 4px 0 0; font-weight: var(--weight-medium); }
.crm-doc.approved     { color: var(--color-active); background: var(--color-active-bg); }
.crm-doc.pending      { color: var(--color-warn);   background: var(--color-warn-bg); }
.crm-doc.declined     { color: var(--color-churn);  background: var(--color-churn-bg); }
.crm-doc.not_provided { color: var(--text-muted);   background: var(--bg-secondary); }

/* ----- Power-dialer workspace ----- */
.crm-workspace { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-5);
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
@media (max-width: 900px) { .crm-workspace { grid-template-columns: 1fr; } }
.crm-section-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Disposition quick-buttons */
.crm-disp { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crm-disp button { font-size: var(--text-data); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.crm-disp button:hover { border-color: var(--border-strong, var(--text-muted)); }
.crm-disp button.sel { border-color: var(--yango-orange); background: var(--yango-orange-subtle); color: var(--yango-orange); }

/* Token-aligned inputs (match dashboard form feel) */
.crm-input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-data); font-family: var(--font-body); }
.crm-input:focus { outline: none; border-color: var(--yango-orange); }

/* Earnings mini-tiles in the dialer brief */
.crm-earn { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.crm-earn .tile { flex: 1; min-width: 90px; background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.crm-earn .tile .n { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--weight-bold); line-height: 1.1; }
.crm-earn .tile .l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Queue rows */
.crm-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2); background: var(--bg-card);
  transition: border-color .12s ease; }
.crm-row:hover { border-color: var(--text-muted); }
.crm-row.is-current { border-color: var(--yango-orange); box-shadow: 0 0 0 1px var(--yango-orange-subtle); }

/* Call history + misc */
.crm-hist { font-size: var(--text-sm); max-height: 180px; overflow: auto; }
.crm-hist .row { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-color); }
.crm-muted { color: var(--text-muted); font-size: var(--text-sm); }

/* Mini progress bar (list called %) */
.crm-progress { height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; max-width: 220px; }
.crm-progress > span { display: block; height: 100%; background: var(--yango-orange); opacity: .8; }

/* Form field label (uppercase caps, matches dashboard form feel) */
.crm-field-label { display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin: 0 0 var(--space-1); font-weight: var(--weight-semibold); }

/* Placeholder code chip (e.g. {name}) */
.crm-ph { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-xs);
  padding: 1px 6px; font-size: var(--text-xs); color: var(--yango-orange); }

/* "+ New …" disclosure summary styled like an outline button */
.crm-add-summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: var(--text-data); font-weight: var(--weight-medium); color: var(--text-primary);
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); width: max-content; }
.crm-add-summary::-webkit-details-marker { display: none; }
.crm-add-summary:hover { border-color: var(--yango-orange); color: var(--yango-orange); }

/* Section heading (token-aligned alternative to bespoke <h2 style>) */
.crm-section-heading { font-size: var(--text-lg); font-weight: var(--weight-semibold);
  font-family: var(--font-display); margin: 0 0 var(--space-3); color: var(--text-primary); }

/* ============================================
   Reports — chart helpers (token-only, no chart lib)
   ============================================ */
.crm-report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); align-items: start; }
.crm-report-grid .wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .crm-report-grid { grid-template-columns: 1fr; } }

/* Chart panel chrome — the missing piece that made Reports look unstyled. */
.crm-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden; }
.crm-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-color); }
.crm-card-title { font-family: var(--font-display); font-size: var(--text-body); font-weight: var(--weight-semibold);
  color: var(--text-primary); letter-spacing: -0.2px; }
.crm-card-body { padding: var(--space-4); }

/* Vertical bars (daily / hourly) */
.crm-vbars { display: flex; align-items: flex-end; gap: 4px; height: 170px;
  padding: var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--border-color); position: relative; }
.crm-vbar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: default; }
.crm-vbar .stack { width: 100%; max-width: 26px; min-height: 2px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; border-radius: 3px 3px 0 0; overflow: hidden; transition: opacity .12s ease; }
.crm-vbar:hover .stack { opacity: .75; }
.crm-vbar .seg-total   { background: var(--bg-secondary); }
.crm-vbar .seg-reached { background: var(--yango-orange); }
.crm-vbar .cap { position: absolute; bottom: var(--space-1); font-size: 9px; color: var(--text-muted); white-space: nowrap; }
/* daily charts get sparse labels (every Nth) via .sparse on the bar; hour charts show all */
.crm-vbar.lbl-hide .cap { display: none; }
.crm-vbar:hover .stack { outline: 1px solid var(--text-muted); }

/* Horizontal bars (agents / lists) */
.crm-hbars { display: flex; flex-direction: column; gap: var(--space-2); }
.crm-hbar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-data); }
.crm-hbar-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hbar-track { background: var(--bg-secondary); border-radius: var(--radius-full); height: 10px; overflow: hidden; }
.crm-hbar-fill { height: 100%; background: var(--yango-orange); border-radius: var(--radius-full); }
.crm-hbar-val { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* Today · per-agent daily-goal scoreboard cards */
.crm-today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.crm-agent-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; }
.crm-agent-card .crm-hbar-track { height: 8px; }

/* Donut (conic-gradient) */
.crm-donut-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.crm-donut { width: 150px; height: 150px; border-radius: 50%; position: relative; flex-shrink: 0; }
.crm-donut::after { content: ''; position: absolute; inset: 26px; background: var(--bg-card); border-radius: 50%; }
.crm-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.crm-donut-center .n { font-family: var(--font-display); font-size: 1.4rem; font-weight: var(--weight-bold); line-height: 1; }
.crm-donut-center .l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.crm-legend { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 160px; }
.crm-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-data); }
.crm-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.crm-legend-val { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Funnel */
.crm-funnel { display: flex; flex-direction: column; gap: var(--space-2); }
.crm-funnel-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: var(--space-3); }
.crm-funnel-label { font-size: var(--text-data); color: var(--text-muted); }
.crm-funnel-bar { background: var(--yango-orange-subtle); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); display: flex; align-items: center; min-width: 40px; }
.crm-funnel-bar .v { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--yango-orange); font-size: var(--text-body); }
.crm-funnel-bar .pct { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================
   Manager config pages (Call Outcomes / SMS Templates)
   ============================================ */

/* Section toolbar: count + primary action */
.crm-cfg-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.crm-cfg-count { font-size: var(--text-sm); color: var(--text-muted); }
.crm-cfg-count strong { color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-body); }

/* ---- Expandable config row (Call Outcomes) ---- */
.crm-cfg { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden; }
.crm-cfg[open] { border-color: var(--border-strong, var(--text-muted)); }
.crm-cfg.is-off { opacity: .6; }
.crm-cfg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.crm-cfg > summary::-webkit-details-marker { display: none; }
.crm-cfg > summary:hover { background: var(--bg-secondary); }
.crm-cfg-sort { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text-muted); width: 22px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.crm-cfg-name { font-weight: var(--weight-semibold); color: var(--text-primary); flex-shrink: 0; }
.crm-cfg-pills { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.crm-cfg-usage { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.crm-cfg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.crm-cfg-dot.on { background: var(--color-active); }
.crm-cfg-chev { color: var(--text-muted); transition: transform .15s ease; flex-shrink: 0; }
.crm-cfg[open] .crm-cfg-chev { transform: rotate(90deg); }
.crm-cfg-editor { border-top: 1px solid var(--border-color); padding: var(--space-4); background: var(--bg-secondary); display: grid; gap: var(--space-3); }
.crm-cfg-editor .row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; }
.crm-cfg-actions { display: flex; gap: var(--space-2); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--border-color); }

/* ---- 3-way segmented control (Result) ---- */
.crm-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); }
.crm-seg label { display: inline-flex; align-items: center; gap: 5px; padding: var(--space-2) var(--space-3); font-size: var(--text-data); color: var(--text-muted); cursor: pointer; border-right: 1px solid var(--border-color); white-space: nowrap; transition: background .12s ease, color .12s ease; }
.crm-seg label:last-child { border-right: none; }
.crm-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.crm-seg label:hover { color: var(--text-primary); }
.crm-seg input:checked + span { color: var(--text-primary); }
.crm-seg label:has(input:checked) { background: var(--yango-orange-subtle); color: var(--yango-orange); }

/* Toggle row inside editor */
.crm-toggle-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-data); color: var(--text-primary); }

/* ---- SMS template cards ---- */
.crm-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-4); }
.crm-tpl { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.crm-tpl.is-off { opacity: .6; }
.crm-tpl-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); }
.crm-tpl-name { font-weight: var(--weight-semibold); color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tpl-sent { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.crm-tpl-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.crm-tpl-actions { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-color); background: var(--bg-secondary); }

/* Insert-tag chips */
.crm-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.crm-tag-btn { font-size: var(--text-xs); font-family: var(--font-body); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--yango-orange); cursor: pointer; }
.crm-tag-btn:hover { border-color: var(--yango-orange); }

/* Live preview bubble (looks like a phone message) */
.crm-preview { background: var(--color-active-bg); border: 1px solid var(--color-active-bg); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs); padding: var(--space-2) var(--space-3); font-size: var(--text-data); line-height: var(--leading-normal); color: var(--text-primary); white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.crm-preview-label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.crm-sms-count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-sms-count.over { color: var(--color-warn); }

/* SMS textarea grows with content nicely */
textarea.crm-sms-body { resize: vertical; min-height: 70px; line-height: var(--leading-normal); }

/* ============================================
   Call workspace — driver brief (readability pass)
   ============================================ */
.crm-ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color); }
.crm-profile-link { font-size: var(--text-xs); color: var(--color-new); text-decoration: none; white-space: nowrap; padding: 2px 8px; border: 1px solid var(--color-new-bg); border-radius: var(--radius-full); }
.crm-profile-link:hover { background: var(--color-new-bg); }
.crm-tel { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--weight-bold); color: var(--yango-orange); text-decoration: none; letter-spacing: -0.5px; }
.crm-tel:hover { text-decoration: underline; }

/* Snapshot tiles (trips + bonus) — bigger, scannable */
.crm-snapshot { display: flex; gap: var(--space-2); margin: var(--space-4) 0; }
.crm-snapshot .tile { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.crm-snapshot .tile .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1.1; color: var(--text-primary); }
.crm-snapshot .tile .l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.crm-snapshot .tile.accent .n { color: var(--yango-orange); }

/* Fact grid: 2-col label/value, high-contrast values */
.crm-factgrid { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-4); align-items: baseline; }
.crm-factgrid dt { font-size: var(--text-sm); color: var(--text-muted); padding: 3px 0; }
.crm-factgrid dd { font-size: var(--text-data); color: var(--text-primary); font-weight: var(--weight-medium); margin: 0; padding: 3px 0; text-align: right; }
.crm-factgrid dd.dim { color: var(--text-muted); font-weight: var(--weight-regular); }

/* ============================================
   Call workspace — infographic brief
   ============================================ */
/* Issue chips (actual data-quality flags, coloured by severity) */
.crm-issues { display: flex; flex-direction: column; gap: var(--space-2); }
.crm-issue { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--bg-secondary); border-left: 3px solid var(--text-muted);
  font-size: var(--text-data); color: var(--text-primary); }
.crm-issue.sev-high   { border-left-color: var(--color-churn); background: var(--color-churn-bg); }
.crm-issue.sev-medium { border-left-color: var(--color-warn);  background: var(--color-warn-bg); }
.crm-issue.sev-low    { border-left-color: var(--color-new);   background: var(--color-new-bg); }
.crm-issue i { font-size: 13px; flex-shrink: 0; }
.crm-issue.sev-high i   { color: var(--color-churn); }
.crm-issue.sev-medium i { color: var(--color-warn); }
.crm-issue.sev-low i    { color: var(--color-new); }
.crm-allgood { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--color-active-bg); color: var(--color-active); font-size: var(--text-data); font-weight: var(--weight-medium); }

/* Staff assignment note callout */
.crm-staff-note { background: var(--color-amber-bg); border: 1px solid var(--color-amber);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.crm-staff-note-label { color: var(--color-amber); font-weight: var(--weight-semibold);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-1); }
.crm-staff-note-body { color: var(--text-primary); font-size: var(--text-sm); white-space: pre-wrap; }

/* Icon fact tiles — replace downward text with a small infographic grid */
.crm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.crm-facttile { display: flex; align-items: center; gap: var(--space-2); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.crm-facttile .ico { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: center; font-size: 15px; flex-shrink: 0; background: var(--bg-card); color: var(--text-muted); }
.crm-facttile .meta { min-width: 0; }
.crm-facttile .v { font-size: var(--text-data); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-facttile .k { font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================
   Call workspace v2 — card-based infographic brief
   ============================================ */
/* The workspace itself is just a 2-col layout, NOT a card. */
.crm-workspace.v2 { background: none; border: none; padding: 0; gap: var(--space-4); }
.crm-brief { display: flex; flex-direction: column; gap: var(--space-3); }
.crm-panel { display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--space-4); }

/* Identity hero card */
.crm-hero { background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--yango-orange);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between;
  gap: var(--space-4); align-items: flex-start; }
.crm-hero-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.25; letter-spacing: -0.4px; }
.crm-hero-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px; }
.crm-hero-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--space-3); }
.crm-hero-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }

/* Metric cards row — same language as dashboard .dash-stat-card */
.crm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.crm-metric { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.crm-metric .badge-ico { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.crm-metric .v { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-bold); line-height: 1; color: var(--text-primary); letter-spacing: -0.5px; }
.crm-metric .k { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--weight-semibold); }

/* Card title with optional count chip */
.crm-panel-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  font-weight: var(--weight-semibold); margin: 0; display: flex; align-items: center; gap: 6px; }
.crm-panel-title .ct { margin-left: auto; }

/* Fact rows inside a card — clean, readable, NOT cramped */
.crm-factlist { display: flex; flex-direction: column; gap: var(--space-1); }
.crm-factrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color); }
.crm-factrow:last-child { border-bottom: none; }
.crm-factrow .ico { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.crm-factrow .k { font-size: var(--text-sm); color: var(--text-muted); }
.crm-factrow .v { margin-left: auto; font-size: var(--text-data); font-weight: var(--weight-semibold); color: var(--text-primary); text-align: right; }

/* Doc chips row inside card */
.crm-docrow { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ============================================
   Full-screen calling (focus mode)
   ============================================ */
#ws-focusbar { display: none; }

body.crm-focus { overflow: hidden; }
/* Hide everything on the queue page except the workspace while focused. */
body.crm-focus .yango-nav,
body.crm-focus .crm-subnav,
body.crm-focus .dash-page-header,
body.crm-focus .crm-tabs,
body.crm-focus #tab-due,
body.crm-focus #tab-callbacks,
body.crm-focus #tab-snoozed,
body.crm-focus .yango-footer,
body.crm-focus .dash-grid { display: none !important; }

/* The workspace becomes a fixed full-screen surface. */
body.crm-focus #workspace.crm-workspace.v2 {
  display: grid; position: fixed; inset: 0; z-index: 1200;
  grid-template-columns: minmax(0,1.15fr) minmax(360px,0.85fr);
  grid-template-rows: auto 1fr; gap: var(--space-4);
  background: var(--bg-primary); padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
  overflow: hidden;
}
@media (max-width: 880px) { body.crm-focus #workspace.crm-workspace.v2 { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } }

/* Top bar spans full width. */
body.crm-focus #ws-focusbar {
  display: flex; align-items: center; gap: var(--space-3); grid-column: 1 / -1;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color);
}
.crm-focus-progress { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-data); color: var(--text-primary); }
.crm-focus-progress .done { color: var(--text-muted); }

/* Both columns scroll independently if a driver has lots of data — but the
   layout is sized so the common case fits without scrolling. */
body.crm-focus #workspace .crm-brief,
body.crm-focus #workspace > .crm-panel { overflow-y: auto; min-height: 0; }

/* Tighten the brief in focus mode so it fits one screen. */
body.crm-focus .crm-brief { gap: var(--space-2); padding: 2px; }
body.crm-focus .crm-panel { padding: var(--space-2) var(--space-4); gap: var(--space-1); }
body.crm-focus .crm-panel-title { margin-bottom: 2px; }
body.crm-focus .crm-hero { padding: var(--space-3) var(--space-4); }
body.crm-focus .crm-hero-name { font-size: 1.2rem; line-height: 1.25; }   /* avoid top clip */
body.crm-focus .crm-hero-badges { margin-top: var(--space-2); }
body.crm-focus .crm-metric { padding: var(--space-3); }
body.crm-focus .crm-metric .v { font-size: 1.3rem; }
body.crm-focus .crm-factrow { padding: 3px 0; }
body.crm-focus .crm-issue { padding: 5px var(--space-3); }
body.crm-focus .crm-hist { max-height: 110px; }

/* ============================================
   My Queue — scoreboard + richer list
   ============================================ */
.crm-scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.crm-score { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-4); position: relative; overflow: hidden; }
.crm-score::after { content: ''; position: absolute; right: -12px; bottom: -12px; width: 56px; height: 56px; border-radius: 50%; background: currentColor; opacity: .03; }
.crm-score-ico { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.crm-score-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -1px; transition: transform .18s ease; }
.crm-score-val.bump { transform: scale(1.18); }
.crm-score-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; font-weight: var(--weight-semibold); }

/* Section heading above the queue list */
.crm-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); }
.crm-queue-head .ttl { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }

/* Richer queue rows */
.crm-row { transition: border-color .12s ease, transform .12s ease, background .12s ease; }
.crm-row:hover { border-color: var(--yango-orange); transform: translateX(2px); }
.crm-row .who { font-weight: var(--weight-semibold); color: var(--text-primary); }
.crm-row .trips-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-muted);
  background: var(--bg-secondary); border-radius: var(--radius-full); padding: 2px 9px; }

/* Bigger, friendlier empty state with a CTA */
.crm-empty { text-align: center; padding: clamp(var(--space-8), 8vh, var(--space-12)) var(--space-4);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.crm-empty .ico { width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%;
  background: var(--color-active-bg); color: var(--color-active); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.crm-empty .ttl { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.crm-empty .desc { color: var(--text-muted); font-size: var(--text-data); margin-top: 4px; }

/* ============================================
   Reports — KPI hero band with deltas + insight strip
   ============================================ */
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.crm-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); position: relative; overflow: hidden; }
.crm-kpi.hero { grid-column: span 1; }
.crm-kpi-top { display: flex; align-items: center; gap: var(--space-2); }
.crm-kpi-ico { width: 34px; height: 34px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.crm-kpi-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--weight-semibold); }
.crm-kpi-val { font-family: var(--font-display); font-size: 2rem; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -1px; color: var(--text-primary); }
.crm-kpi-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

/* Delta pill: up = green, down = red, flat = muted. caller picks "good" direction. */
.crm-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 1px 7px; border-radius: var(--radius-full); }
.crm-delta.up   { color: var(--color-active); background: var(--color-active-bg); }
.crm-delta.down { color: var(--color-churn);  background: var(--color-churn-bg); }
.crm-delta.flat { color: var(--text-muted);   background: var(--bg-secondary); }

/* Insight callout strip — plain-language takeaways for managers */
.crm-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.crm-insight { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--bg-card);
  border: 1px solid var(--border-color); border-left: 3px solid var(--text-muted); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.crm-insight.good { border-left-color: var(--color-active); }
.crm-insight.warn { border-left-color: var(--color-warn); }
.crm-insight.bad  { border-left-color: var(--color-churn); }
.crm-insight .ico { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.crm-insight.good .ico { color: var(--color-active); }
.crm-insight.warn .ico { color: var(--color-warn); }
.crm-insight.bad  .ico { color: var(--color-churn); }
.crm-insight .txt { font-size: var(--text-data); color: var(--text-primary); line-height: 1.45; }
.crm-insight .txt strong { font-weight: var(--weight-bold); }