/* ==========================================================================
   RepairDock Design System — Stream 1 (UX pass)
   Site-relative path: assets/css/rd-design-system.css
   Load order (merge stream): AFTER assets/css/reno.css, LAST stylesheet.
   That is what lets these rules win on equal specificity without
   !important wars. Do NOT load this before reno.css.

   THEME RULE — this file defines NO colours of its own. Every colour,
   surface and shadow comes from the existing reno.css tokens set per
   <html data-theme="workshop|slate|clay|midnight">:
     --rd-bg, --rd-surface, --rd-surface2, --rd-ink, --rd-muted,
     --rd-faint, --rd-border, --rd-border-strong,
     --rd-accent, --rd-accent-deep, --rd-accent-soft, --rd-accent-ink,
     --rd-accent2, --rd-accent2-deep, --rd-accent2-soft,
     --rd-nav-bg, --rd-nav-ink,
     --rd-success / -soft, --rd-warning / -soft, --rd-danger / -soft,
     --rd-shadow, --rd-shadow-lg
   A theme switch therefore cannot break this file: if a token exists
   in reno.css for that theme, this file follows it. The only additions
   below are theme-neutral geometry (spacing, radius, type sizes) under
   the same --rd- prefix; they carry no colour and clash with no
   existing token (reno.css defines no --rd-space-* / --rd-radius-* /
   --rd-shadow-sm / --rd-text-*).
   No external assets: no webfonts, no CDN icons. Icons come from
   assets/img/rd-icons.svg (see TOKEN-SPEC.md).
   No PHP, no prices, no logic — presentation only.
   ========================================================================== */

/* ---- Geometry tokens (theme-neutral; safe under all four themes) ---- */
:root{
  --rd-space-1:.25rem;
  --rd-space-2:.5rem;
  --rd-space-3:.75rem;
  --rd-space-4:1rem;
  --rd-space-5:1.5rem;
  --rd-space-6:2rem;
  --rd-radius-sm:.5rem;
  --rd-radius-md:.75rem;
  --rd-radius-lg:1rem;
  --rd-shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --rd-text-xs:.76rem;
  --rd-text-sm:.86rem;
  --rd-text-base:1rem;
  --rd-text-lg:1.2rem;
  --rd-text-xl:1.5rem;
}

/* ---- Page head: one title, one short subtitle, one primary action --- */
.rd-page-head{
  display:flex;flex-wrap:wrap;gap:var(--rd-space-3);
  align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--rd-space-5);
}
.rd-page-head h1,.rd-page-head h2{
  font-size:var(--rd-text-xl);line-height:1.2;margin:0;
  letter-spacing:-.01em;
}
.rd-page-subtitle{color:var(--rd-muted);font-size:var(--rd-text-sm);margin:.25rem 0 0;}
.rd-section-title{font-size:var(--rd-text-base);font-weight:700;margin:0 0 var(--rd-space-3);}

/* ---- The one-primary-action rule, as layout ---------------------------
   .rd-page-actions holds a screen's actions. Exactly ONE child may be
   .btn-primary (the screen's single primary action). Everything else in
   the bar is quiet secondary or goes in the overflow menu. The bar
   wraps on phones instead of overflowing; the primary action is full
   width on narrow phones so it is thumb-reachable, never squeezed. */
.rd-page-actions{
  display:flex;flex-wrap:wrap;gap:var(--rd-space-2);
  align-items:center;margin-bottom:var(--rd-space-4);
}
.rd-page-actions .btn-primary{order:-1;}
@media (max-width:575.98px){
  .rd-page-actions .btn-primary{flex:1 1 100%;}
}

/* ---- Quiet secondary buttons -----------------------------------------
   For every non-primary action that must stay visible. Same 44px thumb
   target as .btn, but surface-coloured and border-only, so the eye
   lands on the one primary action first. Danger stays quiet too:
   red text/border, red only as a soft wash on hover — never a solid
   red wall next to other buttons. */
.rd-btn-quiet{
  background:var(--rd-surface);color:var(--rd-ink);
  border:1px solid var(--rd-border-strong);
  border-radius:.6rem;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;text-decoration:none;cursor:pointer;
}
.rd-btn-quiet:hover,.rd-btn-quiet:focus-visible{
  border-color:var(--rd-accent);color:var(--rd-accent);text-decoration:none;
}
.rd-btn-quiet.rd-danger{color:var(--rd-danger);border-color:var(--rd-border-strong);}
.rd-btn-quiet.rd-danger:hover,.rd-btn-quiet.rd-danger:focus-visible{
  background:var(--rd-danger-soft);border-color:var(--rd-danger);color:var(--rd-danger);
}
/* Existing Bootstrap secondaries get the same calm treatment so pages
   the page streams have not touched yet still read quietly. */
