/* ===== v2.0.2 theme tokens — Light/Night/Auto =====
   Components reference the --vo-* tokens. Setting data-vo-theme="dark" on #vo-root
   flips every surface in one step. Auto follows the OS dark-mode preference. */
#vo-root{
  --navy:#294a70; --gold:#e69b1e;
  /* Semantic tokens (light by default) */
  --vo-bg:#f5f6f8; --vo-surface:#ffffff; --vo-elev:#fafbfd;
  --vo-text:#0e1421; --vo-text2:#42505f; --vo-muted:#6b7280;
  --vo-line:#e4e8ee; --vo-line2:#f0f2f5;
  --vo-accent:#294a70; --vo-accent-d:#1a3354;
  --vo-green:#16a674; --vo-greenbg:#dff5e8;
  --vo-amber:#e69b1e; --vo-amberbg:#fff5e6;
  --vo-red:#dc3545;   --vo-redbg:#fdecea;
  --vo-blue:#3a87ff;
  /* Legacy aliases — keep so old rules don't break */
  --line:var(--vo-line); --muted:var(--vo-muted); --green:#2e7d32; --red:#c62828;
  background:var(--vo-bg); color:var(--vo-text);
  max-width:480px; margin:0 auto; padding:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box; transition:background .15s ease, color .15s ease;
}
/* Auto mode follows OS preference */
@media (prefers-color-scheme: dark){
  #vo-root[data-vo-theme="auto"]{
    --vo-bg:#0a0d14; --vo-surface:#161a26; --vo-elev:#1e2330;
    --vo-text:#fff; --vo-text2:#d2d8e4; --vo-muted:#8a93a8;
    --vo-line:#1e2330; --vo-line2:#161a26;
    --vo-accent:#5b8def; --vo-accent-d:#4574df;
    --vo-green:#3dd598; --vo-greenbg:rgba(61,213,152,.14);
    --vo-amber:#ffc046; --vo-amberbg:rgba(255,192,70,.12);
    --vo-red:#ff6b6b;   --vo-redbg:rgba(255,107,107,.14);
    --vo-blue:#5b8def;
  }
}
/* Explicit dark always wins */
#vo-root[data-vo-theme="dark"]{
  --vo-bg:#0a0d14; --vo-surface:#161a26; --vo-elev:#1e2330;
  --vo-text:#fff; --vo-text2:#d2d8e4; --vo-muted:#8a93a8;
  --vo-line:#1e2330; --vo-line2:#161a26;
  --vo-accent:#5b8def; --vo-accent-d:#4574df;
  --vo-green:#3dd598; --vo-greenbg:rgba(61,213,152,.14);
  --vo-amber:#ffc046; --vo-amberbg:rgba(255,192,70,.12);
  --vo-red:#ff6b6b;   --vo-redbg:rgba(255,107,107,.14);
  --vo-blue:#5b8def;
}
/* Card defaults now read tokens so dark mode is one-line-per-surface */
#vo-root[data-vo-theme="dark"] .card,
#vo-root[data-vo-theme="auto"] .card{ background:var(--vo-surface); border-color:var(--vo-line); color:var(--vo-text); }
#vo-root[data-vo-theme="dark"] input,
#vo-root[data-vo-theme="dark"] select,
#vo-root[data-vo-theme="dark"] textarea{ background:var(--vo-surface); color:var(--vo-text); border-color:var(--vo-line); }
@media (prefers-color-scheme: dark){
  #vo-root[data-vo-theme="auto"] input,
  #vo-root[data-vo-theme="auto"] select,
  #vo-root[data-vo-theme="auto"] textarea{ background:var(--vo-surface); color:var(--vo-text); border-color:var(--vo-line); }
}

/* Reusable icon helper class */
#vo-root .vo-ico{ width:20px; height:20px; flex:0 0 20px; display:inline-block; vertical-align:-4px; color:inherit; fill:none; stroke:currentColor; }
#vo-root .vo-ico-lg{ width:24px; height:24px; flex:0 0 24px; }
#vo-root .vo-ico-sm{ width:16px; height:16px; flex:0 0 16px; vertical-align:-3px; }

/* Theme switcher pill row (used inside Profile / Settings card) */
#vo-root .vo-theme-switch{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:var(--vo-elev); border:1px solid var(--vo-line); border-radius:11px; }
#vo-root .vo-theme-switch button{ background:transparent; border:0; padding:9px 6px; font-size:12px; font-weight:700; color:var(--vo-text2); cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; }
#vo-root .vo-theme-switch button.active{ background:linear-gradient(135deg,var(--vo-accent),var(--vo-accent-d)); color:#fff; box-shadow:0 3px 8px rgba(31,58,95,.20); }
#vo-root .vo-theme-switch button svg{ width:14px; height:14px; }
#vo-root .vo-theme-card{ background:var(--vo-surface); border:1px solid var(--vo-line); border-radius:14px; padding:14px; margin:0 0 14px; }
#vo-root .vo-theme-card .vo-eyebrow{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--vo-muted); margin-bottom:10px; }

/* ===== v2.0.2 — AI Vision walkaround capture screen ===== */
#vo-root #walkaround{ padding:0; }
#vo-root .vo-wk-viewfinder{ position:relative; background:linear-gradient(180deg,#1f2733,#0a0d14); border-radius:18px; overflow:hidden; aspect-ratio:4/5; margin:14px 0; }
#vo-root .vo-wk-viewfinder video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#vo-root .vo-wk-topbar{ position:absolute; left:14px; right:14px; top:14px; display:flex; justify-content:space-between; z-index:5; pointer-events:none; }
#vo-root .vo-wk-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em; backdrop-filter:blur(10px); }
#vo-root .vo-wk-pill-ai{ background:rgba(202,161,74,.22); color:#e6c587; }
#vo-root .vo-wk-pill-rec{ background:rgba(220,53,69,.22); color:#ff8a98; }
#vo-root .vo-wk-pill-rec::before{ content:""; width:7px; height:7px; background:var(--vo-red); border-radius:50%; animation:vo-rec 1.2s infinite; }
#vo-root .vo-wk-pill-plate{ background:rgba(22,166,116,.22); color:#7be0b0; }
@keyframes vo-rec { 0%,100%{opacity:1} 50%{opacity:.35} }
#vo-root .vo-wk-ring{ position:absolute; inset:6%; pointer-events:none; }
#vo-root .vo-wk-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; pointer-events:none; }
#vo-root .vo-wk-center b{ font-size:42px; font-weight:800; letter-spacing:-.02em; line-height:1; }
#vo-root .vo-wk-center span{ font-size:12px; color:rgba(255,255,255,.75); font-weight:600; margin-top:6px; }
#vo-root .vo-wk-stop{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:60px; height:60px; border-radius:18px; background:var(--vo-red); border:5px solid rgba(255,255,255,.45); box-shadow:0 8px 22px rgba(220,53,69,.40); cursor:pointer; padding:0; }
#vo-root .vo-wk-start{ width:64px; height:64px; border-radius:50%; background:#fff; border:6px solid rgba(255,255,255,.40); box-shadow:0 8px 22px rgba(0,0,0,.40); cursor:pointer; padding:0; position:absolute; bottom:18px; left:50%; transform:translateX(-50%); }
#vo-root .vo-wk-hint{ text-align:center; color:var(--vo-text2); font-size:13px; font-weight:600; line-height:1.45; margin:8px 0; }
#vo-root .vo-wk-fallback{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; background:var(--vo-surface); border:1px solid var(--vo-line); color:var(--vo-text2); font-weight:700; font-size:13px; border-radius:12px; cursor:pointer; width:100%; font-family:inherit; }

/* Walkaround result: side thumbs grid + damage callout */
#vo-root .vo-wk-result-card{ background:var(--vo-surface); border:1px solid var(--vo-line); border-radius:14px; padding:12px; margin-bottom:10px; }
#vo-root .vo-wk-result-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:11px; font-weight:800; color:var(--vo-amber); text-transform:uppercase; letter-spacing:.06em; }
#vo-root .vo-wk-result-head .grow{ flex:1; }
#vo-root .vo-wk-sides{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#vo-root .vo-wk-side{ position:relative; aspect-ratio:1/1; border-radius:8px; background:#1f2733 center/cover; overflow:hidden; }
#vo-root .vo-wk-side > .lbl{ position:absolute; bottom:3px; left:4px; color:#fff; font-size:8.5px; font-weight:800; background:rgba(0,0,0,.55); padding:1px 5px; border-radius:3px; letter-spacing:.04em; }
#vo-root .vo-wk-side > .dmg{ position:absolute; top:3px; right:3px; background:var(--vo-amber); color:#0a0d14; font-size:8.5px; font-weight:800; padding:1px 5px; border-radius:3px; }
#vo-root .vo-wk-damage{ background:var(--vo-amberbg); border:1px solid #f3d49a; border-radius:12px; padding:11px; display:flex; gap:10px; align-items:center; }
#vo-root .vo-wk-damage .grow{ flex:1; }
#vo-root .vo-wk-damage strong{ display:block; color:var(--vo-amber); font-size:12px; }
#vo-root .vo-wk-damage span{ color:#a86c0a; font-size:11px; }
#vo-root[data-vo-theme="dark"] .vo-wk-damage{ background:rgba(230,155,30,.10); border-color:rgba(230,155,30,.30); }
#vo-root[data-vo-theme="dark"] .vo-wk-damage strong,
#vo-root[data-vo-theme="dark"] .vo-wk-damage span{ color:var(--vo-amber); }

/* Auto-filled AI fields card (Make/Model/Color/Plate with confidence pills) */
#vo-root .vo-ai-fields{ background:var(--vo-surface); border:1px solid var(--vo-line); border-radius:14px; overflow:hidden; }
#vo-root .vo-ai-fields .row{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--vo-line2); }
#vo-root .vo-ai-fields .row:last-child{ border-bottom:0; }
#vo-root .vo-ai-fields .key{ font-size:10px; font-weight:800; color:var(--vo-muted); letter-spacing:.06em; text-transform:uppercase; }
#vo-root .vo-ai-fields .val{ font-weight:800; font-size:13px; color:var(--vo-text); }
#vo-root .vo-ai-fields .val.mono{ font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.05em; }
#vo-root .vo-conf{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; margin-left:8px; }
#vo-root .vo-conf.hi{ background:var(--vo-greenbg); color:var(--vo-green); }
#vo-root .vo-conf.md{ background:var(--vo-amberbg); color:var(--vo-amber); }
#vo-root .vo-conf.lo{ background:var(--vo-redbg); color:var(--vo-red); }

