/* ==========================================================
   METRYX UI
   Dark mode (default): purple→blue neon glass
   Light mode (body.light): Slate & Paper with obsidian accents
   ========================================================== */

/* --------------------
  THEME TOKENS
-------------------- */

/* ===========================
  Receipt sheet — mobile polish
  =========================== */

#sheetReceiptDetail .rcptActionRow{
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}

/* Fallback spacing for iOS/Safari when flex-gap misbehaves */
#sheetReceiptDetail .rcptActionRow .btn + .btn{
  margin-left:10px;
}

/* Keep the pair visually centered instead of full-bleed */
@media (max-width: 720px){
  #sheetReceiptDetail .rcptActionRow{
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Prevent buttons from "touching" or wrapping weirdly */
  #sheetReceiptDetail .rcptActionRow .btn{
    min-width:0;
    flex: 1 1 0;
    white-space: normal;
    text-align:center;
  }
}

/* Receipt fields: consistent vertical rhythm, stack 2-col rows on mobile */
#sheetReceiptDetail .rcptFieldsCard label.small{
  display:block;
  margin: 0 0 6px 0;
}

#sheetReceiptDetail .rcptFieldsCard .input{
  width:100%;
}

/* Receipt inputs — match Route & Load “Metryx” controls (rounded + subtle outside depth) */
#sheetReceiptDetail .rcptFieldsCard .input{
  width:100%;
  border-radius: var(--r-md) !important; /* 12px: matches your app inputs */
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;

  /* default (dark): soft outside depth like the rest of the app */
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

/* Light mode: lighter outside shadow so it stays “Metryx glass”, not boxed */
body.light #sheetReceiptDetail .rcptFieldsCard .input{
  box-shadow: 0 14px 30px rgba(15,23,42,0.10);
}

/* Metryx-style OUTSIDE bloom (rounded) */
#sheetReceiptDetail .rcptFieldsCard .input:focus,
#sheetReceiptDetail .rcptFieldsCard .input:focus-visible{
  outline: none !important;
  border-color: rgba(15,23,42,0.35) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.10) !important;
}

#sheetReceiptDetail .rcptFieldsCard > .small.muted{
  margin-bottom: 12px !important;
}

@media (max-width: 720px){
  /* The two-column rows (Date/Total, Gallons/State) become clean stacked rows */
  #sheetReceiptDetail .rcptFieldsCard .row{
    flex-direction:column;
  }

  #sheetReceiptDetail .rcptFieldsCard .row > div{
    width:100%;
  }

  /* Even spacing between field groups */
  #sheetReceiptDetail .rcptFieldsCard .row > div + div{
    margin-top: 10px;
  }

  /* Slightly more breathing room between sections (Vendor -> Date/Total -> Fuel -> Notes) */
  #sheetReceiptDetail #rcptFuelFields,
  #sheetReceiptDetail #rcptMaintFields{
    margin-top: 12px !important;
  }
}

/* ==========================================================
   METRYX UI - UNIFIED THEME (Money Green)
   ========================================================== */

:root {
  /* Typography */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- PALETTE: "Money Mode" (Dark Default) --- */
  
  /* Backgrounds: Deep Slate/Black */
  --bg-deep: #020617; 
  --bg-surface: #0f172a;
  
  /* THE GLOBAL BACKGROUND GRADIENT (Applied everywhere) */
  --page-bg: 
    radial-gradient(circle at top left, rgba(74, 222, 128, 0.15) 0, transparent 50%),   /* Green glow */
    radial-gradient(circle at top right, rgba(168, 85, 247, 0.08) 0, transparent 50%),  /* Subtle Purple hint */
    linear-gradient(180deg, #0f172a 0%, #020617 100%);

  /* Text */
  --text: #f1f5f9;
  --muted: #94a3b8;
  --text-soft: rgba(241, 245, 249, 0.86);

  /* ACCENT: Swapped Cyan for "Profit Green" to match your Dollar Sign */
  --accent: #2b4256;         /* UI Accent (Slate/Steel) */
  --accent-dim: rgba(43, 66, 86, 0.14);
  --accent-glow: rgba(43, 66, 86, 0.28);
  --accent-strong: #3f647f;   /* UI Accent strong */
  --money-accent: #4ade80;    /* Money green (semantic) */
  --money-dim: rgba(74, 222, 128, 0.15);
  --money-glow: rgba(74, 222, 128, 0.40);

  
  /* Surfaces */
  --card: rgba(15, 23, 42, 0.94);
  --card-strong: rgba(15, 23, 42, 0.98);
  --card-soft: rgba(15, 23, 42, 0.85);
  
  /* Borders & Glass */
  --border: rgba(148, 163, 184, 0.15);
  --border-strong: rgba(148, 163, 184, 0.28);
  --border-highlight: rgba(255, 255, 255, 0.1);
  --glass-surface: rgba(15, 23, 42, 0.75); /* Unified transparency for Modals/Menu */
  
  /* Shadows */
  --shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 12px 30px rgba(15, 23, 42, 0.85);

  /* Functional Colors */
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  
  /* Radii */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* --- MISSING TOKENS (Fixes the square/pointy issue) --- */
  --r-lg: 16px;       /* Fixes Cards */
  --r-md: 12px;       /* Fixes Inputs */
  --r-pill: 999px;    /* Fixes Buttons */
  --sh-2: var(--shadow-2); /* Fixes Shadows */

 /* Clean Glass Shimmer (No Color) */
--shimmer: linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.0) 100%);

  /* Graphite Glass (used by body background gradients) */
  --d-bg0:#070a12;
  --d-bg1:#0b1020;
  --d-text:#e7eefc;
  --d-card: rgba(17, 24, 39, .55);
  --d-card2: rgba(17, 24, 39, .72);
  --d-border: rgba(148, 163, 184, 0.22);
  --d-border2: rgba(148, 163, 184, 0.34);
  --d-muted: rgba(148, 163, 184, 0.78);

  /* Paper Slate (used by body.light background gradients) */
  --l-bg0:#f8fafc;
  --l-bg1:#e2e8f0;
  --l-text:#0f172a;
  --l-border:#cbd5e1;
  --l-muted:#52627a;
  /* Safe area background (status bar / notch area). Default to dark theme color. */
  --safe-area-bg: var(--bg-deep);
}


/* --- LIGHT MODE OVERRIDES --- */
body.light {
  --bg-deep: #f1f5f9;
  --bg-surface: #ffffff;
  
  /* Light Mode Background: Crisp Paper/Slate */
  --page-bg: radial-gradient(900px 520px at 25% 0%, rgba(15,23,42,.05), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);

  --text: #0f172a;
  --muted: #64748b;
  --text-soft: rgba(15, 23, 42, 0.78);

  /* Accent shifts to a darker Emerald in light mode for readability */
  --accent: #0f172a;  /* UI Accent (Obsidian) */
  --accent-dim: rgba(15, 23, 42, 0.08);
  --accent-glow: rgba(15, 23, 42, 0.15);
  --accent-strong: #1e293b;

  --card: rgba(255, 255, 255, 0.92);
  --card-strong: rgba(255, 255, 255, 0.98);
  --card-soft: rgba(248, 250, 252, 0.96);

  --border: #cbd5e1;
  --border-strong: rgba(15, 23, 42, 0.22);
  --border-highlight: #94a3b8;
  --glass-surface: rgba(255, 255, 255, 0.85);
  
  --shadow: 0 18px 55px -18px rgba(15, 23, 42, 0.18);
  --shadow-2: 0 14px 34px rgba(15, 23, 42, 0.10);
  
  /* Rolls Royce obsidian shimmer */
  --shimmer: radial-gradient(circle at top right, rgba(15, 23, 42, 0.15), transparent 70%);
  /* Ensure the iOS safe-area background matches light theme */
  --safe-area-bg: var(--l-bg0);
}

/* --------------------
   BASE RESET & BACKGROUND FIX
-------------------- */
* { box-sizing: border-box; }

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  /* iOS PWA: 100% height is unreliable; force full available height */
  height: 100%;
  min-height: 100vh;
  background: var(--page-bg);
  background-color: var(--bg-deep);
}

/* iOS Safari/PWA full-height fix */
html { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }

/* ===============================
   iOS SAFE-AREA BACKGROUND FIX
   (prevents white bar above app)
================================ */

/* Ensure the root always paints */
html, body {
  background: var(--page-bg);
}

/* Paint the iOS status-bar safe area */
body::before{
  content:"";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--safe-area-bg);
  z-index: 1;
  pointer-events: none;
}

/* Paint the bottom safe-area (home indicator) so it matches theme */
body::after{
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--safe-area-bg);
  z-index: 1;
  pointer-events: none;
}

/* Ensure your app content sits above the paint */
#app, .auth-screen, .boot-splash{
  position: relative;
  z-index: 2;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page-bg); /* Now strictly uses the variable */
  background-attachment: scroll; /* Use scroll to avoid iOS repaint/flicker issues */
}

/* iOS/Safari: make native date/time controls respect dark mode */
body:not(.light){ color-scheme: dark; }
body.light{ color-scheme: light; }

/* Helpers */
.wrap{
  max-width:1120px;
  margin:18px auto 40px;
  padding-left:16px;
  padding-right:16px;

  /* iOS PWA notch + home indicator spacing */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.small{ font-size:13px; }
.tiny{ font-size:12px; }
.muted{ color:var(--muted); }
.strong{ font-weight:600; }

/* --------------------
   AUTH
-------------------- */
/* Login Page Background */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
  
  /* FIXED: Use the unified page background */
  background: var(--page-bg); 
}

