/* Admin dashboard. Dark surface; series colors validated against it for
   colorblind separation (blue vs orange, worst-case CVD ΔE 97). */

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c222b;
  --line: #262d38;
  --text: #e8edf4;
  --muted: #8b97a8;
  --faint: #5b6675;
  --accent: #ff5a1f;
  --err: #f85149;

  /* Categorical series — validated for the dark surface, not eyeballed. */
  --s-scans: #3987e5;
  --s-checkins: #d95926;

  --radius: 12px;
}

* { box-sizing: border-box; }

/* [hidden] is only `display:none` from the UA stylesheet, so any explicit
   display below (grid/flex/block) would quietly beat it and the element would
   stay on screen. This makes the attribute mean what it says. */
[hidden] { display: none !important; }

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

h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- Login ---------- */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-box {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.login-box h1 { margin-bottom: 6px; }
.login-sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }

input[type="password"], input[type="text"], .select {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .16);
}
.select { width: auto; font-size: 14px; padding: 7px 10px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #ff7a45; }
.btn:disabled { opacity: .6; cursor: default; }

.btn.sm { width: auto; margin: 0; padding: 7px 13px; font-size: 13.5px; }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }

/* Row actions were too dim to read as buttons at all — at --faint on this panel
   they looked like disabled text. Muted ink is legible; the destructive intent
   still only shows up as red on hover, so it can't be hit by accident. */
.link-btn {
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
}
.link-btn + .link-btn { margin-left: 4px; }
.link-btn:hover {
  color: #ffb3ae;
  background: rgba(248, 81, 73, .12);
  border-color: rgba(248, 81, 73, .4);
}
.link-btn.act:hover {
  color: var(--accent);
  background: rgba(255, 90, 31, .12);
  border-color: rgba(255, 90, 31, .4);
}

.err {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: rgba(248, 81, 73, .1);
  border: 1px solid rgba(248, 81, 73, .35);
  border-radius: 8px;
  color: #ffb3ae;
  font-size: 13.5px;
}

/* ---------- Layout ---------- */