/* VIP returning banner */
#vo-root .vo-vip-banner{ background:linear-gradient(135deg,#fff5e6,#fde7c2); border:1px solid #f3d49a; border-radius:14px; padding:12px; margin-bottom:10px; display:flex; gap:10px; align-items:center; color:#5a3f0a; }
#vo-root .vo-vip-banner .grow{ flex:1; }
#vo-root .vo-vip-banner strong{ display:block; color:#5a3f0a; font-size:12.5px; }
#vo-root .vo-vip-banner span{ color:#7a5710; font-size:11px; }
#vo-root[data-vo-theme="dark"] .vo-vip-banner{ background:linear-gradient(135deg,rgba(202,161,74,.18),rgba(202,161,74,.06)); border-color:rgba(202,161,74,.30); color:var(--vo-amber); }
#vo-root[data-vo-theme="dark"] .vo-vip-banner strong,
#vo-root[data-vo-theme="dark"] .vo-vip-banner span{ color:var(--vo-amber); }
#vo-root *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
#vo-root .hide{ display:none !important; }
#vo-root .bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
#vo-root .bar h1{ font-size:18px; margin:0; color:var(--navy); }
#vo-root .who{ font-size:13px; color:var(--muted); }
#vo-root .card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
#vo-root label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
#vo-root input, #vo-root select{ width:100%; font-size:16px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
#vo-root button{ width:100%; font-size:16px; font-weight:600; padding:14px; border:none; border-radius:10px; background:var(--navy); color:#fff; margin-top:14px; cursor:pointer; }
#vo-root button.alt{ background:#fff; color:var(--navy); border:1px solid var(--navy); }
#vo-root button.gold{ background:var(--gold); color:#3a2a06; }
#vo-root button.green{ background:var(--green); }
#vo-root button.small{ width:auto; padding:8px 14px; font-size:14px; margin:0; }
#vo-root .tile{ display:flex; align-items:center; gap:12px; width:100%; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:16px; font-weight:600; color:var(--navy); margin-bottom:10px; cursor:pointer; text-align:left; }
#vo-root .tile small{ display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }
#vo-root .bigbtn{ width:100%; padding:32px 16px; font-size:24px; font-weight:700; border:none; border-radius:16px; background:var(--navy); color:#fff; margin-bottom:12px; cursor:pointer; }
#vo-root .ticket{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; }
#vo-root .pin{ font-size:28px; letter-spacing:6px; text-align:center; font-family:ui-monospace,monospace; }
#vo-root .pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
#vo-root .pad button{ background:#fff; color:#1f2937; border:1px solid var(--line); font-size:22px; font-weight:500; margin:0; padding:16px; }
#vo-root .qrow{ border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:#fff; }
#vo-root .qrow.pulling{ border-color:#185fa5; background:#eef5fc; }
#vo-root .qtop{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
#vo-root .qdet{ font-size:13px; color:#6b7280; margin:4px 0 8px; }
#vo-root .qbadge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; margin-left:auto; }
#vo-root .qbadge.waiting{ background:#faeeda; color:#854f0b; }
#vo-root .qbadge.pulling{ background:#dcebfb; background:#d3e4f7; color:#0c447c; }
#vo-root .qstatus{ font-size:13px; font-weight:600; padding:10px 0 2px; }
#vo-root .qstatus.waiting{ color:#854f0b; }
#vo-root .qstatus.pulling{ color:#0c447c; }
#vo-root .wait{ font-family:ui-monospace,monospace; font-weight:700; color:#854F0B; }
#vo-root .pull{ font-family:ui-monospace,monospace; font-weight:700; color:var(--navy); }
/* tickets / cars list */
#vo-root .tk-stats{ display:flex; gap:8px; margin-bottom:12px; }
#vo-root .tk-stat{ flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 6px; text-align:center; }
#vo-root .tk-stat b{ display:block; font-size:20px; color:var(--navy); line-height:1.1; }
#vo-root .tk-stat span{ font-size:11px; color:#6b7280; }
#vo-root .tk-scope{ width:100%; margin:0 0 12px; background:#eef2f7; color:var(--navy); border:1px solid #dde3ea; border-radius:10px; padding:9px; font-size:13px; font-weight:600; }
#vo-root .tk-list{ display:flex; flex-direction:column; gap:8px; }
#vo-root .tk-row{ border:1px solid var(--line); border-left:4px solid #c4ccd6; border-radius:10px; padding:10px 12px; background:#fff; }
#vo-root .tk-row.st-requested{ border-left-color:#cf8a15; background:#fffaf0; }
#vo-root .tk-row.st-pulling{ border-left-color:#185fa5; background:#eef5fc; }
#vo-root .tk-row.st-parked{ border-left-color:#2e7d32; }
#vo-root .tk-row.st-awaiting_park{ border-left-color:#8a93a0; }
#vo-root .tk-row.st-out{ border-left-color:#cbd2da; opacity:.85; }
#vo-root .tk-top{ display:flex; align-items:center; gap:8px; }
#vo-root .tk-ticket{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; color:var(--navy); }
#vo-root .tk-pill{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#eef2f7; color:#42505f; }
#vo-root .tk-pill.st-requested{ background:#faeeda; color:#854f0b; }
#vo-root .tk-pill.st-pulling{ background:#d3e4f7; color:#0c447c; }
#vo-root .tk-pill.st-parked{ background:#e6f4e6; color:#27500a; }
#vo-root .tk-pill.st-awaiting_park{ background:#eef1f5; color:#52606e; }
#vo-root .tk-pill.st-at_curb{ background:#fff4cc; color:#7a5b12; }
#vo-root .tk-row.st-at_curb{ border-left-color:#cf8a15; background:#fffbf0; }
#vo-root .tk-handoff{ width:100%; margin-top:8px; padding:14px; font-size:15px; font-weight:800; letter-spacing:.04em; color:#fff; background:linear-gradient(135deg,#cf8a15,#9c690b); border:0; border-radius:10px; cursor:pointer; box-shadow:0 4px 10px rgba(207,138,21,.25); }
#vo-root .tk-handoff:active{ transform:scale(.99); }
#vo-root .tk-stat.alert{ background:#fff4cc; border:1px solid #f0d9a6; }
#vo-root .tk-stat.alert b{ color:#7a5b12; }
#vo-root .tk-since{ margin-left:auto; font-size:12px; font-weight:700; color:#6b7280; }
#vo-root .tk-car{ font-size:15px; font-weight:600; color:#1f2733; margin-top:4px; }
#vo-root .tk-meta{ font-size:12.5px; color:#6b7280; margin-top:2px; }
#vo-root .tk-tags{ margin-top:6px; display:flex; flex-wrap:wrap; gap:5px; }
#vo-root .tk-tag{ font-size:10.5px; font-weight:700; border-radius:5px; padding:2px 7px; background:#eef2f7; color:#42505f; }
#vo-root .tk-tag.osv{ background:#fbe3e3; color:#a32d2d; }
#vo-root .tk-tag.prior{ background:#faeeda; color:#854f0b; }
#vo-root .tk-note{ font-size:12.5px; color:#52606e; margin-top:6px; font-style:italic; }
#vo-root .tk-ret{ margin-top:16px; }
#vo-root .tk-ret summary{ cursor:pointer; font-weight:600; color:var(--navy); padding:8px 0; }
/* intake payment + condition photos */
#vo-root .vo-seg-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
#vo-root .vo-seg-row .seg{ font-size:13px; }
/* OSV override hint (auto-flagged + user unchecked) */
#vo-root .vo-osv-hint{ margin:8px 0 0; padding:10px 12px; background:#fff5e6; color:#a86c0a; border:1px solid #f3d49a; border-radius:10px; font-size:12.5px; font-weight:600; line-height:1.35; }
/* Payment method icon buttons (intake) */
#vo-root .vo-pay-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:8px; }
#vo-root button.vo-pay-btn{ width:auto !important; min-width:0 !important; margin:0 !important; padding:12px 6px !important; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff; color:#42505f; border:1.5px solid #d8dee8; border-radius:14px; font-weight:700; font-size:12px; cursor:pointer; transition:transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; }
#vo-root button.vo-pay-btn .vo-pay-ico{ width:42px; height:42px; border-radius:50%; background:#eef2f7; color:#294a70; display:flex; align-items:center; justify-content:center; transition:background .12s ease, color .12s ease, box-shadow .12s ease; }
#vo-root button.vo-pay-btn .vo-pay-lbl{ font-size:12px; letter-spacing:.02em; }
#vo-root button.vo-pay-btn:hover{ border-color:#b9c4d3; }
#vo-root button.vo-pay-btn:active{ transform:scale(.97); }
#vo-root button.vo-pay-btn.active{ border-color:#294a70; background:#f4f8fe; color:#1a3354; box-shadow:0 4px 14px rgba(41,74,112,.18); }
#vo-root button.vo-pay-btn.active .vo-pay-ico{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; box-shadow:0 6px 16px rgba(41,74,112,.28); }
#vo-root button.vo-pay-btn[data-pay="cash"].active{ border-color:#15a692; color:#0b6e60; }
#vo-root button.vo-pay-btn[data-pay="cash"].active .vo-pay-ico{ background:linear-gradient(135deg,#15a692,#10867a); box-shadow:0 6px 16px rgba(21,166,146,.30); }
#vo-root button.vo-pay-btn[data-pay="card"].active{ border-color:#3a87ff; color:#1d4ed8; }
#vo-root button.vo-pay-btn[data-pay="card"].active .vo-pay-ico{ background:linear-gradient(135deg,#3a87ff,#2476f7); box-shadow:0 6px 16px rgba(58,135,255,.30); }
#vo-root button.vo-pay-btn[data-pay="validation"].active{ border-color:#e69b1e; color:#a86c0a; }
#vo-root button.vo-pay-btn[data-pay="validation"].active .vo-pay-ico{ background:linear-gradient(135deg,#e69b1e,#cf8a15); box-shadow:0 6px 16px rgba(230,155,30,.30); }
/* Photo capture slots — buttons turn into thumbnails after capture (4-up, 1:1 aspect) */
#vo-root .vo-photo-slots{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
#vo-root button.vo-photo-slot{ position:relative; width:auto !important; margin:0 !important; padding:0 !important; aspect-ratio:1/1; background:#fff; color:#42505f; border:1.5px dashed #b9c4d3; border-radius:14px; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition:border-color .12s ease, background .12s ease, transform .08s ease, box-shadow .12s ease; font-family:inherit; }
#vo-root button.vo-photo-slot:hover{ border-color:#294a70; background:#f4f8fe; }
#vo-root button.vo-photo-slot:active{ transform:scale(.98); }
#vo-root .vo-photo-slot-ico{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#eef2f7; color:#294a70; }
#vo-root .vo-photo-slot-lbl{ font-size:12px; font-weight:800; color:#42505f; text-transform:uppercase; letter-spacing:.04em; }
/* Filled state */
#vo-root button.vo-photo-slot.filled{ border:1.5px solid #294a70; background:#1f2733; box-shadow:0 4px 12px rgba(15,26,44,.20); }
#vo-root button.vo-photo-slot.filled img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
#vo-root button.vo-photo-slot.filled .vo-photo-slot-lbl{ position:absolute; bottom:6px; left:6px; right:30px; color:#fff; background:rgba(15,26,44,.65); padding:3px 8px; border-radius:6px; font-size:11px; backdrop-filter:blur(4px); text-align:left; z-index:2; }
#vo-root .vo-photo-slot-x{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(15,26,44,.75); color:#fff; font-size:14px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; border:2px solid #fff; }
#vo-root .vo-photo-slot-x:hover{ background:#c62828; }
#vo-root button.vo-photo-slot.uploading{ opacity:.7; pointer-events:none; }
#vo-root button.vo-photo-slot.uploading::after{ content:""; position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,rgba(41,74,112,.15),rgba(26,51,84,.15)); animation:voPulse 1.2s ease-in-out infinite; }
@keyframes voPulse{ 0%,100%{opacity:.3} 50%{opacity:.7} }
#vo-root .vo-photo-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
#vo-root .vo-photo-btn{ width:100%; padding:14px 0; font-size:13px; font-weight:700; background:#fff; color:var(--navy); border:1px dashed #b9c4d3; border-radius:10px; cursor:pointer; }
#vo-root .vo-photo-btn:hover{ border-color:var(--navy); background:#f4f8fe; }
#vo-root .vo-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
#vo-root .vo-photo-cell{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000; }
#vo-root .vo-photo-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
#vo-root .vo-photo-cell .lbl{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:700; text-align:center; padding:2px 0; text-transform:uppercase; }
#vo-root .vo-photo-cell .x{ position:absolute; top:2px; right:2px; width:20px; height:20px; padding:0; line-height:1; font-size:14px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; }
/* alert banner */
#vo-root .vo-alert-banner{ background:#fbe3e3; border:1px solid #f3c4c0; color:#a32d2d; border-radius:10px; padding:10px 14px; font-size:13.5px; margin-bottom:12px; cursor:pointer; }
#vo-root .vo-alert-banner.med{ background:#fbf3df; border-color:#f0d9a6; color:#7a5b12; }
#vo-root .vo-alert-banner.high{ background:#fbe3e3; border-color:#f3c4c0; color:#a32d2d; }
#vo-root .vo-alert-list{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:12px; }
#vo-root .vo-alert-row{ font-size:13px; padding:6px 8px; border-bottom:1px solid #f0f2f5; display:flex; gap:8px; align-items:center; }
#vo-root .vo-alert-row:last-child{ border-bottom:0; }
#vo-root .vo-alert-row .sev{ font-size:10.5px; font-weight:800; border-radius:5px; padding:2px 6px; }
#vo-root .vo-alert-row .sev.high{ background:#fbe3e3; color:#a32d2d; } #vo-root .vo-alert-row .sev.med{ background:#fbf3df; color:#7a5b12; }
/* pay totals on dashboard */
#vo-root .vo-paytot{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
#vo-root .vo-paytot .cell{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 6px; text-align:center; }
#vo-root .vo-paytot .cell b{ display:block; font-size:18px; color:var(--navy); }
#vo-root .vo-paytot .cell span{ font-size:11px; color:#6b7280; }
/* ticket detail photos */
#vo-root .tk-photos{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:6px; }
#vo-root .tk-photos img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; cursor:pointer; }
#vo-root .tk-tag.vip{ background:#fbf3df; color:#7a5b12; border:1px solid #e6c87a; }
#vo-root .tk-tag.plate{ background:#1f2733; color:#fff; font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; }
#vo-root .tk-row.vip{ border-left-color:#e69b1e !important; box-shadow:0 0 0 2px #fbf3df inset; }
#vo-root .tk-cd{ display:flex; align-items:center; justify-content:space-between; background:#fffaf0; border:1px solid #f0d9a6; border-radius:8px; padding:6px 10px; margin-top:8px; font-size:13px; color:#7a5b12; }
#vo-root .tk-cd b{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:18px; }
#vo-root .tk-cd b.warn{ color:#c62828; } #vo-root .tk-cd b.over{ color:#c62828; }
#vo-root .tk-cnotes{ display:flex; flex-direction:column; gap:5px; margin-top:8px; }
#vo-root .tk-cnote{ background:#fff3d6; border-left:3px solid #cf8a15; border-radius:6px; padding:6px 9px; font-size:12.5px; color:#42505f; }
#vo-root .tk-cnote.tgt-driver{ background:#e6f1fb; border-left-color:#185fa5; }
#vo-root .tk-cnote.tgt-lot{ background:#faece7; border-left-color:#993c1d; }
#vo-root .tk-cnote b{ font-size:10px; letter-spacing:.06em; margin-right:4px; opacity:.85; }
#vo-root .tk-cnote-from{ color:#9aa3af; font-style:italic; }
#vo-root .tk-cnote .ack{ float:right; font-weight:700; color:#27500a; text-decoration:none; }
/* AI snap on intake */
#vo-root .vo-ai-wrap{ margin:8px 0 4px; }
#vo-root .vo-ai-btn{ width:100%; padding:12px; font-size:15px; font-weight:700; background:linear-gradient(135deg,#1a3354,#294a70); color:#fff; border:0; border-radius:10px; cursor:pointer; }
#vo-root .vo-ai-result{ margin-top:8px; padding:8px 10px; background:#f4f8fe; border:1px solid #d9e2ee; border-radius:8px; font-size:13px; }
#vo-root .vo-ai-result .vo-ai-ok{ color:#27500a; font-weight:700; }
#vo-root .vo-ai-result .vo-ai-err{ color:#a32d2d; font-weight:700; }
#vo-root .vo-ai-result .vo-ai-vip{ display:inline-block; margin-top:4px; background:#fbf3df; color:#7a5b12; border:1px solid #e6c87a; padding:3px 8px; border-radius:6px; font-weight:700; font-size:12px; }
#vo-root .vo-ai-result .vo-ai-regular{ display:inline-block; margin-top:4px; background:#eef2f7; color:#42505f; padding:3px 8px; border-radius:6px; font-weight:700; font-size:12px; }
#vo-root .vo-ai-result .vo-ai-note{ color:#6b7280; font-size:12px; margin-top:4px; }
#vo-root .vo-ai-spinner{ color:#6b7280; }
/* chat
   NOTE: We use !important + explicit width:auto on the buttons because the base
   #vo-root button rule applies width:100% to every button. Without these overrides
   the tabs each take a full row and the Send button steals the entire composer width. */
