/* ============================================================
   Master Spas Delivery App — style.css
   Mobile-first, Master Spas branded

   LOCK NOTE:
   Form UI behavior styles are protected by FORM_CHANGE_GUARDRAILS.md.
   Do not alter locked UX patterns unless explicitly requested by owner.
   ============================================================ */

/* Self-hosted fonts — Plus Jakarta Sans (Velocity redesign) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  /* ── Quiet Tool palette — near-black + one blue accent ── */
  --primary:        #1A1A1A;
  --primary-light:  #333333;
  --primary-dark:   #0A0A0A;
  --accent:         #2563EB;
  --accent-light:   #3B82F6;
  --accent-subtle:  #EFF6FF;
  --gold:           #2563EB;
  --gold-text:      #1D4ED8;
  --gold-light:     #EFF6FF;
  --white:          #ffffff;

  /* ── Surfaces ── */
  --bg:             #FAFAFA;
  --card:           #ffffff;
  --surface-raised: #F5F5F5;
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;

  /* ── Text hierarchy ── */
  --text:           #111111;
  --text-sm:        #6B7280;
  --text-xs:        #9CA3AF;

  /* ── Semantic colors ── */
  --success:        #16A34A;
  --success-bg:     #F0FDF4;
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --warning:        #D97706;
  --warning-bg:     #FFFBEB;

  /* ── Status dots — muted, not screaming ── */
  --status-assigned:   #2563EB;
  --status-inprogress: #D97706;
  --status-completed:  #16A34A;
  --status-invoiced:   #7C3AED;
  --status-paid:       #059669;

  /* ── Shadows — subtle ── */
  --shadow-sm:      none;
  --shadow-hover:   0 2px 8px rgba(0,0,0,0.06);
  --shadow:         0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);

  /* ── Radii — tighter, less bubbly ── */
  --radius:         8px;
  --radius-sm:      6px;
  --radius-xs:      4px;
  --radius-pill:    999px;

  /* ── Typography ── */
  --font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ── Layout ── */
  --header-h:       56px;
  --transition:     0.15s ease;
}

/* ── Dark Theme — truly dark ── */
[data-theme="dark"] {
  --primary:        #E5E5E5;
  --primary-light:  #D4D4D4;
  --primary-dark:   #0A0A0A;
  --accent:         #3B82F6;
  --accent-light:   #60A5FA;

  --bg:             #0A0A0A;
  --card:           #141414;
  --surface-raised: #1C1C1C;
  --border:         #262626;
  --border-strong:  #404040;

  --text:           #F5F5F5;
  --text-sm:        #A3A3A3;
  --text-xs:        #737373;

  --shadow-sm:      none;
  --shadow-hover:   0 2px 8px rgba(0,0,0,0.4);
  --shadow:         0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.6);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);

  --success-bg:     #052E16;
  --danger-bg:      #450A0A;
  --warning-bg:     #451A03;

  --white:          #141414;
  --gold:           #3B82F6;
  --gold-text:      #60A5FA;
  --gold-light:     #1E1B4B;

  color-scheme: dark;
}

