/* =====================================================================
   ADMIN PORTAL — "Dispatch Board", matching the city pages
   ===================================================================== */
:root {
  --ink: #0b0c10;
  --ink-2: #13151b;
  --ink-3: #1b1e26;
  --ink-4: #262a34;
  --paper: #f4efe4;
  --paper-2: #e8e1d0;
  --amber: #ff2d2d;
  --amber-2: #ff7a7a;
  --amber-ink: #3a1a00;
  --chalk: #f4efe4;
  --muted: #a7a69d;
  --muted-2: #6f6f68;
  --line: rgba(244, 239, 228, 0.12);
  --line-strong: rgba(244, 239, 228, 0.28);
  --success: #5fd48f;
  --danger: #ff5c5c;

  --display: "Big Shoulders Display", "Barlow Condensed", Impact, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 260px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--ink);
  color: var(--chalk);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

[hidden] { display: none !important; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-2); }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--amber); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled { opacity: 0.6; cursor: wait; }

.btn-primary { background: var(--amber); color: var(--amber-ink); }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chalk);
  transform: translateX(-101%);
  transition: transform 0.35s var(--ease);
}
.btn-primary > * { position: relative; }
.btn-primary:hover:not(:disabled)::before { transform: translateX(0); }

.btn-block { width: 100%; }

.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}

.icon-btn:hover { color: var(--danger); border-color: var(--line-strong); }

/* ---- INPUTS ---- */
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="password"], select {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  padding: 0.7rem 0.9rem;
  min-height: 48px;
  color: var(--chalk);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.18); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

select option { background: var(--ink-2); }

.form-error {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  padding: 0.7rem 0.9rem;
  color: var(--chalk);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ---- LOGIN ---- */
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(255, 45, 45, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(255, 45, 45, 0.08), transparent 60%),
    var(--ink);
}

.login-view::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
  opacity: 0.6;
  pointer-events: none;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(19, 21, 27, 0.92);
  border: 1px solid var(--line-strong);
  padding: 2.5rem 2.25rem 2.25rem;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 95% 100%, 0 100%);
}

.login-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--amber) 0 14px, transparent 14px 28px);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 0.5rem 0 1.75rem;
}

.login-card h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.login-card h1 span { color: transparent; -webkit-text-stroke: 2px var(--amber); }

.login-card label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.login-card input { margin-bottom: 1rem; }

/* logo mark shared with the site nav */
.logo-icon,
.nav-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

.logo-icon img,
.nav-mark img {
  width: 36px;
  height: 36px;
  display: block;
}

/* ---- APP LAYOUT ---- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ink-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* "Admin" with a rule under it, and a small box-arrow link to the site beside the word */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk);
  padding: 0.6rem 0.75rem 1rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  line-height: 1;
}
.brand-out { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--muted); border-radius: 3px; transition: color 0.2s, background 0.2s; }
.brand-out:hover, .brand-out:focus-visible { color: var(--amber); background: var(--ink-3); outline: none; }
.brand-out svg { display: block; }

/* desktop: the menu wrapper is invisible to layout, the hamburger doesn't exist */
.sidebar-menu { display: contents; }
.nav-toggle, .sidebar-scrim { display: none; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

/* just the sign-out, tight under its rule at the bottom */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.sidebar-link:hover { color: var(--chalk); background: var(--ink-3); }
.sidebar-link.active { color: var(--chalk); border-left-color: var(--amber); background: var(--ink-3); }

.sidebar-icon { width: 1.25rem; text-align: center; font-size: 1rem; color: var(--amber); }

.main { padding: 2.25rem 2.75rem 1.5rem; min-width: 0; }

/* Locations: header + grid fill the viewport exactly, the grid scrolls inside itself */
#tab-locations { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 3.75rem); }
#tab-locations .page-header { flex: none; position: relative; margin-bottom: 2.4rem; }

/* Bookings: same idea — header, chips and pager stay put, the list scrolls inside its box */
#tab-bookings, #tab-mechanics { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 3.75rem); }
#tab-bookings .page-header, #tab-mechanics .page-header { flex: none; position: relative; margin-bottom: 2.4rem; }
#tab-bookings .pager { flex: none; justify-content: flex-end; padding-bottom: 0; }
/* mechanic access states share the status dropdown look */
select.mk-pending { color: var(--amber); border-color: rgba(255, 45, 45, 0.5); }
select.mk-approved { color: var(--success); }
select.mk-denied { color: var(--danger); }
tr.mk-row-denied td { opacity: 0.6; }
.pager[hidden] { display: none; }

/* totals: a readout strip sitting on the header's rule, under the title */
.stats-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-bar:empty { display: none; }
.stats-bar::before { content: ""; width: 4px; background: var(--amber); }
.stats-bar .stat { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.85rem; border: 0; border-left: 1px solid var(--line); background: none; white-space: nowrap; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.stats-bar .stat:first-child { border-left: 0; }
.stats-bar .stat b { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--chalk); }
.stats-bar .stat.is-zero b { color: var(--muted-2); }
.stats-bar .stat.is-hot b { color: var(--amber); }
/* on Bookings the stats are filters */
.stats-bar button.stat { cursor: pointer; transition: color 0.15s, background 0.15s; }
.stats-bar button.stat:hover { color: var(--chalk); }
.stats-bar button.stat.is-active { color: var(--chalk); background: rgba(255, 45, 45, 0.12); box-shadow: inset 0 -2px 0 var(--amber); }
.stats-bar button.stat:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.page-header h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.page-sub { color: var(--muted); font-size: 0.95rem; margin-top: 0.6rem; }

/* ---- LIST ---- */
.table-wrap { border: 1px solid var(--line-strong); overflow-x: auto; background: var(--ink-2); }

.table { width: 100%; border-collapse: collapse; }
.table.list { min-width: 560px; }

.table th, .table td {
  text-align: left;
  padding: 0.2rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table th { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.table tbody tr { position: relative; transition: background 0.2s; }
.table tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow 0.2s; }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

.table th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--ink);
  border-bottom-color: var(--line-strong);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(244, 239, 228, 0.02); }

.table-empty { text-align: center; color: var(--muted); padding: 3rem 1rem !important; line-height: 1.7; }
.table-empty strong { color: var(--amber); font-weight: 700; overflow-wrap: anywhere; }



select.city-select {
  max-width: 260px;
  min-height: 44px;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-family: var(--body);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.save-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.save-state.is-live { color: var(--success); }
.save-state.is-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(95, 212, 143, 0.18);
}
.save-state.is-error { color: var(--danger); text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.82rem; white-space: normal; }

.td-actions { text-align: right; white-space: nowrap; width: 56px; padding-right: 0.75rem; }

.icon-btn { width: 40px; height: 40px; font-size: 1.1rem; opacity: 0.6; }
.icon-btn:hover { opacity: 1; }

tr.is-new td { background: rgba(255, 45, 45, 0.06); }
tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* ---- FILTER + SORT + PAGER ---- */
.list-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  padding: 0;
  min-height: 36px;
}
.sort .sort-label { padding-left: 0.8rem; }
/* the real <select> stays for the logic; the button in front of it is what you see */
.sort .sel-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }
.sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 34px;
  padding: 0 0.75rem 0 0.85rem;
  border: 0;
  background: transparent;
  color: var(--chalk);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
}
.sel-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.sel-chev { font-size: 0.7rem; color: var(--amber); }
.sel-menu { position: fixed; z-index: 70; display: grid; padding: 0.3rem; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.sel-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--chalk);
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.sel-menu button:hover, .sel-menu button:focus-visible { background: rgba(255, 45, 45, 0.1); outline: none; }
.sel-menu button.is-on { color: var(--amber); }
.sel-menu button.is-on::after { content: "\2713"; font-size: 0.8rem; }
.sel-menu button:disabled { color: var(--muted-2); cursor: default; }

.sort-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.sort select {
  width: auto;
  min-height: 34px;
  border: 0;
  background-color: transparent;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0 2.2rem 0 0.25rem;
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
}

.sort select:focus { box-shadow: none; }
.sort:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.18); }

.filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  padding: 0 0.8rem;
  min-height: 36px;
  width: 280px;
  max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.filter:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.18); }
.filter-icon { color: var(--amber); font-size: 1rem; transform: rotate(-45deg); flex-shrink: 0; }

.filter input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--chalk);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  min-height: 34px;
  padding: 0;
}

/* the box itself glows via :focus-within; the input inside stays invisible */
.filter input:focus, .filter input:focus-visible { outline: none; border: 0; box-shadow: none; background: none; }
.filter input::placeholder { color: var(--muted-2); }
.filter input::-webkit-search-cancel-button { -webkit-appearance: none; }

.td-state {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1rem 0.25rem;
}

