/* ============================================================
   VidaRent — design system
   Monochrome: paper / ink. One alert accent, used only for
   expiry + damage markers; the fleet status colours are the
   only other colour in the interface.

   Every colour is a token on :root; [data-theme="dark"] redefines
   the same tokens, so no rule is written twice. Printed documents
   are separate HTML documents and never carry data-theme.
   ============================================================ */

:root {
  color-scheme: light;
  --paper:      #ffffff;
  --ink:        #0b0b0d;
  --ink-soft:   #26262e;
  --ink-rgb:    11, 11, 13;         /* for translucent ink */

  --g-95:       #131318;
  --g-80:       #33333c;
  --g-60:       #6b6b76;
  --g-45:       #9a9aa4;
  --g-25:       #cdcdd4;
  --g-12:       #e6e6ea;
  --g-06:       #f4f4f6;

  --alert:      #c8102e;
  --alert-soft: #fdeef0;
  --on-alert:   #ffffff;            /* text on the alert accent */
  --warn:       #8a6205;
  --warn-soft:  #fdf6e3;

  /* Fleet status. One definition for the filter, the badges, the card border
     and the chips. Every colour clears 4.5:1 against its own tint and against
     the page, in both themes; the written label always travels with it. */
  --status-available:      #1f7a4c;
  --status-available-bg:   #e8f5ee;
  --status-rented:         #c8102e;
  --status-rented-bg:      #fdeef0;
  --status-pickup-soon:    #8a6205;
  --status-pickup-soon-bg: #fdf6e3;
  --status-service:        #5b6472;
  --status-service-bg:     #eef0f3;

  /* a card sits on a shadow in the light theme and on a border in the dark one */
  --card-shadow: 0 1px 2px rgba(11, 11, 13, .06), 0 6px 16px rgba(11, 11, 13, .05);
  --card-line:   var(--g-12);
  --radius:      12px;

  /* the sidebar and the sign-in brand panel stay dark in both themes */
  --sb-bg:      #0b0b0d;
  --sb-fg:      #ffffff;
  --sb-muted:   #b9b9c2;
  --sb-dim:     #6d6d79;
  --sb-group:   #5a5a66;
  --sb-hover:   #17171c;
  --sb-line:    #22222a;

  /* overlays drawn on car photos (white renders) keep their own contrast */
  --ph-ink:     #0b0b0d;
  --ph-ink-rgb: 11, 11, 13;
  --ph-paper:   #ffffff;

  --shadow:     rgba(0, 0, 0, .18);

  --sb:         248px;
  --rail:       56px;

  --mono: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #131318;
  --ink:        #f2f2f5;
  --ink-soft:   #d6d6dc;
  --ink-rgb:    242, 242, 245;

  --g-95:       #e4e4ea;
  --g-80:       #c2c2ca;
  --g-60:       #9a9aa5;
  --g-45:       #74747f;
  --g-25:       #3c3c46;
  --g-12:       #2a2a33;
  --g-06:       #1c1c22;

  --alert:      #f0546a;
  --alert-soft: #3a1b21;
  --warn:       #e0b84a;
  --warn-soft:  #33301a;

  --status-available:      #5cc48a;
  --status-available-bg:   #17302a;
  --status-rented:         #f0546a;
  --status-rented-bg:      #3a1b21;
  --status-pickup-soon:    #e0b84a;
  --status-pickup-soon-bg: #33301a;
  --status-service:        #a7b0bd;
  --status-service-bg:     #252a31;
  --on-alert:   #17171c;

  --card-shadow: none;
  --card-line:   var(--g-25);

  --sb-bg:      #0b0b0d;
  --sb-hover:   #1a1a20;
  --sb-line:    #26262e;

  --shadow:     rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

[hidden] { display: none !important; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- micro-typography ---------- */

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-45);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }

/* ============================================================
   LOGIN
   ============================================================ */

