/* =============================================================================
   TOYOTA-CONSOLE.CSS — the console component layer (VSSWeb design language,
   Toyota-recoloured). Purely ADDITIVE: new component classes pages opt into.
   Loaded after toyota-redesign.css, before theme.css (theme.css owns colour).

   Everything consumes tokens from theme.css (colour) + toyota-redesign.css
   (spacing/radius/elevation/motion), so it adapts to light/dark automatically.
   Prefix: .tc- for shell bits; the semantic component names (.card, .data-table,
   .stat-card, .badge, .amt, .page-header) match the VSSWeb vocabulary so a page
   restyle is a near mechanical swap.
   ============================================================================= */

/* ----- In-content top bar (opt-in per page: sticky title + actions) --------- */
.tc-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    height: 52px; padding: 0 var(--sp-2);
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--content-bg); border-bottom: 1px solid var(--border-color);
    margin: calc(var(--sp-5) * -1) calc(var(--sp-3) * -1) var(--sp-5);
    padding-left: var(--sp-4); padding-right: var(--sp-4);
}
.tc-topbar-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tc-topbar-title b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.tc-topbar-title span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.02em; }
.tc-topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ----- Page header (title block + subtitle + right-aligned actions) --------- */
.page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.page-header h1, .page-header .ph-title {
    font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
    color: var(--text-primary); margin: 0; letter-spacing: -0.3px;
}
.page-header .subtitle, .page-header p { font-size: var(--text-base); color: var(--text-secondary); margin: 3px 0 0; }
.page-header .ph-actions { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* ----- Buttons -------------------------------------------------------------- */
.tc-btn, .btn.tc-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary);
    cursor: pointer; white-space: nowrap; line-height: 1.2;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform 60ms var(--ease);
}
/* Buttons rendered as <a> must never carry the anchor underline (in any state). */
.tc-btn:hover, .tc-btn:focus, .tc-btn:active,
a.tc-btn, a.tc-btn:hover, a.tc-btn:focus, a.tc-btn:active { text-decoration: none; }
.tc-btn i { font-size: 0.95em; }
.tc-btn:hover { border-color: var(--text-subtle); background: var(--surface-2); }
.tc-btn:active { transform: scale(0.985); }
.tc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tc-btn-sm { padding: 5px 11px; font-size: var(--text-xs); }
.tc-btn-lg { padding: 11px 20px; font-size: var(--text-base); }
.tc-btn-primary { background: var(--toyota-red); border-color: var(--toyota-red); color: #fff; }
.tc-btn-primary:hover { background: var(--toyota-red-dark); border-color: var(--toyota-red-dark); }
.tc-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.tc-btn-ghost { background: transparent; border-color: transparent; }
.tc-btn-ghost:hover { background: var(--surface-2); border-color: transparent; }

.tc-icon-btn {
    width: 36px; height: 36px; border-radius: var(--radius-sm); border: none;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tc-icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
/* Pressed/active state for a toggled icon button (e.g. an expanded "Show details" row). */
.tc-icon-btn.is-open { background: rgba(var(--toyota-red-rgb), 0.10); color: var(--toyota-red); }

/* ----- Cards (accent-tick header, like VSSWeb / the preview) ---------------- */
.card, .tc-card {
    background: var(--surface-1); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--elev-1); overflow: hidden;
}
/* app.css (loads earlier) lifts .card on hover — the console look is flat */
.card:hover { transform: none; }
.card-header, .tc-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-color);
    background: transparent; /* bootstrap.css loads first and tints .card-header — keep it flat */
    flex-wrap: wrap;
}
.card-header h3, .tc-card-title {
    font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary);
    margin: 0; display: flex; align-items: center; gap: 9px;
}
.card-header h3::before, .tc-card-title::before {
    content: ""; width: 14px; height: 2px; background: var(--toyota-red); border-radius: 2px; flex: 0 0 auto;
}
.card-header a, .tc-card-header a { color: var(--toyota-red); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.card-body, .tc-card-body { padding: var(--sp-4); }

/* ----- Stat cards ----------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: var(--sp-4); }
.stat-card {
    background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--elev-1);
}
.stat-card .label { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat-card .label i { color: var(--toyota-red); font-size: 0.85em; }
.stat-card .value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat-card .delta { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.stat-card .delta.up { color: var(--success-fg); } .stat-card .delta.down { color: var(--danger-fg); }

/* Clickable KPI tiles (VSSWeb hd-stat-link pattern) — a tile that deep-links
   somewhere gets a hover lift/border and a "go" chevron that fades in. */
.stat-card-link { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.stat-card-link:hover { border-color: var(--toyota-red); box-shadow: var(--elev-2); }
.stat-card-link:active { transform: translateY(1px); }
.stat-card-go { color: var(--text-subtle); font-size: 0.78rem; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.stat-card-link:hover .stat-card-go { opacity: 1; }

/* ── Lead-outcome stacked bar ─────────────────────────────────────────────
   A single token-driven horizontal bar split into flex segments (width set
   inline as a percentage), plus a wrapping legend of coloured dots. Segments
   carry a native title tooltip. Light + dark come free via the color tokens. */
.dash-bar {
    display: flex; width: 100%; height: 14px; border-radius: 999px;
    overflow: hidden; gap: 2px; background: var(--surface-2);
    border: 1px solid var(--border-color); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
}
.dash-bar-seg {
    height: 100%; min-width: 3px; flex: 0 0 auto;
    transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.dash-bar:hover .dash-bar-seg { opacity: 0.55; }
.dash-bar .dash-bar-seg:hover { opacity: 1; filter: brightness(1.08) saturate(1.05); }

.dash-legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
}
.dash-legend-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--text-xs); color: var(--text-secondary);
}
.dash-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dash-legend-name { font-weight: 600; color: var(--text-primary); }
.dash-legend-count {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: var(--surface-2);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 0 6px; font-size: 0.72rem; line-height: 1.5;
}

/* ----- Data tables (console, dense, hover) ---------------------------------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); }
.data-table th {
    text-align: left; font-weight: 600; color: var(--text-secondary);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 9px var(--sp-3); border-bottom: 1px solid var(--border-color); background: var(--table-head-bg);
}
.data-table td { padding: 9px var(--sp-3); color: var(--text-primary); border-bottom: 1px solid var(--table-row-border); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--table-row-hover); }
/* Rows that open something (e.g. Recent Quotes -> the quote itself) */
.data-table tbody tr.tc-row-clickable { cursor: pointer; }
.data-table tbody tr.tc-row-clickable:hover td { background: var(--table-row-hover); }
.data-table tbody tr.tc-row-clickable:active td { background: var(--surface-2); }
.data-table .num, .data-table .right { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Trailing "open" affordance column on clickable rows */
.data-table th.tc-col-go, .data-table td.tc-col-go { width: 1%; padding-left: 4px; padding-right: 14px; }
.data-table td.tc-col-go { color: var(--text-subtle); font-size: 0.75rem; }
.data-table tr.tc-row-clickable:hover td.tc-col-go { color: var(--toyota-red); }

/* Page-level toolbar row (time-range filter etc.) above a stat-grid */
.tc-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.tc-toolbar-label { font-size: var(--text-sm); color: var(--text-secondary); }
.tc-toolbar-label strong { color: var(--text-primary); }

/* ----- Badges / status pills ------------------------------------------------ */
.tc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.tc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.tc-badge-success { background: var(--success-surface); color: var(--success-surface-text); }
.tc-badge-danger  { background: var(--danger-surface);  color: var(--danger-surface-text); }
.tc-badge-warning { background: var(--warning-surface); color: var(--warning-surface-text); }
.tc-badge-info    { background: var(--info-surface);    color: var(--info-surface-text); }
.tc-badge-neutral { background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); }
.tc-badge-neutral::before { display: none; }

/* Source tag (TIMNET / Portal chips) */
.tc-src { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border-color); padding: 2px 8px; border-radius: var(--radius-sm); }

/* Quote numbers + dates in tables — mono, brand-red number, muted date */
.tc-quote-no { font-family: var(--font-mono); font-weight: 600; color: var(--toyota-red); white-space: nowrap; }
.tc-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* Card-header right side that holds several controls (segmented + button + badge) */
.tc-card-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ----- Money amounts (mono, tabular, sign-coloured) ------------------------- */
.amt, .tc-amt { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt-pos { color: var(--success-fg); } .amt-neg { color: var(--danger-fg); } .amt-zero { color: var(--text-subtle); }

/* ----- Tab bar -------------------------------------------------------------- */
.tc-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tc-tab-bar::-webkit-scrollbar { display: none; }
.tc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.tc-tab:hover { color: var(--text-primary); }
.tc-tab.active { color: var(--toyota-red); border-bottom-color: var(--toyota-red); }

/* ----- Page wrapper (standard content padding, ultrawide-safe) -------------- */
.page-wrap {
    width: 100%;
    max-width: var(--content-max, 1440px);
    margin: 0 auto;
    padding: 18px 22px 28px;
    box-sizing: border-box;
    min-width: 0;
}
@media (max-width: 640px) { .page-wrap { padding: 14px 14px 22px; } }

/* ----- Tinted icon tiles (VSSWeb hd-icon) ------------------------------------ */
.tc-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex: 0 0 auto;
}
.tc-icon-primary { background: rgba(235, 10, 30, 0.10); color: var(--toyota-red); }
.tc-icon-info    { background: var(--info-surface);    color: var(--info-surface-text); }
.tc-icon-success { background: var(--success-surface); color: var(--success-surface-text); }
.tc-icon-warning { background: var(--warning-surface); color: var(--warning-surface-text); }
.tc-icon-danger  { background: var(--danger-surface);  color: var(--danger-surface-text); }
.tc-icon-sm { width: 32px; height: 32px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.tc-icon-round { border-radius: 50%; }

/* Stat-card internals (VSSWeb hd-stat pattern): icon row above label/value */
.stat-card .stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.stat-card .delta { margin-top: 2px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.stat-card .delta.warn { color: var(--warning-surface-text); }

/* ----- Segmented control (VSSWeb hd-segmented) ------------------------------- */
.tc-segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.tc-seg {
    border: none; background: transparent; color: var(--text-secondary);
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
    padding: 4px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tc-seg:hover:not(:disabled) { color: var(--text-primary); }
.tc-seg.active { background: var(--toyota-red); color: #fff; }
.tc-seg:disabled { opacity: 0.55; cursor: not-allowed; }

/* ----- Thin progress (table success-rate cells) ------------------------------ */
.tc-progress { display: flex; align-items: center; gap: 9px; min-width: 110px; }
.tc-progress-track { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tc-progress-fill { height: 100%; background: var(--toyota-red); border-radius: 3px; }
.tc-progress-text { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); min-width: 44px; text-align: right; }

/* ----- Pagination ------------------------------------------------------------ */
.tc-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: var(--sp-3); flex-wrap: wrap; }
.tc-page-btn {
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--border-color); background: var(--surface-1); color: var(--text-secondary);
    border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tc-page-btn:hover:not(:disabled) { border-color: var(--toyota-red); color: var(--text-primary); }
.tc-page-btn.active { background: var(--toyota-red); border-color: var(--toyota-red); color: #fff; }
.tc-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tc-page-ellipsis { color: var(--text-muted); padding: 0 4px; font-size: var(--text-xs); }

/* ----- Empty state ------------------------------------------------------------ */
.tc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 38px 20px; }
.tc-empty .tc-icon { margin-bottom: 6px; }
.tc-empty h3 { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-primary); margin: 0; }
.tc-empty p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ----- Feed / activity list (notes, recent activity) -------------------------- */
.tc-feed { display: flex; flex-direction: column; }
.tc-feed-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.tc-feed-item.tc-feed-item-link { cursor: pointer; margin: 0 -14px; padding: 11px 14px; border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease); }
.tc-feed-item.tc-feed-item-link:hover { background: var(--surface-2); }
.tc-feed-item.tc-feed-item-link:hover .tc-feed-title { color: var(--toyota-red); }
.tc-feed-go { align-self: center; color: var(--text-subtle); font-size: 0.75rem; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.tc-feed-item-link:hover .tc-feed-go { opacity: 1; color: var(--toyota-red); }
.tc-feed-item:first-child { padding-top: 2px; }
.tc-feed-item:last-child { border-bottom: none; padding-bottom: 2px; }
.tc-feed-body { flex: 1; min-width: 0; }
.tc-feed-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-feed-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-subtle); white-space: nowrap; }
.tc-feed-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin: 3px 0 1px; }
.tc-feed-text { font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0 0; overflow-wrap: anywhere; }
.tc-feed-actions { flex: 0 0 auto; display: flex; gap: 4px; }