.btn-outline-secondary,.btn-outline-dark,.btn-light{
  background:var(--rd-surface);color:var(--rd-ink);
  border-color:var(--rd-border-strong);
}
.btn-outline-secondary:hover,.btn-outline-dark:hover,.btn-light:hover{
  background:var(--rd-surface2);color:var(--rd-ink);
  border-color:var(--rd-border-strong);
}

/* ---- Toolbar: search grows, actions stay right, wraps on phones ------ */
.rd-toolbar{
  display:flex;flex-wrap:wrap;gap:var(--rd-space-2);
  align-items:center;margin-bottom:var(--rd-space-4);
}
.rd-toolbar .rd-search{flex:1 1 220px;min-width:0;}
.rd-toolbar .form-control,.rd-toolbar .form-select{min-height:44px;}

/* ---- Overflow (⋮) menu -------------------------------------------------
   Markup (see TOKEN-SPEC.md): .rd-overflow > button.rd-overflow-btn +
   .rd-menu (links and/or buttons). The menu is a surface card, never
   wider than the viewport, scrollable if long. Danger items sit last,
   separated by a rule, in danger colour. Works with rd-ux.js; without
   JS the menu still opens if the page stream uses <details> instead
   (same classes on <details>/<summary> — see TOKEN-SPEC.md). */
.rd-overflow{position:relative;display:inline-flex;flex-shrink:0;}
.rd-overflow-btn{
  width:44px;height:44px;border-radius:.6rem;flex-shrink:0;
  background:var(--rd-surface);color:var(--rd-ink);
  border:1px solid var(--rd-border-strong);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.rd-overflow-btn:hover,.rd-overflow-btn:focus-visible{border-color:var(--rd-accent);color:var(--rd-accent);}
.rd-overflow-btn[aria-expanded="true"]{border-color:var(--rd-accent);background:var(--rd-accent-soft);}
.rd-menu{
  position:absolute;right:0;top:calc(100% + 4px);z-index:1050;
  min-width:220px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;
  background:var(--rd-surface);color:var(--rd-ink);
  border:1px solid var(--rd-border);border-radius:var(--rd-radius-md);
  box-shadow:var(--rd-shadow-lg);padding:.35rem;
}
.rd-menu[hidden]{display:none !important;}
.rd-menu a,.rd-menu button{
  display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.6rem .75rem;border:0;background:transparent;color:var(--rd-ink);
  border-radius:var(--rd-radius-sm);font-size:var(--rd-text-sm);
  font-weight:600;text-decoration:none;text-align:left;cursor:pointer;
  min-height:44px;white-space:normal;
}
.rd-menu a:hover,.rd-menu button:hover,
.rd-menu a:focus-visible,.rd-menu button:focus-visible{
  background:var(--rd-accent-soft);color:var(--rd-ink);text-decoration:none;
}
.rd-menu .rd-menu-danger{color:var(--rd-danger);}
.rd-menu .rd-menu-danger:hover{background:var(--rd-danger-soft);color:var(--rd-danger);}
.rd-menu hr{margin:.35rem 0;border-color:var(--rd-border);}
/* Row-level overflow: same menu, anchored to the row's ⋮ button. */
.rd-row-actions{position:relative;display:inline-flex;gap:.25rem;align-items:center;flex-shrink:0;}
.rd-row-actions .rd-menu{right:0;}

/* ---- Icon buttons + sprite icons --------------------------------------
   .rd-icon-btn is for per-row actions that stay visible (edit, print).
   Icon + aria-label; visible text is optional and hidden on phones by
   .rd-icon-label so a row never becomes a button wall. */
.rd-icon{width:1.15rem;height:1.15rem;flex-shrink:0;vertical-align:-.2em;}
.rd-icon-btn{
  width:40px;height:40px;border-radius:.6rem;display:inline-flex;
  align-items:center;justify-content:center;gap:.4rem;
  background:var(--rd-surface);color:var(--rd-muted);
  border:1px solid var(--rd-border);cursor:pointer;text-decoration:none;
}
.rd-icon-btn:hover,.rd-icon-btn:focus-visible{color:var(--rd-accent);border-color:var(--rd-accent);}
.rd-icon-btn.rd-danger:hover{color:var(--rd-danger);border-color:var(--rd-danger);}
@media (max-width:767.98px){
  .rd-icon-label{display:none;}
}

/* ---- (?) help popover: at most ONE per screen --------------------------
   Native <details class="rd-help">. The ? is a small quiet circle, not
   a button in the action bar. The panel is a surface card, capped at
   the viewport width, and never a paragraph block in the page flow.
   Tutorial paragraphs are DELETED by the page streams; this replaces
   them — it does not sit alongside them. */
.rd-help{position:relative;display:inline-flex;}
.rd-help summary{
  list-style:none;cursor:pointer;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rd-border-strong);background:var(--rd-surface);
  color:var(--rd-muted);font-weight:700;font-size:.9rem;line-height:1;
}
.rd-help summary::-webkit-details-marker{display:none;}
.rd-help summary:hover,.rd-help summary:focus-visible{color:var(--rd-accent);border-color:var(--rd-accent);}
.rd-help-panel{
  position:absolute;left:0;top:calc(100% + 6px);z-index:1050;
  width:min(320px,calc(100vw - 32px));
  background:var(--rd-surface);color:var(--rd-ink);
  border:1px solid var(--rd-border);border-radius:var(--rd-radius-md);
  box-shadow:var(--rd-shadow-lg);padding:var(--rd-space-4);
  font-size:var(--rd-text-sm);line-height:1.55;
}
.rd-help-panel p{margin:0 0 .5rem;}
.rd-help-panel p:last-child{margin-bottom:0;}

