/* Light theme (default). Dark overrides live in the two blocks below — every
   token is defined here first so nothing depends only on a media query. */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --input-bg: #ffffff;
  --ink: #1c2430;
  --muted: #6b7683;
  --line: #e2e5ea;
  --accent: #1f6feb;
  --accent-ink: #ffffff;
  --danger: #c23934;
  --err-bg: #fdeceb;
  --err-line: #f3c9c6;
  --warn-bg: #fff4e5;
  --warn-ink: #8a5300;
  --free: #1f7a3d;
  --free-bg: #e6f4ea;
  --busy: #8a5300;
  --busy-bg: #fdeede;
  --row-occupied-bg: #e3f3e8;
  --row-expired-bg: #fbe4e2;
  --row-available-bg: #eef7f1;
  --row-rented-bg: #eceef1;
  --row-hover: rgba(20, 30, 45, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* System preference = dark, unless the user forced light via the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --card: #171b21;
    --input-bg: #1e242c;
    --ink: #e4e7eb;
    --muted: #97a1ad;
    --line: #2a2f38;
    --accent: #3b82f6;
    --accent-ink: #ffffff;
    --danger: #f4756e;
    --err-bg: #2a1a19;
    --err-line: #5b2f2c;
    --warn-bg: #33291a;
    --warn-ink: #e0b877;
    --free: #56d98a;
    --free-bg: #16321f;
    --busy: #e6b25a;
    --busy-bg: #332813;
    --row-occupied-bg: #1a3324;
    --row-expired-bg: #3a1f1d;
    --row-available-bg: #15271d;
    --row-rented-bg: #171b21;
    --row-hover: rgba(255, 255, 255, .06);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

/* Explicit dark choice from the toggle — wins regardless of system setting. */
:root[data-theme="dark"] {
  --bg: #0f1216;
  --card: #171b21;
  --input-bg: #1e242c;
  --ink: #e4e7eb;
  --muted: #97a1ad;
  --line: #2a2f38;
  --accent: #3b82f6;
  --accent-ink: #ffffff;
  --danger: #f4756e;
  --err-bg: #2a1a19;
  --err-line: #5b2f2c;
  --warn-bg: #33291a;
  --warn-ink: #e0b877;
  --free: #56d98a;
  --free-bg: #16321f;
  --busy: #e6b25a;
  --busy-bg: #332813;
  --row-occupied-bg: #1a3324;
  --row-expired-bg: #3a1f1d;
  --row-available-bg: #15271d;
  --row-rented-bg: #171b21;
  --row-hover: rgba(255, 255, 255, .06);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  min-height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; }
.topbar nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; color: var(--muted); white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); }

main { max-width: 1320px; margin: 0 auto; padding: 28px 24px 60px; }

h1 { font-size: 22px; margin: 0; }

a { color: var(--accent); }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.count {
  font-size: 13px;
  color: var(--muted);
  background: var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
}

.muted { color: var(--muted); }

.subtle-link {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  margin-left: 6px;
  vertical-align: middle;
}
.subtle-link:hover { color: var(--ink); }

.retired-fold { margin-top: 22px; }
.retired-fold > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.retired-fold > summary::-webkit-details-marker { display: none; }
.retired-fold > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.retired-fold[open] > summary::before { transform: rotate(90deg); }
.retired-fold > summary:hover { color: var(--ink); }
.retired-fold .table-wrap { margin-top: 10px; }

tr.dim td { color: var(--muted); }
tr.dim td.mono, tr.dim td:nth-child(2) { color: var(--muted); }

.retire-box { margin-top: 16px; }
.retire-box h2 { font-size: 16px; margin: 0 0 6px; }
.retire-box form { margin-top: 10px; }
.retire-box label { max-width: 420px; }

/* booking charges & services — card list (2026-10-14), replacing the old dense
   always-editable table: each charge is a single read-only summary line until clicked,
   then expands to its edit form. Mirrors the existing .retired-fold disclosure pattern
   (native <details>/<summary>, no custom JS needed for the expand/collapse itself). */
