/* =========================
   THEME TOKENS
   ========================= */

:root {
  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-translucent: rgba(255,255,255,0.95);
  --ink: #0b1c30;
  --ink-2: #434656;
  --ink-3: #64748b;
  --ink-disabled: #94a3b8;
  --hairline: #f1f5f9;
  --tint-50: #eef3ff;
  --tint-100: #e5eeff;
  --tint-200: #dce1ff;
  --tint-border: #cbd5f5;
  --input-bg: #ffffff;
  --input-border: #c3c5d9;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-soft: 0 4px 12px rgba(11,28,48,0.05);
  --shadow-nav: 0 -4px 12px rgba(0,0,0,0.05);

  /* Semantic accents — brand + status. Centralised so a component themes
     through one token instead of a hardcoded hex (the fix for dark-mode drift).
     --brand is for text/accents on surfaces (lightens on dark for legibility);
     --brand-solid is for filled chrome with white text (stays dark-blue both
     themes, like primary buttons + the blue cards). */
  --brand: #003ec7;
  --brand-solid: #003ec7;
  --success: #16a34a;
  --tips-ink: #0f766e;
  --ok-bg: #dcfce7;   --ok-ink: #166534;
  --bad-bg: #fee2e2;  --bad-ink: #991b1b;
  --flat-bg: #f1f5f9; --flat-ink: #475569;
  --warn-bg: #fef3c7; --warn-ink: #92400e;

  /* Active-shift ring gauges: color-codes the three earnings rings (tips /
     wages / total). Distinct from --brand so the rings read as their own
     semantic palette and don't visually collide with brand chrome. */
  --gauge-tips: #18b8c9;
  --gauge-wages: #2f7cff;
  --gauge-total: #17b854;
}

:root[data-theme="dark"] {
  --bg: #0a1228;
  --surface: #15203a;
  --surface-translucent: rgba(21,32,58,0.92);
  --ink: #f1f5ff;
  --ink-2: #c5cde0;
  --ink-3: #93a0bb;
  --ink-disabled: #5b6478;
  --hairline: #243254;
  --tint-50: #1a2542;
  --tint-100: #1e2c4a;
  --tint-200: #243254;
  --tint-border: #344166;
  --input-bg: #1a2742;
  --input-border: #344166;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-card-soft: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-nav: 0 -4px 12px rgba(0,0,0,0.35);

  /* Dark accents: brand lightens for legibility on dark surfaces; status chips
     reuse the dark palette already used by the audit tags below. */
  --brand: #7aa2ff;
  --brand-solid: #003ec7;
  --success: #22c55e;
  --tips-ink: #2dd4bf;
  --ok-bg: #14361f;   --ok-ink: #4ade80;
  --bad-bg: #3a1414;  --bad-ink: #fca5a5;
  --flat-bg: #243254; --flat-ink: #c5cde0;
  --warn-bg: #3a2a09; --warn-ink: #fbbf24;

  /* Ring-gauge palette lightens on dark so the rings stay legible against the
     darker surface without clipping to neon. */
  --gauge-tips: #2dd4bf;
  --gauge-wages: #60a5fa;
  --gauge-total: #4ade80;
}

/* =========================
   RESET
   ========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* HTML5 hidden must beat any rule that sets display on the same element. */
[hidden] {
  display: none !important;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  padding-bottom: 96px;
}


a {
  text-decoration: none;
  color: inherit;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =========================
   TYPOGRAPHY BASE
   ========================= */

h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 20px;
  font-weight: 600;
}

.subtext {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* =========================
   TOP BAR
   ========================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-box {
  background: rgba(0,62,199,0.1);
  padding: 8px;
  border-radius: 8px;
  color: #003ec7;
}

.topbar h1 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.icon-btn {
  padding: 8px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--ink-3);
}

/* =========================
   MAIN LAYOUT
   ========================= */

.main {
  max-width: 480px;
  margin: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =========================
   PRIMARY CARD (GLOBAL FIX APPLIES HERE)
   ========================= */

.primary-card {
  background: #003ec7;
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,62,199,0.15);
}

/* LABEL */
.primary-card small {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}

/* MAIN VALUE */
.primary-card h3 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* SUBTEXT */
.primary-card .subtext {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
}

/* =========================
   🚨 CRITICAL FIX: MAKE ALL FIELD TEXT VISIBLE IN PRIMARY CARD
   ========================= */

.primary-card .field-group small {
  color: rgba(255,255,255,0.75) !important;
}

.primary-card .field-group .hint {
  color: rgba(255,255,255,0.80) !important;
}

.primary-card label,
.primary-card span,
.primary-card p {
  color: #ffffff;
}

/* INPUTS INSIDE PRIMARY CARD */
.primary-card .input {
  background: rgba(255,255,255,0.95);
  border: none;
  color: #0b1c30;
}

.card-section {
  padding-top: 16px;
}

/* =========================
   STATS
   ========================= */

.stats {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid var(--hairline);
}

.stat {
  text-align: center;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stat:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.stat span {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.stat strong {
  font-size: 18px;
  font-weight: 700;
}

.stat.primary strong {
  color: #003ec7;
}

/* Secondary line under each active-shift stat (since/duration, miles/fuel,
   netted-vs-bag) — replaces the old standalone shift-details rows. */
.stat-sub {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  color: var(--ink-2);
  line-height: 1.3;
  margin-top: 1px;
}

.shift-details {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 13px;
  color: var(--ink-2);
}

/* STATS CAROUSEL */
.stats-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.stats-carousel::-webkit-scrollbar {
  display: none;
}

.stats-slide {
  min-width: 100%;
  scroll-snap-align: start;
}

/* SECOND GRID (2 COL CENTERED) */
.stats-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.stats-grid-2 .stat {
  border-right: none !important;
}

/* DOTS */
.stats-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.stats-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cbd5f5;
}

.stats-dots span.active {
  background: #003ec7;
}




/* =========================
   Notifications
   ========================= */

.notif-btn {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ba1a1a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =========================
   LIST
   ========================= */

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}

.item-left {
  display: flex;
  gap: 16px;
}

.badge {
  width: 40px;
  height: 40px;
  background: var(--tint-100);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meta small {
  font-size: 10px;
  color: var(--ink-2);
}

.meta p {
  font-size: 16px;
}

.price {
  font-weight: 700;
}

/* =========================
   BOTTOM NAV
   ========================= */
/* =========================
   BOTTOM NAV (SAFE FIX - NO SIDE EFFECTS)
   ========================= */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;

  height: 70px;
  padding: 8px 12px;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;

  background: var(--surface-translucent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow-nav);
}

/* When any bottom sheet is open, hide the bottom nav so the sheet's own
   action bar can sit flush at the viewport bottom. Without this, the
   fixed bottom nav (z-index 100) overlaps the sheet's fixed action-bar
   (z-index 110), and earlier "fixes" lifted the action-bar up by the
   nav height — which left the CTA buttons floating awkwardly above a
   visible nav. The sheet is modal; the nav is unreachable behind it
   anyway, so hiding it is the honest choice. JS toggles body.sheet-open
   in openSheet / closeSheet (see app.js). */
body.sheet-open .bottom-nav { display: none; }

/* When .action-bar is *inside* a sheet (e.g. the return sheet's
   MARK COMPLETE / STILL EN-ROUTE buttons), it should sit in-flow at the
   bottom of the sheet rather than position:fixed to the viewport. The
   sheet is itself the scroll container (max-height 90vh, overflow-y),
   so an in-flow action-bar follows the content naturally and the buttons
   read as part of the sheet — not as a separate floating bar. */
.sheet .action-bar {
  position: static;
  padding: 14px 0 0;
  background: transparent;
  border-top: none;
}

/* CRITICAL FIX: prevents text width from shifting layout */
.nav-item {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-disabled);

  text-align: center;
}

/* ICON */
.nav-item span:first-child {
  font-size: 24px;
  line-height: 1;
}

/* ACTIVE STATE */
.nav-item.active {
  color: #2563eb;
  font-weight: 700;
}

/* FAB CENTER COLUMN LOCK */
.fab-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* FAB DOES NOT AFFECT GRID WIDTH */
.fab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Plain blue circular action button with a plus sign (pre-Alpha-96 style).
   Flat — no shadow, no raised offset — so it sits in the nav grid without
   affecting the other four items' spacing. */
.fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #003ec7;
  color: #fff;
  border: none;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   SHIFT HISTORY SYSTEM
   ========================= */

.shift-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.shift-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card-soft);
  border: 1px solid var(--tint-100);
}

.shift-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shift-left,
.shift-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shift-right {
  align-items: flex-end;
}

.shift-date {
  font-size: 16px;
  font-weight: 700;
}

.shift-sub {
  font-size: 12px;
  color: var(--ink-2);
}

.shift-earnings {
  font-size: 18px;
  font-weight: 700;
  color: #003ec7;
}




.trend-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  height: fit-content;
}

.shift-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}

.shift-status.completed {
  background: #dce1ff;
  color: #003ec7;
}

.shift-status.active {
  background: #6ffbbe;
  color: #005a3c;
}

/* =========================
   FILTERS
   ========================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.filter-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--tint-100);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  border: none;
}

.filter-pill.active {
  background: #003ec7;
  color: #ffffff;
}

.filter-pill.calendar {
  display: inline-flex;
  align-items: center;   /* vertical center */
  justify-content: center;
  gap: 6px;
  line-height: 1;        /* prevents text drop */
}

.filter-pill.calendar span {
  display: flex;
  align-items: center;
  font-size: 16px;       /* match visual balance */
}

/* =========================
   TREND PILL
   ========================= */

.trend-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
}

.trend-pill.positive {
  background: #dce1ff;
  color: #003ec7;
}

.trend-pill.negative {
  background: #ffdad6;
  color: #ba1a1a;
}

/* =========================
   INSTALL PROMPT (PWA Add-to-Home-Screen)
   ========================= */

.install-prompt {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}

.install-prompt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px; /* clear the dismiss button */
}

.install-prompt-row .icon-box {
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.install-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.install-prompt-body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.install-prompt-body p {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.install-prompt-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 999px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.install-prompt-dismiss .material-symbols-outlined {
  font-size: 18px;
}

.install-prompt-cta {
  align-self: stretch;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #003ec7;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================
   BOTTOM SHEET (modal)
   ========================= */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,18,40,0.45);
  z-index: 70;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 71;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: 16px 16px 0 0;
  padding: 18px 20px 28px;
  box-shadow: 0 -16px 36px rgba(0,0,0,0.18);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sheet-grab {
  width: 36px;
  height: 4px;
  background: var(--tint-border);
  border-radius: 999px;
  margin: 0 auto 4px;
}

.sheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sheet-close .material-symbols-outlined { font-size: 20px; }

.sheet-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sheet-sub { margin: -4px 0 4px; }

.sheet-card { margin-bottom: 4px; }

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.danger-btn {
  background: #ba1a1a !important;
  color: #fff !important;
}

/* =========================
   CASH SETTLEMENT CARD
   ========================= */

.settle-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settle-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.settle-divider {
  height: 1px;
  background: var(--hairline);
  margin: 2px 0;
}

.settle-rows { display: flex; flex-direction: column; gap: 6px; }

.settle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
  gap: 12px;
}

.settle-row strong { font-weight: 700; }

.amount-out { color: #ba1a1a; }
.amount-in { color: #005a3c; }

.settle-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-top: 2px;
}

.settle-line-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.settle-line-label.muted {
  color: var(--ink-3);
}

.settle-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.settle-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-top: 1px dashed var(--hairline);
  padding-top: 6px;
  margin-top: 2px;
}

.settle-handoff {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(186,26,26,0.08);
  padding: 10px 12px;
  border-radius: 10px;
}

.settle-takehome {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: var(--tint-100);
  padding: 10px 12px;
  border-radius: 10px;
}

.settle-note {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}

/* Card-shaped <button> resets (used for the active-shift primary card) */
.card-button {
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: block;
}

.card-button-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
}

.stat-button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* =========================
   CLIENT WIZARD
   ========================= */

.comp-radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 16px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.radio-row input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  accent-color: #003ec7;
}

.radio-row > span {
  flex: 1 1 auto;
  text-align: left;
}

.radio-row:has(input:checked) {
  background: var(--tint-100);
  border-color: #003ec7;
  color: #003ec7;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  margin-top: 12px;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  margin: 0;
  accent-color: #003ec7;
  width: 18px;
  height: 18px;
}

.comp-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}

.comp-block-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

/* =========================
   ACCOUNT PAGE: profile / settings / about / logout
   ========================= */

.profile-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================
   AUTH (LOGIN / SIGNUP) BRAND HEADER
   ========================= */

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 4px;
}

.auth-brand .icon-box {
  padding: 12px;
  border-radius: 12px;
}

.auth-brand .icon-box .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 28;
  font-size: 28px;
}

.auth-brand h1 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.auth-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.auth-heading h2 {
  font-size: 24px;
}

/* =========================
   FORMS / START SHIFT
   ========================= */

.input {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 14px;
  outline: none;
}