/* ----- In-content loading (never a full-screen popup over the shell) ---------- */
.tc-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 20px; color: var(--text-muted); font-size: var(--text-sm); }
.tc-spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--toyota-red); border-radius: 50%; animation: tc-spin 0.8s linear infinite; }
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* ----- Modal internals on console pieces --------------------------------------
   Global chrome (backdrop/content/header/body/footer) lives in toyota-redesign.css;
   these cover console-flavoured internals: plain h3 titles and the tc-icon-btn close,
   which (unlike bootstrap's .btn-close) gets no automatic margin-left:auto. */
.modal-header h3, .dialog-header h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.modal-header > .tc-icon-btn:last-child, .dialog-header > .tc-icon-btn:last-child { margin-left: auto; }

/* ----- Inline alerts ----------------------------------------------------------- */
.tc-alert { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--sp-4); }
.tc-alert i { flex: 0 0 auto; }
.tc-alert-danger  { background: var(--danger-surface);  color: var(--danger-surface-text); }
.tc-alert-warning { background: var(--warning-surface); color: var(--warning-surface-text); }
.tc-alert-info    { background: var(--info-surface);    color: var(--info-surface-text); }

/* ----- Form fields (label-above, console inputs) ---------------------------- */
.tc-field { margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.tc-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.tc-input, input.tc-input, select.tc-input, textarea.tc-input {
    width: 100%; padding: 9px 11px; font-family: inherit; font-size: var(--text-base);
    color: var(--input-text); background: var(--input-bg);
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tc-input:focus { outline: none; border-color: var(--toyota-red); box-shadow: 0 0 0 3px var(--focus-ring); }
.tc-input::placeholder { color: var(--placeholder-color); }

/* ----- Chosen-package picker + lead quick-bar (QuoteDetails + LeadDetails) ----
   Client's chosen premium package (Guardian / Protector / Not chosen) and the
   inline lead quick-status control. Token-only; reuses .tc-segmented / .tc-badge. */
.qd-pkg-seg { display: flex; width: 100%; }
.qd-pkg-seg .tc-seg { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; text-align: center; }
.qd-pkg-name { font-size: var(--text-xs); font-weight: 700; line-height: 1.15; }
.qd-pkg-sub { font-size: 9.5px; font-weight: 500; opacity: 0.72; line-height: 1.1; }
.qd-pkg-hint { margin: 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; display: flex; align-items: flex-start; gap: 6px; flex: 1 1 220px; min-width: 0; }
.qd-pkg-hint i { color: var(--toyota-red); margin-top: 2px; flex: 0 0 auto; }
.qd-pkg-hint strong { color: var(--text-secondary); font-weight: 700; }
/* per-package price on each option + the −10% tag */
.qd-pkg-price { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--toyota-red); }
.tc-seg.active .qd-pkg-price { color: inherit; }
.qd-pkg-off { display: inline-block; margin-left: 3px; font-size: 8.5px; font-weight: 800; color: var(--success); }
.tc-seg.active .qd-pkg-off { color: inherit; }
/* footer: hint + Save-changes button */
.qd-pkg-footer { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: 8px; }
.qd-pkg-save { flex: 0 0 auto; }
/* the live package tag next to the Total Premium figure */
.qd-total-pkg { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--warning-light); color: var(--warning-fg); font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.qd-quickbar-badge-row { margin-bottom: var(--sp-2, 8px); }
.qd-quickbar-save { width: 100%; justify-content: center; }

/* ----- Panels + section rhythm helpers -------------------------------------- */
.tc-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); align-items: start; }
.tc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.tc-scroll-x { overflow-x: auto; }
@media (max-width: 900px) { .tc-grid-2 { grid-template-columns: 1fr; } }

/* ----- Consistent, quiet scrollbars app-wide (console feel) ----------------- */
.content ::-webkit-scrollbar { width: 9px; height: 9px; }
.content ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
.content ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.content ::-webkit-scrollbar-track { background: transparent; }

/* =============================================================================
   MOBILE-FIRST — everything must work + fit at 400px (and down to 320px).
   Nothing may cause horizontal page scroll; wide data scrolls inside its own
   container or stacks into readable cards.
   ============================================================================= */

/* Global overflow guard — long ids/vehicle strings never blow the viewport out */
.content, .card, .tc-card, .stat-card, .page-header, .toolbar { min-width: 0; }
.content { overflow-x: hidden; }
/* break-word (not anywhere): 'anywhere' collapses each column's min-content width to a single
   character, letting long Reason/Value cells crush neighbours to ~40px letter-by-letter wraps. */
.data-table td, .data-table th { overflow-wrap: break-word; }
.data-table th { white-space: nowrap; }
/* Opt-in for genuinely unbreakable content (long ids, emails) */
.data-table td.tc-break { overflow-wrap: anywhere; }
/* Long generated text columns wrap at word boundaries without starving the rest */
@media (min-width: 641px) {
    .data-table td[data-label="Reason"], .data-table td[data-label="Value"] { min-width: 220px; max-width: 420px; }
}

/* Any bare wide table inside a card/content scrolls rather than overflowing */
.card > .tc-scroll-x, .tc-card > .tc-scroll-x, .content > .tc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Touch targets: interactive controls reach 40px+ on small screens */
@media (max-width: 640px) {
    .tc-btn { min-height: 40px; }
    .tc-icon-btn { width: 40px; height: 40px; }
    .tc-tab { padding: 11px 13px; }
    /* 16px floor stops iOS Safari zoom-on-focus (html drops to 15px at this width,
       so var(--text-base) computes below Safari's 16px threshold) */
    .tc-input, input.tc-input, select.tc-input, textarea.tc-input { font-size: 16px; }
}

@media (max-width: 560px) {
    /* Header + toolbar stack; actions become a full-width row that wraps */
    .page-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .page-header .ph-actions, .toolbar { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .page-header .ph-actions .tc-btn, .toolbar .tc-btn { flex: 1 1 auto; justify-content: center; }
    .page-header h1, .page-header .ph-title { font-size: var(--text-lg); }

    /* One column for every multi-column layout */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .tc-grid-2, .tc-grid-3 { grid-template-columns: 1fr; gap: var(--sp-3); }

    /* Cards breathe less; tighter internal padding */
    .card-body, .tc-card-body { padding: var(--sp-3); }
    .card-header, .tc-card-header { padding: var(--sp-3); }

    /* In-content sticky topbar: drop the negative-margin bleed, keep it simple */
    .tc-topbar { margin: calc(var(--sp-4) * -1) calc(var(--sp-3) * -1) var(--sp-4); padding-left: var(--sp-3); padding-right: var(--sp-3); height: 48px; }
    .tc-topbar-title b { font-size: var(--text-base); }
}

@media (max-width: 430px) {
    .stat-grid { grid-template-columns: 1fr; }
    .stat-card .value { font-size: var(--text-xl); }
}

/* Data tables → stacked cards at phone width. Add class .tc-stack to a table
   and data-label="Column" on each <td>; each row becomes a labelled card so
   wide tables (Leads, quote history, underwriting) stay readable at 400px. */
@media (max-width: 640px) {
    table.tc-stack, table.tc-stack thead, table.tc-stack tbody, table.tc-stack tr, table.tc-stack td { display: block; width: 100%; }
    table.tc-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.tc-stack tr {
        margin-bottom: var(--sp-3); border: 1px solid var(--border-color); border-radius: var(--radius-md);
        background: var(--surface-1); box-shadow: var(--elev-1); padding: var(--sp-2) var(--sp-3); overflow: hidden;
    }
    table.tc-stack tr:hover td { background: transparent; }
    table.tc-stack td {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
        padding: 7px 0; border-bottom: 1px solid var(--border-soft); text-align: right;
    }
    table.tc-stack td:last-child { border-bottom: none; }
    table.tc-stack td::before {
        content: attr(data-label); text-align: left; flex: 0 0 auto;
        font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
    }
    table.tc-stack td.num, table.tc-stack td.right { justify-content: space-between; }
    /* The whole stacked card is already tappable — no need for a bare chevron row */
    table.tc-stack td.tc-col-go { display: none; }
}

/* A11y: the CLOSED mobile drawer is only slid off-screen (translateX), so its links stay in the keyboard
   tab order and can be focused behind the page. visibility:hidden removes it from tab + hit-testing; the
   delayed visibility transition keeps it visible while it slides out so the animation is preserved. */
@media (max-width: 1023.98px) {
    .nav-root:not(.drawer-open) {
        visibility: hidden;
        transition: transform var(--dur-med, 260ms) var(--ease, ease), visibility 0s linear var(--dur-med, 260ms);
    }
    .nav-root.drawer-open { visibility: visible; }
}

/* =============================================================================
   SIDEBAR → match the approved console mockup exactly. The original NavMenu is
   "busy" (GR tri-stripe, active-pill glow, animated chevron cue, drop shadow);
   the mockup is quiet: flat ink, a red active pill + left rail, muted icons.
   These overrides strip the noise (win by specificity/order; NavMenu CSS untouched).
   ============================================================================= */
.brand-section .brand-stripes { display: none !important; }   /* no tri-stripe in the mockup */
.nav-root { box-shadow: none !important; }
.nav-root .nav-link.active { box-shadow: none !important; }    /* flat active pill, no glow */
.nav-root .nav-link.active .nav-icon { filter: none !important; }
.nav-root .nav-link.active::after { content: none !important; } /* drop the animated chevron cue */
.nav-root .nav-link:hover .nav-icon { transform: none !important; } /* no icon nudge on hover */
.nav-root::after { opacity: 0.4; }                              /* keep only a subtle red edge */

/* =============================================================================
   DE-DUPE PAGE TITLES → the desktop topbar (≥1024px) already shows the page
   title + breadcrumb, so the big in-page title banners are redundant there.
   Hide ONLY the title block (never the search / filter / tab controls that some
   headers also carry), and ONLY on desktop — mobile has no topbar, so the
   in-page title stays for context.
   ============================================================================= */
@media (min-width: 1024px) {
    .dashboard-container > .dashboard-header,                    /* Dashboard, Quote History, Reports, Mappings */
    .leads-header,                                               /* Leads (title + LIVE badge only) */
    .approval-dashboard-header > .approval-dashboard-title,      /* Approvals + VIP Approvals */
    .uw-dashboard-header > .uw-dashboard-title,                  /* Underwriting */
    .rc-header > .rc-header-title,                               /* Rate Calculator (keeps .rc-tabs) */
    .team-header > .header-content,                              /* Team (keeps .header-actions) */
    .signups-container > .header,                                /* Signups */
    .page-wrap > .page-header > h1 {                             /* Quote History and other .page-wrap pages */
        display: none !important;
    }
}


/* =============================================================================
   DASHBOARD V2 — "command deck"
   Dark hero band (greeting + period filter + conversion ring) with the KPI
   deck overlapping its bottom edge. Hero is intentionally dark in BOTH themes;
   everything below it stays token-driven so light/dark keep working.
   ============================================================================= */
.dash-hero {
    --hero-bg-1: #17181c;
    --hero-bg-2: #232227;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(560px 240px at 86% -30%, rgba(235, 10, 30, 0.28), transparent 68%),
        radial-gradient(340px 200px at -8% 120%, rgba(235, 10, 30, 0.12), transparent 60%),
        linear-gradient(135deg, var(--hero-bg-2) 0%, var(--hero-bg-1) 55%);
    color: #fff;
    padding: 22px 24px 44px;  /* extra bottom room for the overlapping KPI deck */
    box-shadow: var(--elev-2);
}

/* faint dot grid for texture */
.dash-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
    background-size: 22px 22px;
    pointer-events: none;
}