#vo-root .vo-chat-tabs{ display:flex !important; flex-wrap:wrap; gap:6px; padding:8px 0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#vo-root button.vo-chat-tab{ flex:0 0 auto; width:auto !important; margin:0; padding:8px 14px; border-radius:999px; background:#eef2f7; color:#42505f; font-size:13px; font-weight:700; border:1px solid transparent; cursor:pointer; white-space:nowrap; line-height:1; }
#vo-root .vo-chat-tab .badge{ display:inline-block; margin-left:6px; background:rgba(0,0,0,.18); padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; color:#fff; }
#vo-root .vo-chat-tab.on{ background:#294a70; color:#fff; }
#vo-root .vo-chat-tab.on .badge{ background:rgba(255,255,255,.22); }
#vo-root .vo-chat-tab.empty{ opacity:.55; }
#vo-root .vo-chat-tab.dm{ border:1px dashed #b9c4d3; background:#fff; color:#294a70; }
#vo-root .vo-chat-tab.dm-active{ background:#5a3a92; color:#fff; }
#vo-root .vo-chat-tab.dm-active .x{ margin-left:8px; color:rgba(255,255,255,.85); text-decoration:none; font-weight:800; }
#vo-root .vo-chat-wrap{ display:flex; flex-direction:column; min-height:calc(100vh - 260px); }
#vo-root .vo-chat-body{ flex:1 1 auto; min-height:280px; overflow-y:auto; padding:10px; background:#f4f6f9; border-radius:12px; }
#vo-root .vo-chat-empty{ text-align:center; color:#6b7280; padding:24px 12px; font-size:14px; }
#vo-root .vo-chat-msg{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:6px 0; max-width:80%; }
#vo-root .vo-chat-msg.mine{ background:#eef5fc; border-color:#cfdef0; margin-left:auto; }
#vo-root .vo-chat-meta{ font-size:11px; color:#6b7280; margin-bottom:3px; }
#vo-root .vo-chat-cls{ display:inline-block; font-size:10px; font-weight:700; border-radius:4px; padding:1px 6px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em; }
#vo-root .vo-chat-cls.cls-front{ background:#eaf3de; color:#27500a; }
#vo-root .vo-chat-cls.cls-driver{ background:#e6f1fb; color:#0c447c; }
#vo-root .vo-chat-cls.cls-lot{ background:#faece7; color:#993c1d; }
#vo-root .vo-chat-cls.cls-manager{ background:#efe7fa; color:#5a3a92; }
#vo-root .vo-chat-body-txt{ font-size:14px; line-height:1.35; word-wrap:break-word; }
/* Composer — grid is iron-clad. 1fr for the input, auto for the Send button. The
   global "button { width:100% }" still applies to <button>, so we force width:auto
   on the Send button so it sits in its own grid column instead of stretching the row. */