/* Dark mode overrides */
[data-theme="dark"] .kebab-dropdown,
[data-theme="dark"] .removal-required-check,
[data-theme="dark"] .driver-completion-item,
[data-theme="dark"] .modal-box {
  background: var(--card);
}
[data-theme="dark"] .removal-required-btn.active .removal-required-check {
  background: #064e3b;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .toast-success { border-color: #064e3b; }
[data-theme="dark"] .toast-error   { border-color: #7f1d1d; }
[data-theme="dark"] .toast-warning { border-color: #78350f; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
/* Status badge text in dark mode */
[data-theme="dark"] .badge-assigned   { color: #60a5fa; }
[data-theme="dark"] .badge-inprogress { color: #fbbf24; }
[data-theme="dark"] .badge-completed  { color: #4ade80; }
[data-theme="dark"] .badge-invoiced   { color: #a78bfa; }
[data-theme="dark"] .badge-paid       { color: #34d399; }

/* ── Theme Toggle Button ── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-xs);
  transition: color var(--transition);
}
.theme-toggle:hover { color: var(--text); }

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Mobile-first app: hide chrome scrollbars globally. On real devices
   iOS/Android auto-hide anyway; this matches that behavior on desktop
   browsers and inside the VS Code localhost preview iframe. */
html, body {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Legacy Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chromium / Safari */
}
/* Status-bar / Dynamic Island safe area.
   On a real iPhone PWA (display: standalone) iOS provides
   env(safe-area-inset-top) ≈ 54–59px so content starts below the
   status bar and Dynamic Island automatically. Inside the VS Code
   Localhost Preview iframe Chromium reports 0 (not "undefined"), so
   the second arg to env() is NEVER used as a fallback. We have to
   force a minimum via max(). Scoped to mobile viewport widths so
   desktop browsers aren't affected. Padding goes on the sticky
   headers (not body) so the internal content stays below the island
   even when the page is scrolled. */
@media (max-width: 480px) {
  :root {
    --lp-status-h: max(env(safe-area-inset-top, 0px), 54px);
  }
  /* Pages WITHOUT a dedicated sticky header: push content below the island
     via body padding. Pages WITH a header handle the inset themselves (see
     below — header is position: fixed and covers the island area). */
  body:not(:has(.app-header, .login-mobile-header, .header, .mob-header, .cm-header, .form-header, .preview-header, .cal-header, .met-header, .rev-header, .review-header, .inv-header, .ms-header)) {
    padding-top: var(--lp-status-h) !important;
  }
  /* Pages WITH a sticky header: body needs padding-top equal to the
     header's total height (island inset + header-h) so content sits below
     the fixed header. */
  body:has(.app-header, .login-mobile-header, .header, .mob-header, .cm-header, .form-header, .preview-header, .cal-header, .met-header, .rev-header, .review-header, .inv-header, .ms-header) {
    padding-top: calc(var(--header-h) + var(--lp-status-h)) !important;
  }
  /* Login page is full-bleed (gradient should extend to the top of the
     screen). Let the login card carry the inset. */
  body:has(.login-page) {
    padding-top: 0 !important;
  }
  .login-card-wrapper {
    padding-top: var(--lp-status-h) !important;
    box-sizing: border-box !important;
  }
  /* Headers are position: fixed (not sticky) so they NEVER move regardless
     of scroll behavior. They extend up to cover the Dynamic Island area;
     their content is padded down by the inset so it sits below the island. */
  .app-header,
  .login-mobile-header,
  .header,
  .mob-header,
  .form-header,
  .preview-header,
  .cal-header,
  .met-header,
  .rev-header,
  .review-header,
  .inv-header,
  .ms-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: var(--lp-status-h) !important;
    height: calc(var(--header-h) + var(--lp-status-h)) !important;
    box-sizing: border-box !important;
  }
  /* Push the map container down to clear the taller header */
  #map-container {
    top: calc(var(--header-h, 56px) + var(--lp-status-h)) !important;
  }
}

/* Global focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent, var(--primary));
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skip to content link (screen readers + keyboard) */
.skip-to-content {
  position: absolute;
  left: -999px;
  top: 4px;
  z-index: 999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.skip-to-content:focus {
  left: 8px;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent, var(--gold-text)); }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; outline: none; }

/* ── Utility ── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.font-mono { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Status Badge (dot + text) — subtle, not screaming ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.badge-assigned .badge-dot   { background: var(--status-assigned); }
.badge-assigned              { color: var(--text-sm); }
.badge-inprogress .badge-dot { background: var(--status-inprogress); }
.badge-inprogress            { color: var(--text-sm); }
.badge-completed .badge-dot  { background: var(--status-completed); }
.badge-completed             { color: var(--text-sm); }
.badge-invoiced .badge-dot   { background: var(--status-invoiced); }
.badge-invoiced              { color: var(--text-sm); }
.badge-paid .badge-dot       { background: var(--status-paid); }
.badge-paid                  { color: var(--text-sm); }

/* ── Skeleton Loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--border) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-xs);
}
.skeleton-text { height: 14px; width: 100%; }
.skeleton-heading { height: 20px; width: 60%; }
.skeleton-row { height: 48px; width: 100%; }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Toast Notifications ── */
.toast-container {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  animation: toast-slide-up 0.3s ease-out;
  border: 1px solid;
}
.toast-success { background: var(--success-bg); color: var(--success); border-color: #86efac; }
.toast-error   { background: var(--danger-bg); color: var(--danger); border-color: #fca5a5; }
.toast-warning { background: var(--warning-bg); color: var(--warning); border-color: #fcd34d; }
@keyframes toast-slide-up {
  0% { opacity: 0; transform: translateY(1rem); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── App Header — clean white bar ── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--card);
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.app-header .logo { flex: 1; display: flex; align-items: center; gap: 8px; }
.logo-mark {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--text);
}
.logo-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.logo-wordmark {
  height: 30px;
  width: auto;
  object-fit: contain;
}
.logo-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px;
}
/* Legacy logo-text support */
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text span:first-child {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px;
}
.logo-text span:last-child {
  font-size: 10px; color: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.header-action {
  background: none; border: none;
  color: var(--text-sm); font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
}
.header-action:hover { color: var(--text); background: var(--surface-raised); }

/* ── Hamburger Button (legacy, hidden) ── */
.hamburger-btn {
  display: none !important;
  background: none; border: none; cursor: pointer;
  padding: 6px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
}
.hamburger-btn svg { width: 22px; height: 22px; }
.hamburger-btn:hover { color: var(--white); }

/* ── Page Nav — REMOVED (consolidated into bottom nav) ── */
.page-tabs { display: none !important; }

/* ── Bottom Navigation Bar — minimal ── */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Top-right Menu dropdown (v1.3 admin nav) ── */
.top-menu-wrapper { position: relative; display: inline-block; }
.top-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
}
.top-menu-btn:hover { background: var(--surface-raised); }
.top-menu-btn svg { color: var(--text-sm); }

.top-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 250;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  min-width: 240px;
  padding: 6px;
  display: none;
}
.top-menu-dropdown.open { display: block; }
.top-menu-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.top-menu-dropdown a:hover { background: var(--surface-raised); }
.top-menu-dropdown a.active {
  background: var(--accent-subtle);
  color: var(--accent);
}
.top-menu-dropdown a svg { width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; }
.top-menu-group-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-xs);
  font-weight: 700;
  padding: 8px 12px 4px;
}
.top-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* Viewport-driven swap: top menu on iPad/laptop, bottom nav on phone */
@media (min-width: 768px) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0 !important; }
}
@media (max-width: 767px) {
  .top-menu-wrapper { display: none; }
}
[data-theme="dark"] .bottom-nav {
  background: var(--card);
  border-top-color: var(--border);
}
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
.bnav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  min-height: 48px;
  text-decoration: none;
  color: var(--text-xs);
  font-size: 10px;
  font-weight: 500;
  border: none;
  background: none;
  position: relative;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.bnav-tab svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}
.bnav-tab.is-active {
  color: var(--text);
  font-weight: 700;
}
/* No dot indicator — text weight change is enough */
.bnav-tab.is-active::after {
  display: none;
}
.bnav-tab:active {
  color: var(--text);
}

/* More sheet (overflow menu) */
.bnav-more-sheet {
  display: none;
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0));
  right: 0;
  left: 0;
  z-index: 199;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15,23,42,0.12);
  padding: 8px 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.bnav-more-sheet.open { display: flex; flex-direction: column; }
.bnav-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.bnav-more-item:hover { background: var(--surface-raised); color: var(--primary); }
.bnav-more-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: var(--text-sm);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
#app-build-label {
  font-size: 10px;
  color: var(--text-xs);
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
#user-badge { text-align: right; line-height: 1.3; }
#user-display-name { font-size: 13px; font-weight: 600; color: var(--text); }
#user-role-label {
  font-size: 10px;
  color: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.role-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.role-mode-tab {
  border: 0;
  background: transparent;
  color: var(--text-sm);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.role-mode-tab:hover {
  color: var(--text);
}
.role-mode-tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Dashboard Banners + Toolbar ── */
#role-preview-banner,
#offline-banner {
  display: none;
  color: var(--white);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
#role-preview-banner {
  background: #7c3aed;
  padding: 7px 16px;
  z-index: 98;
}
#offline-banner {
  background: var(--danger);
  padding: 9px 16px;
  z-index: 99;
}

/* ── Page Wrapper ── */
.page { max-width: 540px; margin: 0 auto; padding: 20px 16px 90px; }