/* Login Card */
.auth-card {
  width: 100%;
  max-width: 420px;
  position: relative;
  border-radius: var(--radius-lg);
  padding: 20px 18px 18px;
  
  /* FIXED: Use the unified glass surface */
  background: var(--glass-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.auth-brand{ margin-bottom:10px; }
.auth-title{ margin:0; font-size:20px; letter-spacing:0.01em; }

.auth-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.auth-main-btn{
  width:100%;
  max-width:260px;
  text-align:center;
  padding:10px 18px;
}

.link-btn{
  background:transparent;
  border:none;
  padding:0;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  text-decoration:underline;
}
.link-btn:hover{ color:var(--accent-strong); }
body.light .link-btn:hover{ color:var(--accent); }

/* --------------------
   APP SHELL / TOP BAR
-------------------- */
.app{ min-height:100vh; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.brand{ display:flex; align-items:center; gap:10px; }

.app-logo{
  width:40px;
  height:40px;
  border-radius:13px;
  object-fit:cover;
}
.app-title{ font-size:18px; margin:0; }
.meta{ font-size:13px; color:var(--muted); }

.topbar-actions{ display:flex; align-items:center; gap:10px; }

.badge{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border-strong);
  color:var(--muted);
  background:rgba(15, 23, 42, 0.18);
}
body.light .badge{ background:rgba(255,255,255,0.75); }

.icon-btn{
  background:rgba(15, 23, 42, 0.85);
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--text);
  padding:8px 10px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.icon-btn:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}
body.light .icon-btn{
  background:rgba(255,255,255,0.85);
  color:var(--text);
}

/* --------------------
   BUTTONS
-------------------- */
.btn{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, border-color .12s ease, background .12s ease, color .12s ease;

  /* Dark default = cyan → blue gradient */
  color:#001219;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.80);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.92),
    0 0 0 1px rgba(15, 23, 42, 0.90);
}
.btn:active{ transform:translateY(0); opacity:0.92; }

.btn.full{ width:100%; }
.btn.small-btn{ padding:8px 12px; font-size:13px; }
.btn.pill-btn{ padding:9px 14px; }

.btn.tiny{
  padding:8px 10px;
  font-size:12px;
  line-height:1;
  border-radius:10px;
}

.btn.ghost{
  background:rgba(15, 23, 42, 0.90);
  color:var(--text);
  border:1px solid var(--border-strong);
  box-shadow:none;
}
.btn.ghost:hover{
  border-color:var(--accent);
  background:rgba(15, 23, 42, 0.96);
  box-shadow:0 12px 30px rgba(15, 23, 42, 0.75);
}

/* Light mode buttons = obsidian luxury */
body.light .btn{
  /* Obsidian primary (premium), not flat */
  color:#ffffff;
  background: linear-gradient(180deg, #111d33 0%, #0b1222 100%);
  border:1px solid rgba(15,23,42,.92);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
body.light .btn:hover{
  background: linear-gradient(180deg, #14213b 0%, #0b1222 100%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
body.light .btn.ghost{
  color:#0f172a;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(15, 23, 42, 0.22);
  box-shadow:none;
}
body.light .btn.ghost:hover{
  border-color:#0f172a;
  background:#f8fafc;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

/* --------------------
   FORMS
-------------------- */
.field-group{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field-group label{ font-size:13px; color:var(--muted); }

/* Commodity list rows */
.commodity-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.commodity-row{
  display:grid;
  grid-template-columns: 84px 1fr 40px;
  gap:8px;
  align-items:center;
}

.commodity-row input{
  width:100%;
}

.commodity-qty{
  text-align:center;
}

.btn-commodity-add{
  margin-top:8px;
  width:fit-content;
}

@media (max-width: 520px){
  .commodity-row{
    grid-template-columns: 76px 1fr 40px;
  }
}

/* ==========================================
   SAVED RUNS — STACKED CONTROLS (Premium)
========================================== */

.runs-controls-stacked{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Search */
/* Ledger: add breathing room between label + search input */
.runs-search > label.small{
  display:block;
  margin-bottom:8px;
}
.runs-search-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.runs-search-row input{
  flex:1;
}

/* Embedded Clear button styles */
.runs-search-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.runs-search-wrapper input{
  width:100%;
  padding-right:92px; /* space for Clear button (RIGHT) */
  border-radius:10px;
}

.runs-clear-btn{
  position:absolute;
  right:6px;                /* buffer from outer input border */
  height:70%;
  padding:0 12px;
  border-radius:8px;
  font-size:12px;
  border:1px solid var(--border-strong);
  background:var(--card-soft);  /* ✅ respects dark + light mode */
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Filter */
.runs-filter select{
  width:100%;
}

/* Mobile safety */
@media (max-width: 760px){
  .runs-search-row{
    gap:6px;
  }

  .runs-search-row button{
    flex-shrink:0;
  }
  .runs-search-wrapper input{ padding-right:84px; }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input.flatpickr-input,
input.flatpickr-altInput,
select,
textarea{
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:rgba(15, 23, 42, 0.86);
  padding:9px 11px;
  font-size:14px;
  color:var(--text);
  outline:none;
}
input::placeholder,
textarea::placeholder{ color:rgba(148, 163, 184, 0.90); }

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:26px;
}

#supportMessage{ resize:vertical; min-height:120px; }

body.light input[type="text"],
body.light input[type="email"],
body.light input[type="password"],
body.light input[type="number"],
body.light input[type="tel"],
body.light input[type="date"],
body.light input[type="time"],
body.light input.flatpickr-input,
body.light input.flatpickr-altInput,
body.light select,
body.light textarea{
  background:rgba(248, 250, 252, 0.98);
  color:#0f172a;
  border-color:rgba(15, 23, 42, 0.22);
}
body.light input::placeholder,
body.light textarea::placeholder{ color:rgba(15, 23, 42, 0.45); }

.two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media(max-width:720px){
  .two-col{ grid-template-columns:1fr; }
}

/* --------------------
   TABS
-------------------- */
.tabs-bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 0;
  border-bottom:1px solid rgba(148, 163, 184, 0.25);
}
body.light .tabs-bar{ border-bottom:1px solid rgba(15, 23, 42, 0.14); }

.tab-btn{
  border-radius:999px;
  border:0;
  padding:7px 13px;
  font-size:13px;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  white-space:nowrap;
}
.tab-btn.active{
  background:rgba(15, 23, 42, 0.90);
  color:var(--accent);
  border:1px solid rgba(148, 163, 184, 0.50);
}
body.light .tab-btn.active{
  background:rgba(15, 23, 42, 0.06);
  color:#0f172a;
  border:1px solid rgba(15, 23, 42, 0.18);
}

/* --------------------
   PANELS / CARDS (with shimmer)
-------------------- */
.tab-panels{ margin-top:12px; }

/* Tab panels: toggle visibility via the `active` class (JS toggles this) */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Ledger / Vault workspace — match Saved Runs style (no tabs) */
#sheetLedger .ledger-actions-row{ display:flex; gap:10px; margin-top:12px; }
#sheetLedger .ledger-actions-row .btn{ flex:1; }

.panel{
  position:relative;
  border-radius:var(--radius-lg);
  padding:16px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 40%),
    var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:var(--shimmer);
}

.panel h2{ margin:0 0 4px; font-size:17px; }

.panel-sub{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed rgba(148, 163, 184, 0.35);
}
body.light .panel-sub{ border-top:1px dashed rgba(15, 23, 42, 0.22); }

.panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
@media(max-width:720px){
  .panel-header{ flex-direction:column; align-items:flex-start; }
}

.panel-footer-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(148, 163, 184, 0.20);
}
body.light .panel-footer-actions{ border-top:1px solid rgba(15, 23, 42, 0.12); }

/* --------------------
   RESULTS
-------------------- */
.results-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
@media(max-width:960px){
  .results-grid{ grid-template-columns:1fr; }
}

.results-card{
  position:relative;
  border-radius:var(--radius-md);
  padding:10px 11px;
  background:radial-gradient(circle at top left, rgba(15,23,42,0.95), rgba(15,23,42,1));
  border:1px solid var(--border-strong);
  overflow:hidden;
}
.results-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:var(--shimmer);
}
body.light .results-card{
  background:rgba(255,255,255,0.92);
  box-shadow:var(--shadow-2);
}

.results-card h3{ margin:0 0 6px; font-size:14px; }
.result-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:3px 0;
  color:var(--muted);
}
.result-row strong{ color:var(--text); }

/* --------------------
   VERDICTS
-------------------- */
.verdict{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
.verdict-neutral{
  background:rgba(15, 23, 42, 0.70);
  color:var(--muted);
  border:1px solid rgba(148, 163, 184, 0.40);
}
body.light .verdict-neutral{
  background:rgba(15, 23, 42, 0.04);
  color:rgba(15, 23, 42, 0.70);
  border:1px solid rgba(15, 23, 42, 0.12);
}
.verdict-good{ background:rgba(22, 163, 74, 0.15); color:#4ade80; border:1px solid rgba(34, 197, 94, 0.50); }
.verdict-warn{ background:rgba(245, 158, 11, 0.15); color:#facc15; border:1px solid rgba(245, 158, 11, 0.60); }
.verdict-bad{ background:rgba(239, 68, 68, 0.15); color:#fca5a5; border:1px solid rgba(239, 68, 68, 0.60); }

/* --------------------
   ROUTE BUILDER
-------------------- */
.route-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }

.stops{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }

.stop{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  padding:10px;
  background:var(--card-soft);
}
body.light .stop{ background:rgba(255,255,255,0.86); }

.stop-header{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.stop-meta{ font-size:11px; color:var(--muted); }

.stop-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
}
@media(max-width:800px){
  .stop-grid{ grid-template-columns:1fr; }
}

.stop-footer{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; }

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  background:rgba(15, 23, 42, 0.80);
  color:var(--muted);
}
body.light .chip{
  background:rgba(15, 23, 42, 0.06);
  color:rgba(15, 23, 42, 0.70);
  border:1px solid rgba(15, 23, 42, 0.12);
}

.map-wrap{
  margin-top:12px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  height:220px;
}

/* --------------------
   FUEL MODES / PILLS
-------------------- */
.fuel-mode-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.radio{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }

.pill-value{
  border-radius:999px;
  padding:7px 12px;
  border:1px solid var(--border-strong);
  font-size:13px;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  background:rgba(15,23,42,0.22);
}
body.light .pill-value{ background:rgba(255,255,255,0.85); }

/* --------------------
   PRICING CARDS
-------------------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:8px;
}
@media(max-width:960px){ .pricing-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media(max-width:720px){ .pricing-grid{ grid-template-columns:1fr; } }

.pricing-card{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--card-soft);
  padding:8px;
  display:flex;
  gap:8px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.pricing-card:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}
body.light .pricing-card:hover{
  border-color:#0f172a;
  background:#f8fafc;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

.pricing-card input[type="radio"]{ margin-top:4px; }
.pricing-body{ flex:1; }
.pricing-body h4{ margin:0; font-size:14px; }
.pricing-body p{ margin:3px 0 6px; }
.field-group.compact{ margin-top:6px; }

/* --------------------
   BANNER
-------------------- */
.banner{
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(245, 158, 11, 0.18);
  border:1px solid rgba(245, 158, 11, 0.70);
  color:#fef9c3;
  font-size:13px;
}

/* --------------------
   SIDE MENU
-------------------- */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, 0.70);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease-out;
  z-index:70;
}
.backdrop.show{ opacity:1; pointer-events:auto; }
body.light .backdrop{ background:rgba(15, 23, 42, 0.35); }

.side-menu {
  position: fixed;
  top: 0;
  right: -320px;
  bottom: 0;
  width: 320px;
  max-width: 80%;
  z-index: 80;
  padding: 14px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: right .22s cubic-bezier(.2,.9,.3,1);

  border-left: 1px solid var(--border);
  
  /* FIXED: Use neutral black shadow instead of blue */
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.6); 
  
  /* FIXED: Use the variable so it matches the rest of the app */
  background: var(--glass-surface);
  
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.side-menu.open{ right:0; }

body.light .side-menu{
  background:rgba(255,255,255,0.90);
  box-shadow:-22px 0 60px rgba(15, 23, 42, 0.18);
  border-left:1px solid rgba(15, 23, 42, 0.16);
}

.side-menu-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.side-menu-sections{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }

.menu-item{
  width:100%;
  text-align:left;
  border-radius:var(--radius-md);
  padding:8px 10px;
  border:1px solid var(--border-strong);
  background:rgba(15, 23, 42, 0.95);
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
/* Neutral Hover for Side Menu (Clean Glass, No Green) */
.menu-item:hover {
  border-color: rgba(255, 255, 255, 0.3);       /* Brightens the border slightly */
  background: rgba(255, 255, 255, 0.08);       /* Subtle white tint */
  color: #ffffff;                              /* Pure white text */
  transform: translateX(4px);                  /* Keep the slide effect */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active state for side menu items (clear enterprise rail) */
.menu-item.active {
  background: rgba(255,255,255,0.08);
  border-left: 3px solid rgba(255,255,255,0.85);
  padding-left: calc(1rem - 3px);
}

/* Ensure the danger button (Sign Out) still turns red */
.menu-item.danger:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

body.light .menu-item{
  background:rgba(255,255,255,0.90);
  color:#0f172a;
  border-color:rgba(15, 23, 42, 0.16);
}
body.light .menu-item:hover{
  border-color:#0f172a;
  background:#f8fafc;
  color:#0f172a;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

/* Sign out sits lower, clearly separated from Support */
.menu-signout{
  margin-top:16px;
}

/* ONE divider: between Sign out and footer */
.side-menu-divider{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(148, 163, 184, 0.35);
}
body.light .side-menu-divider{
  border-top:1px dashed rgba(15, 23, 42, 0.20);
}

/* Footer is informational only */
/* Sign out eats the empty vertical space, pushing it to the bottom */
.menu-signout {
  margin-top: auto; 
}

/* Footer just sits naturally below the sign out button now */
.side-menu-footer {
  margin-top: 0; 
  padding-top: 12px;
  border-top: none;
}


.menu-close-icon{
  width:36px;
  height:36px;
  display:block;
}

.sheet{
  position: relative; /* so the button can anchor */
}

.sheet-back-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.sheet h2{
  padding-right: 58px; /* prevents title from sitting under the button */
}

/* Prevent top-right sheet back chevron from covering header actions (Export, etc.) */
.sheet-header-row{
  padding-right: 64px; /* clears the absolute-position back button */
}

@media(max-width:720px){
  .sheet-header-row{
    padding-right: 56px;
  }
}

:root{
  /* solid paint for iOS safe-area (dark default) */
  --safe-area-bg: #020617; /* matches your deep slate */
}

body.light{
  --safe-area-bg: #f8fafc; /* matches your paper */
}

/* --------------------
   SHEETS
-------------------- */
:root{
  --menuW: 320px;
  --menuOverlap: 10px; /* sheet overlaps menu by 10px */
}

/* ===========================
   Receipt detail — Fields (match Route & Load sizing)
   =========================== */

#sheetReceiptDetail .rcptFieldsCard > .small.muted{
  margin-bottom: 12px !important;
}

/* Slightly larger controls in Receipt sheet (desktop) so it matches the app feel */
#sheetReceiptDetail .rcptFieldsCard input.input,
#sheetReceiptDetail .rcptFieldsCard select.input,
#sheetReceiptDetail .rcptFieldsCard textarea.input{
  font-size: 15px;
  padding: 10px 12px;
  border-color: var(--border-strong); /* keep standard borders (no “black board”) */
}

/* Ensure rows behave consistently */
#sheetReceiptDetail .rcptFieldsCard .row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

/* Mobile: stack cleanly + iOS-friendly input sizing (prevents zoom) */
@media (max-width: 720px){
  #sheetReceiptDetail .rcptFieldsCard .row{
    flex-direction:column;
    gap:10px;
  }

  #sheetReceiptDetail .rcptFieldsCard input.input,
  #sheetReceiptDetail .rcptFieldsCard select.input,
  #sheetReceiptDetail .rcptFieldsCard textarea.input{
    font-size: 16px;     /* iOS minimum to prevent focus zoom */
    padding: 12px 14px;  /* better touch target */
  }
}


/* RIGHT SLIDE-OUT SHEETS (G6 primary workspaces) */
.sheet{
  position: fixed;
  top: 0;
  bottom: 0;

  /* default: slide from right edge */
  right: 0;

  /* width: cap at 860, but fill available */
  width: min(860px, calc(100% - 28px));
  max-width: calc(100% - 14px);

  overflow: auto;
  z-index: 90;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));

  border-radius: 24px 0 0 24px;

  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.78);
  box-shadow: -22px 0 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);

  /* hidden state */
  transform: translateX(105%);
  opacity: 0;
  pointer-events: none;

  transition: transform .22s cubic-bezier(.2,.9,.3,1), opacity .16s ease-out;
}

