/* ═══════════════════════════════════════════════════════════════
   GoGreen v2 Design System
   Apple-like Clean & Minimalist
   Responsive: iPhone (375px+) | iPad (768px+) | Desktop (1024px+)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ─── */
:root {
  /* ── GoGreen Brand Identity ── */
  --brand-hero: #0b1f10;        /* Forest Night — login bg, favicon */
  --brand-accent: #22c55e;      /* Accent Green — active states */
  --brand-accent-dark: #16a34a; /* Accent Dark — primary buttons */
  --brand-surface: #f5f7f5;     /* Off-white surfaces */
  --brand-text: #0f1a12;        /* Dark text */
  --brand-text-muted: #5a6b5e;  /* Muted text */
  --brand-border: #e5ebe6;      /* Subtle green-tinted border */


  /* Brand */
  --primary: #16A34A;
  --primary-light: #DCFCE7;
  --primary-dark: #15803D;
  --primary-hover: #15903F;

  /* Surfaces */
  --bg: #F8FAFB;
  --card: #FFFFFF;
  --card-hover: #FAFBFC;

  /* Text */
  --text: #1A1A2E;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --divider: #F0F0F0;

  /* Status Colors */
  --success: #16A34A;
  --success-bg: #DCFCE7;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Spacing Scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 300ms;

  /* Z-Index Scale */
  --z-base: 0;
  --z-card: 10;
  --z-sticky: 20;
  --z-nav: 50;
  --z-modal-backdrop: 90;
  --z-modal: 100;
  --z-toast: 200;

  /* Layout (mobile defaults) */
  --content-max: 100%;
  --sidebar-width: 0px;
  --nav-height: 64px;
  --topbar-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ─── 2. RESET & BASE ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* Match the theme bg so any overscroll reveal is themed (light or dark),
     never the native iOS shell's background (the white/green band bug). */
  background: var(--bg);
  /* Kill the rubber-band bounce that exposed that band in the native shell. */
  overscroll-behavior-y: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

img, svg { display: block; max-width: 100%; }

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }


/* ─── 3. TYPOGRAPHY ─── */
.text-hero    { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.text-title   { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.text-heading { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; }
.text-subhead { font-size: 15px; font-weight: 600; line-height: 1.4; }
.text-body    { font-size: 14px; font-weight: 400; line-height: 1.5; }
.text-caption  { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-muted); }
.text-badge   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-primary   { color: var(--primary); }
.text-danger    { color: var(--danger); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ─── 4. LAYOUT SYSTEM ─── */

/* App Shell */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-content {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  transition: margin-left var(--duration) var(--ease);
}

/* Screen containers */
.screen {
  display: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.screen.active {
  display: flex;
  animation: screenFadeIn 0.25s var(--ease);
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Content wrapper */
.content-wrapper {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* Grid system */
.grid {
  display: grid;
  gap: var(--sp-3);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flex utilities */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }


/* ─── 5. TOP BAR ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-5) var(--sp-4);
}

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

.topbar h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.topbar h1 .brand-accent {
  color: var(--primary);
}

.topbar-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}


/* ─── 6. BOTTOM NAV (Mobile) ─── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(var(--nav-height) + var(--safe-bottom));
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease);
  min-width: 64px;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.8;
  transition: all var(--duration-fast) var(--ease);
}

.nav-item span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease);
}

.nav-item.active svg { stroke: var(--primary); }
.nav-item.active span { color: var(--primary); }
.nav-item:active { transform: scale(0.92); }


/* ─── 7. SIDEBAR (Tablet & Desktop) ─── */
.sidebar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-nav);
  background: var(--card);
  border-right: 1px solid var(--border);
  flex-direction: column;
  padding: var(--sp-6) 0;
  transition: width var(--duration) var(--ease);
  overflow: hidden;
}

.sidebar-logo {
  padding: 0 var(--sp-5);
  margin-bottom: var(--sp-8);
}

.sidebar-logo h2 {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover { background: var(--bg); }

.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.sidebar-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.8;
}

.sidebar-item.active svg { stroke: var(--primary-dark); }

.sidebar-item span {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  margin-top: auto;
  border-top: 1px solid var(--border);
}


/* ─── 8. CARDS ─── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: all var(--duration) var(--ease);
}

.card:hover { box-shadow: var(--shadow-md); }
.card-flat { box-shadow: none; border: 1px solid var(--border); }
.card-flat:hover { box-shadow: none; background: var(--card-hover); }

.card-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--sp-3);
}


/* ─── 9. KPI CARDS ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}

.kpi {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  text-align: center;
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1px;
  line-height: 1.1;
}

.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--sp-1);
  font-weight: 600;
}

.kpi.highlight {
  background: var(--primary);
  border-color: var(--primary);
}

.kpi.highlight .kpi-value { color: var(--text-inverse); }
.kpi.highlight .kpi-label { color: rgba(255,255,255,0.8); }


/* ─── 10. JOB ITEMS ─── */
.job-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}

.job-item:last-child { border-bottom: none; }
.job-item:active { opacity: 0.7; transform: scale(0.98); }

.job-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.job-info {
  flex: 1;
  min-width: 0;
}

.job-client {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.job-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}


/* ─── 11. STATUS BADGES ─── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.badge-scheduled { background: var(--info-bg); color: var(--info); }
.badge-progress  { background: var(--warning-bg); color: var(--warning); }
.badge-complete  { background: var(--success-bg); color: var(--success); }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-pending   { background: #F3F4F6; color: var(--text-secondary); }


/* ─── 12. BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease);
  min-height: 44px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

/* ── Primary — GoGreen brand button ── */
.btn-primary {
  background: linear-gradient(160deg, #1db954 0%, #15803d 100%);
  color: #ffffff;
  border: none;
  box-shadow:
    0 1px 3px rgba(21,128,61,0.30),
    0 1px 2px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.12);
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.btn-primary:hover {
  background: linear-gradient(160deg, #22c55e 0%, #16a34a 100%);
  box-shadow:
    0 4px 12px rgba(22,163,74,0.38),
    0 2px 4px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(21,128,61,0.25);
}

/* ── Secondary ── */
.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: #bdd4bf;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0) scale(0.97); }

/* ── Danger ── */
.btn-danger {
  background: linear-gradient(160deg, #f87171 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 1px 3px rgba(220,38,38,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn-danger:hover {
  background: linear-gradient(160deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 12px rgba(220,38,38,0.35);
  transform: translateY(-1px);
}

/* ── Ghost ── */
.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid transparent;
}
.btn-ghost:hover {
  background: var(--primary-light);
  border-color: rgba(22,163,74,0.2);
  color: var(--primary-dark);
}

/* ── Sizes ── */
.btn-sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  min-height: 34px;
}

.btn-lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: 16px;
  min-height: 52px;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
}

.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


/* ─── 13. FORM INPUTS ─── */
.form-group {
  margin-bottom: var(--sp-4);
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.form-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  outline: none;
}

/* Inputs in Safari (and Chrome on macOS) fight us on two fronts:
   1. Native text/number/date/email/tel controls get the system "Field"
      background (~#1C1C1E) when the OS is in dark mode, ignoring our
      `var(--card)`. Force `appearance:none`, an explicit background-color,
      AND `background-image:none` because Safari's UA stylesheet sets an
      internal image on date/time inputs that paints over our colour.
   2. Password manager autofill (1Password, Apple Keychain, etc.) repaints
      the input with `:-webkit-autofill` and overrides background entirely.
      The only thing that survives is an inset box-shadow the size of the
      input, which we use as a fake background. */
input[type="text"].form-input,
input[type="number"].form-input,
input[type="date"].form-input,
input[type="time"].form-input,
input[type="datetime-local"].form-input,
input[type="email"].form-input,
input[type="tel"].form-input,
input[type="url"].form-input,
input[type="password"].form-input,
input[type="search"].form-input,
textarea.form-input {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  color-scheme: only light;
  background-color: var(--card) !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Defeat WebKit autofill yellow + dark-mode "Field" colour by painting an
   inset box-shadow the size of the input. -webkit-text-fill-color keeps
   the typed text legible. Applies on the autofill states the browser uses
   while preview-suggesting and after the user picks a saved credential. */
input.form-input:-webkit-autofill,
input.form-input:-webkit-autofill:hover,
input.form-input:-webkit-autofill:focus,
input.form-input:-webkit-autofill:active,
textarea.form-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  box-shadow:         0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s; /* prevent the yellow flash */
}

/* Safari paints calendar/clock indicators with its own dark-mode colours
   too — invert them on dark themes so they remain visible on the card. */
@media (prefers-color-scheme: dark) {
  input[type="date"].form-input,
  input[type="time"].form-input,
  input[type="datetime-local"].form-input {
    color-scheme: only dark;
  }
  input[type="date"].form-input::-webkit-calendar-picker-indicator,
  input[type="time"].form-input::-webkit-calendar-picker-indicator,
  input[type="datetime-local"].form-input::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    opacity: 0.8;
  }
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.form-input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: var(--sp-1);
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

select.form-input,
select.fuel-filter-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-color: var(--card) !important;
  padding-right: 36px;
}

textarea.form-input {
  min-height: 100px;
  resize: vertical;
}


/* ─── 14. SEARCH BAR ─── */
.search-bar {
  position: relative;
  margin: var(--sp-3) var(--sp-4);
}

.search-bar input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 14px;
  min-height: 44px;
  outline: none;
  transition: all var(--duration-fast) var(--ease);
}

.search-bar input:focus {
  background: var(--card);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  pointer-events: none;
}


/* ─── 15. MODALS / BOTTOM SHEETS ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-backdrop.active { opacity: 1; }

/* Mobile: bottom sheet */
.modal-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
  padding-bottom: var(--safe-bottom);
}

.modal-sheet.active { transform: translateY(0); }

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: var(--sp-3) auto var(--sp-4);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast);
}