.charge-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.charge-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.charge-card[open] { border-color: var(--accent); }
.charge-card-new { border-color: var(--accent); background: var(--card); padding: 16px; margin-bottom: 14px; }
.charge-card > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 10px 14px;
}
.charge-card > summary::-webkit-details-marker { display: none; }
.charge-card > summary::before {
  content: "\25B8";
  color: var(--muted);
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.charge-card[open] > summary::before { transform: rotate(90deg); }
.charge-card-flat .charge-summary { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.chg-date { flex: 0 0 90px; font-size: 12px; color: var(--muted); }
.chg-kind { flex: 0 0 110px; }
/* The extension reference and the charge's own kind used to be mashed into one span
   (2026-10-14 feedback) — a document's short id (EXT-N, trimmed down from its long ref
   string, which is only ever a real link once the card is open anyway) now gets its own
   column, separate from the kind label. */
.chg-ref { flex: 0 0 70px; font-size: 12px; }
.chg-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.charge-card[open] .chg-desc { white-space: normal; }
.chg-amount { flex: 0 0 90px; text-align: right; font-variant-numeric: tabular-nums; }
.chg-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* The our-cost / renter-pays pair shown next to the paid/owed badge (2026-10-14
   feedback) — moved out of the plain .chg-amount column specifically so both figures
   sit right beside the status tag they both relate to. */
.chg-figures { font-variant-numeric: tabular-nums; font-size: 13px; }
.charge-card-body { padding: 0 14px 16px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 14px; }
.charge-card-body .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 640px) {
  .chg-kind { flex-basis: 90px; }
  .chg-ref { display: none; }
  .chg-date { display: none; }
}

/* security / 2FA */
.card h2 { font-size: 16px; margin: 0 0 10px; }
.card h3.sub { font-size: 14px; margin: 16px 0 8px; color: var(--muted); }
.stack { margin: 12px 0; }
.stack label { max-width: 460px; }
hr.soft { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.card hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
table.devices { width: 100%; margin-top: 8px; }
table.devices th, table.devices td { padding: 8px 10px; }
.setup-steps { margin: 0; padding-left: 20px; }
.setup-steps > li { margin-bottom: 18px; }
.setup-steps label { max-width: 320px; }
.qr { margin: 10px 0; }
.qr img { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px; }
.secret-key { font-size: 15px; letter-spacing: 1px; user-select: all; }
.recovery-list {
  list-style: none;
  padding: 14px 16px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  columns: 2;
  max-width: 380px;
}
.recovery-list li { font-size: 15px; padding: 3px 0; user-select: all; }

/* buttons */
button, .btn {
  display: inline-block;
  font: inherit;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.06); }
.btn.ghost, .btn.ghost:hover {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  filter: none;
}
.linkbtn {
  border: none;
  background: none;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
}
.linkbtn.danger { color: var(--danger); }
form.inline { display: inline; margin: 0; }

/* topbar chip toggles (language, theme) */
.chip-toggle {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.chip-toggle:hover { color: var(--ink); filter: none; }

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.card.narrow { max-width: 360px; margin: 8vh auto 0; }
.card h1 { margin-bottom: 16px; }

/* login + generic forms */
[hidden] { display: none !important; }
label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type="checkbox"] { width: auto; display: inline-block; margin: 0 6px 0 0; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--picker-filter, none); }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
label.checkbox { color: var(--ink); display: flex; align-items: center; }