.login {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.login__brand {
  background: var(--sb-bg);
  color: var(--sb-fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
}

.login__brand img { width: 240px; }

.login__tag {
  font-size: 34px;
  font-weight: 200;
  letter-spacing: -.03em;
  line-height: 1.15;
  max-width: 11em;
}

.login__foot { font-size: 11px; color: var(--sb-dim); letter-spacing: .06em; }

.login__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 64px;
  max-width: 620px;
}

.login__panel > .eyebrow { margin-bottom: 8px; }
.login__panel > h1 { margin-bottom: 4px; }
.login__hint { color: var(--g-60); margin: 0 0 28px; font-size: 13px; }

.acct {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--g-12);
  border: 1px solid var(--g-12);
}

.acct button {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 0;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}

.acct button:hover { background: var(--g-06); }

.avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.avatar--ghost { background: var(--g-12); color: var(--g-60); }

.acct .nm { font-weight: 600; }
.acct .rl { font-size: 11px; color: var(--g-60); letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================
   SHELL
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--sb) 1fr;
  height: 100%;
}

.sidebar {
  background: var(--sb-bg);
  color: var(--sb-fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__logo { padding: 26px 22px 22px; }
.sidebar__logo img { width: 150px; display: block; }

.nav { flex: 1; padding: 8px 0; overflow-y: auto; }

.nav__group {
  padding: 18px 22px 6px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-group);
  font-weight: 700;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  color: var(--sb-muted);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 2px solid transparent;
}

.nav a:hover { color: var(--sb-fg); background: var(--sb-hover); }

.nav a.on {
  color: var(--sb-fg);
  border-left-color: var(--sb-fg);
  background: var(--sb-hover);
  font-weight: 600;
}

.nav a .ic { width: 16px; display: grid; place-items: center; opacity: .85; }
.nav a .badge {
  margin-left: auto;
  background: var(--alert);
  color: var(--on-alert);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}

.sidebar__user {
  border-top: 1px solid var(--sb-line);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.sidebar__user .nm { font-size: 12.5px; font-weight: 600; }
.sidebar__user .rl { font-size: 10px; color: var(--sb-dim); letter-spacing: .1em; text-transform: uppercase; }
.sidebar__user .avatar { width: 30px; height: 30px; background: var(--sb-fg); color: var(--sb-bg); font-size: 11px; }
.sidebar__user > button:not(.sidebar__acct) {
  margin-left: auto; background: none; border: 0; color: var(--sb-dim);
  cursor: pointer; padding: 4px; line-height: 0;
}
.sidebar__user > button:not(.sidebar__acct):hover { color: var(--sb-fg); }
/* the name block opens "My account" */
.sidebar__acct {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer;
}
.sidebar__acct:hover .nm { text-decoration: underline; }
.acct-pop {
  position: fixed; left: 12px; bottom: 76px; z-index: 50;
  width: calc(var(--sb) - 24px);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--g-25); box-shadow: 0 10px 30px var(--shadow);
  padding: 14px 16px;
}
.acct-pop__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.acct-pop__hd strong { flex: 1; font-size: 13.5px; }
.acct-pop .sub { font-size: 11.5px; color: var(--g-60); margin-bottom: 12px; }
.acct-pop .field { width: 100%; margin-bottom: 8px; }
.acct-pop .fl { margin-top: 4px; }

/* ---------- main ---------- */

.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  height: 60px;
  flex: none;
  border-bottom: 1px solid var(--g-12);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
}

.topbar h1 { font-size: 19px; }
.topbar .spacer { flex: 1; }

.lang {
  display: flex;
  border: 1px solid var(--g-25);
}
.lang button {
  background: none; border: 0;
  padding: 5px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--g-60); cursor: pointer;
}
.lang button + button { border-left: 1px solid var(--g-25); }
.lang button.on { background: var(--ink); color: var(--paper); }

.view { flex: 1; overflow-y: auto; padding: 28px; }
.view--flush { padding: 0; }

