:root {
  --navy: #1f3b57;
  --navy-dark: #16293d;
  --accent: #2e75b6;
  --accent-hover: #245d94;
  --bg: #f4f6f8;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-alt: #eef1f4;
  --surface-alt-hover: #e2e7ec;
  --row-hover: #fafcfe;
  --border: #e1e6ea;
  --text: #22303c;
  --muted: #6b7a86;
  --green: #1c8a4b;
  --green-hover: #156b39;
  --amber: #b9770e;
  --red: #c0392b;
  --red-hover: #a03226;
  --grey: #7f8c8d;

  --badge-available-bg: #e3f5e9;
  --badge-rented-bg: #eaf1fb;
  --badge-maintenance-bg: #fdf1de;
  --badge-out-bg: #fbe7e5;
  --badge-cancelled-bg: #f0f1f2;
  --badge-washing-bg: #dff3f5;
  --cyan: #0e7c86;
  --export-btn: #0e7c86;
  --export-btn-hover: #0b626a;
  --tag-pill-bg: #fdf1de;
  --flash-error-bg: #fbe7e5;
  --flash-ok-bg: #e3f5e9;
}

[data-theme="dark"] {
  --navy: #16232f;
  --navy-dark: #0d161e;
  --accent: #4f9cdb;
  --accent-hover: #6badea;
  --bg: #0f1720;
  --card: #17212c;
  --surface: #17212c;
  --surface-alt: #202c37;
  --surface-alt-hover: #293946;
  --row-hover: #1c2731;
  --border: #2a3742;
  --text: #e6edf3;
  --muted: #93a2ad;
  --green: #3fbd77;
  --green-hover: #34a468;
  --amber: #e0a83e;
  --red: #e2564a;
  --red-hover: #c94538;
  --grey: #9aa7ad;

  --badge-available-bg: rgba(63, 189, 119, 0.16);
  --badge-rented-bg: rgba(79, 156, 219, 0.16);
  --badge-maintenance-bg: rgba(224, 168, 62, 0.16);
  --badge-out-bg: rgba(226, 86, 74, 0.16);
  --badge-cancelled-bg: rgba(154, 167, 173, 0.16);
  --badge-washing-bg: rgba(79, 209, 221, 0.16);
  --cyan: #4fd1dd;
  --export-btn: #1a99a3;
  --export-btn-hover: #157f88;
  --tag-pill-bg: rgba(224, 168, 62, 0.16);
  --flash-error-bg: rgba(226, 86, 74, 0.16);
  --flash-ok-bg: rgba(63, 189, 119, 0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
html, body { height: 100%; }
/* Disable double-tap-to-zoom (2026-07-16, owner's report: fast double-taps
   on mobile — e.g. two quick taps on a button — were triggering the browser's
   built-in zoom gesture and breaking the layout). `manipulation` tells the
   browser "only pan/scroll here, no double-tap zoom", while still leaving
   pinch-to-zoom available since that's a distinct gesture some users rely on
   for accessibility — this only removes the accidental single-finger
   double-tap zoom, not zoom entirely. */
html { touch-action: manipulation; }
.container { flex: 1; min-width: 0; max-width: 1080px; margin: 0 auto; padding: 24px 32px 60px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: #fff; padding: 0 24px; height: 58px;
  flex-wrap: wrap;
  /* Pinned so it stays visible above the (also pinned) sidebar while the
     page content scrolls — see .sidebar below. */
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: 0.3px; text-decoration: none; color: inherit; display: flex; align-items: center; }
.brand:hover { opacity: 0.85; }
/* .brand-sub (the small "Ops" text next to the old plain-text brand) removed
   2026-07-16 — the logo now replaces the text brand for every role, not just
   investors, so there's no more text label needing a smaller sub-style. */
.brand-logo { height: 34px; width: auto; display: block; }

/* Left sidebar — replaces the old single-row top nav links (see
   lib/render.js layout()). Bigger, easier-to-hit buttons stacked down the
   left, always visible, rather than small text crammed into the top bar.
   Frozen in place (owner's request, 2026-07-08) so it stays on screen while
   a long page (e.g. a big trip list) scrolls underneath it — offset by the
   topbar's own height (also pinned, above) so the two stay stacked together
   instead of the sidebar floating at the very top once the topbar scrolls
   out of a non-sticky flow. */
.app-body { display: flex; min-height: calc(100vh - 58px); }
.sidebar {
  width: 216px; flex-shrink: 0; background: var(--navy-dark);
  padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; z-index: 10;
}
.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 8px; color: #cfe0ee; text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-link.active { background: var(--accent); color: #fff; }
.sidebar-icon { font-size: 20px; line-height: 1; }
@media (max-width: 800px) {
  .app-body { flex-direction: column; min-height: 0; }
  .sidebar {
    width: 100%; flex-direction: row; gap: 2px; padding: 8px;
    overflow-x: auto; overflow-y: visible;
    /* On the narrow layout the sidebar becomes a horizontal strip, not a
       full-height column — cancel the desktop sticky/full-height rules so
       it doesn't try to fill the viewport height here too. */
    position: static; height: auto;
  }
  .sidebar-link { flex-direction: column; gap: 4px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
  .sidebar-icon { font-size: 18px; }
  .container { padding: 20px 16px 48px; }
}

.navuser { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #cfe0ee; }
.navuser em { font-style: normal; opacity: 0.7; }
/* Edit / Reset Password links (routes/bookings.js, carwash.js, users.js) —
   2026-07-08: was #cfe0ee with a white hover, made for sitting on the navy
   topbar but this class is actually used inside white/light cards, where
   that was low-contrast and the hover went invisible. Switched to the
   app's existing accent blue (adapts automatically in dark mode) with no
   hover color change, per owner's choice from 3 visualized options. Delete
   buttons using this class override color to --red via inline style and are
   unaffected; .lang-btn below keeps its own original color (out of scope —
   still sits on the dark login header, not a white card). */
.linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
/* Still used by the pre-login language toggle on the login screen
   (routes/auth.js) — the nav's own toggle was moved into the user dropdown
   below and no longer needs this class. Kept on its original light-blue/
   white-hover styling since it sits on the dark login header, not a white
   card — the July 2026 .linklike color/hover change above doesn't apply
   here. */
.lang-btn {
  color: #cfe0ee !important;
  text-decoration: none !important; border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 5px; padding: 3px 8px !important; font-weight: 600; letter-spacing: 0.4px;
}
.lang-btn:hover { color: #fff !important; background: rgba(255,255,255,0.12); }

/* Top-right profile avatar + dropdown — replaces the old always-visible
   theme/language/logout row (see lib/render.js layout()). The dropdown itself
   uses --card/--text/--border so it matches the page's light/dark theme even
   though the top nav bar behind it stays navy in both themes. */
.user-menu { position: relative; }
.avatar-btn {
  background: none; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%;
  padding: 0; line-height: 0; cursor: pointer; display: block;
}
.avatar-btn:hover { border-color: #fff; }
.avatar-img { border-radius: 50%; object-fit: cover; display: block; }
.avatar-initials {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; letter-spacing: 0.3px;
}
/* Click-to-enlarge overlay for avatarHtml(..., { lightbox: true }) photos
   (2026-07-16) — hidden by default, shown via the .open class toggled by
   AVATAR_LIGHTBOX_SCRIPT in lib/render.js. */
.avatar-lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8);
  z-index: 100; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out;
}
.avatar-lightbox.open { display: flex; }
.avatar-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 12px);
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  min-width: 220px; padding: 8px; display: none; z-index: 200;
}
.user-dropdown.open { display: block; }
.user-dropdown-head { padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.who-name { font-weight: 700; font-size: 14px; }
.who-role { font-size: 12px; color: var(--muted); text-transform: capitalize; margin-top: 2px; }
.user-dropdown-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); text-decoration: none; font-size: 13px; padding: 9px 10px;
  border-radius: 6px; cursor: pointer;
}
.user-dropdown-item:hover { background: var(--surface-alt); }
.user-dropdown-form { margin: 0; }

/* Bigger dropdown for investors (2026-07-16, owner's request — "sometimes I
   missclick"): taller rows and larger text so each item is an easier tap
   target, since this dropdown is the investor's only way to move between
   Business Dashboard and Team (no sidebar at all for that role). Applied via
   an extra class on the dropdown itself (lib/render.js), not a role
   selector, so staff's compact version is untouched. */
.user-dropdown-lg { min-width: 250px; padding: 10px; }
.user-dropdown-lg .user-dropdown-head { padding: 10px 12px 14px; }
.user-dropdown-lg .who-name { font-size: 16px; }
.user-dropdown-lg .who-role { font-size: 13px; }
.user-dropdown-lg .user-dropdown-item { font-size: 16px; padding: 15px 12px; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.subtitle { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.stat { text-align: left; }
.stat .num { font-size: 30px; font-weight: 700; color: var(--navy); }
[data-theme="dark"] .stat .num { color: var(--text); }
.stat .label { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat.warn .num { color: var(--red); }

/* Colored money — green for gains/positive figures, red for losses/negative
   figures (net profit/loss, per-car net, etc.), so a quick glance at Finance
   tells you which way things are going without reading the sign/number. */
.amt-pos { color: var(--green); font-weight: 700; }
.amt-neg { color: var(--red); font-weight: 700; }

.muted { color: var(--muted); font-size: 13px; }

/* Investor Dashboard (2026-07-14) — plain rows of "car name — badge" inside
   each fleet-status card, matching the card/stat visual language already
   used everywhere else rather than inventing a new component. */
.investor-car-list { display: flex; flex-direction: column; gap: 8px; }
.investor-car-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.investor-usd-line { color: var(--muted); font-size: 13px; margin: -8px 0 18px; }

/* Business Dashboard fleet-status boxes (2026-07-15, owner's request):
   smaller/more compact than the regular .stat tiles (this was the tallest
   thing on the page on a phone, per the owner's screenshot), colored per
   category so Free/On Rental/Car Wash/Out of Service are tellable apart at a
   glance, and clickable (they're <a> tags, not <div>s) — clicking one filters
   the detail list below to just that category instead of showing all four
   long lists at once. Stays 2-per-row even on a narrow phone (overriding the
   general grid-4 -> 1-column collapse at 520px just below) since 4 short
   boxes read fine at half-width and take up much less vertical space than
   stacking one per row. */
.fleet-stat { padding: 14px; text-decoration: none; display: block; border-width: 2px; transition: transform .1s; }
.fleet-stat:active { transform: scale(0.98); }
.fleet-stat .num { font-size: 22px; }
.fleet-stat .label { font-size: 12px; }
.fleet-stat-yellow { border-color: var(--amber); }
.fleet-stat-yellow .num { color: var(--amber); }
.fleet-stat-green { border-color: var(--green); }
.fleet-stat-green .num { color: var(--green); }
.fleet-stat-blue { border-color: var(--cyan); }
.fleet-stat-blue .num { color: var(--cyan); }
.fleet-stat-red { border-color: var(--red); }
.fleet-stat-red .num { color: var(--red); }
.fleet-stat.active { background: var(--badge-rented-bg); }
@media (max-width: 520px) { .fleet-status-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.investor-usd-grid { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; color: var(--text); font-size: 14px; }

/* Today's/This Month's Financials tiles (2026-07-16, redone same day: owner
   wanted these to look exactly like the fleet-status boxes above, not a
   whole clickable section — the page needs to stay compact/scannable on a
   phone). They reuse .fleet-stat/.fleet-stat-green/.fleet-stat-red directly
   (see financeStatBox() in routes/investor.js) so no extra CSS is needed for
   the tiles themselves. The expense-breakdown detail table that used to
   appear below (.finance-breakdown) was removed the same day per the
   owner's follow-up request — no styling needed for it anymore. */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
tr:hover td { background: var(--row-hover); }
td a { color: var(--accent); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-available { background: var(--badge-available-bg); color: var(--green); }
.badge-rented { background: var(--badge-rented-bg); color: var(--accent); }
.badge-maintenance { background: var(--badge-maintenance-bg); color: var(--amber); }
.badge-out_of_service { background: var(--badge-out-bg); color: var(--red); }
.badge-washing { background: var(--badge-washing-bg); color: var(--cyan); }
.badge-in_progress { background: var(--badge-rented-bg); color: var(--accent); }
.badge-returned { background: var(--badge-available-bg); color: var(--green); }
.badge-cancelled { background: var(--badge-cancelled-bg); color: var(--grey); }
.badge-overdue { background: var(--badge-out-bg); color: var(--red); }

.tag-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--tag-pill-bg); color: var(--amber); margin: 2px 4px 2px 0;
}

form.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
form.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { form.form-grid { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
/* Team (Company Directory) phone number under each person's name (2026-07-16,
   owner's report: "under dark mode, you can barely see the numbers"). This
   used to just be .hint/var(--muted), which is fine in light mode but reads
   too dim against the dark card background. Given its own class instead of
   changing .hint globally — .hint is reused all over Settings/Finance/Fleet
   for form/price hints that nobody's complained about, so this only touches
   the one spot that was actually hard to read. */
.directory-phone { color: var(--muted); font-size: 12px; }
[data-theme="dark"] .directory-phone { color: #b9c6d0; }

/* Custom date picker — replaces the native <input type="date"> popup, whose
   size/layout is drawn by the OS and can't be controlled with CSS at all. This
   is a plain-HTML dropdown built and positioned entirely by DATE_PICKER_SCRIPT
   (see lib/render.js), so its cell size is ours to set — deliberately larger
   and easier to hit than any native calendar popup. */
.date-picker { position: relative; }
.date-picker-display { cursor: pointer; background: var(--surface); }
.date-picker-display:read-only { background: var(--surface); }
.date-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22); padding: 16px; width: 300px;
}
.date-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.date-picker-head .date-picker-month { font-weight: 700; font-size: 16px; }
.date-picker-nav {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--text); padding: 8px 12px; border-radius: 8px;
}
.date-picker-nav:hover { background: var(--surface-alt); }
.date-picker-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px;
}
.date-picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.date-picker-day {
  aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; font-size: 15px; border: 1px solid transparent;
  background: none; color: var(--text); font-family: inherit;
}
.date-picker-day:hover:not(:disabled) { background: var(--surface-alt); }
.date-picker-day.is-today { border-color: var(--accent); font-weight: 700; }
.date-picker-day.is-selected { background: var(--accent); color: #fff; font-weight: 700; }
.date-picker-day.is-outside { color: var(--border); }
.date-picker-day:disabled { cursor: default; opacity: 0.35; }
.date-picker-foot {
  display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.date-picker-foot button {
  background: none; border: none; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px;
}
.date-picker-foot button:hover { text-decoration: underline; }
@media (max-width: 480px) { .date-picker-panel { width: 264px; } }

.btn {
  display: inline-block; padding: 10px 18px; border-radius: 7px; border: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); }
.btn.btn-secondary { background: var(--surface-alt); color: var(--text); }
.btn.btn-secondary:hover { background: var(--surface-alt-hover); }
.btn.btn-danger { background: var(--red); }
.btn.btn-danger:hover { background: var(--red-hover); }
.btn.btn-success { background: var(--green); }
.btn.btn-success:hover { background: var(--green-hover); }
/* Teal, distinct from the primary accent blue and the plain gray of
   btn-secondary — signals "this downloads a file" specifically, used for
   every .xlsx export link (Finance, Car Wash). */
.btn.btn-export { background: var(--export-btn); color: #fff; }
.btn.btn-export:hover { background: var(--export-btn-hover); }
.btn.btn-lg { padding: 14px 22px; font-size: 16px; }

/* Merged UZS/USD export control (see exportButtonGroup() in lib/render.js) —
   redesigned 2026-07-16 (owner picked "segmented pill, centered" after
   reviewing a few mockups) from an earlier main-button-plus-small-USD-badge
   layout. The label sits centered on its own line above a pill split evenly
   into two same-weight UZS/USD segments — both currencies now read as
   equally valid, clearly separate click targets. overflow:hidden clips both
   segments into the pill's own rounded corners, so only the outer edges
   are round. */
.btn-export-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-export-label { font-size: 13px; font-weight: 600; color: var(--text); }
.btn-export-group { display: inline-flex; border-radius: 999px; overflow: hidden; text-decoration: none; }
.btn-export-seg {
  padding: 9px 22px; background: var(--export-btn); color: #fff;
  font-weight: 600; font-size: 13px; text-decoration: none;
}
.btn-export-seg:hover { background: var(--export-btn-hover); }
.btn-export-seg + .btn-export-seg { border-left: 1px solid rgba(255,255,255,0.25); }
.btn-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.tagtoggle { display: inline-block; margin: 4px 8px 4px 0; }
.tagtoggle input { display: none; }
.tagtoggle span {
  display: inline-block; padding: 10px 16px; border-radius: 24px; border: 2px solid var(--border);
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); background: var(--surface); user-select: none;
}
.tagtoggle input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }

.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt);
  font-size: 18px; font-weight: 700; cursor: pointer; color: var(--text);
}
.stepper input { text-align: center; max-width: 140px; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.flash-error { background: var(--flash-error-bg); color: var(--red); }
.flash-ok { background: var(--flash-ok-bg); color: var(--green); }

.login-wrap { max-width: 380px; margin: 12vh auto 0; }
.login-wrap .card { }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; }
.detail-grid dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 10px; }
.detail-grid dd { margin: 0; font-weight: 600; }
@media (max-width: 700px) { .detail-grid { grid-template-columns: 1fr; } }