.modal-close:hover { background: var(--border-light); }

.modal-body {
  padding: var(--sp-4) var(--sp-5);
}

.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: var(--sp-3);
}

.modal-footer .btn { flex: 1; }


/* ─── 16. TABS ─── */
.tabs {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  background: transparent;
  transition: all var(--duration-fast) var(--ease);
  border: 1.5px solid transparent;
}

.tab.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}

.tab:not(.active):hover {
  background: var(--bg);
}


/* ─── 17. DATA TABLE ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--sp-2) var(--sp-4);
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.data-table tr:hover td {
  background: var(--bg);
}

.data-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ─── 18. AVATAR ─── */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 20px; }
.avatar-xl { width: 64px; height: 64px; font-size: 24px; }

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--card);
}

.avatar-group .avatar:first-child { margin-left: 0; }


/* ─── 19. FAB (Floating Action Button) ─── */
.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-card);
  transition: all var(--duration) var(--ease);
}

.fab:hover { background: var(--primary-dark); transform: scale(1.05); }
.fab:active { transform: scale(0.95); }

.fab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}


/* ─── 20. CALENDAR ─── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.cal-title {
  font-size: 17px;
  font-weight: 700;
}

.cal-nav {
  display: flex;
  gap: var(--sp-2);
}

.cal-nav button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: background var(--duration-fast);
}

.cal-nav button:hover { background: var(--border-light); }

.cal-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.cal-day {
  padding: var(--sp-3);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  border-radius: var(--radius-sm);
  margin: var(--sp-1);
}

.cal-day:hover { background: var(--bg); }

.cal-day-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cal-day-number {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

.cal-day.today .cal-day-number {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  margin: 2px auto 0;
}

.cal-day.selected {
  background: var(--primary-light);
}

.cal-day-jobs {
  padding: var(--sp-2) var(--sp-4);
}

.cal-job-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}

.cal-job-card:active { transform: scale(0.98); opacity: 0.8; }


/* ─── 21. TOAST / NOTIFICATIONS ─── */
.toast {
  position: fixed;
  top: calc(var(--safe-top) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: var(--z-toast);
  background: var(--text);
  color: var(--text-inverse);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-slow) var(--ease-spring);
  max-width: 90vw;
  width: max-content;
  white-space: nowrap;
  text-align: center;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast-success { background: var(--success); }
.toast-danger  { background: var(--danger); }
.toast-warning { background: #B45309; }


/* ─── 22. LOADING / SKELETON ─── */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-heading { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-card { height: 80px; }

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248,250,251,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-card);
  border-radius: inherit;
}


/* ─── 23. EMPTY STATES ─── */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
}

.empty-state svg {
  width: 64px;
  height: 64px;
  stroke: var(--text-muted);
  margin: 0 auto var(--sp-4);
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 280px;
  margin: 0 auto;
}


/* ─── 24. UTILITY CLASSES ─── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.p-4 { padding: var(--sp-4); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.mx-4 { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.rounded { border-radius: var(--radius); }
.border { border: 1px solid var(--border); }
.bg-white { background: var(--card); }
.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }


/* ══════════════════════════════════════════════════════════════
   25. RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

/* Sidebar section header — base layout. Display rule is per breakpoint. */
.sidebar-section-header {
  align-items: center;
  justify-content: space-between;
}

/* ─── 26. FIELD DASHBOARD (Employee + Supervisor/Shift Leader) ───
   Responsive layout for the non-admin dashboards. Three breakpoints:
   - mobile (<768px):   everything stacked single column
   - portrait (768-1023px, iPad portrait, no sidebar): info 2-col, actions 2x2, jobs/team stacked
   - landscape (≥1024px, iPad landscape + desktop): info 2-col, actions 1x4, jobs/team 2-col
   The dashboards switch instantly on rotation since CSS media queries handle the layout. */
.field-dashboard {
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field-info-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
.field-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  grid-auto-rows: 1fr;
}
.field-bottom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  flex: 1;
  align-items: stretch;
}
@media (min-width: 600px) {
  .field-info-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .field-actions { grid-template-columns: repeat(4, 1fr); }
  .field-bottom-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── TABLET (768px+) ─── */
@media (min-width: 768px) {
  :root {
    --content-max: 768px;
  }

  /* Tablet/medium viewports keep the mobile bottom-nav layout — the sidebar
     is only enabled at 1180px+ where there's room for full text. The old
     "sidebar 72px icon-only" mode at 768-899px was producing unreadable
     section headers on iPad in portrait, so we removed it entirely. */
  .sidebar-section-header { display: none; }

  /* Typography scale up */
  .text-title   { font-size: 30px; }
  .text-heading { font-size: 20px; }
  .text-subhead { font-size: 16px; }
  .text-body    { font-size: 15px; }

  /* KPIs expand */
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }

  /* Jobs grid */
  .jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* Modal: centered dialog */
  .modal-sheet {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    border-radius: var(--radius-lg);
    max-width: 540px;
    width: 90%;
    max-height: 80vh;
  }

  .modal-sheet.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .modal-handle { display: none; }

  /* FAB repositioned */
  .fab {
    bottom: 24px;
    right: 24px;
  }

  /* Calendar week full grid */
  .cal-week-strip .cal-day { padding: var(--sp-4); }

  /* Forms: 2-column */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* Content wrapper */
  .content-wrapper { padding: 0 var(--sp-6); }

  /* Search */
  .search-bar { max-width: 400px; }

  /* Cards padding */
  .card { padding: var(--sp-5); }
}