/* When menu is open, dock sheet to the LEFT of the menu,
   overlapping the menu by 10px */
body.menu-open .sheet{
  right: calc(var(--menuW) - var(--menuOverlap));
  width: min(860px, calc(100% - var(--menuW) + var(--menuOverlap) - 28px));
  max-width: calc(100% - (var(--menuW) - var(--menuOverlap)));
}

.sheet.open{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Light mode tuning */
body.light .sheet{
  background: rgba(255,255,255,0.94);
  box-shadow: -22px 0 70px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(15, 23, 42, 0.16);
}

/* Light mode: match back chevron color to menu chevron */
body.light .sheet-back-btn {
  color: #0f172a; /* same obsidian tone as right chevron */
  border-color: rgba(15, 23, 42, 0.22);
}

body.light .sheet-back-btn svg {
  stroke: #0f172a;
  fill: none;
}

@media (max-width: 640px){
  body.menu-open .sheet{
    right: 0 !important;
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
  }
}

/* MOBILE: keep sheet chevron visible and tappable */
@media (max-width: 640px) {
  .sheet-back-btn {
    top: calc(env(safe-area-inset-top, 12px) + 12px);
    right: 12px;
    position: fixed;
    z-index: 200;
  }
}

@media (max-width: 640px) {
  .sheet h2,
  .sheet h1 {
    padding-right: 64px;
  }
}

/* --------------------
   FLEET COMMAND
-------------------- */
.fleet-list{ display:flex; flex-direction:column; gap:10px; }

.fleet-card{
  position:relative;
  border-radius:18px;
  padding:12px 12px;
  border:1px solid var(--border);
  background:rgba(15, 23, 42, 0.70);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.fleet-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:var(--shimmer);
  opacity:0.7;
}
body.light .fleet-card{
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(15, 23, 42, 0.16);
}
.fleet-card.active{
  border-color:rgba(56, 189, 248, 0.55);
  box-shadow:0 16px 45px rgba(56, 189, 248, 0.10);
}
body.light .fleet-card.active{
  border-color:rgba(15, 23, 42, 0.35);
  box-shadow:0 16px 45px rgba(15, 23, 42, 0.12);
}

.fleet-card-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.fleet-info{ flex:1; min-width:0; }
.fleet-nick{
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.light .fleet-nick{ color:#0f172a; }
.fleet-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fleet-edit-btn{
  border:1px solid var(--border-strong);
  background:rgba(15, 23, 42, 0.70);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fleet-edit-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
  border-color:rgba(56, 189, 248, 0.55);
}
body.light .fleet-edit-btn{
  background:#ffffff;
  color:#0f172a;
  border:1px solid rgba(15, 23, 42, 0.20);
}

/* THE SELECTOR CIRCLE (Unselected) */
.fleet-select-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;       /* Light Grey Border */
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* HOVER STATE */
.fleet-select-circle:hover {
  border-color: #0f172a;           /* Turns Black on Hover */
  transform: scale(1.1);
}

/* THE ACTIVE STATE (Selected) */
.fleet-card.active .fleet-select-circle {
  border-color: #0f172a;           /* Black Border */
  background: #0f172a;             /* Solid Black Fill */
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15); /* Subtle Ring Glow */
}

.fleet-stats{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.stat-box{
  flex:1;
  border-radius:14px;
  padding:10px 10px;
  border:1px solid rgba(148, 163, 184, 0.22);
  background:rgba(2, 6, 23, 0.35);
}
body.light .stat-box{
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(15, 23, 42, 0.12);
}
.stat-label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
.stat-val{
  font-weight:800;
  letter-spacing:-0.02em;
}
/* --------------------
   LISTS
-------------------- */
.list{ display:flex; flex-direction:column; gap:6px; }

.list-item{
  padding:7px 10px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  background:var(--card-soft);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  font-size:13px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.list-item:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}
body.light .list-item{ background:rgba(255,255,255,0.86); }
body.light .list-item:hover{
  border-color:#0f172a;
  background:#f8fafc;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

.list.subtle > div,
.list.subtle > button{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--card-soft);
  padding:8px 10px;
}
body.light .list.subtle > div,
body.light .list.subtle > button{
  background:rgba(255,255,255,0.86);
}

/* --------------------
   TOAST
-------------------- */
.toast{
  position:fixed;
  left:50%;
  bottom:-80px;
  transform:translateX(-50%);
  border-radius:999px;
  padding:7px 14px;
  font-size:13px;
  color:var(--text);
  border:1px solid var(--border-strong);
  background:rgba(15, 23, 42, 0.96);
  box-shadow:var(--shadow-2);
  z-index:100;
  opacity:0;
  transition:bottom .2s ease-out, opacity .2s ease-out;
}
.toast.show{ bottom:18px; opacity:1; }

body.light .toast {
  background: rgba(255, 255, 255, 0.96); /* White glass */
  color: #0f172a; /* Dark text */
  border: 1px solid rgba(15, 23, 42, 0.15);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15); /* Softer shadow */
}

/* --------------------
   MISC
-------------------- */
.inline-btns{ display:flex; flex-wrap:wrap; gap:8px; }

/* Saved Runs: layout + artifacts dropdown */
#historyList .push-right{ margin-left:auto; }

/* ✅ Saved Runs actions: mobile layout that never produces an orphan "Delete" button */
@media (max-width: 520px) {
  #historyList .run-actions {
    display: grid;                      /* switch from flex-wrap to grid on mobile */
    grid-template-columns: 1fr 1fr 1fr; /* 3-up grid fits your small buttons well */
    gap: 10px;
    align-items: stretch;
  }

  #historyList .run-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  /* Delete should ALWAYS be a clean full-width last row */
  #historyList .run-actions [data-action="delete"] {
    grid-column: 1 / -1;
    margin-left: 0 !important; /* neutralize push-right on mobile */
  }

  /* Also neutralize any lingering push-right behavior in this grid */
  #historyList .run-actions .push-right {
    margin-left: 0 !important;
  }
}

/* Artifacts panel */
#historyList .artifacts-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
#historyList .artifacts-panel.hidden{ display:none; }
/* ✅ Artifacts panel: balanced 3x2 grid on mobile */
@media (max-width: 520px) {
  #historyList .artifacts-panel .inline-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px;
  }

  #historyList .artifacts-panel .inline-btns .btn {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;     /* slightly tighter for 3-column fit */
    white-space: nowrap;
  }
}
/* ✅ Artifacts panel: balanced 3x2 grid on mobile */
@media (max-width: 520px) {
  #historyList .artifacts-panel .inline-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px;
  }

  #historyList .artifacts-panel .inline-btns .btn {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;     /* slightly tighter for 3-column fit */
    white-space: nowrap;
  }
}
/* Saved Runs: semantic borders */
#historyList .btn.run-green{
  border:1px solid rgba(34,197,94,.70) !important;
  color: var(--success) !important;
}
#historyList .btn.run-green:hover{
  border-color: rgba(34,197,94,.95) !important;
}

#historyList .btn.run-red{
  border:1px solid rgba(239,68,68,.70) !important;
  color: var(--danger) !important;
}
#historyList .btn.run-red:hover{
  border-color: rgba(239,68,68,.95) !important;
}

/* --------------------
   LIGHT MODE: your specific callouts
-------------------- */

/* Bid slider */
body.light #bidMarginSlider{ accent-color:#0f172a !important; }