/* ============================================================
   COMPONENTS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--g-06); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--g-95); }
.btn--ghost { border-color: var(--g-25); color: var(--g-60); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }

.card {
  border: 1px solid var(--g-12);
  background: var(--paper);
}
.card__hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--g-12);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card__hd h2 { font-size: 14px; }
.card__bd { padding: 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); align-items: start; }

@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- stat tile ---------- */

.stat {
  border: 1px solid var(--g-12);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat .v { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 11.5px; color: var(--g-60); }
.stat--alert .v { color: var(--alert); }

/* ---------- table ---------- */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-45);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--g-25);
  white-space: nowrap;
}
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--g-12);
  vertical-align: middle;
}
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--g-06); }
.tbl .r { text-align: right; }
.tbl .strong { font-weight: 600; }
.tbl .sub { font-size: 11.5px; color: var(--g-60); }

/* ---------- pill / status ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--g-25);
  color: var(--g-60);
  white-space: nowrap;
}
.pill--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill--out { border-color: var(--ink); color: var(--ink); }
.pill--alert { border-color: var(--alert); color: var(--alert); background: var(--alert-soft); }
.pill--mute { border-color: var(--g-12); background: var(--g-06); color: var(--g-45); }
.pill--warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

.field {
  border: 1px solid var(--g-25);
  padding: 7px 11px;
  font-size: 13px;
  background: var(--paper);
  min-width: 0;
}
.field:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field--search { width: 260px; }

.seg { display: flex; border: 1px solid var(--g-25); }
.seg button {
  background: none; border: 0; padding: 7px 13px;
  font-size: 12px; font-weight: 600; color: var(--g-60); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--g-25); }
.seg button.on { background: var(--ink); color: var(--paper); }

/* ---------- key/value ---------- */

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 0; }
.kv dt {
  padding: 9px 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-45); font-weight: 700;
  border-bottom: 1px solid var(--g-06);
}
.kv dd {
  margin: 0; padding: 9px 0;
  border-bottom: 1px solid var(--g-06);
}

/* ---------- empty ---------- */

.empty {
  padding: 46px;
  text-align: center;
  color: var(--g-45);
  border: 1px dashed var(--g-25);
}

/* ---------- permission matrix ---------- */

.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { border-bottom: 1px solid var(--g-12); padding: 9px 10px; }
.matrix thead th {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-45); font-weight: 700; text-align: center;
  border-bottom: 1px solid var(--g-25);
  vertical-align: bottom;
}
.matrix thead th:first-child { text-align: left; width: 38%; }
.matrix tbody td { text-align: center; }
.matrix tbody td:first-child { text-align: left; }
.matrix .grp td {
  background: var(--g-06);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--g-60);
  padding: 7px 10px;
}
.matrix .perm-name { font-size: 13px; }
.matrix .perm-key { font-size: 10.5px; color: var(--g-45); font-family: var(--mono); }

.chk {
  appearance: none;
  width: 17px; height: 17px;
  border: 1px solid var(--g-45);
  background: var(--paper);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}
.chk:checked { background: var(--ink); border-color: var(--ink); }
.chk:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -1px);
}
.chk[disabled] { opacity: .3; cursor: not-allowed; }

/* ---------- alert row ---------- */

.alerts { display: flex; flex-direction: column; }
.alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--g-12);
  cursor: pointer;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: var(--g-06); }
.alert-row .txt { flex: 1; min-width: 0; }
.alert-row .t1 { font-weight: 600; font-size: 13px; }
.alert-row .t2 { font-size: 11.5px; color: var(--g-60); }

/* ---------- detail header ---------- */

.dhead {
  display: flex; align-items: flex-start; gap: 18px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--g-12);
}
.dhead .id {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 17px; font-weight: 700; letter-spacing: .03em;
}
.dhead .meta { flex: 1; min-width: 0; }
.dhead .meta h1 { margin-bottom: 4px; }
.dhead .meta .sub { color: var(--g-60); font-size: 13px; }
.dhead .acts { display: flex; gap: 8px; flex-wrap: wrap; }