.audit-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.audit-item .when { color: var(--muted); float: right; }
.audit-item .who { font-weight: 700; }

.empty { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }

.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters a {
  padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text); background: var(--surface-alt); border: 1px solid var(--border);
}
/* Inactive pills used to be border-less, which made them nearly invisible
   against a bright page background (owner's report, 2026-07-08 — the
   surface-alt fill and the page bg are very close in lightness). A 1px
   border fixes that; padding is trimmed by 1px on each side so the pill's
   overall size doesn't shift versus before. */
.filters a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Location toggle — used on the End of Day Check page (routes/cars.js) to
   pick one of the two offices per car. Built from a plain radio pair + labels
   so it works with zero JS; the radio itself is visually hidden and the
   sibling label is styled as a pill, matching .filters above. */
.loc-toggle { display: inline-flex; border-radius: 20px; overflow: hidden; background: var(--surface-alt); }
.loc-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.loc-toggle label {
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text); user-select: none;
}
.loc-toggle input:checked + label { background: var(--navy); color: #fff; }
.loc-toggle input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.loc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.loc-row:last-child { border-bottom: none; }
.loc-row .loc-car { font-weight: 600; }
.loc-row .loc-meta { color: var(--muted); font-size: 12px; }

/* Confetti burst — see CONFETTI_SCRIPT in lib/render.js. Pieces are plain
   fixed-position divs falling from just above the viewport with a rotate,
   removed once their animation finishes. Colors are intentionally fixed
   (not theme vars) since confetti should stay colorful in both themes. */
.vc-confetti-piece {
  position: fixed;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  z-index: 9999;
  opacity: 0.9;
  pointer-events: none;
  animation-name: vcConfettiFall;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  animation-fill-mode: forwards;
}
@keyframes vcConfettiFall {
  to { top: 105vh; transform: rotate(600deg); opacity: 0.5; }
}

/* Money-drop burst — see MONEY_DROP_SCRIPT in lib/render.js. Same one-shot
   pattern as confetti, but emoji text pieces that drift sideways (--vc-sway,
   set per-piece by the script) as they fall, for a bit of banknote "flutter". */
.vc-money-piece {
  position: fixed;
  top: -40px;
  z-index: 9999;
  opacity: 0.95;
  pointer-events: none;
  animation-name: vcMoneyFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes vcMoneyFall {
  to { top: 105vh; transform: translateX(var(--vc-sway, 0px)) rotate(15deg); opacity: 0.6; }
}