/* Show steps + primary buttons */
body.light #toggleBreakdown,
body.light .btn.primary{
  background:#0f172a !important;
  color:#ffffff !important;
  border:1px solid #0f172a !important;
}

/* Negotiation coach glass tint */
body.light .coach-container{
  background:rgba(15, 23, 42, 0.04) !important;
  border-color:rgba(15, 23, 42, 0.10) !important;
  color:#0f172a !important;
}

/* Kill lingering cyan glow from inline text-shadows inside bid calc */
body.light #bidCalculatorCard div[style*="text-shadow"]{
  text-shadow:0 0 24px rgba(15, 23, 42, 0.18) !important;
}

/* =========================================================
   OVERVIEW (MOCK LAYOUT)  scoped to Overview tab only
   This is presentation-only and should not affect other tabs.
========================================================= */

#tab-overview .overview-panel{ padding:18px; }

#tab-overview .overview-hero{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:16px;
  padding:16px;
  border:1px solid var(--accent-soft);
  border-radius:16px;
  background:var(--card);
  box-shadow: var(--shadow);
}

#tab-overview .overview-hero-label{
  font-weight:700;
  font-size:14px;
  letter-spacing:0.2px;
  color:var(--text);
}

#tab-overview .overview-hero-sub{ margin-top:6px; }

#tab-overview .overview-hero-controls,
#tab-overview .overview-hero-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}

#tab-overview .pay-input{
  position:relative;
  height:42px;
}
#tab-overview .pay-input input{
  width:100%;
  height:100%;
  padding-left:26px;
  font-weight:800;
}
#tab-overview .pay-symbol{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:0.65;
  font-weight:800;
  color:var(--text);
}

#tab-overview .btn.danger{
  color:#ef4444;
  border-color: rgba(239,68,68,0.30);
}

#tab-overview .overview-hero-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
}

#tab-overview .overview-hero-profit{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

#tab-overview .hero-profit-value{
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.5px;
  color:var(--text);
}

#tab-overview .hero-profit-chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--accent-soft);
  background:rgba(0,0,0,0.14);
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}

#tab-overview .kpi-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}

#tab-overview .kpi-card{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--accent-soft);
  background:var(--card);
  box-shadow: var(--shadow);
}

#tab-overview .kpi-value{
  font-size:20px;
  font-weight:900;
  color:var(--text);
}

#tab-overview .kpi-label{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

#tab-overview .analysis-card{
  margin-top:12px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--accent-soft);
  background:var(--card);
  box-shadow: var(--shadow);
}

#tab-overview .analysis-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

#tab-overview .analysis-route{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--accent-soft);
  background:rgba(0,0,0,0.14);
}

#tab-overview .analysis-route-title{
  font-weight:800;
  font-size:18px;
}

#tab-overview .analysis-route-meta{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#tab-overview .analysis-route-meta .dot{ opacity:0.6; }

#tab-overview .analysis-breakdown{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  margin-top:12px;
}

#tab-overview .analysis-col{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--accent-soft);
  background:rgba(0,0,0,0.10);
}

#tab-overview .analysis-col-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

#tab-overview .analysis-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dashed rgba(148,163,184,0.25);
}
#tab-overview .analysis-row:last-child{ border-bottom:none; }

#tab-overview .analysis-ppm{
  font-size:30px;
  font-weight:900;
  margin-bottom:8px;
}

#tab-overview .analysis-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--accent-soft);
}

#tab-overview .overview-details{ margin-top:12px; }

@media (max-width: 900px){
  #tab-overview .overview-hero{ grid-template-columns: 1fr; }
  #tab-overview .overview-hero-right{ align-items:flex-start; }
  #tab-overview .analysis-breakdown{ grid-template-columns: 1fr; }
  #tab-overview .kpi-row{ grid-template-columns: 1fr; }
}

/* ============================
   CALC BREAKDOWN (Crunch steps)
============================ */

.calc-breakdown-card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.calc-breakdown-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.calc-breakdown-body{
  display:none;               /* hidden until "Show steps" */
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.18);
}

.calc-breakdown-body.open{
  display:block;
}

.breakdown-step{
  padding: 12px 0;
  border-top: 1px dashed rgba(148,163,184,0.18);
}

.breakdown-step:first-child{
  border-top: none;
  padding-top: 0;
}

.breakdown-header{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.breakdown-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding: 3px 0;
}

.bd-label{
  color: var(--text);
  opacity: 0.85;
}

.bd-val{
  min-width: 120px;
  text-align:right;
  font-weight: 700;
  color: var(--text);
}

.breakdown-row.strong .bd-label{
  opacity: 0.95;
  font-weight: 700;
}

.breakdown-row.strong .bd-val{
  color: var(--success);
  font-weight: 800;
}

.breakdown-subtotal{
  margin-top: 8px;
  text-align:right;
  font-size: 12px;
  color: var(--muted);
}

.breakdown-step.final{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  background: var(--card-soft);
}


/* ==========================================================
   MOCK MATCH PASS  Graphite Glass (Dark default) + Slate/Paper (Light)
   Goal: match reference mock styling WITHOUT changing IDs/JS.
   ========================================================== */

/* ---- Core tokens (authoritative) ---- */
/* (tokens consolidated above; removed duplicate :root block) */


/* ---- Page background ---- */
body{
  font-family: var(--font);
}

body:not(.light){
  color: var(--d-text);
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(125,211,252,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(125,211,252,.06), transparent 60%),
    radial-gradient(900px 700px at 20% 0%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, var(--d-bg1) 0%, var(--d-bg0) 55%, #05070f 100%);
}

body.light{
  color: var(--l-text);
  background:
    radial-gradient(900px 520px at 25% 0%, rgba(15,23,42,.05), transparent 55%),
    linear-gradient(180deg, var(--l-bg0) 0%, var(--l-bg1) 100%) !important;
}

/* ---- App shell (topbar + tabs) ---- */
body:not(.light) .topbar{
  background: transparent;
  border-bottom: 1px solid rgba(148,163,184,.10);
  padding-top: env(safe-area-inset-top, 0px);
}
body.light .topbar{
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.10);
}

body:not(.light) .tabs-bar{
  background: transparent;
  border-bottom: 1px solid rgba(148,163,184,.10);
  padding-bottom: 10px;
}
body.light .tabs-bar{
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.10);
  padding-bottom: 10px;
}

/* Tabs: mock-style underline (no pill) */
body:not(.light) .tab-btn,
body.light .tab-btn{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  padding: 10px 6px !important;
  letter-spacing: .2px;
}
body:not(.light) .tab-btn{ color: rgba(231,237,246,.72) !important; }
body.light .tab-btn{ color: rgba(15,23,42,.68) !important; }

body:not(.light) .tab-btn:hover{ color: rgba(231,237,246,.92) !important; }
body.light .tab-btn:hover{ color: rgba(15,23,42,.90) !important; }

body:not(.light) .tab-btn.active,
body.light .tab-btn.active{
  color: inherit !important;
}
body:not(.light) .tab-btn.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-12px;
  height:2px;
  border-radius: var(--r-pill);
  background: rgba(125,211,252,.85);
  box-shadow: 0 0 18px rgba(125,211,252,.35);
}
body.light .tab-btn.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-12px;
  height:2px;
  border-radius: var(--r-pill);
  background: rgba(15,23,42,.70);
}

/* ---- Cards / panels (glass) ---- */
body:not(.light) .panel,
body:not(.light) .results-card,
body:not(.light) .analysis-card,
body:not(.light) .overview-hero,
body:not(.light) #workspaceDashboard .dashboard-hero,
body:not(.light) #workspaceDashboard .dash-kpi-card,
body:not(.light) #workspaceDashboard .dash-signal-card{
  position: relative;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(125,211,252,.08), transparent 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, rgba(17,24,39,.72) 0%, rgba(17,24,39,.48) 100%) !important;
  border: 1px solid var(--d-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(10px) saturate(120%);
}
body:not(.light) .panel::before,
body:not(.light) .results-card::before,
body:not(.light) .analysis-card::before,
body:not(.light) .overview-hero::before,
body:not(.light) #workspaceDashboard .dashboard-hero::before,
body:not(.light) #workspaceDashboard .dash-kpi-card::before,
body:not(.light) #workspaceDashboard .dash-signal-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(900px 520px at 50% 0%, rgba(125,211,252,.08), transparent 60%);
  opacity:.9;
}

body.light .panel,
body.light .results-card,
body.light .analysis-card,
body.light .overview-hero,
body.light #workspaceDashboard .dashboard-hero,
body.light #workspaceDashboard .dash-kpi-card,
body.light #workspaceDashboard .dash-signal-card{
  /* Paper + glass + obsidian: keep depth without looking “boxed†*/
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(15,23,42,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.92) 100%);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius-lg);
  box-shadow:
    0 18px 50px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* ---- Overview hero: make it feel like the mock ---- */
body:not(.light) .overview-hero-label{
  color: rgba(231,237,246,.88);
}
body:not(.light) .overview-hero-sub{
  color: rgba(154,167,182,.82);
}
body:not(.light) .hero-profit-value{
  color: rgba(231,237,246,.96);
  text-shadow: 0 0 24px rgba(125,211,252,.12);
}
body:not(.light) .hero-profit-chip{
  border: 1px solid rgba(125,211,252,.22);
  background: rgba(17,24,39,.55);
  color: rgba(231,237,246,.80);
  border-radius: var(--r-pill);
}

/* Verdict pill */
body:not(.light) .badge,
body:not(.light) #verdictBadge{
  background: rgba(17,24,39,.58) !important;
  border: 1px solid rgba(125,211,252,.28) !important;
  color: rgba(231,237,246,.90) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 0 22px rgba(125,211,252,.12);
}
body.light .badge,
body.light #verdictBadge{
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.85) !important;
  border-radius: var(--r-pill) !important;
}

/* ---- KPI tiles ---- */
body:not(.light) .kpi-tile{
  background: rgba(17,24,39,.50) !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  border-radius: var(--r-md) !important;
}
body:not(.light) .kpi-value{ color: rgba(231,237,246,.94); }
body:not(.light) .kpi-label{ color: rgba(154,167,182,.82); }

body.light .kpi-tile{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: var(--r-md) !important;
}
body.light .kpi-value{ color: rgba(15,23,42,.92); }
body.light .kpi-label{ color: rgba(82,98,122,.82); }

/* ---- Profit Analysis ---- */
body:not(.light) .analysis-card-header h3{ color: rgba(231,237,246,.92); }
body:not(.light) .analysis-route-title{ color: rgba(231,237,246,.92); }
body:not(.light) .analysis-route-meta{ color: rgba(154,167,182,.85); }
body:not(.light) .analysis-col-title{ color: rgba(154,167,182,.80); letter-spacing:.12em; text-transform: uppercase; font-size: 12px; }
body:not(.light) .analysis-row{ border-top: 1px solid rgba(148,163,184,.10); }
body:not(.light) .analysis-row strong{ color: rgba(231,237,246,.92); }