/* ── Card ── */
.card {
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-hover); }
.card-header {
  padding: 10px 14px;
  background: var(--surface-raised);
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; flex: 1;
  color: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-icon {
  display: none;
}
.card-body { padding: 14px; }
.card + .card { margin-top: 12px; }

/* ── Form Fields ── */
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text-sm); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.field input,
.field textarea,
.field select {
  width: 100%; border: 1.5px solid var(--border);
  border-radius: var(--radius-xs); padding: 10px 12px;
  font-size: 15px; color: var(--text); background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(27,42,74,0.08);
}
.field input.error,
.field textarea.error { border-color: var(--danger); }
.field textarea { resize: vertical; min-height: 80px; }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.address-field-with-autocomplete { position: relative; }
.address-autocomplete-status {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-xs);
}
.address-autocomplete-status.visible { display: block; }
.address-autocomplete-status.error { color: #b91c1c; }
.address-autocomplete-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.address-autocomplete-dropdown.hidden { display: none !important; }
.address-autocomplete-option {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  background: var(--white);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.address-autocomplete-option:last-of-type { border-bottom: 0; }
.address-autocomplete-option:hover,
.address-autocomplete-option.active { background: var(--surface-raised); }
.address-autocomplete-option-main {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.address-autocomplete-option-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-sm);
}
.address-autocomplete-branding {
  padding: 7px 12px;
  background: #fafbff;
  border-top: 1px solid #e5e7eb;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-xs);
}

/* ── Delivery Item Rows ── */
.item-row {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px;
}
.item-row:last-child { margin-bottom: 0; }
.item-row-head {
  background: var(--primary); padding: 8px 12px;
  display: flex; align-items: center;
}
.item-row-head .item-name {
  font-size: 12px; font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.6px; flex: 1;
}
.item-row-body { padding: 10px 12px; background: var(--white); }
.item-row-body .field-row { margin-bottom: 10px; }
.item-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}
.check-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-xs); display: block; margin-bottom: 5px;
}
.toggle-group { display: flex; gap: 6px; }
.toggle-btn {
  flex: 1; border: 2px solid var(--border);
  background: var(--white); border-radius: var(--radius-xs);
  padding: 10px 4px; font-size: 13px; font-weight: 700;
  color: var(--text-xs); text-align: center;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.toggle-btn:active { transform: scale(0.97); }
.toggle-btn.yes-active { background: var(--success); border-color: var(--success); color: var(--white); }
.toggle-btn.no-active  { background: var(--danger);  border-color: var(--danger);  color: var(--white); }
.hidden-removal-toggle { display: none !important; }
.item-checks-removal { grid-template-columns: 1fr 1fr; }
.removal-required-btn {
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: #334155;
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.removal-required-btn.active {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(21,128,61,0.12);
}
.removal-required-check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  position: relative;
}
.removal-required-btn.active .removal-required-check {
  border-color: var(--success);
  background: #bbf7d0;
}
.removal-required-btn.active .removal-required-check::after {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 11px;
  font-weight: 800;
  color: var(--success);
}
.removal-required-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Payment ── */
.payment-row {
  display: flex; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.payment-row:last-child { border-bottom: none; }
.payment-label { flex: 1; font-size: 14px; font-weight: 600; }
.payment-label small { display: block; font-size: 11px; font-weight: 400; color: var(--text-sm); }
.dollar-input {
  display: flex; align-items: center; gap: 6px;
}
.dollar-input span {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-sm);
  line-height: 1;
}
.dollar-input input {
  width: 112px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  -moz-appearance: textfield;
}
.dollar-input input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,42,74,0.10);
}
.dollar-input input::placeholder {
  color: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.dollar-input input::-webkit-outer-spin-button,
.dollar-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-input-readonly {
  background: #f5f5f5;
  color: var(--primary);
  font-weight: 800;
}
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pay-method {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer;
  transition: all var(--transition); background: var(--white);
}
.pay-method input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.pay-method span { font-size: 13px; font-weight: 600; }
.pay-method.selected { border-color: var(--primary); background: #eef1f8; }

/* ── Square Card Payment ── */
.square-status { font-size: 13px; margin-top: 8px; min-height: 20px; }
.square-status.error { color: #dc2626; font-weight: 600; }
.square-status.success { color: #16a34a; font-weight: 600; }
.square-pay-success { background: #16a34a !important; border-color: #16a34a !important; pointer-events: none; }
.square-receipt-link { display: inline-block; margin-top: 8px; color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: underline; }

/* ── Stripe Payment (mirrors Square visual language) ── */
.stripe-status { font-size: 13px; margin-top: 8px; min-height: 20px; }
.stripe-status.error { color: #dc2626; font-weight: 600; }
.stripe-status.success { color: #16a34a; font-weight: 600; }
.stripe-pay-success { background: #16a34a !important; border-color: #16a34a !important; pointer-events: none; }

/* ── Signature Pad ── */
.sig-wrap {
  position: relative; border: 2px dashed var(--border-strong);
  border-radius: var(--radius); background: var(--surface-raised); overflow: hidden;
}
.sig-wrap canvas { display: block; width: 100%; cursor: crosshair; touch-action: none; }
.sig-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: 14px; color: var(--text-xs);
  font-style: italic; gap: 6px;
}
.sig-placeholder.gone { display: none; }
.sig-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.btn-clear-sig {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 5px 12px;
  font-size: 12px; color: var(--text-sm);
  transition: all var(--transition);
}
.btn-clear-sig:hover { border-color: var(--danger); color: var(--danger); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; border: none;
  border-radius: var(--radius-sm); padding: 12px 20px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }
.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { background: #333; }
[data-theme="dark"] .btn-primary { background: #F5F5F5; color: #111; }
[data-theme="dark"] .btn-primary:hover { background: #E5E5E5; }
.btn-gold { background: var(--accent); color: #fff; }
.btn-gold:hover { background: var(--accent-light); }
.btn-gold:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.btn-outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-sm); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-raised); }
.btn-ghost { background: transparent; border: none; color: var(--text-sm); }
.btn-ghost:hover { background: var(--surface-raised); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #b91c1c; }
.btn-sm  { padding: 7px 14px; font-size: 13px; }
.btn-lg  { padding: 15px 28px; font-size: 16px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; transform: none; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-xs); }
.btn-icon .btn-icon-glyph {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.btn-icon:hover .btn-icon-glyph {
  transform: scale(1.08);
  opacity: 0.92;
}
.btn-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.btn-inline-icon .btn-icon-glyph {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── Photo action button group (Camera / Library) ── */
.photo-action-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-action-btns .btn { flex: 1 1 120px; min-height: 44px; font-size: 14px; }

/* ── Kebab (three-dots) button & dropdown ── */
.btn-kebab {
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none;
  border-radius: var(--radius-xs); cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-xs);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-kebab:hover { color: var(--text); }

.kebab-dropdown {
  position: fixed; z-index: 9999;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 170px; padding: 4px 0; overflow: hidden;
}
.kebab-item {
  display: block; width: 100%; padding: 11px 16px;
  text-align: left; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.kebab-item:hover { background: var(--bg); }
.kebab-item .btn-inline-icon { margin-right: 8px; vertical-align: -2px; }
.kebab-danger { color: var(--danger) !important; }
.kebab-danger:hover { background: var(--danger-bg) !important; }

/* ── + New delivery button (above cards) ── */
.new-delivery-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 12px;
}
.new-delivery-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px dashed #D1D5DB;
  background: transparent;
  color: #9CA3AF;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
}
.new-delivery-btn:hover {
  border-color: #111; color: #111; background: #F5F5F5;
}
[data-theme="dark"] .new-delivery-btn { border-color: #404040; color: #737373; }
[data-theme="dark"] .new-delivery-btn:hover { border-color: #F5F5F5; color: #F5F5F5; background: #1C1C1C; }

.new-delivery-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.new-delivery-menu {
  position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  overflow: hidden; z-index: 50; min-width: 200px;
}
.new-delivery-menu.hidden { display: none; }
.new-delivery-option {
  display: block; width: 100%; padding: 12px 16px;
  text-align: left; border: none; background: none;
  font-size: 14px; font-weight: 500; color: #111;
  cursor: pointer; font-family: inherit;
  border-bottom: 1px solid #F5F5F5;
}
.new-delivery-option:last-child { border-bottom: none; }
.new-delivery-option:hover { background: #F5F5F5; }
[data-theme="dark"] .new-delivery-menu { background: #1C1C1C; border-color: #333; }
[data-theme="dark"] .new-delivery-option { color: #F5F5F5; border-bottom-color: #333; }
[data-theme="dark"] .new-delivery-option:hover { background: #262626; }

/* ── FAB (hidden on dashboard, kept for calendar) ── */
.fab-container {
  position: fixed; bottom: 72px; right: 20px;
  z-index: 50; display: flex; flex-direction: column; align-items: flex-end;
}
.fab {
  width: auto; height: auto;
  background: var(--text); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.fab:hover { background: #333; }
.fab:active { background: #000; }

/* Menu that appears above the button */
.fab-menu {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.fab-container.open .fab-menu {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.fab-container.open .fab span {
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.fab span {
  transition: transform 0.15s ease;
}
.fab-menu-item {
  white-space: nowrap;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background var(--transition);
}
.fab-menu-item:hover {
  background: var(--surface-raised);
}
.fab-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.fab-menu-icon .btn-icon-glyph { width: 16px; height: 16px; display: block; }

/* ── Driver Payment Gate ── */
.driver-payment-gate {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(circle at top, rgba(200,168,75,0.18), transparent 34%),
    linear-gradient(180deg, var(--surface-raised) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.driver-payment-gate.hidden { display: none; }
.payment-gate-inner {
  text-align: center; max-width: 430px; width: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
  padding: 24px 20px 20px;
}
.payment-gate-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(27,42,74,0.08);
  border: 1px solid rgba(27,42,74,0.12);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.payment-gate-icon { margin-bottom: 8px; color: var(--primary-dark); }
.payment-gate-title {
  font-size: 1.25rem; font-weight: 700; color: var(--primary-dark);
  margin: 0 0 8px;
}
.payment-gate-subtitle {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--text-sm);
}
.payment-gate-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.payment-gate-summary-item {
  text-align: left;
  padding: 12px 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--bg) 100%);
  border: 1px solid #dbe4f0;
}
.payment-gate-summary-item small {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: var(--text-xs);
}
.payment-gate-summary-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--primary-dark);
}
.payment-gate-address {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; font-size: 1.05rem; line-height: 1.5;
  color: var(--primary-dark); margin-bottom: 20px;
}
.payment-gate-amount-wrap {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 24px;
}
.payment-gate-amount-label { font-weight: 600; color: var(--text-muted); }
.payment-gate-amount { font-size: 1.5rem; font-weight: 700; color: var(--primary-dark); }
.payment-gate-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.payment-gate-action {
  flex: 1;
  min-height: 44px;
}
.payment-gate-btn {
  width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 700;
  border-radius: 12px;
}
.payment-gate-hint {
  margin-top: 12px; font-size: 0.8rem; color: var(--text-muted);
}
/* Hide tab bar and form content while gate is active */
body.driver-gate-active #driver-tab-bar,
body.driver-gate-active .page > form > .card,
body.driver-gate-active .submit-bar,
body.driver-gate-active #driver-job-type-badge { display: none !important; }

/* ── Submit Bar ── */
.submit-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 12px 16px; z-index: 100;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  overflow: visible;
}

/* ── Dashboard Stats ── */
.stats-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.stat-card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 10px; text-align: center;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1; }
.stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-xs); margin-top: 3px; }

/* ── Delivery List ── */
.delivery-list { display: flex; flex-direction: column; gap: 1px; }
.delivery-item-swipe-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.delivery-swipe-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  border: none;
  background: var(--danger);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  padding: 10px 8px;
  visibility: hidden;
}
.delivery-swipe-delete .btn-icon-glyph {
  width: 16px;
  height: 16px;
}
.delivery-item {
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: background var(--transition);
  position: relative;
}
.delivery-item:hover {
  background: var(--surface-raised);
}
.delivery-item--swipeable {
  will-change: transform;
  touch-action: pan-y;
  transition: transform 0.22s ease, box-shadow var(--transition);
}
.delivery-item--swipeable.is-swiping {
  transition: none;
}
.delivery-item-swipe-wrap:has(.is-swiping, .is-swipe-open) > .delivery-swipe-delete {
  visibility: visible;
}
/* Delete icon hidden — use kebab menu or swipe instead */
.delivery-delete-icon {
  display: none !important;
}
.delivery-delete-icon .btn-icon-glyph {
  width: 16px;
  height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .delivery-item.has-kebab.has-desktop-delete .di-head { padding-right: 44px; }
  .delivery-delete-icon {
    display: none;
  }
  .delivery-swipe-delete {
    display: none;
  }
}

/* ── Kebab pinned to top-right corner of card (direct child only) ── */
.delivery-item > .btn-kebab {
  position: absolute; top: 8px; right: 10px; z-index: 2;
}
.delivery-item.has-kebab .di-head { padding-right: 54px; }

/* ── Card structure — no stripe, clean layout ── */
.di-stripe {
  display: none;
}

.di-body { margin-left: 0; }

/* ── Completed cards — muted so open jobs stand out ── */
.di-completed {
  border-color: var(--border);
}
.di-completed .di-body { opacity: 0.72; }
.di-completed:hover .di-body { opacity: 0.88; }
.di-completed .di-foot { opacity: 0.72; }
.di-completed:hover .di-foot { opacity: 0.88; }
.di-completed .di-stripe { opacity: 0.5; }

.di-head {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px 4px;
  gap: 8px;
}
.di-name-block { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.di-customer {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.di-status-inline {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.di-location {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sm);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 0;
}
.di-datetime {
  flex-shrink: 0;
  text-align: right;
}
.di-date {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.di-time {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-xs);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
/* ── Meta line (status + service + driver) — single inline row ── */
.di-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 16px 12px;
  font-size: 11px;
  color: var(--text-xs);
}
.di-tags .di-meta-sep {
  color: var(--border-strong);
}
.di-service-chip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
  background: none;
  color: var(--text-sm);
}
.di-svc--delivery   { background: none; color: var(--text-sm); }
.di-svc--cleaning   { background: none; color: var(--text-sm); }
.di-svc--relocation { background: none; color: var(--text-sm); }
.di-svc--removal    { background: none; color: var(--text-sm); }
.di-model-tag {
  font-size: 11px;
  color: var(--text-xs);
  font-weight: 500;
}
.di-serial-tag {
  font-size: 11px;
  color: var(--text-xs);
  font-family: var(--font-mono);
}
.di-foot {
  display: none;
}
.di-foot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.di-foot-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.di-driver-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-xs);
}
.di-billing-tag {
  display: none;
}
.di-incomplete-reason {
  padding: 4px 16px 10px;
  font-size: 12px;
  color: var(--danger);
}

/* ── Animations — minimal ── */
@keyframes cardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.di-body {
  animation: none;
}

/* ── Touch feedback on tappable cards ── */
.delivery-item.card-tappable:active {
  background: var(--surface-raised);
}

/* ── Skeleton loader (matches Signal Card shape) ── */
.di-skeleton {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  animation: cardIn 0.2s ease both;
  animation-delay: var(--card-delay, 0ms);
}
.di-skel-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--border);
}
.di-skel-body { margin-left: 4px; }
.di-skel-head {
  display: flex; align-items: flex-start; padding: 12px 14px 8px; gap: 10px;
}
.di-skel-block { flex: 1; }
.di-skel-tags { display: flex; gap: 8px; padding: 0 14px 10px; }
.di-skel-foot {
  display: flex; gap: 8px; padding: 8px 14px;
  border-top: 1px solid var(--border); background: var(--surface-raised);
}
.di-skel-bar {
  background: linear-gradient(90deg, var(--surface-raised) 0%, #e4e0d8 50%, var(--surface-raised) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── Kept for legacy badge functions + driver CTA ── */
.driver-card-primary {
  padding: 0 14px 12px;
}
.driver-open-job-btn {
  width: 100%;
  min-height: 42px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(27,42,74,0.12);
}
.driver-open-job-btn .btn-inline-icon {
  width: 15px;
  height: 15px;
}
.driver-open-job-btn .btn-inline-icon .btn-icon-glyph {
  width: 15px;
  height: 15px;
}
.delivery-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.delivery-status-icon .btn-icon-glyph {
  width: 14px;
  height: 14px;
}
.delivery-status-icon--assigned {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
.delivery-status-icon--waiver {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.lane-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1px solid;
  text-transform: uppercase;
}
.lane-badge.master-spas {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}
.lane-badge.movemyspa {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.badge-delivered {
  font-size: 11px; font-weight: 600; padding: 0;
  border-radius: 0; background: none; color: var(--text-sm);
}
/* .delivery-serial kept for any legacy usage */
.delivery-serial { font-size: 12px; color: var(--text-xs); margin-left: auto; font-family: monospace; }

/* ── Search Bar — clean, no shadow ── */
.search-bar {
  display: flex; align-items: center;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px;
  margin-bottom: 10px; gap: 8px;
}
.search-bar input {
  flex: 1; border: none; padding: 10px 0;
  background: transparent; font-size: 14px; color: var(--text);
}
.search-bar input::placeholder { color: var(--text-xs); }
.search-icon { font-size: 14px; color: var(--text-xs); }
#filter-bar { margin-bottom: 8px; }
.filter-panel {
  padding: 10px 0 2px;
}
.filter-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#status-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.lane-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 6px;
  overflow-x: auto;
}
.lane-chip {
  border: none;
  background: transparent;
  color: var(--text-xs);
  border-radius: 0;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
}
.lane-chip:hover {
  color: var(--text);
}
.lane-chip.is-active {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--text);
}
#lane-chip-row.hidden { display: none !important; }
.status-chip {
  border: none;
  background: transparent;
  color: var(--text-xs);
  border-radius: 0;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
}
.status-chip:hover {
  color: var(--text);
}
.status-chip.is-active {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--text);
}
#status-chip-row.hidden { display: none !important; }

/* ── Open / Completed Toggle ── */
.job-view-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
  position: relative;
}
.job-view-btn {
  padding: 7px 22px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card);
  color: var(--text-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
}
.job-view-btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}
.job-view-btn:nth-child(2) {
  border-radius: 0;
  border-right: none;
}
.job-view-btn:nth-child(3) {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.toggle-icon-group {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-icon-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-sm);
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  font-family: inherit;
}
.filter-icon-btn:hover, .filter-icon-btn.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.job-view-btn.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
[data-theme="dark"] .job-view-btn.is-active {
  color: #111;
}
.job-view-btn:hover:not(.is-active) {
  background: var(--surface-raised);
}
#job-view-toggle.hidden { display: none !important; }
#print-route-btn,
#filter-clear-btn,
#open-master-spas-billing-btn { white-space: nowrap; }
.filter-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition);
}
.filter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(27,42,74,0.08);
}
.filter-input-driver { min-width: 140px; background: var(--white); }
.filter-input-date { min-width: 120px; }
#bulk-action-bar {
  display: none;
  background: var(--surface-raised);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#bulk-count-label { font-size: 13px; font-weight: 700; }
.bulk-action-buttons { display: flex; gap: 8px; }
#bulk-clear-btn {
  background: var(--card);
  color: var(--text-sm);
  border: 1px solid var(--border);
}
#bulk-reassign-btn, #bulk-status-btn, #bulk-export-btn {
  background: var(--card);
  color: var(--text-sm);
  border: 1px solid var(--border);
}
#bulk-delete-btn {
  background: var(--danger);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn-danger-ghost { opacity: 0.85; }
.btn-danger-ghost:hover { opacity: 1; }

/* ── Password wrapper ── */
.pw-wrapper { position: relative; }
.pw-wrapper input {
  padding-right: 42px;
  width: 100%;
}
.toggle-pw-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sm);
  padding: 5px 9px;
  line-height: 1;
  min-width: 48px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.toggle-pw-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff; }
.toggle-pw-btn:focus-visible { outline: 2px solid rgba(27,42,74,0.2); outline-offset: 1px; }

/* ── Build label ── */
.build-label {
  margin-top: 6px; font-size: 10px; color: #6b7280;
  letter-spacing: .35px; text-transform: uppercase; text-align: center;
}

/* ── Login Page — clean, minimal ── */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.login-page::before { display: none; }
.login-page::after { display: none; }
.login-card-wrapper {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 2;
}
.login-mobile-header { display: none; }
.login-card {
  width: 100%; max-width: 380px;
  padding: 40px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo-mark {
  width: 48px; height: 48px;
  background: transparent;
  border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.login-logo-mark img {
  width: 48px; height: 48px; object-fit: contain;
}
.login-logo h1 {
  font-size: 20px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px;
}
.login-logo p {
  font-size: 14px; color: var(--text-sm); margin-top: 4px;
}
.login-lead {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-xs);
  line-height: 1.5;
}
.login-page .field label {
  color: var(--text-sm);
}
.login-page .field input {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.login-page .field input::placeholder { color: var(--text-xs); }
.login-page .field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.login-page .toggle-pw-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-sm);
}
.login-page .toggle-pw-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.login-page .btn-primary {
  background: #111;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
}
.login-page .btn-primary:hover {
  background: #333;
}
.login-page .btn-primary:active {
  background: #000;
}
[data-theme="dark"] .login-page .btn-primary {
  background: #F5F5F5;
  color: #111;
}
[data-theme="dark"] .login-page .btn-primary:hover {
  background: #E5E5E5;
}
.login-help {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--text-xs);
}
.login-footer {
  text-align: center; margin-top: 24px; font-size: 11px;
  color: var(--text-xs);
  letter-spacing: 0.2px;
}
.login-page .alert-danger {
  background: var(--danger-bg);
  border-color: #fca5a5;
  color: var(--danger);
}
.login-page .build-label { color: var(--text-xs); }

@media (min-width: 768px) {
  .login-card { max-width: 420px; padding: 44px 36px; }
}
@media (min-width: 1024px) {
  .login-card { padding: 48px 40px; max-width: 440px; }
}

/* ── Alert ── */
.alert {
  padding: 10px 14px; border-radius: var(--radius-xs);
  font-size: 13px; font-weight: 500; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid #fca5a5; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #86efac; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #fcd34d; }

/* ── Form Error Card (actionable error recovery) ── */
.form-error-card {
  background: var(--danger-bg); border: 1px solid #fca5a5;
  border-radius: var(--radius); padding: 16px;
}
.form-error-card strong { display: block; color: var(--danger); font-size: 15px; margin-bottom: 6px; }
.form-error-card p { color: var(--text-sm); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.form-error-actions { display: flex; gap: 8px; }

/* ── Toast ── */
.toast-container {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; min-width: 260px; max-width: 340px;
}
.toast {
  background: var(--primary-dark); color: var(--white);
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); animation: toast-in 0.25s ease forwards;
  display: flex; align-items: center; gap: 8px;
}
.toast.success { background: #15803d; }
.toast.error   { background: var(--danger); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Spinner ── */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: var(--white); border-radius: 50%;
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Overlay ── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 500; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 14px;
}
.overlay-card {
  background: var(--white); border-radius: var(--radius);
  padding: 30px 36px; text-align: center; max-width: 280px; box-shadow: var(--shadow-lg);
}
.overlay-card .spinner {
  border-color: rgba(27,42,74,0.2); border-top-color: var(--primary);
  width: 38px; height: 38px; border-width: 3.5px;
  margin: 0 auto 14px;
}
.overlay-card p  { font-size: 15px; font-weight: 600; color: var(--text); }
.overlay-card small { font-size: 12px; color: var(--text-sm); margin-top: 4px; display: block; }

/* ── Section Divider ── */
.section-divider {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 12px;
}
.section-divider span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-xs); white-space: nowrap;
}
.section-divider::before,
.section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Empty State — text only, no emoji ── */
.empty-state { text-align: center; padding: 60px 24px; color: var(--text-sm); }
.empty-state .empty-icon { display: none; }
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-state p { font-size: 13px; margin-top: 4px; color: var(--text-xs); }

/* ── PWA safe areas ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .submit-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .fab-container { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── Responsive: AI review grid (admin page) ── */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* ── Small form utilities ── */
.req-asterisk { color: var(--danger); }
.mt-8 { margin-top: 8px; }
.text-uppercase { text-transform: uppercase; }
.delivery-items-badge {
  background: rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 10px;
}
.delivery-items-helper {
  font-size: 12px;
  color: var(--text-sm);
  margin-bottom: 12px;
  line-height: 1.5;
}
.driver-delivery-board {
  border: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.driver-completion-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dbe4f0;
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--bg) 100%);
  margin-bottom: 12px;
}
.driver-completion-summary-copy-wrap {
  min-width: 0;
}
.driver-completion-summary-copy-wrap strong {
  display: block;
  font-size: 14px;
  color: var(--primary-dark);
}
.driver-completion-summary-copy-wrap p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-sm);
}
.driver-completion-summary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  white-space: nowrap;
}
.driver-completion-summary-badge.is-ready {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}
.driver-completion-checklist {
  display: grid;
  gap: 8px;
}
.driver-completion-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.driver-completion-item:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}
.driver-completion-item.is-done {
  border-color: #86efac;
  background: #f0fdf4;
}
.driver-completion-item-indicator {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fff7ed;
  color: #b45309;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.driver-completion-item.is-done .driver-completion-item-indicator {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}
.driver-completion-item-copy {
  min-width: 0;
}
.driver-completion-item-copy strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.driver-completion-item-copy small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-sm);
}
.driver-completion-item-action {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.driver-delivery-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.driver-delivery-board-head strong {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #1e3a8a;
}
.delivery-board-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: var(--surface-raised);
  color: #475569;
}
.driver-delivery-board-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.driver-delivery-board-metrics div {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  padding: 7px 6px;
}
.driver-delivery-board-metrics span {
  display: block;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
}
.driver-delivery-board-metrics small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-xs);
}
.driver-delivery-board-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  background: #dbeafe;
}
#delivery-board-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  transition: width 0.25s ease;
}
.delivery-metric-pop {
  animation: delivery-metric-pop 0.45s ease;
}
@keyframes delivery-metric-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.22); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}
.delivery-status-pop {
  animation: delivery-status-pop 0.4s ease;
}
@keyframes delivery-status-pop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(0); }
}
.delivery-board-ready {
  animation: delivery-board-ready 0.75s ease;
}
@keyframes delivery-board-ready {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.22); }
  100% { box-shadow: 0 0 0 14px rgba(22, 163, 74, 0); }
}
.btn-complete-pulse {
  animation: complete-pulse 0.75s ease;
}
@keyframes complete-pulse {
  0% { transform: scale(1); }
  28% { transform: scale(1.06); box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.40); }
  100% { transform: scale(1); box-shadow: 0 0 0 26px rgba(21, 128, 61, 0); }
}
#driver-complete-burst {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) scale(0.2);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  box-shadow:
    0 -40px 0 0 #16a34a,
    30px -24px 0 0 #22c55e,
    40px 0 0 0 #f59e0b,
    26px 28px 0 0 #3b82f6,
    0 40px 0 0 #2563eb,
    -26px 28px 0 0 #14b8a6,
    -40px 0 0 0 #f97316,
    -30px -24px 0 0 #84cc16;
}
#driver-complete-burst.is-active {
  animation: complete-burst 0.72s ease-out forwards;
}
@keyframes complete-burst {
  0% { opacity: 0.2; transform: translateX(-50%) scale(0.25); }
  30% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.35); }
}
.overlay-card.overlay-complete-celebrate {
  animation: overlay-celebrate 0.5s ease;
}
@keyframes overlay-celebrate {
  0% { transform: scale(0.98); }
  55% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-complete-pulse,
  #driver-complete-burst.is-active,
  .overlay-card.overlay-complete-celebrate,
  .delivery-metric-pop,
  .delivery-status-pop,
  .delivery-board-ready {
    animation: none !important;
  }
  #delivery-board-progress-bar {
    transition: none;
  }
}
.driver-call-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.other-desc-input {
  margin-top: 6px;
}
.hidden-field-inline {
  display: none;
}
.hidden-option {
  display: none;
}

