/* RoamRock admin kit: the look of a site's admin page (KP vehicles admin first).
   Builds on the site's own site.css tokens (--brand, --line, --tint, --muted,
   --radius...), so each site's admin wears that site's colors. Components:

   .adm-top        header bar: site name, who's signed in, sign in/out
   .adm-tabs       segmented tabs (scrolls sideways on phones)
   .adm-toolbar    a row above a panel: actions left, filters/legend right
   .adm-panel      white card; .adm-panel-head = title + actions on one line
   .adm-h2 / .adm-label   panel title / small uppercase section label
   .adm-sec        a section inside a form, with an .adm-label heading
   .adm-fold       a folding section whose heading also shows a summary
   .adm-inline     a compact row of small labeled fields (.adm-mini) + button
   .adm-table      list table; rows .clickable; inside .adm-table-wrap to scroll
   .adm-detail     the row that expands under a clicked row (accordion)
   .pill (.ok .warn .off .info)   status chips
   .adm-chip       a checkbox shown as a toggle chip
   .adm-status-line (.is-ok .is-error)   a result next to the button that made it
   .adm-checklist  ✓ / ○ list (go-live checklists)
   .adm-legend     colored keys (calendar)
   .adm-actions    the closing button row of a form; .adm-danger sits apart
   .adm-btn (-primary -danger -sm -xs)   the buttons (2026-11-11)
   .adm-form / .adm-field / .adm-hint    two-column forms (.adm-g3, .adm-g4, .adm-g-save)
   .adm-table.adm-fixed   a list whose rows open in place, fitted to phones
   .adm-drop / .adm-progress / .adm-photos / .adm-photo   photo upload + cards

   Form controls inside .adm-app share one size and border, whatever builds them.
   admin-kit.js holds the matching behaviour (rows, forms, drop zone, photo resize). */

/* Surfaces and status colors. The defaults are the light admin; a dark site
   (e.g. roamrock.com) sets these on :root or body to match. */
:root {
  --adm-surface: #fff; --adm-field: #fff;
  --adm-ok: #1e5b33; --adm-ok-bg: #dff0e3; --adm-ok-line: #b9dcc2;
  --adm-warn: #8a3a12; --adm-warn-bg: #fde7d9; --adm-warn-line: #efc2a6;
  --adm-off: #666; --adm-off-bg: #eee;
  --adm-info: #6b5200; --adm-info-bg: #fff1c2;
}