/* ---- Buttons ---- */
body:not(.light) .btn,
body:not(.light) button.btn{
  border-radius: var(--r-pill) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  background: rgba(17,24,39,.45) !important;
  color: rgba(231,237,246,.92) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
body:not(.light) .btn:hover{ border-color: rgba(125,211,252,.30) !important; transform: translateY(-1px); }

body:not(.light) .btn.primary,
body:not(.light) .btn-primary,
body:not(.light) .primary{
  background: linear-gradient(180deg, rgba(125,211,252,.28), rgba(125,211,252,.12)) !important;
  border: 1px solid rgba(125,211,252,.32) !important;
  color: rgba(231,237,246,.95) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.30), 0 0 22px rgba(125,211,252,.10);
}

body.light .btn,
body.light button.btn{
  border-radius: var(--r-pill) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.86) !important;
  color: rgba(15,23,42,.90) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

/* Icon buttons (menu dots) */
body:not(.light) .icon-btn{
  background: rgba(17,24,39,.45) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: rgba(231,237,246,.78) !important;
  border-radius: var(--r-pill) !important;
}
body.light .icon-btn{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.70) !important;
  border-radius: var(--r-pill) !important;
}

body.light #btnOpenMenu{
  color:#0f172a !important;
}

/* ---- Inputs ---- */
body:not(.light) input[type="text"],
body:not(.light) input[type="number"],
body:not(.light) input[type="email"],
body:not(.light) input[type="password"],
body:not(.light) input[type="tel"],
body:not(.light) input[type="date"],
body:not(.light) input[type="time"],
body:not(.light) input.flatpickr-input,
body:not(.light) input.flatpickr-altInput,
body:not(.light) select,
body:not(.light) textarea{
  background: rgba(17,24,39,.55) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: rgba(231,237,246,.92) !important;
  border-radius: var(--r-md) !important;
}
body:not(.light) input::placeholder,
body:not(.light) textarea::placeholder{
  color: rgba(154,167,182,.70) !important;
}

body.light input[type="text"],
body.light input[type="number"],
body.light input[type="email"],
body.light input[type="password"],
body.light input[type="tel"],
body.light input[type="date"],
body.light input[type="time"],
body.light input.flatpickr-input,
body.light input.flatpickr-altInput,
body.light select,
body.light textarea{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.92) !important;
  border-radius: var(--r-md) !important;
}

/* ---- Reduce harsh dividers ---- */
body:not(.light) .muted{ color: rgba(154,167,182,.85) !important; }
body.light .muted{ color: rgba(82,98,122,.86) !important; }

/* ==========================================================
   LIGHT MODE RESTORATION: OBSIDIAN & PAPER
   "The Classy Fix" - No More Green
   ========================================================== */

/* (removed duplicate light token override block) */


/* 2. INTERACTIVE INPUTS (Obsidian Focus) */
body.light input:focus, 
body.light select:focus, 
body.light textarea:focus {
  border-color: #0f172a !important;         /* Black border */
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important; /* Subtle grey ring */
  background: #ffffff !important;
}

/* 3. INTERACTIVE CARDS (The "Hover" You Wanted) */
/* Load Pricing Cards & Stops */
body.light .pricing-card,
body.light .stop {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid #e2e8f0 !important;
}

body.light .pricing-card:hover,
body.light .stop:hover {
  transform: translateY(-2px) !important;
  border-color: #0f172a !important;         /* Turns Obsidian on hover */
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important; /* Deep luxury shadow */
  background: #ffffff !important;           /* Keep it clean white */
}

/* 4. BUTTONS: OBSIDIAN STYLE */
/* Primary buttons become solid black */
body.light .btn.primary {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
body.light .btn.primary:hover {
  background: #334155 !important; /* Dark Grey hover */
  transform: translateY(-1px) !important;
}

/* Ghost buttons become clear with black text */
body.light .btn.ghost,
body.light #btnAddStop {
  color: #0f172a !important;

/* Compact, scrollable fuel state selector */
#fuelStateSearch{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  margin-bottom:6px;
}

#fuelStateSelect{
  max-height: 220px; /* visual cap when the control is rendered as a list */
  overflow-y: auto;
  font-size: 14px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

/* Slim custom scroll for webkit browsers */
#fuelStateSelect::-webkit-scrollbar, #fuelStateSearch::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#fuelStateSelect::-webkit-scrollbar-thumb, #fuelStateSearch::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
}
  border-color: #cbd5e1 !important;
  background: transparent !important;
}
body.light .btn.ghost:hover,
body.light #btnAddStop:hover {
  border-color: #0f172a !important;
  background: rgba(15, 23, 42, 0.05) !important; /* Subtle grey tint */
  color: #0f172a !important;
}

/* 5. ACTIVE STATES (Tabs & Toggles) */
body.light .tab-btn.active {
  color: #0f172a !important;
}
body.light .tab-btn.active::after {
  background: #0f172a !important; /* Black underline */
  box-shadow: none !important;
}

/* --- AUTH SCREEN LOGO (Landing Page) --- */
.auth-logo-img {
  height: 42px; /* HUGE on Mac */
  width: auto;
  object-fit: contain;
  margin-bottom: 20px;
}

/* --- APP HEADER LOGO (Top Bar) --- */
.responsive-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* --- MOBILE OVERRIDES (iPhone) --- */
@media (max-width: 600px) {
  .auth-logo-img {
    height: 45px; /* Smaller on phone so it fits */
  }
  .responsive-logo {
    height: 38px; /* Standard mobile navbar size */
  }
}

/* ==========================================================
   LIGHT MODE — DEPTH + INPUT CLARITY (EXCEPT OVERVIEW)
   Scope: Route + Vehicle + Profit tabs only
   Paste at VERY BOTTOM of styles.css
========================================================== */

/* 1) Give panels/cards more “lift” (shadow) */
body.light #tab-route .panel,
body.light #tab-vehicle .panel,
/* Profit Center uses its own card art (.pc-panel). Don't override it here. */
body.light #tab-profit .panel:not(.pc-panel){
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 18px 55px rgba(15,23,42,0.12) !important;
}

/* Any card-like blocks inside those tabs */
body.light #tab-route .results-card,
body.light #tab-vehicle .results-card,
body.light #tab-profit .results-card,
body.light #tab-route .card,
body.light #tab-vehicle .card,
body.light #tab-profit .card{
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.10) !important;
}

/* 2) Lists / rows (Profit Center run history looks flat) */
body.light #tab-profit .run-item,
body.light #tab-profit .saved-run,
body.light #tab-profit .list-item,
body.light #tab-profit .row{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.08) !important;
}

/* 3) Inputs: stronger “paper†+ readable borders */
body.light #tab-route input,
body.light #tab-route select,
body.light #tab-route textarea,
body.light #tab-vehicle input,
body.light #tab-vehicle select,
body.light #tab-vehicle textarea,
body.light #tab-profit input,
body.light #tab-profit select,
body.light #tab-profit textarea{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
}

body.light #tab-route input:focus,
body.light #tab-route select:focus,
body.light #tab-route textarea:focus,
body.light #tab-vehicle input:focus,
body.light #tab-vehicle select:focus,
body.light #tab-vehicle textarea:focus,
body.light #tab-profit input:focus,
body.light #tab-profit select:focus,
body.light #tab-profit textarea:focus{
  outline: none !important;
  border-color: rgba(15,23,42,0.45) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.12), 0 10px 22px rgba(15,23,42,0.08) !important;
}

/* 4) Outlined buttons (Reject/Clear style) — make them bold/intentional */
body.light #tab-route button:not(.btn-primary):not(.primary),
body.light #tab-vehicle button:not(.btn-primary):not(.primary),
body.light #tab-profit button:not(.btn-primary):not(.primary){
  border-color: rgba(15,23,42,0.22);
}

body.light #tab-route .btn-outline,
body.light #tab-vehicle .btn-outline,
body.light #tab-profit .btn-outline,
body.light #tab-route .btn-ghost,
body.light #tab-vehicle .btn-ghost,
body.light #tab-profit .btn-ghost{
  background: rgba(255,255,255,0.80) !important;
  color: rgba(15,23,42,0.90) !important;
  border: 1px solid rgba(15,23,42,0.22) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.08) !important;
}

body.light #tab-route .btn-outline:hover,
body.light #tab-vehicle .btn-outline:hover,
body.light #tab-profit .btn-outline:hover,
body.light #tab-route .btn-ghost:hover,
body.light #tab-vehicle .btn-ghost:hover,
body.light #tab-profit .btn-ghost:hover{
  background: rgba(15,23,42,0.05) !important;
  border-color: rgba(15,23,42,0.30) !important;
}

/* 5) Specifically strengthen Reject + Clear if they’re still “too transparent†*/
body.light #btnReject,
body.light #btnClear,
body.light #rejectBtn,
body.light #clearBtn{
  background: rgba(255,255,255,0.82) !important;
  color: rgba(15,23,42,0.92) !important;
  border: 1px solid rgba(15,23,42,0.26) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10) !important;
}
body.light #btnReject:hover,
body.light #btnClear:hover,
body.light #rejectBtn:hover,
body.light #clearBtn:hover{
  background: rgba(15,23,42,0.06) !important;
  border-color: rgba(15,23,42,0.34) !important;
}

/* Hides scrollbar on the tabs bar specifically */
.tabs-bar {
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}
.tabs-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ===== iOS SAFARI WHITE BAR FIX ===== */

/* Force background all the way into iOS safe areas */
html {
  background: var(--page-bg);
}

/* Lock body to viewport + safe areas */
body {
  min-height: 100svh;        /* NEW dynamic viewport unit */
  min-height: -webkit-fill-available;
  background: var(--page-bg);
}

/* iOS safe-area: do NOT pad the whole body (breaks fixed UI). We paint instead. */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-clip: border-box !important;
  }
}

html, body {
  overscroll-behavior: none;
}

/* ==============================
   FINAL FIXES (Menu, Slider, Scroll)
   ============================== */

/* 1. Menu Icon: Transparent & Big */
#btnOpenMenu {
  background: transparent !important;
  border: none !important;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
@media (min-width: 768px) {
  #btnOpenMenu {
    transform: scale(1.15); /* Bigger on desktop */
    margin-left: 10px;
  }
}

/* 3. GREEN SLIDER (Money Mode) */
input[type=range] {
  -webkit-appearance: none; /* Chrome, Safari, Opera */
  appearance: none;         /* Standard / Firefox */
  width: 100%;
  background: transparent;
  margin: 10px 0;
  accent-color: var(--accent) !important;
  cursor: pointer;
}

/* 3. Hide Scrollbars & Fix Cut-off */
.side-menu::-webkit-scrollbar, 
.sheet::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
.side-menu, .sheet, body {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;  /* Firefox */
}
body {
  overflow-x: hidden;
  width: 100%;
}

/* --- MOBILE TABS: SPACED EVENLY & CENTERED --- */
@media (max-width: 768px) {
  
  /* 1. Reset the container to distribute space between items */
  .tabs-bar {
    justify-content: space-between !important; 
    gap: 0 !important;      
    padding: 10px 0 !important;
    overflow: visible !important; 
    flex-wrap: nowrap !important;
  }

  /* 2. Let the text decide the size, don't force equal widths */
  .tab-btn {
    flex: 0 0 auto !important; 
    width: auto !important;    
    margin: 0 !important;
    padding: 10px 4px !important; /* Small padding to prevent touching */
    font-size: 13px !important; /* Fits "Vehicle & Fuel" */
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }
}