.app { max-width: 1080px; margin: 0 auto; padding: 24px 18px 60px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.topbar-actions { display: flex; gap: 8px; }
.active-show { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.active-show b { color: var(--accent); font-weight: 600; }

/* ---------- Car switcher ---------- */

.carbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.carbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.carbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.carbar-pick { display: flex; align-items: center; gap: 8px; }
.carbar-pick > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.carbar-pick .select { font-size: 14px; padding: 8px 11px; min-width: 170px; }

/* The public URL, shown big: it's the thing you print on the car. */
.carlink {
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 90, 31, .3);
  background: rgba(255, 90, 31, .07);
  white-space: nowrap;
}
.carlink:hover { background: rgba(255, 90, 31, .14); }

/* ---------- Test mode ---------- */

.testmode {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* When it's on, the whole bar goes amber. Impossible to scroll past. */
.testmode.on {
  background: #3d2400;
  border-color: #b26b00;
}
.testmode-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.testmode-text b { font-size: 14px; }
.testmode-text span { font-size: 12.5px; color: var(--muted); }
.testmode.on .testmode-text b { color: #ffb84d; }
.testmode.on .testmode-text span { color: #ffd79a; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #39424f;
  border-radius: 999px;
  transition: background .15s;
}
.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
}
.switch input:checked + .slider { background: #d98200; }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(255, 90, 31, .3); }

.showtest { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.showtest input { width: 15px; height: 15px; accent-color: var(--accent); }
.testmode.on .showtest { color: #ffd79a; }

/* ---------- Danger zone ---------- */

.danger-panel { border-color: rgba(248, 81, 73, .3); }

.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid rgba(38, 45, 56, .55);
}
.danger-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.danger-row b { display: block; font-size: 14px; margin-bottom: 3px; }
.danger-note { display: block; max-width: 60ch; font-size: 12.5px; color: var(--muted); }
.danger-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn.danger {
  background: transparent;
  border: 1px solid rgba(248, 81, 73, .45);
  color: #ffb3ae;
}
.btn.danger:hover { background: rgba(248, 81, 73, .14); color: #fff; }

/* ---------- Tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.tile.accent { border-color: rgba(255, 90, 31, .35); }
.tile-label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.tile-value {
  display: block;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tile.accent .tile-value { color: var(--accent); }
.tile-note { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }

/* ---------- Panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Identity is never carried by color alone: the legend is always present. */
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.lg { display: flex; align-items: center; gap: 6px; }
.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.swatch.s-scans { background: var(--s-scans); }
.swatch.s-checkins { background: var(--s-checkins); }

/* ---------- Chart ---------- */

.chart-wrap { position: relative; }
.chart { width: 100%; height: 240px; display: block; overflow: visible; }

.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-text { fill: var(--faint); font-size: 11px; }

.series { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.series.s-scans { stroke: var(--s-scans); }
.series.s-checkins { stroke: var(--s-checkins); }

/* A 2px surface ring keeps overlapping dots readable where the lines cross. */
.dot { stroke: var(--surface); stroke-width: 2; }
.dot.s-scans { fill: var(--s-scans); }
.dot.s-checkins { fill: var(--s-checkins); }

.crosshair { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.hit { fill: transparent; }

.tip {
  position: absolute;
  z-index: 5;
  min-width: 120px;
  padding: 9px 11px;
  background: #0b0f14;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  pointer-events: none;
  transform: translate(-50%, -100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.tip-day { color: var(--muted); margin-bottom: 5px; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tbl td {
  padding: 10px;
  border-bottom: 1px solid rgba(38, 45, 56, .55);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tbl .note { color: var(--text); max-width: 320px; }
.tbl .row-actions { text-align: right; white-space: nowrap; }
.tbl .is-active { color: var(--accent); font-weight: 600; }
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 90, 31, .14);
  border: 1px solid rgba(255, 90, 31, .35);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

.newshow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.newshow input { flex: 1 1 190px; width: auto; font-size: 14px; padding: 9px 11px; }

/* ---------- Show form (with dates) ---------- */

.showform { flex-direction: column; align-items: stretch; }
.sf-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-dates { align-items: flex-start; }
.sf-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); }

/* ---------- Date field + calendar ----------
   Replaces <input type="date">, whose picker only opens from a ~16px icon at the
   far edge of the field — clicking the field itself just starts typing digits.
   Here the whole field is the button, and it opens a month grid. */

.datefield { display: flex; flex-direction: column; gap: 4px; flex: 1 1 210px; min-width: 0; }
.df-label { font-size: 12.5px; color: var(--muted); }
.df-label em { font-style: normal; color: var(--faint); }

.df-wrap { position: relative; }

.df-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.df-btn:hover { border-color: #39424f; }
.df-btn[aria-expanded="true"] { border-color: var(--accent); }
.df-btn.empty { color: var(--faint); }

.df-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.df-btn[aria-expanded="true"] .df-icon { stroke: var(--accent); }

.df-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -11px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 5px;
  color: var(--faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.df-clear:hover { color: var(--text); background: var(--line); }

/* the popup */
.cal {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 262px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.cal[hidden] { display: none; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cal-title { font-size: 13.5px; font-weight: 600; }
.cal-nav {
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { color: var(--text); background: var(--line); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center;
  padding: 4px 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
}
.cal-day {
  padding: 7px 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--line); }
.cal-day.blank { visibility: hidden; }
.cal-day.today { border-color: var(--muted); }
.cal-day.selected { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day.selected:hover { background: var(--accent); }
.cal-day:disabled { color: #3b444f; cursor: default; }

.cal-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.cal-foot button {
  padding: 5px 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.cal-foot button:hover { color: var(--text); background: var(--line); }

.dates { white-space: nowrap; font-size: 13px; color: var(--muted); }
.dates.upcoming { color: var(--text); }
.dates .today-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(46, 160, 67, .14);
  border: 1px solid rgba(46, 160, 67, .4);
  color: #7ee787;
  font-size: 10.5px;
  font-weight: 600;
}

.override {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(255, 90, 31, .08);
  border: 1px solid rgba(255, 90, 31, .3);
  border-radius: 9px;
  font-size: 13px;
  color: var(--muted);
}

.empty { margin: 18px 0 4px; text-align: center; color: var(--faint); font-size: 14px; }

/* ---------- Check-in page editor ---------- */

.look {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 780px) {
  .look { grid-template-columns: 1fr; }
}

.look-field { margin-bottom: 12px; }
.look-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--muted);
}
.look-field input[type="text"] { font-size: 14px; padding: 9px 11px; }
.look-field .hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--faint); }

.look-h3 {
  margin: 20px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.look-h3:first-child { margin-top: 0; }

/* ---------- Truck photo ---------- */

.photo-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }

.photo-preview {
  position: relative;
  flex: 0 0 190px;
  height: 108px;              /* roughly the hero's 16:9-ish crop */
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
}
.photo-preview.has-img { border-style: solid; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-empty {
  padding: 0 10px;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
  color: var(--faint);
}

.photo-actions { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

/* The real <input type=file> is unstyleable, so hide it inside the label. */
.photo-pick { position: relative; overflow: hidden; cursor: pointer; }
.photo-pick input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.photo-note {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.4;
}
.photo-note b { color: var(--muted); font-weight: 600; }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.swatch-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.swatch-field input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex: none;
}
.swatch-field span { font-size: 12.5px; color: var(--muted); line-height: 1.25; }

#lookBtn { margin-top: 18px; }

/* Preview — mirrors the real check-in page's structure, driven by the same vars */
.preview { position: sticky; top: 20px; }
.pv-phone {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--pv-bg, #0d1117);
  color: var(--pv-text, #e8edf4);
  overflow: hidden;
}
.pv-hero {
  height: 62px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pv-card, #161b22) 70%, var(--pv-text, #e8edf4)),
    var(--pv-card, #161b22));
  border: 1px solid var(--pv-line, #262d38);
}
.pv-kicker {
  margin: 0 0 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pv-accent, #ff5a1f);
  word-break: break-word;
}
.pv-headline {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--pv-text, #e8edf4);
  word-break: break-word;
}
.pv-sub {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--pv-muted, #8b97a8);
  word-break: break-word;
}
.pv-card {
  padding: 11px;
  border-radius: 9px;
  background: var(--pv-card, #161b22);
  border: 1px solid var(--pv-line, #262d38);
}
.pv-label { display: block; font-size: 9.5px; font-weight: 600; margin-bottom: 3px; }
.pv-input {
  padding: 7px 8px;
  margin-bottom: 9px;
  border-radius: 6px;
  background: var(--pv-bg, #0d1117);
  border: 1px solid var(--pv-line, #262d38);
  font-size: 10.5px;
  color: var(--pv-muted, #8b97a8);
}
.pv-btn {
  padding: 9px;
  border-radius: 7px;
  background: var(--pv-accent, #ff5a1f);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  word-break: break-word;
}

/* ---------- Account ---------- */

.whoami {
  align-self: center;
  margin-right: 4px;
  font-size: 13px;
  color: var(--muted);
}
.whoami b { color: var(--text); font-weight: 600; }

.pwform {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}
.pwform input { flex: 1 1 190px; width: auto; font-size: 14px; padding: 9px 11px; }

.ok {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: rgba(46, 160, 67, .1);
  border: 1px solid rgba(46, 160, 67, .4);
  border-radius: 8px;
  color: #7ee787;
  font-size: 13.5px;
}

.fine-note { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }

.you-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(139, 151, 168, .14);
  border: 1px solid rgba(139, 151, 168, .3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.pager-info { font-size: 13px; color: var(--faint); }

@media (max-width: 620px) {
  .tile-value { font-size: 26px; }
  .topbar { align-items: flex-start; }
}

/* ---------- Roles ---------- */

.role-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(139, 151, 168, .14);
  border: 1px solid rgba(139, 151, 168, .3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.role-tag.owner {
  background: rgba(255, 90, 31, .14);
  border-color: rgba(255, 90, 31, .35);
  color: var(--accent);
}

.role-select { font-size: 13px; padding: 5px 8px; min-width: 106px; }
.role-select:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Superadmin ---------- */

.super-panel { border-color: rgba(255, 90, 31, .25); }
.super-panel .tag { vertical-align: middle; }

.tbl tr.suspended td { opacity: .5; }
.suspended-tag {
  background: rgba(248, 81, 73, .14) !important;
  border-color: rgba(248, 81, 73, .4) !important;
  color: #ffb3ae !important;
}

/* Small switch, for the site-owner toggle inside a table row */
.switch.small { width: 36px; height: 20px; }
.switch.small .slider::before { height: 14px; width: 14px; }
.switch.small input:checked + .slider::before { transform: translateX(16px); }
.switch.small input:checked + .slider { background: var(--accent); }
.switch.small input:disabled + .slider { opacity: .5; cursor: not-allowed; }

/* ---------- No cars ---------- */

/* One class on #app hides everything that belongs to a car. */
.app.no-cars .car-scoped { display: none !important; }
.app.no-cars .carbar-pick,
.app.no-cars .carlink,
.app.no-cars #qrBtn,
.app.no-cars #renameCarBtn,
.app.no-cars #deleteCarBtn { display: none; }

.nocars { text-align: center; padding: 40px 24px; }
.nocars h2 { margin-bottom: 8px; font-size: 18px; }
.nocars p { margin: 0 auto 18px; max-width: 46ch; color: var(--muted); font-size: 14.5px; }

/* ---------- Password reset ---------- */

/* The new password is shown exactly once — make it easy to read and select. */
.newpass {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid rgba(46, 160, 67, .45);
  color: #7ee787;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  user-select: all;
}

.support {
  padding: 14px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.support > b { display: block; font-size: 14px; margin-bottom: 3px; }
.support-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.support-form input { flex: 1 1 200px; width: auto; font-size: 14px; padding: 9px 11px; }

/* ---------- Flags, specs, thumbnails ---------- */

.flag-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(38, 45, 56, .55);
  cursor: pointer;
}
.flag-row:last-child { border-bottom: 0; }
.flag-text { display: flex; flex-direction: column; gap: 2px; }
.flag-text b { font-size: 14px; }
.flag-text span { font-size: 12.5px; color: var(--muted); }

.about-note { margin: 0 0 12px; }

.specs-editor { margin: 16px 0; }
.specs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.specs-head > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.spec-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.spec-row .spec-label { flex: 0 0 34%; font-size: 14px; padding: 9px 11px; }
.spec-row .spec-value { flex: 1 1 auto; font-size: 14px; padding: 9px 11px; }
.spec-row .link-btn { flex: none; font-size: 17px; line-height: 1; padding: 6px 9px; }

textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  resize: vertical;
}
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .16);
}

/* A <button>, not a link — it opens the viewer rather than navigating. Stripped
   back to looking like the thumbnail it wraps. */
.thumb-link {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.thumb-link:hover .thumb { border-color: var(--accent); }
.thumb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Photo viewer ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
}
body.lb-open { overflow: hidden; }

.lb-frame {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Centred, NOT stretched: a flex column stretches its children to full width by
     default, which would distort the photo and leave the frame padded with dead
     space. Centring lets the frame take the photo's own shape. */
  align-items: center;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Visitor photos come off phones, so most of them are PORTRAIT and much taller
   than the screen. Capping the height (and letting the width follow) scales them
   down whole. Without this the frame would simply crop the top off every one. */
.lb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1000px, 100%);
  max-height: calc(100vh - 160px); /* leaves room for the caption bar + page padding */
}

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  align-self: stretch;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.lb-meta { min-width: 0; }
.lb-meta strong { display: block; font-size: 15px; }
.lb-sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
.lb-note {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text);
  font-style: italic;
}
.lb-note:empty { display: none; }

.lb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.lb-count {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lb-close, .lb-nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.lb-close {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  font-size: 22px;
}
/* Comfortably big: these get hit with a thumb on a phone, one-handed. */
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 30px;
  padding-bottom: 4px;
}
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-close:hover, .lb-nav:hover { background: var(--accent); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; }

@media (max-width: 560px) {
  .lightbox { padding: 0; }
  .lb-frame { border-radius: 0; border: 0; max-height: 100%; }
  .lb-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lb-actions { align-self: stretch; justify-content: space-between; }
}

/* ---------- Sign in with Google / Microsoft ---------- */

.sso { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

/* A secondary button: reads as an alternative to the accent-filled Sign in. */
.sso-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.sso-btn:hover { border-color: var(--accent); background: var(--surface); }

.or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12.5px;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}

.conn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.conn-row:last-child { border-bottom: 0; }
.conn-name { font-weight: 600; min-width: 92px; }
.conn-email { color: var(--muted); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sign-in providers (site-admin config) ---------- */

.cfg-provider {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cfg-provider:last-child { border-bottom: 0; padding-bottom: 0; }

.cfg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cfg-head b { font-size: 15px; }
.cfg-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.cfg-badge.on { color: #7ee2a8; background: rgba(46, 160, 67, .16); border: 1px solid rgba(46, 160, 67, .4); }
.cfg-badge.off { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }

.cfg-field { display: block; margin-bottom: 12px; }
.cfg-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.cfg-field input { width: 100%; }
.cfg-redirect {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--accent);
}
.cfg-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- QR code popup ---------- */

.qrmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qrm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }

.qrm-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.qrm-box h2 { margin: 0 0 4px; font-size: 17px; }
.qrm-url {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
}

.qrm-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.qrm-close:hover { color: var(--text); }

/* A neutral tile so both light and inverted designs read clearly. */
.qrm-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: repeating-conic-gradient(#2b3240 0% 25%, #232a35 0% 50%) 50% / 18px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 240px;
}
.qrm-preview img { max-width: 100%; max-height: 300px; display: block; border-radius: 4px; }

.qrm-designs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}
.qrm-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.qrm-swatch img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.qrm-swatch:hover { border-color: var(--faint); }
.qrm-swatch.sel { border-color: var(--accent); color: var(--text); }
.qrm-swatch.sel img { box-shadow: 0 0 0 2px var(--accent); }

.qrm-actions { display: flex; gap: 8px; }
.qrm-actions .btn { margin-top: 0; }