/* ---- Collapsible advanced sections --------------------------------------
   Native <details class="rd-advanced">. The summary reads as a quiet
   section header; the body is visually grouped. Advanced form sections
   COLLAPSE — they are never deleted. The summary must name the section
   (e.g. "Advanced: costing & referral"), never a bare "Advanced". */
.rd-advanced{
  border:1px solid var(--rd-border);border-radius:var(--rd-radius-md);
  background:var(--rd-surface);margin-bottom:var(--rd-space-4);
}
.rd-advanced summary{
  list-style:none;cursor:pointer;padding:var(--rd-space-3) var(--rd-space-4);
  font-weight:700;font-size:var(--rd-text-sm);color:var(--rd-ink);
  display:flex;align-items:center;gap:.5rem;
}
.rd-advanced summary::-webkit-details-marker{display:none;}
.rd-advanced summary::after{content:"▾";margin-left:auto;color:var(--rd-muted);}
.rd-advanced[open] summary::after{content:"▴";}
.rd-advanced summary:hover,.rd-advanced summary:focus-visible{color:var(--rd-accent);}
.rd-advanced-body{padding:0 var(--rd-space-4) var(--rd-space-4);border-top:1px solid var(--rd-border);padding-top:var(--rd-space-4);}

/* ---- Form grouping ------------------------------------------------------ */
.rd-form-section{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius-lg);box-shadow:var(--rd-shadow-sm);
  padding:var(--rd-space-4);margin-bottom:var(--rd-space-4);
}
.rd-form-section > h2,.rd-form-section > h3{font-size:var(--rd-text-base);margin:0 0 var(--rd-space-3);}

/* ---- Cards, tables, empty states, toasts -------------------------------- */
.rd-card{
  background:var(--rd-surface);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius-lg);box-shadow:var(--rd-shadow);
  padding:var(--rd-space-4);
}
.rd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rd-table-wrap table{min-width:640px;}
.rd-empty{
  text-align:center;color:var(--rd-muted);padding:var(--rd-space-6) var(--rd-space-4);
  border:1px dashed var(--rd-border-strong);border-radius:var(--rd-radius-lg);
  background:var(--rd-surface);
}
.rd-empty strong{display:block;color:var(--rd-ink);margin-bottom:.25rem;}
.rd-toast{
  background:var(--rd-surface);color:var(--rd-ink);
  border:1px solid var(--rd-border);border-left:4px solid var(--rd-accent);
  border-radius:var(--rd-radius-md);box-shadow:var(--rd-shadow-lg);
  padding:var(--rd-space-3) var(--rd-space-4);font-size:var(--rd-text-sm);
}
.rd-toast.rd-toast-danger{border-left-color:var(--rd-danger);}
.rd-toast.rd-toast-success{border-left-color:var(--rd-success);}

/* ---- Status text uses tokens only (no new colours) ---------------------- */
.rd-text-danger{color:var(--rd-danger);}
.rd-text-success{color:var(--rd-success);}
.rd-text-warning{color:var(--rd-warning);}
.rd-text-muted{color:var(--rd-muted);}

/* ---- Print: design-system chrome never prints ---------------------------
   Receipt/print pages already hide their own button rows with
   .no-print; this covers the new chrome on every other page so a
   printout is never a screenshot of buttons. */
@media print{
  .rd-page-actions,.rd-toolbar .rd-overflow,.rd-overflow,.rd-help,
  .rd-btn-quiet,.rd-icon-btn{display:none !important;}
  .rd-card,.rd-form-section{box-shadow:none;}
}