/* Menu icon color: slate/steel in dark mode, obsidian in light mode */
#btnOpenMenu { 
  color: #94a3b8;  /* slate/steel */
}

body.light #btnOpenMenu {
  color: #0f172a;  /* obsidian */
}

/* ==========================
   GARAGE: ROUTING PROFILE (Truck Modal)
========================== */
.routing-card{
  margin-top:8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--card-soft);
  padding: 12px;
  box-shadow: var(--shadow-2);
}

body.light .routing-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.14);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
}

.routing-flags{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.routing-flag{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  padding:10px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(0,0,0,0.10);
  cursor:pointer;
}

body.light .routing-flag{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.12);
}

.routing-flag input{
  width:16px;
  height:16px;
}

.routing-flag-sub{
  margin-left:36px;
  margin-top:-2px;
}

.routing-disclaimer{
  margin-top:12px;
  padding-top:10px;
  border-top: 1px dashed rgba(148,163,184,0.22);
  font-size:12px;
}

/* =========================================================
   FIX: BID SLIDER COLORS (Money Green vs Obsidian)
   Paste this at the VERY BOTTOM of styles.css
   ========================================================= */

/* 1. Base Slider (Dark Mode Default) */
input[type=range] {
  /* Restores the Money Green color for the slider fill & thumb */
  accent-color: #4ade80 !important; 
  
  /* Makes the empty part of the bar visible (Glassy White) */
  background: rgba(255, 255, 255, 0.15) !important; 
  
  /* Sizing to look like a proper bar */
  height: 6px;
  border-radius: 99px;
  margin: 14px 0;
  appearance: auto; /* Let browser handle the basic track mechanics */
}

/* 2. Light Mode Overrides (Obsidian & White) */
body.light input[type=range] {
  /* Restores the Obsidian Black color for the slider fill & thumb */
  accent-color: #0f172a !important; 
  
  /* Makes the empty part of the bar White (Paper style) */
  background: #e2e8f0 !important; 
  
  /* Optional: Adds a subtle shadow so the white bar pops off the page */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Fix Menu Close Chevron color in Light Mode */
body.light #btnCloseMenu {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Fix Sheet Back Chevron color in Light Mode (match Close Menu chevron) */
body.light .sheet-back-btn {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================
   IFTA CARD (Overview) — minimal + native
   Paste at VERY BOTTOM of styles.css
========================================== */

/* Card header row layout */
#iftaCard .ifta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#iftaCard .ifta-head-left h3 {
  margin: 0;
}

/* Right-side controls row */
#iftaCard .ifta-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  /* prevent “pill collapse” */
  flex-wrap: nowrap;
}

/* Make status + button match heights + never wrap */
#iftaAuditStatus {
  font-size: 11px;
  line-height: 1;
  padding: 0 10px;
  height: 36px;
  min-height: 36px;

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

  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  opacity: 0.9;

  white-space: nowrap;
  flex: 0 0 auto;
}

#btnRunIftaAudit {
  height: 36px;
  min-height: 36px;

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

  white-space: nowrap;
  flex: 0 0 auto;
}

/* Optional: add these classes from JS for clear states */
#iftaAuditStatus.is-running {
  border-color: rgba(250,204,21,0.35);
  background: rgba(250,204,21,0.10);
  color: rgba(250,204,21,0.95);
}
#iftaAuditStatus.is-ready {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
  color: rgba(34,197,94,0.95);
}
#iftaAuditStatus.is-error {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
  color: rgba(239,68,68,0.95);
}

/* Chevron toggle button (reuses your existing icon-btn class) */
#btnToggleIftaDetails {
  width: 36px;
  height: 36px;
  min-height: 36px;

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

  flex: 0 0 auto;
}

#btnToggleIftaDetails .menu-close-icon {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  transform-origin: 50% 50%;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Rotate chevron when expanded (toggle .is-open on the button) */
#btnToggleIftaDetails.is-open .menu-close-icon {
  transform: rotate(90deg);
  opacity: 1;
}

/* Mobile: don’t squeeze controls into wrapping pills */
@media (max-width: 520px) {
  #iftaCard .ifta-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #iftaCard .ifta-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

/* “Psychological feedback” chips row */
#iftaMilesChips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#iftaMilesChips .ifta-chip {
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  opacity: 0.92;
}

/* Soft expand container */
#iftaDetails {
  margin-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  padding-top: 10px;
}

/* Use this for “soft expand inline” without layout jump.
   Toggle .is-open on #iftaDetails from JS. */
#iftaDetails {
  display: block;           /* keep it in flow */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 220ms ease, opacity 180ms ease, transform 180ms ease;
}

#iftaDetails.is-open {
  max-height: 520px;        /* enough for state list */
  opacity: 1;
  transform: translateY(0);
}

/* Miles list */
#iftaMilesList {
  display: grid;
  gap: 8px;
}

#iftaMilesList .ifta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}

#iftaMilesList .ifta-state {
  font-weight: 700;
  letter-spacing: 0.2px;
}

#iftaMilesList .ifta-miles {
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

/* =========================================================
   MOBILE-ONLY OVERRIDES (Max Width 768px)
   Past this at the very bottom of styles.css
   ========================================================= */

@media (max-width: 768px) {

  /* --- 1. MASTER MOBILE BUTTONS (TUNED V2) --- */
  /* Targets Action Buttons to be uniform but slightly compact */
  /* --- 1. MASTER MOBILE BUTTONS (TUNED V3) --- */
  /* Targets Action Buttons to be uniform but slightly compact */
  #btnCrunchTop, 
  #btnRejectRun, 
  #btnAcceptRun, 
  #toggleBreakdown, 
  #btnClearRun, 
  #btnSaveRunOverview, 
  #btnSaveRun,
  #btnOpenGoogleMaps,   /* <--- NEW */
  #btnRoutePdf          /* <--- NEW */
  {
    padding: 10px 8px !important;  /* Reduced side padding to fit text */
    font-size: 13px !important;    /* Slightly smaller font to prevent overflow */
    min-width: 0 !important;       /* Prevents flexbox breaking */
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }
  /* Specific Fix for "Use Overview Pay" to fit on the line */
  #btnSyncPayFromOverview {
    padding: 10px 6px !important;
    font-size: 11px !important; 
    white-space: nowrap !important;
  }

  /* --- 2. CENTER MONEY & PROFIT TEXT --- */
  .overview-hero-right, 
  .overview-hero-profit {
    align-items: center !important; 
    text-align: center !important;
    width: 100% !important;        
  }

  /* --- 3. ROUTE TAB: 2x2 BUTTON GRID --- */
  .panel-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    gap: 10px !important;
    border-top: none !important; 
  }

  /* Unwrap the container holding the left buttons */
  .footer-left-actions {
    display: contents !important; 
  }

  /* Order the buttons into the 2x2 grid */
  /* Row 1, Left: Clear Route */
  #btnClearStops { order: 1 !important; width: 100% !important; }
  
  /* Row 1, Right: Save Run */
  #btnSaveRun { order: 2 !important; width: 100% !important; margin: 0 !important; }
  
  /* Row 2, Left: Auto-fill */
  #btnAutoFillAll { order: 3 !important; width: 100% !important; }
  
  /* Row 2, Right: Crunch */
  #btnCrunchRouteBottom { order: 4 !important; width: 100% !important; }
}

/* ==========================================
   MOBILE: FLATTEN OVERVIEW LAYOUT
   ========================================== */

@media (max-width: 768px) {

  /* 1. Kill the outer "box" on Overview only */
  #tab-overview .overview-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* 2. Let the hero breathe edge-to-edge */
  #tab-overview .overview-hero {
    margin: 0 0 14px 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  /* 3. Reduce vertical stacking pressure */
  #tab-overview .kpi-row,
  #tab-overview .analysis-card,
  #tab-overview .overview-details {
    margin-top: 14px !important;
  }

  /* 4. Slightly soften card density */
  #tab-overview .kpi-card,
  #tab-overview .analysis-card,
  #tab-overview .results-card {
    box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
  }
}

/* ==========================================
   HIDE VEHICLE TAB: Fuel Type + MPG (all screen sizes)
   ========================================== */

/* Hide the inputs */
#fuelType,
#mpgInput {
  display: none !important;
}

/* Hide their labels (prevents ghost spacing) */
label[for="fuelType"],
label[for="mpgInput"] {
  display: none !important;
}

/* ==========================================
   BOOT SPLASH (prevents initial Firebase flash)
   ========================================== */
.boot-splash{
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity .28s ease;
}

.boot-splash.hide{
  opacity: 0;
  pointer-events: none;
}

.boot-splash__logo{
  width: 110px;
  height: 110px;
  animation: bootPulse 1.15s ease-in-out infinite;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
}

@keyframes bootPulse{
  0%, 100% { transform: scale(0.96); opacity: 0.80; }
  50%      { transform: scale(1.04); opacity: 1.00; }
}

.auth-tagline {
  text-align: center;
}

.tagline-primary {
  font-size: 14px;
  font-weight: 500;
}

.tagline-secondary {
  font-size: 13px;
  opacity: 0.75;
}

/* ==========================================
   MOBILE: Sheets must sit ABOVE the side menu
   (prevents "modal behind menu" on iPhone)
   ========================================== */
@media (max-width: 768px) {
  .sheet.open {
    z-index: 9999 !important;
  }
  .side-menu.open {
    z-index: 9000 !important;
  }
}

/* ==========================================
   MINI MODALS (Create Folder, Delete Account)
   Default hidden; only visible when .show is applied
   ========================================== */

.mini-modal{
  position: fixed;
  inset: 0;
  display: none;            /* CRITICAL: keep hidden unless opened */
  align-items: center;      /* centered on desktop + mobile */
  justify-content: center;
  padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
}

.mini-modal.show{
  display: flex;
}

.mini-card{
  width: min(640px, calc(100% - 24px));   /* slightly wider */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;                          /* more breathing room */
  box-shadow: var(--shadow);
}

.mini-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --------------------
   DASHBOARD ACTION / CONFIRM MODAL (center pop-up)
-------------------- */
.dash-action-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15, 23, 42, 0.62);
  z-index:120; /* above side menu */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
body.light .dash-action-backdrop{
  background:rgba(15, 23, 42, 0.35);
}

.dash-action-backdrop.show{ display:flex; }

.dash-action-modal{
  width:min(520px, 100%);
  border-radius:16px;
  border:1px solid var(--border-strong);
  background:var(--glass-surface);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  padding:14px;
}

body.light .dash-action-modal{
  background:rgba(255,255,255,0.92);
  box-shadow: 0 18px 60px rgba(15,23,42,0.22);
}

.dash-action-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:6px;
}

.dash-action-body{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.35;
  margin-bottom:12px;
}

/* Dashboard: Action / Confirm Modal buttons */

/* DEFAULT (ALL modals):
   Two-button row: [ Cancel ] [ Primary ]
   (Secondary is usually hidden via inline style when not used.)
*/
.dash-action-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
}

.dash-action-actions .btn{
  flex:1;
  min-width:0;
  width:100%;
  padding:10px 14px;
  font-size:13px;
  line-height:1.15;
  text-align:center;
  min-height:44px;
}