.dash-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.dash-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff5a68;
    margin-bottom: 6px;
}

.dash-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: #fff;
}

.dash-hero-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}
.dash-hero-sub strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

/* period filter — translucent pills that read on the dark band */
.dash-hero-filter {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.dash-hero-filter .hf-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    background: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.dash-hero-filter .hf-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.dash-hero-filter .hf-btn.active {
    color: #fff;
    background: var(--toyota-red);
    box-shadow: 0 2px 10px rgba(235, 10, 30, 0.45);
}

/* conversion ring — pure CSS conic gauge; --pct supplied inline from Razor */
.dash-ring {
    --pct: 0;
    --ring-size: 92px;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--toyota-red) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.14) 0);
    display: grid;
    place-items: center;
    flex: none;
}
.dash-ring-inner {
    width: calc(var(--ring-size) - 16px);
    height: calc(var(--ring-size) - 16px);
    border-radius: 50%;
    background: var(--hero-bg-1);
    display: grid;
    place-items: center;
    text-align: center;
}
.dash-ring-value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.dash-ring-label {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.dash-hero-metric { text-align: right; }
.dash-hero-metric .m-value {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    line-height: 1.1;
}
.dash-hero-metric .m-label {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

/* KPI deck — overlaps the hero's bottom edge */
.kpi-deck {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: -26px 14px var(--sp-4);
}

.kpi-card {
    --acc: var(--toyota-red);
    --acc-soft: rgba(235, 10, 30, 0.1);
    position: relative;
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 16px 12px;
    box-shadow: var(--elev-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpi-card.acc-info    { --acc: #2f6fed; --acc-soft: rgba(47, 111, 237, 0.1); }
.kpi-card.acc-success { --acc: #14934c; --acc-soft: rgba(20, 147, 76, 0.1); }
.kpi-card.acc-warning { --acc: #c77d0a; --acc-soft: rgba(199, 125, 10, 0.12); }

/* top hairline that ignites on hover */
.kpi-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--acc);
    opacity: 0.35;
    transition: opacity var(--dur-fast) var(--ease);
}

/* oversized watermark icon */
.kpi-watermark {
    position: absolute;
    right: -12px;
    bottom: -16px;
    font-size: 4.6rem;
    color: var(--acc);
    opacity: 0.07;
    pointer-events: none;
    transform: rotate(-8deg);
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kpi-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    color: var(--acc);
    background: linear-gradient(145deg, var(--acc-soft), transparent 130%);
    border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
}

.kpi-go {
    color: var(--text-subtle);
    font-size: 0.78rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.kpi-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.kpi-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--text-primary);
}

.kpi-delta {
    font-size: 0.74rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 1.1em;
}
.kpi-delta.up   { color: #14934c; }
.kpi-delta.warn { color: #c77d0a; }

.kpi-card-link { cursor: pointer; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.kpi-card-link:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--acc) 45%, var(--border-color));
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--acc) 35%, transparent);
}
.kpi-card-link:hover::before { opacity: 1; }
.kpi-card-link:hover .kpi-go { opacity: 1; transform: translateX(0); color: var(--acc); }
.kpi-card-link:active { transform: translateY(0); }

/* Recent Quotes — initials avatar + name cell */
.rq-who {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.rq-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(145deg, #3a3d46, #17181c);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.rq-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* staggered load-in for hero + deck + cards */
@keyframes dashRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* soft dim while a filter refresh is in flight (no full-page spinner swap) */
.dash-anim { transition: opacity 0.15s var(--ease); }
.dash-anim.is-refreshing { opacity: 0.55; pointer-events: none; }
/* Full-width dashboard sections (e.g. the outcomes card) sit flush against the grid
   below them — give every top-level card the same vertical rhythm as .stat-grid. */
.dash-anim > .card { margin-bottom: var(--sp-4); }

/* Same rhythm for the plain .dashboard-container pages (Reports "Need Help" card,
   Mappings' High-Risk + Lead-Outcomes cards). .card carries no default margin, so
   stacked top-level cards render flush without this. Direct-child scope only, so
   cards inside .stat-grid / .tc-grid-3 keep their own grid gap and don't double up. */
.dashboard-container > .card:not(:last-child) { margin-bottom: var(--sp-4); }

.dash-anim > * { animation: dashRise 0.38s var(--ease) backwards; }
.dash-anim > *:nth-child(1) { animation-delay: 0.02s; }
.dash-anim > *:nth-child(2) { animation-delay: 0.09s; }
.dash-anim > *:nth-child(3) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
    .dash-anim > * { animation: none; }
}

@media (max-width: 640px) {
    .dash-hero { padding: 16px 16px 38px; }
    .dash-hero-inner { gap: var(--sp-3); }
    .dash-ring { --ring-size: 74px; }
    .kpi-deck { margin: -24px 8px var(--sp-3); gap: 8px; }
    .kpi-value { font-size: 1.55rem; }
}


/* =============================================================================
   QUOTE PAGE (qp-*) — CONSOLE OVERHAUL
   Re-skins the quoting screen onto the console design language. Overrides
   skin-quote.css + skin-quote-light-theme.css, which load EARLIER; selectors
   are prefixed with .theme-light/.theme-dark to tie their specificity so this
   file wins on order. All colors come from theme.css tokens, so both themes
   keep working. Goal: compact, seamless, professional — no bulk.
   ============================================================================= */

/* ---- page chrome ---- */
.theme-light .qp-quote-header,
.theme-dark .qp-quote-header { padding: 10px 12px 0; }

.theme-light .qp-header-content,
.theme-dark .qp-header-content {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
    padding: 8px 12px;
    gap: 10px;
    max-width: none;
}

.theme-light .qp-header-content.qp-sticky,
.theme-dark .qp-header-content.qp-sticky {
    background: color-mix(in srgb, var(--surface-1) 90%, transparent);
    backdrop-filter: blur(8px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: var(--elev-2);
    padding: 8px 16px;
}

/* quote number + broker chips read as compact console pills */
.theme-light .qp-quote-number,
.theme-dark .qp-quote-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}
.theme-light .qp-quote-number:hover,
.theme-dark .qp-quote-number:hover { border-color: var(--toyota-red); }
.theme-light .qp-quote-number i,
.theme-dark .qp-quote-number i { color: var(--toyota-red); font-size: 0.72rem; }

.theme-light .qp-broker-info,
.theme-dark .qp-broker-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--surface-2);
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-light .qp-broker-info:hover,
.theme-dark .qp-broker-info:hover { border-color: var(--toyota-red); color: var(--text-primary); }

.theme-light .qp-consultant-code,
.theme-dark .qp-consultant-code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(235, 10, 30, 0.08);
    color: var(--toyota-red);
}

/* ---- layout grid ---- */
.theme-light .qp-quote-content,
.theme-dark .qp-quote-content { padding: 10px 14px 14px; }

/* Use the FULL screen width — skin-quote.css caps the grid at 1440px and
   centres it, leaving big empty gutters on wide monitors. Uncap it. */
.theme-light .qp-quote-grid,
.theme-dark .qp-quote-grid { gap: 12px; max-width: none; width: 100%; margin: 0; }
.theme-light .qp-header-content,
.theme-dark .qp-header-content { max-width: none; margin: 0; }

.theme-light .qp-quote-grid.left-collapsed,
.theme-dark .qp-quote-grid.left-collapsed { grid-template-columns: 46px minmax(0, 1fr); }
.theme-light .qp-quote-grid.right-collapsed,
.theme-dark .qp-quote-grid.right-collapsed { grid-template-columns: minmax(320px, 400px) 46px; }

/* ---- panels as console cards ---- */
.theme-light .qp-left-panel,
.theme-dark .qp-left-panel,
.theme-light .qp-right-panel,
.theme-dark .qp-right-panel {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
}

.theme-light .qp-panel-header,
.theme-dark .qp-panel-header {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    gap: 8px;
    min-height: 0;
}

/* section titles match the dashboard card headers: red dash + micro caps */
.theme-light .qp-panel-header h3,
.theme-dark .qp-panel-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.theme-light .qp-panel-header h3::before,
.theme-dark .qp-panel-header h3::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--toyota-red);
    flex: none;
}

.theme-light .qp-panel-content,
.theme-dark .qp-panel-content { padding: 12px; }

/* collapse buttons: quiet 28px icon buttons */
.theme-light .qp-btn-collapse,
.theme-dark .qp-btn-collapse {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-subtle);
    font-size: 0.72rem;
}
.theme-light .qp-btn-collapse:hover,
.theme-dark .qp-btn-collapse:hover { color: var(--toyota-red); border-color: var(--toyota-red); background: transparent; }

/* collapsed side rails: slim, vertical, discoverable */
.theme-light .qp-collapsed-indicator,
.theme-dark .qp-collapsed-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 0;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.theme-light .qp-collapsed-indicator:hover,
.theme-dark .qp-collapsed-indicator:hover { color: var(--toyota-red); border-color: var(--toyota-red); }
.theme-light .qp-collapsed-indicator i,
.theme-dark .qp-collapsed-indicator i { font-size: 0.85rem; }
.theme-light .qp-collapsed-indicator span,
.theme-dark .qp-collapsed-indicator span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- tabs: compact console segments ---- */
.theme-light .qp-tab-buttons,
.theme-dark .qp-tab-buttons { gap: 4px; }