body { background: var(--cream); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ header */
.adm-top { background: var(--brand); color: var(--on-dark); position: sticky; top: 0; z-index: 20; }
.adm-top .wrap { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding-block: .7rem; flex-wrap: wrap; }
.adm-top a { color: inherit; text-decoration: none; }
.adm-brand { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.adm-brand strong { font-size: 1.05rem; }
.adm-brand span { color: var(--on-dark-muted); font-size: .92rem; }
.adm-session { display: flex; gap: .6rem; align-items: center; }
.adm-who { font-size: .82rem; color: var(--on-dark-muted); }
.adm-top .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }

/* -------------------------------------------------------------------- tabs */
.adm-app { padding-block: 1.2rem 3rem; }
.adm-tabs { display: inline-flex; gap: .25rem; padding: .25rem; margin: 0 0 1.1rem; background: var(--adm-surface); border: 1px solid var(--line); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button { border: 0; background: transparent; border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.adm-tabs button:hover { background: var(--tint); }
.adm-tabs button[aria-pressed="true"] { background: var(--brand); color: #fff; }
/* Server-rendered admins: the tabs are links; the current page has aria-current="page". */
.adm-tabs a { border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; }
.adm-tabs a:hover { background: var(--tint); color: var(--text); }
.adm-tabs a[aria-current="page"] { background: var(--brand); color: #fff; }
.adm-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; line-height: 1.4; text-align: center; }
.adm-tabs.adm-tabs-sm a, .adm-tabs.adm-tabs-sm button { padding: .35rem .8rem; font-size: .88rem; }
/* The tabs and a main action on one line (e.g. "+ New part"). */
.adm-nav { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 1.1rem; }
.adm-nav .adm-tabs { margin: 0; }

/* ------------------------------------------------------- toolbar and panel */
.adm-toolbar { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 .8rem; }
.adm-toolbar > div { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.adm-panel { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.1rem; }
.adm-panel-head, .adm-vhead { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .6rem; }
.adm-h2, .adm-panel-head h2, .adm-vhead h2 { font-size: 1.25rem; margin: 0; }
.adm-label, .adm-sec > h3 { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 .6rem; }
.adm-sec { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1rem; }
.adm-sec:first-of-type { margin-top: .4rem; }
.adm-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem 2rem; }
.form-grid.adm-g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .form-grid.adm-g3 { grid-template-columns: 1fr 1fr; } }
.adm-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin: .6rem 0; }
.adm-row .field { margin: 0; }
.adm-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.2rem; }
.adm-actions .adm-danger { margin-left: auto; }
.adm-danger { color: var(--adm-warn) !important; border-color: var(--adm-warn-line) !important; }
.adm-preview { margin: .7rem 0 .3rem; padding: .55rem .8rem; background: var(--tint); border-radius: 8px; font-size: .92rem; }

/* ----------------------------------------------- one size for every control */
.adm-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.adm-app select, .adm-app textarea {
  font: inherit; font-size: .95rem; color: var(--text); background: var(--adm-field);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .5em .7em; min-height: 2.5rem; max-width: 100%;
}
.adm-app textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
.adm-app .field input, .adm-app .field select, .adm-app .field textarea { width: 100%; }
.adm-app input:focus, .adm-app select:focus, .adm-app textarea:focus { border-color: var(--brand-2, var(--brand)); outline: none; box-shadow: 0 0 0 3px var(--tint); }
.adm-app .field label { font-size: .88rem; }

/* compact labeled fields in a row: <label class="adm-mini"><span>Amount</span><input></label> */
.adm-inline { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin: .5rem 0; }
.adm-mini { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.adm-mini.grow { flex: 1 1 12rem; }
.adm-mini input, .adm-mini select { width: 100%; }

/* -------------------------------------------------------------------- tables */
.adm-table-wrap { overflow-x: auto; margin: 0 -.2rem; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: .5rem .5rem; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.adm-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.adm-table tr.clickable { cursor: pointer; }
.adm-table tr.clickable:hover, .adm-table tr.is-open { background: var(--tint); }
.adm-table .adm-toggle { white-space: nowrap; font-weight: 600; text-align: right; color: var(--brand-2, var(--brand)); }
.adm-table tr.adm-detail > td { background: var(--tint); padding: .2rem .6rem 1rem; cursor: default; }
.adm-table tr.adm-detail .adm-panel { margin: .6rem 0 0; }
.adm-table .adm-drag { cursor: grab; color: var(--muted); font-size: 1.2rem; width: 1.6rem; text-align: center; user-select: none; }
.adm-table tr.is-dragging { opacity: .45; }
.adm-table .num { text-align: right; white-space: nowrap; }
.adm-show-sm { display: none; }
@media (max-width: 700px) { .adm-hide-sm { display: none; } .adm-show-sm { display: block; } .adm-table { font-size: .88rem; } }
.adm-nowrap { white-space: nowrap; }

/* --------------------------------------------------------------- pills, chips */
.pill { display: inline-block; border-radius: 999px; padding: .12rem .6rem; font-size: .76rem; font-weight: 700; background: var(--tint); white-space: nowrap; }
.pill + .pill { margin-left: .3rem; }
.pill.ok { background: var(--adm-ok-bg); color: var(--adm-ok); }
.pill.warn { background: var(--adm-warn-bg); color: var(--adm-warn); }
.pill.off { background: var(--adm-off-bg); color: var(--adm-off); }
.pill.info { background: var(--adm-info-bg); color: var(--adm-info); }
.adm-chip { display: inline-flex; gap: .4rem; align-items: center; border: 1px solid var(--line); background: var(--adm-surface); border-radius: 999px; padding: .35rem .8rem; font-size: .88rem; cursor: pointer; user-select: none; }
.adm-chip input { margin: 0; accent-color: var(--brand); }
.adm-chip:has(input:checked) { background: var(--tint); border-color: var(--brand-2, var(--brand)); }

/* ------------------------------------------------------------- stat tiles */
/* <div class="adm-stats"><a class="adm-stat" href="?status=active" aria-current="true"><b>12</b><span>Active</span></a>... */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; margin: 0 0 1.1rem; }
.adm-stat { display: flex; flex-direction: column; gap: .1rem; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; color: var(--text); text-decoration: none; }
.adm-stat b { font-size: 1.5rem; line-height: 1.1; }
.adm-stat span { font-size: .8rem; color: var(--muted); font-weight: 600; }
a.adm-stat:hover { border-color: var(--brand-2, var(--brand)); color: var(--text); }
.adm-stat[aria-current="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.adm-stat.is-warn b { color: var(--adm-warn); }
@media (max-width: 640px) {
  .adm-stats { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .adm-stat { padding: .45rem .6rem; }
  .adm-stat b { font-size: 1.15rem; }
  .adm-stat span { font-size: .72rem; }
}

/* ------------------------------------------- result banner (after a redirect) */
.adm-flash { border-radius: var(--radius-sm); padding: .7rem .9rem; margin: 0 0 1rem; background: var(--tint); border: 1px solid var(--line); }
.adm-flash.is-ok { background: var(--adm-ok-bg); border-color: var(--adm-ok-line); color: var(--adm-ok); }
.adm-flash.is-error { background: var(--adm-warn-bg); border-color: var(--adm-warn-line); color: var(--adm-warn); }

/* ------------------------------------------------- key / value detail lists */
.adm-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .92rem; }
.adm-kv dt { color: var(--muted); font-weight: 600; }
.adm-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.adm-kv .adm-total { font-size: 1.15rem; font-weight: 700; }

/* ------------------------------------------------------ statuses, checklists */
.adm-status-line { margin: .5rem 0 0; min-height: 1.2em; font-size: .92rem; }
.adm-status-line.is-ok { color: var(--adm-ok); font-weight: 600; }
.adm-status-line.is-error { color: var(--adm-warn); font-weight: 600; }
.adm-checklist { list-style: none; padding: 0; margin: .4rem 0 .8rem; }
.adm-checklist li { padding: .2rem 0; }
.adm-checklist .adm-mark { display: inline-block; width: 1.4rem; font-weight: 700; }
.adm-checklist li.ok .adm-mark { color: var(--adm-ok); }
.adm-checklist li.todo { color: var(--muted); }
.adm-legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.adm-legend span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; background: var(--sw, #ddd); border: 1px solid rgba(0,0,0,.08); }

/* ----------------------------------------------------------- folding sections */
.adm-fold { border-top: 1px solid var(--line); }
.adm-fold > summary { list-style: none; cursor: pointer; display: flex; gap: .2rem 1rem; flex-wrap: wrap; align-items: baseline; padding: .85rem 0; }
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary::before { content: "▸"; color: var(--muted); width: 1rem; display: inline-block; transition: transform .15s; }
.adm-fold[open] > summary::before { transform: rotate(90deg); }
.adm-fold-title { font-weight: 700; }
.adm-fold-sum { color: var(--muted); font-size: .9rem; }
.adm-fold-body { padding: 0 0 1rem 1.2rem; }
.adm-more { margin-top: .8rem; }
.adm-more > summary { cursor: pointer; font-weight: 700; color: var(--brand-2, var(--brand)); margin-bottom: .6rem; }

/* ---------------------------------------------------------------- vehicles */
.adm-vform .adm-status, .adm-pillselect { font-weight: 700; border-radius: 999px !important; }
.seasons input { width: auto; }
.adm-admins { padding-left: 0; list-style: none; }
.adm-admins li { margin: .3rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.adm-admins code { word-break: break-all; }

/* ---------------------------------------------------------------- calendar */
.adm-cal { overflow-x: auto; }
.adm-cal table { border-collapse: collapse; font-size: .75rem; }
.adm-cal th, .adm-cal td { border: 1px solid var(--line); min-width: 26px; height: 30px; text-align: center; padding: 0 2px; }
.adm-cal th.veh { text-align: left; min-width: 170px; padding: 0 .5rem; position: sticky; left: 0; background: var(--adm-surface); z-index: 1; font-size: .8rem; }
.adm-cal td.bk { background: #cfe3d6; cursor: pointer; }
.adm-cal td.held { background: #fff1c2; cursor: pointer; }
.adm-cal td.blk { background: #e3e3e3; }
.adm-cal td.today, .adm-cal th.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }

/* ------------------------------------------------------------------ buttons */
/* One button set for every admin (2026-11-11), so they no longer depend on each
   site's own .btn names: <button class="adm-btn adm-btn-primary">Save</button>.
   --adm-primary defaults to the site's --brand; a site can point it at its accent. */
/* Optional site settings (set on :root or body): --adm-primary / --adm-primary-ink (main button),
   --adm-btn-line / --adm-btn-ink (other buttons' border and text; dark sites). Defaults: --brand, #fff,
   --line, --text. Read where used, so a site that sets --brand on body still gets it. */
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font: inherit; font-weight: 600; font-size: .92rem;
  line-height: 1.2; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--adm-btn-line, var(--line)); background: var(--adm-surface);
  color: var(--adm-btn-ink, var(--text)); cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s, filter .15s; }
.adm-btn:hover { border-color: var(--brand-2, var(--brand)); color: var(--adm-btn-ink, var(--text)); }
.adm-btn:disabled { opacity: .5; cursor: default; }
.adm-btn-primary { background: var(--adm-primary, var(--brand)); border-color: var(--adm-primary, var(--brand)); color: var(--adm-primary-ink, #fff); }
.adm-btn-primary:hover { filter: brightness(.92); border-color: var(--adm-primary, var(--brand)); color: var(--adm-primary-ink, #fff); }
.adm-btn-danger { color: var(--adm-warn); border-color: var(--adm-warn-line); }
.adm-btn-danger:hover { border-color: var(--adm-warn); color: var(--adm-warn); background: var(--adm-warn-bg); }
.adm-btn-sm { padding: .35rem .8rem; font-size: .85rem; }
.adm-btn-xs { padding: .2rem .55rem; font-size: .78rem; }
.adm-top .adm-btn { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.adm-top .adm-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; color: var(--on-dark); }
.adm-top .adm-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.adm-actions .adm-btn-danger { margin-left: auto; }

/* ------------------------------------------------------------- form layout */
/* <div class="adm-form"><div class="adm-field"><label for=..>Name</label><input id=..><span class="adm-hint">..</span></div>…</div>
   Two columns (.adm-g3: three; .adm-g-save: two fields and a button), one on phones; .wide spans the row. */
.adm-form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; align-items: start; }
.adm-form.adm-g3 { grid-template-columns: repeat(3, 1fr); }
.adm-form.adm-g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .adm-form.adm-g4 { grid-template-columns: 1fr 1fr; } }
.adm-form.adm-g-save { grid-template-columns: 1fr 1.6fr auto; align-items: end; }
.adm-field { min-width: 0; }
.adm-field.wide { grid-column: 1 / -1; }
.adm-field > label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.adm-field input:not([type="checkbox"]):not([type="radio"]), .adm-field select, .adm-field textarea { width: 100%; }
.adm-hint { display: block; margin-top: .25rem; font-size: .8rem; color: var(--muted); }
.adm-form-head { display: flex; gap: .3rem 1rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .7rem; }
.adm-form-head .adm-label { margin: 0; }
@media (max-width: 600px) { .adm-form, .adm-form.adm-g3, .adm-form.adm-g4, .adm-form.adm-g-save { grid-template-columns: 1fr; } .adm-form.adm-g-save > :last-child { justify-self: start; } }

/* Lists whose rows open in place: fixed columns, so an open row's fields wrap inside
   the table instead of widening it past a phone's screen. Set column widths on the th. */
.adm-table.adm-fixed { table-layout: fixed; min-width: 0; }

/* ---------------------------------------------------- photos: drop + cards */
/* AdmKit.dropZone() builds this: drag files in, or click for the multi-select picker. */
.adm-drop { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-top: .9rem; padding: 1.1rem 1rem;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--adm-surface); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; }
.adm-drop:hover, .adm-drop:focus-within { border-color: var(--brand-2, var(--brand)); }
.adm-drop.is-over { border-color: var(--brand-2, var(--brand)); background: var(--tint); }
.adm-drop.is-busy { opacity: .6; pointer-events: none; }
.adm-drop strong { font-size: .98rem; }
.adm-drop-icon { font-size: 1.5rem; line-height: 1; color: var(--brand-2, var(--brand)); }
.adm-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.adm-progress { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: .6rem; }
.adm-progress > i { display: block; height: 100%; width: 0; background: var(--brand-2, var(--brand)); transition: width .3s ease; }
/* <div class="adm-photos"><figure class="adm-photo"><img><input placeholder="Caption"><div class="adm-photo-row">…buttons</div></figure></div> */
.adm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; margin-top: .8rem; }
.adm-photos:empty { display: none; }
.adm-photo { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--adm-surface);
  display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.adm-photo:hover { border-color: var(--brand-2, var(--brand)); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.adm-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--tint); }
.adm-photo.is-cover { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.adm-photo .adm-photo-label { font-size: .72rem; font-weight: 700; color: var(--brand-2, var(--brand)); padding: .3rem .5rem 0; }
.adm-app .adm-photo input { border: 0; border-top: 1px solid var(--line); border-radius: 0; min-height: 0; padding: .45rem .5rem; font-size: .85rem; width: 100%; }
.adm-app .adm-photo input:focus { box-shadow: none; background: var(--tint); }
.adm-photo-row { display: flex; gap: .25rem; padding: .35rem; justify-content: space-between; align-items: center; }
.adm-photo-cover-empty { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 64px; aspect-ratio: 4 / 3;
  border-radius: 6px; background: var(--tint); color: var(--muted); font-size: 1.2rem; }
@media (max-width: 600px) { .adm-photos { grid-template-columns: 1fr 1fr; gap: .5rem; } }

/* ------------------------------------------------------------------ phones */
@media (max-width: 640px) {
  .adm-panel { padding: .9rem; }
  .adm-brand span { display: none; }
  .adm-who { display: none; }
  .adm-fold-body { padding-left: .3rem; }
}

/* Rows and panels scrolled into view stop below the sticky header. */
.adm-table tr, .adm-app .adm-panel, .adm-app form { scroll-margin-top: 4.5rem; }
.adm-app .price-table th { font-size: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
@media (max-width: 640px) {
  .adm-tabs button, .adm-tabs a { padding: .45rem .75rem; }
  .adm-table .adm-toggle { font-size: .82rem; }
  .adm-table tr.adm-detail > td { padding: .1rem .2rem .6rem; }
  .adm-table tr.adm-detail .adm-panel { padding: .7rem; }
}