#vo-root form.vo-chat-compose,
#vo-root .vo-chat-compose{ display:grid !important; grid-template-columns:1fr auto; gap:8px; padding:10px 0 4px; align-items:center; margin:0; }
#vo-root .vo-chat-compose input,
#vo-root .vo-chat-compose input[type="text"]{ width:100% !important; min-width:0 !important; margin:0 !important; padding:12px 16px; border-radius:999px; border:1px solid var(--line); font-size:15px; background:#fff; box-sizing:border-box; }
#vo-root .vo-chat-compose input:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.12); }
#vo-root button.vo-chat-send,
#vo-root .vo-chat-send{ width:auto !important; margin:0 !important; background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; padding:12px 22px; border:0; border-radius:999px; font-weight:800; cursor:pointer; line-height:1; }
#vo-root .vo-chat-send:active{ transform:scale(.98); }
/* DM picker overlay */
#vo-root .vo-chat-picker{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
#vo-root .vo-chat-picker-h{ font-size:13px; font-weight:700; color:#42505f; padding:0 4px 8px; border-bottom:1px solid #eef2f7; }
#vo-root .vo-chat-picker-row{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:10px 6px; border:0; border-bottom:1px solid #f0f2f5; background:#fff; cursor:pointer; font-size:14px; text-align:left; }
#vo-root .vo-chat-picker-row:last-of-type{ border-bottom:0; }
#vo-root .vo-chat-picker-row:hover{ background:#f4f8fe; }
#vo-root .vo-chat-picker-v{ font-size:12px; color:#6b7280; }
#vo-root .vo-chat-picker-cancel{ width:100%; padding:10px; margin-top:8px; background:#fff; color:#52606e; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; }
/* === iPhone Messages-style chat (v1.6.0 rebuild) === */
/* Thread list */
#vo-root .vo-msg-threads{ display:flex; flex-direction:column; gap:2px; }
#vo-root .vo-msg-section{ font-size:12px; font-weight:700; color:#8a93a0; text-transform:uppercase; letter-spacing:.06em; padding:14px 6px 6px; }
#vo-root button.vo-msg-thread{ width:100% !important; margin:0 !important; display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:12px 8px; background:#fff; border:0; border-bottom:1px solid #eef1f5; cursor:pointer; text-align:left; }
#vo-root .vo-msg-thread.has-unread{ background:#f4f8fe; }
#vo-root .vo-msg-mid{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#vo-root .vo-msg-toprow{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
#vo-root .vo-msg-name{ font-size:15px; color:#1f2733; font-weight:700; }
#vo-root .vo-msg-when{ font-size:12px; color:#9aa3af; font-weight:500; white-space:nowrap; }
#vo-root .vo-msg-prev{ font-size:13px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vo-root .vo-msg-prev.bold{ color:#1f2733; font-weight:600; }
#vo-root .vo-msg-unread{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; background:#ff3b30; color:#fff; font-size:12px; font-weight:800; border-radius:999px; box-shadow:0 1px 3px rgba(255,59,48,.35); }
#vo-root button.vo-msg-new{ width:100% !important; margin-top:14px !important; background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; padding:14px; border:0; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; }
/* Avatar circles */
#vo-root .vo-msg-av{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex:0 0 auto; background:#294a70; }
#vo-root .vo-msg-av.sm{ width:30px; height:30px; font-size:11px; }
#vo-root .vo-msg-av.ch.cls-all{ background:#294a70; }
#vo-root .vo-msg-av.ch.cls-lot{ background:#cf8a15; }
#vo-root .vo-msg-av.ch.cls-front{ background:#27786b; }
#vo-root .vo-msg-av.ch.cls-driver{ background:#185fa5; }
#vo-root .vo-msg-av.ch.cls-manager{ background:#5a3a92; }
#vo-root .vo-msg-av.dm.cls-driver{ background:#185fa5; }
#vo-root .vo-msg-av.dm.cls-front{ background:#27786b; }
#vo-root .vo-msg-av.dm.cls-lot{ background:#cf8a15; }
#vo-root .vo-msg-av.dm.cls-manager{ background:#5a3a92; }
#vo-root .vo-msg-av.dm{ background:#52606e; }
/* New-DM picker */
#vo-root .vo-msg-picker{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px 6px; }
#vo-root .vo-msg-picker-h{ font-size:12px; font-weight:700; color:#8a93a0; text-transform:uppercase; letter-spacing:.06em; padding:6px 8px 8px; border-bottom:1px solid #eef1f5; margin-bottom:4px; }
#vo-root button.vo-msg-picker-row{ width:100% !important; margin:0 !important; display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:center; padding:10px 8px; background:#fff; border:0; border-bottom:1px solid #f0f2f5; cursor:pointer; text-align:left; }
#vo-root button.vo-msg-picker-row:last-of-type{ border-bottom:0; }
#vo-root button.vo-msg-picker-cancel{ width:100% !important; padding:10px !important; margin-top:8px !important; background:#fff; color:#52606e; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px; }
#vo-root .vo-msg-picker .vo-msg-av{ width:36px; height:36px; font-size:12px; }
/* Conversation header (uses the existing .bar) */
#vo-root .vo-msg-bar .who{ color:#9aa3af; font-size:12px; }
/* Conversation body */
#vo-root .vo-msg-body{ background:#f4f6f9; border-radius:14px; padding:14px 10px; margin-bottom:8px; min-height:calc(100vh - 280px); max-height:calc(100vh - 240px); overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:6px; }
#vo-root .vo-msg-empty{ text-align:center; color:#8a93a0; padding:36px 16px; font-size:14px; }
#vo-root .vo-msg-row{ display:flex; gap:6px; align-items:flex-end; }
#vo-root .vo-msg-row.mine{ justify-content:flex-end; }
#vo-root .vo-msg-row.theirs{ justify-content:flex-start; }
#vo-root .vo-msg-bubblewrap{ max-width:78%; display:flex; flex-direction:column; }
#vo-root .vo-msg-row.mine .vo-msg-bubblewrap{ align-items:flex-end; }
#vo-root .vo-msg-row.theirs .vo-msg-bubblewrap{ align-items:flex-start; }
#vo-root .vo-msg-name-tiny{ font-size:11px; color:#6b7280; padding:0 10px 2px; }
#vo-root .vo-msg-bubble{ background:#e9e9eb; color:#1f2733; padding:8px 14px; border-radius:18px; font-size:15px; line-height:1.32; word-wrap:break-word; }
#vo-root .vo-msg-row.mine .vo-msg-bubble{ background:linear-gradient(180deg,#3a87ff,#2476f7); color:#fff; }
#vo-root .vo-msg-row.theirs .vo-msg-bubble{ background:#e9e9eb; color:#1f2733; }
#vo-root .vo-msg-bubble.has-photo{ padding:4px; }
#vo-root .vo-msg-text{ padding:0; }
#vo-root .vo-msg-bubble.has-photo .vo-msg-text{ padding:6px 10px 4px; }
#vo-root .vo-msg-photo img{ display:block; max-width:240px; max-height:280px; border-radius:14px; }
#vo-root .vo-msg-time{ font-size:10.5px; color:#9aa3af; padding:3px 10px 0; }
/* ⋯ menu on each bubble (sender or manager) */
#vo-root .vo-msg-bubble{ position:relative; }
#vo-root button.vo-msg-menu{ position:absolute; top:-10px; right:-8px; width:24px !important; height:24px; padding:0 !important; margin:0 !important; border-radius:50%; border:2px solid #fff; background:#1f2733; color:#fff; font-size:14px; font-weight:800; line-height:1; opacity:0; transition:opacity .12s ease; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(15,26,44,.25); }
#vo-root .vo-msg-row.mine button.vo-msg-menu{ right:auto; left:-8px; }
#vo-root .vo-msg-bubble:hover button.vo-msg-menu,
#vo-root button.vo-msg-menu:focus{ opacity:1; }
/* On touch devices show the menu by default — no hover, so make it always visible (smaller) */
@media (hover: none){
  #vo-root button.vo-msg-menu{ opacity:.6; }
}
/* Deleted-message placeholder */
#vo-root .vo-msg-row.deleted .vo-msg-bubblewrap .vo-msg-deleted{ font-size:13px; color:#6b7280; font-style:italic; background:transparent; padding:4px 12px; border:1px dashed #cfd6df; border-radius:14px; display:inline-block; }
/* Composer */
#vo-root form.vo-msg-compose,
#vo-root .vo-msg-compose{ display:grid !important; grid-template-columns:38px 1fr 38px; gap:8px; align-items:center; padding:8px 0 6px; margin:0; }
#vo-root button.vo-msg-attach{ width:38px !important; height:38px; padding:0 !important; margin:0 !important; border:0; background:#eef2f7; color:#294a70; border-radius:50%; font-size:18px; cursor:pointer; line-height:1; }
#vo-root .vo-msg-compose input,
#vo-root .vo-msg-compose input[type="text"]{ width:100% !important; min-width:0 !important; margin:0 !important; padding:10px 16px; border-radius:999px; border:1px solid var(--line); font-size:15px; background:#fff; box-sizing:border-box; }
#vo-root .vo-msg-compose input:focus{ outline:0; border-color:#3a87ff; box-shadow:0 0 0 3px rgba(58,135,255,.15); }
#vo-root button.vo-msg-send{ width:38px !important; height:38px; padding:0 !important; margin:0 !important; background:linear-gradient(180deg,#3a87ff,#1f6df0); color:#fff; border:0; border-radius:50%; font-size:0; cursor:pointer; line-height:0; display:flex !important; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(58,135,255,.35); }
#vo-root button.vo-msg-send svg{ display:block; }
#vo-root .vo-msg-send:active{ transform:scale(.95); }
#vo-root .vo-msg-send:hover{ background:linear-gradient(180deg,#4a92ff,#2476f7); }
/* @-mention dropdown above the composer */
#vo-root .vo-msg-mention{ position:relative; margin:0 0 6px; background:#fff; border:1px solid #d8dee8; border-radius:14px; box-shadow:0 -6px 18px rgba(15,26,44,.10); max-height:240px; overflow-y:auto; }
#vo-root .vo-mention-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f2f5; }
#vo-root .vo-mention-row:last-child{ border-bottom:0; }
#vo-root .vo-mention-row.sel,
#vo-root .vo-mention-row:hover{ background:#eef4ff; }
#vo-root .vo-mention-av{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex:0 0 30px; background:#94a3b8; }
#vo-root .vo-mention-av.cls-d{ background:linear-gradient(135deg,#3a87ff,#2476f7); }
#vo-root .vo-mention-av.cls-f{ background:linear-gradient(135deg,#15a692,#10867a); }
#vo-root .vo-mention-av.cls-l{ background:linear-gradient(135deg,#e69b1e,#cf8a15); }
#vo-root .vo-mention-av.cls-m{ background:linear-gradient(135deg,#294a70,#1a3354); }
#vo-root .vo-mention-name{ flex:1 1 auto; font-size:14px; color:#1f2733; }
#vo-root .vo-mention-name b{ font-weight:700; }
#vo-root .vo-mention-li{ color:#6b7280; font-weight:600; }
/* In-bubble mention pill */
#vo-root .vo-tag{ color:#1d4ed8; font-weight:700; background:rgba(58,135,255,.10); padding:0 4px; border-radius:5px; }
#vo-root .vo-msg-row.mine .vo-tag{ color:#fff; background:rgba(255,255,255,.22); }
#vo-root .vo-tag.you{ color:#0b3d3d; background:rgba(21,166,146,.18); }
#vo-root .vo-msg-row.mine .vo-tag.you{ color:#fff; background:rgba(255,255,255,.28); }
/* Pending photo preview above the composer */
#vo-root .vo-msg-pending{ padding:6px 0; }
#vo-root .vo-msg-pending-wrap{ position:relative; display:inline-block; line-height:0; }
#vo-root .vo-msg-pending-wrap img{ display:block; max-width:140px; max-height:140px; border-radius:14px; border:2px solid #3a87ff; box-shadow:0 4px 12px rgba(58,135,255,.20); }
#vo-root button.vo-msg-pending-wrap-x,
#vo-root .vo-msg-pending-wrap .x{ position:absolute !important; top:-8px !important; right:-8px !important; left:auto !important; width:26px !important; height:26px !important; padding:0 !important; margin:0 !important; border-radius:50% !important; border:2px solid #fff !important; background:#1f2733 !important; color:#fff !important; cursor:pointer; font-weight:800 !important; font-size:14px !important; line-height:1 !important; box-shadow:0 4px 10px rgba(15,26,44,.30); display:flex; align-items:center; justify-content:center; }
#vo-root .vo-msg-pending-wrap .x:hover{ background:#c62828 !important; }
#vo-root .vo-msg-pending-text{ color:#6b7280; font-size:13px; }
/* Per-car note modal */
#vo-root .vo-cnote-modal{ position:fixed; inset:0; z-index:10000; background:rgba(15,26,44,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
#vo-root .vo-cnote-box{ background:#fff; border-radius:18px; padding:20px; width:100%; max-width:440px; box-shadow:0 18px 50px rgba(15,26,44,.35); }
#vo-root .vo-cnote-h{ font-size:18px; font-weight:800; color:#1f2733; margin:0 0 6px; }
#vo-root .vo-cnote-h span{ color:#15a692; font-family:ui-monospace,Menlo,Consolas,monospace; }
#vo-root .vo-cnote-lbl{ display:block; font-size:11px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; }
#vo-root #cnoteBody{ width:100% !important; min-height:90px; border:1px solid #cfd6df; border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.4; resize:vertical; font-family:inherit; box-sizing:border-box; background:#fff; }
#vo-root #cnoteBody:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.12); }
#vo-root .vo-cnote-btns{ display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:18px; }
#vo-root button.vo-cnote-cancel{ width:auto !important; padding:13px !important; margin:0 !important; background:#eef2f7; color:#42505f; border:0; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; }
#vo-root button.vo-cnote-save{ width:auto !important; padding:13px !important; margin:0 !important; background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; border:0; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; }
#vo-root button.vo-cnote-save:active{ transform:scale(.98); }
/* POS multi-ticket checkout */
/* Check-out (POS) — navy/gold palette, grid-locked layout */
#vo-root .vo-pos-card{ padding:16px 16px 18px; }
#vo-root .vo-pos-sub{ margin:0 0 14px; color:#42505f; font-size:13.5px; line-height:1.45; }
#vo-root form.vo-pos-add,
#vo-root .vo-pos-add{ display:grid !important; grid-template-columns:1fr auto; gap:8px; margin:0 0 12px; padding:0; }
#vo-root .vo-pos-add input{ width:100% !important; min-width:0 !important; margin:0 !important; padding:14px 16px; font-size:17px; border:1.5px solid #d8dee8; border-radius:12px; font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; background:#fff; box-sizing:border-box; color:#1f2733; }
#vo-root .vo-pos-add input:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.15); }
#vo-root .vo-pos-add input::placeholder{ color:#9aa3af; letter-spacing:0; font-family:Inter,-apple-system,system-ui,sans-serif; }
#vo-root button.vo-pos-add-btn{ width:auto !important; min-width:0 !important; margin:0 !important; padding:0 18px !important; background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; border:0; border-radius:12px; font-weight:800; font-size:14px; letter-spacing:.04em; cursor:pointer; white-space:nowrap; box-shadow:0 4px 12px rgba(41,74,112,.20); }
#vo-root button.vo-pos-add-btn:active{ transform:scale(.97); }
#vo-root .vo-pos-head{ display:grid; grid-template-columns:1fr 0.7fr 1fr 30px; gap:8px; font-size:11px; font-weight:700; letter-spacing:.06em; color:#6b7280; text-transform:uppercase; padding:6px 4px; border-bottom:1px solid #e1e5ea; }
#vo-root .vo-pos-line{ display:grid; grid-template-columns:1fr 0.7fr 1fr 30px; gap:8px; align-items:center; padding:10px 4px; border-bottom:1px solid #f0f2f5; }
#vo-root .vo-pos-line .ticket{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800; padding:5px 9px; border-radius:6px; display:inline-block; width:fit-content; }
#vo-root .vo-pos-line .spot{ background:#eef2f7; color:#294a70; font-weight:800; padding:5px 9px; border-radius:6px; display:inline-block; width:fit-content; }
#vo-root .vo-pos-line .price{ font-size:16px; font-weight:700; color:#1f2733; }
#vo-root .vo-pos-line .x{ color:#c62828; font-size:20px; font-weight:800; text-decoration:none; text-align:center; }
#vo-root .vo-pos-vip{ color:#e69b1e; font-size:14px; }
#vo-root .vo-pos-fee{ color:#a32d2d; font-size:11px; font-weight:700; }
#vo-root .vo-pos-empty{ text-align:center; color:#6b7280; padding:22px 12px; font-size:13.5px; border:1.5px dashed #cfd6df; border-radius:12px; background:#fafbfc; }
#vo-root .vo-pos-total{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:linear-gradient(135deg,#1a3354,#0f2340); color:#fff; border-radius:14px; margin-top:14px; box-shadow:0 6px 18px rgba(15,26,44,.20); }
#vo-root .vo-pos-total span{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; font-weight:700; }
#vo-root .vo-pos-total b{ font-size:26px; font-weight:800; background:linear-gradient(135deg,#e69b1e,#cf8a15); color:#0f2340; padding:6px 16px; border-radius:10px; box-shadow:0 4px 12px rgba(230,155,30,.30); }
#vo-root .vo-pos-label{ margin:16px 0 8px; font-size:11px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; }
#vo-root .vo-pos-actions{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; }
#vo-root .vo-pos-actions-alt{ margin-top:8px; }
#vo-root button.vo-pos-btn{ width:auto !important; min-width:0 !important; margin:0 !important; padding:14px 8px !important; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:800; letter-spacing:.02em; color:#fff; border:0; border-radius:14px; cursor:pointer; transition:transform .08s ease, box-shadow .12s ease; }
#vo-root button.vo-pos-btn .vo-pos-ico{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
#vo-root button.vo-pos-btn:active{ transform:scale(.97); }
#vo-root button.vo-pos-btn.cash{ background:linear-gradient(135deg,#15a692,#0e7a6c); box-shadow:0 6px 16px rgba(21,166,146,.28); }
#vo-root button.vo-pos-btn.card{ background:linear-gradient(135deg,#3a87ff,#2476f7); box-shadow:0 6px 16px rgba(58,135,255,.28); }
#vo-root button.vo-pos-btn.alt{ background:#fff; color:#294a70; border:1.5px solid #d8dee8; box-shadow:none; }
#vo-root button.vo-pos-btn.alt .vo-pos-ico{ background:#eef2f7; color:#294a70; }
#vo-root button.vo-pos-btn.alt:hover{ border-color:#294a70; background:#f4f8fe; }
#vo-root .vo-pos-foot{ margin:14px 0 0; padding:10px 12px; background:#f4f6f9; border-radius:10px; font-size:12px; color:#6b7280; line-height:1.45; }
#vo-root .vo-pos-foot a{ color:#294a70; font-weight:700; text-decoration:none; border-bottom:1px dashed #294a70; }
#vo-root .vo-pos-card.vo-pos-payonly .vo-pos-foot{ background:#fff5e6; color:#a86c0a; border:1px solid #f3d49a; }
#vo-root .vo-pos-card.vo-pos-payonly .vo-pos-foot a{ color:#a86c0a; border-color:#a86c0a; }
/* Driver pickup view — full-bleed, book-color background, huge location + vehicle */
#vo-root #dpull{ padding:0; }
#vo-root .vo-dpull{
  position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column;
  padding:18px 22px 26px; background:#0f1a2c; color:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