.theme-light .qp-tab-button,
.theme-dark .qp-tab-button {
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    min-height: 0;
    gap: 6px;
}
.theme-light .qp-tab-button:hover,
.theme-dark .qp-tab-button:hover { background: var(--surface-2); color: var(--text-primary); border-color: transparent; }
.theme-light .qp-tab-button.qp-active,
.theme-dark .qp-tab-button.qp-active {
    background: var(--toyota-red);
    color: #fff;
    border-color: var(--toyota-red);
    box-shadow: 0 2px 8px rgba(235, 10, 30, 0.35);
}

/* ---- buttons ---- */
.theme-light .qp-btn,
.theme-dark .qp-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    gap: 6px;
}
.theme-light .qp-btn-sm,
.theme-dark .qp-btn-sm { padding: 4px 10px; font-size: 0.72rem; }
.theme-light .qp-btn-icon,
.theme-dark .qp-btn-icon { padding: 0; width: 28px; height: 28px; justify-content: center; }

/* ---- forms: micro labels + compact controls ---- */
.theme-light .qp-form-group,
.theme-dark .qp-form-group { margin-bottom: 12px; }

.theme-light .qp-form-group label,
.theme-dark .qp-form-group label {
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.theme-light .qp-form-control,
.theme-dark .qp-form-control {
    padding: 7px 10px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.theme-light .qp-form-control:focus,
.theme-dark .qp-form-control:focus {
    border-color: var(--toyota-red);
    box-shadow: 0 0 0 3px rgba(235, 10, 30, 0.12);
}

/* ---- modals aligned to the console dialog chrome ---- */
/* Modal backdrop — darken + blur so the dialog clearly floats above the page */
.theme-light .qp-modal-overlay,
.theme-dark .qp-modal-overlay {
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    z-index: 1200;
}
.theme-light .qp-modal,
.theme-dark .qp-modal {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-4, var(--elev-3));
    overflow: hidden;
}
/* red accent strip across the top of the dialog so it "pops" */
.theme-light .qp-modal-header,
.theme-dark .qp-modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-2);
    position: relative;
}
.theme-light .qp-modal-header::before,
.theme-dark .qp-modal-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--toyota-red);
}
.theme-light .qp-modal-header h3,
.theme-dark .qp-modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}
.theme-light .qp-modal-body,
.theme-dark .qp-modal-body { padding: 16px; }
.theme-light .qp-modal-footer,
.theme-dark .qp-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}
/* make the primary action in dialogs unmistakable */
.theme-light .qp-modal-footer .qp-btn-primary,
.theme-dark .qp-modal-footer .qp-btn-primary {
    padding: 9px 22px;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(var(--toyota-red-rgb), 0.35);
}
.theme-light .qp-modal-footer .qp-btn-primary:hover,
.theme-dark .qp-modal-footer .qp-btn-primary:hover {
    background: var(--toyota-red-dark);
    border-color: var(--toyota-red-dark);
}

/* =============================================================================
   SEARCHABLE SELECT (ss-*) — reusable type-to-filter dropdown replacing native
   <select>. Token-driven, works light + dark.
   ============================================================================= */
.ss-root { position: relative; width: 100%; }
.ss-backdrop { position: fixed; inset: 0; z-index: 99998; background: transparent; }
.ss-control {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ss-control:hover { border-color: var(--border-strong); }
.ss-root.ss-open .ss-control {
    border-color: var(--toyota-red);
    box-shadow: 0 0 0 3px rgba(var(--toyota-red-rgb), 0.14);
}
.ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-value.ss-placeholder { color: var(--text-subtle); }
.ss-caret { font-size: 0.68rem; color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease); flex: none; }
.ss-root.ss-open .ss-caret { transform: rotate(180deg); color: var(--toyota-red); }

.ss-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    /* Very high so the fixed-positioned panel wins over page content and dialogs (it's transient). */
    z-index: 99999;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    overflow: hidden;
    animation: ssDrop 0.12s var(--ease);
}
@keyframes ssDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.ss-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-2);
}
.ss-search i { position: absolute; left: 18px; font-size: 0.78rem; color: var(--text-subtle); pointer-events: none; }
.ss-search-input {
    width: 100%;
    height: 32px;
    padding: 6px 10px 6px 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.82rem;
}
.ss-search-input:focus { outline: none; border-color: var(--toyota-red); box-shadow: 0 0 0 3px rgba(var(--toyota-red-rgb), 0.14); }

.ss-options { max-height: 240px; overflow-y: auto; padding: 4px; }
.ss-option {
    width: 100%;
    display: block;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.ss-option:hover, .ss-option.ss-active { background: var(--surface-2); }
.ss-option.ss-selected { color: var(--toyota-red); font-weight: 600; }
.ss-option.ss-selected::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; font-size: 0.72rem; }
.ss-empty { padding: 14px 10px; text-align: center; color: var(--text-subtle); font-size: 0.8rem; }

/* ---- "complete the policyholder" gate: centered, calm empty-state (NOT a red billboard) ---- */
.qv-gate {
    max-width: 380px;
    margin: 0 auto;
    padding: clamp(24px, 6vh, 56px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.qv-gate-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 6px;
    color: var(--toyota-red);
    background: rgba(var(--toyota-red-rgb), 0.08);
    border: 1px solid rgba(var(--toyota-red-rgb), 0.16);
}
.qv-gate-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.qv-gate-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}
.qv-gate-label {
    margin-top: 14px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.qv-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.qv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--warning-fg);
    background: var(--warning-surface);
    border: 1px solid var(--warning-surface-border);
}
.qv-chip i { font-size: 0.4rem; }


/* =============================================================================
   VEHICLE INSURANCE DIALOG — compact fields
   skin-insurancedialog.css renders these fields at 48px tall (height:3rem) with
   0.9375rem labels and a 2.5rem leading-icon indent, which reads as "massive".
   toyota-console.css loads AFTER the skin, so these same-selector rules win and
   bring the fields down to the console field scale. Tokens → light+dark safe.
   ============================================================================= */
.vehicle-insurance-form-group { gap: 4px; }
.vehicle-insurance-form-group label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vehicle-insurance-input-wrapper select,
.vehicle-insurance-input-wrapper input {
    height: 36px;
    padding: 0 30px 0 12px;   /* no leading icon → text starts at 12px */
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}
.vehicle-insurance-input-icon { display: none; }
.vehicle-insurance-select-icon { right: 12px; font-size: 0.7rem; color: var(--text-subtle); }
.vehicle-insurance-form-grid { gap: 10px 14px; }
/* trim the section vertical rhythm so more fits without scrolling */
.vehicle-insurance-section-content { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

/* =============================================================================
   LEADS PAGE (leads-* / sf-* / sla-* / alert-* / assign-*) — console adoption.
   Leads.razor kept its semantic markup; this block styles it onto the console
   language (skin-leads*.css is unlinked). Tokens only → light + dark both work.
   ============================================================================= */
.leads-container { width: 100%; max-width: var(--content-max, 1440px); margin: 0 auto; padding: 4px 0 var(--sp-5); min-width: 0; }

/* In-page header — hidden ≥1024px by the de-dupe rule above; mobile context only */
.leads-header { margin-bottom: var(--sp-4); }

/* Prod / Non-prod data-source switch — its OWN always-visible bar (the .leads-header is
   display:none on desktop, so the toggle can't live inside it). Managers + supervisors only. */
.lead-env-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 14px; margin-bottom: var(--sp-3);
    background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.lead-env-bar.is-test { background: var(--warning-light); border-color: var(--warning-border); }
.lead-env-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.lead-env-label i { color: var(--toyota-red); }
.tc-seg.lead-env-seg-test.active { background: var(--warning); border-color: var(--warning); color: #201500; }
.lead-env-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--warning-fg); }
.lead-env-note i { color: var(--warning-fg); }

/* ── TEST-MODE RECOLOR ─────────────────────────────────────────────────────────
   When a supervisor is viewing non-prod (test) leads, <html> gets .lead-env-test and
   the brand red is remapped to amber app-wide (specificity 0,1,1 beats :root's 0,1,0),
   so the whole system visibly signals "TEST LEADS ONLY". */
html.lead-env-test {
    --toyota-red: #d97706;
    --toyota-red-dark: #b45309;
    --toyota-red-rgb: 217, 119, 6;
}
/* Top-bar global Prod / Non-prod (test) switch */
.dt-env-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-color); flex: 0 0 auto; }
.dt-env-switch.is-test { background: var(--warning-light); border-color: var(--warning-border); }
.dt-env-caption { display: inline-flex; align-items: center; padding: 0 3px 0 6px; color: var(--text-muted); font-size: 0.78rem; }
.dt-env-opt {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    border: none; border-radius: 999px; background: transparent; color: var(--text-secondary);
    font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dt-env-opt:hover { color: var(--text-primary); }
.dt-env-opt.active { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--elev-1); }
.dt-env-opt-test.active { background: var(--warning); color: #201500; box-shadow: none; }
@media (max-width: 720px) { .dt-env-caption { display: none; } .dt-env-opt { padding: 4px 9px; } }

/* Toyota page loader — brief full-screen overlay on every navigation */
.page-loader { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 22, 0.34); animation: pl-fade 0.12s var(--ease); }
.page-loader-badge { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 22px; box-shadow: 0 14px 44px rgba(0,0,0,0.3); }
.page-loader-logo { width: 46px; height: auto; animation: pl-pulse 1.1s ease-in-out infinite; }
.page-loader-ring { position: absolute; inset: 11px; border-radius: 50%; border: 3px solid rgba(0,0,0,0.08); border-top-color: var(--toyota-red); animation: pl-spin 0.8s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.72; } }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .page-loader-ring, .page-loader-logo { animation: none; } }
.leads-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.3px; }
.leads-subtitle { font-size: var(--text-base); color: var(--text-secondary); margin: 3px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--success-surface-text); background: var(--success-surface); padding: 2px 10px; border-radius: 999px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tc-pulse 1.5s ease-in-out infinite; }
@keyframes tc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ----- Stat + filter tiles (compact stat-card scale, status-tinted) ---------- */
.stat-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: var(--sp-3); min-width: 0; }
.sf-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--surface-1); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--elev-1);
    cursor: pointer; text-align: left; min-width: 0; font-family: var(--font-body);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sf-card:hover { border-color: var(--border-strong); box-shadow: var(--elev-2); }
.sf-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background var(--dur-fast) var(--ease); }
.sf-card-active { border-color: var(--border-strong); }
.sf-card-active::after,
.sf-card-all.sf-card-active::after, .sf-card-timnet.sf-card-active::after { background: var(--toyota-red); }
.sf-card-unallocated.sf-card-active::after { background: var(--warning-fg); }
.sf-card-allocated-all.sf-card-active::after, .sf-card-allocated.sf-card-active::after { background: var(--success-fg); }
.sf-card-open.sf-card-active::after { background: var(--toyota-red); }
.sf-card-won.sf-card-active::after { background: var(--success-fg); }
.sf-card-lost.sf-card-active::after { background: var(--danger-fg); }
.sf-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex: 0 0 auto; background: var(--surface-2); color: var(--text-secondary); }
.sfi-all { background: var(--info-surface); color: var(--info-surface-text); }
.sfi-timnet { background: rgba(var(--toyota-red-rgb), 0.10); color: var(--toyota-red); }
.sfi-unallocated { background: var(--warning-surface); color: var(--warning-surface-text); }
.sfi-allocated-all, .sfi-allocated { background: var(--success-surface); color: var(--success-surface-text); }
.sfi-open { background: rgba(var(--toyota-red-rgb), 0.10); color: var(--toyota-red); }
.sfi-won { background: var(--success-surface); color: var(--success-surface-text); }
.sfi-lost { background: var(--danger-surface); color: var(--danger-surface-text); }
.sf-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-count { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sf-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); white-space: nowrap; }