/* Only for Scheduled Run chooser: stack Cancel full-width on bottom
   Layout:
   [ Secondary ] [ Primary ]
   [     Cancel (full width)    ]
*/
.dash-action-backdrop.stack-cancel .dash-action-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Put Secondary + Primary on row 1 */
.dash-action-backdrop.stack-cancel #dashActionSecondary{
  grid-column:1;
  grid-row:1;
}
.dash-action-backdrop.stack-cancel #dashActionPrimary{
  grid-column:2;
  grid-row:1;
}

/* Put Cancel on row 2 spanning full width */
.dash-action-backdrop.stack-cancel #dashActionCancel{
  grid-column:1 / -1;
  grid-row:2;
}

/* Make sure grid mode ignores flex sizing */
.dash-action-backdrop.stack-cancel .dash-action-actions .btn{
  flex:initial;
  width:100%;
}

@media (max-width: 420px){
  .dash-action-actions{ gap:8px; }
  .dash-action-actions .btn{ padding:8px 12px; font-size:12.5px; }

  .dash-action-backdrop.stack-cancel .dash-action-actions{ gap:8px; }
}

/* Only for Scheduled Run chooser: stack Cancel full-width */
.dash-action-backdrop.stack-cancel .dash-action-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Top row */
.dash-action-backdrop.stack-cancel #dashActionSecondary{
  grid-column:1;
}
.dash-action-backdrop.stack-cancel #dashActionPrimary{
  grid-column:2;
}

/* Bottom row: full-width Cancel */
.dash-action-backdrop.stack-cancel #dashActionCancel{
  grid-column:1 / -1;
}

/* Override flex sizing when we switch to grid */
.dash-action-backdrop.stack-cancel .dash-action-actions .btn{
  flex:initial;
  width:100%;
}

@media (max-width: 420px){
  .dash-action-backdrop.stack-cancel .dash-action-actions{ gap:8px; }
}

/* Dashboard: Tracking evidence line (read-only) */
.dash-evidence{
  display:flex;
  gap:10px;
  align-items:center;
  white-space:normal;
}

/* Pickup mini modal: make date/time fields easier to hit/read */
#pickupMini label{
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 14px;
}

#pickupMini input[type="date"],
#pickupMini input[type="time"]{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;

  /* Keep 16px so iOS doesn't zoom, but make the control visually slimmer */
  font-size: 16px;
  padding: 8px 12px;
  height: 44px;
  line-height: 1.2;
  border-radius: 16px;
  box-sizing: border-box;

  /* Prevent iOS native "pill" UI from painting outside the element box */
  overflow: hidden;
  background-clip: padding-box;
}

/* iOS: make native date/time inputs obey our sizing + radius (prevents bleed/overflow) */
@supports (-webkit-touch-callout: none){
  #pickupMini input[type="date"],
  #pickupMini input[type="time"]{
    -webkit-appearance: none;
    appearance: none;
  }
}
/* Flatpickr generates text inputs (altInput). Keep sizing consistent. */
#pickupMini input.flatpickr-input,
#pickupMini input.flatpickr-altInput{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
  padding: 8px 12px;
  height: 44px;
  line-height: 1.2;
  border-radius: 16px;
  box-sizing: border-box;
}

/* Slightly larger on desktop */
@media (min-width: 769px){
  #pickupMini input[type="date"],
  #pickupMini input[type="time"],
  #pickupMini input.flatpickr-input,
  #pickupMini input.flatpickr-altInput{
    font-size: 16px;
    padding: 14px 16px;
  }
}

/* Flatpickr popover sizing (desktop) — make the calendar feel "Metryx" (not tiny). */
#pickupMini .flatpickr-calendar{
  z-index: 11000;
  border-radius: 14px;
  font-size: 14px;
}
#pickupMini .flatpickr-day{
  height: 34px;
  line-height: 34px;
}

/* ==========================================
   PICKUP MINI MODAL — larger + centered
   (keeps other mini-modals bottom-docked)
   ========================================== */

#pickupMini.mini-modal{
  align-items: center; /* center vertically instead of bottom dock */
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

#pickupMini .mini-card{
  width: min(680px, calc(100% - 24px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  overflow: hidden; /* clip any iOS control paint bleed */
}

@media (max-width: 640px){
  #pickupMini .mini-card{
    width: calc(100% - 20px);
    padding: 16px 16px 14px;

  }

  /* Mobile: slightly tighter so inputs never feel oversized */
  #pickupMini input[type="date"],
  #pickupMini input[type="time"]{
    padding: 7px 10px;
    height: 42px;
    border-radius: 16px;
  }

}

/* TEMP: hide fuel type + MPG source block */
.hide-fuel-block {
  display: none !important;
}

.stop-via-wrap { margin-top: 8px; }
.via-details { border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 10px 12px; }
.via-summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.via-summary::-webkit-details-marker { display: none; }
.via-state { margin-left: auto; }
.via-body { margin-top: 10px; }
.via-body input.stop-via { width: 100%; }

/* ===========================
   PDF VIEWER (PWA-safe)
=========================== */
#modalPdfViewer{
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

/* PDF viewer header needs room for the top-right chevron */
#modalPdfViewer > div[style*="display:flex"]{
  position: relative;
  padding-right: 86px; /* makes space for chevron so buttons don't sit under it */
}

#modalPdfViewer .inline-btns{
  gap: 12px;           /* prevents "touching" */
}

/* Desktop-only: push the buttons left a bit more so chevron never overlaps */
@media (min-width: 900px){
  #modalPdfViewer > div[style*="display:flex"]{
    padding-right: 96px;
  }
}

/* Mobile: still give room for chevron but slightly less */
@media (max-width: 640px){
  #modalPdfViewer > div[style*="display:flex"]{
    padding-right: 72px;
  }

  #modalPdfViewer .inline-btns{
    margin-top: 6px;
  }
}

/* Use dvh for iOS so the iframe doesn't get chopped by the browser chrome */
.pdf-frame{
  width: 100%;
  height: calc(100dvh - 170px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

/* Make the header wrap nicely on mobile and keep buttons side-by-side */
@media (max-width: 640px){
  #modalPdfViewer > div[style*="display:flex"]{
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #pdfViewerTitle{
    width: 100%;
    margin-bottom: 6px !important;
  }

  /* force the two buttons into one row */
  #modalPdfViewer .inline-btns{
    width: 100%;
    display: flex;
    gap: 10px;
  }
  #modalPdfViewer .inline-btns .btn{
    flex: 1;
    min-width: 0;
    white-space: nowrap;
  }

  .pdf-frame{
    height: calc(100dvh - 220px);
    border-radius: 12px;
  }
}

/* =========================
   DVIR Card (Pre/Post)
   ========================= */
.dvir-card { margin-top: 14px; }
.dvir-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.dvir-actions { display:flex; gap:8px; flex-wrap:wrap; }
.dvir-grid { display:grid; grid-template-columns: minmax(320px, 420px) 1fr; gap:16px; }
#dvirNotes { width: 100%; }
.dvir-section-title { font-weight:600; margin: 6px 0 10px; opacity:.9; }
.dvir-item { display:flex; gap:10px; align-items:center; margin: 8px 0; }
.dvir-item input { transform: translateY(1px); }
.dvir-photos { margin-top: 12px; }
.dvir-photo-strip { display:flex; gap:8px; flex-wrap:wrap; min-height: 44px; }
.dvir-photo {
  width:64px; height:64px; object-fit:cover; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
}
.dvir-photo.pending {
  outline: 2px dashed rgba(148, 163, 184, 0.65);
  outline-offset: 2px;
}
.dvir-tip-row {
  display: flex;
  justify-content: flex-end; /* aligns to right edge */
  margin-top: 8px;
}
.dvir-footer { display:flex; justify-content: flex-end; gap:8px; flex-wrap:wrap; margin-top: 12px; }
.dvir-lock-note { margin-top: 10px; color: #ffb4b4; }
@media (max-width: 860px) {
  .dvir-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .dvir-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 buttons on top row */
    gap: 10px;
    justify-content: stretch;
  }

  .dvir-footer .btn {
    width: 100%;
    min-width: 0;
    padding: 10px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Save button becomes the full-width second row */
  #btnDvirSave {
    grid-column: 1 / -1;
  }
}

/* DVIR panel spacing alignment */
.dvir-panel .dvir-grid {
  margin-top: 14px;
}

/* ===============================
   IFTA CARD — CLEAN VIEW (keep title + helper, rows only)
   CSS-only / NO REFACTOR
================================ */

/* 1) Keep the header text, but hide the right-side controls */
#iftaCard .ifta-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Hide: Out of date / Ready pill, Run estimate button, chevron */
#iftaCard .ifta-head .ifta-actions,
#iftaCard .ifta-head .ifta-status,
#iftaCard .ifta-head .ifta-btn,
#iftaCard .ifta-head button,
#iftaCard .ifta-head .icon-btn {
  display: none !important;
}

/* 2) Hide the chips row (WY 325 / CO 308 pills) */
#iftaCard #iftaMilesChips {
  display: none !important;
}

/* 3) Force the details area open no matter what */
#iftaCard #iftaDetails {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-top: 10px !important;   /* keeps spacing under header text */
  padding-top: 0 !important;
}

/* 4) Optional: hide the "Estimated miles by state" label */
#iftaCard #iftaDetails > .small.muted {
  display: none !important;
}

/* 5) Hide the audited timestamp */
#iftaCard #iftaAuditedAt {
  display: none !important;
}

/* 6) Keep rows tight */
#iftaCard #iftaMilesList {
  margin-top: 0 !important;
}

/* --------------------
   Saved Runs - Responsive Filter (Option C)
   Inline on wide screens, stacked on small screens
-------------------- */
.runs-filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#runsSearchInput { flex:1 1 220px; min-width:0; box-sizing:border-box; padding:8px 10px; border-radius:var(--radius-sm); }
#runsSearchClear { margin-left:6px; }
#runsFolderFilter { flex:0 0 200px; min-width:140px; }
@media (max-width:640px) {
  .runs-filter-row { flex-direction:column; align-items:stretch; }
  #runsFolderFilter { width:100%; max-width:none; }
}

/* =========================================
   PROFIT CENTER — ENGINE UI (POLISHED)
   ========================================= */

/* -----------------------------------------
   PROFIT CENTER — OG 02:07 "Performance" LOOK
   (keeps Engine IDs; restores layout + sizing)
------------------------------------------ */

.pc-legacy-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.pc-legacy-toggle{
  background:var(--card-soft);
  padding:4px;
  border-radius:99px;
  border:1px solid var(--border);
}

.pc-legacy-donut{
  position:relative;
  height:260px;
  width:100%;
  margin:20px 0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.pc-legacy-donut canvas{
  display:block;
  width: min(320px, 72vw);
  height: min(320px, 72vw);
}

.pc-legacy-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  pointer-events:none;
}

.pc-legacy-center-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.pc-legacy-center-value{
  font-size:28px;
  font-weight:900;
  color:var(--accent);
  text-shadow:0 0 25px rgba(74,222,128,0.2);
}

.pc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.pc-title{ margin:0; }

.pc-controls{
  margin-top: 14px;
  display:grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items:center;
}

@media (max-width: 720px){
  .pc-controls{
    grid-template-columns: 1fr;
  }
}

.pc-seg{
  background: var(--card-soft);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display:flex;
  gap:6px;
  width: fit-content;
}