#vo-root .vo-dpull-top{ display:flex; align-items:center; justify-content:space-between; opacity:.85; }
#vo-root .vo-dpull-back{
  background:rgba(0,0,0,.18); border:1px solid currentColor; color:inherit;
  padding:8px 12px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer;
}
#vo-root .vo-dpull-venue{ font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
#vo-root .vo-dpull-pickup{
  margin-top:8px; font-size:18px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.8;
}
#vo-root .vo-dpull-ticket{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:68px; font-weight:800;
  letter-spacing:3px; line-height:1; margin:2px 0 24px;
}
#vo-root .vo-dpull-loc-cap{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
#vo-root .vo-dpull-loc{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(48px, 12vw, 96px); font-weight:900; line-height:1.05;
  letter-spacing:1px; margin:4px 0 18px;
}
#vo-root .vo-dpull-veh{
  font-size:clamp(28px, 6vw, 38px); font-weight:800; line-height:1.15; letter-spacing:.02em;
}
#vo-root .vo-dpull-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
#vo-root .vo-dpull-tag{
  font-size:13px; font-weight:800; letter-spacing:.08em; padding:6px 12px;
  border-radius:999px; background:rgba(0,0,0,.20); border:1px solid currentColor;
}
#vo-root .vo-dpull-bottom{ margin-top:auto; padding-top:24px; }
#vo-root .vo-dpull-deliver{
  width:100%; padding:22px; font-size:22px; font-weight:900; letter-spacing:.06em;
  border:0; border-radius:18px; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