.pager-info {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager-info strong { color: var(--success); }

.pager-btns { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

.pager-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.pager-btn:hover:not(:disabled) { color: var(--chalk); border-color: var(--line-strong); }
.pager-btn.is-current { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-gap { color: var(--muted-2); padding: 0 0.2rem; }

/* ---- TOAST ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  padding: 0.9rem 1.25rem;
  z-index: 200;
  font-weight: 600;
  max-width: calc(100% - 2rem);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 96% 100%, 0 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.toast.success { border-left: 5px solid var(--success); }
.toast.error { border-left: 5px solid var(--danger); }

/* ---- TABS / BOOKINGS ---- */
.tab[hidden] { display: none !important; }

.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
}

.sidebar-badge[hidden] { display: none; }

.btn-secondary { background: transparent; color: var(--chalk); border: 1px solid var(--line-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }

/* ---- bookings: same grid skin as Locations (rows, borders, header), one line per request ---- */
.grid.bookings { width: 100%; min-width: 760px; }
.grid.bookings tbody tr.bk-row { cursor: pointer; outline: none; }
.grid.bookings tbody tr.bk-row:focus-visible td { background: rgba(244, 239, 228, 0.04); }
.grid.bookings tbody tr.bk-row:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.grid.bookings td.bk-status { padding: 0 0.5rem; }

.grid td.g-cell.bk-received { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
.bk-received b { font-weight: 600; color: var(--chalk); margin-right: 0.35rem; }
tr.bk-row-new .bk-received b { color: var(--amber); }
.bk-cityname { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--chalk); }
.bk-name { font-weight: 600; color: var(--chalk); }
.bk-veh { color: var(--paper-2); }
.bk-veh small { margin-left: 0.45rem; font-size: 0.78rem; color: var(--muted); }

select.bk-status-select {
  min-height: 32px;
  height: 32px;
  min-width: 8.5rem;
  width: 100%;
  padding: 0 1.8rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-color: var(--line);
  background-color: var(--ink);
}
select.bk-status-select.is-lg { min-height: 40px; height: 40px; width: auto; min-width: 10rem; font-size: 0.95rem; }
select.bk-status-new { color: var(--amber); border-color: rgba(255, 45, 45, 0.5); }
select.bk-status-confirmed { color: var(--success); }
select.bk-status-done { color: var(--muted); }
select.bk-status-declined { color: var(--danger); }
tr.bk-row-done td { opacity: 0.7; }
tr.bk-row-declined td { opacity: 0.6; }

/* ---- the request card ---- */
.bk-modal { position: fixed; inset: 0; margin: auto; /* the global margin reset would otherwise pin it top-left */ width: min(760px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); padding: 0; border: 0; background: transparent; color: var(--chalk); overflow: visible; }
.bk-modal:not([open]) { display: none; }
.bk-modal::backdrop { background: rgba(6, 7, 11, 0.82); backdrop-filter: blur(3px); }
.bkm-frame { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; }
.bk-modal[open] .bkm-frame { animation: bkm-in 0.24s var(--ease) both; }
@keyframes bkm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.bkm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1.1rem; border-bottom: 1px solid var(--line); }
.bkm-head-main { min-width: 0; }
.bkm-head .eyebrow { margin-bottom: 0.5rem; }
.bkm-name { margin: 0; font-family: var(--display); font-weight: 900; font-size: 2.3rem; line-height: 0.95; text-transform: uppercase; color: var(--chalk); overflow-wrap: anywhere; }
.bkm-city { margin: 0.5rem 0 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.bkm-city a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 45, 45, 0.4); }
.bkm-city a:hover { border-bottom-color: var(--amber); }
.bkm-head-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.bkm-status { display: contents; }
.bkm-head .on-phone { display: none; }

.bkm-body { padding: 1.25rem 1.5rem; overflow: auto; }
.bkm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bkm-cell { min-width: 0; padding: 1rem 1.1rem 1.1rem; background: var(--ink-2); }
.bkm-cell.is-wide { grid-column: 1 / -1; }
.bkm-label { margin: 0 0 0.55rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.bkm-big { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--chalk); overflow-wrap: anywhere; }
.bkm-val { margin-top: 0.3rem; font-size: 0.95rem; line-height: 1.5; color: var(--paper-2); overflow-wrap: anywhere; }
/* a mechanic's linked cities: compact chips that wrap, six shown, the rest behind "+N more" */
.mk-cities { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0 0; padding: 0; list-style: none; }
.mk-cities li.is-extra { display: none; }
.mk-cities.is-open li.is-extra { display: block; }
.mk-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 0.65rem; border: 1px solid var(--line-strong); background: var(--ink); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--amber); text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.mk-chip:hover, .mk-chip:focus-visible { border-color: var(--amber); outline: none; }
button.mk-more { color: var(--muted); }
button.mk-more:hover, button.mk-more:focus-visible { color: var(--chalk); }
/* phones: tighter chips so two or three fit a row and seven cities stay around three rows */
@media (max-width: 600px) {
  .mk-cities { gap: 0.35rem; }
  .mk-chip { min-height: 32px; padding: 0 0.55rem; font-size: 0.62rem; letter-spacing: 0.06em; }
}
.bkm-val a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.bkm-val a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.bkm-notes { white-space: pre-line; }
.bkm-mono { margin-top: 0.35rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); }
.bkm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.bkm-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0 0.85rem; border: 1px solid var(--line-strong); background: var(--ink); color: var(--chalk); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.bkm-btn:hover { border-color: var(--amber); color: var(--amber); }
.bkm-btn.is-primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.bkm-btn.is-primary:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--amber-ink); }
.bkm-btn.is-danger:hover { border-color: var(--danger); color: var(--danger); }
.bkm-note textarea { width: 100%; min-height: 76px; padding: 0.6rem 0.7rem; resize: vertical; background: var(--ink); border: 1px solid var(--line-strong); color: var(--chalk); font-family: var(--body); font-size: 0.92rem; line-height: 1.5; }
.bkm-note textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.18); }
.bkm-note-state { margin-top: 0.4rem; min-height: 1em; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.bkm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.5rem; border-top: 1px solid var(--line); }
.bkm-foot .bkm-actions { margin-top: 0; }
.bkm-foot .bkm-actions:only-child { margin-left: auto; }
.bkm-meta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }

/* ---- guest articles: the list and the article card ---- */
.ar-site-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.75rem; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); text-decoration: none; white-space: nowrap; transition: border-color 0.2s; }
.ar-site-link:hover { border-color: var(--amber); }
select.ar-new { color: var(--amber); border-color: rgba(255, 45, 45, 0.5); }
select.ar-published { color: var(--success); }
select.ar-unpublished { color: var(--muted); }
select.ar-declined { color: var(--danger); }
tr.ar-row-new .bk-received b { color: var(--amber); }
tr.ar-row-unpublished td { opacity: 0.7; }
tr.ar-row-declined td { opacity: 0.6; }
.ar-cell-title .bk-name { display: block; line-height: 1.3; }
.ar-cat { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ar-warn { display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border: 1px solid var(--danger); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); }
.ar-muted { color: var(--muted-2); }
.bk-modal.ar-modal { width: min(920px, calc(100vw - 2rem)); }
.ar-title { font-size: 2rem; line-height: 1; }
.ar-cover { display: block; width: 100%; max-width: 520px; aspect-ratio: 1200 / 630; object-fit: cover; border: 1px solid var(--line-strong); background: var(--ink); }

/* the article as the site shows it */
.ar-prose { max-width: 46rem; font-size: 1.02rem; line-height: 1.75; color: var(--paper-2); }
.ar-prose > :first-child { margin-top: 0; }
.ar-prose p, .ar-prose ul, .ar-prose ol, .ar-prose table, .ar-prose pre { margin: 0 0 1rem; }
.ar-prose h2, .ar-prose h3, .ar-prose h4, .ar-prose h5, .ar-prose h6 { margin: 1.6rem 0 0.6rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; color: var(--chalk); }
.ar-prose h2 { font-size: 1.6rem; }
.ar-prose h3 { font-size: 1.3rem; }
.ar-prose h4, .ar-prose h5, .ar-prose h6 { font-size: 1.1rem; }
.ar-prose ul, .ar-prose ol { padding-left: 1.3rem; }
.ar-prose ul { list-style: square; }
.ar-prose ol { list-style: decimal; }
.ar-prose li { margin-bottom: 0.3rem; }
.ar-prose li::marker { color: var(--amber); }
.ar-prose strong { color: var(--chalk); }
.ar-prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.ar-prose blockquote { margin: 1.25rem 0; padding: 0.4rem 0 0.4rem 1rem; border-left: 3px solid var(--amber); color: var(--chalk); }
.ar-prose blockquote p:last-child { margin-bottom: 0; }
.ar-prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.92rem; }
.ar-prose th, .ar-prose td { padding: 0.4rem 0.6rem; border: 1px solid var(--line-strong); text-align: left; }
.ar-prose code { padding: 0.1em 0.3em; background: var(--ink); font-family: var(--mono); font-size: 0.88em; }
.ar-prose pre { padding: 0.75rem; overflow-x: auto; background: var(--ink); border: 1px solid var(--line-strong); }
.ar-prose hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line-strong); }

