/* Better CRM - one stylesheet, no framework.
   Tokens first so a dealer's own colours can be swapped in one place. */
:root {
  --ground: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #16191f;
  --ink-2: #576070;
  --ink-3: #8b93a3;
  --line: #dde1e8;
  --line-soft: #eaedf2;
  --brand: #123a5e;
  --brand-ink: #ffffff;
  --accent: #b07d00;
  --accent-soft: #fdf5e0;
  --good: #16704a;
  --good-soft: #e6f4ed;
  --warn: #92500f;
  --warn-soft: #fdf0e2;
  --bad: #9b2c2c;
  --bad-soft: #fbeaea;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(22, 25, 31, .05), 0 10px 24px -18px rgba(22, 25, 31, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1116; --surface: #181c23; --surface-2: #13161c;
    --ink: #e8ebf1; --ink-2: #a5adbd; --ink-3: #7a8294;
    --line: #2a303b; --line-soft: #222731;
    --brand: #9dc6ea; --brand-ink: #0f1116;
    --accent: #e3b449; --accent-soft: #2a2313;
    --good: #5fbc8e; --good-soft: #14291f;
    --warn: #d99a5b; --warn-soft: #2a2015;
    --bad: #e08585; --bad-soft: #2b1818;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -18px rgba(0,0,0,.9);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground); color: var(--ink);
  font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- chrome ---------- */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 18px; min-height: 56px; flex-wrap: wrap;
}
.brand { font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 9px; height: 18px; border-radius: 2px; background: var(--accent); display: inline-block; }
nav.main { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
nav.main a {
  color: var(--ink-2); padding: 7px 11px; border-radius: 6px; font-weight: 500; font-size: 14.5px;
}
nav.main a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
nav.main a.on { background: var(--brand); color: var(--brand-ink); }
.who { font-size: 13.5px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }

main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }

/* ---------- headings ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
.sub { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
/* Proportional figures on standalone values: tabular-nums gives every digit
   the width of a zero, which makes a number like 121 look gappy at display
   size. tabular-nums belongs in table columns (td.num), where digits have to
   line up vertically - and that is where it stays. */
.tile .n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tile .l { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 2px; }
.tile a { display: block; color: inherit; }
.tile a:hover { text-decoration: none; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.panel > h2 { padding: 13px 16px; margin: 0; border-bottom: 1px solid var(--line-soft); }
.panel-body { padding: 16px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.plate { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .02em; }
.muted { color: var(--ink-3); }

/* ---------- definition lists ---------- */
dl.facts { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 1px 16px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--ink-3); padding: 5px 0; }
dl.facts dd { margin: 0; padding: 5px 0; }

/* ---------- pills ---------- */
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: .02em; white-space: nowrap; }
.pill.full { background: var(--good-soft); color: var(--good); }
.pill.thin { background: var(--warn-soft); color: var(--warn); }
.pill.neutral { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- forms ---------- */
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input[type=text], input[type=search], input[type=email], input[type=password], select {
  font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px; min-width: 0;
}
input[type=search] { flex: 1; min-width: 180px; }
label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; font-weight: 500; }
label.field input, label.field select { width: 100%; }
.btn {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); border: 1px solid transparent;
  border-radius: 6px; padding: 8px 16px;
}
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn.small { padding: 5px 10px; font-size: 13px; }

/* ---------- flashes ---------- */
.flash { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.flash.error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.flash.ok { background: var(--good-soft); color: var(--good); border-color: var(--good); }

/* ---------- login ---------- */
.auth-wrap { min-height: 74vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 20px; margin-bottom: 4px; }
.auth-card .sub { margin-bottom: 20px; }
.auth-card .btn { width: 100%; }

/* ---------- misc ---------- */
.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.empty { padding: 34px 16px; text-align: center; color: var(--ink-3); }
.note { font-size: 13.5px; color: var(--ink-2); background: var(--accent-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 11px 13px; margin-bottom: 16px; }
footer.foot { max-width: 1120px; margin: 0 auto; padding: 20px 16px 40px; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { padding-bottom: 0; font-size: 12.5px; }
  dl.facts dd { padding-top: 1px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Explicit light-mode override so a viewer who forces light always wins. */
:root[data-theme="light"] {
  --ground: #f1f3f6; --surface: #ffffff; --surface-2: #f7f8fa;
  --ink: #16191f; --ink-2: #576070; --ink-3: #8b93a3;
  --line: #dde1e8; --line-soft: #eaedf2;
}

/* ---------- profit & loss ---------- */
/* One hero figure per view, in the same sans as everything else. */
.hero { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1.04; }
.hero.up { color: var(--good); }
.hero.down { color: var(--bad); }
.hero-sub { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; max-width: 64ch; }

/* Meter. The unfilled track is a lighter step of the FILL'S OWN ramp, not a
   neutral grey, so the state reads across the whole bar and not only across
   the part that happens to be filled. The percentage sits beside it because
   colour alone must never be the only channel carrying the value. */
.meter { display: flex; align-items: center; gap: 9px; min-width: 156px; }
.meter .track { flex: 1; height: 8px; border-radius: 99px; overflow: hidden; }
.meter .fill { height: 100%; border-radius: 99px; }
.meter .pct { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
              min-width: 44px; text-align: right; }
.meter.low   .track { background: var(--bad-soft); }
.meter.low   .fill  { background: var(--bad); }
.meter.mid   .track { background: var(--warn-soft); }
.meter.mid   .fill  { background: var(--warn); }
.meter.high  .track { background: var(--good-soft); }
.meter.high  .fill  { background: var(--good); }

.money-up { color: var(--good); font-weight: 600; }
.money-down { color: var(--bad); font-weight: 600; }
.caveat { font-size: 13.5px; color: var(--ink-2); max-width: 72ch; margin: 0 0 14px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.form-grid textarea {
  font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px;
  width: 100%; resize: vertical; min-height: 44px;
}
.field .req { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent);
              text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center;
                margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.row-actions { display: flex; gap: 8px; }

/* expandable descriptions in the claims list */
details summary { cursor: pointer; color: var(--ink-2); }
details summary::marker { color: var(--ink-3); }
details[open] summary { color: var(--ink); font-weight: 500; }
details p { color: var(--ink-2); font-size: 13.5px; max-width: 70ch; }

/* ------------------------------------------------------------------
   The filter bar on the customers, vehicles and documents lists.

   A grid rather than a flex row, so the controls line up in columns and
   stay lined up as they wrap - a row of dropdowns of different widths
   jumping around on a narrow window is what makes these look untidy.
   Every control is the same height, and the whole bar collapses to one
   column on a phone.
   ------------------------------------------------------------------ */
form.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 14px;
  align-items: end;
  padding: 14px 16px 4px;
  margin-bottom: 14px;
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
form.filters label.field { margin-bottom: 10px; }
form.filters label.field span { white-space: nowrap; }
form.filters .form-actions { margin-bottom: 10px; display: flex; gap: 8px; }
form.filters input[type="date"] { min-width: 0; }

@media (max-width: 640px) {
  form.filters { grid-template-columns: 1fr 1fr; }
  form.filters .form-actions { grid-column: 1 / -1; }
}