.input:focus {
  border-color: #003ec7;
}

select.input {
  appearance: none;
}

/* FIELD SYSTEM */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-group small {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

.field-group .hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* ROW LAYOUT */
.row-2 {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: flex-start;
}

.row-2 .field-group {
  flex: 1;
}

/* ACTION BAR */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border-top: 1px solid var(--tint-100);
}

.btn {
  flex: 1;
  height: 48px; /* force consistent height */
  border-radius: 12px;
  border: none;

  display: flex;               /* KEY FIX */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */

  font-weight: 800;
  font-size: 15px;
  text-align: center;
}

.btn.cancel {
  background: var(--tint-50);
  color: var(--ink-2);
}

.btn.primary {
  background: #003ec7;
  color: #ffffff;
}

/* Right-aligned card submit (Account: Save Changes, Save Goals, Update
   Password, etc.). Adds breathing room above the button so it isn't flush
   to the last input. Mirrors admin.css. */
.form-action {
  margin-top: 20px;
  padding: 0 16px 16px;
  display: flex;
  justify-content: flex-end;
}

.form-action-btn {
  flex: none;
  width: auto;
  padding: 0 24px;
  height: 44px;
}


.input-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  height: 44px;
  padding: 0 12px;
}

.input-prefix .prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  font-weight: 600;
  padding-right: 6px;
  line-height: 1;
  height: 100%;
}

/* KEY FIX */
.input-prefix .input {
  border: none;
  outline: none;
  background: transparent;

  height: 100%;
  padding: 0;

  font-size: 14px;

  /* CRITICAL: force consistent vertical alignment */
  display: flex;
  align-items: center;
}

.input-prefix .input {
  margin: 0 !important;
  line-height: normal !important;
}




.shift-summary-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.summary-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}

.summary-item .value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.summary-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}


.earnings-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.earnings-row strong {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.insights-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-top: 16px;
  padding-bottom: 4px;
}

.insights-strip::-webkit-scrollbar {
  display: none;
}

.insight {
  min-width: 120px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
}

.insight small {
  font-size: 10px;
  color: var(--ink-2);
  text-transform: uppercase;
}

.insight strong {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.insight .muted {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}




/* =========================
   CHART CARD
   =========================
   The /earnings chart carousel (.chart-carousel / .cc-track / .cc-slide /
   .cc-dots) is styled inline in earnings.templ. The old global .chart-carousel
   / .chart-slide / .chart-dots rules were removed — they laid the carousel out
   as a flex *row*, which shoved the new dot indicators to the top-right. Only
   the shared .chart-card below remains. */

.chart-card {
  background: var(--surface); border:1px solid var(--hairline);
  border-radius:12px; padding:16px;
}

.chart-card canvas {
  width:100% !important;
  height:180px !important;
}

.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  text-align:center; margin-top:14px;
}

.stat span { font-size:11px; color: var(--ink-3); text-transform:uppercase; }
.stat strong { display:block; margin-top:4px; font-size:18px; font-weight:800; }

.insights { display:flex; gap:8px; margin-top:12px; overflow-x:auto; }
.pill { padding:6px 10px; border-radius:999px; background: var(--tint-50); color: var(--ink-2); font-size:12px; white-space:nowrap; }

.shift-list { margin-top:14px; display:flex; flex-direction:column; gap:10px; }

.shift-card {
  background: var(--surface); border:1px solid var(--hairline);
  border-radius:12px; padding:14px;
}

.shift-row { display:flex; justify-content:space-between; align-items:center; }

.shift-title { font-weight:800; font-size:14px; }
.shift-sub { font-size:12px; color: var(--ink-3); }
.shift-earnings { font-weight:900; color:#003ec7; }




.shift-detail {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px;
}

.shift-detail-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.back-btn {
  background: var(--tint-50);
  color: var(--ink-2);
  border:none;
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
}

.delivery-item {
  padding:10px;
  border-bottom:1px solid var(--hairline);
}

.delivery-item:last-child {
  border-bottom:none;
}

/* =========================
   ACCOUNT PAGE: SETTINGS / ABOUT / THEME / DANGER ZONE
   ========================= */

.settings-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-top: 12px;
}

.settings-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.settings-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-row-label strong {
  font-size: 14px;
  color: var(--ink);
}

.settings-row-label .hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* Theme picker — 3-segment pill */
.theme-toggle {
  display: inline-flex;
  background: var(--tint-50);
  border: 1px solid var(--tint-border);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  flex-shrink: 0;
}

.theme-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.theme-toggle-btn[aria-pressed="true"],
.theme-toggle-btn.active {
  background: #003ec7;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,62,199,0.25);
}

/* About list rows */
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink-2);
}

.about-row:last-child { border-bottom: none; }
.about-row strong { color: var(--ink); font-weight: 700; }
.about-row .hint { color: var(--ink-3); font-size: 12px; }
.about-link {
  color: #003ec7;
  font-weight: 600;
  text-decoration: none;
}

/* Log out — standalone (not in the action bar) */
.btn.logout {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  margin: 16px 0 10px 0;
  cursor: pointer;
}

.btn.logout:hover { background: var(--tint-50); }

/* Danger zone — collapsed by default; expands on summary click */
.danger-zone {
  margin-top: 6px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  padding: 12px 14px;
}

.danger-zone > summary {
  cursor: pointer;
  font-weight: 700;
  color: #b91c1c;
  font-size: 13px;
  list-style: none;
}

.danger-zone > summary::-webkit-details-marker { display: none; }

.danger-zone[open] {
  background: #fff;
}

.danger-zone-hint {
  color: var(--ink-2);
  margin: 10px 0 12px 0;
  font-size: 13px;
}

.danger-zone-btn {
  background: #b91c1c;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
}

.danger-zone-btn:hover { background: #991b1b; }

.delivery-title {
  font-weight:700;
}

.delivery-meta {
  font-size:12px;
  color: var(--ink-3);
}

.delivery-pay {
  font-weight:800;
  color:#003ec7;
}




/* STEP INDICATOR */
.step-indicator {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 20px 0 26px;
}

.step-indicator::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e5e7eb;
  z-index: 0;
}

.progress-bar {
  position: absolute;
  top: 20px;
  left: 0;
  height: 3px;
  background: #003ec7;
  width: 0%;
  z-index: 1;
  transition: width 0.3s ease;
}

/* STEP ITEMS */
.step {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}

.step span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  font-weight: 900;
  font-size: 15px;
  color: #64748b;
  transition: all 0.2s ease;
}

.step small {
  font-size: 13px;
  color: #64748b;
}

.step.active span {
  background: #003ec7;
  color: #fff;
  transform: scale(1.08);
}

.step.done span {
  background: #10b981;
  color: #fff;
}

/* FORM STEPS */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

/* INPUTS */
form label {
  display: block;
  font-size: 14px;
  margin-top: 16px;
  margin-bottom: 6px;
  color: #64748b;
  font-weight: 600;
}

form input,
form textarea {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  color: var(--ink);
  font-size: 16px;
  outline: none;
  background: var(--input-bg);
}

form textarea {
  min-height: 110px;
  resize: vertical;
}

/* RADIO / SEGMENTED CONTROL */
.segmented {
  display: flex;
  background: var(--tint-50);
  border-radius: 14px;
  padding: 5px;
  margin-top: 8px;
  gap: 6px;
}

.segmented input {
  display: none;
}

.segmented label {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  color: #003ec7;
  transition: 0.2s;
  user-select: none;
}

.segmented input:checked + label {
  background: #003ec7;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 62, 199, 0.25);
}

/* ACTION BAR */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 10px;
  padding: 10px 16px;
}

.btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
}

.btn.cancel {
  background: var(--tint-50);
  color: var(--ink-2);
  text-decoration: none;
}

.btn.secondary {
  background: var(--tint-100);
  color: var(--ink-2);
}

.btn.primary {
  background: #003ec7;
  color: #fff;
}







.row-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.row-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}



.tag {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--tint-50);
  color: #003ec7;
}
/* =========================
   IMPERSONATION BANNER
   Renders above the topbar in the driver Shell whenever an admin is
   viewing the app as someone else (notes/admin.md §6). The banner is the
   single way back to /admin — losing it strands the admin in the driver
   shell, so it sticks to the top of every shelled page.
   ========================= */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 60;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;

  background: #fff4d6;
  color: #7a4a00;
  border-bottom: 1px solid #f0c95f;

  font-size: 13px;
  font-weight: 600;
}

.impersonation-banner .material-symbols-outlined {
  font-size: 20px;
}

.impersonation-banner-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-banner-text strong {
  font-weight: 800;
}

.impersonation-banner-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  border: 1px solid #b8821f;
  border-radius: 999px;
  background: #ffffff;
  color: #7a4a00;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.impersonation-banner-exit:hover {
  background: #fffaef;
}

.impersonation-banner-exit .material-symbols-outlined {
  font-size: 16px;
}

/* =========================
   DELIVERY AUDIT TRAIL — responsive fix
   The inline styles in delivery_view.templ leave .audit-body free to grow
   beyond its parent when a single audit value is long (URLs, addresses).
   Force the children to shrink and wrap so the card stays on canvas, and
   raise the stacking breakpoint so phones get the wrapped layout instead
   of the side-by-side that overflows.
   ========================= */