.back {
  background: none; border: 0; padding: 0;
  font-size: 12px; color: var(--g-60); cursor: pointer;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 14px;
}
.back:hover { color: var(--ink); }

/* ---------- plate ---------- */

.plate {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  background: var(--paper);
  overflow: hidden;
}
.plate .eu {
  background: var(--ink); color: var(--paper);
  padding: 2px 5px; font-size: 9px;
  display: grid; place-items: center;
}
.plate .no { padding: 2px 8px; font-size: 12.5px; }

/* ---------- fuel bar ---------- */

.fuel { display: flex; gap: 2px; align-items: center; }
.fuel i { width: 7px; height: 14px; background: var(--g-12); display: block; }
.fuel i.f { background: var(--ink); }

/* ---------- progress ---------- */

.bar { height: 5px; background: var(--g-12); position: relative; }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.bar.over > span { background: var(--alert); }

/* ---------- gallery placeholder ---------- */

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.shot {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--g-25);
  display: grid; place-items: center;
  font-size: 10.5px; color: var(--g-45);
  text-align: center; padding: 6px;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- soon ---------- */

.soon {
  border: 1px solid var(--g-12);
  padding: 40px;
  text-align: center;
}
.soon h2 { margin-bottom: 8px; }
.soon p { color: var(--g-60); margin: 0 auto; max-width: 46em; }
.soon ul {
  margin: 22px auto 0; padding: 0; list-style: none;
  max-width: 560px; text-align: left;
  border-top: 1px solid var(--g-12);
}
.soon li {
  padding: 10px 2px; border-bottom: 1px solid var(--g-12);
  font-size: 13px; display: flex; gap: 10px;
}
.soon li::before { content: "—"; color: var(--g-45); }

/* ---------- denied ---------- */

.denied {
  border: 1px solid var(--g-25);
  padding: 40px; text-align: center; color: var(--g-60);
}
.denied strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* ============================================================
   DAMAGE SHEET
   ============================================================ */

.sheet {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1320px) {
  .sheet { grid-template-columns: 148px minmax(0, 1fr) 300px; gap: 12px; }
}

/* ---- frame rail ---- */

.thumbs { display: grid; gap: 6px; }

.thumb {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--g-12);
  background: var(--paper);
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.thumb:hover { border-color: var(--g-45); }
.thumb.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.thumb__img {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--g-06);
  overflow: hidden;
}
.thumb__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__img svg { width: 100%; height: 100%; display: block; }

.thumb__lb {
  display: block;
  padding: 5px 7px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--g-60);
  line-height: 1.25;
}
.thumb.on .thumb__lb { color: var(--ink); font-weight: 600; }

.thumb__n {
  position: absolute; top: 4px; right: 4px;
  background: var(--alert); color: var(--on-alert);
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 9px; padding: 0 4px;
}
.thumb__real {
  position: absolute; top: 6px; left: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
}

/* ---- toolbar ---- */