/* ----- Search ---------------------------------------------------------------- */
.search-wrapper { position: relative; margin-bottom: var(--sp-4); min-width: 0; }
.search-wrapper .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--text-subtle); pointer-events: none; }
input.search-input {
    width: 100%; padding: 8px 12px 8px 34px; font-family: inherit; font-size: var(--text-base);
    color: var(--input-text); background: var(--input-bg);
    border: 1px solid var(--input-border); border-radius: var(--radius-sm);
}
input.search-input::placeholder { color: var(--placeholder-color); }

/* ----- Lead DATA TABLE (dense, spreadsheet-style) ---------------------------- */
.lt-empty-icon { font-size: 2rem; color: var(--text-subtle); }

/* ----- Lead / data GRID CARD -------------------------------------------------
   The grid sits on its own white surface panel instead of floating on the page.
   Generic on purpose: Leads, My Work and Quote History all wrap their
   .data-table in <div class="card lead-grid-card"> for one uniform look.
   The card supplies the surface (--surface-1 bg + border + radius + elevation
   + overflow:hidden from .card); here we zero the padding so the table runs
   edge to edge and its rows clip cleanly to the rounded corners. */
.lead-grid-card { padding: 0; }
.lead-grid-card > .tc-scroll-x { border-radius: inherit; }
.lead-grid-card .data-table { margin: 0; }

/* Comfortable left/right gutters so the first/last columns aren't jammed against
   the card edge. Applies to any .data-table inside the card (generic). */
.lead-grid-card .data-table th:first-child,
.lead-grid-card .data-table td:first-child { padding-left: var(--sp-4); }
.lead-grid-card .data-table th:last-child,
.lead-grid-card .data-table td:last-child { padding-right: var(--sp-4); }

/* Opaque header row with a firm divider + uppercase micro-caps (reinforces the
   shared .data-table head so it reads as a proper column header, not body rows). */
.lead-grid-card .data-table thead th {
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border-strong);
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* Subtle 1px row dividers + a clear hover surface. Zebra intentionally off. */
.lead-grid-card .data-table td { border-bottom: 1px solid var(--border-color); }
.lead-grid-card .data-table tbody tr:last-child td { border-bottom: none; }
.lead-grid-card .data-table tbody tr:hover td { background: var(--surface-2); }

/* Dense but comfortable rows on the shared .data-table scaffold (~48px). */
.lead-table { table-layout: auto; }

/* Calmer, cleaner sticky header — micro-caps on an opaque head with a firm divider. */
.lead-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--table-head-bg);
    letter-spacing: 0.05em; padding: 10px var(--sp-3);
    border-bottom: 1px solid var(--border-strong);
}

/* Column rhythm: Client + Status carry the width; the compact columns stay tight and never wrap. */
.lead-table th.lt-col-client { min-width: 190px; }
.lead-table th.lt-col-status { min-width: 240px; }
.lead-table td[data-label="Source"],
.lead-table td[data-label="Quote #"],
.lead-table td[data-label="Age"] { white-space: nowrap; }

.lead-table td { padding: 8px var(--sp-3); vertical-align: middle; }
/* Desktop-only row height. Unguarded, this inflates every stacked label/value line on any page
   that pairs .lead-table with .tc-stack, turning each card row into a 48px-tall gap. */
@media (min-width: 641px) {
    .lead-table tbody tr.lead-row td { height: 48px; }
}
.lead-table tbody tr.lead-row:hover td { background: var(--surface-2); }
.lead-table tbody tr.lead-row-highlighted td { background: rgba(var(--toyota-red-rgb), 0.07); }
.lead-table tbody tr.lead-row-highlighted td:first-child { box-shadow: inset 3px 0 0 var(--toyota-red); }
.lead-table tbody tr.lead-row { scroll-margin-top: 80px; }

/* Client cell: bold name + muted sub-line(s) */
.lt-client { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lt-client-name { font-weight: 700; color: var(--text-primary); font-size: var(--text-base); overflow-wrap: anywhere; }
.lt-client-sub { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.lt-client-sub i { font-size: 0.85em; }
.lt-client-alloc { font-size: var(--text-xs); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.lt-client-alloc i { color: var(--success-fg); font-size: 0.85em; flex: 0 0 auto; }

/* Source chip: TIMNET red / Fourbuy blue */
.lt-source { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; }
.lt-source-timnet { background: rgba(var(--toyota-red-rgb), 0.12); color: var(--toyota-red); }
.lt-source-fourbuy { background: var(--info-surface); color: var(--info-surface-text); }

/* Status cell: derived badge + optional pills, then a compact actions strip */
.lt-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lt-sla-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--danger-surface); color: var(--danger-surface-text); white-space: nowrap; }
.lt-veh-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); white-space: nowrap; }
.lt-status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lt-awaiting { font-size: var(--text-xs); color: var(--text-subtle); display: inline-flex; align-items: center; gap: 4px; }

/* Time-to-call — the headline "how long did it take to phone the client" metric. Deliberately
   prominent (bordered pill, tabular figure) and colour-coded by the accepted→first-call SLA. */
.lt-ttc {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: var(--text-sm); font-weight: 600; line-height: 1.3;
    padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
}
.lt-ttc i { font-size: 0.9em; flex: 0 0 auto; }
.lt-ttc strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.lt-ttc-called { background: var(--success-surface); color: var(--success-surface-text); }
.lt-ttc-waiting.sla-running { background: var(--warning-surface); color: var(--warning-surface-text); }
.lt-ttc-waiting.sla-breach { background: var(--danger-surface); color: var(--danger-surface-text); }
.lt-ttc-waiting.sla-idle,
.lt-ttc-waiting.sla-ok { background: var(--surface-2); color: var(--text-secondary); }
/* Compact variant shown against already-closed leads (the terminal-category tabs). */
.lt-ttc-sm { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; }

/* Tiny inline buttons inside the status cell (log call / set outcome / change) */
.lt-mini-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-1);
    color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
    cursor: pointer; white-space: nowrap; line-height: 1.4;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lt-mini-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-subtle); color: var(--text-primary); }
.lt-mini-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lt-mini-btn-accent { border-color: var(--toyota-red); color: var(--toyota-red); }
.lt-mini-btn-accent:hover:not(:disabled) { background: rgba(var(--toyota-red-rgb), 0.08); border-color: var(--toyota-red); color: var(--toyota-red); }
.lt-mini-btn-accent.is-open { background: rgba(var(--toyota-red-rgb), 0.10); }

/* Quote / age helpers */
.lt-age { color: var(--text-muted); white-space: nowrap; }

/* Actions cell — tight: primary allocate + icon buttons */
.lt-actions-col { white-space: nowrap; text-align: right; width: 1%; }
.lt-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lt-allocate { white-space: nowrap; }
.lt-icon-danger { color: var(--danger-fg); }
.lt-icon-danger:hover { background: var(--danger-surface); color: var(--danger-surface-text); }

/* Grouped-by-consultant header row (awaiting / completed tabs) */
.lt-group-row td.lt-fullcell { padding: 0; background: transparent; border-bottom: none; }
.lt-group {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 7px 12px;
    font-family: var(--font-display, inherit); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--text-primary); border-left: 3px solid var(--toyota-red); background: var(--surface-2); border-radius: var(--radius-sm);
}
.lt-group i { color: var(--toyota-red); font-size: 0.9rem; }
.lead-table tbody tr.lt-group-row:first-child .lt-group { margin-top: 0; }
.lead-table tbody tr.lt-group-row:hover td { background: transparent; }

/* ===== Leads grid: filter toolbar + sortable headers + richer group headers (change #5) =====
   Token-only, correct in light AND dark; every value resolves from theme.css. */