/* ── Master Spas Billing page ── */
.billing-grid {
  display: grid;
  gap: 12px;
}
.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.billing-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.billing-rate-grid .field {
  margin-bottom: 0;
}
.billing-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.billing-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.billing-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px;
  text-align: left;
}
.billing-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  font-size: 13px;
}
.billing-table tr:last-child td {
  border-bottom: none;
}
.billing-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--surface-raised);
  color: #475569;
}
.billing-pill.sent {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.billing-pill.paid {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.billing-pill.void {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.billing-pill.draft {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.billing-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.billing-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 8px;
}
.billing-stat strong {
  display: block;
  font-size: 18px;
  color: var(--primary);
  line-height: 1.1;
}
.billing-stat span {
  font-size: 11px;
  color: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

/* ── Responsive: Tablet (768px–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Single column, centered — no grid on cards */
  .page { max-width: 640px; padding-left: 24px; padding-right: 24px; }
}

/* ── Responsive: Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
  /* Single column, centered — clean and readable */
  .page { max-width: 640px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  /* Keep bottom nav on desktop */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

/* ── View Toggle (Cards / Table) ── */
.view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: auto;
}
.view-toggle-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card);
  color: var(--text-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.view-toggle-btn.is-active {
  background: var(--text);
  color: #fff;
}
[data-theme="dark"] .view-toggle-btn.is-active {
  background: var(--text);
  color: #111;
}
.view-toggle-btn:hover:not(.is-active) {
  background: var(--surface-raised);
}
/* Hide toggle on mobile — always cards */
@media (max-width: 767px) {
  .view-toggle { display: none; }
}

/* ── Table View ── */
.delivery-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.delivery-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-xs);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.delivery-table th:hover { color: var(--text); }
.delivery-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.4; }
.delivery-table th.is-sorted .sort-arrow { opacity: 1; color: var(--gold); }
.delivery-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-table tr {
  cursor: pointer;
  transition: background var(--transition);
}
.delivery-table tr:hover { background: var(--surface-raised); }
.delivery-table tr.is-focused { outline: 2px solid var(--gold); outline-offset: -2px; }
.delivery-table .td-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.delivery-table .td-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.delivery-table .td-balance { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }
.delivery-table .td-checkbox { width: 32px; text-align: center; }
.delivery-table .td-checkbox input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }

/* ── Keyboard Focus Ring (cards + table rows) ── */
.delivery-item.is-focused {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── Keyboard Help Overlay ── */
.keyboard-help-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;
}
.keyboard-help-box {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--card); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-lg); z-index: 1000; min-width: 280px; max-width: 360px;
}
.keyboard-help-box td { padding: 4px 12px 4px 0; }
.keyboard-help-box kbd {
  display: inline-block; padding: 2px 8px; font-size: 12px; font-family: var(--font-mono);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); min-width: 24px; text-align: center;
}

/* ── Responsive: Mobile (≤ 480px) ── */
@media (max-width: 480px) {

  /* ── Hide filter bar on mobile — lane chips + status chips + search handle it ── */
  #filter-bar { display: none !important; }

  /* ── Header — compact, one row ── */
  .app-header { padding: 0 14px; gap: 8px; height: 52px; }
  #app-build-label { display: none; }
  #user-display-name { display: none; }
  #user-role-label   { display: none; }
  .logo-mark { width: 24px; height: 24px; }
  .logo-mark img { width: 24px; height: 24px; }
  .logo-text span:first-child { font-size: 13px; }
  .logo-text span:last-child { display: none; }
  .header-action { padding: 6px 8px; font-size: 12px; min-height: 32px; }
  #logout-btn { font-size: 12px; padding: 6px 8px; }
  .role-mode-tabs { gap: 2px; padding: 2px; }
  .role-mode-tab { font-size: 10px; padding: 4px 8px; }

  /* ── Page tabs — mobile dropdown ── */
  .page-tab { padding: 10px 16px; font-size: 13px; }

  /* ── Page padding ── */
  .page { padding: 10px 10px 100px; }

  /* ── Lane + status chips — tab-style horizontal scroll ── */
  #lane-chip-row {
    gap: 12px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 0;
    scrollbar-width: none; margin-bottom: 4px;
  }
  #lane-chip-row::-webkit-scrollbar { display: none; }
  .lane-chip { font-size: 13px; padding: 6px 0; white-space: nowrap; flex-shrink: 0; min-height: 0; }

  #status-chip-row {
    gap: 12px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 0;
    scrollbar-width: none; margin-bottom: 8px;
  }
  #status-chip-row::-webkit-scrollbar { display: none; }
  .status-chip { font-size: 13px; padding: 6px 0; white-space: nowrap; flex-shrink: 0; min-height: 0; }

  /* ── Search bar — taller touch target ── */
  .search-bar { margin-bottom: 10px; border-radius: 10px; }
  .search-bar input { padding: 12px 0; font-size: 16px; min-height: 44px; }

  /* ── Filter bar — cleaner layout ── */
  .filter-controls { gap: 6px; }
  .filter-input-driver { min-width: unset; width: 100%; min-height: 40px; font-size: 14px; }
  .filter-input-date   { min-width: unset; flex: 1 1 120px; min-height: 40px; font-size: 14px; }
  #filter-bar { margin-bottom: 6px; }

  /* ── Delivery cards — mobile overrides ── */
  .delivery-list { gap: 0; }
  .delivery-item { border-radius: 0; }
  .di-head { padding: 12px 14px 2px; gap: 8px; }
  .di-customer { font-size: 15px; }
  .di-location { font-size: 13px; }
  .di-tags { padding: 2px 14px 12px; }

  /* ── Delivery card actions — 44px touch targets ── */
  .btn-icon { width: 44px; height: 44px; font-size: 16px; }

  /* ── Cards — form pages ── */
  .card-body { padding: 16px; }
  .card-header { padding: 12px 16px; }
  .card-header h3 { font-size: 13px; }

  /* Form fields — prevent iOS auto-zoom */
  .field label { font-size: 13px; }
  .field input,
  .field textarea,
  .field select { font-size: 16px; padding: 10px 12px; min-height: 44px; }
  .field textarea { min-height: 88px; }
  .address-autocomplete-dropdown { position: static; margin-top: 8px; }

  /* Stats */
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 9px; }

  /* Form grids — single column */
  .field-row   { grid-template-columns: 1fr; gap: 0; }
  .field-row-3 { grid-template-columns: 1fr; gap: 0; }

  /* Payment methods */
  .pay-methods { grid-template-columns: 1fr; }

  .payment-gate-summary { grid-template-columns: 1fr; }
  .payment-gate-actions { display: grid; grid-template-columns: 1fr; }
  .driver-completion-summary { display: grid; grid-template-columns: 1fr; }
  .driver-completion-summary-badge { justify-self: start; }
  .driver-completion-item { grid-template-columns: auto minmax(0, 1fr); }
  .driver-completion-item-action { grid-column: 2; }

  /* Photo buttons */
  .photo-action-btns { flex-direction: column; }
  .photo-action-btns .btn { flex: unset; width: 100%; min-height: 48px; font-size: 16px; }

  /* Item checks */
  .item-checks { grid-template-columns: 1fr; }

  /* Review/billing grids */
  .review-grid { grid-template-columns: 1fr; }
  .billing-rate-grid { grid-template-columns: 1fr; }
  .billing-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Toast — full width */
  .toast-container { min-width: unset; width: calc(100% - 32px); max-width: 100%; }

  /* ── FAB — larger on mobile ── */
  .fab { width: 56px; height: 56px; font-size: 28px; }

  /* ── Kebab dropdown — wider on mobile ── */
  .kebab-dropdown { min-width: 200px; }
  .kebab-item { padding: 12px 16px; font-size: 14px; min-height: 44px; }

  /* ── Date group headings — more space ── */
  .delivery-list > div[style*="font-size:10px"] { padding-top: 12px !important; }
}