.pc-search{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width: 720px){
  .pc-search{ justify-content:stretch; }
}

#profitSearchInput{
  min-width: 220px;
  max-width: 520px;
  width: 100%;
}

.pc-custom-range{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  align-items:end;
}

@media (max-width: 720px){
  .pc-custom-range{ grid-template-columns: 1fr; }
}

/* Donut sizing (Metryx: large + centered; responsive) */
#profitWheel{
  width: min(320px, 72vw);
  height: min(320px, 72vw);
}
@media (min-width: 900px){
  #profitWheel{ width: 360px; height: 360px; }
}

/* Profit Center — Restore Metryx "Performance" shell */
.pc-performance{
  margin: 14px 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}

/* Desktop: donut left, legend right (like a real performance card) */
@media (min-width: 900px){
  .pc-performance{
    grid-template-columns: 420px 1fr;
    justify-content: center;
    gap: 22px;
  }
}

.pc-donut-wrap{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 6px 0;
}

.pc-donut-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
}

.pc-donut-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
}

.pc-donut-value{
  margin-top: 6px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--money-accent);
  text-shadow: 0 0 28px rgba(74,222,128,0.18);
}

@media (max-width: 420px){
  .pc-donut-value{ font-size: 34px; }
}

.pc-legend{
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding: 6px 6px 10px;
}

.pc-legend-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.pc-legend-bar{
  width: 4px;
  border-radius: 999px;
  margin-top: 6px;
  height: 42px;
  background: rgba(148,163,184,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

.pc-legend-item[data-kind="fuel"] .pc-legend-bar{ background: var(--danger); }
.pc-legend-item[data-kind="maint"] .pc-legend-bar{ background: var(--warning); }
.pc-legend-item[data-kind="rev"] .pc-legend-bar{ background: var(--money-accent); }

.pc-legend-value{
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--text);
}

.pc-legend-item[data-kind="fuel"] .pc-legend-value{ color: var(--danger); }
.pc-legend-item[data-kind="maint"] .pc-legend-value{ color: var(--warning); }
.pc-legend-item[data-kind="rev"] .pc-legend-value{ color: var(--money-accent); }

.pc-legend-label{
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
}

/* Make Profit Center panel feel like Metryx hero cards (less "white void") */
/* Profit Center: do NOT override panel background (prevents green bleed + mismatch) */
#tab-profit .pc-panel{
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 40%),
    var(--card);
}

body.light #tab-profit .pc-panel{
  background:
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.05), transparent 40%),
    var(--card);
}

/* =========================================================
   DASHBOARD WORKSPACE (Mission Control)
   Keeps Overview hero-card style, but scoped to Dashboard.
   ========================================================= */

#workspaceDashboard .dashboard-panel{
  /* Match Terminal .panel look + width */
  position: relative;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 40%),
    var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;

  /* IMPORTANT: remove the "narrower than Terminal" feel */
  max-width: none;
  margin: 0;
}

#workspaceDashboard .dashboard-panel::before{
  /* Same shimmer used by .panel */
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: var(--shimmer);
}

/* Mobile: Dashboard should match Overview (no outer "back card" wrapper) */
@media (max-width: 720px){
  #workspaceDashboard .dashboard-panel{
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  #workspaceDashboard .dashboard-panel::before{
    display: none;
  }
}

#workspaceDashboard .dashboard-hero{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:16px;
  padding:16px;
  border:1px solid var(--accent-dim);
  border-radius:16px;
  background:var(--card);
  box-shadow: var(--shadow);
}

#workspaceDashboard .dashboard-hero-label{
  font-weight:700;
  font-size:14px;
  letter-spacing:0.2px;
  color:var(--text);
}

#workspaceDashboard .dash-month-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:8px;
}

#workspaceDashboard .dashboard-hero-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}

#workspaceDashboard .dash-month-nav{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

#workspaceDashboard .dash-month-label{
  white-space:nowrap;
  text-align:center;
}

#workspaceDashboard .dash-month-arrow{
  background:transparent;
  border:none;
  padding:6px 8px;
  border-radius:10px;
  color:var(--text-soft);
  cursor:pointer;
  transition:opacity .12s ease, transform .12s ease, color .12s ease, background .12s ease;
  line-height:1;
  font-size:18px;
}

#workspaceDashboard .dash-month-arrow:hover{
  opacity:1;
  color:var(--text);
  background:rgba(255,255,255,0.06);
}

body.light #workspaceDashboard .dash-month-arrow:hover{
  background:rgba(15,23,42,0.06);
}

#workspaceDashboard .dashboard-hero-controls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}

#workspaceDashboard .dashboard-hero-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
}

#workspaceDashboard .hero-profit-value{
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.5px;
  color:var(--text);
}

#workspaceDashboard .dash-kpi-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
}

#workspaceDashboard .dash-kpi-card{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow: var(--shadow);
}

#workspaceDashboard .dash-kpi-card .kpi-label{
  font-size:12px;
  opacity:0.8;
  margin-bottom:6px;
}

#workspaceDashboard .dash-kpi-card .kpi-value{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.3px;
}

#workspaceDashboard .dash-signal-card{
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow: var(--shadow);
}

/* Dashboard: match Overview "glass + bloom" in both light & dark */
body:not(.light) #workspaceDashboard .dashboard-hero,
body:not(.light) #workspaceDashboard .dash-kpi-card,
body:not(.light) #workspaceDashboard .dash-signal-card,
body:not(.light) #workspaceDashboard .dash-tools-card,
body:not(.light) #workspaceDashboard .dash-analysis-card,
body:not(.light) #workspaceDashboard .dash-mini-card{
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(900px 320px at 18% 0%, rgba(125,211,252,.08), transparent 55%),
    radial-gradient(900px 320px at 85% 0%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, rgba(17,24,39,.72) 0%, rgba(17,24,39,.48) 100%)
    !important;
  border: 1px solid var(--d-border) !important;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(10px) saturate(120%);
}

body:not(.light) #workspaceDashboard .dashboard-hero::before,
body:not(.light) #workspaceDashboard .dash-kpi-card::before,
body:not(.light) #workspaceDashboard .dash-signal-card::before,
body:not(.light) #workspaceDashboard .dash-tools-card::before,
body:not(.light) #workspaceDashboard .dash-analysis-card::before,
body:not(.light) #workspaceDashboard .dash-mini-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(900px 520px at 82% 0%, rgba(255,255,255,.10), transparent 62%);
  opacity:.85;
}

body.light #workspaceDashboard .dashboard-hero,
body.light #workspaceDashboard .dash-kpi-card,
body.light #workspaceDashboard .dash-signal-card,
body.light #workspaceDashboard .dash-tools-card,
body.light #workspaceDashboard .dash-analysis-card,
body.light #workspaceDashboard .dash-mini-card{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 82% 0%, rgba(15,23,42,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.92) 100%)
    !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 18px 50px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

#workspaceDashboard .dash-signal-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#workspaceDashboard .dash-signal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#workspaceDashboard .dash-signal-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
}

#workspaceDashboard .dash-signal-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#workspaceDashboard .dash-signal-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--muted);
  flex:0 0 auto;
}

#workspaceDashboard .dash-signal-dot.ok{ background: var(--success); }
#workspaceDashboard .dash-signal-dot.warn{ background: var(--warning); }
#workspaceDashboard .dash-signal-dot.due{ background: var(--warning); }
#workspaceDashboard .dash-signal-dot.overdue{ background: var(--danger); }

#workspaceDashboard .dash-signal-title{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#workspaceDashboard .dash-signal-right{
  text-align:right;
  white-space:nowrap;
}

#workspaceDashboard .dash-signal-sub{
  margin-top:2px;
  font-size:12px;
  opacity:0.85;
}

#workspaceDashboard .dash-recent-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#workspaceDashboard .dash-row{
  display:flex;
  align-items:center; /* vertical centering across left/mid/right */
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  /* Add depth + subtle gradient like Terminal panels */
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 45%),
    var(--card-soft);

  box-shadow: var(--shadow-2);
  cursor:pointer;

  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#workspaceDashboard .dash-row:hover{
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

#workspaceDashboard .dash-row-title{
  font-weight:800;
  color:var(--text);
}

#workspaceDashboard .dash-row-right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}

#workspaceDashboard .dash-row-mid{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-soft);
  font-weight: 500;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 720px;
}

/* Responsive */
@media (max-width: 720px){
  #workspaceDashboard .dashboard-hero{
    grid-template-columns: 1fr;
  }
  #workspaceDashboard .dashboard-hero-right{
    align-items:flex-start;
  }
  #workspaceDashboard .dashboard-hero-controls{
    grid-template-columns: 1fr;
  }
  #workspaceDashboard .dash-kpi-row{
    /* Mobile: keep KPI tiles horizontal (3 across) without bleeding outside Mission Control */
    width:100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  #workspaceDashboard .dash-kpi-card{
    min-width:0;
    padding:10px;
  }

  #workspaceDashboard .dash-kpi-card .kpi-label{
    font-size:11px;
    margin-bottom:5px;
  }

  #workspaceDashboard .dash-kpi-card .kpi-value{
    font-size:18px;
    line-height:1.1;
  }
}

/* Polishing: premium hero depth */
#workspaceDashboard .dashboard-hero{
  backdrop-filter: blur(6px);
}

/* Keep pickup -> drop / PO/BOL lines tidy */
#workspaceDashboard .dash-row-sub{
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 820px;
}

/* Dashboard V3: Overview-style layout blocks */
#workspaceDashboard .dash-tools-card{
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow: var(--shadow);
}

#workspaceDashboard .dash-tools-head,
#workspaceDashboard .dash-section-head,
#workspaceDashboard .dash-analysis-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#workspaceDashboard .dash-tools-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

#workspaceDashboard .dash-analysis-card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow: var(--shadow);
}

#workspaceDashboard .dash-mini-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

#workspaceDashboard .dash-mini-card{
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}

@media (min-width: 900px){
  #workspaceDashboard .dash-mini-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px){
  #workspaceDashboard .dash-tools-actions{
    grid-template-columns: 1fr;
  }
}

/* Compliance compiler — Autofill collapsibles */
#sheetComplianceCompiler .compiler-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#sheetComplianceCompiler .compiler-toggle .chev{
  opacity:0.7;
  transition: transform .15s ease;
}

#sheetComplianceCompiler .compiler-toggle.open .chev{
  transform: rotate(180deg);
}

#sheetComplianceCompiler .compiler-collapsible{
  margin-top:6px;
  padding-top:2px;
}

/* Compliance action rows – ensure clean spacing on ALL browsers */
#sheetComplianceCompiler .compiler-collapsible .row{
  display:flex;           /* critical: guarantees layout */
  gap:10px;
}

/* Flex-gap fallback (desktop) */
#sheetComplianceCompiler .compiler-collapsible .row .btn + .btn{
  margin-left:10px;
}

@media (max-width: 720px){
  #sheetComplianceCompiler .compiler-collapsible .row{
    flex-direction: column;
    gap:12px !important;
  }

  /* Flex-gap fallback (mobile) */
  #sheetComplianceCompiler .compiler-collapsible .row .btn + .btn{
    margin-left:0;
    margin-top:12px;
  }

  #sheetComplianceCompiler .compiler-collapsible .row .btn{
    width:100%;
  }
}