/* ==========================================================================
   Model White design system — loaded last. Visual only.
   `html body` prefix gives specificity over per-page CSS loaded at runtime.
   ========================================================================== */
html body { font-family: var(--font-ui); font-size: var(--fs-md); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; }
html, body { overflow-x: hidden; max-width: 100%; }
html body h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
html body h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
html body h3 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
html body .eyebrow { color: var(--text-3); letter-spacing: 0.02em; text-transform: none; font-weight: 500; }

/* ---- shell: sidebar, topbar ---- */
html body .sidebar { background: rgba(255,255,255,0.86); backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid var(--line); }
html body .brand__mark { background: var(--text); color: #fff; border-radius: 10px; }
html body .nav-item { border-radius: 10px; color: var(--text-2); font-weight: 500; }
html body .nav-item:hover { background: var(--surface-2); color: var(--text); }
html body .nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
html body .nav-item .nav-badge, html body .badge { background: var(--brand); color: #fff; }
html body .badge.red { background: var(--bad); }
html body .topbar { background: rgba(245,245,247,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; }
html body .search-trigger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-3); }

/* ---- page head ---- */
html body .page { max-width: var(--content-max); }
html body .page-head h1 { font-size: var(--fs-3xl); }
html body .page-head .sub { color: var(--text-3); font-size: var(--fs-md); }

/* ---- buttons ---- */
html body .btn { border-radius: var(--r-pill); font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: none; transition: background var(--dur-1), transform var(--dur-1); }
html body .btn:hover { background: var(--surface-2); }
html body .btn:active { transform: scale(0.98); }
html body .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
html body .btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
html body .btn.ghost { background: transparent; border-color: transparent; }
html body .btn.ghost:hover { background: var(--surface-2); }
html body .btn.soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
html body .btn.danger { color: var(--bad); }
html body .btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
html body .btn.lg { height: 52px; padding: 0 26px; font-size: var(--fs-lg); }
html body .fab { background: var(--brand); color: #fff; box-shadow: 0 10px 30px rgba(0,113,227,0.35); }

/* ---- chips, pills, tabs, segmented ---- */
html body .chip { border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
html body .chip.active { background: var(--text); border-color: var(--text); color: #fff; }
html body .pill { border-radius: var(--r-pill); font-weight: 600; }
html body .tabs, html body .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-3); border: 0; border-radius: var(--r-pill); max-width: 100%; }
html body .tabs button, html body .segmented button { height: 36px; border: 0; margin: 0; border-radius: var(--r-pill); padding: 0 16px; color: var(--text-2); font-weight: 600; background: transparent; }
html body .tabs button.active, html body .segmented button.active, html body .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 0; }

/* ---- cards & stats ---- */
html body .card { background: var(--surface); border: 1px solid rgba(0,0,0,0.04); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
html body .card.pad { padding: 20px; }
html body .card__head { border-bottom: 1px solid var(--line); padding: 16px 20px; }
html body .card__head h3 { font-size: var(--fs-lg); font-weight: 650; }
html body .stat { border-radius: var(--r-xl); }
html body .stat__label { color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; text-transform: none; letter-spacing: 0; }
html body .stat__value { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-family: var(--font-ui); }
html body .stat--accent { background: var(--brand); color: #fff; }
html body .stat--accent .stat__label, html body .stat--accent .stat__sub { color: rgba(255,255,255,0.8); }
html body .grid { gap: 16px; }

/* ---- forms ---- */
html body .input, html body .select, html body .textarea { border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); min-height: 44px; font-size: var(--fs-md); }
html body .input:focus, html body .select:focus, html body .textarea:focus { border-color: var(--brand); box-shadow: var(--accent-glow); }
html body .field > label, html body .label { color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
html body .switch[aria-checked="true"] { background: var(--good); }

/* ---- tables ---- */
html body .table-wrap { border-radius: var(--r-xl); overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
html body .table th { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); padding: 14px 16px; }
html body .table td { padding: 14px 16px; border-bottom-color: var(--line); }
html body .table tbody tr.clickable:hover { background: var(--surface-2); }
html body .table tbody tr.selected { background: var(--brand-soft); }

/* ---- list rows, board, routing ---- */
html body .list-row { padding: 14px 20px; }
html body .truck-lane { border-radius: var(--r-xl); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-2); overflow: hidden; }
html body .truck-lane__head { padding: 16px 20px; font-size: var(--fs-lg); font-weight: 650; }
html body .stop { padding: 14px 20px; }
html body .stop .n { width: 30px; height: 30px; background: var(--brand); color: #fff; font-family: var(--font-ui); font-size: var(--fs-sm); }
html body .stop.pickup .n { background: var(--text); color: #fff; }
html body .kanban .kcard, html body .kcard { border-radius: var(--r-lg); box-shadow: var(--shadow-1); border: 1px solid var(--line); }

/* ---- inbox ---- */
html body .inbox { border-radius: var(--r-xl); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-2); }
html body .convo { padding: 14px 18px; }
html body .convo.active { background: var(--brand-soft); }
html body .bubble { border-radius: 20px; padding: 10px 14px; }
html body .bubble.out { background: var(--brand); }
html body .callpop__head { background: var(--text); }

/* ---- overlays ---- */
html body .drawer { border-left: 0; border-radius: 22px 0 0 22px; }
html body .modal, html body .palette { border-radius: var(--r-xl); }
html body .toast { border-radius: var(--r-lg); }

/* ---- phone ---- */
@media (max-width: 900px) {
  html body { --gutter: 16px; }
  html body .page { padding-left: 16px; padding-right: 16px; max-width: 100vw; overflow-x: hidden; }
  html body .page > * { max-width: 100%; min-width: 0; }
  html body .page-head h1 { font-size: 32px; }
  html body .page-head { flex-wrap: wrap; gap: 12px; }
  html body .page-head .actions { flex-wrap: wrap; }
  html body .mobile-nav { height: 64px; background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); box-sizing: content-box; }
  html body .mobile-nav > a, html body .mobile-nav > button { color: var(--text-3); font-weight: 500; font-size: 11px; }
  html body .mobile-nav > a.active, html body .mobile-nav > button.active { color: var(--brand); }
  html body .mobile-nav > a.active::before, html body .mobile-nav > button.active::before { display: none; }
  html body .mobile-nav > a svg, html body .mobile-nav > button svg { width: 24px; height: 24px; }
  html body .page { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  html body .card { border-radius: 20px; }
  html body .split, html body .split.even { grid-template-columns: minmax(0, 1fr); }
  html body .drawer { border-radius: 0; }
  html body pre, html body code { white-space: pre-wrap; word-break: break-word; }
  html body img, html body svg, html body canvas, html body video { max-width: 100%; }
}
@media (max-width: 640px) {
  /* Tables that opted into .stack become stacked cards (existing behavior); others scroll inside their card. */
  html body .table.stack tr { background: var(--surface); border-radius: 16px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  html body .table-wrap:has(.table.stack) { background: transparent; box-shadow: none; border: 0; }
  html body .stat__value { font-size: 28px; }
  html body .grid.cols-4, html body .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Every data table becomes stacked cards on a phone (labels come from <th> via stack-tables.js).
   Grids (schedule, timesheets) opt out with .sched-grid / .no-stack and scroll inside their card. */
@media (max-width: 640px) {
  html body .table:not(.no-stack):not(.sched-grid) thead { display: none; }
  html body .table:not(.no-stack):not(.sched-grid), html body .table:not(.no-stack):not(.sched-grid) tbody, html body .table:not(.no-stack):not(.sched-grid) tr { display: block; width: 100%; }
  html body .table:not(.no-stack):not(.sched-grid) tr { background: var(--surface); border-radius: 16px; margin: 0 0 10px; padding: 10px 0; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  html body .table:not(.no-stack):not(.sched-grid) td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 16px; text-align: right; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  html body .table:not(.no-stack):not(.sched-grid) td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--text-3); font: 500 var(--fs-sm)/1.4 var(--font-ui); text-align: left; }
  html body .table:not(.no-stack):not(.sched-grid) td[data-label=""]::before { content: none; }
  html body .table:not(.no-stack):not(.sched-grid) td:empty { display: none; }
  html body .table:not(.no-stack):not(.sched-grid) td .truncate { max-width: 55vw !important; }
  html body .table-wrap:has(.table:not(.no-stack):not(.sched-grid)) { background: transparent; box-shadow: none; border: 0; overflow: visible; }
}

/* ---- targeted fixes found on live at ~600px ---- */
/* Forms never push sideways: inputs (esp. date/datetime) shrink to their column. */
html body .form-grid > *, html body .field { min-width: 0; }
html body .input, html body .select, html body .textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 760px) { html body .form-grid { grid-template-columns: minmax(0, 1fr); } html body .form-grid .span-2 { grid-column: auto; } }

/* Leads board: name never collapses to "…"; heat score keeps its size. */
html body .kcard .row > .kcard__title { min-width: 0; flex: 1 1 auto; }
html body .kcard .row > :not(.kcard__title) { flex: none; }
html body .kcard__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html body .lead-board .kanban__col { flex-basis: 300px; }
/* Phone: one stage per screen, swipe between stages like tabs (snap), full width. */
@media (max-width: 760px) {
  html body .lead-board .kanban { scroll-snap-type: x mandatory; gap: 12px; min-height: 0; }
  html body .lead-board .kanban__col { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; max-height: none; }
  html body .leads-toolbar { max-width: 100%; }
  html body .leads-toolbar > * { min-width: 0; }
  html body .leads-toolbar .input { max-width: 100%; flex: 1 1 100%; }
  html body .leads-toolbar .chips, html body .leads-toolbar .row { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
}

/* Tab rows (Reports, Settings, anywhere): scroll inside, never clip the page. */
html body .tabs, html body .segmented { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
html body .tabs::-webkit-scrollbar, html body .segmented::-webkit-scrollbar { display: none; }
html body .tabs button, html body .segmented button { flex: 0 0 auto; white-space: nowrap; }

/* Routing Board on phone: lanes first, smaller map underneath. */
@media (max-width: 900px) {
  html body .routing-stack > :first-child { max-height: 170px; overflow: hidden; border-radius: var(--r-xl); }
  html body .routing-stack .leaflet-container { height: 170px !important; }
}
/* Order detail: single column on phone/tablet must not grow to its widest input. */
@media (max-width: 900px) { html body .order-layout { grid-template-columns: minmax(0, 1fr); } }
html body .order-layout > *, html body .grid > *, html body .split > * { min-width: 0; }
html body .page-head h1 { overflow-wrap: anywhere; white-space: normal; } html body .page-head > div { min-width: 0; }

/* ==== Model White pass 2 (Oct 28): Today hero, Routing header/board, DnD, leftovers ==== */
html body .mw-hero { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
html body .mw-tiles { gap: 14px; }
html body .mw-tile { padding: 18px 20px; min-height: 108px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; border-radius: 20px; }
html body .mw-tile .stat__label { font-size: 14px; color: var(--text-2); }
html body .mw-tile .stat__value { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; margin-top: 2px; font-variant-numeric: tabular-nums; }
html body .mw-tile .stat__sub { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
html body .skeleton-tile { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: mwshim 1.2s infinite linear; }
@keyframes mwshim { to { background-position: -200% 0; } }
html body .mw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }
html body .mw-cta { width: 100%; height: 52px; border-radius: var(--r-pill); font-size: 16px; font-weight: 600; justify-content: center; box-shadow: 0 6px 18px rgba(0,113,227,0.22); }
html body .mw-next { padding: 14px 18px 6px; border-radius: 20px; }
html body .mw-next__label { font-size: 13px; color: var(--text-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
html body .mw-next__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); }
html body .mw-next__row:last-child { border-bottom: 0; }
html body .mw-next__row:hover { text-decoration: none; }
html body .mw-next__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
html body .mw-next__n.pickup { background: var(--text); }
html body .mw-next__title { font-weight: 600; font-size: 16px; }
html body .mw-tag { flex: none; font-size: 12px; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
@media (min-width: 901px) { html body .mw-cta { width: auto; align-self: flex-start; padding: 0 32px; } }

/* Routing header: full-width segmented control, day stepper card, shift toggle */
html body .mw-seg .segmented, html body .mw-shift .segmented { display: flex; width: 100%; background: var(--surface); border: 1px solid var(--line); padding: 4px; }
html body .mw-seg .segmented button, html body .mw-shift .segmented button { flex: 1 1 0; height: 38px; }
html body .mw-seg .segmented button.active { background: var(--text); color: #fff; box-shadow: none; }
html body .mw-shift { margin-top: 10px; } html body .mw-shift .segmented button { height: 32px; font-size: 13px; }
html body .mw-daybar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 12px; border-radius: var(--r-pill); }
html body .mw-daybar__label { position: relative; flex: 1; text-align: center; font-weight: 650; font-size: 16px; cursor: pointer; }
html body .mw-daybar__label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
@media (min-width: 901px) { html body .mw-seg, html body .mw-daybar, html body .mw-shift { max-width: 460px; } }
html body .board { display: flex; flex-direction: column; gap: 14px; }
html body .board .mw-cta { margin-bottom: 2px; }

/* Lanes & stops */
html body .truck-lane { background: var(--surface); transition: box-shadow var(--dur-2), transform var(--dur-2); }
html body .truck-lane.drop { box-shadow: 0 0 0 2px var(--brand), var(--shadow-2); transform: scale(1.005); }
html body .truck-lane.unassigned .truck-lane__head .swatch { background: var(--warn) !important; }
html body .truck-lane__head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
html body .truck-lane__head .swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }
html body .empty-lanes { display: flex; flex-direction: column; gap: 8px; }
html body .truck-lane.empty-lane { box-shadow: none; border: 1px dashed var(--line-strong); }
html body .truck-lane.empty-lane .truck-lane__head { font-size: 14px; padding: 12px 16px; border-bottom: 0; font-weight: 600; }
html body .truck-lane.empty-lane.drop { border-color: var(--brand); background: var(--brand-soft); }
html body .stop { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: var(--surface); cursor: grab; padding: 12px 16px 12px 8px; }
html body .stop:last-child { border-bottom: 0; }
html body .stop.dragging { opacity: 0.35; }
html body .stop .n { flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
html body .stop__title { font-weight: 600; font-size: 15px; color: var(--text); display: block; }
html body .stop .grip { flex: none; width: 28px; height: 40px; display: grid; place-items: center; color: var(--text-3); touch-action: none; cursor: grab; border-radius: 8px; }
html body .stop .grip:active { background: var(--surface-2); }
html body .stop-ghost { box-shadow: var(--shadow-3); border-radius: 16px; opacity: 0.95; transform: rotate(-1deg); }
html body .move-opt { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; font: inherit; gap: 10px; min-height: 48px; }
html body .move-opt .swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* Routing calendar: UI font, not mono */
html body .rc-head > span, html body .rc-day__num, html body .rc-more, html body .rc-wc { font-family: var(--font-ui); letter-spacing: 0; }
html body .rc-head > span { text-transform: none; font-weight: 600; font-size: 12px; }
html body .rc-day__num { font-weight: 600; font-size: 14px; }
html body .rc-grid-card { border-radius: var(--r-xl); }
html body .rc-day.selected { box-shadow: inset 0 0 0 2px var(--brand); border-radius: 10px; }

/* Selected chips: crisp solid edge (no faded border/outline ring) */
html body .chip.active, html body .chip[aria-pressed="true"], html body .chip.on { background: var(--text); border: 1px solid var(--text); color: #fff; box-shadow: none; outline: 0; opacity: 1; }
html body .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Leftovers from the old palette */
html body .mono, html body .table td.num, html body .table th.num, html body .kanban__head .sum, html body .kcard__meta .price, html body .tl-body .when, html body .avail-num, html body .chip .count, html body .badge { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
html body a { color: var(--brand-ink); }
html body .toast { background: var(--text); color: #fff; }
html body .toast.good { background: var(--good); } html body .toast.bad { background: var(--bad); }
html body .banner { border-radius: var(--r-lg); }
html body .tabs { background: var(--surface-3); border-bottom: 0; }
html body .tabs button { border-bottom: 0 !important; }
/* No edge-fade mask on chip/tab strips — it faded the selected (first) chip. */
html body .chips, html body .tabs, html body .segmented { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { html body .chips { padding: 2px 1px; scroll-padding-inline: 8px; } }
html body .eyebrow { font-family: var(--font-ui); font-size: 13px; }
html body .today-head .eyebrow { font-size: 14px; color: var(--text-3); margin-bottom: 2px; }
@media (max-width: 700px) { html body .rc-bar > .row:first-child { width: 100%; justify-content: space-between; } html body .rc-bar > .row:first-child b { min-width: 0 !important; flex: 1; } }
html body pre, html body code, html body kbd { font-family: var(--font-code); }
html body .move-opt .xs, html body .empty-lane .xs { white-space: nowrap; flex: none; }