#vo-root .vo-dpull-deliver:active{ transform:scale(.99); }
#vo-root .vo-dpull-handoff{
  width:100%; margin-top:10px; padding:14px; font-size:14px; font-weight:700;
  letter-spacing:.04em; border-radius:14px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid currentColor; opacity:.85;
}
#vo-root .vo-dpull-handoff:active{ transform:scale(.99); }
/* Time off v2 */
#vo-root .vo-toggle-group{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:3px; background:#eef2f7; border:1px solid #cfd6df; border-radius:12px; margin-bottom:10px; }
#vo-root .vo-toggle-group .vo-toggle{ position:relative; display:flex; align-items:center; justify-content:center; padding:9px 6px; font-size:12.5px; font-weight:700; color:#42505f; text-align:center; cursor:pointer; border-radius:9px; background:transparent; line-height:1.15; white-space:nowrap; transition:background .15s, color .15s; }
#vo-root .vo-toggle-group .vo-toggle input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
#vo-root .vo-toggle-group .vo-toggle:has(input:checked){ background:#294a70; color:#fff; box-shadow:0 1px 3px rgba(16,32,56,.18); }
#vo-root .vo-toggle-group .vo-toggle.active{ background:#294a70; color:#fff; box-shadow:0 1px 3px rgba(16,32,56,.18); }
#vo-root .vo-to-type{ font-size:12px; gap:3px; margin-bottom:10px; }
/* ============================================================
   Modern controls — universal sweep (v1.7.0)
   Catches every bare browser control that isn't already wrapped
   in a brand-styled component, so nothing in the SPA looks
   like raw OS chrome. Scoped to #vo-root so admin pages stay
   intact, and excluded for the already-styled wrappers via
   :not() selectors.
   ============================================================ */

/* Native <select> — styled chevron, brand padding, navy focus */
#vo-root select:not(.vo-time-select):not([multiple]){
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:11px 38px 11px 14px;
  font-size:15px; font-family:inherit; color:#1f2733;
  background:#fff; border:1.5px solid #d8dee8; border-radius:10px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23294a70' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  cursor:pointer; box-sizing:border-box; transition:border-color .12s ease, box-shadow .12s ease;
}
#vo-root select:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.15); }

/* Native text-like inputs not already styled — brand padding + focus ring */
#vo-root input[type="text"]:not(.vo-combo input):not(.vo-pos-add input):not([readonly]),
#vo-root input[type="tel"],
#vo-root input[type="email"],
#vo-root input[type="number"]:not(.vo-pos-line input):not(.vo-to-partial input),
#vo-root input[type="date"]:not(.vo-to-stack > input):not(.vo-to-partial input),
#vo-root input[type="time"]:not(.vo-to-partial input),
#vo-root input[type="password"],
#vo-root textarea{
  width:100%; padding:11px 14px;
  font-size:15px; font-family:inherit; color:#1f2733;
  background:#fff; border:1.5px solid #d8dee8; border-radius:10px;
  box-sizing:border-box; transition:border-color .12s ease, box-shadow .12s ease;
}
#vo-root input:focus, #vo-root textarea:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.15); }

/* Bare checkboxes that escaped explicit styling — give them at least a navy accent.
   .vo-to-toggle, .vo-day-toggle, .vo-toggle, .vo-check, .vo-pay-btn, .vo-cnote-tgt, .vo-msg-pending
   all hide the native input already; this catches the leftovers (e.g. cnote modal toggles,
   schedule builder, settings inline checkboxes). */
#vo-root input[type="checkbox"]:not(.no-style){
  accent-color:#294a70; width:18px; height:18px; cursor:pointer;
}
#vo-root input[type="radio"]:not(.no-style){
  accent-color:#294a70; width:18px; height:18px; cursor:pointer;
}

/* Native file inputs — keep accessible but hide the awkward chrome.
   Components that need a real visible dropzone (intake photo grid, chat attach)
   already use a styled label + hidden input via .hide / clip-rect. */
#vo-root input[type="file"]:not(.hide){
  appearance:none; padding:8px 12px;
  font-size:13px; font-family:inherit;
  background:#eef2f7; border:1.5px dashed #b9c4d3; border-radius:10px; color:#42505f;
  cursor:pointer;
}
#vo-root input[type="file"]::-webkit-file-upload-button{
  background:linear-gradient(135deg,#294a70,#1a3354); color:#fff;
  border:0; border-radius:8px; padding:8px 14px; margin-right:10px;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
}

/* Make sure labels above inputs read as proper field labels everywhere */
#vo-root .card > label{ display:block; margin:14px 0 6px; font-size:12.5px; font-weight:700; color:#42505f; text-transform:uppercase; letter-spacing:.02em; }
#vo-root .card > label:first-of-type{ margin-top:0; }

/* Clock-in queue — geo line */
#vo-root .vo-cq-geo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 0; padding:10px 12px; background:#f4f6f9; border:1px solid #e1e5ea; border-radius:10px; }
#vo-root .vo-cq-geo-pill{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
#vo-root .vo-cq-geo.in .vo-cq-geo-pill{ background:linear-gradient(135deg,#15a692,#0e7a6c); color:#fff; }
#vo-root .vo-cq-geo.out{ background:#fff5e6; border-color:#f3d49a; }
#vo-root .vo-cq-geo.out .vo-cq-geo-pill{ background:linear-gradient(135deg,#e69b1e,#cf8a15); color:#fff; }
#vo-root .vo-cq-geo.unknown .vo-cq-geo-pill{ background:#eef2f7; color:#6b7280; }
#vo-root .vo-cq-geo-ico{ font-size:14px; }
#vo-root .vo-cq-geo-txt{ font-size:13px; color:#6b7280; }
#vo-root .vo-cq-geo-dist{ font-size:13px; color:#42505f; font-weight:600; }
#vo-root .vo-cq-geo-map{ margin-left:auto; font-size:13px; font-weight:700; color:#294a70; text-decoration:none; border-bottom:1px dashed #294a70; }
#vo-root .vo-cq-geo-map:hover{ color:#1a3354; border-color:#1a3354; }
/* Custom checkbox-with-label — used for Multiple days / Specific hours / Recurring.
   Native checkbox visually hidden, replaced by a 22×22 navy-bordered square that fills
   with navy gradient + white check mark when checked. Matches the brand. */
#vo-root label.vo-to-toggle{ position:relative; display:flex !important; align-items:center; gap:12px; margin-top:14px; padding:12px 14px !important; font-size:14.5px; font-weight:700; color:#1f2733; cursor:pointer; background:#fff; border:1.5px solid #d8dee8; border-radius:12px; width:auto !important; transition:border-color .12s ease, box-shadow .12s ease, background .12s ease; user-select:none; }
#vo-root label.vo-to-toggle:hover{ border-color:#294a70; background:#f4f8fe; }
#vo-root label.vo-to-toggle input[type="checkbox"]{ position:absolute !important; opacity:0; pointer-events:none; width:0 !important; height:0; margin:0; }
#vo-root label.vo-to-toggle::before{ content:""; flex:0 0 22px; width:22px; height:22px; border-radius:7px; background:#fff; border:2px solid #cfd6df; box-shadow:inset 0 1px 2px rgba(15,26,44,.05); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
#vo-root label.vo-to-toggle::after{ content:""; position:absolute; left:21px; top:50%; width:6px; height:11px; border:solid #fff; border-width:0 3px 3px 0; transform:translateY(-65%) rotate(45deg) scale(0); transform-origin:center; opacity:0; transition:transform .15s ease, opacity .15s ease; }
#vo-root label.vo-to-toggle:has(input:checked),
#vo-root label.vo-to-toggle.active{ border-color:#294a70; background:#f4f8fe; box-shadow:0 4px 14px rgba(41,74,112,.12); }
#vo-root label.vo-to-toggle:has(input:checked)::before,
#vo-root label.vo-to-toggle.active::before{ background:linear-gradient(135deg,#294a70,#1a3354); border-color:#1a3354; }
#vo-root label.vo-to-toggle:has(input:checked)::after,
#vo-root label.vo-to-toggle.active::after{ transform:translateY(-65%) rotate(45deg) scale(1); opacity:1; }
#vo-root label.vo-to-toggle span{ flex:1 1 auto; }
/* Force the .vo-toggle-group pills to fill their grid cell so the active state can't
   shrink to its text width and overlap the next pill — this bit the Ends row in v1.6.2. */