/* Filter + sort toolbar (sits between the search box and the grid) */
.lt-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); min-width: 0; }
.lt-filter-group { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lt-filter-group.is-disabled { opacity: 0.5; pointer-events: none; }
.lt-filter-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); white-space: nowrap; }
.lt-filter-label i { font-size: 0.95em; }
.lt-toolbar-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lt-sortmenu { display: inline-flex; align-items: center; gap: 6px; }
select.lt-sort-select { height: 32px; min-width: 118px; width: auto; padding: 4px 28px 4px 10px; font-size: var(--text-xs); }
select.lt-source-select { height: 32px; min-width: 150px; max-width: 240px; width: auto; padding: 4px 28px 4px 10px; font-size: var(--text-xs); }
.lt-sort-dir { width: 32px; height: 32px; flex: 0 0 auto; }
.lt-result-count { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lt-result-count strong { color: var(--text-primary); font-weight: 700; }

/* Sortable column headers — a full-width reset button carrying a caret */
.lead-table thead th.lt-th-sort { padding: 0; }
.lt-sort-btn {
    display: inline-flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: none; cursor: pointer; font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit; font-weight: inherit;
    padding: 10px var(--sp-3);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lead-table thead th.lt-th-sort.right .lt-sort-btn { justify-content: flex-end; }
/* Client is the first column and carries the card's sp-4 left gutter — drop the button's own left
   padding so the "Client" label lines up with the body client names below it. */
.lead-table thead th.lt-col-client.lt-th-sort .lt-sort-btn { padding-left: 0; }
.lead-table thead th.lt-th-sort:hover { background: var(--surface-2); }
.lead-table thead th.lt-th-sort:hover .lt-sort-btn { color: var(--text-primary); }
.lead-table thead th.lt-th-sort.is-sorted .lt-sort-btn { color: var(--toyota-red); }
.lead-table thead th.lt-th-sort.is-sorted { box-shadow: inset 0 -2px 0 var(--toyota-red); }
.lt-sort-caret { font-size: 0.82em; flex: 0 0 auto; }
.lt-sort-idle { opacity: 0.35; }

/* Sticky header hairline so the head detaches cleanly as body rows scroll under it */
.lead-table thead th { box-shadow: 0 1px 0 var(--border-strong); }

/* Row hover: soft brand accent bar on the pointed-at row (highlighted row's inset still wins) */
.lead-table tbody tr.lead-row:hover td:first-child { box-shadow: inset 2px 0 0 rgba(var(--toyota-red-rgb), 0.45); }
.lead-table tbody tr.lead-row-highlighted:hover td:first-child { box-shadow: inset 3px 0 0 var(--toyota-red); }

/* Richer consultant group header: avatar + name (left), at-a-glance stat cluster (right) */
.lt-group { justify-content: space-between; flex-wrap: wrap; }
.lt-group-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lt-group-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--border-color); font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; color: var(--text-secondary); }
.lt-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lt-group-stats { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lt-gstat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-gstat i { font-size: 0.9em; opacity: 0.8; color: inherit; }
.lt-gstat-warn { color: var(--warning-fg); font-weight: 700; }
.lt-gstat-ok { color: var(--success-fg); }

/* ===== Owner grouping: collapsible consultant blocks + the Owner filter ===================== */

/* The Owner dropdown sits beside Source and is sized to hold a full "Firstname Surname". */
select.lt-owner-select { height: 32px; min-width: 160px; max-width: 240px; width: auto; padding: 4px 28px 4px 10px; font-size: var(--text-xs); }

/* The whole group header is the collapse control. It reads as a bar, not a button, until you
   point at it — a supervisor scanning ten consultants should see a scoreboard, not ten buttons. */
.lt-group[role="button"] { cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lt-group[role="button"]:hover { background: var(--surface-3, var(--surface-2)); }
.lt-group[role="button"]:focus-visible { outline: 2px solid var(--toyota-red); outline-offset: 2px; }
.lt-group-chev { flex: 0 0 auto; font-size: 0.72rem; opacity: 0.75; transition: transform var(--dur-fast) var(--ease); }
.lt-group[role="button"]:hover .lt-group-chev { opacity: 1; }

/* A folded block is the only thing left of that consultant on screen, so it carries a little more
   weight than an open one — and an owner with an overdue first call keeps a warning edge either way. */
.lt-group.is-folded { background: var(--surface-1); border-left-width: 4px; }
.lt-group.has-overdue { border-left-color: var(--warning-fg); }
.lt-group.has-overdue .lt-group-chev, .lt-group.has-overdue i { color: var(--warning-fg); }

/* Change #4: clear vertical separation ABOVE each group header except the first */
.lead-table tbody tr.lt-group-row:not(:first-child) td.lt-fullcell { padding-top: var(--sp-4); }

/* Expandable inline outcome editor row (spans all columns) */
.lt-editrow td.lt-fullcell { background: var(--surface-2); border-bottom: 1px solid var(--table-row-border); }
.lt-editrow:hover td { background: var(--surface-2); }
.lt-outcome-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px 14px; }
.lt-editor-label { flex-basis: 100%; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.lt-editor-label i { color: var(--toyota-red); }

/* ----- New-lead alert popups (overlay bg/blur/centering from toyota-redesign) - */
.alert-overlay { position: fixed; inset: 0; }
.alert-stack { display: flex; flex-direction: column; gap: var(--sp-3); width: min(94vw, 400px); max-height: 90dvh; overflow-y: auto; min-width: 0; }
.alert-popup { position: relative; background: var(--surface-1); border: 1px solid var(--border-color); border-top: 3px solid var(--toyota-red); border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 18px 16px 14px; text-align: center; animation: tds-dialog-in var(--dur-med) var(--ease); }
.alert-popup-allocating { opacity: 0.75; }
.alert-close-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: none; background: transparent; color: var(--text-subtle); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.alert-close-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.alert-siren { position: relative; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: var(--toyota-red); background: rgba(var(--toyota-red-rgb), 0.10); }
.siren-light { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--toyota-red-rgb), 0.4); animation: tc-siren 1.2s ease-out infinite; }
@keyframes tc-siren { from { transform: scale(1); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.alert-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.alert-source { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.alert-source.timnet { background: rgba(var(--toyota-red-rgb), 0.10); color: var(--toyota-red); }
.alert-source.fourbuy { background: var(--info-surface); color: var(--info-surface-text); }
.alert-client { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0 0 2px; overflow-wrap: anywhere; }
.alert-contact, .alert-quote, .alert-postal { font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0; display: flex; align-items: center; justify-content: center; gap: 6px; overflow-wrap: anywhere; }
.alert-premium { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--toyota-red); margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.alert-premium .currency { font-size: 0.7em; margin-right: 2px; }
.alert-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.alert-allocate-btn, .alert-dismiss-btn {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); cursor: pointer; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.alert-allocate-btn { background: var(--toyota-red); border-color: var(--toyota-red); color: #fff; }
.alert-allocate-btn:hover:not(:disabled) { background: var(--toyota-red-dark); border-color: var(--toyota-red-dark); }
.alert-allocate-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.alert-dismiss-btn:hover { background: var(--surface-2); border-color: var(--text-subtle); }
.alert-already-allocated { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--success-surface); color: var(--success-surface-text); font-size: var(--text-sm); font-weight: 600; }

/* ----- Supervisor assign modal (sibling of the global .modal-backdrop dimmer) - */
.assign-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    /* Must beat .modal-backdrop's z-index:1040!important from skin-insurancedialog-light.css
       (still linked globally) — the panel was at ~81, so the dimmer painted OVER the
       consultant list and clicks closed the modal instead of selecting a person. */
    z-index: 1060;
    width: min(94vw, 480px); max-height: min(88dvh, 640px);
    display: flex; flex-direction: column;
    background: var(--modal-bg, var(--surface-1)); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--elev-4); overflow: hidden;
    animation: tds-dialog-in var(--dur-med) var(--ease);
}
.assign-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-color); }
.assign-modal-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.assign-modal-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); flex: 0 0 auto; display: grid; place-items: center; background: rgba(var(--toyota-red-rgb), 0.10); color: var(--toyota-red); }
.assign-modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0; }
.assign-modal-subtitle { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; overflow-wrap: anywhere; }
.assign-modal-close { width: 32px; height: 32px; flex: 0 0 auto; border: none; background: transparent; color: var(--text-subtle); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.assign-modal-close:hover { background: var(--surface-2); color: var(--text-primary); }
.assign-currently { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) var(--sp-4) 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--info-surface); color: var(--info-surface-text); font-size: var(--text-xs); }
.assign-modal-body { padding: var(--sp-4); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.assign-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; margin-bottom: 8px; }
.consultant-list { display: flex; flex-direction: column; gap: 6px; }
.consultant-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left;
    padding: 8px 10px; border: 1px solid var(--border-color); background: var(--surface-1);
    border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.consultant-item:hover:not(:disabled) { background: var(--surface-2); }
.consultant-item-selected { border-color: var(--toyota-red); background: rgba(var(--toyota-red-rgb), 0.06); }
.consultant-item-current { opacity: 0.6; cursor: default; }
.consultant-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-color); color: var(--text-secondary); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; }
.consultant-item-selected .consultant-avatar { background: var(--toyota-red); border-color: var(--toyota-red); color: #fff; }
.consultant-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.consultant-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consultant-load { font-size: var(--text-xs); color: var(--text-muted); }
.consultant-load-free { color: var(--success-fg); }
.consultant-tag-current { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); background: var(--surface-2); border: 1px solid var(--border-color); padding: 2px 7px; border-radius: 999px; }
.consultant-check { color: var(--toyota-red); flex: 0 0 auto; }
.assign-no-consultants { font-size: var(--text-sm); color: var(--text-muted); text-align: center; padding: var(--sp-3) 0; margin: 0; }
.assign-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color); background: var(--surface-2); }
.btn-modal-cancel, .btn-modal-confirm {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); cursor: pointer; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-modal-cancel:hover { background: var(--surface-2); border-color: var(--text-subtle); }
.btn-modal-confirm { background: var(--toyota-red); border-color: var(--toyota-red); color: #fff; }
.btn-modal-confirm:hover:not(:disabled) { background: var(--toyota-red-dark); border-color: var(--toyota-red-dark); }
.btn-modal-confirm:disabled { opacity: 0.55; cursor: not-allowed; }

/* ----- Leads @ phone width — nothing overflows at 380px ----------------------- */
@media (max-width: 640px) {
    /* filter tiles become one horizontally-scrolling row inside their own container */
    .stat-filter-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .stat-filter-grid::-webkit-scrollbar { display: none; }
    .stat-filter-grid .sf-card { flex: 0 0 auto; min-width: 148px; }

    /* At phone width each row IS its own stacked card (.tc-stack), so the outer
       .lead-grid-card surface would nest a card inside a card — drop it back to a
       transparent container and reset the desktop edge gutters. */
    .lead-grid-card { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .lead-grid-card .data-table th:first-child,
    .lead-grid-card .data-table td:first-child { padding-left: 0; }
    .lead-grid-card .data-table th:last-child,
    .lead-grid-card .data-table td:last-child { padding-right: 0; }

    /* Lead table → stacked cards (.tc-stack handles the block layout). Full-width
       group / editor rows keep their own left-aligned layout, no data-label ::before. */
    .lead-table tbody tr.lead-row-highlighted td:first-child { box-shadow: none; }
    .lead-table tbody tr.lead-row-highlighted { box-shadow: 0 0 0 2px var(--toyota-red), var(--elev-1); }
    .lead-table td.lt-fullcell { display: block; text-align: left; padding: 0; border-bottom: none; }
    .lead-table td.lt-fullcell::before { display: none; }
    .lead-table tbody tr.lt-group-row, .lead-table tbody tr.lt-editrow { border: none; box-shadow: none; background: transparent; padding: 0; margin-bottom: 6px; }
    .lt-actions { justify-content: flex-start; flex-wrap: wrap; }
    .lt-status, .lt-status-actions { justify-content: flex-start; }
    .alert-stack { width: 100%; padding: 0 var(--sp-3); }

    /* Toolbar stacks: Source, Calls and the Sort+count row each go full-width. thead is clipped by
       .tc-stack, so the header sort carets vanish — the toolbar's Sort select is the mobile control. */
    .lt-toolbar { gap: var(--sp-2); }
    .lt-filter-group { width: 100%; }
    .lt-filter-group .tc-segmented { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
    .lt-filter-group .tc-segmented::-webkit-scrollbar { display: none; }
    .lt-filter-group .tc-seg { flex: 0 0 auto; }
    .lt-toolbar-end { margin-left: 0; width: 100%; justify-content: space-between; }
    .lt-sort-select { flex: 1 1 auto; }
    select.lt-source-select, select.lt-owner-select { flex: 1 1 auto; max-width: none; width: 100%; }
    /* Group header: stats drop under the consultant name at narrow widths */
    .lt-group-stats { width: 100%; justify-content: flex-start; }
}

/* =============================================================================
   LEADS — inline outcome editor select (DB-driven Lead_Outcome). Token-based, both themes.
   ============================================================================= */
.lead-outcome-select {
    height: 34px;
    min-width: 160px;
    max-width: 100%;
    padding: 4px 30px 4px 11px;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--surface-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
.lead-outcome-select:focus {
    outline: none;
    border-color: var(--toyota-red);
    box-shadow: 0 0 0 3px rgba(var(--toyota-red-rgb), 0.14);
}
/* Still referenced by QuoteDetails' Lead Outcome section (globally-linked console.css). */
.lead-outcome-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.lead-outcome-change {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.74rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.lead-outcome-change:hover { color: var(--toyota-red); background: var(--surface-2); }
.lead-outcome-change:disabled { opacity: 0.6; cursor: not-allowed; }
.lead-outcome-awaiting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--text-subtle);
}

/* Empty-state (shared by QuoteDetails / AllRiskQuote / CompanyDashboard via console.css) */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 20px; }
.empty-icon { font-size: 2rem; color: var(--text-subtle); }
.empty-text { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.empty-state .spinner-border { width: 2rem; height: 2rem; border-width: 3px; color: var(--toyota-red) !important; }

/* ============================================================
   My Work — unified role-aware action inbox (/my-work)
   ============================================================ */
.mw-hero {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-4); margin-bottom: var(--sp-4);
    background: var(--surface-1); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--elev-1);
    position: relative; overflow: hidden;
}
.mw-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--toyota-red); }
.mw-hero-clear::before { background: var(--success); }
.mw-hero-text h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.3px; }
.mw-hero-text p { font-size: var(--text-base); color: var(--text-secondary); margin: 4px 0 0; }
.mw-hero-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.mw-hero-count { display: flex; flex-direction: column; align-items: center; line-height: 1; flex: 0 0 auto; padding-left: var(--sp-3); }
.mw-hero-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--toyota-red); }
.mw-hero-count.is-clear .mw-hero-num { color: var(--success); }
.mw-hero-lbl { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.mw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mw-tile {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-1); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--elev-1);
    text-decoration: none; color: inherit; position: relative; overflow: hidden;
    transition: transform 90ms var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mw-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--elev-2, 0 6px 18px rgba(0,0,0,0.12)); }
