/* Fort Fareham Garage — admin styles. Modern, dense, businesslike.
 * Builds on the public-site tokens but adds an admin chrome of its own. */

:root {
  /* Admin is light-only — don't follow OS/Chrome dark mode. */
  color-scheme: light;
  /* Force form controls to brand blue — without this the user's installed
   * Chrome theme (e.g. pink) paints every checkbox / radio / range slider. */
  accent-color: #0e1ea0;

  --adm-bg:        #f5f6f9;
}
/* Defensive baseline: any input/select/textarea not styled by .adm-form still
 * gets a white background so Chrome's user theme can't tint it. */
body.admin input, body.admin select, body.admin textarea {
  background-color: #fff;
  color: var(--adm-text);
}
:root {
  --adm-surface:   #ffffff;
  --adm-border:    #e2e6ee;
  --adm-text:      #1f2937;
  --adm-muted:     #6b7280;
  --adm-blue:      #0e1ea0;    /* same brand blue as public site */
  --adm-blue-dark: #0a1577;
  --adm-blue-tint: #eef0ff;
  --adm-green:     #059669;
  --adm-green-tint:#d1fae5;
  /* "amber" is kept as a variable name for code-history reasons but the
   * actual hue is now sky/teal — Annie didn't want any yellow on the site.
   * Used for in-progress, warnings, and other "active intermediate" states. */
  --adm-amber:     #0284c7;     /* sky-600 */
  --adm-amber-tint:#e0f2fe;     /* sky-100 */
  --adm-red:       #dc2626;
  --adm-red-tint:  #fee2e2;
  --adm-radius:    8px;
  --adm-radius-sm: 4px;
  /* Layered shadow stack — bumped from the v1 values so cards/buttons feel
   * "lifted" off the page rather than painted on. Annie thought the admin
   * looked plain; depth is the cheapest fix.
   *   adm-shadow-1: resting state (subtle but visible)
   *   adm-shadow-2: hover / focused state (more lift)
   *   adm-shadow-3: floating overlays (modals, popovers) */
  --adm-shadow-1:  0 1px 2px rgba(15, 23, 42, .06),
                   0 2px 6px rgba(15, 23, 42, .08),
                   inset 0 1px 0 rgba(255, 255, 255, .6);
  --adm-shadow-2:  0 2px 6px rgba(15, 23, 42, .08),
                   0 12px 28px rgba(15, 23, 42, .12),
                   inset 0 1px 0 rgba(255, 255, 255, .7);
  --adm-shadow-3:  0 8px 16px rgba(15, 23, 42, .12),
                   0 24px 48px rgba(15, 23, 42, .18);
  /* Soft surface gradient — applied to .card, .adm-panel, .side-panel so
   * surfaces look lit-from-above instead of flat white. */
  --adm-surface-gradient: linear-gradient(180deg, #ffffff 0%, #f9fafd 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body.admin {
  background: var(--adm-bg);
  color: var(--adm-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* Annie asked for easier-to-read fonts across the admin — bumped the
   * base from 13.5px to 15px with a roomier line-height. Component-level
   * sizes scale automatically from these tokens. */
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.admin a { color: var(--adm-blue); text-decoration: none; }
body.admin a:hover { text-decoration: underline; }

/* ===== Top bar ===== */
.adm-topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-bottom: 1px solid var(--adm-border);
  padding: 0 1.5rem;
  height: 56px;
  display: flex; align-items: center; gap: 1.5rem;
  /* Soft drop shadow + faint top highlight = "ribbon" floats above content */
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04),
              0 4px 12px rgba(15, 23, 42, .06);
}
.adm-topbar .adm-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; color: var(--adm-blue);
  font-size: 1rem; letter-spacing: -.01em;
  white-space: nowrap;
}
.adm-topbar .adm-brand img { height: 28px; }
.adm-nav {
  /* overflow-y MUST stay visible so the pill shadows aren't clipped at the
   * top/bottom of the 56px topbar — CSS specifies overflow-y as 'visible'
   * is only honoured when overflow-x is also 'visible', so we drop the
   * old `overflow-x: auto` and let the responsive media queries handle
   * narrow viewports (compact padding + smaller fonts kick in <1100px,
   * which fits everything without horizontal scroll). */
  display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow: visible;
  align-items: center;
  justify-content: center;       /* centre the pill group in the topbar */
}
.adm-nav a {
  padding: 8px 14px;
  border-radius: var(--adm-radius-sm);
  color: var(--adm-muted);
  font-weight: 500;
  white-space: nowrap;
}
.adm-nav a:hover { background: var(--adm-bg); text-decoration: none; }
.adm-nav a.is-current {
  background: var(--adm-blue-tint);
  color: var(--adm-blue);
  font-weight: 600;
}
.adm-user {
  display: flex; align-items: center; gap: .75rem;
  white-space: nowrap;
}
.adm-user .who { color: var(--adm-muted); font-size: 14px; }
.adm-user .out { color: var(--adm-muted); font-size: 14px; }
.adm-user .out:hover { color: var(--adm-red); }