.audit-card { overflow: hidden; max-width: 100%; }
.audit-entry { min-width: 0; }
.audit-body { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; word-break: break-word; }
.audit-field, .audit-old, .audit-new { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.audit-list { min-width: 0; }
@media (max-width: 640px) {
  .audit-entry { flex-wrap: wrap; }
  .audit-when { min-width: 0; flex-basis: 100%; }
}

/* =========================
   DARK MODE OVERRIDES
   Many feature pages declare their card backgrounds inline (#fff, #f8fafc,
   etc.) inside templ <style> blocks, so they ignore the --surface token.
   The overrides below re-skin those cards for :root[data-theme="dark"].
   New surfaces should use var(--surface) directly and avoid this section.
   ========================= */

:root[data-theme="dark"] .audit-card,
:root[data-theme="dark"] .cust-card,
:root[data-theme="dark"] .receipt-card,
:root[data-theme="dark"] .gps-log-card {
  background: var(--surface);
  border-color: var(--hairline);
}

:root[data-theme="dark"] .audit-entry {
  background: var(--tint-50);
  border-left-color: var(--tint-border);
}
:root[data-theme="dark"] .audit-entry.is-create,
:root[data-theme="dark"] .audit-entry.is-complete { border-left-color: #22c55e; }
:root[data-theme="dark"] .audit-entry.is-update   { border-left-color: #3b82f6; }
:root[data-theme="dark"] .audit-entry.is-delete   { border-left-color: #ef4444; }

:root[data-theme="dark"] .audit-when,
:root[data-theme="dark"] .audit-empty,
:root[data-theme="dark"] .audit-old,
:root[data-theme="dark"] .audit-arrow { color: var(--ink-3); }
:root[data-theme="dark"] .audit-field { color: var(--ink-2); }
:root[data-theme="dark"] .audit-new { color: var(--ink); }

:root[data-theme="dark"] .audit-lock-hint {
  background: var(--tint-100);
  color: var(--ink-2);
}
:root[data-theme="dark"] .audit-lock-hint.locked {
  background: #3a2a09;
  color: #fbbf24;
}
:root[data-theme="dark"] .audit-lock-pill {
  background: #3a2a09;
  color: #fbbf24;
}
:root[data-theme="dark"] .audit-tag.create,
:root[data-theme="dark"] .audit-tag.complete { background: #14361f; color: #4ade80; }
:root[data-theme="dark"] .audit-tag.update   { background: #14264a; color: #93c5fd; }
:root[data-theme="dark"] .audit-tag.delete   { background: #3b1414; color: #fca5a5; }

:root[data-theme="dark"] .cust-priv-tag {
  background: var(--tint-100);
  color: var(--ink-2);
}
:root[data-theme="dark"] .cust-empty,
:root[data-theme="dark"] .cust-note-saved,
:root[data-theme="dark"] .cust-stats small { color: var(--ink-3); }
:root[data-theme="dark"] .cust-note-label { color: var(--ink-2); }
:root[data-theme="dark"] .cust-stats li { background: var(--tint-50); }
:root[data-theme="dark"] .cust-stats strong { color: var(--ink); }
:root[data-theme="dark"] .cust-note-form textarea {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--input-border);
}

:root[data-theme="dark"] .receipt-thumb-wrap {
  background: var(--tint-50);
  color: var(--ink-3);
}
:root[data-theme="dark"] .receipt-empty { color: var(--ink-3); }
:root[data-theme="dark"] .receipt-file {
  border-color: var(--input-border);
  color: var(--ink-2);
}

:root[data-theme="dark"] .gps-log-card .gps-log-row,
:root[data-theme="dark"] .gps-log-rows .gps-log-row {
  background: var(--tint-50);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .gps-log-rows .meta,
:root[data-theme="dark"] .gps-log-card .meta { color: var(--ink-2); }
:root[data-theme="dark"] .gps-log-rows .meta small,
:root[data-theme="dark"] .gps-log-card .meta small,
:root[data-theme="dark"] .gps-log-rows .when,
:root[data-theme="dark"] .gps-log-card .when,
:root[data-theme="dark"] .gps-log-hint { color: var(--ink-3); }
:root[data-theme="dark"] .gps-log-empty {
  background: var(--tint-50);
  border-color: var(--input-border);
  color: var(--ink-3);
}
:root[data-theme="dark"] .gps-log-refresh {
  background: var(--surface);
  border-color: var(--input-border);
  color: var(--ink-2);
}

:root[data-theme="dark"] .cust-upsell {
  background: var(--tint-50);
  border-color: var(--tint-border);
}
:root[data-theme="dark"] .cust-upsell p { color: var(--ink-2); }

/* ----- Earnings: pro toolbar + efficiency / chart / client cards ----- */
:root[data-theme="dark"] .pro-btn {
  background: var(--surface);
  border-color: var(--hairline);
  color: #93c5fd;
}
:root[data-theme="dark"] .pro-btn:hover {
  background: var(--tint-100);
  border-color: var(--tint-border);
}
:root[data-theme="dark"] .eff-card,
:root[data-theme="dark"] .eff-chart-card,
:root[data-theme="dark"] .eff-client-list {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .eff-card small,
:root[data-theme="dark"] .eff-card .sub,
:root[data-theme="dark"] .eff-client-row .meta,
:root[data-theme="dark"] .eff-empty,
:root[data-theme="dark"] .tip-mix-legend { color: var(--ink-3); }
:root[data-theme="dark"] .eff-card .val,
:root[data-theme="dark"] .eff-client-row .rate { color: #93c5fd; }
:root[data-theme="dark"] .eff-chart-card h4,
:root[data-theme="dark"] .eff-client-list h4 { color: var(--ink); }
:root[data-theme="dark"] .eff-client-row { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .tip-mix-bar { background: var(--tint-50); }

/* ----- Earnings: Areas (hotspots) ----- */
:root[data-theme="dark"] .areas-window {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .areas-window-pill { color: var(--ink-2); }
:root[data-theme="dark"] .areas-kpi,
:root[data-theme="dark"] .areas-section {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .areas-kpi small { color: var(--ink-3); }
:root[data-theme="dark"] .areas-kpi strong { color: #93c5fd; }
:root[data-theme="dark"] .areas-section .sub,
:root[data-theme="dark"] .areas-legend { color: var(--ink-3); }
:root[data-theme="dark"] .areas-empty {
  background: var(--tint-50);
  color: var(--ink-3);
}
:root[data-theme="dark"] #areas-map { border-color: var(--hairline); }

/* ----- Earnings: Regulars ----- */
:root[data-theme="dark"] .reg-section {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .reg-section .sub,
:root[data-theme="dark"] .reg-sub,
:root[data-theme="dark"] .reg-stats { color: var(--ink-3); }
:root[data-theme="dark"] .reg-name { color: var(--ink); }
:root[data-theme="dark"] .reg-row { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .reg-empty {
  background: var(--tint-50);
  color: var(--ink-3);
}
:root[data-theme="dark"] .reg-stats strong { color: #93c5fd; }
:root[data-theme="dark"] #regulars-map { border-color: var(--hairline); }

/* ----- Expenses ----- */
:root[data-theme="dark"] .exp-summary,
:root[data-theme="dark"] .exp-card,
:root[data-theme="dark"] .exp-empty {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}
:root[data-theme="dark"] .exp-summary small,
:root[data-theme="dark"] .exp-date,
:root[data-theme="dark"] .exp-meta,
:root[data-theme="dark"] .exp-empty { color: var(--ink-3); }
:root[data-theme="dark"] .exp-note { color: var(--ink-2); }
:root[data-theme="dark"] .exp-filter a {
  background: var(--surface);
  border-color: var(--tint-border);
  color: #93c5fd;
}
:root[data-theme="dark"] .exp-filter a.active {
  background: #003ec7;
  color: #fff;
  border-color: #003ec7;
}
:root[data-theme="dark"] .exp-summary .total,
:root[data-theme="dark"] .exp-row1 .amt { color: #93c5fd; }
:root[data-theme="dark"] .exp-actions a,
:root[data-theme="dark"] .exp-actions button { color: var(--ink-3); }
:root[data-theme="dark"] .exp-cat {
  background: var(--tint-100);
  color: #93c5fd;
}

/* ----- Earnings: Tax ----- */
:root[data-theme="dark"] .tax-card,
:root[data-theme="dark"] .q-card {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .tax-row { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .tax-row strong,
:root[data-theme="dark"] .q-card .q-label strong { color: #93c5fd; }
:root[data-theme="dark"] .q-card .q-val { color: var(--ink); }
:root[data-theme="dark"] .q-card .q-bounds,
:root[data-theme="dark"] .q-card .q-sub,
:root[data-theme="dark"] .tax-row .muted,
:root[data-theme="dark"] .rates-line { color: var(--ink-3); }
:root[data-theme="dark"] .client-table th {
  background: var(--tint-50);
  color: var(--ink-3);
}
:root[data-theme="dark"] .client-table th,
:root[data-theme="dark"] .client-table td { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .year-pill,
:root[data-theme="dark"] .export-btn {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink-2);
}
:root[data-theme="dark"] .year-pill.active {
  background: #003ec7;
  color: #fff;
  border-color: #003ec7;
}
:root[data-theme="dark"] .export-btn { color: #93c5fd; }
:root[data-theme="dark"] .disclaimer {
  background: #2c2210;
  border-color: #6b5209;
  color: #fbe7a8;
}

/* ----- Earnings: Insights ----- */
:root[data-theme="dark"] .ins-section {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .ins-section .sub { color: var(--ink-3); }
:root[data-theme="dark"] .ins-empty {
  background: var(--surface);
  border-color: var(--tint-border);
  color: var(--ink-3);
}
:root[data-theme="dark"] .ins-empty strong { color: #93c5fd; }
:root[data-theme="dark"] .hour-bar.sparse { background: var(--tint-200); }
:root[data-theme="dark"] .hour-axis { color: var(--ink-3); }
:root[data-theme="dark"] .hour-callout {
  background: var(--tint-50);
  border-left-color: #3b82f6;
  color: #93c5fd;
}
:root[data-theme="dark"] .cluster-card {
  background: var(--tint-50);
  border-color: var(--tint-border);
}
:root[data-theme="dark"] .cluster-card small,
:root[data-theme="dark"] .cluster-card .meta { color: var(--ink-3); }
:root[data-theme="dark"] .cluster-card .val { color: #93c5fd; }
:root[data-theme="dark"] .cluster-callout { color: #93c5fd; }
:root[data-theme="dark"] .anomaly-row,
:root[data-theme="dark"] .tip-row { border-bottom-color: var(--hairline); }
:root[data-theme="dark"] .anomaly-row .meta a { color: var(--ink); }
:root[data-theme="dark"] .anomaly-row .meta small,
:root[data-theme="dark"] .tip-row .name small,
:root[data-theme="dark"] .tip-row .rate { color: var(--ink-3); }
:root[data-theme="dark"] .tip-row .avg-tip { color: #93c5fd; }
:root[data-theme="dark"] .anomaly-row .day {
  background: #3b1414;
  color: #fca5a5;
}

/* ----- Clients ----- */
:root[data-theme="dark"] .client-card,
:root[data-theme="dark"] .client-empty {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .client-meta { color: var(--ink-2); }
:root[data-theme="dark"] .client-pill {
  background: var(--tint-50);
  border-color: var(--tint-border);
}
:root[data-theme="dark"] .client-pill strong { color: #93c5fd; }
:root[data-theme="dark"] .client-pro-strip {
  background: var(--tint-50);
  border-color: var(--tint-border);
  color: #93c5fd;
}
:root[data-theme="dark"] .client-pro-strip .count { color: var(--ink-3); }
:root[data-theme="dark"] .icon-small { color: var(--ink-3); }

/* ----- Primary card inputs (Start Shift + Client New/Edit forms) -----
   .primary-card stays blue in both themes, but the form rows mix two input
   styles: plain `.input` / `select.input` (forced to white via
   `.primary-card .input`) and `.input-prefix` wrappers that inherit
   `var(--input-bg)`. In dark mode that leaves the prefixed money fields
   (Start Shift: Delivery Fee, Cash Bag · Client Edit: Flat Fee, Per-mile
   rate, In-store hourly, On-road hourly, Starting Float) with a dark
   wrapper plus the `.primary-card .input` override forcing dark `#0b1c30`
   text — invisible. Lock every input AND select on the card to the dark
   input surface + light ink, and use `!important` on the bg/color so any
   later inline or component-level styling can't reintroduce the bug. */
:root[data-theme="dark"] .primary-card .input,
:root[data-theme="dark"] .primary-card select.input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .primary-card .input-prefix {
  background: var(--input-bg);
  color: var(--ink);
}
:root[data-theme="dark"] .primary-card .input-prefix .input {
  background: transparent !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .primary-card .input-prefix .prefix {
  color: rgba(255,255,255,0.85);
}
:root[data-theme="dark"] .primary-card select.input option {
  background: var(--surface);
  color: var(--ink);
}

/* ----- Expense form (New / Edit Expense) ----- */
:root[data-theme="dark"] .form-card {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .form-row label,
:root[data-theme="dark"] .form-row small { color: var(--ink-3); }
:root[data-theme="dark"] .form-row input,
:root[data-theme="dark"] .form-row select,
:root[data-theme="dark"] .form-row textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}
:root[data-theme="dark"] .form-actions a {
  background: var(--tint-100);
  color: var(--ink-2);
}
:root[data-theme="dark"] .error-banner {
  background: #3b1414;
  color: #fca5a5;
}
:root[data-theme="dark"] .deductible-hint {
  background: var(--tint-50);
  border-color: var(--tint-border);
  color: #93c5fd;
}
:root[data-theme="dark"] .subsumed-hint {
  background: #2c2210;
  border-color: #6b5209;
  color: #fbe7a8;
}
:root[data-theme="dark"] .receipt-preview {
  border-color: var(--tint-border);
  color: #93c5fd;
}
:root[data-theme="dark"] .receipt-preview a { color: #93c5fd; }

/* ----- Notifications / alert rows ----- */
:root[data-theme="dark"] .alert-row {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .alert-row.unread {
  background: var(--tint-50);
  border-left-color: #3b82f6;
}
:root[data-theme="dark"] .alert-row:not(.unread) .alert-title { color: var(--ink-2); }
:root[data-theme="dark"] .alert-title { color: var(--ink); }
:root[data-theme="dark"] .alert-text { color: var(--ink-2); }
:root[data-theme="dark"] .alert-sender,
:root[data-theme="dark"] .alert-time { color: var(--ink-3); }
:root[data-theme="dark"] .alert-icon {
  background: var(--tint-100);
  color: #93c5fd;
}
:root[data-theme="dark"] .alert-icon-billing  { background: #3a2a09; color: #fbbf24; }
:root[data-theme="dark"] .alert-icon-account  { background: #14361f; color: #4ade80; }
:root[data-theme="dark"] .alert-icon-security { background: #3b1414; color: #fca5a5; }
:root[data-theme="dark"] .alert-icon-system   { background: #1e1b46; color: #a5b4fc; }
:root[data-theme="dark"] .alert-icon-message  { background: #0c2235; color: #7dd3fc; }
:root[data-theme="dark"] .alert-tag {
  background: var(--tint-100);
  color: var(--ink-2);
}
:root[data-theme="dark"] .alert-tag-billing  { background: #3a2a09; color: #fbbf24; }
:root[data-theme="dark"] .alert-tag-account  { background: #14361f; color: #4ade80; }
:root[data-theme="dark"] .alert-tag-security { background: #3b1414; color: #fca5a5; }
:root[data-theme="dark"] .alert-tag-system   { background: #1e1b46; color: #a5b4fc; }
:root[data-theme="dark"] .alert-tag-message  { background: #14264a; color: #93c5fd; }
:root[data-theme="dark"] .alert-action-btn {
  background: var(--surface);
  border-color: var(--input-border);
  color: var(--ink-2);
}
:root[data-theme="dark"] .alert-delete {
  color: #fca5a5;
  border-color: #6b1c1c;
}
:root[data-theme="dark"] .btn-link { color: #93c5fd; }

/* ===== Dashboard: Today card · PRO Pacing · Personal Records =====
   Base rules moved out of dashboard.templ's <style> block. Colours resolve
   through tokens, so the per-component dark overrides that used to live here
   are gone — the cards now theme themselves (and brand text/ status chips read
   correctly on dark, which the old dark-blue-on-navy did not). */
.today-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px 14px; box-shadow: var(--shadow-card); margin-top: 12px; }

/* Today instrument cluster: big Total dial centered, smaller Tips+Fees and
   Wages satellites flanking. Replaces the prior 3-column text grid. Each
   .gauge owns a --gauge-fill custom property (set inline by gaugeFillStyle)
   that the @keyframes consumes to compute the final stroke-dashoffset. */
.today-cluster {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: end;
  gap: 6px;
  margin-top: 8px;
}
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.gauge-svg { width: 100%; height: auto; overflow: visible; display: block; }
.gauge-sat .gauge-svg { max-width: 110px; }
.gauge-hero .gauge-svg { max-width: 170px; }
.gauge-track { fill: none; stroke: var(--hairline); stroke-width: 8; stroke-linecap: round; }
.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: gauge-sweep 800ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards;
}
.gauge-fill.is-tips { stroke: var(--brand); }
.gauge-fill.is-wages { stroke: var(--ink-3); }
.gauge-fill.is-total { stroke: var(--brand-solid); }
.today-card.goal-hit .gauge-fill.is-total { stroke: var(--success); }
.gauge-text { fill: var(--ink); font-weight: 800; font-family: inherit; font-size: 20px; }
.gauge-sat .gauge-text { font-size: 18px; }
.today-card.goal-hit .gauge-hero .gauge-text { fill: var(--success); }
@keyframes gauge-sweep {
  to { stroke-dashoffset: calc(100 - 100 * var(--gauge-fill, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .gauge-fill {
    animation: none;
    stroke-dashoffset: calc(100 - 100 * var(--gauge-fill, 0));
  }
}
.gauge-label { font-size: 10px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: -2px; }
.gauge-label-hero { font-size: 11px; letter-spacing: 0.06em; }
.gauge-hero-footer { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; }
.gauge-hero-target { font-size: 11px; color: var(--ink-3); }
.gauge-hero-target.hit { color: var(--success); font-weight: 700; }
.gauge-hero-rate { font-size: 13px; font-weight: 700; color: var(--brand); }
.gauge-sub { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.gauge-sub.gauge-cta { color: var(--brand); font-weight: 600; text-decoration: none; }

/* Narrow phones: stack the hero on top of the two satellites so the dial
   text never crowds. Tablet/desktop keeps the 3-up cluster. */
@media (max-width: 360px) {
  .today-cluster {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "tips wages";
    gap: 8px;
  }
  .today-cluster .gauge-hero { grid-area: hero; }
  .today-cluster .gauge-sat:first-of-type { grid-area: tips; }
  .today-cluster .gauge-sat:last-of-type { grid-area: wages; }
}

.pacing-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; margin-top: 14px; box-shadow: var(--shadow-card); }
.pacing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pacing-block small { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.pacing-block .goal-tag { text-transform: none; letter-spacing: 0; color: var(--brand); margin-left: 5px; }
.pacing-block .amount { font-size: 22px; font-weight: 800; color: var(--brand); margin-top: 4px; line-height: 1.1; }
.pacing-block .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.pacing-split { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.pacing-block .trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-top: 6px; }
.pacing-block .trend.up { background: var(--ok-bg); color: var(--ok-ink); }
.pacing-block .trend.down { background: var(--bad-bg); color: var(--bad-ink); }
.pacing-block .trend.flat { background: var(--flat-bg); color: var(--flat-ink); }
.pacing-progress { background: var(--hairline); border-radius: 6px; height: 6px; margin-top: 8px; overflow: hidden; }
.pacing-progress-fill { background: var(--brand); height: 100%; transition: width 0.4s; }
.pacing-progress-fill.goal-hit { background: var(--success); }
.pacing-goal-line { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.pacing-goal-line strong { color: var(--brand); }
.pacing-goal-line.hit strong { color: var(--success); }
.pacing-forecast { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-3); }
.pacing-forecast strong { color: var(--brand); }
.pacing-forecast.is-cta { border-top: 0; padding-top: 6px; }
.pacing-cta-link { color: var(--brand); font-weight: 600; text-decoration: none; }

.records-section { margin-top: 18px; }
.records-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.record-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; }
.record-card small { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; display: block; }
.record-card .val { font-size: 20px; font-weight: 800; color: var(--brand); margin-top: 4px; line-height: 1.1; }
.record-card .when { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.record-card .ctx { color: var(--ink-disabled); font-size: 10px; margin-top: 2px; }
.record-card .split { display: flex; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--ink-3); }
.record-card .split b { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
.record-card .split .tips b { color: var(--tips-ink); }
.record-card .split .wage b { color: var(--brand); }

.records-basis { margin-top: 10px; }
.records-basis-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.records-basis > label { display: inline-block; padding: 5px 12px; margin: 0 4px 6px 0; border: 1px solid var(--input-border); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface); cursor: pointer; }
.records-basis-input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.records-sets .records-grid { display: none; }
#rb-tips:checked ~ label[for="rb-tips"],
#rb-tipsfees:checked ~ label[for="rb-tipsfees"],
#rb-takehome:checked ~ label[for="rb-takehome"] { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
#rb-tips:checked ~ .records-sets .records-grid[data-basis="tips"],
#rb-tipsfees:checked ~ .records-sets .records-grid[data-basis="tipsfees"],
#rb-takehome:checked ~ .records-sets .records-grid[data-basis="takehome"] { display: grid; }

/* Small dashboard utilities (were inline styles in the template). */
.shift-details-icon { font-size: 16px; }
.trend-arrow { font-size: 14px; }

/* ===== Shared: back link (was duplicated in 5 page <style> blocks) ===== */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); text-decoration: none; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.back-link .material-symbols-outlined { font-size: 18px; }

/* ===== Shared list utilities (section header, empty state, row link) ===== */
.list-head { display: flex; justify-content: space-between; align-items: center; }
.list-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.item-link { text-decoration: none; color: inherit; }
.item.is-empty { justify-content: center; text-align: center; }
.empty-note { font-weight: 600; }
.delete-form { margin-top: 8px; }

/* ===== Shift detail ===== */
.shift-details.is-bordered { border-top: 1px solid var(--hairline); }
.shift-exp-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.shift-exp-section h3 { margin: 0 0 8px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.shift-exp-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.shift-exp-row:last-child { border-bottom: none; }
.shift-exp-row .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); font-weight: 700; }
.shift-exp-row .note { color: var(--ink-2); font-size: 12px; flex: 1; }
.shift-exp-row .amt { color: var(--brand); font-weight: 700; }
.shift-exp-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--tint-50); color: var(--brand); border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; margin-top: 8px; }
.shift-exp-add .material-symbols-outlined { font-size: 16px; }
.shift-map-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.shift-map-section h3 { margin: 0 0 4px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.shift-map-section p.sub { margin: 0 0 10px 0; font-size: 12px; color: var(--ink-disabled); }
#shiftMap { height: 260px; border-radius: 10px; border: 1px solid var(--input-border); }
.shift-map-pin { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-solid); color: #fff; font-weight: 800; font-size: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brand-solid); }
/* Shift-page dial cluster: rendered inside .primary-card (brand-bg button on
   /shift or div on /shifts/{id}). Inverts the dashboard's gauge palette to
   white/translucent so the strokes and text read against the brand colour.
   Layout (grid + sizing) is inherited from the unmodified .today-cluster
   rules above — only chrome colours change here. */
.primary-card .gauge-track { stroke: rgba(255, 255, 255, 0.22); }
.primary-card .gauge-fill.is-tips { stroke: #fff; }
.primary-card .gauge-fill.is-wages { stroke: rgba(255, 255, 255, 0.55); }
.primary-card .gauge-fill.is-total { stroke: #fff; }
.primary-card .gauge-text { fill: #fff; }
.primary-card .gauge-label,
.primary-card .gauge-label-hero { color: rgba(255, 255, 255, 0.85); }
.primary-card .gauge-hero-target { color: rgba(255, 255, 255, 0.75); }
.primary-card .gauge-hero-rate { color: #fff; }

/* ===== Fuel estimate card (shift detail / active / end review) ===== */
.fuel-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.fuel-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.fuel-card-head strong { color: var(--brand); font-size: 20px; font-weight: 800; }
.fuel-card-sub { margin: 6px 0 0 0; font-size: 12px; color: var(--ink-3); }
.fuel-card-disclaimer { margin: 4px 0 0 0; font-size: 11px; color: var(--ink-disabled); font-style: italic; }
.stat .stat-ico { font-size: 19px; text-transform: none; margin-bottom: 3px; color: var(--ink-2); }

/* ===== Shared utilities reused across pages ===== */
.ico-14 { font-size: 14px; }
.ico-16 { font-size: 16px; }
.inline-icon-text { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.tag-action { margin-left: auto; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: none; cursor: pointer; }
.tag-default { margin-left: auto; padding: 2px 8px; background: var(--tint-50); color: var(--ink-2); }
.btn-grow { flex: 1; }

/* ===== Active shift =====
   Top region redesign: a bold "Shift Active" title with a green status dot,
   a muted "Since X · Yh Zm so far" subtitle, a three-up ring-gauge cluster
   (Tips+Fees | Wages | Total — solid color, no progress fill since a driver
   mid-shift isn't targeting a number), and a two-up action grid for the
   current client + vehicle with icons that hint at the tap action. The
   deliveries list keeps its existing row design. */
.shift-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; margin-top: 4px; }
.shift-title-text { flex: 0 1 auto; min-width: 0; }
/* Live $/hr pace pushed to the right edge of the title line. Brand-toned so
   it reads as a meaningful figure, not a quieter sub-line — but a notch
   smaller than the title text so it doesn't compete with "Shift Active". */
.shift-title-pace { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--brand); letter-spacing: 0; white-space: nowrap; }
/* "This Shift Deliveries" reuses the title style for parity with "Shift
   Active". Extra top margin spaces it from the action grid above. */
.shift-title-section { margin-top: 18px; margin-bottom: 6px; }
.status-dot { width: 12px; height: 12px; background: var(--success); border-radius: 50%; flex: 0 0 12px; }
.shift-sub { color: var(--ink-3); font-size: 13px; margin: 2px 0 12px; }
.shift-stats-sub { color: var(--ink-3); font-size: 13px; margin: 2px 0 10px; }

/* Ring-cluster card is a button (taps open the shift-summary sheet) but
   visually chromeless — it sits flush in the page like the mockup, not in a
   brand-coloured card. The rings provide the visual weight. */
.ring-cluster-card { display: block; width: 100%; padding: 0; margin: 6px 0 14px; background: transparent; border: 0; cursor: pointer; text-align: center; }
.ring-cluster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }

/* Each ring is a fluid conic-coloured disc with a surface-toned inner circle.
   width:100% + aspect-ratio + max-width keeps it square at any cell size; the
   colored band is always 360deg — fully drawn, never a progress arc. inset is
   a percent so the band thickness scales with the ring (a fixed px inset
   would leave a chunky band on a small ring and a thin one on a large ring).
   Inner text uses clamp() so the label / value / sub-line shrink in lockstep
   with the ring on narrow viewports — no media-query step-changes. */
.ring-gauge { width: 100%; max-width: 140px; aspect-ratio: 1; border-radius: 50%; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; }
.ring-gauge.is-tips { background: var(--gauge-tips); }
.ring-gauge.is-wages { background: var(--gauge-wages); }
.ring-gauge.is-total { background: var(--gauge-total); }
.ring-gauge::before { content: ''; position: absolute; inset: 11%; background: var(--surface); border-radius: 50%; }
/* Inner content is constrained to ~76% so the dollar value and sub-line never
   touch the colored band. overflow:hidden + nowrap + ellipsis is the safety
   net — formatDollars already drops cents from the value so the ring stays
   readable down to ~85px, but a four-digit value on the narrowest viewport
   would otherwise spill into the ring without the clip. */
.ring-gauge-inner { position: relative; z-index: 2; text-align: center; padding: 0 4%; max-width: 76%; }
.ring-gauge-label { font-size: clamp(8px, 2.4vw, 11px); font-weight: 800; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-gauge-value { font-size: clamp(15px, 4.6vw, 24px); font-weight: 800; color: var(--ink); margin-top: 4px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-gauge-sub { font-size: clamp(9px, 2.4vw, 11px); color: var(--ink-3); margin-top: 3px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tap hint — small muted call-out below the rings so drivers know the cluster
   is interactive (opens the summary sheet with the end-shift action). */
.ring-cluster-hint { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ring-cluster-hint .material-symbols-outlined { font-size: 14px; }

/* Two-up action cards (Current Client / Current Vehicle). auto-fit so a
   missing vehicle gracefully widens the remaining card instead of leaving a
   gap. Each card is interactive (anchor or button) and the icon hints at the
   action: navigation arrow for Client (opens maps), swap_horiz for Vehicle
   (opens the change-vehicle sheet). is-static drops interactivity when no
   alternate vehicle is available. */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.action-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; font-family: inherit; text-align: left; cursor: pointer; min-width: 0; }
.action-card.is-static { cursor: default; }
.action-card-body { flex: 1 1 auto; min-width: 0; }
.action-label { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.action-value { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-icon { font-size: 22px; color: var(--ink-3); flex: 0 0 auto; }
.delivery-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
.delivery-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.delivery-status { display: flex; align-items: center; gap: 8px; }
.delivery-link { text-decoration: none; color: inherit; display: block; flex: 1; }
.delivery-link:active { opacity: 0.7; }
.delivery-actions { display: flex; gap: 8px; align-items: center; }
.delivery-complete-form { display: flex; gap: 8px; flex: 1; align-items: center; }
.delivery-tip { flex: 0 0 110px; height: 40px; padding: 0 10px; }
.delivery-tip .input { font-size: 14px; padding: 0; height: 100%; }
.btn-action { height: 40px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; }
.btn-action.primary { background: var(--brand-solid); color: #fff; }
.btn-action.soft { background: var(--tint-50); color: var(--brand); }
.btn-action.full { width: 100%; }
.btn-action .material-symbols-outlined { font-size: 18px; }
.btn-action.icon-only { width: 44px; padding: 0; }
/* delivery-row meta lines (were inline styles in deliveryRow). */
.dr-customer { font-weight: 700; color: var(--ink); margin: 2px 0; }
.dr-addr { margin-top: 2px; }
.dr-time { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dr-miles { display: flex; align-items: center; gap: 4px; color: var(--ink-3); margin-top: 2px; font-size: 12px; }
.dr-miles .material-symbols-outlined { font-size: 14px; color: var(--success); }
.dr-earn { display: flex; flex-direction: column; align-items: flex-end; }
.dr-earn-sub { font-size: 10px; color: var(--ink-3); }
.dr-earn-sub.is-first { margin-top: 2px; }

/* "Known regular" denotation on a delivery row — mirrors the new-delivery banner. */
.regular-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; width: max-content; max-width: 100%; margin: 4px 0 2px; padding: 4px 9px; background: var(--tint-50); border: 1px solid var(--tint-border); border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--brand); line-height: 1.25; }
.regular-pill .rp-line { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.regular-pill .material-symbols-outlined { font-size: 14px; }
.regular-pill .rp-stats { font-weight: 600; color: var(--ink-2); }
.regular-pill .rp-warn { margin-top: 1px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Bottom-sheet visibility + bottom-nav clearance (active-shift sheets). */
.sheet-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1050; }
.sheet, #return-sheet { padding-bottom: 120px !important; max-height: 85vh !important; z-index: 1100; }
.sheet .action-bar, #return-sheet .action-bar { bottom: 70px !important; }

/* Change-vehicle sheet. */
.vehicle-pick-list { margin-bottom: 16px; }
.vehicle-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.vehicle-opt-name { display: flex; flex-direction: column; min-width: 0; }

/* ===== Voice input (mic pulse) — shared by delivery forms + active shift ===== */
@keyframes pulse-mic {
  0% { color: var(--brand); transform: scale(1); }
  50% { color: var(--bad-ink); transform: scale(1.2); }
  100% { color: var(--brand); transform: scale(1); }
}
.voice-btn.listening .material-symbols-outlined { animation: pulse-mic 1.5s infinite; }
.icon-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--ink-3); display: flex; align-items: center; justify-content: center; }

/* ===== Shared page header (back-link + title) ===== */
.page-head { margin-bottom: 16px; }
.page-head h2 { margin: 6px 0 4px 0; }

/* ===== Account: encrypted backup ===== */
.backup-flash { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-ink); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; margin: 12px 0; }
.backup-error { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid var(--bad-ink); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; margin: 12px 0; }
.backup-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; margin-top: 14px; }
.backup-card h3 { margin: 0 0 6px 0; font-size: 17px; }
.backup-card h4 { margin: 0 0 10px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.backup-card .muted { color: var(--ink-3); font-size: 13px; line-height: 1.55; margin: 0 0 12px 0; }
.backup-card .muted.small { font-size: 11px; margin: 8px 0 0 0; }
.backup-card.muted-section { background: var(--bg); }
.backup-form { display: flex; flex-direction: column; gap: 12px; }
.backup-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.backup-form label small { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.backup-form input[type="password"], .backup-form input[type="file"] { font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--ink); }
.backup-form input[type="password"]:focus, .backup-form input[type="file"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,62,199,0.12); }
.backup-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; align-self: flex-start; }
.backup-btn.primary { background: var(--brand); color: #fff; }
.backup-btn.secondary { background: var(--hairline); color: var(--brand); border: 1px solid var(--input-border); }
.backup-btn .material-symbols-outlined { font-size: 18px; }
.backup-verify-result { margin-top: 12px; background: var(--ok-bg); border: 1px solid var(--ok-ink); border-radius: 10px; padding: 12px; }
.backup-verify-head { display: flex; align-items: center; gap: 6px; color: var(--ok-ink); font-size: 13px; margin-bottom: 6px; }
.backup-verify-head .material-symbols-outlined { font-size: 18px; }
.backup-verify-result pre { margin: 0; font-size: 11px; line-height: 1.45; max-height: 260px; overflow: auto; background: var(--surface); padding: 10px; border-radius: 8px; border: 1px solid var(--hairline); }
.backup-contents { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.backup-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--hairline); padding: 1px 5px; border-radius: 4px; }

/* ===== Shared spacing + control utilities ===== */
.mt-4 { margin-top: 4px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.settings-eyebrow.spaced { display: block; margin-bottom: 12px; }
.settings-row.align-start { align-items: flex-start; }
.card.compact { padding: 14px; }
.form-help { margin: 0 0 12px 0; font-size: 12px; }
.field-help { margin: 6px 0 0 0; font-size: 11px; }
.form-error { background: var(--bad-bg); color: var(--bad-ink); padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.btn-outline { border: 1px solid var(--input-border); background: var(--surface); padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--ink-2); }
.btn-outline.sm { padding: 4px 10px; font-size: 12px; }

/* ===== Account: Pro banner ===== */
.pro-banner { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pro-banner.free { background: var(--surface); color: var(--brand); border: 1px dashed var(--brand); }
.pro-banner .label { font-weight: 700; font-size: 14px; }
.pro-banner .sub { font-size: 12px; opacity: 0.9; }
.pro-banner a, .pro-banner button { background: #fff; color: var(--brand-solid); border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; text-decoration: none; font-size: 13px; cursor: pointer; }
.pro-banner.free a { background: var(--brand-solid); color: #fff; }
.pro-banner form { margin: 0; }
.pro-badge.on-brand { background: #fff; color: var(--brand-solid); }
.comped-pill { background: rgba(255,255,255,0.18); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin-left: 6px; }
.upgraded-flash { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-ink); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; margin: 12px 0; }

/* ===== Account: GPS self-test + recent-attempts log ===== */
.gps-test-result { background: var(--tint-50); border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.gps-test-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.gps-test-line span { color: var(--ink-3); }
.gps-test-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.gps-test-err { color: var(--bad-ink); font-size: 12px; margin-top: 6px; }
#gpsMapLink { display: inline-block; margin-top: 8px; font-size: 12px; }
.gps-log-list { margin-top: 8px; }
.gps-log-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); margin-bottom: 6px; font-size: 12px; }
.gps-log-row .chip { display: inline-block; padding: 2px 8px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.gps-log-row .meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gps-log-row .meta small { color: var(--ink-disabled); display: block; margin-top: 2px; }
.gps-log-row .when { color: var(--ink-disabled); font-size: 11px; white-space: nowrap; }
.gps-log-empty { padding: 14px; text-align: center; color: var(--ink-disabled); font-size: 12px; background: var(--bg); border: 1px dashed var(--input-border); border-radius: 8px; }

/* ===== Shared utilities (cont.) ===== */
.ico-20 { font-size: 20px; }
.m-0 { margin: 0; }
.mb-12 { margin-bottom: 12px; }
.cap { text-transform: capitalize; }
.field-val { font-weight: 700; margin: 4px 0; }
.card-section.no-border { border: none; }
.badge.lg { width: 44px; height: 44px; font-size: 18px; }

/* ===== Delivery view (header + detail fields) =====
   Base rules moved out of delivery_view.templ's <style> blocks. Existing
   :root[data-theme="dark"] overrides for these card classes stay where they
   are (already hand-tuned) — base resolves through tokens, dark refines. */
.dv-head { margin-bottom: 20px; }
.dv-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dv-head-left { display: flex; align-items: center; gap: 8px; }
.dv-back-link { text-decoration: none; color: var(--ink-3); display: flex; align-items: center; }
.dv-edit-link { text-decoration: none; color: var(--brand); display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; }
.dv-customer-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dv-customer-name { margin: 0; font-size: 20px; font-weight: 800; }
.dv-customer-addr { margin: 0; font-size: 14px; color: var(--ink-3); }
.dv-phone { display: block; color: var(--brand); font-weight: 700; margin-top: 4px; }
.dv-notes { margin: 4px 0; font-size: 14px; line-height: 1.4; }
.dv-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.dv-sub-italic { margin: 4px 0; font-size: 12px; color: var(--ink-3); font-style: italic; }
.dv-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

/* ===== Delivery: order-receipt card (Pack 5d) ===== */
.receipt-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; margin-top: 18px; }
.receipt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.receipt-status { display: inline-flex; align-items: center; gap: 4px; background: var(--ok-bg); color: var(--ok-ink); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.receipt-status .material-symbols-outlined { font-size: 14px; }
.receipt-empty { font-size: 13px; color: var(--ink-3); margin: 0 0 12px 0; line-height: 1.5; }
.receipt-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; background: var(--bg); border-radius: 10px; text-decoration: none; color: var(--ink-3); font-size: 11px; }
.receipt-thumb { max-width: 100%; max-height: 320px; border-radius: 8px; box-shadow: var(--shadow-card-soft); }
.receipt-thumb-hint { font-size: 11px; }
.receipt-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.receipt-form { display: flex; flex-direction: column; gap: 10px; }
.receipt-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--input-border); border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.receipt-file input[type="file"] { flex: 1; font-family: inherit; font-size: 12px; }
.receipt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; align-self: flex-start; }
.receipt-btn.primary { background: var(--brand-solid); color: #fff; }
.receipt-btn.secondary { background: var(--bad-bg); color: var(--bad-ink); }
.receipt-btn .material-symbols-outlined { font-size: 16px; }

/* ===== Delivery: audit trail (Pack 5a) ===== */
.audit-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; margin-top: 18px; }
.audit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.audit-lock-hint { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--hairline); padding: 4px 8px; border-radius: 6px; }
.audit-lock-hint.locked { background: var(--warn-bg); color: var(--warn-ink); }
.audit-lock-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--warn-bg); color: var(--warn-ink); padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.audit-lock-pill .material-symbols-outlined { font-size: 16px; }
.audit-empty { font-size: 13px; color: var(--ink-3); margin: 0; }
.audit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.audit-entry { display: flex; gap: 12px; padding: 8px 10px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--input-border); font-size: 12px; line-height: 1.55; }
.audit-entry.is-create { border-left-color: var(--success); }
.audit-entry.is-update { border-left-color: #0050ff; }
.audit-entry.is-complete { border-left-color: var(--success); }
.audit-entry.is-delete { border-left-color: var(--bad-ink); }
.audit-when { color: var(--ink-3); min-width: 120px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.audit-body { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.audit-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; }
.audit-tag.create   { background: var(--ok-bg); color: var(--ok-ink); }
.audit-tag.update   { background: #dbeafe; color: #1e40af; }
.audit-tag.complete { background: var(--ok-bg); color: var(--ok-ink); }
.audit-tag.delete   { background: var(--bad-bg); color: var(--bad-ink); }
.audit-field { font-weight: 700; color: var(--ink-2); }
.audit-old { color: var(--ink-disabled); text-decoration: line-through; }
.audit-arrow { color: var(--ink-disabled); }
.audit-new { color: var(--ink); font-weight: 600; }
@media (max-width: 480px) { .audit-when { min-width: 0; flex-basis: 100%; } }

/* ===== Delivery: customer history (Pack 5b) ===== */
.cust-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; margin-top: 18px; }
.cust-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cust-priv-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--hairline); color: var(--ink-2); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.cust-priv-tag .material-symbols-outlined { font-size: 14px; }
.cust-empty { font-size: 13px; color: var(--ink-3); margin: 0 0 12px 0; }
.cust-stats { list-style: none; padding: 0; margin: 0 0 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.cust-stats li { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.cust-stats small { display: block; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.cust-stats strong { display: block; font-size: 15px; color: var(--ink); margin-top: 2px; }
.cust-note-form { display: flex; flex-direction: column; gap: 8px; }
.cust-note-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cust-note-form textarea { font-family: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; resize: vertical; line-height: 1.5; background: var(--input-bg); color: var(--ink); }
.cust-note-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,62,199,0.12); }
.cust-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cust-note-saved { font-size: 11px; color: var(--ink-3); }
.cust-note-btn { background: var(--brand-solid); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; margin-left: auto; }

/* ===== Pro upsell card (customer-history / receipt free-user) ===== */
.cust-upsell { background: var(--bg); border: 1px solid var(--tint-border); border-radius: 14px; padding: 14px 16px; margin-top: 18px; }
.cust-upsell-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 6px; }
.cust-upsell-eyebrow .material-symbols-outlined { color: #f59e0b; font-size: 16px; }
.cust-upsell p { margin: 0 0 10px 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cust-upsell-cta { display: inline-block; background: var(--brand-solid); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; }

/* ===== Delivery: per-delivery GPS attempt log card ===== */
.gps-log-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; margin-top: 18px; box-shadow: var(--shadow-card-soft); }
.gps-log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.gps-log-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.gps-log-eyebrow .material-symbols-outlined { font-size: 16px; }
.gps-log-refresh { border: 1px solid var(--input-border); background: var(--surface); padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.gps-log-hint { margin: 0 0 10px 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.gps-log-rows .gps-log-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--bg); margin-bottom: 6px; font-size: 12px; }
.gps-log-rows .chip { display: inline-block; padding: 2px 8px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.gps-log-rows .meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gps-log-rows .meta small { color: var(--ink-disabled); display: block; margin-top: 2px; }
.gps-log-rows .when { color: var(--ink-disabled); font-size: 11px; white-space: nowrap; }

/* ===== Delivery edit/new form bits ===== */
.ico-18 { font-size: 18px; }
.settings-eyebrow.tight { display: block; margin-bottom: 4px; }
.field-label-row { display: flex; justify-content: space-between; align-items: center; }
.complete-base-amt { font-size: 24px; margin-bottom: 12px; font-weight: 900; color: var(--brand); }
.edit-nav-row { margin-top: 16px; display: flex; gap: 10px; }
.btn-navigate { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--tint-50); color: var(--brand); border-radius: 12px; padding: 14px; font-weight: 800; font-size: 15px; text-decoration: none; height: 48px; }
.reset-status-box { flex-direction: row; align-items: center; gap: 12px; background: var(--bad-bg); padding: 12px; border-radius: 8px; border: 1px solid var(--bad-ink); }
.reset-status-box input[type="checkbox"] { width: 20px; height: 20px; }
.reset-status-label { font-weight: 700; color: var(--bad-ink); }
.reset-status-box .hint { display: block; font-weight: 400; margin-top: 2px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* ===== New-delivery: receipt field + "known regular" banner (HTMX-swapped) ===== */
.delivery-receipt-field { margin-top: 18px; padding: 12px; background: var(--bg); border: 1px dashed var(--input-border); border-radius: 10px; }
.delivery-receipt-field label.title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0 0 6px 0; }
.delivery-receipt-field small.hint { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.delivery-receipt-field input[type="file"] { font-family: inherit; font-size: 12px; }
.regular-history:empty { display: none; }
.regular-banner { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px 0; padding: 10px 12px; background: var(--tint-50); border: 1px solid var(--tint-border); border-left: 3px solid var(--brand); border-radius: 10px; }
.regular-banner .rb-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); font-size: 14px; }
.regular-banner .rb-head .material-symbols-outlined { font-size: 18px; }
.regular-banner .rb-stats { font-size: 13px; color: var(--ink-2); }
.regular-banner .rb-warn { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: 11px; font-weight: 700; }
.regular-banner .rb-note { margin: 2px 0 0 0; font-size: 12px; color: var(--ink-3); font-style: italic; }

/* ===== Auth pages (login / signup / forgot / reset) ===== */
.auth-aux { margin-top: 24px; text-align: center; }
.link-brand { text-decoration: none; color: var(--brand); font-weight: 600; }
.auth-intro { text-align: center; margin-bottom: 24px; }
.auth-intro-icon { font-size: 48px; color: var(--brand); }
.form-stack { display: flex; flex-direction: column; gap: 16px; }

/* ===== Generic error page ===== */
.error-page { max-width: 480px; margin: 32px auto; padding: 0 16px; text-align: center; }
.error-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bad-bg); color: var(--bad-ink); margin-bottom: 12px; }
.error-icon .material-symbols-outlined { font-size: 28px; }
.error-page h2 { margin: 0 0 8px 0; font-size: 22px; }
.error-page p { margin: 0 0 20px 0; color: var(--ink-2); line-height: 1.5; }
.error-cta { display: inline-block; background: var(--brand-solid); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 10px; margin-right: 8px; }
.error-link { display: inline-block; color: var(--brand); text-decoration: none; font-weight: 700; padding: 12px 20px; }

/* ===== Clients list ===== */
.mt-10 { margin-top: 10px; }
.client-list { display: flex; flex-direction: column; gap: 12px; }
.client-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-card); }
.client-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.client-name { font-size: 16px; font-weight: 700; }
.client-name .tag { margin-left: 8px; }
.client-actions { display: flex; gap: 4px; align-items: center; }
.client-actions form { display: inline; }
.icon-small { font-size: 18px; color: var(--ink-3); cursor: pointer; background: none; border: none; padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.client-meta { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.client-pill { background: var(--bg); border: 1px solid var(--tint-100); border-radius: 10px; padding: 10px; font-size: 12px; }
.client-pill strong { display: block; font-size: 13px; color: var(--brand); }
.client-toolbar { display: flex; justify-content: center; align-items: center; margin: 12px 0; }
.client-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--brand-solid); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,62,199,0.25); text-decoration: none; }
.client-add-btn .material-symbols-outlined { font-size: 20px; }
.client-empty { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 32px; text-align: center; }
.client-empty small { color: var(--ink-2); }
.client-pro-strip { display: flex; align-items: center; gap: 8px; background: var(--tint-50); border: 1px solid var(--tint-border); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--brand); margin-bottom: 10px; font-weight: 600; }
.client-pro-strip .material-symbols-outlined { font-size: 18px; }
.client-pro-strip .count { color: var(--ink-3); font-weight: 500; margin-left: auto; }
.checkbox-row.on-card { color: rgba(255,255,255,0.95); }
.mt-8 { margin-top: 8px; }

/* ===== Shared gradient hero (earnings areas / regulars) ===== */
.page-hero { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.page-hero h2 { margin: 0 0 4px 0; font-size: 20px; }
.page-hero p { margin: 0; font-size: 13px; opacity: 0.92; }
.page-hero .page-hero-note { margin-top: 6px; font-size: 12px; opacity: 0.85; }

/* ===== Earnings areas (hotspot map) ===== */
.areas-window { display: inline-flex; background: var(--surface); border: 1px solid var(--input-border); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.areas-window-pill { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.areas-window-pill.active { background: var(--brand-solid); color: #fff; }
.areas-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.areas-kpi { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; text-align: center; }
.areas-kpi small { display: block; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.areas-kpi strong { display: block; color: var(--brand); font-size: 20px; font-weight: 800; margin-top: 4px; }
.areas-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.areas-section h3 { margin: 0 0 4px 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.areas-section .sub { margin: 0 0 10px 0; color: var(--ink-3); font-size: 12px; }
#areas-map { height: 360px; border-radius: 10px; border: 1px solid var(--input-border); }
.areas-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.areas-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.areas-legend .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px currentColor; }
.areas-legend .dot-hi { background: #16a34a; color: #16a34a; }
.areas-legend .dot-mid { background: #f59e0b; color: #f59e0b; }
.areas-legend .dot-lo { background: #b91c1c; color: #b91c1c; }
.areas-empty { padding: 28px 14px; text-align: center; color: var(--ink-3); font-size: 13px; background: var(--bg); border-radius: 10px; }
.areas-empty strong { display: block; color: var(--brand); font-size: 15px; margin-bottom: 4px; }

/* ===== Regulars (heatmap + list) ===== */
.reg-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.reg-section h3 { margin: 0 0 4px 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.reg-section .sub { margin: 0 0 10px 0; color: var(--ink-3); font-size: 12px; }
#regulars-map { height: 320px; border-radius: 10px; border: 1px solid var(--input-border); }
.reg-empty { padding: 28px 14px; text-align: center; color: var(--ink-3); font-size: 13px; background: var(--bg); border-radius: 10px; }
.reg-empty strong { display: block; color: var(--brand); font-size: 15px; margin-bottom: 4px; }
.reg-list { list-style: none; padding: 0; margin: 0; }
.reg-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.reg-row:last-child { border-bottom: none; }
.reg-rank { background: var(--brand-solid); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.reg-meta { flex: 1; min-width: 0; }
.reg-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.reg-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-stats { text-align: right; font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.reg-stats strong { display: block; color: var(--brand); font-weight: 800; font-size: 14px; }
.reg-no-pin { font-size: 10px; color: var(--bad-ink); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.fw-600 { font-weight: 600; }
.ml-auto { margin-left: auto; }

/* ===== Expenses list ===== */
.exp-summary { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.exp-summary .total { font-size: 22px; font-weight: 800; color: var(--brand); margin-left: auto; }
.exp-summary small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.exp-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.exp-filter a { padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--tint-100); color: var(--brand); font-size: 12px; font-weight: 600; text-decoration: none; }
.exp-filter a.active { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
.exp-list { display: flex; flex-direction: column; gap: 10px; }
.exp-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-card); }
.exp-row1 { display: flex; align-items: baseline; gap: 10px; }
.exp-row1 .amt { font-size: 18px; font-weight: 800; color: var(--brand); margin-left: auto; }
.exp-cat { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--tint-50); color: var(--brand); padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.exp-date { color: var(--ink-3); font-size: 12px; }
.exp-note { color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.exp-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.exp-meta a { color: var(--brand); text-decoration: none; }
.exp-meta .material-symbols-outlined { font-size: 14px; vertical-align: middle; }
.exp-actions { display: flex; gap: 4px; margin-left: auto; }
.exp-actions a, .exp-actions button { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 12px; color: var(--ink-3); text-decoration: none; }
.exp-actions form { display: inline; }
.exp-actions .danger { color: var(--bad-ink); }
.exp-empty { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 32px; text-align: center; color: var(--ink-3); }
.exp-toolbar { display: flex; justify-content: center; align-items: center; margin: 12px 0; }
.exp-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--brand-solid); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,62,199,0.25); text-decoration: none; }
.exp-add-btn .material-symbols-outlined { font-size: 20px; }

/* ===== Generic form card (expenses form + others) ===== */
.form-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; }
.form-card h2 { margin-top: 0; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.form-row input, .form-row select, .form-row textarea { padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--input-bg); color: var(--ink); }
.form-row textarea { resize: vertical; min-height: 70px; }
.form-row small { color: var(--ink-3); font-size: 11px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.form-actions button, .form-actions a { flex: 1; padding: 12px; border-radius: 10px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
.form-actions button[type="submit"] { background: var(--brand-solid); color: #fff; }
.form-actions a { background: var(--hairline); color: var(--ink-3); }
.deductible-hint { background: var(--tint-50); border: 1px solid var(--tint-border); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--brand); margin-top: 4px; }
.subsumed-hint { background: var(--warn-bg); border: 1px solid #f0d671; color: var(--warn-ink); border-radius: 8px; padding: 8px 10px; font-size: 11px; margin-top: 4px; }
.receipt-preview { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px dashed var(--tint-border); border-radius: 8px; font-size: 12px; color: var(--brand); margin-bottom: 6px; }
.receipt-preview a { color: var(--brand); }

/* ===== Notifications inbox ===== */
.alert-list { list-style: none; padding: 0; margin: 8px 0 80px 0; display: flex; flex-direction: column; gap: 8px; }
.alert-row { display: flex; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--input-border); border-radius: 10px; }
.alert-row.unread { border-left: 3px solid var(--brand); background: var(--tint-50); }
.alert-row:not(.unread) .alert-title { font-weight: 500; color: var(--ink-2); }
.alert-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--tint-100); color: var(--brand); }
.alert-icon .material-symbols-outlined { font-size: 20px; }
.alert-icon-billing { background: #fef3c7; color: #b45309; }
.alert-icon-account  { background: #dcfce7; color: #15803d; }
.alert-icon-security { background: #fee2e2; color: #b91c1c; }
.alert-icon-system   { background: #e0e7ff; color: #4338ca; }
.alert-icon-message  { background: #f0f9ff; color: #0369a1; }
.alert-icon-support  { background: #ecfeff; color: #0e7490; }
.alert-body { flex: 1; min-width: 0; }
.alert-row-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.alert-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--hairline); color: var(--ink-2); }
.alert-tag-billing { background: #fef3c7; color: #92400e; }
.alert-tag-account  { background: #dcfce7; color: #166534; }
.alert-tag-security { background: #fee2e2; color: #991b1b; }
.alert-tag-system   { background: #e0e7ff; color: #3730a3; }
.alert-tag-message  { background: #dbeafe; color: #1e40af; }
.alert-tag-support  { background: #cffafe; color: #155e75; }
.inbox-support { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 6px 0 12px 0; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 10px; color: #0e7490; font-weight: 600; font-size: 14px; text-decoration: none; }
.inbox-support .material-symbols-outlined { font-size: 20px; }
.inbox-support .inbox-support-arrow { margin-left: auto; font-weight: 700; }
.alert-sender { color: var(--ink-3); font-size: 11px; }
.alert-time { margin-left: auto; color: var(--ink-disabled); font-size: 11px; }
.alert-title { margin: 0 0 2px 0; font-weight: 700; color: var(--ink); }
.alert-text { margin: 0 0 8px 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alert-actions form { display: inline; }
.alert-action-btn, .alert-link { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--input-border); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; font-weight: 600; }
.alert-link { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
.alert-delete { color: var(--bad-ink); border-color: #fecaca; }
.btn-link { background: none; border: none; color: var(--brand); font-weight: 600; cursor: pointer; padding: 0; font-size: 13px; }
.mark-all-form { margin: 8px 0 12px 0; }
.maxw-920 { max-width: 920px; }
.w-full { width: 100%; }
.center-sm { font-size: 12px; text-align: center; }

/* ===== Upgrade / Pro page ===== */
.upgrade-hero { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.upgrade-hero h2 { margin: 0 0 6px 0; font-size: 24px; }
.upgrade-hero small { opacity: 0.85; }
.upgrade-hero .price { font-size: 36px; font-weight: 800; margin-top: 12px; }
.upgrade-hero .price small { font-size: 14px; font-weight: 500; opacity: 0.85; }
.upgrade-features { list-style: none; padding: 0; margin: 14px 0 0 0; }
.upgrade-features li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; }
.upgrade-features .material-symbols-outlined { color: #fff; background: rgba(255,255,255,0.2); border-radius: 999px; padding: 4px; font-size: 18px; }
.upgrade-cta { display: block; width: 100%; padding: 14px; background: #fff; color: var(--brand-solid); border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 18px; text-align: center; text-decoration: none; }
.upgrade-notice { background: var(--warn-bg); border: 1px solid #f0d671; border-radius: 12px; padding: 12px; font-size: 14px; color: var(--warn-ink); margin-top: 14px; }
.upgrade-notice.on-hero { background: rgba(255,255,255,0.95); color: #5b4a00; margin-top: 18px; }
.upgrade-cancel { background: var(--bad-bg); border: 1px solid #f0a8a3; border-radius: 12px; padding: 12px; font-size: 14px; color: var(--bad-ink); margin-bottom: 14px; }
.status-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.status-card .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.status-card .row strong { color: var(--brand); }
.badge-pro { display: inline-block; background: var(--brand-solid); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.badge-comp { background: var(--success); }
.badge-past_due { background: #ea580c; }
.badge-canceled { background: var(--ink-3); }
.plan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px 0; background: rgba(255,255,255,0.12); padding: 4px; border-radius: 12px; }
.plan-toggle label { cursor: pointer; padding: 10px 12px; border-radius: 8px; text-align: center; transition: background 0.15s; }
.plan-toggle input { display: none; }
.plan-toggle label .plan-name { font-size: 13px; font-weight: 700; }
.plan-toggle label .plan-price { font-size: 11px; opacity: 0.85; display: block; margin-top: 2px; }
.plan-toggle label .plan-save { display: inline-block; background: #ffd166; color: #5b4a00; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.plan-toggle input:checked + label { background: #fff; color: var(--brand-solid); }
.plan-toggle input:checked + label .plan-price { opacity: 1; }
.trial-pill { display: inline-block; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.link-muted { text-decoration: none; margin-left: 6px; }
.tax-table-note { font-size: 12px; margin: -6px 0 12px 0; }

/* ===== Tax estimate page ===== */
.tax-hero { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 16px; padding: 20px; }
.tax-hero small { opacity: 0.85; font-size: 12px; }
.tax-hero .quarterly { font-size: 36px; font-weight: 800; margin-top: 4px; }
.tax-hero .due { font-size: 12px; opacity: 0.9; margin-top: 6px; }
.tax-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin-top: 12px; }
.tax-card h3 { margin: 0 0 12px 0; font-size: 15px; }
.tax-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--bg); }
.tax-row:last-child { border-bottom: 0; font-weight: 700; padding-top: 12px; }
.tax-row strong { color: var(--brand); }
.tax-row .muted { color: var(--ink-disabled); font-size: 12px; }
.q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.q-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; position: relative; }
.q-card.current { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0,62,199,0.10); }
.q-card .q-label { display: flex; justify-content: space-between; align-items: center; }
.q-card .q-label strong { font-size: 13px; color: var(--brand); }
.q-card .q-label .now { background: var(--brand-solid); color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.q-card .q-bounds { color: var(--ink-disabled); font-size: 10px; margin-bottom: 6px; }
.q-card .q-val { font-size: 18px; font-weight: 800; color: var(--ink); }
.q-card .q-sub { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.q-card .q-due { color: #ea580c; font-size: 10px; margin-top: 8px; font-weight: 600; }
.client-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.client-table th, .client-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--hairline); }
.client-table th { background: var(--bg); font-size: 10px; text-transform: uppercase; color: var(--ink-3); }
.client-table td.num, .client-table th.num { text-align: right; }
.client-table tr:last-child td { border-bottom: 0; }
.client-table tfoot td { font-weight: 700; border-top: 2px solid var(--brand); }
.year-pills { display: flex; gap: 8px; margin-bottom: 14px; }
.year-pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; background: var(--surface); border: 1px solid var(--input-border); color: var(--ink-3); }
.year-pill.active { background: var(--brand-solid); color: #fff; border-color: var(--brand-solid); }
.export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--input-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.export-btn .material-symbols-outlined { font-size: 18px; }
.disclaimer { background: var(--warn-bg); border: 1px solid #f0d671; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--warn-ink); margin-top: 14px; line-height: 1.5; }
.rates-line { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.rates-line a { color: var(--brand); font-weight: 600; }

/* ===== Smart Insights ===== */
.ins-hero { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.ins-hero h2 { margin: 0 0 4px 0; font-size: 22px; }
.ins-hero p { margin: 0; font-size: 13px; opacity: 0.9; }
.ins-section { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.ins-section h3 { margin: 0 0 4px 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.ins-section .sub { color: var(--ink-3); font-size: 12px; margin: 0 0 12px 0; }
.ins-ico { font-size: 18px; color: var(--brand); }
.ins-ico.bad { color: var(--bad-ink); }
.ins-ico.ok { color: var(--success); }
.ins-empty { background: var(--surface); border: 1px dashed var(--tint-border); border-radius: 12px; padding: 32px; text-align: center; color: var(--ink-3); }
.ins-empty.compact { padding: 20px; }
.ins-empty strong { display: block; color: var(--brand); font-size: 15px; margin-bottom: 4px; }
.hour-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 140px; margin-top: 6px; }
.hour-bar { background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; transition: opacity 0.15s; }
.hour-bar.sparse { background: var(--tint-border); }
.hour-bar:hover { opacity: 0.8; }
.hour-bar .tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; display: none; margin-bottom: 4px; }
.hour-bar:hover .tip { display: block; }
.hour-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: 4px; font-size: 9px; color: var(--ink-3); text-align: center; }
.hour-callout { background: var(--tint-50); border-left: 3px solid var(--brand); border-radius: 6px; padding: 8px 10px; margin-top: 10px; font-size: 13px; color: var(--brand); }
.cluster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cluster-card { background: var(--bg); border: 1px solid var(--tint-100); border-radius: 10px; padding: 12px; }
.cluster-card.winner { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-color: var(--brand-solid); }
.cluster-card small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.cluster-card.winner small { color: rgba(255,255,255,0.85); }
.cluster-card .val { font-size: 24px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.cluster-card.winner .val { color: #fff; }
.cluster-card .meta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.cluster-card.winner .meta { color: rgba(255,255,255,0.85); }
.cluster-callout { margin-top: 10px; font-size: 13px; color: var(--brand); font-weight: 600; }
.anomaly-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.anomaly-row:last-child { border-bottom: none; }
.anomaly-row .day { background: var(--bad-bg); color: var(--bad-ink); font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.anomaly-row .meta { flex: 1; font-size: 13px; }
.anomaly-row .meta a { color: var(--ink); text-decoration: none; font-weight: 600; }
.anomaly-row .meta small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.anomaly-row .delta { color: var(--bad-ink); font-weight: 800; font-size: 14px; }
.tip-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.tip-row:last-child { border-bottom: none; }
.tip-row .name { flex: 1; font-weight: 600; font-size: 14px; }
.tip-row .name small { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; margin-top: 2px; }
.tip-row .avg-tip { font-size: 16px; font-weight: 800; color: var(--brand); min-width: 70px; text-align: right; }
.tip-row .rate { font-size: 11px; color: var(--ink-3); min-width: 56px; text-align: right; }
.wh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.wh-card { background: var(--bg); border: 1px solid var(--tint-100); border-radius: 10px; padding: 12px; min-width: 0; }
.wh-card.wh-total { grid-column: 1 / -1; background: linear-gradient(135deg, var(--brand-solid), #0050ff); border-color: var(--brand-solid); }
.wh-card small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.wh-card.wh-total small { color: rgba(255,255,255,0.85); }
.wh-card .val { font-size: 20px; font-weight: 800; color: var(--brand); margin-top: 4px; overflow-wrap: anywhere; }
.wh-card.wh-total .val { color: #fff; }
.wh-card .meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.wh-card.wh-total .meta { color: rgba(255,255,255,0.85); }
.wh-bar { height: 10px; border-radius: 6px; background: var(--tint-100); overflow: hidden; margin-top: 12px; }
.wh-bar-fill { height: 100%; background: var(--brand); }
.wh-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.wh-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.wh-legend .dot.drive { background: var(--brand); }
.wh-legend .dot.store { background: var(--tint-100); }

/* ===== Earnings page ===== */
.text-right { text-align: right; }
.mt-6 { margin-top: 6px; }
.card-subtext { margin-top: 6px; color: rgba(255,255,255,0.85); }
.block-link { text-decoration: none; color: inherit; display: block; }
.net-card { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 14px; padding: 16px; margin: 8px 0 12px 0; }
.net-card .net-row { display: flex; align-items: baseline; gap: 14px; }
.net-card .gross { font-size: 16px; opacity: 0.9; }
.net-card .net { font-size: 28px; font-weight: 800; margin-left: auto; }
.net-card small { display: block; opacity: 0.85; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.net-card .breakdown { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 13px; }
.net-card .breakdown a { color: #fff; text-decoration: underline; opacity: 0.9; }
.pro-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin: 8px 0 12px 0; }
.pro-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; min-height: 64px; background: var(--surface); border: 1px solid var(--input-border); border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; cursor: pointer; text-align: center; line-height: 1.1; transition: background 0.15s, border-color 0.15s, transform 0.05s; position: relative; }
.pro-btn:hover { background: var(--tint-50); border-color: var(--brand); }
.pro-btn:active { transform: scale(0.98); }
.pro-btn .material-symbols-outlined { font-size: 22px; }
.pro-btn .pro-btn-label { display: block; white-space: nowrap; }
.pro-btn .pro-badge { position: absolute; top: 4px; right: 4px; font-size: 8px; padding: 1px 4px; }
.pro-reports { margin: 0 0 12px 0; }
.pro-reports > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--input-border); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pro-reports > summary::-webkit-details-marker { display: none; }
.pro-reports > summary:hover { background: var(--bg); }
.pro-reports > summary .material-symbols-outlined { font-size: 18px; color: var(--ink-3); }
.pro-reports > summary .pro-reports-chev { margin-left: auto; transition: transform 0.15s; }
.pro-reports[open] > summary .pro-reports-chev { transform: rotate(180deg); }
.pro-reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin-top: 8px; }
.mf-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px 0; }
.mf-stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.mf-stat small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.mf-stat strong { display: block; font-size: 22px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.mf-stat .mf-sub { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.eff-section { margin-top: 18px; }
.eff-section--top { margin-top: 14px; margin-bottom: 6px; }
.eff-takehome { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 10px 0; }
.eff-takehome .th-total { font-size: 18px; font-weight: 800; color: var(--brand); }
.eff-takehome .th-split { font-size: 12px; color: var(--ink-3); }
.eff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.eff-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; }
.eff-card small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.eff-card .val { font-size: 22px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.eff-card .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.eff-card .sub.split { color: var(--ink-2); }
.eff-chart-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; margin-top: 12px; }
.eff-chart-card h4 { margin: 0 0 10px 0; font-size: 14px; color: var(--ink); }
.eff-chart-card canvas { max-height: 200px; }
.eff-client-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 4px 14px; margin-top: 12px; }
.eff-client-list h4 { margin: 14px 0 8px 0; font-size: 14px; color: var(--ink); }
.eff-client-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bg); font-size: 14px; }
.eff-client-row:last-child { border-bottom: 0; }
.eff-client-row .name { font-weight: 600; }
.eff-client-row .meta { font-size: 11px; color: var(--ink-3); }
.eff-client-row .rate { color: var(--brand); font-weight: 700; }
.eff-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 13px; }
.tip-mix { display: flex; gap: 8px; margin-top: 10px; }
.tip-mix-bar { flex: 1; height: 10px; border-radius: 6px; background: var(--hairline); overflow: hidden; display: flex; }
.tip-mix-bar .card { background: var(--brand); }
.tip-mix-bar .cash { background: var(--success); }
.tip-mix-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.tip-mix-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.tip-mix-legend .dot.card { background: var(--brand); }
.tip-mix-legend .dot.cash { background: var(--success); }
.chart-carousel { margin-top: 12px; }
.chart-carousel .cc-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chart-carousel .cc-track::-webkit-scrollbar { display: none; }
.chart-carousel .cc-slide { flex: 0 0 calc(100% - 26px); min-width: 0; scroll-snap-align: start; }
.chart-carousel.single .cc-slide { flex-basis: 100%; }
.chart-carousel .cc-title { margin: 0 0 10px 0; font-size: 14px; color: var(--ink); }
.chart-carousel .cc-empty { display: flex; align-items: center; justify-content: center; min-height: 180px; text-align: center; color: var(--ink-3); font-size: 13px; }
.cc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.cc-dots .cc-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--input-border); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.cc-dots .cc-dot.active { background: var(--brand-solid); transform: scale(1.25); }

/* ===== Vehicles & fuel ===== */
.vehicle-row { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vehicle-row .meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.vehicle-row .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vehicle-row .actions .btn-action { padding: 6px 12px; font-size: 12px; height: auto; }
.vehicle-row .name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vehicle-row .default-pill { background: var(--brand-solid); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.vehicle-row form { margin: 0; }
.gas-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; margin-top: 14px; }
.empty-vehicles { background: var(--bg); border: 1px dashed var(--input-border); border-radius: 12px; padding: 24px; text-align: center; color: var(--ink-3); }
.btn-action.danger { background: var(--bad-bg); color: var(--bad-ink); }
.btn-inline { display: inline-block; }
.form-note { margin: 4px 0 12px 0; font-size: 12px; }
.check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hint-block { display: block; margin-top: 6px; }

/* ===== End shift review ===== */
.card-split { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 4px; }
.primary-card .summary-item .label { color: rgba(255,255,255,0.75); }
.primary-card .summary-item .value { color: #fff; }
.fuel-row-card { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.settings-eyebrow.tiny { font-size: 11px; }
.fuel-amt { font-weight: 800; font-size: 18px; color: var(--ink); }
.hint-sm { font-size: 11px; }
.fuel-meta { text-align: right; font-size: 11px; max-width: 50%; }
.btn.is-danger { background: var(--bad-ink); }

/* ===== Support tickets ===== */
.support-cta { display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 12px 18px; text-decoration: none; width: auto; flex: none; }
.support-cta:hover { background: #002a99 !important; }
.support-form-card { background: var(--surface); border: 1px solid var(--input-border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.support-form-card .card-section { padding-top: 0; }
.support-form-card .field-group small { color: var(--ink-2) !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.support-form-card .input { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--ink); width: 100%; padding: 12px; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box; }
.support-form-card textarea.input { font-family: inherit; line-height: 1.5; min-height: 100px; resize: vertical; }
.support-form-card .input:focus { border-color: var(--brand); }
.support-btn-primary { background: var(--brand-solid); color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; font-weight: 700; font-size: 14px; cursor: pointer; }
.support-btn-primary:hover { background: #002a99; }
.support-btn-secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
.support-btn-secondary:hover { background: var(--bg); }
.support-list { list-style: none; padding: 0; margin: 8px 0 80px 0; display: flex; flex-direction: column; gap: 8px; }
.support-list-head { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.support-row { background: var(--surface); border: 1px solid var(--input-border); border-radius: 10px; padding: 0; }
.support-row-link { display: block; padding: 12px 14px; color: inherit; text-decoration: none; }
.support-row-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.support-row-head strong { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); }
.support-row-head .ticket-num { font-size: 13px; }
.support-row-time { color: var(--ink-disabled); font-size: 11px; }
.support-row-preview { margin: 6px 0 0 0; font-size: 12px; color: var(--ink-3); }
.ticket-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand); font-weight: 700; }
.support-status { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.support-status-open     { background: var(--bad-bg); color: var(--bad-ink); }
.support-status-pending  { background: var(--warn-bg); color: var(--warn-ink); }
.support-status-resolved { background: var(--ok-bg); color: var(--ok-ink); }
.support-detail-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.support-back { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 13px; }
.support-detail-title h2 { font-size: 18px; color: var(--ink); }
.support-detail-title .ticket-num { margin-right: 8px; }
.support-detail-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.support-thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.support-msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--surface); max-width: 92%; }
.support-msg-user { align-self: flex-end; background: var(--tint-50); border-color: var(--tint-border); }
.support-msg-admin { align-self: flex-start; background: var(--surface); }
.support-msg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.support-msg-head strong { font-size: 13px; color: var(--ink); }
.support-msg-head small { color: var(--ink-disabled); font-size: 11px; }
.support-msg-body { margin: 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.5; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.resolved-note { margin-top: 14px; padding: 14px; background: var(--ok-bg); color: var(--ok-ink); border-radius: 10px; font-size: 14px; font-weight: 600; }
.resolved-note form { display: inline; margin-left: 8px; }
.btn-link.is-ok { color: var(--ok-ink); text-decoration: underline; }

/* ===== Pro design-system primitives (was components.ProStyleBlock) ===== */
.pro-badge { display: inline-block; background: var(--brand-solid); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 3px; vertical-align: middle; line-height: 1.4; }
.pro-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; }
.pro-locked-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--input-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.pro-locked-pill .material-symbols-outlined.lock { color: #f59e0b; font-size: 18px; }
.pro-locked-pill .pro-locked-suffix { opacity: 0.7; font-size: 11px; }
.pro-upsell-inline { display: flex; align-items: center; gap: 10px; background: var(--warn-bg); border: 1px solid #f0d671; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--warn-ink); margin-bottom: 8px; }
.pro-upsell-inline .material-symbols-outlined { color: #f59e0b; font-size: 20px; }
.pro-upsell-msg { flex: 1; }
.pro-upsell-cta { background: var(--brand-solid); color: #fff; padding: 6px 12px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 12px; }
.pro-marketing { background: linear-gradient(135deg, var(--brand-solid), #0050ff); color: #fff; border-radius: 14px; padding: 18px; margin-top: 18px; }
.pro-marketing-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; font-weight: 700; margin-bottom: 8px; }
.pro-marketing-eyebrow .lock { color: #ffd166; font-size: 16px; }
.pro-marketing h3 { margin: 0 0 4px 0; font-size: 18px; }
.pro-marketing p { font-size: 13px; opacity: 0.9; margin: 0 0 12px 0; }
.pro-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.pro-preview-card { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 12px; }
.pro-preview-card small { display: block; opacity: 0.75; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.pro-preview-card .val { font-size: 18px; font-weight: 800; filter: blur(4px); user-select: none; }
.pro-preview-card .sub { opacity: 0.7; font-size: 11px; filter: blur(3px); user-select: none; }
.pro-marketing-cta { display: inline-block; background: #fff; color: var(--brand-solid); border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px; text-decoration: none; }
.pro-marketing-trial-note { font-size: 11px; opacity: 0.85; margin: 8px 0 0 0; }
.pro-marketing-features { list-style: none; padding: 0; margin: 0 0 14px 0; font-size: 13px; opacity: 0.95; }
.pro-marketing-features li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pro-marketing-features .material-symbols-outlined { font-size: 16px; opacity: 0.9; }

/* ===== Components: sheets / topbar / shell ===== */
.mb-20 { margin-bottom: 20px; }
.auth-heading.sheet-heading { text-align: left; padding: 0; margin-bottom: 20px; }
.input.textarea-sm { height: 80px; padding: 10px; }
.notif-btn { position: relative; }
.flash-banner { background: var(--tint-200); color: var(--brand); padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid var(--tint-border); }
.impersonation-banner form { margin: 0; }
.mr-half { margin-right: 0.5rem; }
:root[data-theme="dark"] .pacing-block .amount,
:root[data-theme="dark"] .pacing-block .goal-tag,
:root[data-theme="dark"] .pacing-goal-line strong,
:root[data-theme="dark"] .pacing-forecast strong,
:root[data-theme="dark"] .record-card .val,
:root[data-theme="dark"] .gauge-hero-rate { color: #93c5fd; }
:root[data-theme="dark"] .pacing-progress { background: var(--tint-50); }
:root[data-theme="dark"] .pacing-forecast { border-top-color: var(--hairline); }
:root[data-theme="dark"] .pacing-block .trend.up { background: #14361f; color: #4ade80; }
:root[data-theme="dark"] .pacing-block .trend.down { background: #3b1414; color: #fca5a5; }
:root[data-theme="dark"] .pacing-block .trend.flat {
  background: var(--tint-100);
  color: var(--ink-2);
}

/* ----- Account: GPS self-test + Recent GPS attempts ----- */
:root[data-theme="dark"] .gps-test-result {
  background: var(--tint-50);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .gps-test-line span { color: var(--ink-3); }
:root[data-theme="dark"] .gps-test-line strong { color: var(--ink); }
:root[data-theme="dark"] #gpsTestBtn,
:root[data-theme="dark"] #gpsLogRefresh {
  background: var(--surface);
  border-color: var(--input-border);
  color: var(--ink-2);
}
:root[data-theme="dark"] .gps-log-list .gps-log-row {
  background: var(--tint-50);
  border-color: var(--hairline);
}

/* ============================================================
   Dark mode — Account subpages (Encrypted Backup / Support /
   Vehicles & Fuel). These pages define their cards in page-scoped
   <style> blocks with hardcoded #fff, so dark mode never reached
   them. The overrides below re-skin those cards (the
   :root[data-theme="dark"] .x selector outweighs the page rule).
   ============================================================ */

/* ----- Account → Encrypted Backup ----- */
:root[data-theme="dark"] .backup-card {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .backup-card.muted-section { background: var(--tint-50); }
:root[data-theme="dark"] .backup-card h4,
:root[data-theme="dark"] .backup-card .muted,
:root[data-theme="dark"] .backup-form label small { color: var(--ink-3); }
:root[data-theme="dark"] .backup-form label,
:root[data-theme="dark"] .backup-contents { color: var(--ink-2); }
:root[data-theme="dark"] .backup-form input[type="password"],
:root[data-theme="dark"] .backup-form input[type="file"] {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}
:root[data-theme="dark"] .backup-btn.secondary {
  background: var(--tint-100);
  border-color: var(--tint-border);
  color: #93c5fd;
}
:root[data-theme="dark"] .backup-card code {
  background: var(--tint-100);
  color: var(--ink);
}
:root[data-theme="dark"] .back-link { color: var(--ink-3); }
:root[data-theme="dark"] .backup-flash {
  background: #14361f;
  border-color: #1f5132;
  color: #86efac;
}
:root[data-theme="dark"] .backup-error {
  background: #3b1414;
  border-color: #7f1d1d;
  color: #fca5a5;
}
:root[data-theme="dark"] .backup-verify-result {
  background: #14361f;
  border-color: #1f5132;
}
:root[data-theme="dark"] .backup-verify-head { color: #4ade80; }
:root[data-theme="dark"] .backup-verify-result pre {
  background: var(--surface);
  border-color: #1f5132;
  color: var(--ink-2);
}

/* ----- Account → Support (list / Open a Ticket / conversation) ----- */
:root[data-theme="dark"] .support-form-card,
:root[data-theme="dark"] .support-row,
:root[data-theme="dark"] .support-msg,
:root[data-theme="dark"] .support-msg-admin {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .support-form-card .field-group small { color: var(--ink-2); }
:root[data-theme="dark"] .support-form-card .input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}
:root[data-theme="dark"] .support-btn-secondary {
  background: var(--tint-100);
  border-color: var(--tint-border);
  color: var(--ink-2);
}
:root[data-theme="dark"] .support-btn-secondary:hover { background: var(--tint-200); }
:root[data-theme="dark"] .support-row-head strong,
:root[data-theme="dark"] .support-detail-title h2,
:root[data-theme="dark"] .support-msg-head strong { color: var(--ink); }
:root[data-theme="dark"] .support-row-time,
:root[data-theme="dark"] .support-row-preview,
:root[data-theme="dark"] .support-detail-meta,
:root[data-theme="dark"] .support-msg-head small { color: var(--ink-3); }
:root[data-theme="dark"] .support-msg-body { color: var(--ink-2); }
:root[data-theme="dark"] .support-msg-user {
  background: var(--tint-100);
  border-color: var(--tint-border);
}
:root[data-theme="dark"] .support-status-open { background: #3b1414; color: #fca5a5; }
:root[data-theme="dark"] .support-status-pending { background: #2c2210; color: #fbe7a8; }
:root[data-theme="dark"] .support-status-resolved { background: #14361f; color: #86efac; }

/* ----- Account → Vehicles & Fuel ----- */
:root[data-theme="dark"] .vehicle-row,
:root[data-theme="dark"] .gas-card {
  background: var(--surface);
  border-color: var(--hairline);
}
:root[data-theme="dark"] .vehicle-row .meta { color: var(--ink-3); }
:root[data-theme="dark"] .empty-vehicles {
  background: var(--tint-50);
  border-color: var(--input-border);
  color: var(--ink-3);
}