.tools {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.tools .spacer { flex: 1; }

/* ---- canvas ---- */

.canvas-wrap { border: 1px solid var(--g-12); background: var(--g-06); padding: 14px; }

.cv {
  position: relative;
  width: 100%;
  background: var(--ph-paper);
  border: 1px solid var(--g-12);
  overflow: hidden;
}
.cv__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv__bg img, .cv__bg.cv__bg--dia svg { width: 100%; height: 100%; object-fit: contain; }
img.cv__bg { object-fit: contain; }

.cv__ink { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.cv__ink[data-tool="pen"] { cursor: crosshair; }
.cv__ink[data-tool="pin"] { cursor: cell; }

.ink-s {
  fill: none; stroke: var(--alert); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}

.pin { cursor: pointer; }
.pin-h { fill: transparent; }
.pin-c { fill: var(--alert); stroke: var(--ph-paper); stroke-width: 2.5; }
.pin-t { fill: var(--ph-paper); font: 700 18px var(--sans); }
.pin--on .pin-c { fill: var(--ph-ink); }
.pin:hover .pin-c { stroke-width: 4; }

.cv-note {
  margin-top: 10px;
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--g-60);
}

/* ---- part zones ----
   Drawn over the photo. Quiet until you hover or a part has photos / damage,
   so the picture stays readable. In part mode the ink layer forwards clicks. */

.cv__zones { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cv--blank { background: repeating-linear-gradient(45deg, var(--g-06) 0 8px, var(--paper) 8px 16px); }

.zone path { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: fill .12s, stroke .12s; }
.cv--blank .zone path { stroke: var(--g-25); stroke-dasharray: 8 6; }
.zone--hover path { fill: rgba(var(--ph-ink-rgb), .08); stroke: var(--ph-ink); stroke-dasharray: none; }
.zone--has path { fill: rgba(var(--ph-ink-rgb), .10); stroke: rgba(var(--ph-ink-rgb), .45); stroke-dasharray: none; }
.zone--new path { fill: rgba(200, 16, 46, .13); stroke: var(--alert); stroke-dasharray: none; }
.zone--on path { fill: rgba(var(--ph-ink-rgb), .16); stroke: var(--ph-ink); stroke-width: 4; stroke-dasharray: none; }
.zone--on.zone--new path { fill: rgba(200, 16, 46, .22); stroke: var(--alert); }

/* photo count on a part: white with a dark ring, so it never reads as a damage pin */
.zone__badge circle { fill: var(--ph-paper); stroke: var(--ph-ink); stroke-width: 2.5; }
.zone__badge text { fill: var(--ph-ink); font: 700 14px var(--sans); }
.zone--new .zone__badge circle { stroke: var(--alert); }
.zone--new .zone__badge text { fill: var(--alert); }

.dia { display: block; }
.dia-z { fill: rgba(var(--ink-rgb), .035); stroke: var(--g-25); stroke-width: 3; stroke-linejoin: round; }
/* car photos are white renders: keep their letterbox white in both themes */
.thumb__img img, .veh-th img, .slot__img img, .cv__bg img, img.cv__bg, .shot--img img, .ba__strip img { background: var(--ph-paper); }
.dia--sm .dia-z { stroke-width: 7; }

.zone-tip {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--ink); color: var(--paper);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow);
}
.zone-tip--new { background: var(--alert); }

/* ---- side panel ---- */

.fl {
  display: block;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-45); font-weight: 700; margin-bottom: 5px;
}

.dmg { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.dmg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 0; border-bottom: 1px solid var(--g-12);
  background: var(--paper); cursor: pointer; text-align: left; width: 100%;
}
.dmg-row:hover { background: var(--g-06); }
.dmg-row.on { background: var(--g-06); box-shadow: inset 2px 0 0 var(--ink); }
.dmg-n {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--alert); color: var(--on-alert); font-size: 11px; font-weight: 700;
}
.dmg-n--ink { background: var(--ink); color: var(--paper); }
.dmg-row.on .dmg-n { background: var(--ink); }
.dmg-tx { flex: 1; min-width: 0; }
.dmg-tx .t1 { display: block; font-size: 12.5px; font-weight: 600; }
.dmg-tx .t2 {
  display: block; font-size: 11px; color: var(--g-60);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.shots--sm { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.shot--img { position: relative; border: 1px solid var(--g-25); padding: 0; overflow: hidden; }
.shot--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--img button {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; line-height: 1;
  border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font-size: 13px;
}
.shot--add { border: 1px dashed var(--g-45); background: none; cursor: pointer; color: var(--g-60); }
.shot--add:hover { border-color: var(--ink); color: var(--ink); }

.eq { display: grid; gap: 5px; }
.eq-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }

/* ---- vehicle frame slots ---- */

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.slot { border: 1px solid var(--g-12); background: var(--paper); padding: 0; cursor: pointer; text-align: left; }
.slot:hover { border-color: var(--ink); }
.slot__img { display: block; aspect-ratio: 4 / 3; background: var(--g-06); overflow: hidden; position: relative; }
.slot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot__img svg { width: 100%; height: 100%; display: block; opacity: .5; }
.slot__lb { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11px; }
.slot__lb .st { margin-left: auto; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--g-45); }
.slot--has .slot__lb .st { color: var(--ink); font-weight: 700; }