#vo-root .vo-toggle-group .vo-toggle{ min-width:0 !important; width:100% !important; box-sizing:border-box !important; justify-self:stretch; }
#vo-root .vo-to-partial{ background:#f4f6f9; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:6px; }
#vo-root .vo-to-partial > div{ display:flex; gap:10px; align-items:center; }
#vo-root .vo-to-partial label{ width:48px; color:#42505f; font-size:13px; }
/* Stack-layout variant: labels span full row, no narrow column. Wins over the .vo-to-partial label width rule. */
#vo-root .vo-to-partial.vo-to-stack > label,
#vo-root .vo-to-stack label.vo-to-sublbl,
#vo-root label.vo-to-sublbl{ display:block !important; width:auto !important; white-space:nowrap; color:#42505f; font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; margin:0 0 6px; padding:0; }
#vo-root .vo-to-partial.vo-to-stack > input,
#vo-root .vo-to-partial.vo-to-stack > select,
#vo-root .vo-to-partial.vo-to-stack > .vo-day-grid{ display:block; width:100%; box-sizing:border-box; }
/* From/To row inside the partial-hours box — label sits above input via flex column on each row */
#vo-root .vo-to-partial.vo-to-stack > .vo-to-timerow,
#vo-root .vo-to-stack .vo-to-timerow{ display:grid !important; grid-template-columns:64px 1fr; gap:10px 12px; align-items:center; margin:0 0 8px; }
#vo-root .vo-to-stack .vo-to-timerow:last-child{ margin-bottom:0; }
#vo-root .vo-to-stack .vo-to-timerow label.vo-to-sublbl{ margin:0; text-align:left; }
#vo-root .vo-to-stack .vo-to-timerow select.vo-time-select{ width:100%; padding:10px 12px; border:1px solid #cfd6df; border-radius:10px; background:#fff; font-size:15px; color:#1f2733; font-family:inherit; box-sizing:border-box; }
#vo-root .vo-to-stack .vo-to-timerow select.vo-time-select:focus{ outline:0; border-color:#294a70; box-shadow:0 0 0 3px rgba(41,74,112,.15); }
#vo-root .vo-to-partial input[type="time"], #vo-root .vo-to-partial input[type="number"]{ flex:1; padding:8px; border:1px solid #cfd6df; border-radius:8px; }
/* Day-of-week pills (recurring) */
#vo-root .vo-day-grid{ display:grid !important; grid-template-columns:repeat(7,1fr); gap:6px; margin:0; }
#vo-root label.vo-day-toggle{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; width:auto !important; min-height:44px; padding:6px 4px !important; background:#fff; color:#42505f; border:1.5px solid #d8dee8; border-radius:10px; font-size:12px; font-weight:700; cursor:pointer; text-align:center; transition:transform .08s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; user-select:none; }
#vo-root label.vo-day-toggle input{ position:absolute !important; opacity:0; pointer-events:none; width:0; height:0; margin:0; }
#vo-root label.vo-day-toggle span{ display:block; }
#vo-root label.vo-day-toggle:hover{ border-color:#294a70; background:#f4f8fe; }
#vo-root label.vo-day-toggle:has(input:checked),
#vo-root label.vo-day-toggle.active{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; border-color:#1a3354; box-shadow:0 4px 12px rgba(41,74,112,.25); }
/* Ends picker — pills for "No end date" / "On date" + the date input below */
#vo-root .vo-end-pick{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px; }
#vo-root .vo-end-pick label.vo-toggle{ display:flex !important; align-items:center; justify-content:center; min-height:44px; padding:8px 12px !important; background:#fff; color:#42505f; border:1.5px solid #d8dee8; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; text-align:center; }
#vo-root .vo-end-pick label.vo-toggle input{ position:absolute !important; opacity:0; pointer-events:none; width:0; height:0; }
#vo-root .vo-end-pick label.vo-toggle:has(input:checked),
#vo-root .vo-end-pick label.vo-toggle.active{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; border-color:#1a3354; }
#vo-root .vo-to-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
#vo-root .vo-to-days .seg{ font-size:11px; padding:6px 0; }
#vo-root .vo-to-preview{ background:#fffaf0; border:1px solid #f0d9a6; border-radius:10px; padding:10px 12px; margin:14px 0 0; font-size:13px; color:#7a5b12; }
#vo-root .vo-to-pcap{ font-weight:700; color:#42505f; }
#vo-root .vo-to-plist{ margin:6px 0 4px 18px; padding:0; font-size:12.5px; }
#vo-root .vo-to-warn{ color:#a32d2d; margin-top:6px; font-weight:600; }
#vo-root .vo-to-warn > div{ margin:2px 0; }
#vo-root .vo-to-auto{ color:#27500a; margin-top:6px; font-weight:600; }
#vo-root .vo-to-badge{ display:inline-block; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:5px; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; margin-left:4px; }
#vo-root .vo-to-badge.t-sick{ background:#fbe3e3; color:#a32d2d; }
#vo-root .vo-to-badge.t-personal{ background:#e6f1fb; color:#0c447c; }
#vo-root .vo-to-badge.t-unpaid{ background:#eef1f5; color:#52606e; }
#vo-root .vo-to-badge.t-jury{ background:#efe7fa; color:#5a3a92; }
#vo-root .vo-to-badge.t-vacation{ background:#eaf3de; color:#27500a; }
#vo-root .vo-to-badge.t-other{ background:#faeeda; color:#854f0b; }
#vo-root .vo-to-mini{ display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px; background:#eef2f7; color:#42505f; margin-left:4px; }
#vo-root .vo-to-row{ padding:10px 0; border-bottom:1px solid #eef2f7; }
#vo-root .vo-to-row-top{ display:flex; justify-content:space-between; align-items:center; }
#vo-root .vo-to-row-dates{ font-size:14px; color:#1f2733; margin-top:2px; }
#vo-root .vo-to-card{ border-left:4px solid #185fa5; }
#vo-root .vo-to-warnq{ background:#fbe3e3; color:#a32d2d; border-radius:6px; padding:6px 8px; font-size:12px; font-weight:700; margin-top:6px; }
#vo-root .vo-to-callin{ margin-top:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
#vo-root .vo-to-callin summary{ font-size:13px; font-weight:700; color:var(--navy); cursor:pointer; }
#vo-root .msg{ font-size:14px; padding:10px 12px; border-radius:10px; margin-top:10px; display:none; }
#vo-root .ok{ background:#EAF3DE; color:#27500A; } #vo-root .err{ background:#FCEBEB; color:#A32D2D; }
#vo-root .back{ background:none; color:var(--muted); border:none; width:auto; padding:6px 0; font-size:14px; font-weight:500; margin:0; }
#vo-root .req{ color:#A32D2D; }
#vo-root .clock{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; }
#vo-root .clock.in{ background:#EAF3DE; color:#27500A; } #vo-root .clock.out{ background:#fff; border:1px solid var(--line); color:var(--muted); }
#vo-root .clock button{ margin:0; }
#vo-root .metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
#vo-root .metric{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; }
#vo-root .metric b{ display:block; font-size:24px; color:var(--navy); }
#vo-root .metric span{ font-size:12px; color:var(--muted); }
#vo-root .pillrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
#vo-root .pill{ font-size:12px; background:#eef2f7; color:var(--navy); padding:4px 9px; border-radius:999px; }
#vo-root h2{ font-size:15px; color:var(--navy); margin:4px 0 8px; }
#vo-root .acctban{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; margin-bottom:14px; background:#eef2f7; color:var(--navy); font-size:14px; }
#vo-root .seg{ flex:1; border:1px solid var(--line); border-radius:10px; padding:11px; text-align:center; font-size:14px; margin:0; color:#1f2937; }
#vo-root .seg input{ width:auto; margin-right:5px; }
#vo-root #errbar{ background:#FCEBEB; color:#A32D2D; padding:10px 12px; border-radius:8px; margin-bottom:10px; font-size:13px; }
#vo-root .vo-combo{ position:relative; }
#vo-root .vo-combo-list{ position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; max-height:230px; overflow-y:auto; z-index:50; display:none; box-shadow:0 8px 18px rgba(0,0,0,.10); }
#vo-root .vo-combo-item{ padding:12px 12px; font-size:15px; cursor:pointer; border-bottom:1px solid #f0f2f5; }
#vo-root .vo-combo-item:last-child{ border-bottom:none; }
#vo-root .vo-combo-item:hover{ background:#eef2f7; }