/* Public-site button reset for admin */
body.admin .btn {
  display: inline-block;
  background: linear-gradient(180deg, #152dc7 0%, var(--adm-blue) 60%, var(--adm-blue-dark) 100%);
  color: #fff;
  padding: 8px 16px; border: 1px solid var(--adm-blue-dark);
  border-radius: var(--adm-radius-sm);
  font-weight: 500; font-size: 14px;
  cursor: pointer; text-decoration: none;
  text-transform: none; letter-spacing: 0;
  /* Inner highlight + drop shadow → physical "button" feel rather than flat slab */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 1px 2px rgba(15, 23, 42, .12),
              0 2px 6px rgba(13, 24, 111, .15);
  transition: background .12s ease, transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
body.admin .btn:hover {
  background: linear-gradient(180deg, var(--adm-blue) 0%, var(--adm-blue-dark) 100%);
  border-color: var(--adm-blue-dark);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 2px 4px rgba(15, 23, 42, .16),
              0 6px 14px rgba(13, 24, 111, .22);
}
body.admin .btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
body.admin .btn.ghost { background: #fff; color: var(--adm-text); border-color: var(--adm-border); }
body.admin .btn.ghost:hover { background: var(--adm-bg); border-color: var(--adm-muted); color: var(--adm-text); }
body.admin .btn.danger { background: var(--adm-red); border-color: var(--adm-red); }
body.admin .btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
body.admin .btn.sm { padding: 4px 10px; font-size: 12px; }
body.admin .btn.xs { padding: 2px 8px; font-size: 11px; border-radius: 999px; line-height: 1.4; }
body.admin .btn.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
body.admin .btn.danger:hover { background: #991b1b; border-color: #991b1b; }
body.admin .btn.ghost.danger { background: transparent; border-color: #fecaca; color: #b91c1c; }
body.admin .btn.ghost.danger:hover { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
body.admin .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== Layout ===== */
.adm-main { padding: 1.5rem; max-width: 1480px; margin: 0 auto; }
.adm-page-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.adm-page-head h1 {
  font-size: 1.5rem; font-weight: 600; margin: 0;
  color: var(--adm-text);
}
.adm-page-head .crumbs { color: var(--adm-muted); font-size: 14px; }

/* Screen-reader-only utility (visually hidden, still announced). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== Cards ===== */
.card {
  background: var(--adm-surface-gradient);
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  box-shadow: var(--adm-shadow-1);
  padding: 1.25rem 1.5rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--adm-shadow-2); }
.card + .card { margin-top: 1.25rem; }
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 1rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
/* Inside a grid the two cards are DOM siblings, so `.card + .card`
   was firing and pushing the second column's card down 1.25rem.
   Reset it here — within a card-grid, top-alignment is handled by
   the grid itself, not by inter-card stacking margins. */
.card-grid > .card + .card { margin-top: 0; }

/* Pricing page: indented sub-rows under General Repairs that show
   each repair_categories entry — so admin sees what the customer
   sub-picker is offering without leaving Pricing. Slight tint + tree
   bullet to distinguish from top-level services. */
.pricing-repair-row {
  background: #fafbfd;
}
.pricing-repair-row td:first-child {
  padding-left: 2rem;
}
.pricing-repair-bullet {
  display: inline-block;
  color: var(--adm-muted);
  margin-right: .5rem;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 14px;
}
.pricing-repair-row td { font-size: 14px; }

/* Scrollable card body — used for the By-day table on the reports
   page where 200+ rows would otherwise sprawl the page. Pair with
   sticky thead so the column headers don't scroll out of view. */
.card-scroll {
  max-height: 480px;
  overflow-y: auto;
  margin: 0 -1.5rem;   /* edge-to-edge inside .card padding so the
                          scrollbar nestles against the card border */
}
.card-scroll table { margin: 0; }
.card-scroll thead th {
  position: sticky; top: 0;
  background: var(--adm-surface);
  box-shadow: inset 0 -1px 0 var(--adm-border);
  z-index: 1;
}
.stat {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 1rem 1.25rem;
}
.stat .label { color: var(--adm-muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 1.75rem; font-weight: 700; color: var(--adm-text); margin-top: .25rem; line-height: 1.2; }
.stat .delta { font-size: 12px; color: var(--adm-muted); margin-top: .25rem; }

/* ===== Tables ===== */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--adm-surface);
}
.adm-table th {
  text-align: left;
  font-weight: 600; font-size: 12px; text-transform: uppercase;
  color: var(--adm-muted); letter-spacing: .04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--adm-border);
  background: var(--adm-bg);
}
.adm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--adm-border);
  vertical-align: top;
}
.adm-table tr:hover td { background: #fbfbfd; }
.adm-table .actions { white-space: nowrap; text-align: right; }
.adm-table .muted { color: var(--adm-muted); font-size: 14px; }

/* ===== Forms (admin) — condensed for high-density data entry ===== */
.adm-form .row { margin-bottom: .65rem; }
.adm-form label {
  display: block; font-weight: 500; font-size: 12px;
  color: #4b5563; margin-bottom: 3px;
  letter-spacing: .01em;
}
.adm-form input:not([type]), .adm-form input[type=text], .adm-form input[type=email],
.adm-form input[type=password], .adm-form input[type=number], .adm-form input[type=tel],
.adm-form input[type=date], .adm-form input[type=time], .adm-form select, .adm-form textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  font-size: 14px; line-height: 1.4;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.adm-form input:focus, .adm-form select:focus, .adm-form textarea:focus {
  outline: 2px solid var(--adm-blue);
  outline-offset: -1px; border-color: var(--adm-blue);
}
.adm-form .grid { display: grid; gap: .65rem 1rem; grid-template-columns: 1fr 1fr; }
.adm-form .grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .adm-form .grid { grid-template-columns: 1fr; } }
.adm-form .help { color: var(--adm-muted); font-size: 12px; margin-top: 4px; }
.adm-form fieldset {
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: .85rem 1.1rem;     /* was 1rem 1.25rem */
  background: var(--adm-surface);
}
.adm-form fieldset legend {
  font-weight: 600; font-size: 11px;     /* was 13px */
  color: var(--adm-muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 0 .4rem;
}
.adm-check {
  display: flex; align-items: center; gap: .5rem;
  padding: 6px 10px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  background: #fff;
  cursor: pointer;
}
.adm-check:hover { border-color: var(--adm-blue); }
.adm-check input { width: auto !important; flex: 0 0 auto; }
.adm-check input:checked + span { font-weight: 600; }
.adm-check span:last-child { color: var(--adm-muted); font-size: 11px; margin-left: auto; }
.mot-soon { color: #0369a1 !important; font-weight: 600; }

/* Customers table: checkbox column + per-row action pills + bulk-action bar */
.customers-table .cb-col {
  width: 32px; text-align: center; padding-left: 12px; padding-right: 4px;
}
.customers-table .cb-col input { vertical-align: middle; cursor: pointer; }
.customers-table .row-actions {
  white-space: nowrap;
  display: flex; gap: 4px; justify-content: flex-end;
  padding-right: 12px;
}
.customers-table tr.is-archived td {
  color: var(--adm-muted);
  background: #fafafa;
}
.customers-table tr.is-archived td strong { color: var(--adm-muted); }

.bulk-bar {
  position: sticky; bottom: 12px;
  margin-top: 1rem;
  background: var(--adm-blue-dark);
  color: #fff;
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-2);
  padding: 8px 16px;
  display: flex; align-items: center; gap: .5rem;
  z-index: 50;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count {
  font-weight: 600;
  margin-right: .5rem;
}
.bulk-bar .btn {
  background: #fff;
  border-color: #fff;
  color: var(--adm-blue-dark);
}
.bulk-bar .btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.bulk-bar .btn.danger {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
.bulk-bar a.btn { text-decoration: none; }

/* Customer history page: each vehicle is a card containing a bookings table */
.history-vehicle { padding: 1.25rem 1.5rem; }
.history-vehicle-head { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--adm-border); }
.history-vehicle-head h2 { margin: 0 0 .25rem; font-size: 18px; }
.history-bookings { width: 100%; }
.history-bookings td, .history-bookings th { padding: 8px 12px; }
.history-bookings .actions { text-align: right; }

.pricing-grid {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.pricing-grid th, .pricing-grid td {
  padding: 6px 8px;
  border: 1px solid var(--adm-border);
  text-align: center;
}
.pricing-grid thead th { background: var(--adm-bg); font-weight: 600; }
.pricing-grid tbody th { background: var(--adm-bg); text-align: left; font-weight: 600; }
.pricing-grid td input {
  width: 100%;
  text-align: right;
  padding: 6px 8px !important;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pricing-grid thead th, .pricing-grid tbody th { font-size: 12px; padding: 6px 8px; white-space: nowrap; }

/* Wide variant of the side panel — used by the pricing editor so the
   4x4 grid has room to breathe. */
.side-panel.wide { max-width: 640px; }
@media (max-width: 720px) { .side-panel.wide { max-width: 100%; } }

/* Service sheets */
.sheet-section legend { font-size: 14px; }
.sheet-row {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: .75rem;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--adm-border);
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-label { font-weight: 500; font-size: 14px; }
.sheet-note { font-size: 13px !important; }

/* Photo uploader per sheet item — fills the full row width via grid-column. */
.sheet-photos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.sheet-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.sheet-photo-tile {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--adm-border);
  background: #f3f4f6;
}
.sheet-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-photo-del {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px;
  border-radius: 50%; border: 0;
  background: rgba(15,23,42,.78); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.sheet-photo-del:hover { background: #b91c1c; }
.sheet-photo-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 80px; height: 80px; padding: 0 14px;
  border: 2px dashed var(--adm-border); border-radius: 6px;
  cursor: pointer; color: var(--adm-muted); font-size: 12px; font-weight: 500;
  background: #f9fafb;
  transition: border-color .12s ease, color .12s ease;
}
.sheet-photo-add:hover { border-color: var(--adm-blue); color: var(--adm-blue); }
.sheet-photo-add.is-uploading { border-style: solid; color: var(--adm-blue); }
@media (max-width: 740px) {
  .sheet-row { grid-template-columns: 1fr; gap: .5rem; }
  .sheet-label { font-size: 15px; font-weight: 600; }
}
.sheet-severity { display: flex; gap: .25rem; flex-wrap: wrap; }
.sev {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  font-size: 14px; font-weight: 500;
  background: #fff; cursor: pointer; user-select: none;
  min-width: 56px;
}
.sev input { display: none; }
.sev.sev-satisfactory.is-checked { background: var(--adm-green-tint); border-color: var(--adm-green); color: #064e3b; }
.sev.sev-monitoring.is-checked   { background: var(--adm-amber-tint); border-color: var(--adm-amber); color: #075985; }
.sev.sev-urgent.is-checked       { background: var(--adm-red-tint);   border-color: var(--adm-red);   color: #7f1d1d; }
.sev.sev-clear.is-checked        { background: var(--adm-bg); border-color: var(--adm-border-strong); }
.sheet-tread { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.sheet-tread label { display: flex; flex-direction: column; gap: 2px; }

/* ===== Status pills ===== */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--adm-bg);
  color: var(--adm-muted);
}
.pill.confirmed                { background: var(--adm-blue-tint);  color: var(--adm-blue); }
.pill.onsite                   { background: #ddd6fe;               color: #5b21b6; }
.pill.in_progress              { background: var(--adm-amber-tint); color: var(--adm-amber); }
.pill.completed                { background: #ccfbf1;               color: #0f766e; }
.pill.customer_called_to_collect { background: #fce7f3;             color: #be185d; }
.pill.collected                { background: var(--adm-green-tint); color: var(--adm-green); }
.pill.cancelled                { background: var(--adm-red-tint);   color: var(--adm-red); }
.pill.no_show                  { background: #991b1b; color: #fff; font-weight: 700; }
.pill.mot                      { background: #e0e7ff;               color: #3730a3; }
.pill.service                  { background: var(--adm-green-tint); color: var(--adm-green); }
.pill.forecourt                { background: var(--adm-amber-tint); color: var(--adm-amber); }

/* ===== Login page ===== */
.adm-login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f6f9 0%, #e8eaf3 100%);
}
.adm-login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--adm-border);
  padding: 2.5rem 2.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.12);
  text-align: center;
}
.adm-login-card .logo { display: block; margin: 0 auto 1rem; height: 56px; width: auto; }
.adm-login-card h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; }
.adm-login-card .sub { color: var(--adm-muted); margin: 0 0 1.5rem; font-size: 14px; }
.adm-login-card .adm-form .row { text-align: left; }
.adm-login-card .btn { width: 100%; padding: 12px; font-size: 14px; }
.adm-login-card .qr { display: block; margin: 1rem auto; max-width: 220px; width: 100%; }
.adm-login-card .secret-text {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', monospace;
  padding: .5rem .75rem;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  word-break: break-all;
  letter-spacing: 1px;
  font-size: 14px;
}
.adm-login-card .totp-input {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 1.6rem; letter-spacing: 8px;
  text-align: center;
}
.adm-login-card .backup-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 14px;
  text-align: center; margin: 1rem 0;
}
.adm-login-card .backup-codes code {
  display: block; padding: .5rem; background: var(--adm-bg);
  border: 1px solid var(--adm-border); border-radius: var(--adm-radius-sm);
}

/* ===== Alerts ===== */
.alert {
  padding: 10px 14px;
  border-radius: var(--adm-radius-sm);
  margin-bottom: 1rem;
  font-size: 14px;
  border-left: 3px solid;
}
.alert.error { background: var(--adm-red-tint);   border-color: var(--adm-red);   color: #7f1d1d; }
.alert.ok    { background: var(--adm-green-tint); border-color: var(--adm-green); color: #064e3b; }
.alert.warn  { background: var(--adm-amber-tint); border-color: var(--adm-amber); color: #075985; }
.alert.info  { background: var(--adm-blue-tint);  border-color: var(--adm-blue);  color: var(--adm-blue-dark); }

/* ===== Diary ===== */
.diary-toolbar {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.diary-toolbar .nav-arrow {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  background: #fff; border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  font-size: 16px; color: var(--adm-text);
}
.diary-toolbar .date-picker {
  font-weight: 600; font-size: 1rem;
  padding: 6px 12px;
  border: 1px solid var(--adm-border); border-radius: var(--adm-radius-sm);
  background: #fff;
}
.diary-grid {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 0;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
}
.diary-grid .col-head {
  padding: 10px;
  background: var(--adm-bg);
  border-bottom: 1px solid var(--adm-border);
  font-weight: 600; font-size: 14px;
  text-align: center;
}
/* Day-note row — operator scratchpad sat above the 9:00 row. */
.diary-grid .diary-daynote {
  border-bottom: 1px solid var(--adm-border);
  padding: 6px;
  position: relative;
  background: #fffdf5;
}
.diary-grid .diary-daynote.diary-daynote-label {
  background: var(--adm-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--adm-muted);
  display: flex; align-items: center; justify-content: center;
}
.diary-grid .diary-daynote textarea {
  width: 100%; min-height: 44px; max-height: 120px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit; font-size: 12px; line-height: 1.35;
  padding: 4px 6px; resize: vertical;
  border-radius: 4px;
}
.diary-grid .diary-daynote textarea:hover { border-color: var(--adm-border); background: #fff; }
.diary-grid .diary-daynote textarea:focus { outline: 0; border-color: var(--adm-blue); background: #fff; }
.diary-grid .diary-daynote-status {
  position: absolute; right: 8px; bottom: 4px;
  font-size: 10px; color: var(--adm-muted);
  opacity: 0; transition: opacity .2s ease;
}
.diary-grid .diary-daynote-status.is-saving { opacity: 1; }
.diary-grid .diary-daynote-status.is-saved  { opacity: 1; color: #15803d; }

.diary-grid .time-col { border-right: 1px solid var(--adm-border); }
.diary-grid .time-cell {
  height: 40px;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--adm-muted);
  border-bottom: 1px dashed #eef0f4;
  text-align: right;
  font-family: ui-monospace, monospace;
}
.diary-grid .ramp-col {
  position: relative;
  border-right: 1px solid var(--adm-border);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 39px,
      #eef0f4 39px,
      #eef0f4 40px);
}
/* Specificity note: body.admin a:hover at the top of this file forces
   text-decoration:underline on every <a> in the admin. The diary-booking
   rules need to be at least equal-or-higher specificity to win, so we
   qualify with `body.admin` here. Without that the booking cards keep
   their underline on hover and look broken. */
body.admin a.diary-booking {
  position: absolute;
  left: 4px; right: 4px;
  background: var(--adm-blue-tint);
  border-left: 3px solid var(--adm-blue);
  border-radius: var(--adm-radius-sm);
  padding: 5px 9px;
  font-size: 14px;        /* was 12px — slightly easier to scan */
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;  /* it's an <a>; no underline on hover or default */
  color: var(--adm-ink);
  box-shadow: var(--adm-shadow-1);
  transition: box-shadow .15s ease, transform .1s ease;
}
body.admin a.diary-booking:hover { box-shadow: var(--adm-shadow-2); transform: translateY(-1px); text-decoration: none; }
body.admin a.diary-booking { cursor: grab; }
body.admin a.diary-booking.is-moving {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(18, 34, 157, .25);
  opacity: .85;
  z-index: 9;
  pointer-events: none;     /* so mousemove targets the column, not the card */
}
body.is-dragging-booking { user-select: none; cursor: grabbing; }
body.admin a.diary-booking strong { display: block; color: var(--adm-blue-dark); font-weight: 700; font-size: 13.5px; }
body.admin a.diary-booking .muted { color: var(--adm-muted); font-size: 12px; }   /* was 11px */
/* Job type (services) — bold + a notch bigger so it reads at a glance.
   Previously this was muted/12px; Annie wanted it to stand out. */
body.admin a.diary-booking .diary-booking-services {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--adm-text);
}
/* Extras line — shown inline below services (was hidden in a count pill). */
body.admin a.diary-booking .diary-booking-extras {
  margin-top: 2px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--adm-muted);
  line-height: 1.2;
}
/* In a 30-min (≈37px tall) card there's only room for the strong line +
   pills. Tighten everything when the card is short to keep the layout
   from breaking. Uses the data-duration attribute set on render. */
body.admin a.diary-booking[data-duration="30"] {
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.15;
}
body.admin a.diary-booking[data-duration="30"] strong { font-size: 12.5px; }
body.admin a.diary-booking[data-duration="30"] .muted { font-size: 11px; }
body.admin a.diary-booking[data-duration="30"] .diary-booking-services { font-size: 12px; }
body.admin a.diary-booking[data-duration="30"] .diary-booking-extras { font-size: 10.5px; }
body.admin a.diary-booking.status-onsite     { background: #ddd6fe; border-left-color: #6d28d9; }
body.admin a.diary-booking.status-in_progress { background: var(--adm-amber-tint); border-left-color: var(--adm-amber); }
body.admin a.diary-booking.status-completed   { background: #ccfbf1; border-left-color: #0f766e; }
body.admin a.diary-booking.status-customer_called_to_collect { background: #fce7f3; border-left-color: #be185d; }
body.admin a.diary-booking.status-collected   { background: var(--adm-green-tint); border-left-color: var(--adm-green); }
/* Cancelled bookings don't render on the diary any more — slot is freed
   and they live only in the customer history. The rule stays in case a
   stale page renders one. */
body.admin a.diary-booking.status-cancelled {
  background: var(--adm-red-tint); border-left-color: var(--adm-red);
  text-decoration: line-through; opacity: .7;
}
/* No-show: customer didn't turn up but the slot is gone (tech's time
   already paid for). Distinct from cancelled — strong red, diagonal
   stripes, prominent NO-SHOW banner so it's obvious at a glance and
   doesn't get mistaken for an active booking. */
body.admin a.diary-booking.status-no_show {
  background:
    repeating-linear-gradient(135deg,
      #fecaca 0, #fecaca 8px,
      #fee2e2 8px, #fee2e2 16px);
  border-left-color: #991b1b;
  color: #7f1d1d;
  text-decoration: line-through;
}
.diary-booking.status-no_show::after {
  content: "NO-SHOW";
  position: absolute; top: 4px; right: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  background: #991b1b; color: #fff;
  padding: 1px 6px; border-radius: 999px;
  text-decoration: none;
}
/* Forecourt column inside the diary grid */
.forecourt-col {
  position: relative;       /* contains .ramp-closed-note's inset:0 — without
                               this it escapes to <html> and the diagonal mesh
                               covers the entire page on closed days. */
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: .5rem;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 39px,
      #eef0f4 39px,
      #eef0f4 40px);
}
/* Same specificity story as .diary-booking — qualify with body.admin a so
   body.admin a:hover (with underline) doesn't beat us on the cascade. */
body.admin a.forecourt-card {
  display: block;
  position: relative;          /* anchor for absolute .booking-pills */
  background: var(--adm-blue-tint);
  border-left: 3px solid var(--adm-blue);
  border-radius: var(--adm-radius-sm);
  padding: 8px 10px;
  font-size: 14px;
  text-decoration: none;
  color: var(--adm-ink);
  cursor: pointer;
  box-shadow: var(--adm-shadow-1);
  transition: box-shadow .15s ease, transform .1s ease;
}
body.admin a.forecourt-card:hover { box-shadow: var(--adm-shadow-2); transform: translateY(-1px); text-decoration: none; }
body.admin a.forecourt-card strong { color: var(--adm-blue-dark); font-weight: 700; font-size: 13.5px; }
body.admin a.forecourt-card .muted { color: var(--adm-muted); font-size: 12px; }
body.admin a.forecourt-card .forecourt-card-services {
  font-size: 14px; font-weight: 600; line-height: 1.25;
  margin-top: 2px; color: var(--adm-text);
}
body.admin a.forecourt-card .forecourt-card-extras {
  font-size: 11.5px; font-style: italic; color: var(--adm-muted);
  line-height: 1.2; margin-top: 2px;
}
body.admin a.forecourt-card.status-onsite                     { background: #ddd6fe; border-left-color: #6d28d9; }
body.admin a.forecourt-card.status-in_progress                { background: var(--adm-amber-tint); border-left-color: var(--adm-amber); }
body.admin a.forecourt-card.status-completed                  { background: #ccfbf1; border-left-color: #0f766e; }
body.admin a.forecourt-card.status-customer_called_to_collect { background: #fce7f3; border-left-color: #be185d; }
body.admin a.forecourt-card.status-collected                  { background: var(--adm-green-tint); border-left-color: var(--adm-green); }
body.admin a.forecourt-card.status-cancelled {
  background: var(--adm-red-tint); border-left-color: var(--adm-red);
  text-decoration: line-through; opacity: .7;
}
body.admin a.forecourt-card.status-no_show {
  background:
    repeating-linear-gradient(135deg,
      #fecaca 0, #fecaca 8px,
      #fee2e2 8px, #fee2e2 16px);
  border-left-color: #991b1b;
  color: #7f1d1d;
  text-decoration: line-through;
  position: relative;
}
.forecourt-card.status-no_show::after {
  content: "NO-SHOW";
  position: absolute; top: 6px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  background: #991b1b; color: #fff;
  padding: 1px 6px; border-radius: 999px;
  text-decoration: none;
}
.forecourt-empty {
  padding: 1rem;
  color: var(--adm-muted); font-style: italic; font-size: 14px;
  text-align: center;
}

/* Pills shown ON a booking card. Default flex-wrap layout for forecourt cards
 * (which have plenty of room). On ramp-column .diary-booking cards we override
 * to absolute-position along the right edge so they don't compete with the
 * title/services text for horizontal space — Annie said they didn't fit
 * underneath in tighter cards. */
.booking-pills {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: 2px;
}
.diary-booking .booking-pills {
  position: absolute;
  top: 4px; right: 4px;
  margin-top: 0;
  flex-direction: column; align-items: flex-end;
  z-index: 2;
  /* Leave room for the title text — won't overlap when card is wider than
   * the pills' max width. */
  max-width: 40%;
}
.bpill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
}
.bpill.bpill-clickable { cursor: pointer; }
.bpill.bpill-clickable:hover { filter: brightness(1.1); transform: translateY(-1px); }
.bpill-status { background: var(--adm-blue); }
.bpill-extras { background: #ea580c; }   /* orange */
.bpill-sheet  { background: #0f766e; }   /* teal — visual cue that a sheet exists */
.bpill-keybox { background: #6d28d9; }   /* purple — key in numbered box */
.bpill-notes  { background: #0891b2; }   /* cyan — customer has internal notes */

/* ===== Top-nav unread badges (live-polled) ============================== */
.adm-nav a { position: relative; }
.adm-nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 6px;
  height: 18px; line-height: 18px;
  font-size: 11px; font-weight: 700;
  background: #dc2626;     /* red — Annie wants this loud */
  color: #fff;
  border-radius: 999px;
  text-align: center;
  vertical-align: 1px;
  box-shadow: 0 0 0 2px #fff;
  animation: adm-badge-pop .25s ease;
}
@keyframes adm-badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ===== Floating iPhone-style new-message popup ========================== */
.adm-msg-popup[hidden] { display: none; }
.adm-msg-popup {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 200;
  width: min(340px, calc(100% - 2rem));
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-radius: 18px;
  border: 1px solid var(--adm-border);
  box-shadow: 0 16px 40px rgba(13, 24, 111, .22),
              0 32px 64px rgba(13, 24, 111, .14);
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.adm-msg-popup.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.adm-msg-popup-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: var(--adm-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.adm-msg-popup-dot {
  width: 8px; height: 8px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(52, 211, 153, .8);
  animation: adm-msg-pulse 1.4s ease-in-out infinite;
}
@keyframes adm-msg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.adm-msg-popup-title { flex: 1; }
.adm-msg-popup-close {
  background: transparent; border: 0;
  color: rgba(255,255,255,.85);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.adm-msg-popup-close:hover { color: #fff; }
.adm-msg-popup-body {
  display: block;
  padding: .75rem 1rem 1rem;
  color: var(--adm-text);
  text-decoration: none;
}
.adm-msg-popup-name { font-size: 15px; font-weight: 700; color: var(--adm-blue-dark); }
.adm-msg-popup-from { display: block; font-size: 11px; color: var(--adm-muted); margin: 2px 0 .5rem; font-variant-numeric: tabular-nums; }
.adm-msg-popup-text {
  background: var(--adm-blue-tint);
  border-radius: 14px 14px 14px 4px;
  padding: .55rem .8rem;
  margin: 0 0 .5rem;
  font-size: 14px;
  line-height: 1.4;
  /* Keep the bubble from overflowing for huge messages. */
  max-height: 7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.adm-msg-popup-cta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--adm-blue);
  text-align: right;
}

/* ===== VGM-style unified search panel (admin booking-new) =============== */
.vgm-search {
  background: var(--adm-surface-gradient);
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: var(--adm-shadow-1);
  margin: 0 0 1rem;
}
.vgm-search-row { display: flex; gap: .75rem; align-items: stretch; flex-wrap: wrap; }
.vgm-search .vgm-search-input { flex: 1; min-width: 220px; }
.vgm-search .vgm-search-input input[type="search"] { width: 100%; }

.vgm-search-input {
  display: flex; gap: .5rem; flex: 1; min-width: 220px;
}
.vgm-search-input input[type="search"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.vgm-search-input input[type="search"]:focus {
  outline: 2px solid var(--adm-blue);
  outline-offset: -1px;
  border-color: var(--adm-blue);
}

.vgm-search-results {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 380px; overflow-y: auto;
}
.vgm-search-hit-row {
  display: flex; flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  width: 100%;
  padding: .65rem .85rem;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: 8px;
}
.vgm-search-hit-row:hover { border-color: var(--adm-blue); background: var(--adm-blue-tint); }
.vgm-hit-info {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: .2rem 1rem;
  flex: 1; min-width: 240px;
}
.vgm-hit-veh, .vgm-hit-cust { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0; }
.vgm-hit-cust { font-size: 14px; }
.vgm-hit-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.vgm-hit-actions .btn { white-space: nowrap; }
.vgm-search-hit-row .reg-tag {
  display: inline-block;
  background: #fcb900; color: #000;
  font-family: 'Charles Wright', 'Arial Black', sans-serif;
  font-weight: 700; letter-spacing: 1.5px;
  padding: 1px 6px; border: 1.5px solid #000; border-radius: 3px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .vgm-search-row { flex-direction: column; }
  .vgm-hit-info { grid-template-columns: 1fr; }
}

/* Service-sheet extras section (top of sheet form) */
.sheet-extras { background: linear-gradient(180deg, #fff8e7 0%, #ffffff 100%); border-color: #fcb900; }
.sheet-extras legend { color: #6b4500; font-weight: 700; }
.sheet-extras-list { list-style: none; margin: 0; padding: 0; }
.sheet-extra-row { padding: .35rem 0; border-bottom: 1px dashed #e5e7eb; }
.sheet-extra-row:last-child { border-bottom: 0; }
.sheet-extra-row label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.sheet-extra-row.is-confirmed { background: #ecfdf5; border-radius: 4px; padding: .35rem .5rem; }
.sheet-extra-row.is-confirmed strong { text-decoration: line-through; color: #064e3b; }

/* Extras modal: same .adm-modal styling but force visible on load (PHP only
 * renders it if pending extras exist + sheet isn't complete). is-hidden
 * class lets the JS dismiss it after all are ticked. */
#extrasModal { display: flex; }
#extrasModal.is-hidden { display: none; }

/* ===== Generic admin modal (used by reserve-slot dialog) ===== */
.adm-modal[hidden] { display: none; }
.adm-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.adm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.adm-modal-panel {
  position: relative;
  background: var(--adm-surface);
  border-radius: var(--adm-radius);
  padding: 1.25rem 1.5rem 1.25rem;
  max-width: 460px;
  width: calc(100% - 2rem);
  box-shadow: var(--adm-shadow-2);
}
.adm-modal-panel .row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.adm-modal-panel label { font-weight: 500; font-size: 14px; color: var(--adm-text); }
.adm-modal-panel select,
.adm-modal-panel textarea,
.adm-modal-panel input {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 14px; line-height: 1.4;
}
.adm-modal-panel select:focus,
.adm-modal-panel textarea:focus,
.adm-modal-panel input:focus {
  outline: 2px solid var(--adm-blue);
  outline-offset: -1px; border-color: var(--adm-blue);
}

/* Right-click context menu */
.ctx-menu {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  box-shadow: var(--adm-shadow-2);
  padding: 4px 0;
  font-size: 14px;
}
.ctx-menu[hidden] { display: none !important; }
.ctx-item {
  display: block;
  padding: 7px 14px;
  color: var(--adm-text);
  cursor: pointer;
  user-select: none;
}
.ctx-item:hover { background: var(--adm-bg); color: var(--adm-blue-dark); text-decoration: none; }
.ctx-item.is-disabled {
  color: var(--adm-muted);
  pointer-events: none;
  opacity: .55;
}
.ctx-item.danger { color: #b91c1c; }
.ctx-item.danger:hover { background: var(--adm-red-tint); color: #7f1d1d; }
.ctx-item.is-current::before { content: '✓ '; color: var(--adm-green); font-weight: 700; margin-right: 2px; }
.ctx-divider { height: 1px; background: var(--adm-border); margin: 4px 0; }

/* Submenu: hover or click to open, opens to the right by default */
.ctx-has-submenu {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
}
.ctx-has-submenu > .ctx-arrow {
  margin-left: 1rem;
  color: var(--adm-muted);
}
.ctx-submenu {
  position: absolute;
  left: 100%; top: -5px;     /* aligns first item with the parent item */
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  box-shadow: var(--adm-shadow-2);
  padding: 4px 0;
  display: none;
}
.ctx-has-submenu:hover > .ctx-submenu,
.ctx-has-submenu.is-open > .ctx-submenu { display: block; }
.ctx-has-submenu:hover { background: var(--adm-bg); }

/* Flip submenu to the left if it would go off-screen — JS adds .flip when
   the natural-position submenu would extend past the right edge of the
   viewport. Default leans right. */
.ctx-has-submenu.flip > .ctx-submenu { left: auto; right: 100%; }
/* Flip submenu UPWARDS (anchor to parent's bottom) when its natural position
   would extend below the viewport. JS adds .flip-up. */
.ctx-has-submenu.flip-up > .ctx-submenu { top: auto; bottom: -5px; }

/* Resize handle on diary bookings */
body.admin a.diary-booking { padding-bottom: 4px; }   /* tight — keeps content visible in a 60min card */
.diary-booking .resize-handle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent 0, rgba(15,23,42,.18) 100%);
  border-bottom-left-radius: var(--adm-radius-sm);
  border-bottom-right-radius: var(--adm-radius-sm);
  opacity: 0;
  transition: opacity .12s ease;
}
.diary-booking:hover .resize-handle { opacity: 1; }
.diary-booking.is-resizing { box-shadow: var(--adm-shadow-2); z-index: 5; }
.diary-booking.is-resizing .resize-handle { opacity: 1; background: rgba(18,34,157,.35); }

/* ===== Side panel / modal ===== */
.side-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.4);
  z-index: 100;
  display: none;
}
.side-panel-backdrop.open { display: block; }
.side-panel {
  position: fixed;
  top: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  width: calc(100% - 2.5rem); max-width: 480px;
  background: var(--adm-surface-gradient);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: var(--adm-shadow-3);
  z-index: 101;
  transform: translateX(calc(100% + 1.5rem));
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* body handles its own scroll */
}
@media (max-width: 720px) {
  .side-panel {
    top: 0; right: 0; bottom: 0;
    width: 100%; border-radius: 0; border: 0;
    transform: translateX(100%);
  }
}
/* Always-visible thin scrollbar so it's obvious the panel scrolls (macOS
   hides them by default and the cue gets lost on long content). */
.side-panel-body { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent; }
.side-panel-body::-webkit-scrollbar { width: 8px; }
.side-panel-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25); border-radius: 4px;
}
.side-panel-body::-webkit-scrollbar-track { background: transparent; }
.side-panel.open { transform: translateX(0); }
.side-panel-head {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--adm-border);
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
  flex: 0 0 auto;       /* fixed-height inside flex column */
}
.side-panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.side-panel-head .close { background: none; border: 0; cursor: pointer; font-size: 24px; color: var(--adm-muted); padding: 0; line-height: 1; }
.side-panel-body {
  padding: 1.25rem 1.5rem;
  flex: 1 1 auto;       /* grows + shrinks; scrolls when content overflows */
  overflow-y: auto;
  overflow-x: hidden;
}
/* Tighten the spacing between cards inside the side panel so more fits at once. */
.side-panel-body .card { padding: .75rem 1rem; }
.side-panel-body .card.mb-2 { margin-bottom: .75rem; }
.side-panel-body .card-title { margin-bottom: .4rem; }

/* Tabs */
.adm-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--adm-border);
  margin-bottom: 1rem;
}
.adm-tabs a {
  padding: 10px 16px;
  color: var(--adm-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.adm-tabs a:hover { color: var(--adm-text); text-decoration: none; }
.adm-tabs a.is-current { color: var(--adm-blue); border-bottom-color: var(--adm-blue); font-weight: 600; }

/* Utility */
.flex { display: flex; align-items: center; gap: .75rem; }
.flex.between { justify-content: space-between; }
.flex.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--adm-muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.nowrap { white-space: nowrap; }
.adm-empty {
  text-align: center; padding: 3rem 1rem; color: var(--adm-muted);
  font-size: 14px; font-style: italic;
}
.flex.end { justify-content: flex-end; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.kv { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 14px; }
.kv > div { display: flex; gap: .5rem; }
.kv .muted { min-width: 60px; }
.card-title {
  font-size: 12px; font-weight: 600; color: var(--adm-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 .5rem;
}
.adm-clean-list { list-style: none; padding: 0; margin: 0; }
.adm-clean-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 4px 0; border-bottom: 1px dashed var(--adm-border);
}
.adm-clean-list li:last-child { border-bottom: 0; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
@media (max-width: 540px) { .grid-2col { grid-template-columns: 1fr; } }

/* Diary extras */
.ramp-closed-note {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--adm-muted); font-style: italic; font-size: 14px;
  background: repeating-linear-gradient(135deg,
    transparent 0, transparent 8px,
    rgba(15,23,42,.04) 8px, rgba(15,23,42,.04) 16px);
}
/* Stacking inside a ramp column (smallest → topmost):
     .ramp-slot-cell (z:1)  — empty-slot hover/right-click target
     .diary-booking  (z:2)  — booking cards
     .diary-block    (z:3)  — reservation blocks
     .is-resizing    (z:5)  — whichever's being dragged */
.diary-block {
  position: absolute;
  left: 4px; right: 4px;
  background: repeating-linear-gradient(135deg,
    #f1f5f9 0, #f1f5f9 6px, #e2e8f0 6px, #e2e8f0 12px);
  border: 1px dashed var(--adm-border);
  border-radius: var(--adm-radius-sm);
  padding: 6px 8px;
  font-size: 11px; color: var(--adm-muted);
  overflow: hidden;
  z-index: 3;
  cursor: default;
}
.diary-block:hover { border-style: solid; }
.diary-block .resize-handle {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px; cursor: ns-resize;
  background: rgba(15,23,42,.08);
  opacity: 0; transition: opacity .12s ease;
  border-radius: 0 0 var(--adm-radius-sm) var(--adm-radius-sm);
}
.diary-block:hover .resize-handle { opacity: 1; }
.diary-block.is-resizing { box-shadow: var(--adm-shadow-2); z-index: 5; border-style: solid; }

/* Bookings sit ABOVE slot cells so hover/right-click/mouseenter
   target the booking, not the slot underneath. */
.diary-booking { z-index: 2; }
.diary-booking.is-resizing { z-index: 5; }

/* ===== Empty ramp slot cells — subtle hover + right-click target ===== */
.ramp-slot-cell {
  position: absolute;
  left: 4px; right: 4px;
  border-top: 1px dashed transparent;
  background: transparent;
  cursor: context-menu;
  z-index: 1;          /* below bookings (z:2) + blocks (z:3) */
  transition: background .12s ease, border-color .12s ease;
}
.ramp-slot-cell:hover {
  background: rgba(18, 34, 157, 0.06);
  border-top: 1px dashed rgba(18, 34, 157, 0.25);
}
/* Past dates: ramp-col gets .is-past, slot cells become inert + invisible. */
.ramp-col.is-past .ramp-slot-cell { display: none; }

/* ===== Booking hover tooltip ===== */
.booking-tooltip {
  position: fixed;
  z-index: 200;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 10px;
  padding: 14px 16px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), 0 18px 40px rgba(0,0,0,.22);
  pointer-events: none;
}
.booking-tooltip .tt-name    { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.booking-tooltip .tt-contact { color: #cbd5e1; font-size: 12px; margin-bottom: 8px; }
.booking-tooltip .tt-row     { margin-top: 6px; }
.booking-tooltip .tt-row strong { color: #cbd5e1; font-weight: 500; }
.booking-tooltip .tt-notes   { padding: 8px 10px; margin-top: 10px;
                               background: rgba(255,255,255,.06); border-radius: 6px;
                               white-space: pre-wrap; }

/* ===== Inline customer-edit toggle on booking side panel ===== */
.customer-card .cust-edit { display: none; }
.customer-card.is-editing .cust-view { display: none; }
.customer-card.is-editing .cust-edit { display: block; }
.diary-forecourt-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .75rem; align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  transition: box-shadow .15s ease, transform .1s ease;
}
.diary-forecourt-row:hover { box-shadow: var(--adm-shadow-1); transform: translateY(-1px); text-decoration: none; }
.diary-forecourt-row.status-cancelled,
.diary-forecourt-row.status-no_show { text-decoration: line-through; opacity: .65; }
@media (max-width: 600px) {
  .diary-forecourt-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Side panel: support .is-open in addition to .open */
.side-panel-backdrop.is-open { display: block; }
.side-panel.is-open { transform: translateX(0); }
.side-panel-close {
  background: none; border: 0; cursor: pointer;
  font-size: 24px; color: var(--adm-muted);
  text-decoration: none; padding: 0 .25rem; line-height: 1;
}
.side-panel-close:hover { color: var(--adm-text); }

/* Pill colours that mirror booking statuses */
.pill.confirmed                  { background: var(--adm-blue-tint);  color: var(--adm-blue-dark); }
.pill.onsite                     { background: #ddd6fe; color: #5b21b6; }
.pill.in_progress                { background: var(--adm-amber-tint); color: #075985; }
.pill.completed                  { background: #ccfbf1; color: #0f5045; }
.pill.customer_called_to_collect { background: #fce7f3; color: #9d174d; }
.pill.collected                  { background: var(--adm-green-tint); color: #064e3b; }
.pill.cancelled                  { background: var(--adm-red-tint);   color: #7f1d1d; }
.pill.no_show                    { background: #f1f5f9; color: #475569; }
.pill.mot                        { background: var(--adm-blue-tint);  color: var(--adm-blue-dark); }
.pill.service                    { background: var(--adm-amber-tint); color: #075985; }
.pill.forecourt                  { background: #e0e7ff; color: #3730a3; }
.pill.new                        { background: var(--adm-amber-tint); color: #075985; font-weight: 700; }
.pill.contacted                  { background: var(--adm-blue-tint);  color: var(--adm-blue-dark); }
.pill.booked                     { background: #ccfbf1; color: #0f5045; }
.pill.closed                     { background: #f1f5f9; color: #475569; }


/* ===== Invoice-creation line cards =================================
   /admin/invoices/new/ — one card per invoice line. Replaces the
   old narrow table layout so descriptions can be edited freely
   (especially important for General Repairs where the operator
   needs to write what was actually done).
   ================================================================= */
.invoice-line {
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: .85rem 1rem .75rem;
  margin-bottom: .85rem;
  background: var(--adm-surface);
  position: relative;
}
.invoice-line-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem;
}
.invoice-line-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 4px;
}
.invoice-line-tag.tag-service { background: var(--adm-blue-tint);  color: var(--adm-blue-dark); }
.invoice-line-tag.tag-extra   { background: var(--adm-amber-tint); color: #075985; }
.invoice-line-tag.tag-adhoc   { background: var(--adm-bg);         color: var(--adm-muted); }
.invoice-line-remove {
  border: 1px solid var(--adm-border);
  background: #fff;
  color: var(--adm-red);
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.invoice-line-remove:hover {
  background: var(--adm-red-tint);
  border-color: var(--adm-red);
}
.invoice-line-grid {
  display: grid;
  gap: .55rem .9rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.invoice-line-grid > .row { margin-bottom: 0; }
.invoice-line-grid > .row.full { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .invoice-line-grid { grid-template-columns: 1fr 1fr; }
  .invoice-line-grid > .row { grid-column: span 2; }
}
.invoice-line-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1rem;
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--adm-border);
  font-size: 14px;
}
.invoice-line-foot .adm-check { font-weight: 400; color: var(--adm-muted); }
.invoice-line-foot .adm-check input:checked + span ~ * { color: var(--adm-ink); }


/* =====================================================================
   Welcome modal — fires once per 24h per admin via
   lib/admin_welcome.php. Same pulsing conic-gradient border trick we
   use on the booking-flow .when-card so the look is consistent.
   ===================================================================== */
.welcome-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 1.5rem;
  animation: welcome-fade-in .25s ease;
}
.welcome-backdrop.is-closing { animation: welcome-fade-out .2s ease forwards; }
@keyframes welcome-fade-in {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes welcome-fade-out {
  to { opacity: 0; transform: scale(.98); }
}

.welcome-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  padding: 5.25rem 2rem 2rem;   /* top-padding leaves room for the
                                    overlapping photo */
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,0.4),
    0 8px 16px -6px rgba(0,0,0,0.25);
  isolation: isolate;
}
/* Pulsing conic-gradient border. ::before is the rotating colour ring;
   ::after is the inner white fill that hides everything except the
   exposed gradient edge — same technique as .when-card. */
.welcome-card::before {
  content: "";
  position: absolute; inset: -3px; z-index: -2;
  background: conic-gradient(
    from 0deg,
    rgba(14, 30, 160, 0.0)   0%,
    rgba(14, 30, 160, 0.85) 25%,
    rgba(255, 212, 0,  0.85) 50%,
    rgba(14, 30, 160, 0.85) 75%,
    rgba(14, 30, 160, 0.0) 100%
  );
  border-radius: 26px;
  animation: welcome-spin 6s linear infinite;
}
.welcome-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: #fff;
  border-radius: 22px;
}
@keyframes welcome-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-card::before { animation: none; opacity: .8; }
}

/* Photo overlapping the top-left corner. circle crop + dark border so
   it pops off the white card. drop-shadow underneath for depth. */
.welcome-photo {
  position: absolute;
  top: -42px; left: -42px;
  width: 130px; height: 130px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  border: 4px solid #fff;
  box-shadow:
    0 8px 18px -4px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.2);
  z-index: 1;
}

/* Toy-style red close button — chunky circle, white X, soft shadow. */
.welcome-close {
  position: absolute;
  top: -16px; right: -16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #e11d48;
  color: #fff;
  font-size: 28px; line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    0 6px 14px -2px rgba(225, 29, 72, .55),
    0 2px 4px rgba(0,0,0,.18),
    inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
  z-index: 2;
  padding-bottom: 4px;
}
.welcome-close:hover {
  transform: rotate(90deg) scale(1.05);
  background: #be123c;
}
.welcome-close:active { transform: rotate(90deg) scale(.96); }

.welcome-inner { text-align: center; }
.welcome-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--adm-blue-dark);
  margin: 0 0 1rem;
  letter-spacing: -.01em;
}
.welcome-quote {
  font-family: 'Courier New', 'Courier', ui-monospace, monospace;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #111;
  line-height: 1.55;
  margin: 0 auto 1.25rem;
  max-width: 44ch;
  text-wrap: pretty;
}
.welcome-footer {
  margin: 0;
  color: var(--adm-muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 540px) {
  .welcome-card { padding: 4rem 1.25rem 1.5rem; }
  .welcome-photo {
    top: -30px; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 90px;
  }
  .welcome-close { width: 36px; height: 36px; font-size: 22px; top: -12px; right: -12px; }
}

/* =========================================================================
 * Lower-resolution / tablet responsive pass (Annie's W4: "Entire theme needs
 * to be made more responsive and condensed on lower resolution devices").
 * Two tiers: <1100px tightens the admin chrome; <720px takes it down further
 * to phone width.
 * ========================================================================= */
@media (max-width: 1100px) {
  body.admin { font-size: 14px; }
  .adm-main { padding: 1.25rem 1rem; }
  .adm-topbar { padding: 0 1rem; gap: 1rem; }
  .adm-topbar .adm-brand span { display: none; }   /* logo only — saves room */
  .adm-nav a { padding: 5px 11px; font-size: 12.5px; }
  .adm-page-head h1 { font-size: 1.3rem; }
  .card { padding: 1rem 1.1rem; border-radius: 10px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
  /* Tables get an internal scroll container so they don't push the layout. */
  .card .adm-table { display: block; overflow-x: auto; }
  /* 3-column compose grid (admin/diary/new) → 2 columns */
  .ffg-panel-cols { grid-template-columns: 1fr 1fr; gap: 1rem; }
  /* Floating message popup gets a bit smaller. */
  .adm-msg-popup { right: .75rem; bottom: .75rem; width: min(300px, calc(100% - 1.5rem)); }
}

@media (max-width: 720px) {
  body.admin { font-size: 13.5px; line-height: 1.5; }
  .adm-main { padding: 1rem .75rem; }
  .adm-topbar { height: 50px; padding: 0 .75rem; gap: .5rem; }
  .adm-nav { gap: 3px; flex-wrap: wrap; }
  .adm-nav a { padding: 4px 9px; font-size: 11.5px; }
  .adm-page-head { gap: .5rem; margin-bottom: 1rem; }
  .adm-page-head h1 { font-size: 1.15rem; }
  .card { padding: .85rem .9rem; }
  .ffg-panel-cols { grid-template-columns: 1fr; gap: .75rem; }
  /* Top-nav unread badges shrink a touch to keep the nav row tidy. */
  .adm-nav-badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
  /* Buttons tighten on phone. */
  body.admin .btn { padding: 6px 12px; font-size: 13px; }
  body.admin .btn.sm { padding: 4px 9px; font-size: 12px; }
  /* Diary grid is intentionally wide — leave it scrollable rather than
   * cramming columns into a phone screen. */
  .diary-grid { overflow-x: auto; }
}

/* =========================================================================
 * Modern input pills + soft shadows (Annie: "rectangular boxes with harsh
 * black borders need to look like modern pill boxes with drop shadows").
 * Scope: every input/select/textarea on an admin page, not just inside
 * .adm-form. Heavier specificity (body.admin …) so it overrides earlier
 * narrower rules in this file. Excludes checkboxes / radios / search
 * (the search box has its own treatment).
 * ========================================================================= */
body.admin input[type="text"],
body.admin input[type="email"],
body.admin input[type="password"],
body.admin input[type="number"],
body.admin input[type="tel"],
body.admin input[type="url"],
body.admin input[type="search"],
body.admin input[type="date"],
body.admin input[type="time"],
body.admin input[type="datetime-local"],
body.admin input:not([type]),
body.admin select,
body.admin textarea {
  padding: 9px 14px;
  border: 1px solid #dfe3ec;
  border-radius: 999px;                          /* full pill */
  background: #fff;
  color: var(--adm-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05),
              0 2px 6px rgba(15, 23, 42, .04),
              inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.admin textarea {
  border-radius: 14px;                           /* multi-line → softer rect */
  padding: 10px 14px;
}
body.admin select {
  padding-right: 32px;                           /* room for native arrow */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230e1ea0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1 L6 7 L11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
body.admin input:focus,
body.admin select:focus,
body.admin textarea:focus {
  outline: none;
  border-color: var(--adm-blue);
  box-shadow: 0 0 0 3px rgba(14, 30, 160, .15),
              0 1px 2px rgba(15, 23, 42, .06);
}
body.admin input[type="checkbox"],
body.admin input[type="radio"] {
  /* Don't pill-ify checkboxes/radios — they're auto-styled below. */
  padding: 0; border-radius: initial; box-shadow: none;
}
/* Tiny date/time inputs in tight table cells (trading-hours grid etc.)
 * shouldn't blow out vertically — trim padding slightly when narrow. */
body.admin .adm-table input[type="date"],
body.admin .adm-table input[type="time"] {
  padding: 7px 12px;
}

/* Time pills need enough width that the value + spinner controls don't
 * collide and squish "09:30" into something half-rendered. The native
 * spinner controls take ~20px on Chrome, so we give the field 90px min. */
body.admin input[type="time"]    { min-width: 96px; }
body.admin input[type="date"]    { min-width: 130px; }
body.admin input[type="datetime-local"] { min-width: 200px; }

/* Trading-hours override list: limit to ~8 visible rows + scroll. The
 * surrounding card wraps a <table>; we constrain its parent .card-grid
 * styling via a dedicated class so other tables aren't affected. */
.adm-scroll-table-8 {
  max-height: calc(8 * 48px + 56px);   /* rough row height × 8 + thead */
  overflow-y: auto;
  border-radius: var(--adm-radius);
  border: 1px solid var(--adm-border);
  background: var(--adm-surface);
}
.adm-scroll-table-8 table.adm-table { margin: 0; }
.adm-scroll-table-8 thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--adm-bg);
}

/* The page-level search boxes on /admin/customers/ and /admin/vehicles/
 * (and anywhere else we add it) want to be roomy and obviously a search
 * field — wide pill, magnifying-glass icon, slightly bigger text. */
body.admin .adm-search-input {
  flex: 1;
  width: 100%;
  max-width: 720px;
  min-width: 280px;
  padding: 11px 18px 11px 42px;
  font-size: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e1ea0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 16px 16px;
}
body.admin .adm-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* =========================================================================
 * Top nav buttons — pill-shaped with soft shadow, current page = filled
 * brand-blue (matches the "Add override" CTA look Annie called out).
 * Slimmed down from the v1 sizes — the previous 8/16 + 600 weight was too
 * chunky and the 1px border showed a faint rectangular halo behind the
 * pill in Annie's screenshot. Shadow-only now, no border.
 * ========================================================================= */
.adm-nav a {
  padding: 5px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--adm-blue);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  border: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06),
              0 2px 4px rgba(15, 23, 42, .04);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.adm-nav a:hover {
  background: var(--adm-blue-tint);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15, 23, 42, .08),
              0 5px 10px rgba(14, 30, 160, .12);
}
.adm-nav a.is-current {
  background: linear-gradient(180deg, #152dc7 0%, var(--adm-blue) 60%, var(--adm-blue-dark) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08),
              0 3px 8px rgba(14, 30, 160, .22),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.adm-nav a.is-current:hover { transform: none; }

/* =========================================================================
 * Postcode lookup dropdown (Ideal Postcodes) — mirror of the customer-side
 * styles in ffg.css, with admin tokens. Inserted by postcode-lookup.js
 * after the postcode input's flex wrapper.
 * ========================================================================= */
.postcode-lookup-dropdown {
  position: relative;
  margin-top: .35rem;
  border: 1px solid var(--adm-edge, #d8dde3);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
}
.postcode-lookup-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--adm-edge, #eef0f3);
  background: transparent;
  font: inherit;
  color: var(--adm-body, #1f2632);
  cursor: pointer;
}
.postcode-lookup-item:last-child { border-bottom: 0; }
.postcode-lookup-item:hover,
.postcode-lookup-item:focus {
  background: #f5f7fa;
  color: var(--adm-blue, #0e1ea0);
  outline: 0;
}
.postcode-lookup-empty,
.postcode-lookup-error {
  padding: .5rem .7rem;
  color: var(--adm-muted, #6b7280);
  font-size: 13px;
}
.postcode-lookup-error { color: #b00020; }
.postcode-lookup-btn.is-error { border-color: #b00020 !important; color: #b00020 !important; }