/* edit mode + the decline note */
.ar-edit { display: grid; gap: 0.9rem; }
.ar-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ar-field { display: grid; gap: 0.35rem; min-width: 0; }
.ar-field > span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.ar-field > span small { letter-spacing: 0.04em; text-transform: none; font-size: 0.72rem; }
.ar-field input, .ar-field select, .ar-field textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.7rem; background: var(--ink); border: 1px solid var(--line-strong); color: var(--chalk); font-family: var(--body); font-size: 0.95rem; line-height: 1.5; }
.ar-field textarea { resize: vertical; }
.ar-field #are-body { min-height: 360px; font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; }
.ar-field input:focus, .ar-field select:focus, .ar-field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.18); }
.ar-edit-hint { margin: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--muted-2); }
.bkm-foot.ar-decline { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.bkm-foot.ar-decline .bkm-actions { justify-content: flex-end; }
.bkm-btn.is-danger.is-solid { background: var(--danger); border-color: var(--danger); color: #1a0505; }
.bkm-btn.is-danger.is-solid:hover { background: #ff7a7a; border-color: #ff7a7a; color: #1a0505; }
.bkm-btn:disabled { opacity: 0.55; cursor: wait; }
/* an article with the writer's edit waiting */
.ar-edit-tag { display: inline-block; margin-left: 0.4rem; padding: 0 0.35rem; border: 1px solid var(--amber); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); vertical-align: middle; }
.ar-pending { border-left: 3px solid var(--amber); padding-left: 1rem; }
.ar-changed { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.9rem; }
.ar-pending-text summary { list-style: none; margin-top: 0.75rem; }
.ar-pending-text summary::-webkit-details-marker { display: none; }
.ar-pending-text[open] .ar-prose { margin-top: 0.9rem; }

/* ---- guest writer page (/w): the mechanic board's parts, status pills instead of dropdowns ---- */
a.login-back { text-align: center; text-decoration: none; }
.wr-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.6rem; border: 1px solid var(--line-strong); font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wr-pill + .wr-pill { margin-left: 0.35rem; }
.wr-pill.wr-new { color: var(--amber); border-color: rgba(255, 45, 45, 0.5); }
.wr-pill.wr-published { color: var(--success); border-color: rgba(95, 212, 143, 0.45); }
.wr-pill.wr-declined { color: var(--danger); border-color: rgba(255, 92, 92, 0.45); }
.wr-pill.wr-unpublished { color: var(--muted); }
.wr-pill.wr-edit { color: var(--amber-2); border-style: dashed; font-size: 0.72rem; }
.grid td.wr-status { white-space: nowrap; }
.wr-head-pill { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.wr-head-pill .wr-pill { min-height: 32px; }
.wr-note { margin-top: 0.7rem; padding: 0.6rem 0.75rem; border-left: 3px solid var(--amber); background: var(--ink); }
.wr-note b { color: var(--chalk); font-weight: 600; }
.wr-hint-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; }
.wr-count { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--muted); }
.wr-count.is-ok { color: var(--amber-2); }
.wr-count.is-over { color: var(--danger); }
label.wr-file { position: relative; }

@media (max-width: 600px) {
  .ar-edit-row { grid-template-columns: 1fr; }
  .ar-title { font-size: 1.7rem; }
  .ar-site-link { display: none; }
  .mech .ar-site-link { display: inline-flex; }
  .wr-head-pill { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- mechanic board (/l): same parts as the admin, under a slim top bar instead of the sidebar ---- */
.login-sub { margin: -0.5rem 0 1.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.login-sub strong { color: var(--chalk); }
.ts-slot { width: 100%; min-height: 65px; margin: 0.25rem 0 1rem; }
.ts-slot iframe { display: block; width: 100% !important; }
.login-card [hidden] { display: none !important; }
.label-opt { margin-left: 0.4rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-2); }
/* first-time name step */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.name-row > div { min-width: 0; }
.login-privacy { display: flex; align-items: center; gap: 0.5rem; margin: -0.2rem 0 1.1rem; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.login-privacy svg { flex-shrink: 0; color: var(--amber); }
.login-back { display: block; width: 100%; margin-top: 0.9rem; padding: 0.5rem; background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.login-back:hover { color: var(--amber); }
@media (max-width: 360px) { .name-row { grid-template-columns: 1fr; } }
.login-card + .login-card { margin-top: 1rem; }
.mech { min-height: 100vh; display: flex; flex-direction: column; }
.mech-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 58px; padding: 0 1.5rem; background: var(--ink-2); border-bottom: 1px solid var(--line); }
.mech-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mech-brand .logo-icon, .mech-brand .logo-icon img { width: 30px; height: 30px; }
.mech-user { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.mech-email { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); }
.mech-out { min-height: 34px; padding: 0 0.8rem; border: 1px solid var(--line-strong); background: transparent; color: var(--chalk); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.mech-out:hover { border-color: var(--amber); color: var(--amber); }
.mech .main { padding: 1.75rem 2rem 1.5rem; }
.mech #tab-bookings { height: calc(100vh - 58px - 3.25rem); }
.mech-cities { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.mech-cities li { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mech-cities a { color: var(--amber); text-decoration: none; }
.mech-cities a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .mech-email { display: none; }
  .mech .main { padding: 1.25rem 1rem; }
  .mech #tab-bookings { height: auto; }
}

@media (max-width: 600px) {
  .bkm-grid { grid-template-columns: 1fr; }
  .bkm-name { font-size: 2rem; }
  .bkm-head, .bkm-body, .bkm-foot { padding-left: 1rem; padding-right: 1rem; }
  /* card header on a phone: the name leads with × beside it, the status gets its own full-width row below */
  .bkm-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; row-gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .bkm-head-right { display: contents; }
  .bkm-head-main { grid-column: 1; grid-row: 1; }
  .bkm-head .icon-btn { grid-column: 2; grid-row: 1; align-self: start; margin: -0.6rem -0.6rem 0 0; }
  .bkm-head .eyebrow { margin-bottom: 0.65rem; letter-spacing: 0.14em; }
  .bkm-head .on-desk { display: none; }
  .bkm-head .on-phone { display: inline; }
  .bkm-status { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; }
  .bkm-status::before { content: attr(data-label); position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); pointer-events: none; }
  .bkm-status select.bk-status-select.is-lg { width: 100%; min-width: 0; height: 46px; min-height: 46px; padding-left: 5.4rem; font-size: 1.05rem; }
  .bkm-foot { flex-direction: column; align-items: stretch; }
  .bkm-foot .bkm-actions, .bkm-foot .bkm-actions:only-child { justify-content: stretch; margin-left: 0; }
  .bkm-foot .bkm-actions .bkm-btn { flex: 1 1 auto; justify-content: center; }
  /* thumbs, not mouse pointers */
  .bkm-btn { min-height: 42px; }
  .mech-out { min-height: 40px; }
  /* the smallest labels get a touch bigger on phones */
  .stats-bar, .bkm-label, .grid .pill, .drawer .drawer-field label { font-size: 0.64rem; }
  .bkm-note-state { font-size: 0.62rem; }
}

/* the sign-in cards on narrow phones: less padding so the 300px human check still fits */
@media (max-width: 480px) {
  .login-view { padding: 0.75rem; }
  .login-card { padding: 1.75rem 1.1rem 1.5rem; }
  .login-card h1 { font-size: 2.4rem; }
}
@media (max-width: 360px) {
  .login-card h1 { font-size: 2.05rem; } /* keeps "Sign-in" on one line on the smallest phones */
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  /* one column: the top bar takes only its own height, the page gets everything else — otherwise a short
     page (few bookings) hands half of the leftover space to the top bar and it balloons */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }

  /* tight top bar: "Admin" on the left, a hamburger on the right, everything else in a pop-out */
  .sidebar {
    position: relative;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--line);
    z-index: 50;
  }
  .sidebar-brand { padding: 0.25rem 0; margin-bottom: 0; border-bottom: 0; flex: 1; font-size: 1rem; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    background: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .nav-toggle:hover, .sidebar.is-open .nav-toggle { border-color: var(--amber); }
  .nav-toggle span { display: block; height: 2px; background: var(--chalk); transition: transform 0.2s var(--ease), opacity 0.15s; }
  .sidebar.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sidebar.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .sidebar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .sidebar-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0.75rem;
    width: min(280px, calc(100vw - 1.5rem));
    padding: 0.5rem;
    background: var(--ink);
    border: 1px solid var(--line-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    z-index: 60;
  }
  .sidebar.is-open .sidebar-menu { display: block; animation: menu-in 0.18s var(--ease) both; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .sidebar-nav { flex-direction: column; gap: 0.15rem; flex: none; }
  .sidebar-footer { flex-direction: column; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
  .sidebar-link { width: 100%; min-height: 46px; padding: 0.6rem 0.8rem; border-left: 3px solid transparent; font-size: 0.78rem; letter-spacing: 0.14em; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6, 7, 11, 0.55); }
  .sidebar-scrim[hidden] { display: none; }

  .main { padding: 1.5rem 1.25rem 3rem; }
  .page-header h1 { font-size: 2.4rem; }
  /* the sidebar sits above the content here, so let the page scroll instead */
  #tab-locations, #tab-bookings, #tab-mechanics { height: auto; }
  .grid-wrap { max-height: 70vh; }
  /* totals drop into the flow once the header gets cramped: their own full-width row under the title and tools */
  #tab-locations .page-header, #tab-bookings .page-header, #tab-mechanics .page-header { flex-wrap: wrap; margin-bottom: 1.5rem; }
  .stats-bar { position: static; transform: none; height: auto; flex: 1 1 100%; order: 10; width: 100%; margin-top: 0.35rem; }
  .stats-bar .stat { padding: 0.45rem 0.8rem; }
}

/* phones: the counts become a block of tiles — big number over its label, equal widths, amber rule on top */
@media (max-width: 600px) {
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--amber);
    height: auto;
  }
  .stats-bar::before { display: none; }
  .stats-bar .stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.6rem 0.75rem 0.55rem;
    border: 0;
    background: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stats-bar .stat b { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: 0.02em; }
  .stats-bar button.stat.is-active { background: rgba(255, 45, 45, 0.12); box-shadow: inset 0 -2px 0 var(--amber); }
  /* 5 tiles (bookings): the total gets the first row to itself, the four statuses sit 2 x 2 */
  .stats-bar:has(.stat:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bar:has(.stat:nth-child(5):last-child) .stat:first-child { grid-column: 1 / -1; }
  /* 4 tiles (mechanics): total on top, the three states in a row */
  .stats-bar:has(.stat:nth-child(4):last-child) .stat:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .btn { width: 100%; }
  .list-tools { width: 100%; }
  .filter { width: 100%; }
  .sort { width: 100%; }
  .sort select { flex: 1; }
  .pager-btn { min-width: 40px; height: 40px; padding: 0 0.4rem; font-size: 0.95rem; }
  .table.list { min-width: 0; }
  input.phone-input, select.city-select { max-width: none; }
  .sidebar-link { font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.5rem; }
}

/* ---- LOCATIONS GRID (spreadsheet) ---- */
.save-indicator { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: opacity 0.6s; }
.save-indicator:empty { display: none; }
.save-indicator.is-busy { color: var(--amber); }
.save-indicator.is-saved { color: var(--success); }
.save-indicator.is-faded { opacity: 0.45; }

.grid-wrap {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 240px;
}
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.grid th, .grid td {
  height: 40px;
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid th:last-child, .grid td:last-child { border-right: 0; }
.grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0 0.7rem;
  background: var(--ink);
  border-bottom-color: var(--line-strong);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  user-select: none;
}
.grid thead th[data-col]:not(.th-fixed) { cursor: grab; }
.grid thead th.is-col-dragging { opacity: 0.45; }
.grid thead th.col-drop-before { box-shadow: inset 3px 0 0 var(--amber); }
.grid thead th.col-drop-after { box-shadow: inset -3px 0 0 var(--amber); }
body.is-col-grabbing, body.is-col-grabbing * { cursor: grabbing !important; }
.col-ghost { position: fixed; z-index: 90; pointer-events: none; padding: 0.4rem 0.65rem; background: var(--ink); border: 1px solid var(--amber); color: var(--amber); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
/* column dividers: a 16px grab zone inside each header on both sides of the line */
.grid thead th { overflow: visible; }
.th-resizer { position: absolute; top: 0; right: 0; width: 16px; height: 100%; cursor: col-resize; z-index: 4; }
.th-resizer.th-resizer-l { right: auto; left: 0; width: 14px; }
.th-resizer::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 0; width: 2px; background: transparent; transition: background 0.15s; }
.th-resizer.th-resizer-l::after { right: auto; left: 0; }
.th-resizer:hover::after, .th-resizer.is-active::after { background: var(--amber); }

/* State and City are pinned to the left edge (the handle too) */
.grid td.g-drag, .grid th[data-col="drag"] { position: sticky; left: 0; z-index: 2; background: var(--ink-2); }
.grid td[data-col="state"], .grid th[data-col="state"] { position: sticky; left: var(--l-state, 36px); z-index: 2; background: var(--ink-2); }
.grid td[data-col="city"], .grid th[data-col="city"] { position: sticky; left: var(--l-city, 156px); z-index: 2; background: var(--ink-2); border-right-color: var(--line-strong); }
.grid thead th[data-col="drag"], .grid thead th[data-col="state"], .grid thead th[data-col="city"] { top: 0; z-index: 6; background: var(--ink); }
.grid tbody tr:hover td.g-drag, .grid tbody tr:hover td[data-col="state"], .grid tbody tr:hover td[data-col="city"] { background: var(--ink-3); }
.grid thead th.th-pinned { cursor: default; }
.grid tbody tr { transition: background 0.1s; }
.grid tbody tr:hover td { background: rgba(244, 239, 228, 0.04); }
.grid tbody tr.is-draft td { color: var(--muted); }
.grid tbody tr.is-dragging td { opacity: 0.35; }
.grid tbody tr.drop-before td { box-shadow: inset 0 2px 0 var(--amber); }
.grid tbody tr.drop-after td { box-shadow: inset 0 -2px 0 var(--amber); }
.grid .table-empty { white-space: normal; height: auto; }

/* keep this low-specificity: the pinned State/City/×/handle cells override `position` with sticky */
.g-cell { position: relative; cursor: pointer; color: var(--chalk); font-size: 0.86rem; outline: none; }
/* only the padding needs to beat the zero padding on `.grid td` */
.grid td.g-cell { padding: 0 0.75rem; }
.grid td.g-cell.is-editing { padding: 0; }
.g-cell.g-ro { color: var(--muted); }
.g-cell.is-selected { box-shadow: inset 0 0 0 2px var(--amber); background: rgba(255, 45, 45, 0.07); }
.g-cell.is-editing { cursor: text; box-shadow: inset 0 0 0 2px var(--amber); background: var(--ink); }
.g-cell.is-editing input.g-input { padding: 0 0.75rem; }
.g-cell.is-error { box-shadow: inset 0 0 0 2px var(--danger); }
.g-cell.is-saving .g-text { opacity: 0.6; }
.g-cell.is-empty .g-text { color: var(--muted-2); font-style: italic; }
.g-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.g-slug i { font-style: normal; color: var(--muted-2); }
/* "Open link" chip: appears only while hovering an address or website cell that has a value */
.g-open {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding-left: 22px; /* room for the fade over the cell text */
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.74rem;
  line-height: 1;
  color: var(--amber);
  text-decoration: none;
  white-space: nowrap;
  /* same shade as the hovered cell, feathered on the left so it reads as text, not a box */
  background:
    linear-gradient(90deg, rgba(244, 239, 228, 0) 0, rgba(244, 239, 228, 0.04) 20px),
    linear-gradient(90deg, rgba(19, 21, 27, 0) 0, var(--ink-2) 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 1;
}
.g-cell:hover .g-open { opacity: 1; pointer-events: auto; }
.g-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.g-cell.is-editing .g-open { display: none; }

/* the URL is a real link: opens the city page in a new tab */
a.g-link { color: var(--chalk); text-decoration: none; }
a.g-link:hover { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
a.g-link:hover i { color: var(--amber); opacity: 0.7; }
.g-phone { font-family: var(--display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; }
.g-site { font-family: var(--mono); font-size: 0.78rem; }
/* the in-cell edit box: exactly the cell's 40px, so the row never changes height (the general
   input rule above sets a taller min-height and padding, hence the stronger selector here) */
input.g-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: var(--ink);
  color: var(--chalk);
  font: inherit;
  font-size: 0.9rem;
  cursor: text;
}
input.g-input:focus { border: 0; box-shadow: none; }
input.g-input.g-phone-in { font-family: var(--display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; }
.g-drag { text-align: center; color: var(--muted-2); }
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; cursor: grab; font-size: 0.95rem; letter-spacing: -0.15em; user-select: none; }
.drag-handle:hover { color: var(--chalk); }
.drag-handle:active { cursor: grabbing; }
.g-actions { text-align: center; }
.g-actions .icon-btn { width: 30px; height: 30px; font-size: 1rem; opacity: 0.45; }
.g-actions .icon-btn:hover { opacity: 1; }
/* the × column rides the right edge of the box; the filler soaks up any spare width before it */
.grid td.g-actions, .grid th[data-col="actions"] { position: sticky; right: 0; z-index: 2; background: var(--ink-2); box-shadow: inset 1px 0 0 var(--line); }
.grid thead th[data-col="actions"] { top: 0; z-index: 5; background: var(--ink); }
.grid tbody tr:hover td.g-actions { background: var(--ink-3); }

/* status pill + its dropdown */
.pill { display: inline-flex; align-items: center; gap: 0.5rem; height: 24px; padding: 0 0.5rem 0 0.6rem; border-radius: 3px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pill.is-published { background: rgba(95, 212, 143, 0.16); color: var(--success); }
.pill.is-draft { background: rgba(244, 239, 228, 0.1); color: var(--muted); }
.pill .chev { font-size: 0.7rem; opacity: 0.7; }
.status-menu { position: fixed; z-index: 70; min-width: 240px; padding: 0.35rem; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.status-menu button { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0.65rem; align-items: start; width: 100%; padding: 0.55rem 0.6rem; border: 0; background: transparent; color: var(--chalk); text-align: left; cursor: pointer; }
.status-menu button:hover, .status-menu button:focus-visible { background: rgba(255, 45, 45, 0.1); outline: none; }
.status-menu button.is-on { background: rgba(255, 45, 45, 0.16); }
.status-menu b { display: block; font-size: 0.88rem; font-weight: 600; }
.status-menu small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.75rem; }
.status-menu .sw { width: 12px; height: 12px; margin-top: 4px; border-radius: 2px; }
.status-menu .sw.is-published { background: var(--success); }
.status-menu .sw.is-draft { background: var(--muted-2); }

/* right-click menu */
.ctx { position: fixed; z-index: 80; min-width: 220px; padding: 0.3rem; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.ctx[hidden] { display: none; }
.ctx button { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; padding: 0.5rem 0.7rem; border: 0; background: transparent; color: var(--chalk); font-size: 0.86rem; text-align: left; cursor: pointer; }
.ctx button:hover { background: rgba(255, 45, 45, 0.1); }
.ctx button:disabled { color: var(--muted-2); cursor: default; background: transparent; }
.ctx button kbd { font-family: var(--mono); font-size: 0.66rem; color: var(--muted-2); }
.ctx hr { margin: 0.3rem 0; border: 0; border-top: 1px solid var(--line); }
.ctx .is-danger { color: var(--danger); }

/* phones: the page name with a small (i) sitting on its baseline, never hanging below the word */
.title-row { display: flex; align-items: flex-end; gap: 0.6rem; }
.title-row h1 { margin: 0; }
.title-row .info-btn { width: 30px; height: 30px; margin: 0 0 1px; font-size: 0.74rem; line-height: 1; flex-shrink: 0; }

/* while a pop-up is open nothing behind it scrolls, and the pop-ups keep their own scrollbars out of sight */
html.has-modal, html.has-modal body { overflow: hidden; }
.bkm-body, .bkm-frame, .drawer, .drawer-body { scrollbar-width: none; }
.bkm-body::-webkit-scrollbar, .bkm-frame::-webkit-scrollbar, .drawer::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* the (i): how the page works, in a popover */
.info-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { border-color: var(--amber); color: var(--amber); }
.info-pop { position: fixed; z-index: 70; width: min(380px, calc(100vw - 2rem)); padding: 1rem 1.1rem; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.info-pop[hidden] { display: none; }
.info-title { margin: 0 0 0.8rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.info-pop ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.84rem; line-height: 1.5; color: var(--chalk); }
.info-pop li::marker { color: var(--amber); }
.info-pop kbd { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.info-pop b { font-weight: 700; color: var(--amber); }
.info-close, .info-scrim { display: none; }
/* some tips only make sense with a mouse, some only on a phone */
.info-pop li.only-phone { display: none; }
@media (max-width: 600px) {
  .info-pop li.only-desktop { display: none; }
  .info-pop li.only-phone { display: list-item; }
}
/* phones: the info pop-up is a centred card with a dimmed page behind it and a close button */
@media (max-width: 600px) {
  .info-pop {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
    scrollbar-width: none;
    padding: 1.3rem 1.25rem 1.25rem;
    border-top: 2px solid var(--amber);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  }
  .info-pop::-webkit-scrollbar { display: none; }
  .info-pop .info-title { margin: 0 2.4rem 0.9rem 0; }
  .info-pop ul { gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
  .info-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-strong);
    background: var(--ink-2);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .info-close:hover { color: var(--amber); border-color: var(--amber); }
  .info-scrim.is-on { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(6, 7, 11, 0.6); }
}

/* "Open in form": one city in a side drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--ink); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.drawer-head .drawer-close { flex-shrink: 0; margin: -0.5rem -0.5rem 0 0; }
.drawer-head-main { min-width: 0; flex: 1; }
.drawer-head h2 { margin: 0.3rem 0 0; font-size: 1.35rem; }
/* the page address on its own line under the title: plain lowercase mono, the slug bright, tap to open */
.drawer-url { display: inline-block; max-width: 100%; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.drawer-url b { font-weight: 600; color: var(--chalk); }
.drawer-url:hover b, .drawer-url:focus-visible b { color: var(--amber); }
.drawer-url:focus-visible { outline: none; box-shadow: 0 2px 0 var(--amber); }
.drawer-body { display: grid; gap: 0.9rem; padding: 1rem 1.25rem 2rem; overflow: auto; }
.drawer-field label { display: block; margin-bottom: 0.35rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.drawer-field input, .drawer-field select { width: 100%; min-height: 42px; }
.drawer-field .d-state { display: block; min-height: 1em; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); }
.drawer-field .d-state.is-error { color: var(--danger); }

@media (max-width: 600px) {
  /* phones: the grid stays a scrolling box, never a 10,000px-tall page */
  .grid-wrap { max-height: 70vh; }
}

/* phones: no sideways scrolling anywhere. Locations renders City · State · Status only, Bookings and
   Mechanics render one column (the name); tapping a row opens the card. Nothing is pinned. */
@media (max-width: 700px) {
  .grid td.g-drag, .grid th[data-col="drag"],
  .grid td[data-col="state"], .grid th[data-col="state"],
  .grid td[data-col="city"], .grid th[data-col="city"] { left: auto; }
  .grid td[data-col="city"], .grid th[data-col="city"] { border-right-color: var(--line); }
  .grid td.g-actions, .grid th[data-col="actions"] { right: auto; box-shadow: none; }
}
@media (max-width: 600px) {
  .grid.bookings, .grid.bookings.is-phone { min-width: 0; width: 100%; }
  .grid-wrap { overflow-x: hidden; }
  .grid td.g-cell { cursor: pointer; }
  /* the city card: the drawer becomes a centred pop-up with a dimmed page behind it */
  .drawer {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--line-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(6, 7, 11, 0.6); }
  .drawer-scrim[hidden] { display: none; }
}
.drawer-scrim { display: none; }
.drawer-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
.drawer-foot .bkm-btn { justify-content: center; }

/* phones: one tight header, identical on every tab — eyebrow, title + (i), the sort and the search side by
   side on one row, then exactly two rows of tiles whether there are four, five or six of them */
@media (max-width: 600px) {
  .main { padding-top: 1.1rem; }
  .page-header { gap: 0.7rem; padding-bottom: 0.9rem; }
  #tab-locations .page-header, #tab-bookings .page-header, #tab-mechanics .page-header { margin-bottom: 0.9rem; }
  .page-header .list-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; align-items: stretch; }
  .page-header .save-indicator { position: absolute; top: 0; right: 0; min-height: 0; padding: 0; }
  .page-header .sort, .page-header .filter { width: auto; min-width: 0; min-height: 40px; }
  .page-header .sort .sel-btn { width: 100%; min-width: 0; justify-content: space-between; gap: 0.4rem; padding: 0 0.6rem 0 0.7rem; }
  .page-header .sort .sel-btn .sel-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-header .filter { padding: 0 0.7rem; }
  .stats-bar { margin-top: 0; }
  .stats-bar .stat { gap: 0.15rem; padding: 0.5rem 0.65rem 0.45rem; }
  .stats-bar .stat b { font-size: 1.3rem; }
  /* five tiles: total and the hot one share the first row, the other three sit under them */
  .stats-bar:has(.stat:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-bar:has(.stat:nth-child(5):last-child) .stat:first-child { grid-column: 1 / 3; }
  /* the mechanic portal: no total tile, the four statuses sit 2 x 2 (New, Confirmed / Done, Declined) */
  .mech .stats-bar .stat[data-status=""] { display: none; }
  .mech .stats-bar:has(.stat:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* no visible scrollbars: the page keeps scrolling without a bar, and the tables scroll up and down without
   one. The wide Locations table keeps a slim dark bar along the bottom so sideways scrolling stays obvious. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
.grid-wrap::-webkit-scrollbar { width: 0; height: 8px; }
.grid-wrap::-webkit-scrollbar:vertical { display: none; }
.grid-wrap::-webkit-scrollbar-track { background: var(--ink); }
.grid-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); }
.grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.grid-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.grid-wrap::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .grid-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--ink); }
}

/* =====================================================================
   Dallas Mobile Mechanic look. Same admin as mobile-auto-repair.net (layout, tables and phone layouts
   untouched); only colours, fonts and the sign-in screen change to this site's red and black glass.
   ===================================================================== */
:root {
  --ink: #08080a;
  --ink-2: #111114;
  --ink-3: #18181c;
  --ink-4: #222227;
  --paper: #f4f4f6;
  --paper-2: #d6d6db;
  --amber: #ff2d2d;
  --amber-2: #ff7a7a;
  --amber-ink: #ffffff;
  --chalk: #f4f4f6;
  --muted: #a8a8b0;
  --muted-2: #74747c;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.24);
  --display: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}
body::after { display: none; }
.btn-primary { background: linear-gradient(180deg, #ff4a4a, #d90000); color: #fff; box-shadow: 0 6px 18px rgba(255, 45, 45, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* sign-in screen: the site's frosted glass over red light */
.login-view { background: #000 url("/img/bg-desktop.webp") center / cover no-repeat; }
.login-view::before { display: none; }
.login-card {
  clip-path: none;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.login-card::before { display: none; }
.login-brand { letter-spacing: 0.04em; }
.login-brand img { border-radius: 10px; box-shadow: 0 4px 12px rgba(255, 45, 45, 0.18); }
.login-card h1 { letter-spacing: -0.02em; }
.login-card h1 span { -webkit-text-stroke: 0; color: transparent; background: linear-gradient(90deg, #ff7a7a, #ff2d2d); -webkit-background-clip: text; background-clip: text; }
.login-card input { border-radius: 12px; background: rgba(0, 0, 0, 0.35); }
.login-card .btn { border-radius: 999px; }
.login-card .btn::before { display: none; }

/* customers can cancel from /my/; shown like declined */
select.bk-status-cancelled { color: var(--danger); }
tr.bk-row-cancelled td { opacity: 0.6; }

/* ---- Dashboard ---- */
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-bottom: 2rem; }
.ds-panel { min-width: 0; }
.ds-wide { grid-column: 1 / -1; }
.ds-h { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk); margin: 0 0 0.6rem; }
.ds-table tbody tr { cursor: pointer; }
.ds-table tbody tr:hover td { background: var(--ink-3); }
.ds-sub { color: var(--muted); font-size: 0.82rem; }
.ds-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ds-pill.ds-new { color: #ffd166; border-color: rgba(255, 209, 102, 0.45); }
.ds-pill.ds-confirmed { color: #7cd4ff; border-color: rgba(124, 212, 255, 0.45); }
.ds-pill.ds-done { color: var(--success); border-color: rgba(95, 212, 143, 0.45); }
.ds-pill.ds-declined, .ds-pill.ds-cancelled { color: var(--danger); border-color: rgba(255, 92, 92, 0.45); }
.ds-state { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.ds-state a { color: var(--amber-2); }
.ds-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.ds-dot.is-on { background: var(--success); box-shadow: 0 0 10px var(--success); }
.ds-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ds-msg { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.ds-msg-top { display: flex; justify-content: space-between; gap: 1rem; }
.ds-msg-links { font-size: 0.85rem; margin: 0.15rem 0 0.4rem; }
.ds-msg-links a { color: var(--amber-2); text-decoration: none; }
.ds-msg-body { margin: 0; color: var(--paper-2); font-size: 0.92rem; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ds-none { color: var(--muted); }
#tab-dashboard .stats-bar .stat { cursor: default; }

/* ---- Settings ---- */
.st-form { display: grid; gap: 1rem; max-width: 760px; padding-bottom: 3rem; }
.st-card { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.st-field { margin-top: 1rem; }
.st-field label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.st-field input { width: 100%; min-height: 46px; padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--chalk); font: inherit; }
.st-field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.22); }
.st-field.is-error input { border-color: var(--danger); }
.st-help { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.st-help b { color: var(--chalk); }
.st-error { margin: 0.35rem 0 0; color: var(--danger); font-size: 0.85rem; min-height: 0; }
.st-error:empty { display: none; }
.st-switch { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; cursor: pointer; font-weight: 600; }
.st-switch input { position: absolute; opacity: 0; pointer-events: none; }
.st-track { position: relative; width: 50px; height: 28px; border-radius: 999px; background: var(--ink-4); border: 1px solid var(--line-strong); transition: background 0.2s; }
.st-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); }
.st-switch input:checked + .st-track { background: var(--success); border-color: transparent; }
.st-switch input:checked + .st-track::after { transform: translateX(22px); }
.st-switch input:focus-visible + .st-track { box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.3); }
/* a switch inside a field box (the service card's "Popular") keeps its own look, not the field's small label style */
.st-field label.st-switch { display: inline-flex; margin-bottom: 0; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--chalk); }
.st-track { flex: none; display: inline-block; }
/* Tapping a switch focuses its hidden checkbox, and the browser scrolled the card's frame to "show" it, so the card
   jumped up (owner, 2026-11-01). The checkbox sits right on the switch, and the frames can't be scrolled at all. */
.st-switch { position: relative; }
.st-switch input { top: 0; left: 0; width: 50px; height: 28px; margin: 0; }
.bkm-frame { overflow: clip; }

/* red buttons: no white sweep on hover (it covered the white text, and a tap leaves "hover" on phones) */
.btn-primary::before { content: none; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.st-site { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.st-site div { display: flex; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.st-site span { width: 90px; flex: none; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
/* the super admin's business details boxes: city and ZIP side by side */
.st-biz-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 0.8rem; }
.st-biz > .st-help { margin-top: 0.9rem; }
.st-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.st-actions .btn { border-radius: 999px; }
.st-saved { color: var(--muted); font-size: 0.88rem; }
.pager-btn.is-on { border-color: var(--amber); color: var(--amber-2); }
.pager-gap { color: var(--muted); padding: 0 0.3rem; align-self: center; }
@media (max-width: 900px) {
  .ds-grid { grid-template-columns: 1fr; }
}

/* Dashboard + Settings headers sit like the parent's tab headers (the counts strip rides on the title rule) */
#tab-dashboard .page-header, #tab-settings .page-header { flex: none; position: relative; margin-bottom: 2.4rem; }
@media (max-width: 900px) {
  #tab-dashboard .page-header, #tab-settings .page-header { flex-wrap: wrap; margin-bottom: 1.5rem; }
}
@media (max-width: 560px) {
  #tab-dashboard .page-header, #tab-settings .page-header { margin-bottom: 0.9rem; }
  .ds-state { width: 100%; }
}

/* ---- Bookings: the service the customer picked sits where the city was ---- */
.bk-svc { font-weight: 700; color: var(--chalk); }
.bk-svc.is-none { color: var(--muted-2); font-weight: 500; font-style: italic; }

/* ---- Services: one table, grouped by category ---- */
#tab-services .page-header { flex: none; position: relative; margin-bottom: 2.4rem; }
#tab-services .stats-bar .stat { cursor: default; }
.sv-table td.g-cell { cursor: pointer; }
.sv-table tr.sv-cat-row td { height: auto; padding: 1.1rem 0.85rem 0.45rem; background: var(--ink); border-right: 0; border-bottom-color: var(--line-strong); }
.sv-cat-move { margin-right: 0.75rem; vertical-align: middle; }
.sv-cat-name { vertical-align: middle; font-family: var(--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk); }
.sv-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 0.6rem; padding: 0 0.4rem; border-radius: 999px; background: var(--ink-4); font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
.sv-flag { margin-left: 0.6rem; padding: 0.15rem 0.5rem; border: 1px solid rgba(255, 92, 92, 0.45); border-radius: 999px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--danger); }
.sv-table td.sv-empty { height: 52px; padding: 0 0.85rem; color: var(--muted-2); font-style: italic; }
.sv-table td { height: 62px; }
.sv-order { display: inline-flex; gap: 0.3rem; }
/* the order arrows (owner, 2026-11-01: they sat at odd heights): the services' arrow cell stays a real table cell, its two
   buttons side by side in the middle of the row, lined up with the category headings' arrows above them */
.sv-table td.sv-order { display: table-cell; padding: 0 0.6rem; white-space: nowrap; vertical-align: middle; }
.sv-table td.sv-order .sv-move { display: inline-grid; vertical-align: middle; }
.sv-table td.sv-order .sv-move + .sv-move { margin-left: 0.3rem; }
.sv-table tr.sv-cat-row td { padding-left: 0.6rem; }
.sv-move { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--ink); color: var(--muted); font-size: 0.62rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.sv-move:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.sv-move:disabled { opacity: 0.25; cursor: default; }
.sv-main { display: table-cell; }
.sv-table td.sv-main img { float: left; width: 34px; height: 34px; margin: 0 0.8rem 0 0; object-fit: contain; }
.sv-table td.sv-main span { display: block; overflow: hidden; text-overflow: ellipsis; }
.sv-table td.sv-main b { display: block; font-weight: 700; color: var(--chalk); overflow: hidden; text-overflow: ellipsis; }
.sv-table td.sv-main small { display: block; color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; }
.sv-catcell { color: var(--paper-2); }
.sv-pill { min-height: 32px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--muted); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.sv-pill.is-on { color: var(--success); border-color: rgba(95, 212, 143, 0.5); background: rgba(95, 212, 143, 0.08); }
.sv-pill:hover { border-color: var(--amber); }
.sv-pill:disabled { opacity: 0.5; cursor: wait; }
tr.sv-row.is-off td.sv-main, tr.sv-row.is-off td.sv-catcell { opacity: 0.5; }
/* the Home-screen star */
.sv-star { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0 0.75rem 0 0.6rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.sv-star span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-star.is-on { color: #ffc93c; border-color: rgba(255, 201, 60, 0.55); background: rgba(255, 201, 60, 0.08); }
.sv-star:hover { border-color: var(--amber); }
.sv-star:disabled { opacity: 0.5; cursor: wait; }
.sv-table td.sv-popcell { padding: 0 0.6rem; }
#tab-services .bkm-btn { min-height: 38px; border-radius: 999px; }

/* the service card and the categories card */
.bk-modal.sv-modal { width: min(620px, calc(100vw - 2rem)); }
.sv-modal .bkm-frame { border-radius: 20px; }
.sv-modal .bkm-btn { border-radius: 999px; }
.sv-name { font-size: 1.7rem; }
.sv-fields { display: grid; gap: 0.2rem; }
.sv-fields .st-field:first-child { margin-top: 0; }
.sv-fields select { width: 100%; min-height: 46px; border-radius: 12px; }
.sv-fields textarea { width: 100%; min-height: 96px; padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--ink); color: var(--chalk); font: inherit; line-height: 1.5; resize: vertical; }
.sv-fields textarea:focus, .sv-fields select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.22); }
.sv-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 0.5rem; }
.sv-ic { height: 58px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.sv-ic img { width: 40px; height: 40px; object-fit: contain; opacity: 0.7; }
.sv-ic:hover img, .sv-ic.is-on img { opacity: 1; }
.sv-ic.is-on { border-color: var(--amber); background: rgba(255, 45, 45, 0.1); box-shadow: 0 0 0 2px rgba(255, 45, 45, 0.25); }
#sv-delete[hidden] { display: none; }
.cat-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.cat-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.cat-item.is-off .cat-name { opacity: 0.55; }
.cat-item .sv-count { margin-left: 0; }
.cat-name { flex: 1; min-width: 0; min-height: 38px !important; padding: 0 0.7rem !important; border-radius: 10px; }
.cat-none { color: var(--muted); padding: 0.5rem 0; }
.cat-del.is-armed { border-color: var(--danger); color: var(--danger); }
.cat-add { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.cat-add input { flex: 1; min-width: 0; min-height: 42px; border-radius: 12px; }

/* the Settings menu (Services, Sign out) and the bottom app bar are phone-only */
.st-menu, .adm-tabs { display: none; }

/* phones: services stack into cards; the category sits in the group heading */
@media (max-width: 760px) {
  #tab-services .page-header { flex-wrap: wrap; margin-bottom: 0.9rem; }
  #tab-services .list-tools { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #tab-services .list-tools .filter { grid-column: 1 / -1; }
  #tab-services .list-tools .info-btn { position: absolute; top: 0; right: 0; }
  #tab-services .bkm-btn { justify-content: center; min-height: 42px; }
  .sv-table { min-width: 0 !important; width: 100%; table-layout: auto; }
  .sv-table colgroup, .sv-table thead { display: none; }
  #sv-wrap { overflow: visible; max-height: none; }
  .sv-table tr.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main main main" "order star state"; align-items: center; gap: 0.6rem; padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--line); }
  .sv-table td.sv-popcell { grid-area: star; }
  .sv-table tr.sv-row td.sv-order { display: flex; gap: 0.4rem; }
  .sv-table tr.sv-row td { display: block; height: auto; border: 0; padding: 0 !important; }
  .sv-table td.sv-main { grid-area: main; white-space: normal; }
  .sv-table td.sv-main b, .sv-table td.sv-main small { white-space: normal; }
  .sv-table td.sv-statecell { grid-area: state; align-self: center; }
  .sv-table td.sv-order { grid-area: order; }
  .sv-table td.sv-catcell { display: none !important; }
  .sv-table tr.sv-cat-row, .sv-table tr.sv-cat-row td { display: block; }
  .sv-table tr.sv-cat-row td { padding: 1.2rem 0.4rem 0.5rem; border-bottom: 1px solid var(--line-strong); }
  .sv-move { width: 40px; height: 34px; }
  .sv-modal .bkm-foot { flex-wrap: wrap; }
  .cat-item { flex-wrap: wrap; }
  .cat-name { flex-basis: calc(100% - 100px); }
}

/* phones and tablets: the open-the-site button sits at the far right of the top bar, not beside "Admin" (owner, 2026-11-01) */
@media (max-width: 900px) {
  .sidebar-brand .brand-out { margin-left: auto; }
}

/* phones: an app bar along the bottom instead of the hamburger menu */
@media (max-width: 760px) {
  .nav-toggle, .sidebar-menu, .sidebar-scrim { display: none !important; }
  .main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .st-menu { display: grid; gap: 1px; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
  .st-menu-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.15rem 0.8rem; padding: 0.95rem 1.1rem; background: var(--ink-2); border: 0; color: var(--chalk); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
  .st-menu-row b { font-weight: 700; font-size: 1rem; }
  .st-menu-row span { grid-column: 1; color: var(--muted); font-size: 0.85rem; }
  .st-menu-row i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 1.4rem; color: var(--muted); }
  .st-menu-row.is-out b { color: var(--danger); }
  /* same plain bar as the website's: slim, icons only, grey with the open tab in red, red tile in the middle */
  .adm-tabs:not([hidden]) {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding: 0 8px env(safe-area-inset-bottom, 0px);
    background: rgba(10, 10, 12, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .adm-tabs a { position: relative; height: 54px; display: grid; place-items: center; color: rgba(244, 244, 246, 0.48); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .adm-tabs a > span:not(.disc) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adm-tabs .ti { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: transform 0.12s; }
  .adm-tabs a:active .ti { transform: scale(0.9); }
  .adm-tabs a.on { color: #ff3b3b; }
  .adm-tabs .adm-center .disc { display: grid; place-items: center; width: 50px; height: 36px; border-radius: 12px; background: linear-gradient(180deg, #ff4a4a, #d90000); color: #fff; box-shadow: 0 3px 10px rgba(255, 45, 45, 0.25); }
  .adm-tabs .adm-center .ti { width: 21px; height: 21px; }
  /* the keyboard pushes the page up, so the bar steps aside while typing instead of riding on the keyboard */
  body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea):focus) .adm-tabs { display: none; }
}

/* the booking card's status: small, in the top right of the Customer box (owner, 2026-11-01) */
.bkm-cell { position: relative; }
.bkm-cell .bkm-status { display: block; position: absolute; top: 0.65rem; right: 0.75rem; grid-column: auto; grid-row: auto; }
.bkm-cell .bkm-status::before { content: none; }
.bkm-cell .bkm-status select.bk-status-select.is-lg { width: auto; min-width: 0; height: 30px; min-height: 30px; padding: 0 1.9rem 0 0.7rem; font-size: 0.74rem; letter-spacing: 0.08em; background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; }

/* Call / Text / Email as icons */
.bkm-contact { gap: 0.6rem; }
.bkm-contact .bkm-ic { justify-content: center; width: 56px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; }
.bkm-contact .bkm-ic svg { display: block; width: 22px; height: 22px; }

/* the Admins card in Settings (only the super admin ever gets it) */
.st-badge { display: inline-block; margin-left: 0.5rem; padding: 0.2rem 0.55rem; border: 1px solid rgba(255, 45, 45, 0.5); border-radius: 999px; color: var(--amber); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; vertical-align: middle; }

/* New booking on the Bookings tab (the center button of the phone bar does the same) */
.bk-new-btn { margin-top: 0.9rem; min-height: 42px; padding: 0 1.1rem; font-size: 0.95rem; border-radius: 999px; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) { .bk-new-btn { display: none; } }

/* the Dashboard's Refresh: a small pill beside Booking Open / Closed, not a wide box (owner, 2026-11-01) */
#ds-refresh { min-height: 30px; height: 30px; padding: 0 0.85rem; border-radius: 999px; font-size: 0.6rem; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) {
  #tab-dashboard .page-header .list-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  #tab-dashboard .ds-state { width: auto; }
  #tab-dashboard #ds-refresh { flex: none; min-height: 30px; justify-content: center; }
}

/* phones: dashboard rows stack into cards instead of scrolling sideways */
@media (max-width: 760px) {
  .ds-panel .grid-wrap { overflow: hidden; min-height: 0; border-radius: 18px; }
  .ds-table { min-width: 0 !important; width: 100%; table-layout: auto; }
  .ds-table colgroup, .ds-table thead { display: none; }
  .ds-table, .ds-table tbody, .ds-table tr, .ds-table td { display: block; width: 100%; }
  .ds-table tr { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); }
  .ds-table td { border: 0 !important; padding: 0.15rem 0 !important; height: auto; }
  .ds-table td.table-empty { padding: 1.4rem 0.4rem !important; text-align: center; white-space: normal; }
  .ds-table .g-text { white-space: normal; }
  /* each booking as a compact card: a calendar tile, the name, what and which car, the time, the status */
  .ds-table tr.bk-row { padding: 12px 14px; }
  .ds-table tr.bk-row > td:not(.ds-card) { display: none !important; }
  .ds-table tr.bk-row > td.ds-card { display: block !important; padding: 0 !important; }
  .dsc { display: flex; align-items: center; gap: 14px; }
  .dsc-date { flex: none; display: grid; justify-items: center; width: 56px; padding: 6px 0 7px; border-radius: 14px; background: rgba(255, 45, 45, 0.1); border: 1px solid rgba(255, 45, 45, 0.35); }
  .dsc-date small { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ff8080; }
  .dsc-date b { font-family: var(--display); font-size: 1.5rem; line-height: 1.05; color: var(--chalk); }
  .dsc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .dsc-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chalk); font-size: 1rem; }
  .dsc-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.86rem; }
  .dsc-main em { font-style: normal; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
  .dsc .ds-pill { flex: none; align-self: flex-start; }
}
.ds-card { display: none; }

/* phones: Settings as grouped rows, each opening a sheet (the owner picked it from three, 2026-11-01) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) {
  #tab-settings.has-lay .st-menu, #tab-settings.has-lay .st-form { display: none; }
  #tab-settings.has-lay { padding-bottom: 70px; }
  .st-lay [hidden] { display: none !important; }
  .st-lay .ti, .st-sheet .ti { display: block; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  .st-lay .st-field, .st-sheet .st-field { margin-top: 0.9rem; }
  .st-lay [data-slot]:first-child .st-field, .st-sheet [data-slot]:first-child .st-field { margin-top: 0.3rem; }
  .st-lay .st-site, .st-sheet .st-site { margin-top: 0.5rem; }

  /* shared row pieces */
  .st1-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 45, 45, 0.12); color: #ff6b6b; }
  .st1-ic svg, .st1-ic .ti { width: 21px; height: 21px; }
  .st1-txt { flex: 1; min-width: 0; }
  .st1-txt b { display: block; color: var(--chalk); font-weight: 700; font-size: 1rem; }
  .st1-txt small { display: block; margin-top: 1px; color: var(--muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st1-txt .st-badge { margin-left: 0.35rem; }
  .st1-chev { flex: none; font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--muted-2); }
  .st1-end { flex: none; }
  .st1-end .st-switch { margin: 0; }
  .st1-end .st-switch > span:last-child { display: none; }
  .st-saved-line { margin: 6px 6px 0; color: var(--muted-2); font-size: 0.8rem; }

  /* the rows and their sheets */
  .st1 { display: grid; gap: 10px; }
  .st1-group { margin: 10px 6px -2px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
  .st1-list { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); overflow: hidden; }
  .st1-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--chalk); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
  .st1-list > :last-child { border-bottom: 0; }
  .st1-row:active { background: var(--ink-3); }
  .st1-row.is-out .st1-ic { background: rgba(255, 90, 90, 0.12); color: #ff7a7a; }
  .st1-row.is-out b { color: #ff7a7a; }
  .st-sheet { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding: 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 24px 24px 0 0; background: var(--ink-2); color: var(--chalk); }
  .st-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
  .st-sheet[open] { animation: st-up 0.28s var(--ease); }
  @keyframes st-up { from { transform: translateY(100%); } to { transform: none; } }
  .st-sheet-in { display: flex; flex-direction: column; max-height: 88vh; }
  .st-sheet-grab { width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-strong); }
  .st-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 6px; }
  .st-sheet-top h2 { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 800; color: var(--chalk); }
  .st-sheet-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-3); color: var(--chalk); font-size: 1.3rem; line-height: 1; cursor: pointer; }
  .st-sheet-body { overflow-y: auto; padding: 4px 18px 16px; }
  .st-sheet-acts { padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .st-sheet-acts .btn { width: 100%; border-radius: 999px; }
}

/* phones: Services shows the Home screen picks, then categories that open their own screen, with a back button to
   Settings (the owner picked it from three, 2026-11-01) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) {
  #tab-services.has-lay > :not(.svp):not(dialog) { display: none !important; }
  #tab-services.has-lay { padding-bottom: 16px; }
  .svp { display: grid; gap: 10px; }
  .svp-back { justify-self: start; padding: 2px 0; border: 0; background: none; color: #ff7a7a; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
  .svp-title { margin: 2px 0 4px; font-family: var(--display); font-weight: 900; font-size: 2.1rem; line-height: 1; text-transform: uppercase; color: var(--chalk); }
  .svp-acts { display: flex; gap: 8px; }
  .svp-acts .btn { flex: 1; min-height: 46px; padding: 0 1rem; border-radius: 999px; font-size: 0.9rem; }
  .svp-reorder { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--chalk); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
  .svp-reorder.is-on { border-color: var(--amber); color: #ff7a7a; }
  .svp-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin: 10px 6px -2px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
  .svp-group em { margin-left: 4px; font-style: normal; color: var(--muted); }
  .svp-group em.is-off { color: #ff8a8a; }
  .svp-group .svp-reorder { min-height: 32px; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }
  .svp-list { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); overflow: hidden; }
  .svp-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--chalk); cursor: pointer; }
  .svp-list > :last-child { border-bottom: 0; }
  .svp-row:active { background: var(--ink-3); }
  .svp-row.is-off { opacity: 0.6; }
  .svp-row img { flex: none; }
  .svp-txt { flex: 1; min-width: 0; }
  .svp-txt b { display: block; font-weight: 700; color: var(--chalk); }
  .svp-txt small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 0.84rem; line-height: 1.35; }
  .svp-chips { display: flex; gap: 6px; margin-top: 5px; }
  .svp-chip { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .svp-chip.is-home { border-color: rgba(255, 200, 80, 0.5); color: #ffcf6b; }
  .svp-chip.is-off { border-color: rgba(255, 120, 120, 0.5); color: #ff8a8a; }
  .svp-chev { flex: none; font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--muted-2); }
  .svp-arrows { flex: none; display: flex; gap: 6px; }
  .svp-arrows .sv-move { width: 36px; height: 36px; }
  .svp-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 0.9rem; }

  /* the Home screen picks */
  .svp-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .svp-home-tile { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(255, 200, 80, 0.3); border-radius: 14px; background: var(--ink-2); color: var(--chalk); text-align: left; font: inherit; cursor: pointer; }
  .svp-home-tile img { flex: none; }
  .svp-home-tile b { font-size: 0.88rem; line-height: 1.25; }
  .svp-home-tile.is-empty { border-style: dashed; border-color: var(--line-strong); color: var(--muted); font-size: 0.8rem; cursor: default; }
  .svp-home .svp-group { margin-top: 4px; }

}

/* =====================================================================
   MESSAGES (Ask a Mechanic, owner 2026-11-01): the list on the left, the conversation on the right. Bubbles,
   photos and the box you type in come from /css/chat.css (shared with the customer's page).
   ===================================================================== */
/* Inbox / Archived: a small switch on the same row as "Messages", at the right (owner, 2026-11-01) */
#tab-chat .page-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
#tab-chat .page-header .list-tools { display: flex; width: auto; flex: none; margin: 0; }
.ac-box { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); }
.ac-boxbtn { min-height: 26px; padding: 0 7px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: 0.68rem; white-space: nowrap; cursor: pointer; }
/* narrow phones: the heading eases down a touch so the switch still fits beside it */
@media (max-width: 760px) { #tab-chat .page-header h1 { font-size: min(2.4rem, 9.6vw); } }
.ac-boxbtn.is-on { background: var(--ink-4); color: var(--chalk); }
.ac-boxbtn b { margin-left: 3px; color: var(--amber-2); font-weight: 800; }
.ac-wrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); height: calc(100vh - 200px); min-height: 480px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--ink-2); }
.ac-list { overflow-y: auto; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.ac-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--chalk); font: inherit; text-align: left; cursor: pointer; }
.ac-item:hover { background: var(--ink-3); }
.ac-item.is-on { background: var(--ink-4); box-shadow: inset 3px 0 0 var(--amber); }
.ac-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #ff4a4a, #b00000); color: #fff; font-weight: 800; font-size: 1.05rem; }
.ac-item-txt { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ac-item-top { display: flex; align-items: baseline; gap: 8px; }
.ac-item-top b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.ac-item-top time { flex: none; color: var(--muted); font-size: 0.78rem; }
.ac-item-sub { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.86rem; }
.ac-item-sub > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ac-item.is-unread .ac-item-top b { font-weight: 800; }
.ac-item.is-unread .ac-item-top time { color: var(--amber-2); font-weight: 700; }
.ac-item.is-unread .ac-item-sub > span { color: var(--chalk); }
.ac-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3b3b; color: #fff; font-style: normal; font-weight: 800; font-size: 0.72rem; line-height: 20px; text-align: center; }
.ac-tag { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); }
.ac-empty { padding: 24px 18px; color: var(--muted); line-height: 1.5; }
.ac-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ink); }
.ac-none { margin: auto; display: grid; justify-items: center; gap: 6px; padding: 30px; text-align: center; color: var(--muted); }
.ac-none b { color: var(--chalk); font-size: 1.05rem; }
.ac-none-ic { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 6px; border-radius: 18px; background: rgba(255, 45, 45, 0.12); border: 1px solid rgba(255, 45, 45, 0.4); color: #ff6b6b; }
.ac-none-ic .ti { width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ac-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ac-conv[hidden] { display: none; }
.ac-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.ac-head .ac-av { width: 40px; height: 40px; font-size: 0.95rem; }
.ac-head-txt { flex: 1; min-width: 0; }
.ac-head-txt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.02rem; }
.ac-head-txt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 0.8rem; }
.ac-back { display: none; }
.ac-head .cx-hbtn { text-decoration: none; }
.ac-head .ac-book { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 14px 0 11px; font: inherit; font-weight: 800; font-size: 0.88rem; }
.ac-conv .cx-compose { background: var(--ink-2); }
.ac-conv .cx-thread { background: var(--ink); }
/* the tab bar's unread count */
.adm-tabs .tab-badge { position: absolute; top: calc(50% - 21px); left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b3b; color: #fff; font: 800 11px/18px var(--body); text-align: center; border: 2px solid #0a0a0c; box-sizing: content-box; }

/* Settings → New booking requests: whether each address gets the domain's email yet */
.st-fwd { display: grid; gap: 6px; margin-top: 8px; }
.st-fwd p { margin: 0; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.st-fwd b { color: var(--chalk); font-weight: 700; overflow-wrap: anywhere; }
.st-fwd .is-ok { border-color: rgba(95, 212, 143, 0.4); color: var(--success); }
.st-fwd .is-wait { border-color: rgba(255, 196, 0, 0.4); color: #ffd36b; }
.st-fwd .is-bad { border-color: rgba(255, 92, 92, 0.45); color: var(--danger); }
.st-fwd-again { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--amber-2); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

/* Settings → Chat: the switch, the hours, notifications */
.st-chat { margin-top: 1rem; }
.st-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 1.3rem 0 0.5rem; font-weight: 800; font-size: 0.95rem; color: var(--chalk); }
.st-now { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 0.76rem; }
.st-now.is-open { color: var(--success); border-color: rgba(95, 212, 143, 0.45); }
.st-hours { display: grid; gap: 6px; max-width: 540px; }
.st-day { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; }
.st-day .st-switch { margin: 0; }
.st-day input[type=time] { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--ink); color: var(--chalk); font: inherit; color-scheme: dark; }
.st-day .st-to { color: var(--muted); font-size: 0.85rem; }
.st-day .st-closed { display: none; grid-column: 2 / -1; color: var(--muted); }
.st-day.is-off input[type=time], .st-day.is-off .st-to { display: none; }
.st-day.is-off .st-closed { display: block; }
.st-chat-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.st-chat-acts .st-saved { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) {
  #tab-settings.has-lay .st-chat { display: none; }
  .st-sheet .st-hours-wrap > .st-sub:first-child { margin-top: 0; }
  .st-sheet .st-push > .st-sub:first-child { display: none; }
  .st-day { grid-template-columns: 92px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .st-day input[type=time] { padding: 0 6px; font-size: 0.92rem; text-align: center; }
  .st-day input[type=time]::-webkit-calendar-picker-indicator { display: none; } /* tapping the box still opens the picker */
  .st-chat-acts .btn { flex: 1; justify-content: center; }
}

/* phones: the list, then a conversation fills the screen above the bottom bar (back button to the list) */
@media (max-width: 760px) {
  #tab-chat .page-header { margin-bottom: 0.8rem; }
  .ac-wrap { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .ac-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
  .ac-list > :last-child { border-bottom: 0; }
  .ac-pane { display: none; }
  .ac-wrap.is-conv .ac-pane { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: calc(54px + env(safe-area-inset-bottom, 0px)); z-index: 52; padding-top: env(safe-area-inset-top, 0px); }
  body:has(.ac-pane textarea:focus) .ac-wrap.is-conv .ac-pane { bottom: 0; }
  .ac-back { display: grid; place-items: center; width: 34px; height: 42px; margin-left: -6px; border: 0; background: none; color: var(--chalk); cursor: pointer; }
  .ac-head .ac-book { width: 42px; padding: 0; justify-content: center; }
  .ac-head .ac-book span { display: none; }
  .ac-head { padding: 8px 10px; }
  html.ac-conv-open { overflow: hidden; }
}

/* phones: full height means with the address bar showing, so a screen that fits does not scroll (owner, 2026-11-01) */
body, .login-view, .app { min-height: 100svh; }