/* ── Responsive: Very small phones (≤ 360px) ── */
@media (max-width: 360px) {
  .logo-text span:first-child { font-size: 11px; }
  .logo-text span:last-child  { display: none; }
  .stat-value { font-size: 19px; }
  .stats-row  { gap: 6px; }
  .stat-card  { padding: 10px 6px; }
}

/* ── Driver Tab Bar (two-tab view) ── */
.driver-tab-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  display: flex;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  margin: 0 -16px 12px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.driver-tab {
  flex: 1;
  padding: 14px 8px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-sm);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  text-align: center;
}
.driver-tab:hover { color: var(--primary); }
.driver-tab:disabled { opacity: 0.4; cursor: not-allowed; color: var(--text-xs); }
.driver-tab:disabled:hover { color: var(--text-xs); }
.driver-tab.active {
  color: var(--primary);
  border-bottom-color: var(--gold);
}
.driver-tab-hidden { display: none !important; }
body.driver-tab-overview .submit-bar { display: none !important; }
/* ── Office Step Wizard ── */
.office-step-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  display: flex;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  margin: 0 -16px 12px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.office-step {
  flex: 1;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.office-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-sm);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.office-step-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-xs);
  transition: color var(--transition);
}
.office-step:hover .office-step-label { color: var(--primary); }
.office-step:hover .office-step-num { background: #c8d0dc; }
.office-step.active .office-step-num {
  background: var(--primary);
  color: var(--white);
}
.office-step.active .office-step-label {
  color: var(--primary);
}
.office-step.active {
  border-bottom-color: var(--gold);
}
.office-step.visited .office-step-num {
  background: var(--gold);
  color: var(--primary);
}
.office-step-hidden { display: none !important; }

/* Office step navigation */
.office-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 0;
}
.office-step-nav .btn {
  min-width: 100px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.office-step-nav .btn-primary {
  background: var(--gold);
  color: var(--primary);
  border: none;
}
.office-step-nav .btn-primary:hover {
  background: #b8982f;
}
.office-step-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sm);
}
/* Hide main submit bar when not on last step */
body.office-step-not-last .submit-bar { display: none !important; }