/* Mobile (<768px): no sidebar visible, section header lives only in More hub */
@media (max-width: 767px) {
  .sidebar-section-header { display: none; }

  /* Bottom-sheet must sit ABOVE the permanent bottom-nav. Phase 1 turned the
     nav into position:static — a real footer in the flow — but the sheet kept
     bottom:0, so its scroll tail ran under the opaque nav and hid the last
     fields (e.g. the service-checklist 'post' input at checkout). Anchor the
     sheet on top of the nav and cap its height to the space that's free, using
     the very variables that size the nav so it lines up on any device. */
  .modal-sheet {
    bottom: calc(var(--nav-height) + var(--safe-bottom));
    max-height: calc(100dvh - var(--nav-height) - var(--safe-bottom) - var(--safe-top) - 12px);
    padding-bottom: var(--sp-4);
  }
}


/* ─── MOBILE APP FRAME (<1024px: phones + iPad portrait) ───
   The bottom-nav layout used to scroll the whole DOCUMENT (body), with a
   sticky topbar and a fixed bottom-nav floating over it. In the iOS WebView
   that document scroll rubber-bands and exposes the shell background as a
   band at the end of long pages, and it also allows horizontal drift.

   Here we turn the shell into a real app frame: a fixed-height column whose
   MIDDLE region is the one and only scroller (vertical only). The document
   never scrolls, so there is no document bounce and no horizontal slide — by
   construction, not by patching. Desktop / iPad-landscape (>=1024px) keep the
   sidebar + document scroll and are untouched. */
@media (max-width: 1023px) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .app {
    height: 100dvh;
    overflow: hidden;
  }
  .app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
  }
  .bottom-nav {
    position: static;
  }
}


/* ─── DESKTOP / iPad LANDSCAPE (1024px+) ───
   At 1024px+ all iPads in landscape (mini 1133, standard 1180, Pro 11"
   1194, Pro 12.9" 1366) show the full sidebar — consistent experience
   across devices. Below 1024px (iPads in portrait, phones) we keep the
   mobile bottom-nav layout so the sidebar doesn't squeeze content. */
@media (min-width: 1024px) {
  :root {
    --content-max: 1280px;
    --sidebar-width: 240px;
  }

  /* Typography scale up */
  .text-title   { font-size: 32px; }
  .text-heading { font-size: 22px; }

  /* Sidebar full — replaces bottom nav */
  .sidebar {
    display: flex;
    width: var(--sidebar-width);
  }
  .sidebar-item { justify-content: flex-start; padding: var(--sp-2) var(--sp-4); }
  .sidebar-item span { display: inline; }
  .sidebar-logo h2 { display: block; }
  .sidebar-section-header { display: flex; }

  .bottom-nav { display: none; }

  .app-content {
    margin-left: var(--sidebar-width);
    padding-bottom: var(--sp-8);
  }

  /* Dashboard 3-column */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: var(--sp-4);
  }

  /* Calendar: month grid + side panel */
  .cal-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    height: calc(100vh - var(--topbar-height));
  }

  .cal-detail-panel {
    border-left: 1px solid var(--border);
    background: var(--card);
    overflow-y: auto;
    padding: var(--sp-5);
  }

  /* Full data tables */
  .data-table th,
  .data-table td {
    padding: var(--sp-3) var(--sp-5);
  }

  /* Modal wider */
  .modal-sheet { max-width: 640px; }

  /* FAB hidden on desktop (use action bar) */
  .fab { display: none; }
  .action-bar { display: flex; }

  /* Content area */
  .content-wrapper {
    padding: 0 var(--sp-8);
  }
}


/* ─── WIDE DESKTOP (1440px+) ─── */
@media (min-width: 1440px) {
  :root {
    --content-max: 1400px;
  }

  .cal-layout {
    grid-template-columns: 1fr 420px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr 1fr 380px;
  }
}


/* ─── PRINT ─── */
@media print {
  .bottom-nav,
  .sidebar,
  .fab,
  .toast,
  .modal-backdrop,
  .modal-sheet { display: none !important; }

  .app-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
  }

  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}


/* ─── DARK MODE (future-ready) ─── */
@media (prefers-color-scheme: dark) {
  /* Tokens will be overridden here in a future update */
  /* :root { --bg: #0F172A; --card: #1E293B; ... } */
}


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

/* ═══════════════════════════════════════════════════
   CALENDAR MODULE — styles
   ═══════════════════════════════════════════════════ */