.mw-tile.has-work::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.mw-tile-leads.has-work::before { background: var(--toyota-red); }
.mw-tile-uw.has-work::before { background: var(--info); }
.mw-tile-appr.has-work::before { background: var(--warning); }
.mw-tile-vip.has-work::before { background: var(--success); }
.mw-tile-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 auto; }
.mw-tile-leads .mw-tile-icon { background: var(--danger-light); color: var(--toyota-red); }
.mw-tile-uw .mw-tile-icon { background: var(--info-light); color: var(--info); }
.mw-tile-appr .mw-tile-icon { background: var(--warning-light); color: var(--warning-fg); }
.mw-tile-vip .mw-tile-icon { background: var(--success-light); color: var(--success); }
.mw-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mw-tile-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.mw-tile:not(.has-work) .mw-tile-num { color: var(--text-muted); }
.mw-tile-lbl { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.mw-tile-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.mw-tile-go { color: var(--text-subtle); font-size: 0.9rem; flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.mw-tile:hover .mw-tile-go { transform: translateX(3px); color: var(--text-secondary); }

.mw-clear-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
    background: var(--success-bg); border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
}
.mw-clear-banner > i { font-size: 1.5rem; color: var(--success); flex: 0 0 auto; }
.mw-clear-banner strong { display: block; color: var(--text-primary); }
.mw-clear-banner span { font-size: var(--text-sm); color: var(--text-secondary); }

.mw-sections { display: flex; flex-direction: column; gap: var(--sp-4); }
.mw-section .card-header h3,
.mw-cta h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0; }
.mw-section .card-header h3 i { color: var(--toyota-red); }
.mw-open { font-size: var(--text-sm); font-weight: 600; color: var(--toyota-red); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mw-open:hover { text-decoration: underline; }

.mw-list { display: flex; flex-direction: column; }
.mw-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color);
    text-decoration: none; color: inherit;
    transition: background var(--dur-fast) var(--ease);
}
.mw-list .mw-item:first-child { border-top: none; }
.mw-item:hover { background: var(--surface-2); }
.mw-item.is-urgent { border-left: 3px solid var(--danger); }
.mw-item-main { display: flex; flex-direction: column; min-width: 0; }
.mw-item-title { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--toyota-red); }
.mw-item-sub { font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-item-meta { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-xs); }
.mw-item-when { white-space: nowrap; }
.mw-item-meta .bi-chevron-right { color: var(--text-subtle); }
.mw-urgent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; }

.mw-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.mw-cta p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.mw-cta .tc-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    .mw-hero-num { font-size: 1.7rem; }
    .mw-item-sub { max-width: 48vw; }
    .mw-cta { flex-direction: column; align-items: stretch; }
    .mw-cta .tc-btn { justify-content: center; }
}

.mw-tools { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.mw-tools-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.mw-tool { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.mw-tool:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mw-tool > .bi:first-child { color: var(--toyota-red); }
.mw-tool-go { color: var(--text-subtle); font-size: 0.85rem; }

/* -- My Work: embedded queues + inline actions (operational hub) ----------------- */

/* Attention pulse on tiles whose queue has pending items — soft ring only, no text flashing. */
@keyframes mw-flash-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--toyota-red-rgb), 0); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--toyota-red-rgb), 0.25); }
}
.mw-flash { animation: mw-flash-ring 2s ease-in-out infinite; }
.mw-flash:hover { animation: none; } /* let the hover elevation read cleanly */
@media (prefers-reduced-motion: reduce) { .mw-flash { animation: none; } }

/* Tiles jump to in-page sections; land the anchor below the sticky topbar. */
.mw-section[id] { scroll-margin-top: 84px; }

/* Sub-headers split a queue card into bands (pending vs my queue). */
.mw-subhead { padding: 8px var(--sp-4) 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-top: 1px solid var(--border-color); }
.card-header + .mw-subhead { border-top: none; }

/* Action rows: quote/client left, meta + inline buttons right. */
.mw-rows { display: flex; flex-direction: column; }
.mw-qrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: 9px var(--sp-4); border-top: 1px solid var(--border-color); }
.mw-subhead + .mw-rows .mw-qrow:first-child { border-top: none; }
.mw-qrow:hover { background: var(--surface-2); }
.mw-qrow.is-urgent { border-left: 3px solid var(--danger); }
.mw-qrow-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.mw-qrow-quote { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--toyota-red); }
.mw-qrow-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.mw-qrow-client { font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-qrow-reason { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.mw-qrow-when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.mw-qrow-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.mw-view { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); text-decoration: none; padding: 4px 6px; }
.mw-view:hover { color: var(--toyota-red); text-decoration: underline; }
.mw-conclude { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); font-weight: 600; color: var(--toyota-red); text-decoration: none; white-space: nowrap; }
.mw-conclude:hover { text-decoration: underline; }

/* Soft success (approve) button — token-driven so light + dark both work. */
.mw-btn-approve { background: var(--success-light); border-color: var(--success-border); color: var(--success); }
.mw-btn-approve:hover:not(:disabled) { background: var(--success-surface); border-color: var(--success-surface-border); }

/* Post-approve reminder: the premium only refreshes when the vehicle dialog reopens. */
.mw-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) var(--sp-4) 0; padding: 8px var(--sp-3); background: var(--success-light); border: 1px solid var(--success-border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-primary); }
.mw-note > i { color: var(--success); flex: 0 0 auto; }
.mw-note a { font-weight: 600; color: var(--toyota-red); white-space: nowrap; }

/* Empty band inside a queue card. */
.mw-sec-empty { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); color: var(--text-muted); }
.mw-sec-empty > i { color: var(--success); }

@media (max-width: 640px) {
    .mw-qrow-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
    .mw-qrow-reason { max-width: 100%; }
}

/* -- My Work reworked: compact sign-off strip + tabbed My Leads workspace -------- */

/* Supervisor sign-off strip sits above the leads panel; kept tight so it never dominates. */
.mw-signoff { margin-bottom: var(--sp-4); }
.mw-signoff .card-header h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0; }
.mw-signoff .card-header h3 i { color: var(--toyota-red); }

/* My Leads panel — the star. Heading, then the shared tab grid + dense lead table. */
.mw-leads { margin-top: var(--sp-2); }
.mw-leads-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mw-leads-head h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -0.2px; }
.mw-leads-head h3 i { color: var(--toyota-red); }

/* Muted "N unallocated waiting → Leads" hint under the tabs (grabbing happens on the Leads page). */
.mw-unalloc-hint { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--text-muted); }
.mw-unalloc-hint > i { color: var(--warning-fg); flex: 0 0 auto; }
.mw-unalloc-hint a { font-weight: 600; color: var(--toyota-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mw-unalloc-hint a:hover { text-decoration: underline; }

/* Per-tab empty state sits inside the panel — a touch tighter than a full-page empty. */
.mw-tab-empty { padding: var(--sp-5) var(--sp-3); }

/* ===== Lead history timeline (quote page) ===== */
.qd-timeline { list-style: none; margin: 0; padding: 0; }
.qd-tl-item { position: relative; display: flex; gap: var(--sp-3); padding: 0 0 var(--sp-3) 0; }
.qd-tl-item::before { content: ''; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--border-color); }
.qd-tl-item:last-child { padding-bottom: 0; }
.qd-tl-item:last-child::before { display: none; }
.qd-tl-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; background: var(--surface-2); border: 1px solid var(--border-color); color: var(--text-secondary); z-index: 1; }
.qd-tl-status .qd-tl-dot { background: var(--danger-light); color: var(--toyota-red); border-color: var(--danger-light); }
.qd-tl-pipeline .qd-tl-dot { background: var(--info-light); color: var(--info); }
.qd-tl-body { min-width: 0; padding-top: 2px; }
.qd-tl-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.qd-tl-detail { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 1px; }
.qd-tl-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ============================================================
   MY WORK — per-lead "Details" expand row (status history + call log)
   Full-width row under a lead; two panels side-by-side on desktop,
   stacked on mobile. Reuses .qd-timeline / .qd-tl-* for the history tree.
   ============================================================ */
.mw-detailrow td.lt-fullcell { background: var(--surface-2); border-bottom: 1px solid var(--table-row-border); padding: var(--sp-4); }
.mw-detailrow:hover td { background: var(--surface-2); }

.mw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }

.mw-detail-panel { background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.mw-detail-head { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: var(--sp-3); }
.mw-detail-head i { color: var(--toyota-red); }
.mw-detail-empty { font-size: var(--text-sm); color: var(--text-muted); margin: 0; padding: var(--sp-2) 0; }

/* Call log — compact stacked list of calls */
.mw-calllog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mw-call { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-color); }
.mw-call-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.mw-call-route { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-primary); min-width: 0; flex: 1 1 auto; word-break: break-word; }
.mw-call-arrow { color: var(--text-subtle); font-size: 0.72rem; }
.mw-call-status { flex: 0 0 auto; }

@media (max-width: 640px) {
    .mw-detail-grid { grid-template-columns: 1fr; }
    .mw-detailrow td.lt-fullcell { padding: var(--sp-3); }
}

/* ============================================================
   Lead Details — the lead-only third tab of /Quotes.
   Token-only; light + dark both covered via theme.css vars.
   Extends the shared .qd-timeline / .qd-tl-* vocabulary with
   lifecycle STATE modifiers rather than a parallel system.
   ============================================================ */
.ld-container { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ld-card { min-width: 0; }

/* Status hero + change control */
.ld-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ld-hero-badge { font-size: var(--text-sm); padding: 5px 13px; }
.ld-hero-caption { font-size: var(--text-sm); color: var(--text-muted); margin: 10px 0 var(--sp-3); }
.ld-save-hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 var(--sp-3); }
.ld-save-btn { margin-top: 2px; }
.ld-loading { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-muted); padding: var(--sp-2) 0; }

/* SLA trio — auto-fit stat cards, scrolls-then-stacks on narrow screens for free */
.ld-sla-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: var(--sp-4); min-width: 0; }
.ld-sla-grid .stat-card .value { font-size: var(--text-xl); }