.driver-job-type-badge {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--primary);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-align: center;
  margin-bottom: 4px;
}

/* ── Relocation Liability Waiver ── */
.waiver-text-scroll {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  background: #fafbfc;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.waiver-text-scroll h4 { font-size: 13px; margin: 14px 0 4px; color: var(--primary); }
.waiver-text-scroll h4:first-child { margin-top: 0; }
.waiver-text-scroll p { margin: 0 0 8px; }
.waiver-scroll-hint {
  text-align: center;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  padding: 4px 0;
  animation: pulse 1.5s ease-in-out infinite;
}
.waiver-scroll-hint.hidden { display: none; }
.waiver-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.waiver-checkbox-disabled { opacity: 0.5; pointer-events: none; }
.waiver-checkbox-readonly { pointer-events: none; }
.sig-wrap.sig-disabled { opacity: 0.4; pointer-events: none; }
.waiver-accepted-badge {
  display: inline-block;
  background: var(--success-bg);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #86efac;
}

/* ── Modal overlay (shared) ──────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  width: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   Master Spas Lane — Card-Free Flat Sections
   Strips white boxed cards, uses section labels + dividers
   to match the Master Spas Delivery Approval Form style.
═══════════════════════════════════════════════════════ */
body.lane-master-spas .card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body.lane-master-spas .card-header {
  background: transparent;
  color: var(--text-sm);
  padding: 0 0 8px 0;
  border-bottom: 0.5px solid rgba(36,65,93,0.22);
  margin-bottom: 12px;
}
body.lane-master-spas .card-header h3 {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sm);
  font-weight: 600;
}
body.lane-master-spas .card-body {
  padding: 0;
}
body.lane-master-spas .card + .card,
body.lane-master-spas .card.mt-12 {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid rgba(36,65,93,0.12);
}
/* Hide irrelevant sections for Master Spas */
body.lane-master-spas #invoice-line-items-wrap { display: none; }
body.lane-master-spas #job-type-card { display: none !important; }
body.lane-master-spas #service-details-card { display: none !important; }