/* Nav strip */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 0;
}
.cal-nav-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text);
  transition: all .15s;
}
.cal-nav-btn:hover { background: var(--bg); border-color: var(--primary); }
.cal-day-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cal-day-strip::-webkit-scrollbar { display: none; }
.cal-day {
  display: flex; flex-direction: column; align-items: center;
  min-width: 44px; padding: 8px 6px;
  border: none; background: none;
  border-radius: 12px;
  cursor: pointer;
  gap: 2px;
  transition: all .15s;
  position: relative;
}
.cal-day:hover { background: var(--bg); }
.cal-day.selected { background: var(--primary); }
.cal-day.today .cal-day-num { color: var(--primary); font-weight: 700; }
.cal-day.selected .cal-day-name,
.cal-day.selected .cal-day-num { color: white; }
.cal-day-name { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; }
.cal-day-num  { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1; }
.cal-day-dot  {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); margin-top: 2px;
}
.cal-day.selected .cal-day-dot { background: white; }
.cal-today-row { display: flex; justify-content: center; padding: 8px 16px 4px; }
.cal-today-btn {
  padding: 6px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
}
.cal-today-btn:hover { border-color: var(--primary); color: var(--primary); }

/* View toggle */
.cal-view-toggle { padding: 8px 16px; }

/* Filters */
.cal-filters { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-pills {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.cal-pills::-webkit-scrollbar { display: none; }
.cal-pill {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.cal-pill:hover  { border-color: var(--primary); color: var(--primary); }
.cal-pill.active { background: var(--primary); border-color: var(--primary); color: white; }

/* Week grid */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-week-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 10px 8px;
  min-height: 160px;
  transition: all .15s;
}
.cal-week-col.today  { border-color: var(--primary); background: #F0FDF4; }
.cal-week-col.selected { box-shadow: 0 0 0 2px var(--primary); }
.cal-week-header {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 10px; gap: 2px;
}
.cal-week-day { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.cal-week-num {
  font-size: 18px; font-weight: 600; color: var(--text);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-week-num.today { background: var(--primary); color: white; }
.cal-week-empty { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 12px 0; opacity: .6; }
.cal-week-jobs { display: flex; flex-direction: column; gap: 6px; }
.cal-week-job {
  padding: 6px 8px;
  border-left: 3px solid #3B82F6;
  border-radius: 0 8px 8px 0;
  background: var(--bg);
  cursor: pointer;
  transition: all .15s;
}
.cal-week-job:hover { background: var(--border-light); }
.cal-week-job-time   { font-size: 10px; color: var(--text-secondary); }
.cal-week-job-client { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cal-week-job-type   { font-size: 11px; color: var(--text-secondary); }

/* Day view timeline */
.cal-day-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.cal-day-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.cal-day-count { font-size: 13px; color: var(--text-secondary); }
.cal-timeline { display: flex; flex-direction: column; }
.cal-timeline-item { display: flex; gap: 14px; }
.cal-timeline-track {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; padding-top: 4px;
}
.cal-timeline-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; z-index: 1;
}
.cal-timeline-line {
  width: 2px; flex: 1; min-height: 24px;
  background: var(--border);
  margin: 4px 0;
}
.cal-timeline-card {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .15s;
}
.cal-timeline-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.cal-timeline-time    { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.cal-timeline-client  { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cal-timeline-meta    { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.cal-timeline-status  { font-weight: 500; text-transform: capitalize; }
.cal-timeline-address {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary); margin-top: 4px;
}

@media (max-width: 768px) {
  .cal-week-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .cal-week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Drag & Drop — calendar */
.cal-week-col.drag-over {
  background: #F0FDF4;
  border-color: var(--primary);
  border-style: dashed;
  box-shadow: 0 0 0 2px var(--primary);
}
.cal-week-job[draggable="true"]:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}


/* ─── DARK MODE — TV Style ─── */
[data-theme="dark"] {
  --primary: #4ADE80;
  --primary-light: #14532D;
  --primary-dark: #86EFAC;
  --primary-hover: #22C55E;

  --bg: #0F172A;
  --card: #1E293B;
  --card-hover: #263448;

  --text: #CBD5E1;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0F172A;

  --border: #334155;
  --border-light: #263448;
  --divider: #263448;

  --success: #4ADE80;
  --success-bg: #14532D;
  --warning: #FBBF24;
  --warning-bg: #451A03;
  --danger: #F87171;
  --danger-bg: #450A0A;
  --info: #60A5FA;
  --info-bg: #1E3A5F;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow: 0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.7);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.8);
}

[data-theme="dark"] body {
  background: #0F172A;
  color: #F1F5F9;
}

/* Surfaces */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .bottom-nav {
  background: #1E293B;
  border-color: #334155;
}

[data-theme="dark"] .card,
[data-theme="dark"] .inv-kpi,
[data-theme="dark"] .team-kpi {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F1F5F9;
}

[data-theme="dark"] .card-header {
  color: #94A3B8;
  border-color: #334155;
}

/* Sidebar items */
[data-theme="dark"] .sidebar-item {
  color: #94A3B8;
}
[data-theme="dark"] .sidebar-item:hover {
  background: rgba(74,222,128,.08);
  color: #F1F5F9;
}
[data-theme="dark"] .sidebar-item.active {
  background: rgba(74,222,128,.12);
  color: #4ADE80;
}
[data-theme="dark"] .sidebar-item.active svg {
  stroke: #4ADE80;
}

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748B !important;
}

/* Modals */
[data-theme="dark"] .modal-sheet {
  background: #1E293B !important;
  color: #F1F5F9;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  border-color: #334155;
}
[data-theme="dark"] .inv-modal-box,
[data-theme="dark"] .team-modal-box {
  background: #1E293B !important;
  color: #F1F5F9;
}

/* Cal week columns */
[data-theme="dark"] .cal-week-col {
  background: #1E293B;
  border-color: #334155;
}
[data-theme="dark"] .cal-week-col.today {
  background: #14532D22;
}
[data-theme="dark"] .cal-week-col.selected {
  background: #14532D33;
  border-color: #4ADE80;
}

/* Overlays & inline cards */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"] {
  background: #1E293B !important;
}
[data-theme="dark"] [style*="background:#F9FAFB"],
[data-theme="dark"] [style*="background:#F3F4F6"],
[data-theme="dark"] [style*="background:#F8FAFB"] {
  background: #263448 !important;
}
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"] {
  color: #F1F5F9 !important;
}
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"] {
  color: #CBD5E1 !important;
}
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color: #6B7280"] {
  color: #64748B !important;
}
[data-theme="dark"] [style*="border:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border: 1px solid #E5E7EB"] {
  border-color: #334155 !important;
}

/* ─── DARK MODE — Module specific cards ─── */
[data-theme="dark"] .inv-card,
[data-theme="dark"] .inv-alerts-card,
[data-theme="dark"] .inv-kpi,
[data-theme="dark"] .inv-search-wrap input,
[data-theme="dark"] .inv-tabs-wrap,
[data-theme="dark"] .inv-loc-tab {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .inv-alerts-card {
  background: #1C2A1A !important;
  border-color: #4ADE8044 !important;
}

[data-theme="dark"] .inv-pill {
  background: #263448 !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .inv-pill.active {
  background: #16A34A !important;
  color: #fff !important;
}

[data-theme="dark"] .team-card {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .team-card:hover {
  background: #263448 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}

[data-theme="dark"] .team-kpi {
  background: #1E293B !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .team-search {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .team-fbtn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .team-fbtn.active {
  background: #14532D !important;
  border-color: #4ADE80 !important;
  color: #4ADE80 !important;
}

[data-theme="dark"] .cal-filters,
[data-theme="dark"] .cal-pills,
[data-theme="dark"] .cal-pill {
  background: transparent !important;
}

[data-theme="dark"] .cal-pill {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .cal-pill.active {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #fff !important;
}

[data-theme="dark"] .cal-timeline-card {
  background: #1E293B !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .cal-day-strip button {
  color: #94A3B8 !important;
}

[data-theme="dark"] .cal-day-strip button.selected,
[data-theme="dark"] .cal-day-strip button.today {
  background: #16A34A !important;
  color: #fff !important;
}

/* ─── DARK MODE — Inventory text fixes ─── */
[data-theme="dark"] .inv-card .inv-card * {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .inv-list .inv-card div[style*="color:#1A1A2E"],
[data-theme="dark"] .inv-list .inv-card div[style*="color: #1A1A2E"],
[data-theme="dark"] .inv-list .inv-card div[style*="font-weight:600"],
[data-theme="dark"] .inv-list .inv-card div[style*="font-size:15px"] {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .inv-list .inv-card div[style*="color:#9CA3AF"],
[data-theme="dark"] .inv-list .inv-card div[style*="color: #9CA3AF"] {
  color: #64748B !important;
}

[data-theme="dark"] .inv-loc-tab {
  color: #94A3B8 !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
}

[data-theme="dark"] .inv-loc-tab.active {
  color: #4ADE80 !important;
  border-bottom-color: #4ADE80 !important;
}

[data-theme="dark"] .inv-tabs-wrap {
  border-bottom-color: #334155 !important;
  background: transparent !important;
}

[data-theme="dark"] .inv-alerts-card div[style*="background:#fff"],
[data-theme="dark"] .inv-alerts-card div[style*="background: #fff"],
[data-theme="dark"] .inv-alerts-card div[style*="background:#FFFFFF"] {
  background: #1E293B !important;
}

[data-theme="dark"] .inv-alerts-card div[style*="font-weight:500"],
[data-theme="dark"] .inv-alerts-card div[style*="font-size:13px"] {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .inv-alerts-card strong {
  color: #F1F5F9 !important;
}

/* ── Dark mode: cal2 calendar ── */
[data-theme="dark"] .cal2-week-col { background:#1E2432; border-color:#2D3748; }
[data-theme="dark"] .cal2-week-col.today { background:#14532D; border-color:var(--primary); }
[data-theme="dark"] .cal2-week-col.selected { border-color:var(--primary); }
[data-theme="dark"] .cal2-week-header { border-bottom-color:#2D3748; }
[data-theme="dark"] .cal2-week-job { background:#252D3D; border-top-color:#2D3748; border-right-color:#2D3748; border-bottom-color:#2D3748; }
[data-theme="dark"] .cal2-week-job-client { color:#F9FAFB; }
[data-theme="dark"] .cal2-week-job-time { color:#9CA3AF; }
[data-theme="dark"] .cal2-week-job-type { color:#9CA3AF; }
[data-theme="dark"] .cal2-week-empty { color:#6B7280; }
[data-theme="dark"] .cal2-week-day { color:#9CA3AF; }
[data-theme="dark"] .cal2-week-num { color:#F9FAFB; }
[data-theme="dark"] .cal2-week-num.today { color:var(--primary); }
[data-theme="dark"] .cal2-nav-btn { border-color:#2D3748; color:#9CA3AF; }
[data-theme="dark"] .cal2-nav-btn:hover { background:#252D3D; color:#F9FAFB; }
[data-theme="dark"] .cal2-day-btn { background:#1E2432; border-color:#2D3748; color:#9CA3AF; }
[data-theme="dark"] .cal2-day-btn:hover { background:#252D3D; border-color:var(--primary); }
[data-theme="dark"] .cal2-day-btn.selected { background:var(--primary); border-color:var(--primary); }
[data-theme="dark"] .cal2-pill { background:#1E2432; border-color:#2D3748; color:#9CA3AF; }
[data-theme="dark"] .cal2-pill.active { background:var(--primary); border-color:var(--primary); color:white; }
[data-theme="dark"] .cal2-timeline-card { background:#1E2432; border-color:#2D3748; }
[data-theme="dark"] .cal2-timeline-card:hover { background:#252D3D; }
[data-theme="dark"] .cal2-timeline-line { background:#2D3748; }
[data-theme="dark"] .cal2-timeline-client { color:#F9FAFB; }
[data-theme="dark"] .cal2-timeline-time { color:#9CA3AF; }
[data-theme="dark"] .cal2-today-btn { border-color:#2D3748; color:#9CA3AF; }
[data-theme="dark"] .cal2-today-btn:hover { background:#252D3D; color:#F9FAFB; }

/* ── Edit Job modal — time input height fix ── */
input[type="time"] {
  height: 44px;
  box-sizing: border-box;
}

/* ── Edit Job modal — select height fix ── */
select {
  height: 44px;
  box-sizing: border-box;
}

/* ── Select height match inputs ── */
select {
  padding: 10px 14px !important;
  height: auto !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ── Leaflet z-index fix ── */
.leaflet-pane { z-index: 1 !important; }
.leaflet-control { z-index: 2 !important; }
.leaflet-top, .leaflet-bottom { z-index: 2 !important; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL FORM FIELD HARMONIZATION
   Consistent height, padding, font-size across all modals
   ═══════════════════════════════════════════════════════════════ */

/* All form inputs, selects, textareas in modal overlays */
[style*="z-index:2000"] input[type="text"],
[style*="z-index:2000"] input[type="email"],
[style*="z-index:2000"] input[type="tel"],
[style*="z-index:2000"] input[type="number"],
[style*="z-index:2000"] input[type="date"],
[style*="z-index:2000"] input[type="time"],
[style*="z-index:2000"] input[type="password"],
[style*="z-index:2000"] select,
[style*="z-index:2000"] textarea,
[style*="z-index:9000"] input[type="text"],
[style*="z-index:9000"] input[type="email"],
[style*="z-index:9000"] input[type="tel"],
[style*="z-index:9000"] input[type="number"],
[style*="z-index:9000"] input[type="date"],
[style*="z-index:9000"] input[type="time"],
[style*="z-index:9000"] input[type="password"],
[style*="z-index:9000"] select,
[style*="z-index:9000"] textarea,
[style*="z-index: 2000"] input[type="text"],
[style*="z-index: 2000"] select,
[style*="z-index: 2000"] textarea,
[style*="z-index: 9000"] input[type="text"],
[style*="z-index: 9000"] select,
[style*="z-index: 9000"] textarea,
[style*="z-index:1000"] input[type="text"],
[style*="z-index:1000"] input[type="email"],
[style*="z-index:1000"] input[type="tel"],
[style*="z-index:1000"] input[type="number"],
[style*="z-index:1000"] input[type="date"],
[style*="z-index:1000"] input[type="time"],
[style*="z-index:1000"] select,
[style*="z-index:1000"] textarea {
  padding: 11px 14px !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--bg, #F8FAFB) !important;
  color: var(--text, #1A1A2E) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

/* Focus state — green border */
[style*="z-index:2000"] input:focus,
[style*="z-index:2000"] select:focus,
[style*="z-index:2000"] textarea:focus,
[style*="z-index:9000"] input:focus,
[style*="z-index:9000"] select:focus,
[style*="z-index:9000"] textarea:focus,
[style*="z-index:1000"] input:focus,
[style*="z-index:1000"] select:focus,
[style*="z-index:1000"] textarea:focus {
  border-color: var(--primary, #16A34A) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important;
}

/* Select dropdown arrow */
[style*="z-index:2000"] select,
[style*="z-index:9000"] select,
[style*="z-index:1000"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
  cursor: pointer !important;
}

/* Textarea specific */
[style*="z-index:2000"] textarea,
[style*="z-index:9000"] textarea,
[style*="z-index:1000"] textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

/* Labels in modals */
[style*="z-index:2000"] label[style*="font-size:13px"],
[style*="z-index:2000"] label[style*="font-size:12px"],
[style*="z-index:9000"] label[style*="font-size:12px"],
[style*="z-index:9000"] label[style*="font-size:13px"],
[style*="z-index:1000"] label[style*="font-size:13px"],
[style*="z-index:1000"] label[style*="font-size:12px"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #6B7280) !important;
  margin-bottom: 6px !important;
}

/* Datepicker & Timepicker display fields — match same height */
[style*="z-index:2000"] .dp-val,
[style*="z-index:2000"] .tp-val,
[style*="z-index:9000"] .dp-val,
[style*="z-index:9000"] .tp-val {
  font-size: 14px !important;
}

/* Checkbox inputs — don't override size */
[style*="z-index:2000"] input[type="checkbox"],
[style*="z-index:9000"] input[type="checkbox"],
[style*="z-index:1000"] input[type="checkbox"] {
  width: 16px !important;
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 4px !important;
  accent-color: var(--primary, #16A34A) !important;
}

/* Hidden inputs — no styling */
[style*="z-index:2000"] input[type="hidden"],
[style*="z-index:9000"] input[type="hidden"],
[style*="z-index:1000"] input[type="hidden"] {
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Primary action buttons in modals */
[style*="z-index:2000"] button[style*="background:var(--primary)"],
[style*="z-index:9000"] button[style*="background:var(--primary)"] {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Cancel/secondary buttons in modals */
[style*="z-index:2000"] button[style*="border:1px solid var(--border)"],
[style*="z-index:9000"] button[style*="border:1px solid var(--border)"] {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST: iPhone (< 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* App content - no sidebar on mobile */
  .app-content {
    margin-left: 0 !important;
    padding-bottom: 80px;
  }

  /* Topbar adjustments */
  .topbar { padding: 12px 14px; }
  .topbar-title { font-size: 18px; }
  .topbar-subtitle { font-size: 13px; }

  /* Content wrapper tighter padding */
  .content-wrapper { padding: 0 12px; }

  /* KPI grid: 2 columns on mobile */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Cards smaller padding */
  .card { padding: 14px; margin: 0 0 10px; }

  /* Dashboard grid: single column */
  .dashboard-grid { grid-template-columns: 1fr !important; }

  /* Calendar: ensure week grid is 2 columns */
  .cal-week-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pipeline/Kanban: horizontal scroll */
  .kanban-board, [style*="display:flex"][style*="overflow-x"] {
    gap: 12px;
    padding-bottom: 8px;
  }

  /* Kanban columns minimum width */
  .kanban-col, [style*="min-width:280px"] {
    min-width: 260px !important;
  }

  /* Tables: smaller font */
  table { font-size: 12px; }
  th, td { padding: 8px 6px; }

  /* Buttons: ensure minimum tap target */
  button, .btn, [role="button"] {
    min-height: 44px;
  }

  /* Search bar: full width */
  .search-bar, input[type="search"], input[placeholder*="Search"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Grid2: two columns on mobile */
  .grid2 { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Hide elements not needed on mobile */
  .desktop-only { display: none !important; }

  /* FAB: position above bottom nav */
  .fab {
    bottom: 80px !important;
    right: 16px !important;
  }

  /* Form inputs: full width, prevent iOS zoom */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Job cards: adjust spacing */
  .jc { margin: 6px 4px; padding: 14px; }

  /* Tags: slightly smaller */
  .tag { font-size: 11px; padding: 2px 8px; }

  /* Toast: above bottom nav (top:auto cancels the base top rule) */
  .toast { top: auto; bottom: 90px !important; }
}

/* Very small phones (<375px) */
@media (max-width: 374px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .cal-week-grid { grid-template-columns: 1fr !important; }
  .grid2 { grid-template-columns: 1fr !important; }
}

/* tel: click-to-call links — inherit the surrounding number style so they
   don't stand out visually, but get the underline + pointer affordance on
   hover so users know they can tap them. On mobile the OS dialer opens
   directly; on desktop the link is harmless (browser handler or noop). */
.tel-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
}
.tel-link:hover { text-decoration: underline; }