/* ---- before / after ---- */

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba__col { min-width: 0; }
.ba__col--after { border-left: 1px solid var(--g-12); padding-left: 12px; }
.ba__none { font-size: 12px; color: var(--g-45); padding: 6px 0; }
.ba__strip { display: flex; gap: 4px; flex-wrap: wrap; }
.ba__strip img {
  width: 58px; height: 42px; object-fit: cover;
  border: 1px solid var(--g-25); display: block;
}

.card--part { box-shadow: inset 3px 0 0 var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11px; padding: 4px 9px;
  border: 1px solid var(--g-25); background: var(--paper);
  cursor: pointer; border-radius: 999px; color: var(--g-80);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--g-25); color: var(--g-80); }

/* ---- parts list ---- */

.plist { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.plist__grp {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-45); font-weight: 700; padding: 9px 14px 4px;
  background: var(--paper); position: sticky; top: 0;
}
.plist__row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 0; border-bottom: 1px solid var(--g-12);
  background: var(--paper); cursor: pointer; text-align: left; width: 100%;
  font-size: 12.5px;
}
.plist__row:hover { background: var(--g-06); }
.plist__row.on { background: var(--g-06); box-shadow: inset 2px 0 0 var(--ink); font-weight: 600; }
.plist__row--new { box-shadow: inset 2px 0 0 var(--alert); }
.plist__row.on.plist__row--new { box-shadow: inset 2px 0 0 var(--alert); }
.plist__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmg-n--sm { width: 18px; height: 18px; font-size: 10px; }
.dmg--tight { max-height: 160px; }

/* ---- compare table (main area) ---- */

.cmp { background: var(--paper); border: 1px solid var(--g-12); }
.cmp__hd { padding: 12px 16px; border-bottom: 1px solid var(--g-12); }
.cmp__hd h2 { font-size: 13px; margin: 0; }
.cmp__tb { width: 100%; border-collapse: collapse; }
.cmp__tb th {
  text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-45); padding: 8px 14px; border-bottom: 1px solid var(--g-12);
}
.cmp__tb td { padding: 10px 14px; border-bottom: 1px solid var(--g-12); vertical-align: top; }
.cmp__tb tr[data-part] { cursor: pointer; }
.cmp__tb tr[data-part]:hover td { background: var(--g-06); }
.cmp__tb tr.cmp__new td { background: var(--alert-soft); }
.cmp__part { font-weight: 600; font-size: 13px; }
.cmp__frames { display: block; font-size: 11px; color: var(--g-60); font-weight: 400; margin-top: 2px; }

.thumb--cmp .thumb__img--cmp {
  display: grid; place-items: center; color: var(--g-45);
  background: repeating-linear-gradient(45deg, var(--g-06) 0 6px, var(--paper) 6px 12px);
}
.thumb--cmp.on .thumb__img--cmp { color: var(--ink); }
.thumb__n--ink { background: var(--ink); right: auto; left: 6px; }

/* ---- fleet list thumbnails ---- */

.veh-cell { display: flex; align-items: center; gap: 12px; }
.veh-th {
  width: 64px; height: 36px; flex: none;
  border: 1px solid var(--g-12); background: var(--paper);
  display: grid; place-items: center; overflow: hidden;
}
.veh-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.veh-th--none { color: var(--g-45); background: var(--g-06); }
.sub--alert { color: var(--alert); font-weight: 600; }

.hint { margin: 0 0 12px; font-size: 12.5px; color: var(--g-60); max-width: 72em; }
.cv-hint { margin-left: auto; color: var(--g-45); font-size: 11.5px; }