/* Lifecycle stepper — journey states layered on the timeline dots */
.ld-stepper { margin-top: 2px; }
.qd-tl-done .qd-tl-dot { background: var(--toyota-red); color: #fff; border-color: var(--toyota-red); }
.qd-tl-current .qd-tl-dot { background: var(--toyota-red); color: #fff; border-color: var(--toyota-red); box-shadow: 0 0 0 4px var(--focus-ring); }
/* Outcome-stage tones reuse the badge surface/text trios so contrast holds in light AND dark. */
.qd-tl-won .qd-tl-dot { background: var(--success-surface); color: var(--success-surface-text); border-color: var(--success-surface-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.qd-tl-lost .qd-tl-dot { background: var(--danger-surface); color: var(--danger-surface-text); border-color: var(--danger-surface-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.qd-tl-open .qd-tl-dot { background: var(--warning-surface); color: var(--warning-surface-text); border-color: var(--warning-surface-border); box-shadow: 0 0 0 4px var(--focus-ring); }
.qd-tl-pending { opacity: 0.6; }
.qd-tl-pending .qd-tl-dot { background: var(--surface-2); border-style: dashed; color: var(--text-subtle); }
.qd-tl-dur {
    display: inline-block; font-size: var(--text-xs); color: var(--text-muted);
    background: var(--surface-2); border: 1px solid var(--border-color);
    border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums;
}


/* ---- Call-history row extras (talk time, direction, recording, unavailable state) ---- */
.mw-call-dir { font-size: .78rem; color: var(--text-secondary); margin-right: 6px; }
.mw-call-talk { font-size: .74rem; font-weight: 700; color: var(--text-secondary);
    background: var(--surface-2, rgba(127,127,127,.12)); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.mw-call-rec { font-size: .72rem; color: var(--toyota-red); margin-left: 2px; }
/* Distinct from the plain "no calls" empty state — this means we could not CHECK. */
.mw-detail-warn { color: #b45309; background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.35); border-radius: 8px; padding: 9px 11px; }
.theme-dark .mw-detail-warn { color: #fbbf24; }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   NARROW-SCREEN TIER  —  small phones down to 320px, primary target 400px.

   The portal previously stopped at 640px with a single 430px rule, so on a 400px handset
   any page containing a table pushed the whole document sideways. Fourteen pages render a
   <table> with no scroll wrapper (AdminDashboard, Leads, MyWork, QuoteHistory, Alerts,
   CompanyDashboard, Mappings, RateCalculator and others), which is the single biggest cause.

   This tier fixes that centrally rather than page by page, so a page needs no markup change
   to stop overflowing. Page-specific layout still needs its own rules; this is the floor.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Nothing may ever scroll the document sideways ---------------------------------
   One over-wide child used to drag the entire shell with it. Contain it at the shell. */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; }
    .page, .content { max-width: 100vw; overflow-x: hidden; }

    /* Media and embeds never exceed their column. */
    .content img, .content svg, .content video, .content canvas { max-width: 100%; height: auto; }

    /* Long unbroken strings (quote refs, emails, URLs) wrap instead of stretching the row. */
    .content { overflow-wrap: anywhere; }

    /* ---- 2. Tables become their own scroll container -------------------------------
       display:block turns the table itself into the scroller, so pages that never wrapped
       their table in .tc-scroll-x stop breaking the layout. The table scrolls; the page
       does not. Preferred long term is still an explicit .tc-scroll-x wrapper. */
    .content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Keep columns readable rather than crushed once the table is free to scroll. */
    .content table thead th,
    .content table tbody td { white-space: nowrap; }
    /* ...except genuinely long text columns, which should wrap. */
    .content table td.tc-wrap,
    .content table td[data-wrap] { white-space: normal; min-width: 12rem; }

    /* An explicit wrapper still wins where a page has one.
       :not(.tc-stack) is load-bearing. Without it this rule has the SAME specificity as
       `table.tc-stack { display: block }` further up the file and, being later, wins — which
       silently kills the stacked card layout on every page that both wraps a table in
       .tc-scroll-x and marks it .tc-stack (Leads, MyWork, QuoteHistory, Alerts). A stacked
       table must stay display:block to lay its rows out as cards. */
    .tc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tc-scroll-x > table:not(.tc-stack) { display: table; }

    /* Likewise: a stacked table's cells must wrap, or every card becomes a scroller. */
    .content table.tc-stack thead th,
    .content table.tc-stack tbody td { white-space: normal; }
}

/* ---- 3. The 400px tier ---------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Reclaim horizontal space: gutters shrink before content does. */
    .content { padding: 12px 10px; }
    .page-wrap { padding: 0; }

    /* Every multi-column grid in the console vocabulary collapses to a single column. */
    .stat-grid,
    .card-grid,
    .tc-grid-2, .tc-grid-3, .tc-grid-4,
    .dash-grid, .ov-grid, .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* Headers stack; the action cluster drops below the title and goes full width. */
    .page-header,
    .tc-topbar,
    .tc-card-header,
    .ov-panel-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ph-actions,
    .tc-topbar-actions,
    .tc-card-header-actions { width: 100%; flex-wrap: wrap; }

    /* Toolbars wrap rather than overflow; filters get a usable width. */
    .tc-toolbar-row { flex-wrap: wrap; gap: 8px; }
    .tc-toolbar-row > * { flex: 1 1 auto; min-width: 0; }
    .tc-input, .tc-field, select, input[type="text"], input[type="search"] {
        min-width: 0; width: 100%;
    }

    /* Tab bars scroll horizontally instead of wrapping into a tangle. */
    .tc-tab-bar, .tc-segmented {
        overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
    }
    .tc-tab-bar::-webkit-scrollbar, .tc-segmented::-webkit-scrollbar { height: 0; }
    .tc-tab, .tc-seg { flex: 0 0 auto; }

    /* Touch targets. 40px is the practical floor for a thumb. */
    .tc-btn, .tc-icon-btn, .tc-page-btn { min-height: 40px; }
    .tc-btn-sm { min-height: 36px; }

    /* Buttons in a header row share the width instead of overflowing it. */
    .ph-actions .tc-btn,
    .tc-card-header-actions .tc-btn { flex: 1 1 auto; justify-content: center; }

    /* Cards lose their outer margin so they use the full width. */
    .tc-card, .card { border-radius: 10px; }
    .tc-card-body, .card-body { padding: 12px; }

    /* Dialogs go full-bleed; a centred modal wastes a third of a small screen. */
    .tc-modal, .assign-modal, .base-dialog, .modal-content {
        width: 100vw; max-width: 100vw; min-width: 0;
        border-radius: 0; margin: 0;
    }

    /* Type scale: headings come down, body text does not (readability floor). */
    .page-header h1, .tc-topbar-title { font-size: 1.15rem; }
    .stat-card .value, .tc-amt { font-size: 1.35rem; }

    /* Pagination stays on one line. */
    .tc-pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
}

/* ---- 4. Very small handsets (320-400px) ---------------------------------------------- */
@media (max-width: 400px) {
    .content { padding: 10px 8px; }

    /* Drop decorative columns so the essential ones fit without scrolling at all. */
    .content table .tc-col-optional,
    .content table th[data-optional],
    .content table td[data-optional] { display: none; }

    .tc-btn { padding-left: 10px; padding-right: 10px; font-size: .82rem; }
    .page-header h1, .tc-topbar-title { font-size: 1.05rem; }
    .tc-badge { font-size: .68rem; }
}

/* Flat-rate campaign: the package picker collapses to ONE locked Guardian card. It must not read
   as a broken/greyed control, so the disabled state keeps full contrast and loses the pointer only. */
.qd-pkg-seg.qd-pkg-locked { cursor: default; }
.qd-pkg-seg.qd-pkg-locked .tc-seg[disabled] { opacity: 1; cursor: default; }
.qd-pkg-hint .fa-lock { color: var(--toyota-red); margin-right: 4px; }

/* ============================================================================================
   F&I REFERRAL — "Referred by" card + the send-update modal.
   Token-only so light and dark both work; nothing here hard-codes a colour.
   ============================================================================================ */
.fni-card { border: 1px solid var(--border-color); border-left: 3px solid var(--toyota-red);
            border-radius: var(--radius-md, 8px); background: var(--surface-1); margin-bottom: var(--sp-4); overflow: hidden; }
.fni-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
            padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.fni-head h3 { margin: 0; font-family: var(--font-display, inherit); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.fni-head h3 i { color: var(--toyota-red); margin-right: 6px; }
.fni-body { padding: 12px 14px 14px; }
.fni-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.fni-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fni-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); }
.fni-v { font-size: var(--text-sm); color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.fni-link { color: var(--toyota-red); text-decoration: none; }
.fni-link:hover { text-decoration: underline; }
.fni-none { margin: 12px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.fni-none i { color: var(--text-subtle); margin-right: 5px; }

/* Audit trail: proof the dealership was actually told, and when. */
.fni-hist { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.fni-hist-title { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
                  letter-spacing: 0.05em; color: var(--text-subtle); margin-bottom: 6px; }
.fni-hist-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                font-size: var(--text-xs); color: var(--text-secondary); padding: 3px 0; }
.fni-hist-row i { color: var(--success-fg); }
.fni-hist-row.is-failed i { color: var(--danger-fg); }
.fni-hist-what { font-weight: 600; color: var(--text-primary); }
.fni-hist-when, .fni-hist-who { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fni-hist-err { color: var(--danger-fg); }

/* Modal */
.fni-modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
                      background: rgba(0,0,0,0.5); padding: var(--sp-4); }
.fni-modal { width: 100%; max-width: 480px; background: var(--surface-1); border: 1px solid var(--border-color);
             border-radius: var(--radius-md, 8px); box-shadow: 0 18px 50px rgba(0,0,0,0.35); max-height: 90vh; display: flex; flex-direction: column; }
.fni-modal-head { display: flex; align-items: center; justify-content: space-between;
                  padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.fni-modal-head h3 { margin: 0; font-family: var(--font-display, inherit); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.fni-modal-head h3 i { color: var(--toyota-red); margin-right: 7px; }
.fni-modal-x { background: none; border: none; cursor: pointer; color: var(--text-muted); width: 32px; height: 32px; border-radius: var(--radius-sm); }
.fni-modal-x:hover { background: var(--surface-2); color: var(--text-primary); }
.fni-modal-body { padding: 14px 16px; overflow-y: auto; }
.fni-modal-to { margin: 0 0 14px; font-size: var(--text-sm); color: var(--text-secondary); }
.fni-modal-addr { display: block; font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.fni-modal-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: 0.05em; color: var(--text-subtle); margin: 12px 0 5px; }
.fni-modal-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); }
.fni-modal-note { width: 100%; resize: vertical; }
.fni-modal-privacy { margin: 14px 0 0; padding: 9px 11px; border-radius: var(--radius-sm);
                     background: var(--surface-2); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.fni-modal-privacy i { color: var(--toyota-red); margin-right: 5px; }
.fni-modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2);
                  padding: 12px 16px; border-top: 1px solid var(--border-color); }

@media (max-width: 640px) {
    .fni-grid { grid-template-columns: 1fr; }
    .fni-modal { max-width: none; }
    .fni-modal-foot .tc-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
}