/* ── Master Spas Header ── */
.ms-header {
  background: #ffffff;
  padding: 1.5rem 1rem 0;
  max-width: 820px;
  margin: 0 auto;
}
.ms-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid rgba(36,65,93,0.22);
}
.ms-brand-block { display: flex; flex-direction: column; gap: 3px; }
.ms-logo { width: 160px; height: auto; display: block; margin-bottom: 10px; }
.ms-brand-addr { font-size: 12px; color: #5f7288; line-height: 1.6; }
.ms-contact-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-contact-block p { font-size: 12px; color: #5f7288; margin: 0; }
.ms-contact-block p + p { margin-top: 6px; }
.ms-contact-block strong { color: #24415D; font-weight: 500; font-size: 13px; }
.ms-form-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5f7288;
  font-weight: 600;
  text-align: center;
  padding: 1.25rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms-form-title::before,
.ms-form-title::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(36,65,93,0.22);
}
@media (max-width: 600px) {
  .ms-header-inner { flex-direction: column; gap: 1rem; }
  .ms-contact-block { text-align: left; }
}

/* ── Skip-to-content link (a11y.js) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
}

/* ── Connection status indicator (connection-status.js) ── */
.connection-status {
  position: fixed;
  bottom: 72px; /* above bottom-nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: opacity 0.3s, transform 0.3s;
}
.connection-status--offline {
  background: var(--danger, #e74c3c);
  color: #fff;
}
.connection-status--syncing {
  background: var(--gold);
  color: var(--primary);
}
.connection-status--synced {
  background: var(--success, #22c55e);
  color: #fff;
}
@media (min-width: 1024px) {
  .connection-status { bottom: 24px; }
}

/* ── Focus visible (a11y) ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── iOS safe-area padding (Dynamic Island / notch / home indicator).
   Uses env() which resolves to concrete px on iPhones (requires
   viewport-fit=cover in the HTML meta) and on Localhost Preview's
   iPhone frames (which rewrite env() to the correct px per device).
   Hides the page scrollbar to match native app chrome. ── */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}