.form .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.form fieldset {
  margin: 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.form details.more-fields {
  margin: 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px;
}
.form details.more-fields[open] { padding-bottom: 8px; }
.form details.more-fields > summary {
  cursor: pointer;
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  list-style-position: inside;
}
.form details.more-fields > .grid { padding-top: 6px; }
.form legend { color: var(--muted); font-size: 13px; padding: 0 6px; }
.form-actions { margin-top: 18px; }

/* Denser variant (2026-10-10) — the vehicle card's edit form is now inline on the main
   screen rather than its own page, so it needs to take up noticeably less room: a third
   grid column (most fields here are short — a date, a number, a price) and tighter
   vertical rhythm between labels. */
.form.compact .grid { grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
.form.compact label { margin-bottom: 8px; font-size: 12px; }
.form.compact details.more-fields { margin: 2px 0 6px; }
.form.compact .form-actions { margin-top: 10px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.current-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.current-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* vehicle photo gallery */
.gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.gallery figure { margin: 0; width: 180px; }
.gallery figure img {
  width: 180px; height: 130px; object-fit: cover; display: block;
  border-radius: 8px; border: 2px solid var(--line);
}
.gallery figure.is-primary img { border-color: var(--free); }
.gallery figcaption { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 13px; }

.mono, .mono input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* messages */
.error { color: var(--danger); }
.error-list {
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 16px 10px 30px;
  margin-bottom: 18px;
}

/* table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
/* A long free-text description (e.g. a maintenance/charge note) could otherwise force the
   whole table wider than its container, since auto table layout sizes columns to their
   longest content — capped and wrapped instead of letting one cell dictate page width. */
td.wrap-text { max-width: 320px; white-space: normal; word-break: break-word; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* opt a long free-text column out of nowrap so the table isn't forced wide */
td.wrap, th.wrap { white-space: normal; min-width: 14ch; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.thumb { width: 54px; padding: 6px 12px; }
td.thumb img { width: 42px; height: 32px; object-fit: cover; border-radius: 4px; display: block; }
/* white-space: nowrap removed 2026-10-10 — forced 2-3 buttons onto one unbreakable line,
   which was the main reason wide actions columns (e.g. the booking page's Extra Charges
   table) needed horizontal scrolling. Wrapping to a second line on a narrow table beats a
   forced scrollbar. */
td.actions { text-align: right; }
td.actions a { text-decoration: none; }
td.actions a, td.actions form.inline { margin-left: 14px; display: inline-block; }
td.actions > :first-child { margin-left: 0; }
td.warn { color: var(--warn-ink); background: var(--warn-bg); }

/* row states + hover — every table */
tbody tr.row-occupied td { background: var(--row-occupied-bg); }
tbody tr.row-expired td { background: var(--row-expired-bg); }
tbody tr.row-expired td.warn { background: var(--row-expired-bg); }
tbody tr.row-available td { background: var(--row-available-bg); }
tbody tr.row-rented td { background: var(--row-rented-bg); color: var(--muted); }
tbody tr.warn-row td { background: var(--warn-bg); }
tbody tr.warn-row td:first-child { box-shadow: inset 3px 0 0 var(--warn-ink); }

/* vehicle thumbnail column */
th.vthumb-h, td.vthumb { width: 56px; }
td.vthumb img { width: 48px; height: 34px; object-fit: cover; border-radius: 4px; display: block; }
td.vthumb .no-photo {
  display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--err-bg); color: var(--danger); font-size: 12px; font-weight: 700;
}

.badge-stack { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* dashboard: customers waiting on a human answer */
.case-alert { border: 1px solid var(--danger); border-radius: 10px; background: var(--err-bg); padding: 12px 14px; margin-bottom: 20px; }
.case-alert-head { font-weight: 700; color: var(--danger); margin-bottom: 8px; }
.case-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--err-line); }
.case-row:first-of-type { border-top: 0; }
.case-row:hover .case-q { text-decoration: underline; }
.case-row .case-q { flex: 1; font-size: 13.5px; }
.case-row .case-when { font-size: 11px; color: var(--muted); white-space: nowrap; }
.case-alert .hint { margin: 8px 0 0; }
.case-alert.data-alert { border-color: var(--warn-ink); background: var(--warn-bg); }
.case-alert.data-alert .case-alert-head { color: var(--warn-ink); }
.case-alert.data-alert .case-row { border-color: color-mix(in srgb, var(--warn-ink) 30%, transparent); }

/* stat cards double as links */
a.stat { text-decoration: none; color: inherit; display: block; transition: border-color .12s ease, box-shadow .12s ease; }
a.stat:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(16, 24, 40, .1); }
a.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
tbody tr:hover td { box-shadow: inset 0 999px 0 var(--row-hover); }
table.rows-link tbody tr { cursor: pointer; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
}
.badge.free { color: var(--free); background: var(--free-bg); }
.badge.busy { color: var(--busy); background: var(--busy-bg); }
.badge.alert { color: #fff; background: var(--danger); }

/* bookings */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; min-width: 130px; box-shadow: var(--shadow);
}
.stat-n { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-l { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

h2.section { font-size: 17px; margin: 26px 0 12px; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  text-decoration: none; color: var(--muted); font-size: 14px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-color: var(--line); background: var(--card); }

tr.warn-row td { background: var(--warn-bg); }

tr.month-head th {
  background: var(--bg);
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); border-bottom: 1px solid var(--line);
  padding-top: 14px;
}
tr.month-head th.num { color: var(--ink); font-weight: 700; }
/* tr.month-head th.num above otherwise always wins over the plain th.num.pos/.neg rules
   (higher specificity: two elements + two classes vs. one element + two classes) — added
   2026-10-10 so the ledger's monthly balance actually shows green/red as intended. */
tr.month-head th.num.pos { color: var(--free); }
tr.month-head th.num.neg { color: var(--danger); }

.range-form {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.range-form label { margin: 0; }
.range-form input, .range-form select { width: auto; margin-top: 4px; }

table tfoot th { border-top: 2px solid var(--line); border-bottom: none; font-size: 13px; text-transform: none; color: var(--ink); }
td.num.pos, th.num.pos, .stat-n.pos { color: var(--free); }
td.num.neg, th.num.neg, .stat-n.neg { color: var(--danger); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }
.doc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.doc-row:last-of-type { border-bottom: none; }
/* consolidated Documents section groups (2026-10-14) */
.doc-group-title:first-of-type { margin-top: 4px; }
.doc-more { margin: 2px 0 4px; }
.doc-more > summary {
  cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 0;
  list-style: none; user-select: none;
}
.doc-more > summary::-webkit-details-marker { display: none; }
.hint.neg { color: var(--danger); }
input.ro { opacity: .7; cursor: not-allowed; }

/* busy overlay + spinner */
.busy-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 20, .55); backdrop-filter: blur(1px);
}
.busy-box {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; font-size: 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
button[disabled] { opacity: .6; cursor: progress; }

/* booking form: customer combobox */
.combo { position: relative; margin: 14px 0; }
.combo > label { margin-bottom: 4px; }
.combo-list {
  position: absolute; left: 0; right: 0; z-index: 20; max-height: 280px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); margin-top: 2px;
}
.combo-opt {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.combo-opt:last-child { border-bottom: none; }
.combo-opt:hover { background: var(--row-hover); }
.combo-empty { padding: 10px 11px; color: var(--muted); font-size: 13px; }
.combo-actions { margin-top: 6px; font-size: 13px; }
.ro-card {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
.ro-card dl.kv { grid-template-columns: max-content 1fr; gap: 4px 16px; }

/* booking form: term segmented control */
.term-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.term-label { font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button {
  border: none; background: var(--card); color: var(--ink); padding: 7px 14px; cursor: pointer;
  font-size: 13px; border-right: 1px solid var(--line); width: auto;
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* phone: country dropdown + national number */
.phone-input { display: flex; gap: 8px; margin-top: 4px; }
.phone-input .phone-cc { flex: 0 0 auto; max-width: 42%; }
.phone-input input { flex: 1 1 auto; margin-top: 0; }

/* customer warning flag */
.flag-banner {
  border: 1px solid var(--danger); border-left-width: 4px; border-radius: 8px;
  background: var(--row-expired-bg); color: var(--ink);
  padding: 12px 14px; margin-bottom: 16px;
}
.flag-banner strong { color: var(--danger); }
tbody tr.row-flagged td { background: var(--warn-bg); }

/* statements chart */
.chart-card { padding: 16px 18px; margin: 16px 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.chart-head h2 { margin: 0; font-size: 15px; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-scroll { overflow-x: auto; margin-top: 10px; }
.stmt-chart { width: 100%; min-width: 520px; height: auto; display: block; }
.stmt-chart .axis { stroke: var(--line); stroke-width: 1; }
.stmt-chart .tick { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.stmt-chart .bar-group rect { transition: opacity .12s; }
.stmt-chart .bar-group:hover rect { opacity: .78; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0; }

.dt { display: flex; gap: 8px; }
.dt input[type="date"] { flex: 1 1 60%; }
.dt input[type="time"] { flex: 1 1 34%; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.thumbs img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.thumb-del { position: relative; display: inline-block; }
.thumb-del form { position: absolute; top: 3px; right: 3px; margin: 0; }
.thumb-del button {
  background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 4px;
  width: 20px; height: 20px; line-height: 1; padding: 0; cursor: pointer;
}

.checklist-group { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin: 16px 0 6px; }
.checklist-group:first-of-type { margin-top: 4px; }
.checklist-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.checklist-item .checkbox { flex: 0 0 auto; white-space: nowrap; }
.checklist-item input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 3px 8px; font-size: 13px; }
.checklist-item.flagged { background: var(--warn-bg); border-radius: 6px; }
.checklist-item.flagged .checkbox { color: var(--warn-ink); font-weight: 600; }

.vision-review { background: var(--warn-bg); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.vision-review .warn { color: var(--warn-ink); font-weight: 600; margin: 0 0 8px; }

@media (max-width: 900px) {
  .form.compact .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .form .grid { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dd { margin-bottom: 8px; }
  .checklist-items { grid-template-columns: 1fr; }
}

/* walkaround video + condition comparison */
.wa-steps { margin: 8px 0 12px; padding-left: 20px; font-size: 13px; color: var(--muted); }
.wa-steps li { margin: 3px 0; }
.wa-video { width: 100%; max-width: 420px; border-radius: 8px; border: 1px solid var(--line); background: #000; display: block; margin: 8px 0; }
.wa-block { margin-top: 14px; }
.sm { font-size: 12px; }
.spin {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .7s linear infinite;
}
.btn.sm { padding: 3px 10px; font-size: 12px; }

.findings { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.finding { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.finding.is-done { opacity: .6; }
.finding-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.finding-where { margin: 6px 0 2px; }
.finding-desc { margin: 2px 0 8px; }
.finding-frames { display: flex; gap: 8px; flex-wrap: wrap; }
.finding-frames figure { margin: 0; }
.finding-frames figure.framed { margin: 0; width: 260px; }
.finding-frames img { width: 200px; height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
/* framed figures keep the real aspect ratio so the AI box maps 1:1 onto the photo */
.finding-frames .fi { position: relative; display: block; line-height: 0; }
.finding-frames figure.framed img { width: 260px; height: auto; }
.finding-frames figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; line-height: 1.3; }
.frame-box {
  position: absolute; border: 2px solid #f5a623; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.4);
  pointer-events: none;
}
.frame-box.is-new { border-color: #e5484d; }
.finding-clar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.finding-clar img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.finding-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.finding-decision { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; }

.sig-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 11px; line-height: 16px; text-decoration: none;
  background: var(--ok-bg, #e3f4e8); color: var(--ok-ink, #1a7f3c); font-family: system-ui, sans-serif;
}

.wa-upload-fallback { margin-top: 10px; }
.wa-upload-fallback > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.wa-upload-fallback[open] > summary { margin-bottom: 8px; }

/* full-screen guided recorder, section-based */
.wa-rec {
  position: fixed; inset: 0; z-index: 1000; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wa-rec-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
}
.wa-rec-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(255,255,255,.25);
}
.wa-rec-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.wa-rec.is-recording .wa-rec-bar i { background: #f5a623; }
.wa-rec-count {
  position: absolute; top: 16px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.wa-rec.is-recording .wa-rec-count::before { content: "\25CF "; color: #f33; }

/* between-section panel (also the review panel) */
.wa-rec-card {
  position: relative; max-width: 460px; width: calc(100% - 40px);
  background: rgba(0,0,0,.78); color: #fff; border-radius: 14px; padding: 20px 22px;
  backdrop-filter: blur(3px);
}
.wa-rec-card h3 { margin: 0 0 8px; font-size: 18px; }
.wa-rec-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #e6e6e6; }
.wa-rec-review { width: 100%; margin-top: 12px; border-radius: 8px; background: #000; }

/* while recording: current instruction + what's coming */
.wa-rec-hud {
  position: absolute; left: 18px; right: 18px; bottom: 88px;
  text-shadow: 0 1px 8px rgba(0,0,0,.95);
}
.wa-rec-now { color: #fff; }
.wa-rec-now strong { display: block; font-size: 19px; line-height: 1.25; }
.wa-rec-now .wa-rec-film { display: block; font-size: 13.5px; font-weight: 400; color: #e0e0e0; margin-top: 3px; line-height: 1.4; }
.wa-rec-next { color: #cbcbcb; font-size: 12px; line-height: 1.4; margin-top: 6px; }

.wa-rec-lens { position: absolute; left: 0; right: 0; bottom: 118px; display: flex; justify-content: center; gap: 10px; z-index: 3; }
.wa-rec-lens[hidden] { display: none; }
.wa-rec.is-recording .wa-rec-lens.is-device { display: none; }
.wa-rec-lensbtn { min-width: 46px; height: 46px; border-radius: 23px; border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; font-weight: 600; padding: 0 12px; }
.wa-rec-lensbtn.is-active { background: #f5c518; border-color: #f5c518; color: #000; }
.wa-rec-btn {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 14px 32px; font-size: 16px; font-weight: 700; border: none; border-radius: 999px;
  background: #fff; color: #000; cursor: pointer;
}
.wa-rec-btn.is-done { background: #e5484d; color: #fff; }
.wa-rec-btn.ghost {
  bottom: 26px; left: auto; right: 20px; transform: none;
  padding: 11px 18px; font-size: 13px; font-weight: 600;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.6);
}
.wa-rec-btn[disabled] { opacity: .6; }
.wa-rec-x {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  font-size: 26px; line-height: 1; border: none; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; cursor: pointer; z-index: 2;
}

/* Chat-bubble rendering for a message thread — shared by the Conversations page and the
   booking detail page's own "Messages" card (bot_events, migration 045). */
.msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 14px; }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-photo { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; margin-bottom: 6px; object-fit: cover; }
.msg-doc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--ink);
  text-decoration: none; font-size: 13px; }
.msg-doc:hover { border-color: var(--accent); }
.msg-map { display: block; width: 220px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--input-bg); color: var(--ink); text-decoration: none; }
.msg-map:hover { border-color: var(--accent); }
.msg-map-view { position: relative; display: block; width: 220px; height: 150px; overflow: hidden; }
.msg-map-tiles { position: absolute; left: 0; top: 0; width: 512px; height: 512px; }
.msg-map-tiles img { position: absolute; width: 256px; height: 256px; }
.msg-map-pin { position: absolute; left: 110px; top: 75px; transform: translate(-50%, -100%); font-size: 22px; line-height: 1; }
.msg-map-label { display: block; padding: 6px 10px; font-size: 13px; }
.msg-meta { font-size: 10.5px; color: var(--muted); margin-top: 4px; text-transform: capitalize; }
.msg-customer { align-self: flex-start; background: var(--input-bg); border: 1px solid var(--line); }
.msg-bot, .msg-agent { align-self: flex-end; background: var(--free-bg); }
.msg-owner { align-self: flex-end; background: var(--busy-bg); }
.msg-note { align-self: center; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; padding: 5px 10px; text-align: center; }

/* Site-wide "saved" confirmation toast — see views/partials/footer.ejs. Reuses the
   existing --free tokens (the same green as an "available" vehicle badge) so it matches
   the palette automatically in both themes without new tokens. */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: var(--free-bg); color: var(--free); border: 1px solid var(--free); box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast::before { content: "✓"; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* An editable OE part number field paired with a "search online" button — see
   maintenance/form.ejs and maintenance/receipt-review.ejs, and window.e4hSearchPart
   (views/partials/footer.ejs). */
.oe-field { display: flex; gap: 6px; align-items: center; }
.oe-field input { flex: 1; }
.oe-field .linkbtn { font-size: 16px; line-height: 1; padding: 4px; }
a.oe-link { color: var(--accent); text-decoration: underline dotted; }