/* =============================================================================
   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 */
        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: 1290; 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;
    z-index: 1300;
    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; }
.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; }

/* 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 { 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;
}