/* ===== Home (v0.9 redesign) ===== */
#vo-root .vo-ic{ width:20px; height:20px; flex:0 0 auto; vertical-align:-4px; }
#vo-root .vo-head{ display:flex; align-items:center; gap:12px; background:var(--navy); border-radius:16px; padding:14px 16px; margin-bottom:14px; }
#vo-root .vo-av{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; object-fit:cover; background:var(--gold); color:#3a2a06; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; overflow:hidden; }
#vo-root .vo-av img{ width:100%; height:100%; object-fit:cover; }
#vo-root .vo-id{ flex:1; min-width:0; }
#vo-root .vo-nm{ color:#fff; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vo-root .vo-rl{ color:#aebfd5; font-size:12px; }
#vo-root .vo-cp{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; white-space:nowrap; }
#vo-root .vo-head-acct{ margin-top:6px; }
#vo-root .vo-head-acct select{ width:auto; max-width:220px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:5px 26px 5px 10px; font-size:13px; font-weight:600; }
#vo-root .vo-head-acct select option{ color:#1f2937; }
#vo-root .vo-cp.in{ background:#d6f0dd; color:#1b5e20; }
#vo-root .vo-cp.out{ background:rgba(255,255,255,.16); color:#fff; }
#vo-root .vo-prim{ width:100%; padding:30px 16px; font-size:23px; font-weight:700; border:none; border-radius:18px; color:#fff; margin-bottom:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; }
#vo-root .vo-prim svg{ width:30px; height:30px; }
#vo-root .vo-prim.green{ background:var(--green); } #vo-root .vo-prim.navy{ background:var(--navy); } #vo-root .vo-prim.gold{ background:var(--gold); color:#3a2a06; }
#vo-root .vo-prim2{ width:100%; padding:17px 16px; font-size:17px; font-weight:700; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--navy); margin-bottom:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
#vo-root .vo-prim2 svg{ width:21px; height:21px; }
#vo-root .vo-head-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
#vo-root .vo-cp-hrs{ font-size:11px; color:#aebfd5; font-weight:600; }
#vo-root .vo-return{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; cursor:pointer; }
#vo-root .vo-return b{ font-size:26px; font-weight:700; color:var(--muted); min-width:34px; text-align:center; }
#vo-root .vo-return span{ font-size:14px; font-weight:600; color:var(--navy); }
#vo-root .vo-return.hot{ border-color:var(--gold); background:#fff8ec; }
#vo-root .vo-return.hot b{ color:var(--gold); }
#vo-root .vo-statrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
#vo-root .vo-stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; }
#vo-root .vo-stat b{ display:block; font-size:22px; font-weight:700; color:var(--navy); line-height:1.1; }
#vo-root .vo-stat span{ font-size:11px; color:var(--muted); }
#vo-root .vo-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
#vo-root .vo-qtile{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 10px; text-align:center; color:var(--navy); font-size:14px; font-weight:600; cursor:pointer; }
#vo-root .vo-qtile svg{ width:24px; height:24px; display:block; margin:0 auto 7px; color:var(--navy); }
#vo-root .vo-qtile .vo-badge-n{ display:inline-block; min-width:18px; margin-left:4px; background:var(--red); color:#fff; font-size:11px; border-radius:999px; padding:0 5px; }
#vo-root .vo-clockout{ width:100%; padding:16px; font-size:16px; font-weight:700; border:1px solid #e0b3b3; border-radius:14px; background:#fff; color:var(--red); margin-top:6px; cursor:pointer; }
#vo-root .vo-clockremind{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fbf3df; border:1px solid #f0d9a6; border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:14px; color:#7a5b12; }
#vo-root .vo-clockremind button{ width:auto; margin:0; padding:8px 14px; font-size:14px; background:var(--green); display:inline-flex; align-items:center; gap:6px; }
#vo-root .vo-clockremind button .vo-ic{ width:16px; height:16px; }
#vo-root .vo-schednudge{ display:flex; align-items:flex-start; gap:9px; background:#fdeceb; border:1px solid #f3c4c0; border-radius:12px; padding:11px 14px; margin-bottom:14px; font-size:13.5px; line-height:1.4; color:#9a2b22; }
#vo-root .vo-schednudge .vo-ic{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
#vo-root .vo-timepick{ display:flex; gap:10px; margin:4px 0 6px; }
#vo-root .vo-timepick > div{ flex:1; }
#vo-root .vo-timepick label{ display:block; font-size:12px; color:#6b7280; margin:0 0 3px; }
#vo-root .vo-timepick select{ width:100%; }
#vo-root .vo-waiting{ text-align:center; padding:26px 18px; }
#vo-root .vo-waiting .dot{ display:inline-block; width:46px; height:46px; border-radius:50%; border:3px solid #f0d9a6; border-top-color:var(--gold); animation:vospin 1s linear infinite; margin-bottom:14px; }
@keyframes vospin{ to{ transform:rotate(360deg); } }
#vo-root .vo-venue-pick{ display:flex; align-items:center; gap:10px; background:#eef2f7; border-radius:12px; padding:10px 14px; margin-bottom:14px; }
#vo-root .vo-venue-pick label{ margin:0; color:var(--navy); font-weight:600; }
#vo-root .vo-venue-pick select{ width:auto; flex:1; padding:8px 10px; }
#vo-root .vo-wait-card{ padding:14px 16px; }
#vo-root .vo-wait-card h2{ margin:0 0 8px; }
#vo-root .vo-wait-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-bottom:1px solid #eef2f7; font-size:15px; color:#1f2937; }
#vo-root .vo-wait-acct{ display:flex; flex-direction:column; gap:1px; }
#vo-root .vo-wait-venue{ font-size:15px; }
#vo-root .vo-wait-front{ font-size:12px; color:var(--green); font-weight:600; }
#vo-root .vo-wait-row:last-child{ border-bottom:none; }
#vo-root .vo-wait-row.extra{ display:none; }
#vo-root .vo-waitlist.open .vo-wait-row.extra{ display:flex; }
#vo-root .vo-wait-n{ min-width:30px; text-align:center; font-weight:700; font-size:15px; color:var(--muted); background:#eef2f7; border-radius:999px; padding:3px 10px; }
#vo-root .vo-wait-n.hot{ color:#fff; background:var(--gold); }
#vo-root .vo-wait-toggle{ width:100%; background:none; border:none; color:var(--navy); font-size:13px; font-weight:600; padding:10px 0 2px; margin:0; cursor:pointer; }
/* schedule builder (phone) */
#vo-root .vo-sbnav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
#vo-root .vo-sbnav .sbday{ font-weight:700; color:var(--navy); font-size:15px; }
#vo-root .vo-sched-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#vo-root .vo-sched-chip{ background:#eef2f7; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--navy); }
#vo-root .vo-sched-acct{ display:flex; flex-direction:column; gap:6px; padding:9px 0; border-bottom:1px solid #f0f2f5; }
#vo-root .vo-sched-acct:last-child{ border-bottom:none; }
#vo-root .vo-sched-acct-n{ font-weight:700; color:#1f2937; font-size:13px; }
#vo-root .sbadd{ width:auto; margin:0; padding:7px 13px; font-size:13px; font-weight:700; background:#fff; color:var(--navy); border:1px dashed #b9c4d3; border-radius:999px; }
#vo-root #sbAssign select, #vo-root #sbAssign input{ width:100%; }
#vo-root .cibtn{ font-size:12px; font-weight:700; text-decoration:none; border-radius:8px; padding:6px 11px; background:var(--navy); color:#fff; }
#vo-root .cibtn.alt{ background:#eef2f7; color:var(--navy); }

/* ============================================================
   v2.2.0 — Venue manager contact card on the lot/home screen
   ============================================================ */
.vo-venue-contact{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	background:linear-gradient(135deg, var(--vo-navy, #1f3a5f), var(--vo-navy-d, #16263f));
	color:#fff; border-radius:14px; padding:12px 14px;
	margin:0 0 12px;
	box-shadow:0 4px 14px rgba(22,38,63,.18);
}
.vo-vc-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.vo-vc-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.08em; opacity:.72; }
.vo-vc-name{ font-size:15px; font-weight:700; }
.vo-vc-addr{ font-size:12.5px; opacity:.78; margin-top:2px; }
.vo-vc-call{
	display:inline-flex; align-items:center; gap:8px;
	background:linear-gradient(135deg, var(--vo-gold, #caa14a), var(--vo-gold-d, #ad8632));
	color:#241c06 !important; font-weight:800; font-size:14px;
	padding:10px 14px; border-radius:10px;
	text-decoration:none;
	box-shadow:0 2px 8px rgba(176,138,52,.28);
	flex-shrink:0; min-height:40px;
}
.vo-vc-call:hover, .vo-vc-call:active{ color:#241c06; }
.vo-vc-call-ico{ display:inline-flex; }
.vo-vc-call .vo-ic{ width:18px; height:18px; }
.vo-vc-nophone{ font-size:11.5px; opacity:.72; font-style:italic; }

@media (max-width:380px){
	.vo-venue-contact{ flex-direction:column; align-items:stretch; }
	.vo-vc-call{ justify-content:center; }
}

/* ============================================================
   v3.6.0 — Chaser prompt modal (mobile clock-in)
   Curbside-styled overlay shown right before clock-in for drivers
   + lot attendants. Uses the same token system as curbside.css.
   ============================================================ */
#vo-root .vo-chaser-prompt{
	position:fixed; inset:0;
	background:rgba(10,13,20,.72);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	display:none;
	align-items:center; justify-content:center;
	padding:24px;
	z-index:99999;
	animation: cbChaserFade .18s ease;
}
#vo-root .vo-chaser-prompt.is-open{ display:flex; }
@keyframes cbChaserFade{ from{opacity:0;} to{opacity:1;} }
#vo-root .vo-chaser-prompt-card{
	background:#fff;
	color:#0e1421;
	border-radius:20px;
	padding:28px 24px 22px;
	max-width:360px;
	width:100%;
	text-align:center;
	box-shadow:0 24px 60px rgba(0,0,0,.4);
	animation: cbChaserPop .22s ease;
}
@keyframes cbChaserPop{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
#vo-root .vo-chaser-prompt-icon{
	font-size:42px;
	line-height:1;
	margin-bottom:10px;
}
#vo-root .vo-chaser-prompt-h{
	font-size:22px; font-weight:800;
	letter-spacing:-.02em;
	margin-bottom:8px;
}
#vo-root .vo-chaser-prompt-sub{
	font-size:14px;
	color:#42505f;
	margin-bottom:22px;
	line-height:1.4;
}
#vo-root .vo-chaser-prompt-sub b{
	color:#0e1421;
	font-weight:800;
	font-variant-numeric:tabular-nums;
}
#vo-root .vo-chaser-prompt-row{
	display:flex; flex-direction:column; gap:10px;
}
#vo-root .vo-chaser-prompt-yes,
#vo-root .vo-chaser-prompt-no{
	display:block;
	padding:14px;
	border:0;
	border-radius:14px;
	font-family:inherit;
	font-size:15px; font-weight:800;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	transition:transform .08s ease;
}
#vo-root .vo-chaser-prompt-yes:active,
#vo-root .vo-chaser-prompt-no:active{ transform:scale(.985); }
#vo-root .vo-chaser-prompt-yes{
	background:linear-gradient(135deg, #294a70, #1a3354);
	color:#fff;
	box-shadow:0 4px 14px rgba(22,38,63,.28);
}
#vo-root .vo-chaser-prompt-no{
	background:#fafbfd;
	color:#0e1421;
	border:1px solid #e4e8ee;
}
#vo-root[data-vo-theme="dark"] .vo-chaser-prompt-card{
	background:#161a26; color:#fff;
}
#vo-root[data-vo-theme="dark"] .vo-chaser-prompt-sub{ color:#d2d8e4; }
#vo-root[data-vo-theme="dark"] .vo-chaser-prompt-sub b{ color:#fff; }
#vo-root[data-vo-theme="dark"] .vo-chaser-prompt-no{
	background:#1e2330; color:#fff; border-color:#2a3142;
}

/* v3.9.22 — unscoped fallback so the chaser prompt is styled even if the overlay
   is ever mounted outside #vo-root (it now mounts inside, but this is a guard). */
.vo-chaser-prompt{
	position:fixed; inset:0;
	background:rgba(10,13,20,.72);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	display:none; align-items:center; justify-content:center;
	padding:24px; z-index:99999;
}
.vo-chaser-prompt.is-open{ display:flex; }
.vo-chaser-prompt-card{
	background:#fff; color:#0e1421; border-radius:20px;
	padding:28px 24px 22px; max-width:360px; width:100%;
	text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.4);
	font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
}
.vo-chaser-prompt-icon{ font-size:42px; line-height:1; margin-bottom:10px; }
.vo-chaser-prompt-h{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.vo-chaser-prompt-sub{ font-size:14px; color:#42505f; margin-bottom:22px; line-height:1.4; }
.vo-chaser-prompt-sub b{ color:#0e1421; font-weight:800; font-variant-numeric:tabular-nums; }
.vo-chaser-prompt-row{ display:flex; flex-direction:column; gap:10px; }
.vo-chaser-prompt-yes, .vo-chaser-prompt-no{
	display:block; padding:14px; border:0; border-radius:14px;
	font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
.vo-chaser-prompt-yes{ background:linear-gradient(135deg,#294a70,#1a3354); color:#fff; box-shadow:0 4px 14px rgba(22,38,63,.28); }
.vo-chaser-prompt-no{ background:#fafbfd; color:#0e1421; border:1px solid #e4e8ee; }