/* Structural stylesheet. Colors come from the per-tenant theme injected in
   base.html (:root --bg/--accent/--ink/…). These aliases map the original
   Lovebugs palette names onto the tenant variables so the whole sheet
   re-themes automatically for any retailer.

   Everything under the ADMIN SHELL block near the bottom is the new
   sidebar-based admin layout; the public site and legacy admin CSS above it
   are unchanged. */
:root {
  --sky: var(--bg);
  --red: var(--accent);
  --spot: var(--ink);
  --grass: var(--accent);

  /* ---- design tokens (admin shell) --------------------------------
     Tokens the new admin layout pulls from. Everything is expressed as a
     token so a theme override only edits the tokens, not the components.
     They deliberately reference the tenant palette (`--surface`, `--ink`,
     `--accent`) so a rebrand still flows through automatically. */
  --app-bg:            #F5F6F8;
  --app-surface:       var(--surface, #FFFFFF);
  --app-surface-2:     #FAFAFC;   /* subtle raised surface (rows, hovers) */
  --app-border:        #E5E7EB;
  --app-border-strong: #D1D5DB;
  --app-ink:           var(--ink, #14181F);
  --app-ink-soft:      #4B5563;
  --app-ink-muted:     #6B7280;

  --app-sidebar-bg:    #111827;
  --app-sidebar-ink:   #E5E7EB;
  --app-sidebar-muted: #9CA3AF;
  --app-sidebar-hover: rgba(255,255,255,.06);
  --app-sidebar-active-bg: rgba(255,255,255,.10);
  --app-sidebar-active-ink: #FFFFFF;
  --app-sidebar-accent: var(--accent, #2E6BE6);
  --app-sidebar-width: 15.5rem;
  --app-sidebar-collapsed-width: 3.75rem;
  --app-topbar-height: 3.5rem;

  --app-radius-sm: 6px;
  --app-radius:    10px;
  --app-radius-lg: 14px;
  --app-radius-xl: 20px;

  --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --app-shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .06);
  --app-shadow-lg: 0 10px 32px rgba(15, 23, 42, .12);
}

/* Optional dark theme; opt in via <html data-theme="dark">. All admin-shell
   components read from tokens, so this single block flips the whole app. */
:root[data-theme="dark"] {
  --app-bg:            #0B0F17;
  --app-surface:       #131A26;
  --app-surface-2:     #1B2331;
  --app-border:        #253046;
  --app-border-strong: #33415C;
  --app-ink:           #E5E7EB;
  --app-ink-soft:      #C1C7D0;
  --app-ink-muted:     #8B93A1;

  --app-sidebar-bg:    #060A12;
  --app-sidebar-ink:   #E5E7EB;
  --app-sidebar-muted: #6B7280;
  --app-sidebar-hover: rgba(255,255,255,.05);
  --app-sidebar-active-bg: rgba(255,255,255,.09);
  --app-sidebar-active-ink: #FFFFFF;

  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --app-shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .35);
  --app-shadow-lg: 0 10px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
  color: var(--spot);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.5) 0 46px, transparent 47px),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.4) 0 60px, transparent 61px),
    linear-gradient(180deg, var(--sky) 0%, #8FD0F0 65%, var(--cloud) 100%);
  min-height: 100vh;
}

/* ---------- public site navigation / hero ---------- */
.site-nav {
  max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-brand { color: var(--spot); font-family: var(--font-display, 'Baloo 2', cursive); font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.site-nav-links { display: flex; align-items: center; gap: 1.25rem; }
.site-nav-links a { color: var(--spot); font-weight: 700; text-decoration: none; }
.site-nav-links a:hover { text-decoration: underline; }
.site-nav-links .site-nav-cta { border: 2px solid var(--spot); border-radius: 999px; padding: .4rem 1rem; background: var(--cloud); }
/* Staff sign in — sits alongside customer nav items on the landing page but
   stays visually secondary: no fill, no bold weight, an "arrow-out" affordance
   to hint that it leads out of the customer flow. Discoverable without
   competing with the primary "Sign up" CTA. */
.site-nav-links .site-nav-staff {
  font-weight: 600; font-size: .9rem; color: #17435C; opacity: .75;
  padding: .35rem .55rem; border-radius: 8px;
}
.site-nav-links .site-nav-staff::after { content: " →"; font-size: .8em; opacity: .7; }
.site-nav-links .site-nav-staff:hover { opacity: 1; background: rgba(255,255,255,.55); text-decoration: none; }
.site-nav-links .site-nav-staff:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
.hero { text-align: center; padding: 3rem 1.25rem 3.5rem; }

.ladybug { display: inline-block; animation: hop 2.4s ease-in-out infinite; }
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-16px) rotate(4deg); }
}

.bounce-title {
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1.05;
  color: var(--red);
  text-shadow: 3px 3px 0 var(--spot);
  margin-top: .5rem;
}
.bounce-title em { font-style: normal; color: #fff; text-shadow: 3px 3px 0 var(--spot); }
.bounce-title span {
  display: inline-block;
  animation: letterbounce 1.6s cubic-bezier(.28,.84,.42,1) calc(var(--i) * 70ms) 1 both;
}
@keyframes letterbounce {
  0% { transform: translateY(-40px); opacity: 0; }
  60% { transform: translateY(6px); opacity: 1; }
  80% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.tagline { font-size: 1.15rem; margin: 1rem auto 1.75rem; max-width: 34rem; font-weight: 700; color: #17435C; }

/* ---------- marketing content ---------- */
.experience { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 3.5rem; }
.section-heading { max-width: 46rem; margin: 0 auto 1.75rem; text-align: center; }
.section-heading h2 { font-family: var(--font-display, 'Baloo 2', cursive); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin-bottom: .75rem; }
.section-heading > p:last-child { color: #17435C; font-size: 1.08rem; font-weight: 700; }
.eyebrow { color: var(--red); font-size: .8rem; font-weight: 800; letter-spacing: .14em; margin-bottom: .5rem; text-transform: uppercase; }
.experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.experience-card { background: var(--cloud); border: 3px solid var(--spot); border-radius: 20px; box-shadow: 0 5px 0 var(--spot); padding: 1.5rem; }
.experience-icon { display: block; font-size: 2rem; margin-bottom: .65rem; }
.experience-card h3 { color: var(--red); font-family: var(--font-display, 'Baloo 2', cursive); font-size: 1.3rem; margin-bottom: .35rem; }
.experience-card p { color: #5a534f; line-height: 1.5; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--spot);
  border-radius: 999px;
  padding: .7rem 2rem;
  font-size: 1.15rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--spot);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--spot); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--spot); }
.btn:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; }
.btn-big { font-size: 1.3rem; padding: .85rem 2.6rem; }

/* ---------- passes ---------- */
.passes { padding: 1.5rem 1.25rem 2.5rem; max-width: 62rem; margin: 0 auto; }
.passes h2, .signup h2 {
  font-family: var(--font-display, 'Baloo 2', cursive); font-weight: 800;
  font-size: 2rem; text-align: center; margin-bottom: 1.25rem;
}
.pass-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pass-card {
  background: var(--cloud);
  border: 3px solid var(--spot);
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .4rem;
  cursor: pointer;
  position: relative;
  box-shadow: 0 5px 0 var(--spot);
  transition: transform .12s;
}
.pass-card:hover { transform: translateY(-4px) rotate(-.5deg); }
.pass-card input { position: absolute; top: 1rem; right: 1rem; width: 1.2rem; height: 1.2rem; accent-color: var(--red); }
.pass-name { font-family: var(--font-display, 'Baloo 2', cursive); font-weight: 800; font-size: 1.3rem; color: var(--red); }
.pass-price { font-size: 1.6rem; font-weight: 800; }
.pass-blurb { color: #5a534f; }

/* ---------- signup form ---------- */
.signup { padding: 1rem 1.25rem 4rem; }
.signup-card {
  background: #fff;
  border: 3px solid var(--spot);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--spot);
  max-width: 34rem; margin: 0 auto; padding: 2rem 1.75rem;
}
.signup-sub { text-align: center; color: #5a534f; margin-bottom: 1.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label, .field legend { font-weight: 700; display: block; margin-bottom: .3rem; }
.optional { font-weight: 400; color: #8a827d; font-size: .85rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input:not([type]) {
  width: 100%; padding: .65rem .8rem;
  border: 2px solid var(--spot); border-radius: 12px;
  font: inherit;
}
.field input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
fieldset.field { border: none; padding: 0; }
.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.radio-row label { font-weight: 400; display: flex; align-items: center; gap: .4rem; }
.radio-row input, .check input { accent-color: var(--red); width: 1.1rem; height: 1.1rem; }
.consents { background: var(--cloud); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1.25rem; display: grid; gap: .6rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
/* SMS consent is legal fine print: smaller, muted, and kept as one text block so
   the links stay inline instead of becoming separate flex items. */
.sms-consent { align-items: flex-start; }
.sms-consent input { margin-top: .15rem; }
.check-text { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.signup-card .btn { width: 100%; }
.waiver-box { border: 2px solid var(--spot); border-radius: 14px; padding: 1rem; margin-bottom: 1.25rem; }
.waiver-box legend { font-weight: 800; padding: 0 .35rem; }
/* A long waiver scrolls within a fixed box instead of stretching the page.
   white-space: pre-wrap preserves the paragraph breaks in the waiver text. */
.waiver-copy { background: #f7f4ef; border-radius: 10px; padding: 1rem; margin: .5rem 0 1rem; line-height: 1.5; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; text-align: left; white-space: pre-wrap; }
.waiver-copy:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.waiver-accept { margin-bottom: .9rem; }
.waiver-box > input, .waiver-form > input { width: 100%; padding: .65rem .8rem; border: 2px solid var(--spot); border-radius: 12px; font: inherit; }
.form-fine { color: var(--muted); font-size: .82rem !important; margin: .5rem 0 1rem !important; }

/* ---------- flash messages ---------- */
.flash-wrap { max-width: 34rem; margin: 0 auto; padding: 0 1.25rem; }
.flash { border: 2px solid var(--spot); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .5rem; font-weight: 700; }
.flash-error { background: #FFE1DE; }
.flash-success { background: #E2F6D8; }

/* ---------- thanks / simple pages ---------- */
.simple-page { text-align: center; padding: 5rem 1.25rem; max-width: 36rem; margin: 0 auto; }
.simple-page h1 { font-family: var(--font-display, 'Baloo 2', cursive); font-weight: 800; font-size: 2.4rem; color: var(--red); text-shadow: 2px 2px 0 var(--spot); margin-bottom: 1rem; }
.simple-page p { font-size: 1.1rem; margin-bottom: 1.5rem; }

/* ---------- admin ---------- */
.admin { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem; }
.admin h1 { font-family: var(--font-display, 'Baloo 2', cursive); margin-bottom: 1rem; }
.admin-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.text-button { border: 0; padding: 0; color: #17435C; background: none; text-decoration: underline; cursor: pointer; font: inherit; }
.waiver-missing { color: #9b2018; font-weight: 700; }
.login-card { background: #fff; border: 3px solid var(--spot); border-radius: 20px; padding: 2rem; }
.waiver-page { max-width: 40rem; }
.waiver-form { text-align: left; max-width: 40rem; }
.waiver-form > label { display: block; font-weight: 700; margin: .7rem 0 .3rem; }
.waiver-record { max-width: 48rem; background: #fff; margin-top: 2rem; border: 2px solid var(--spot); }
.waiver-record dl { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem; margin: 1rem 0 2rem; }
.waiver-record dt { font-weight: 800; }
.waiver-document { line-height: 1.6; margin: 1rem 0; white-space: pre-wrap; }
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat { background: #fff; border: 2px solid var(--spot); border-radius: 14px; padding: .8rem 1.2rem; font-weight: 700; }
.pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; text-transform: capitalize; background: #e5ddd4; color: var(--ink); }
.pill-active, .pill-trialing { background: #d8f0d8; color: #1c5c1c; }
.pill-past_due, .pill-unpaid { background: #fbe4c9; color: #8a4b00; }
.pill-canceled, .pill-none { background: #f0d8d8; color: #7a2020; }
.admin table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--spot); border-radius: 8px; font-size: .9rem; }
.admin th, .admin td { padding: .5rem .6rem; border-bottom: 1px solid #e5ddd4; text-align: left; }
.admin th { background: var(--cloud); }
.campaign-form { background: #fff; border: 2px solid var(--spot); border-radius: 14px; padding: 1.25rem; margin: 1.5rem 0; max-width: 34rem; }
.campaign-form label { display: block; font-weight: 700; margin: .6rem 0 .25rem; }
.campaign-form input, .campaign-form textarea, .campaign-form select {
  width: 100%; padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit;
}
.campaign-form button { margin-top: 1rem; }

/* ---------- footer ---------- */
/* Legacy `.admin-link` block kept as a no-op so any downstream tenant that
   still references it doesn't 404 in the console. The link itself has moved
   into the shared footer as `.footer-staff-link`, which every public page
   inherits from base.html. */
.footer { text-align: center; padding: 2rem 1.25rem 2.5rem; color: #17435C; }
.footer-links { display: flex; justify-content: center; gap: .6rem 1.25rem; flex-wrap: wrap; margin: .45rem 0; align-items: baseline; }
.footer-links a { font-weight: 700; }
/* Staff sign in sits at the end of the legal-links row on every public page.
   The subtle vertical separator marks it as a *different kind of thing* from
   the legal links — it goes to an internal app, not a policy — without
   needing a heading. */
.footer-links .footer-staff-link {
  position: relative;
  padding-left: 1rem;
  color: #17435C;
  opacity: .75;
}
.footer-links .footer-staff-link::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: .85rem;
  background: currentColor; opacity: .35;
  transform: translateY(-50%);
}
.footer-links .footer-staff-link:hover { opacity: 1; }
@media (max-width: 540px) {
  .footer-links .footer-staff-link { padding-left: 0; }
  .footer-links .footer-staff-link::before { display: none; }
}
.footer-fine { font-size: .85rem; margin-top: .35rem; }
.footer a { color: inherit; }

/* ---------- legal pages ---------- */
.legal-page { max-width: 52rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) 1.25rem; }
.legal-page h1 { margin-bottom: .25rem; font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.6rem); }
.legal-page h2 { margin: 2rem 0 .5rem; font-family: var(--font-display); font-size: 1.45rem; }
.legal-page p, .legal-page li { line-height: 1.7; }
.legal-page li + li { margin-top: .45rem; }
.legal-updated { color: #5a534f; font-weight: 700; }
.legal-back { display: inline-block; margin-bottom: 1.25rem; font-weight: 800; }
.legal-consent { margin: 0 0 1rem; }

@media (max-width: 700px) { .experience-grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .row { grid-template-columns: 1fr; }
  .site-nav-links > a:not(.site-nav-cta) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ladybug, .bounce-title span { animation: none; }
}
@media print { .no-print, .footer { display: none; } body { background: #fff; } .waiver-record { border: 0; margin: 0; } }

/* ---------- kiosk ---------- */
.kiosk-form { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; margin: 0 auto 1rem; }
.kiosk-form input[type="email"], .kiosk-form input[type="number"] {
  width: 100%; padding: .9rem 1rem; font-size: 1.3rem;
  border: 3px solid var(--spot); border-radius: 14px; text-align: center;
}
.kiosk-form input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.party-label { font-weight: 700; }
.kiosk-alt { margin-top: 1.5rem; }
.kiosk-alt a { color: #17435C; font-weight: 700; }

/* ---------- admin panels ---------- */
.panel-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 1.5rem 0; }
.panel { background: #fff; border: 2px solid var(--spot); border-radius: 14px; padding: 1rem 1.25rem; }
.panel h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.panel .muted, .muted { color: #8a827d; font-weight: 400; font-size: .9rem; }
.win-back-table { table-layout: fixed; }
.win-back-table .win-back-name { width: 22%; }
.win-back-table .win-back-email { width: 50%; }
.win-back-table .win-back-visit { width: 28%; }
.win-back-table th, .win-back-table td { overflow-wrap: anywhere; }
.hero-returning { margin-top: 1rem; font-weight: 700; color: #17435C; }
.hero-returning a { color: var(--red); }

/* tenant logo fallback when no custom SVG is supplied */
.logo-emoji { font-size: 5rem; line-height: 1; display: inline-block; }

/* ---------- admin nav & new admin panels ---------- */
.admin-nav { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.admin-nav a { color: #17435C; font-weight: 700; }
/* Gated features stay visible but dimmed, with a lock — click to see the upsell. */
.admin-nav a.nav-locked { color: var(--muted, #6B6B6B); font-weight: 600; opacity: .8; }
.admin-nav a.nav-locked .lock { font-size: .8em; }
.search-form { display: flex; gap: .5rem; align-items: center; margin: .5rem 0 1rem; flex-wrap: wrap; }
.search-form input { padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit; min-width: 16rem; }
.stacked-form label { display: block; font-weight: 700; margin: .6rem 0 .25rem; }
.stacked-form input:not([type="checkbox"]), .stacked-form textarea, .stacked-form select {
  width: 100%; padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit;
}
.stacked-form button { margin-top: 1rem; }
.stacked-form .check { display: block; font-weight: 400; margin: .5rem 0; }
.wide-panel { max-width: 48rem; margin-bottom: 1.5rem; }
.waiver-preview { white-space: pre-wrap; font-size: .9rem; line-height: 1.5; margin: .5rem 0 1rem; }
.danger-panel { border-color: #9b2018; margin-top: 1.5rem; max-width: 34rem; }
.btn-danger { background: #9b2018; }

/* ---------- front-desk console ---------- */
.fd-summary { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.fd-count { font-size: 1.05rem; }
.fd-count strong { font-size: 1.4rem; font-family: var(--font-display, 'Baloo 2', cursive); color: var(--red); }
.fd-search input { min-width: 20rem; }
.fd-results { margin-bottom: 1.5rem; }
.btn-sm { font-size: .95rem; padding: .45rem 1.1rem; box-shadow: 0 3px 0 var(--spot); }
.btn-sm:hover { box-shadow: 0 5px 0 var(--spot); }

.roster { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.roster-item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid #e5ddd4; flex-wrap: wrap;
}
.roster-item:last-child { border-bottom: 0; }
.roster-main { min-width: 0; }
.roster-name { font-weight: 800; font-size: 1.05rem; color: #17435C; }
.roster-meta { display: flex; align-items: center; gap: .4rem .7rem; flex-wrap: wrap; color: #5a534f; font-size: .88rem; margin-top: .25rem; }
.roster-action { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.fd-checkin { display: flex; align-items: center; gap: .6rem; }
.fd-party { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: #5a534f; }
.fd-party input { width: 3.4rem; padding: .35rem .4rem; border: 2px solid var(--spot); border-radius: 8px; font: inherit; text-align: center; }

.badge {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; border: 2px solid var(--spot);
  background: #fff; white-space: nowrap;
}
.badge-ok       { background: #E2F6D8; }
.badge-warn     { background: #FFE1DE; color: #9b2018; }
.badge-paid     { background: var(--cloud); }
.badge-live     { background: #FFC93C; }
.badge-new      { background: #E1EDFB; color: #17435C; }
.badge-regular  { background: #E2F6D8; color: #1c5c1c; }
.badge-lapsed   { background: #FDECC8; color: #8a4b00; }
.badge-birthday { background: #FCE1EC; color: #9b2060; }

.fd-status-panel { max-width: 34rem; }
.fd-status { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.fd-status-note { margin-bottom: .75rem; }

/* Cashier action bar: search + register side by side, stacking on narrow desks. */
.fd-actionbar { display: flex; gap: .75rem 1rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.fd-actionbar .fd-search { margin: 0; flex: 1 1 22rem; }
.btn-accent { background: var(--sun); color: var(--ink); }
.roster-birthday { margin-top: .3rem; font-weight: 700; color: #9b2060; font-size: .9rem; }
.fd-nomatch { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.fd-birthdays { margin-top: 1.5rem; }

/* Repeatable child-birthday rows (registration + public signup). */
.children-fieldset { border: 2px dashed var(--spot); border-radius: 14px; padding: 1rem; margin-bottom: 1.25rem; }
.children-fieldset legend { font-weight: 800; padding: 0 .35rem; }
.children-list { display: flex; flex-direction: column; gap: .55rem; margin: .25rem 0 .6rem; }
.child-row { display: grid; grid-template-columns: 1fr 10.5rem auto; gap: .5rem; align-items: center; }
.child-row input { width: 100%; padding: .55rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit; }
.child-remove {
  border: 2px solid var(--spot); background: #fff; border-radius: 10px;
  width: 2.4rem; height: 2.4rem; font-size: 1.2rem; line-height: 1; cursor: pointer;
  color: #9b2018; font-weight: 800;
}
.child-remove:hover { background: #FFE1DE; }
.child-add { font-weight: 700; }
@media (max-width: 540px) { .child-row { grid-template-columns: 1fr auto; } }

/* Registration form: reuses the public signup field styles. */
.register-panel { max-width: 40rem; }
.register-form .row, .register-form .field { margin-bottom: 0; }
.register-form .field { margin-bottom: 1rem; }
.register-form .radio-row label { font-weight: 400; }
.checkin-now { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; border: none; padding: 0; margin-bottom: 1rem; }
.checkin-now .check { margin: 0; }

/* Ring-up-a-pass panel on the customer detail page. */
.sell-panel { max-width: 40rem; margin-bottom: 1.5rem; }
.sell-passes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: .5rem 0 .9rem; }
.sell-pass {
  display: flex; flex-direction: column; gap: .1rem; cursor: pointer;
  border: 2px solid var(--spot); border-radius: 12px; padding: .6rem .8rem; position: relative;
}
.sell-pass input { position: absolute; top: .5rem; right: .5rem; accent-color: var(--red); }
.sell-pass:has(input:checked) { background: var(--cloud); box-shadow: 0 3px 0 var(--spot); }
.sell-pass-name { font-weight: 800; color: var(--red); padding-right: 1.2rem; }
.sell-pass-price { font-size: 1.15rem; font-weight: 800; }
.sell-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sell-controls label { font-weight: 700; }
.sell-controls select { padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit; }

/* Waiver re-sign box on the customer detail page. */
.resign-box { background: #FFF6F4; border: 2px solid var(--spot); border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; }
.resign-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.resign-form input[name="signer_name"] { padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit; }
.resign-form .check { margin: 0; }

/* Children panel on the customer detail page. */
.child-list { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; }
.child-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #e5ddd4; flex-wrap: wrap; }
.child-item:last-child { border-bottom: 0; }
.child-info { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.child-add-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.child-add-form input { padding: .5rem .7rem; border: 2px solid var(--spot); border-radius: 10px; font: inherit; }
.child-add-form input[name="child_name"] { flex: 1 1 8rem; min-width: 7rem; }

/* ---------- marketing template gallery ---------- */
.template-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: .5rem 0 1rem;
}
.template-card {
  display: flex; flex-direction: column; gap: .4rem; text-align: left;
  background: #fff; border: 2px solid var(--spot); border-radius: 14px;
  padding: 1rem 1.1rem; cursor: pointer; font: inherit; color: inherit;
  box-shadow: 0 4px 0 var(--spot); transition: transform .12s, box-shadow .12s;
}
.template-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--spot); }
.template-card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--spot); }
.template-card:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; }
.template-name { font-family: var(--font-display, 'Baloo 2', cursive); font-weight: 800; font-size: 1.05rem; color: var(--red); }
.template-channel {
  align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .12rem .5rem; border-radius: 999px; border: 2px solid var(--spot);
}
.channel-email { background: var(--cloud); }
.channel-sms { background: #E2F6D8; }
.template-desc { color: #5a534f; font-size: .88rem; }

/* ---------- event scheduling ---------- */
.event-notice { padding: .8rem 1.25rem; text-align: center; background: #FDECC8; color: #684000; border-bottom: 2px solid var(--spot); }
.hero-secondary { display: block; margin: 1rem auto; color: #17435C; font-weight: 800; }
.pass-unavailable { opacity: .62; cursor: not-allowed; }
.booking-page { max-width: 54rem; margin: 0 auto; padding: 3rem 1.25rem; }
.booking-page h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); }
.event-type-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin: 2rem 0; }
.event-type { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 2px solid var(--spot); border-radius: 16px; padding: 1.25rem; box-shadow: 0 4px 0 var(--spot); }
.event-type h2, .event-type p { margin: 0; }.event-type strong { color: var(--red); font-size: 1.25rem; }
.booking-form { background: #fff; border: 2px solid var(--spot); border-radius: 18px; padding: clamp(1rem,4vw,2rem); }
.availability-picker { min-width: 0; margin: 1rem 0; padding: 0; border: 2px solid var(--spot); border-radius: 14px; overflow: hidden; }
.availability-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.availability-calendar-header { display:flex; align-items:center; justify-content:center; gap:1rem; padding:.75rem; background:#faf7f2; border-bottom:1px solid #d8d0c8; }
.availability-calendar-header h2 { min-width:11rem; margin:0; text-align:center; font-size:1.2rem; }
.availability-weekdays,.availability-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; padding:.45rem .65rem; }
.availability-weekdays { padding-bottom:0; color:#5a534f; text-align:center; font-size:.75rem; font-weight:800; }
.availability-day { justify-self:center; width:100%; max-width:2.9rem; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#dff2df; color:#173f25; font:inherit; font-weight:800; cursor:pointer; }
.availability-day:hover { box-shadow:inset 0 0 0 3px #17435C; }.availability-day.is-selected { color:#fff; background:#17435C; box-shadow:0 0 0 3px #bcdce9; }
.availability-day.is-unavailable { color:#928b86; background:#f2efec; text-decoration:line-through; cursor:not-allowed; }
.availability-key { display:flex; justify-content:center; gap:1rem; margin:.35rem .5rem .6rem; color:#5a534f; font-size:.78rem; }.availability-dot { display:inline-block; width:.7rem; height:.7rem; margin-right:.25rem; border-radius:50%; }.availability-dot.available{background:#7ebc83}.availability-dot.unavailable{background:#d8d3cf}
.availability-picker .native-date { margin:.65rem .75rem 0; }.availability-picker input[type=date] { width:calc(100% - 1.5rem); margin:0 .75rem; }.availability-picker .form-fine { margin:.5rem .75rem .75rem; }
.booking-form .row > div { min-width: 0; }.status-card { margin-top: 3rem; background: #fff; border: 2px solid var(--spot); border-radius: 18px; }
.booking-when { font-size: 1.15rem; font-weight: 800; }.payment-callout { background: var(--cloud); border-radius: 14px; padding: 1rem; margin: 1.5rem 0; }
.booking-intro { margin: .75rem 0 0; line-height: 1.55; }
/* Class enrollment: pricing summary card + scope option cards. */
.enroll-summary { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; background: var(--cloud); border: 2px solid var(--spot); border-radius: 16px; padding: 1.1rem 1.35rem; margin: 1.5rem 0; }
.enroll-summary-price { display: flex; flex-direction: column; gap: .1rem; }
.enroll-summary-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--red); line-height: 1; }
.enroll-summary-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .95rem; }
.enroll-summary-facts li { display: flex; align-items: center; }
.enroll-options { border: none; padding: 0; margin: 1.25rem 0 .25rem; display: grid; gap: .7rem; }
.enroll-options legend { font-weight: 800; padding: 0; margin-bottom: .5rem; float: none; }
.enroll-option { display: flex; align-items: center; gap: .9rem; margin: 0; padding: .9rem 1.1rem; background: #fff; border: 2px solid var(--spot); border-radius: 14px; font-weight: 400; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.enroll-option:hover { transform: translateY(-1px); }
.enroll-option input[type="radio"] { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: var(--red); }
.enroll-option-main { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.enroll-option-name { font-weight: 800; }
.enroll-option-note { color: #5a534f; font-size: .85rem; }
.enroll-option-price { font-weight: 800; font-size: 1.15rem; color: var(--red); white-space: nowrap; }
.enroll-option.is-selected, .enroll-option:has(input:checked) { border-color: var(--spot); box-shadow: 0 0 0 3px var(--sun); }
.enroll-day { margin: .5rem 0 .25rem; }
.enroll-day[hidden] { display: none; }
.schedule-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.month-calendar { margin: 1rem 0 2rem; background: #fff; border: 2px solid var(--spot); border-radius: 14px; overflow: hidden; }
.month-calendar-header { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: .8rem 1rem; border-bottom: 2px solid var(--spot); }
.month-calendar-header h2 { margin: 0; min-width: 11rem; text-align: center; }
.calendar-nav { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--spot); border-radius: 50%; color: inherit; text-decoration: none; font-weight: 800; }
.calendar-nav:hover { background: var(--cloud); }
.calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: #faf7f2; border-bottom: 1px solid #d8d0c8; text-align: center; font-size: .78rem; font-weight: 800; }
.calendar-weekdays span { padding: .45rem .2rem; }
.calendar-day { min-height: 7rem; padding: .45rem; border-right: 1px solid #d8d0c8; border-bottom: 1px solid #d8d0c8; min-width: 0; }
.calendar-week .calendar-day:last-child { border-right: 0; }
.calendar-week:last-child .calendar-day { border-bottom: 0; }
.calendar-day > time { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; font-weight: 800; font-size: .86rem; }
.calendar-day.outside-month { background: #fafafa; color: #8a827d; }
.calendar-day.calendar-today > time { color: #fff; background: #17435C; border-radius: 50%; }
.calendar-day-events { display: grid; gap: .25rem; margin-top: .3rem; }
.calendar-chip { display: block; overflow: hidden; padding: .25rem .35rem; border-radius: 5px; color: #17232b; background: #D8F0D8; text-decoration: none; font-size: .72rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; }
.calendar-chip span { font-weight: 400; }
.calendar-chip.status-pending { background: #FDECC8; }.calendar-chip.status-declined,.calendar-chip.status-cancelled { background: #eee; opacity: .65; }.calendar-chip.status-blackout { background: #FFE1DE; color: #7c211b; }
.calendar-legend { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; padding: .55rem .8rem; margin: 0; font-size: .78rem; }
.legend-dot { width: .7rem; height: .7rem; border-radius: 3px; margin-left: .55rem; }.legend-dot.confirmed { background: #D8F0D8; }.legend-dot.pending { background: #FDECC8; }.legend-dot.blackout { background: #FFE1DE; }
.calendar-list { display: grid; gap: .6rem; margin: 1rem 0 2rem; }
.calendar-event { display: grid; grid-template-columns: minmax(170px,1.2fr) 1fr 1fr auto; gap: .75rem; align-items: center; padding: .85rem 1rem; color: inherit; text-decoration: none; background:#fff; border:2px solid var(--spot); border-left: 7px solid #17435C; border-radius: 12px; }
.calendar-event.status-pending { border-left-color:#D18A00; }.calendar-event.status-declined,.calendar-event.status-cancelled { opacity:.58; border-left-color:#777; }
.calendar-date { font-weight: 800; }.empty-state { padding: 2rem; text-align:center; background:#fff; border:2px dashed var(--spot); border-radius:14px; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.7rem; }.booking-detail dl { display:grid; grid-template-columns:8rem 1fr; gap:.7rem; }.booking-detail dt { font-weight:800; }.booking-detail dd { margin:0; }.booking-actions { display:flex; gap:.7rem; }
.pill-pending { background:#FDECC8;color:#684000 }.pill-confirmed { background:#D8F0D8;color:#1c5c1c }.pill-declined,.pill-cancelled { background:#eee;color:#555 }
.blackout-list { list-style:none; padding:0; margin:.75rem 0 0; display:grid; gap:.5rem; }
.blackout-list li { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.6rem .75rem; background:#faf7f2; border:1px solid var(--spot); border-radius:10px; font-size:.92rem; }
.blackout-list form { margin:0; }
.cancel-event { margin:1rem 0; }
@media(max-width:700px){.calendar-event{grid-template-columns:1fr}.booking-detail dl{grid-template-columns:1fr}.booking-detail dd{margin-bottom:.5rem}}

/* Staff accounts, activity log & account page (staff/audit feature). */
.admin-nav a.nav-whoami { margin-left:auto; color: var(--muted, #6B6B6B); font-weight:600; }
.row-inactive { opacity:.55; }
.staff-actions { display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.staff-actions form { margin:0; }
.staff-actions details summary { cursor:pointer; color:#17435C; font-weight:700; }
.inline-form { margin:0; }
.filter-form { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.75rem; }

/* Recurring-membership status (subscription lifecycle feature). */
.sub-status { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.82rem; font-weight:700; }
.sub-active, .sub-trialing { background:#e5f6ec; color:#1c7a41; }
.sub-past_due, .sub-unpaid { background:#fde7e7; color:#b03030; }
.sub-canceled, .sub-paused, .sub-incomplete { background:#f0ede8; color:#7a736c; }
.stat-warn { background:#fde7e7; color:#b03030; }

/* Membership controls (Phase 2). */
.grant-fields { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; margin:.5rem 0; }
.grant-fields label { display:flex; flex-direction:column; gap:.25rem; font-weight:700; font-size:.9rem; }
.sub-controls form { display:inline; margin:0 .4rem 0 0; }

/* Reports dashboard (Phase 2). */
.report-tiles { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.bar-row { display:grid; grid-template-columns:8rem 1fr auto; align-items:center; gap:.6rem; margin:.35rem 0; }
.bar-label { font-weight:700; font-size:.9rem; }
.bar { background:#f0ede8; border-radius:6px; height:1rem; overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--accent); min-width:2px; }
.bar-value { font-size:.85rem; color:#5a534f; white-space:nowrap; }

/* QR membership card (public /card page + admin scan) */
.card-page { max-width: 26rem; margin: 0 auto; padding: clamp(1.5rem, 6vw, 3rem) 1.25rem; }
.membership-card { background: #fff; border: 2px solid var(--spot); border-radius: 18px; padding: 1.5rem 1.5rem 1.75rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.card-brand { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #8a827d; margin: 0; }
.card-name { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.4rem); margin: .25rem 0 .1rem; }
.card-tier { font-weight: 700; margin: 0 0 1rem; }
.card-status { border-radius: 10px; padding: .55rem .75rem; font-weight: 700; margin-bottom: 1.25rem; }
.card-status-active { background: #e7f6ec; color: #1c7a3f; }
.card-status-expired { background: #fdecec; color: #b02a2a; }
.card-status-none { background: #f4f1ee; color: #6b635e; }
.card-qr svg { width: min(15rem, 70vw); height: auto; border-radius: 8px; }
.card-qr .muted { margin-top: .5rem; }
.card-warn { color: #b02a2a; font-weight: 700; }
.card-fine { color: #8a827d; font-size: .8rem; margin-top: 1.25rem; }
.card-link-copy code { word-break: break-all; font-size: .8rem; }
.admin-app code { overflow-wrap: anywhere; }
.pass-state { font-weight: 700; border-radius: 10px; padding: .55rem .75rem; }
.pass-state-active { background: #e7f6ec; color: #1c7a3f; }
.pass-state-expired { background: #fdecec; color: #b02a2a; }
.pass-state-none { background: #f4f1ee; color: #6b635e; }
.button-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }

/* Onboarding checklist (dashboard) */
.onboarding-panel { border-color: var(--accent); margin-bottom: 1rem; }
.onboarding-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.onboarding-bar { height: 8px; background: #eee6df; border-radius: 6px; overflow: hidden; margin: .5rem 0 1rem; }
.onboarding-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.onboarding-step { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; background: #faf7f4; }
.onboarding-step.is-done { opacity: .7; }
.onboarding-check { font-size: 1.2rem; width: 1.4rem; text-align: center; }
.onboarding-step.is-done .onboarding-check { color: #1c7a3f; }
.onboarding-text { flex: 1; display: flex; flex-direction: column; }
.onboarding-text .muted { font-size: .85rem; }
.onboarding-step.is-done .onboarding-text strong { text-decoration: line-through; }
.onboarding-restore { margin: 0 0 1rem; }

/* Household member-add candidate list */
.candidate-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.candidate-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .7rem; border-radius: 8px; background: #faf7f4; }

/* Classes (public list) */
.class-list { display: grid; gap: 1rem; margin-top: 1rem; }
.class-card { display: block; background: #fff; border: 2px solid var(--spot); border-radius: 14px; padding: 1rem 1.25rem; color: inherit; text-decoration: none; }
.class-card:hover { border-color: var(--accent); }
.class-card h2 { margin: 0 0 .25rem; }
.class-when { font-weight: 700; margin: 0 0 .5rem; }
.packages-heading { margin-top: 1.5rem; }
.package-inclusions { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.check-inline { display: flex; align-items: center; gap: .4rem; }

/* Front-desk location switcher */
.fd-location { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.fd-location label { font-size: .85rem; color: #8a827d; }
.row-muted { opacity: .55; }

/* Topbar location switcher (shown on every admin page when locations exist) */
.topbar-location { display: inline-flex; align-items: center; }
.topbar-location select {
  border: 1px solid var(--app-border, #d9d3cc);
  background: var(--app-bg, #fff);
  border-radius: 8px;
  padding: .35rem .5rem;
  font-size: .9rem;
  max-width: 12rem;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Locations page */
.locations-table td { vertical-align: top; }
.locations-table .row-actions { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.location-editor td { background: rgba(0,0,0,0.02); }
.location-editor details > summary {
  cursor: pointer; padding: .4rem 0; font-weight: 600; color: #4a4038;
}
.loc-swatch {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 3px;
  vertical-align: middle; margin-right: .35rem;
}
.stacked-form { display: flex; flex-direction: column; gap: .6rem; }
.stacked-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: #6b6259; }
.stacked-form input, .stacked-form textarea, .stacked-form select {
  padding: .4rem .55rem; border: 1px solid var(--app-border, #d9d3cc); border-radius: 8px;
  font: inherit;
}
.stacked-form .form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .6rem;
}
.stacked-form .form-actions { display: flex; gap: .8rem; align-items: center; }

/* ============================================================= Loyalty & Reviews */

/* Stat cards (loyalty & reviews overviews) reuse the .stat-row flex container. */
.stat-card { flex: 1 1 10rem; background: #fff; border: 2px solid var(--spot); border-radius: 14px; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.stat-num { font-family: var(--font-display, 'Baloo 2', cursive); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .8rem; color: #8a827d; font-weight: 700; }

/* Two-up panel layout */
.admin-columns { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: 1.5rem 0; }
.admin-columns > .panel { margin: 0; }

.mini-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.mini-table th, .mini-table td { padding: .35rem .5rem; border-bottom: 1px solid #e5ddd4; text-align: left; }
.mini-table input { width: 100%; padding: .3rem .4rem; border: 1.5px solid var(--spot); border-radius: 8px; font: inherit; }

.subtle-input { display: block; width: 100%; margin-top: .3rem; padding: .3rem .4rem; border: 1.5px solid #d8cfc6; border-radius: 8px; font: inherit; font-size: .82rem; color: #6b6b6b; }
.num-input { width: 5rem; padding: .3rem .4rem; border: 1.5px solid var(--spot); border-radius: 8px; font: inherit; }

.btn-small { font-size: .82rem; padding: .35rem .9rem; box-shadow: 0 3px 0 var(--spot); }
.btn-small:hover { box-shadow: 0 5px 0 var(--spot); }

.nav-badge { display: inline-block; min-width: 1.3rem; text-align: center; background: #FFC93C; color: var(--ink); border-radius: 999px; padding: 0 .35rem; font-size: .72rem; font-weight: 800; }

.pts-plus { color: #1c5c1c; font-weight: 800; }
.pts-minus { color: #9b2018; font-weight: 800; }

.loyalty-actions { align-items: start; }
.loyalty-actions .stacked-form { background: var(--cloud); border: 2px solid var(--spot); border-radius: 12px; padding: .9rem 1rem; }

/* Customer-facing loyalty block on the membership card */
.card-loyalty { margin: 1rem 0; padding: 1rem; border-radius: 14px; background: rgba(255,255,255,.14); text-align: center; }
.card-loyalty-head { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; opacity: .85; margin: 0; }
.card-points { font-size: 1.6rem; margin: .15rem 0; }
.card-tier-badge { font-size: .82rem; opacity: .9; margin: 0; }
.card-rewards { margin-top: .7rem; text-align: left; }
.card-rewards summary { cursor: pointer; font-weight: 700; }
.card-rewards ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.card-rewards li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .88rem; }

/* Star ratings */
.stars { color: #f5a623; letter-spacing: .08em; font-size: 1rem; }

/* Public reviews strip / page */
.reviews-strip { max-width: 68rem; margin: 2.5rem auto; padding: 0 1.25rem; }
.reviews-summary { font-size: 1.05rem; }
.reviews-summary .stars { font-size: 1.2rem; vertical-align: middle; }
.reviews-page { max-width: 60rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem; }
.reviews-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.25rem; }
.review-card { background: #fff; border: 2px solid var(--spot); border-radius: 16px; padding: 1.1rem 1.25rem; box-shadow: 0 4px 0 var(--spot); }
.review-card-head { margin-bottom: .4rem; }
.review-card-title { margin: 0 0 .35rem; font-size: 1.05rem; }
.review-card-body { margin: 0 0 .6rem; line-height: 1.55; }
.review-card-author { margin: 0; font-weight: 700; font-size: .9rem; }
.review-card-response { margin-top: .6rem; padding: .55rem .7rem; background: var(--cloud); border-radius: 10px; font-size: .85rem; }
.verified-check { color: #1c5c1c; font-weight: 800; }
.reviews-cta { text-align: center; margin-top: 1.5rem; font-weight: 700; }

/* Star picker on the submission form */
.rating-field { border: none; padding: 0; margin: 0 0 .5rem; }
.star-picker { display: inline-flex; flex-direction: row-reverse; gap: .1rem; font-size: 2rem; }
.star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-picker label { color: #d8cfc6; cursor: pointer; transition: color .1s; }
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label { color: #f5a623; }
.star-picker input:focus-visible + label { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Admin review moderation rows */
.review-admin { border: 1.5px solid #e5ddd4; border-radius: 12px; padding: .8rem 1rem; margin-bottom: .8rem; }
.review-admin-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; }
.review-admin-title { font-weight: 800; margin: .4rem 0 .2rem; }
.review-admin-body { margin: .2rem 0 .5rem; line-height: 1.5; }
.review-admin-response { background: var(--cloud); border-radius: 8px; padding: .4rem .6rem; font-size: .85rem; margin: .3rem 0; }
.review-admin-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.review-admin-actions .inline-form { display: inline; }
.reply-details summary { cursor: pointer; font-weight: 700; font-size: .85rem; }
.reply-details textarea { width: 100%; border: 1.5px solid var(--spot); border-radius: 8px; padding: .4rem .5rem; font: inherit; margin-top: .4rem; }

/* Honeypot: kept in the DOM (bots fill it) but off-screen and out of the tab
   order for people and assistive tech. Real submissions leave it empty. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- appointments
   Staff/resource appointment booking. Reuses the private-event calendar and
   form primitives; these add the service catalog cards, the payment/status
   pills, and the admin availability grid. */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 2rem 0; }
.service-card { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 2px solid var(--spot); border-radius: 16px; padding: 1.25rem; box-shadow: 0 4px 0 var(--spot); }
.service-card h2 { margin: 0; }
.service-card p { margin: 0; }
.service-card .btn { margin-top: auto; }
.service-meta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.service-meta strong { color: var(--red); font-size: 1.2rem; }
.service-duration { background: var(--cloud); border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; font-weight: 700; }
.service-deposit { color: var(--muted); font-size: .85rem; }
.service-providers { color: var(--muted); font-size: .9rem; }

/* Extra status/payment pill colours (base .pill handles anything unlisted). */
.pill-completed { background: #D8E7FB; color: #17435C; }
.pill-no_show { background: #FFE1DE; color: #9b2018; }
.pill-paid { background: #d8f0d8; color: #1c5c1c; }
.pill-deposit_paid { background: #FDECC8; color: #684000; }
.pill-not_required { background: #e5ddd4; color: var(--ink); }
.calendar-chip.status-completed { background: #D8E7FB; }
.calendar-chip.status-no_show { background: #FFE1DE; color: #7c211b; }

/* Definition-list detail blocks on the appointment pages. */
.detail-list { display: grid; gap: .5rem; margin: 1rem 0; }
.detail-list > div { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; }
.detail-list dt { color: var(--muted); font-weight: 700; margin: 0; }
.detail-list dd { margin: 0; }

/* Rows of small action buttons/forms on the appointment detail page. */
.appt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.appt-actions form { margin: 0; }

/* Provider availability editor. */
.availability-table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.availability-table th { text-align: left; color: var(--muted); font-size: .85rem; }
.availability-table td { padding: .2rem .3rem .2rem 0; }
.availability-table input[type="time"], .availability-table select { width: 100%; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .35rem .75rem; margin: .35rem 0 .75rem; }

@media (max-width: 480px) {
  .detail-list > div { grid-template-columns: 1fr; gap: .1rem; }
}


/* ==========================================================================
   ADMIN SHELL
   The new sidebar + top-bar layout used by every admin page. Scoped under
   `body.admin-app` so it never leaks into public pages, and every color pulls
   from the design tokens defined at the top of the file (light and dark
   themes swap by editing those tokens, not these components).
   ========================================================================== */

body.admin-app {
  background: var(--app-bg);
  color: var(--app-ink);
  min-height: 100vh;
}

.admin-app .skip-link {
  position: absolute; left: -9999px; top: auto; z-index: 100;
  background: var(--app-surface); color: var(--app-ink);
  border: 2px solid var(--app-border-strong); border-radius: var(--app-radius);
  padding: .5rem .75rem; font-weight: 700;
}
.admin-app .skip-link:focus {
  left: 1rem; top: 1rem;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--app-sidebar-width) 1fr;
  transition: grid-template-columns .18s ease;
}
.app-shell[data-collapsed="true"] {
  grid-template-columns: var(--app-sidebar-collapsed-width) 1fr;
}

/* ---------- sidebar ----------------------------------------------- */

.app-sidebar {
  background: var(--app-sidebar-bg);
  color: var(--app-sidebar-ink);
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .04);
}

.sidebar-brand {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.sidebar-brand-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .55rem;
  color: var(--app-sidebar-active-ink);
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800;
  text-decoration: none;
}
.sidebar-brand-mark {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--app-sidebar-accent), rgba(255,255,255,.08));
  color: #fff;
  font-size: 1.05rem; line-height: 1;
  flex: none;
}
.sidebar-brand-name {
  font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-collapse {
  border: 0; background: transparent; color: var(--app-sidebar-muted);
  cursor: pointer; padding: .25rem .5rem; border-radius: 6px;
  font-size: 1.1rem; line-height: 1;
}
.sidebar-collapse:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-ink); }
.app-shell[data-collapsed="true"] .sidebar-collapse span { transform: rotate(180deg); display: inline-block; }

.sidebar-nav {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: .5rem .5rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.sidebar-group {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.sidebar-group:first-of-type { border-top: 0; margin-top: .2rem; padding-top: 0; }
.sidebar-group-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--app-sidebar-muted); font-weight: 800;
  padding: .35rem .75rem .25rem;
}

.sidebar-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem;
  color: var(--app-sidebar-ink); text-decoration: none;
  border-radius: 8px;
  font-size: .93rem; font-weight: 600;
  line-height: 1.15;
  position: relative;
}
.sidebar-link:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-active-ink); }
.sidebar-link.is-active {
  background: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-ink);
}
.sidebar-link.is-active::before {
  content: "";
  position: absolute; left: -.5rem; top: 25%; bottom: 25%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--app-sidebar-accent);
}
.sidebar-icon {
  flex: none;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  font-size: 1rem;
  color: var(--app-sidebar-muted);
}
.sidebar-link.is-active .sidebar-icon,
.sidebar-link:hover .sidebar-icon { color: var(--app-sidebar-active-ink); }
.sidebar-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-badge {
  display: inline-block; min-width: 1.2rem;
  padding: 0 .35rem; border-radius: 999px;
  background: var(--app-sidebar-accent); color: #fff;
  font-size: .68rem; font-weight: 800; text-align: center;
  line-height: 1.3rem;
}

/* Plan-locked module: still visible so the owner can find and upgrade it,
   but dimmed and marked so it never reads as an equal option to the rest. */
.sidebar-link.nav-locked { color: var(--app-sidebar-muted); font-weight: 500; }
.sidebar-link.nav-locked .sidebar-icon { color: var(--app-sidebar-muted); }
.sidebar-link.nav-locked .lock { font-size: .8em; margin-left: auto; opacity: .8; }
.sidebar-link.nav-locked:hover { color: var(--app-sidebar-ink); background: var(--app-sidebar-hover); }
.sidebar-link.nav-locked:hover .lock { opacity: 1; }

.sidebar-foot {
  padding: .5rem .75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.sidebar-view-site {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--app-sidebar-muted); text-decoration: none;
  font-size: .82rem; font-weight: 700;
  padding: .35rem .5rem; border-radius: 6px;
}
.sidebar-view-site:hover { color: var(--app-sidebar-ink); background: var(--app-sidebar-hover); }

/* Collapsed state: hide labels/section headings, center the icons. */
.app-shell[data-collapsed="true"] .sidebar-label,
.app-shell[data-collapsed="true"] .sidebar-group-label,
.app-shell[data-collapsed="true"] .sidebar-brand-name,
.app-shell[data-collapsed="true"] .sidebar-badge,
.app-shell[data-collapsed="true"] .sidebar-view-site span { display: none; }
.app-shell[data-collapsed="true"] .sidebar-link { justify-content: center; padding: .55rem .25rem; }
.app-shell[data-collapsed="true"] .sidebar-brand-link { justify-content: center; }

/* ---------- top bar ---------------------------------------------- */

.app-main-wrap {
  min-width: 0;
  display: flex; flex-direction: column;
}

.app-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  min-height: var(--app-topbar-height);
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.25rem;
}
.topbar-nav-toggle {
  display: none;
  border: 0; background: transparent;
  color: var(--app-ink); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: .35rem .5rem; border-radius: 6px;
}
.topbar-nav-toggle:hover { background: var(--app-surface-2); }

.topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar-eyebrow { font-size: .72rem; color: var(--app-ink-muted); font-weight: 700; letter-spacing: .04em; }
.topbar-heading {
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800; font-size: 1.2rem; margin: 0;
  color: var(--app-ink);
  text-transform: capitalize;
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.topbar-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.topbar-whoami {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .6rem .3rem .35rem;
  border-radius: 999px;
  color: var(--app-ink); text-decoration: none;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  font-size: .85rem;
}
.topbar-whoami:hover { background: var(--app-bg); border-color: var(--app-border-strong); }
.whoami-avatar {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--app-sidebar-accent); color: #fff;
  font-weight: 800; font-size: .8rem;
}
.whoami-meta { display: flex; flex-direction: column; line-height: 1.1; }
.whoami-name { font-weight: 700; }
.whoami-role { font-size: .72rem; color: var(--app-ink-muted); }

.topbar-logout { margin: 0; }
.topbar-logout-btn {
  border: 1px solid var(--app-border);
  background: transparent; color: var(--app-ink-soft);
  border-radius: 999px; padding: .35rem .8rem;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.topbar-logout-btn:hover { background: var(--app-surface-2); color: var(--app-ink); }

/* Full-width flash banners under the top bar. */
.admin-app .banner-flash {
  margin: .5rem 1.25rem 0;
  border-radius: var(--app-radius);
  border-width: 1px;
}

/* ---------- main region ------------------------------------------ */

.app-main {
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
  flex: 1; min-width: 0;
}
.admin-app .admin-shell-body {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0;
}

/* Refresh a handful of legacy panel/table primitives so they harmonize with
   the tokens instead of showing as raw white cards with a hard black border.
   The old classes stay intact; we just tighten their look inside the shell. */
.admin-app .panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  padding: 1.1rem 1.25rem;
}
.admin-app .panel h2 { font-family: var(--font-display); font-weight: 800; }
.admin-app .stat, .admin-app .stat-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}
.admin-app .stat-num { color: var(--app-ink); }
.admin-app .stat-label { color: var(--app-ink-muted); }
.admin-app table {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  overflow: hidden;
}
.admin-app th { background: var(--app-surface-2); color: var(--app-ink-soft); font-weight: 800; }
.admin-app th, .admin-app td { border-bottom: 1px solid var(--app-border); }

.admin-app .admin h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--app-ink);
}
.admin-app .admin-heading { display: none; }  /* legacy heading — shell provides its own */

/* Flash messages that live in the .admin body (pre-shell markup). */
.admin-app .admin > .flash { margin-bottom: .75rem; border-radius: var(--app-radius); }

/* ---------- modules page ----------------------------------------- */

.modules-form .modules-group {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1rem 1.25rem 1.1rem;
  background: var(--app-surface);
  margin: 1rem 0;
}
.modules-form legend {
  font-weight: 800; color: var(--app-ink);
  padding: 0 .35rem;
  font-family: var(--font-display);
}
.modules-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: .5rem;
}
.module-card {
  display: flex; align-items: flex-start; gap: .65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: .8rem .9rem;
  background: var(--app-surface-2);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.module-card:hover { border-color: var(--app-border-strong); background: var(--app-surface); }
.module-card input {
  margin: .15rem 0 0;
  width: 1.1rem; height: 1.1rem;
  accent-color: var(--accent);
  flex: none;
}
.module-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 107, 230, .15);
  background: var(--app-surface);
}
.module-card-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.module-card-name { font-weight: 700; color: var(--app-ink); }
.module-card-desc { font-size: .82rem; color: var(--app-ink-muted); line-height: 1.35; }
.module-card-tag {
  align-self: flex-start; margin-top: .35rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #8a4b00; background: #FDECC8;
  border-radius: 999px; padding: .1rem .5rem;
}
.module-card.is-locked { opacity: .7; cursor: not-allowed; }
.module-card.is-locked:hover { border-color: var(--app-border); background: var(--app-surface-2); }
.modules-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* ---------- responsive: sidebar becomes an overlay on narrow screens */

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(18rem, 82vw);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 40;
    box-shadow: var(--app-shadow-lg);
  }
  .app-shell[data-mobile-open="true"] .app-sidebar { transform: translateX(0); }
  .app-shell[data-mobile-open="true"]::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 30;
  }
  .topbar-nav-toggle { display: inline-flex; }
  .sidebar-collapse { display: none; }
}

@media (max-width: 540px) {
  .app-main { padding: 1rem .75rem 2.5rem; }
  .app-topbar { padding: .55rem .8rem; }
  .whoami-meta { display: none; }
  .topbar-whoami { padding: .3rem; }
  .topbar-logout-btn { padding: .3rem .55rem; }
}

/* Small buttons re-styled inside the shell — they lose the "chunky drop shadow"
   look so the admin feels closer to a modern app dashboard while the public
   site keeps its playful button treatment. */
.admin-app .btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
  font-family: var(--font-body, inherit);
  font-weight: 700;
  padding: .55rem 1.1rem;
  font-size: .95rem;
  transition: filter .12s, transform .06s, box-shadow .12s;
}
.admin-app .btn:hover { filter: brightness(1.05); transform: none; box-shadow: var(--app-shadow); }
.admin-app .btn:active { transform: translateY(1px); box-shadow: var(--app-shadow-sm); }
.admin-app .btn-danger { background: #b02a2a; color: #fff; }
.admin-app .btn-accent { background: var(--sun, var(--accent)); color: var(--app-ink); }
.admin-app .btn-small, .admin-app .btn-sm { padding: .35rem .8rem; font-size: .82rem; box-shadow: none; }
.admin-app .text-button { color: var(--app-ink-soft); }
.admin-app .text-button:hover { color: var(--app-ink); }


/* ==========================================================================
   AUTH PAGES — staff sign-in and signed-out landing
   Two-column card: brand column on the left, form column on the right.
   Collapses to a single column on narrow screens. The whole page paints on
   the app-shell surface tokens so it feels like part of the admin app the
   user is about to enter, not the public storefront.
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(46, 107, 230, .12), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(46, 107, 230, .10), transparent 60%),
    var(--app-bg, #F5F6F8);
  color: var(--app-ink, #14181F);
}
.auth-page .footer { display: none; }  /* auth pages own their own footer/spacing */

.auth-card {
  width: 100%;
  max-width: 60rem;
  min-height: 32rem;
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #E5E7EB);
  border-radius: 20px;
  box-shadow: var(--app-shadow-lg, 0 20px 60px rgba(15, 23, 42, .12));
  overflow: hidden;
}
.auth-card.auth-card-solo { grid-template-columns: 1fr; max-width: 30rem; min-height: 0; text-align: center; padding: 2.25rem 2rem; }

/* ---- brand column -------------------------------------------------- */

.auth-brand {
  position: relative;
  padding: 2.5rem 2rem;
  color: #fff;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, var(--accent, #2E6BE6) 0%, #111827 100%);
  display: flex; align-items: center;
}
.auth-brand-inner { display: flex; flex-direction: column; gap: .55rem; max-width: 22rem; }
.auth-mark {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  font-size: 1.6rem; line-height: 1;
  margin-bottom: 1.25rem;
}
.auth-card-solo .auth-mark {
  background: linear-gradient(135deg, var(--accent, #2E6BE6), #1e3a8a);
  color: #fff; margin: 0 auto 1rem;
}
.auth-brand-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; opacity: .8; margin: 0; }
.auth-brand-heading {
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0; line-height: 1.15;
}
.auth-brand-blurb { opacity: .82; line-height: 1.5; margin: .5rem 0 0; }
.auth-brand-facts {
  list-style: none; padding: 0; margin: 1.75rem 0 0;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .9rem; opacity: .88;
}
.auth-brand-facts li { display: flex; align-items: center; gap: .6rem; }
.auth-brand-facts span {
  display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: rgba(255,255,255,.18);
  font-size: .7rem; font-weight: 800;
}

/* ---- form column --------------------------------------------------- */

.auth-form-region { padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form-head { display: flex; flex-direction: column; gap: .35rem; }
.auth-form-head h1 {
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--app-ink, #14181F);
  margin: 0; line-height: 1.15;
}
.auth-lede { margin: 0; color: var(--app-ink-soft, #4B5563); line-height: 1.5; }
.auth-card-solo .auth-lede { color: var(--app-ink-muted, #6B7280); }

.auth-flash { margin: 0; border-radius: 10px; border: 1px solid var(--app-border, #E5E7EB); }
.flash-error.auth-flash { background: #FEE2E2; border-color: #FCA5A5; color: #7F1D1D; }
.flash-success.auth-flash { background: #DCFCE7; border-color: #86EFAC; color: #14532D; }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { display: flex; flex-direction: column; gap: .4rem; }
.auth-field-row { display: flex; align-items: baseline; justify-content: space-between; }
.auth-field label {
  font-weight: 700; font-size: .88rem;
  color: var(--app-ink, #14181F);
}
.auth-field input,
.auth-otp-input {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--app-border-strong, #D1D5DB);
  border-radius: 10px;
  font: inherit;
  background: var(--app-surface, #fff);
  color: var(--app-ink, #14181F);
  transition: border-color .12s, box-shadow .12s;
}
.auth-field input::placeholder { color: var(--app-ink-muted, #6B7280); }
.auth-field input:focus,
.auth-otp-input:focus {
  outline: none;
  border-color: var(--accent, #2E6BE6);
  box-shadow: 0 0 0 3px rgba(46, 107, 230, .18);
}
.auth-otp-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  letter-spacing: .35em;
  text-align: center;
}

/* Password field with show/hide affordance. Absolute-positioned button sits
   inside the input's padding, so the value stays fully clickable/readable. */
.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-right: 4rem; }
.auth-password-toggle {
  position: absolute; top: 50%; right: .35rem;
  transform: translateY(-50%);
  border: 0; background: transparent;
  color: var(--app-ink-muted, #6B7280);
  padding: .35rem .7rem;
  font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; border-radius: 6px;
}
.auth-password-toggle:hover { color: var(--app-ink, #14181F); background: var(--app-surface-2, #F5F6F8); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--accent, #2E6BE6); outline-offset: 2px; }

.auth-submit {
  margin-top: .35rem;
  width: 100%;
  background: var(--accent, #2E6BE6);
  color: var(--accent-ink, #fff);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: .8rem 1.1rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  transition: filter .12s, box-shadow .12s, transform .06s;
}
.auth-submit:hover { filter: brightness(1.05); box-shadow: 0 6px 20px rgba(46, 107, 230, .28); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:focus-visible { outline: 3px solid rgba(46, 107, 230, .35); outline-offset: 2px; }

.auth-hint { color: var(--app-ink-muted, #6B7280); font-size: .82rem; margin: 0; line-height: 1.4; }
.auth-footnote { margin: .35rem 0 0; font-size: .88rem; }
.auth-footnote a { color: var(--app-ink-soft, #4B5563); text-decoration: none; font-weight: 600; }
.auth-footnote a:hover { color: var(--app-ink, #14181F); text-decoration: underline; }

/* The shared-password disclosure — quiet by default, only expands when the
   caller actually needs the fallback path. */
.auth-alt {
  border-top: 1px dashed var(--app-border, #E5E7EB);
  padding-top: .85rem;
  margin-top: .25rem;
}
.auth-alt summary {
  cursor: pointer; list-style: none;
  color: var(--app-ink-soft, #4B5563);
  font-size: .85rem; font-weight: 600;
}
.auth-alt summary::-webkit-details-marker { display: none; }
.auth-alt summary::before { content: "▸ "; margin-right: .15rem; }
.auth-alt[open] summary::before { content: "▾ "; }
.auth-alt p { margin: .5rem 0 0; }

.auth-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.25rem;
}
.auth-actions .btn { min-width: 10rem; }
.auth-actions .text-button { color: var(--app-ink-soft, #4B5563); }
.auth-actions .text-button:hover { color: var(--app-ink, #14181F); }

/* Solo card (signed-out landing): render on a single column, centered. */
.auth-card-solo h1 {
  font-family: var(--font-display, 'Baloo 2', cursive);
  font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.1rem);
  margin: 0 0 .35rem;
  color: var(--app-ink, #14181F);
}

/* Narrow layouts: brand column tucks above the form. */
@media (max-width: 780px) {
  .auth-card { grid-template-columns: 1fr; max-width: 32rem; min-height: 0; }
  .auth-brand { padding: 1.75rem 1.75rem 1.5rem; }
  .auth-brand-inner { max-width: none; }
  .auth-brand-facts { display: none; }
  .auth-brand-heading { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .auth-page { padding: 0; }
  .auth-card { border-radius: 0; border: 0; min-height: 100vh; box-shadow: none; }
  .auth-brand { padding: 1.5rem 1.25rem 1rem; }
  .auth-form-region { padding: 1.5rem 1.25rem; }
}

/* ---------- POS register ---------- */
/* Two-column till: the catalog on the left, the running ticket (customer,
   cart, totals, payment, charge button) on the right — sticky on desktop so
   the total and Charge button never scroll away. Stacks on narrow screens. */
.pos-warn { border-color: #9b2018; background: #FFF3F1; }
[data-pos-form] [hidden], .pos-status [hidden], .confirm-dialog [hidden] { display: none !important; }

.pos-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.status-chip { display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: 999px; font-size: .85rem;
  background: var(--app-surface, #fff); border: 1px solid var(--app-border, #E5E7EB);
  color: var(--app-ink-soft, #4B5563); }
.status-chip-ok { background: #E7F7EC; border-color: #B7E1C3; color: #1c5c1c; }
.status-chip-warn { background: #FFF4E5; border-color: #F5D39B; color: #8a4b00; }
.status-chip a { color: inherit; font-weight: 700; }

.pos-help { margin-left: auto; font-size: .85rem; position: relative; }
.pos-help summary { cursor: pointer; font-weight: 700; color: var(--app-ink-soft, #4B5563);
  list-style: none; padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--app-border, #E5E7EB); background: var(--app-surface, #fff); }
.pos-help summary::-webkit-details-marker { display: none; }
.pos-help summary::before { content: "? "; font-weight: 800; }
.pos-help[open] .pos-help-steps { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
  width: min(26rem, 90vw); margin: 0; padding: .9rem 1rem .9rem 2rem;
  background: var(--app-surface, #fff); border: 1px solid var(--app-border, #E5E7EB);
  border-radius: var(--app-radius, 10px); box-shadow: var(--app-shadow-lg); }
.pos-help-steps li { margin: .35rem 0; }

.pos-layout { display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); margin-bottom: 1rem; }
.pos-ticket { position: sticky; top: calc(var(--app-topbar-height, 3.5rem) + .75rem);
  display: flex; flex-direction: column; gap: .9rem;
  max-height: calc(100vh - var(--app-topbar-height, 3.5rem) - 1.5rem); overflow-y: auto; }
.pos-label { display: block; font-size: .8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--app-ink-muted, #6B7280); margin: 0 0 .35rem; padding: 0; }
.pos-fine { font-size: .82rem; margin: .35rem 0 0; }
.pos-form input[type="search"], .pos-form input[type="number"], .pos-form input:not([type]),
.pos-form input[type="text"] {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--app-border-strong, #D1D5DB);
  border-radius: var(--app-radius-sm, 6px); background: var(--app-surface, #fff); color: inherit; }
.pos-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Catalog */
.pos-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pos-catalog-head h2 { margin: 0; }
.pos-add-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.pos-filter { margin: .75rem 0; display: flex; flex-direction: column; gap: .5rem; }
.pos-search { width: 100%; font-size: 1rem !important; padding: .65rem .8rem !important; }
.pos-cats { display: flex; flex-wrap: wrap; gap: .35rem; }
.pos-cat, .pos-chip { font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--app-border-strong, #D1D5DB);
  background: var(--app-surface, #fff); color: var(--app-ink-soft, #4B5563); }
.pos-cat:hover, .pos-chip:hover { border-color: var(--accent); color: var(--app-ink, #14181F); }
.pos-cat.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }

.pos-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pos-tile { position: relative; text-align: left; min-height: 5.25rem; cursor: pointer;
  background: var(--app-surface-2, #FAFAFC); border: 1px solid var(--app-border, #E5E7EB);
  border-radius: var(--app-radius, 10px); padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .15rem; font: inherit; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s, background .2s; }
.pos-tile:hover { border-color: var(--accent); box-shadow: var(--app-shadow); }
.pos-tile:active { transform: scale(.98); }
.pos-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-tile-name { font-weight: 700; line-height: 1.25; padding-right: 1.6rem; }
.pos-tile-price { font-weight: 800; font-size: 1.05rem; margin-top: auto; font-variant-numeric: tabular-nums; }
.pos-tile-cat { font-size: .75rem; color: var(--app-ink-muted, #6B7280); }
.pos-tile-count { position: absolute; top: .45rem; right: .45rem; min-width: 1.5rem; text-align: center;
  font-size: .75rem; font-weight: 800; padding: .1rem .35rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink, #fff); }
.pos-tile-added { background: #E2F6D8; border-color: #8CCB7A; }
.pos-nomatch { margin: .75rem 0; }
.pos-empty-catalog { margin: 1rem 0; padding: 1.5rem; text-align: center;
  border: 1px dashed var(--app-border-strong, #D1D5DB); border-radius: var(--app-radius, 10px); }
.pos-empty-catalog p { margin: .25rem 0; }

/* Customer picker */
.pos-customer-chosen { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem;
  border: 1px solid var(--app-border, #E5E7EB); border-radius: var(--app-radius, 10px);
  background: var(--app-surface-2, #FAFAFC); }
.pos-customer-avatar { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  background: var(--accent); color: var(--accent-ink, #fff); }
.pos-customer-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pos-customer-name { font-weight: 700; color: inherit; }
.pos-loyalty { margin-top: .5rem; padding: .5rem .7rem;
  border: 1px solid var(--app-border, #E5E7EB); border-radius: var(--app-radius, 10px);
  background: var(--app-surface-2, #FAFAFC); }
.pos-loyalty-head { margin: 0 0 .35rem; }
.pos-loyalty-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.pos-customer-sub { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-combo { position: relative; }
.pos-combo input { width: 100%; }
.pos-combo-list { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + .25rem);
  list-style: none; margin: 0; padding: .25rem; max-height: 16rem; overflow-y: auto;
  background: var(--app-surface, #fff); border: 1px solid var(--app-border, #E5E7EB);
  border-radius: var(--app-radius, 10px); box-shadow: var(--app-shadow-lg); }
.pos-combo-opt { display: flex; flex-direction: column; padding: .5rem .6rem; border-radius: 6px; cursor: pointer; }
.pos-combo-opt .muted { font-size: .82rem; }
.pos-combo-opt:hover, .pos-combo-opt[aria-selected="true"] { background: var(--app-surface-2, #F3F4F6); }
.pos-combo-empty { padding: .6rem; color: var(--app-ink-muted, #6B7280); font-size: .9rem; }

/* Cart */
.pos-cart-head { display: flex; align-items: center; justify-content: space-between; }
.pos-cart-head h3 { margin: 0; font-size: 1rem; }
.pos-cart-count { font-size: .8rem; font-weight: 700; color: var(--app-ink-muted, #6B7280); margin-left: .25rem; }
.pos-clear { font-size: .85rem; }
.pos-cart-empty { padding: 1.25rem; margin: .5rem 0 0; text-align: center; line-height: 1.6;
  color: var(--app-ink-muted, #6B7280); border: 1px dashed var(--app-border-strong, #D1D5DB);
  border-radius: var(--app-radius, 10px); }
.pos-cart-empty span { font-size: 1.6rem; }
.pos-lines { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pos-line { padding: .55rem .6rem; border: 1px solid var(--app-border, #E5E7EB);
  border-radius: var(--app-radius, 10px); background: var(--app-surface, #fff); }
.pos-line-discount { background: #FFF8EC; border-color: #F5D39B; }
.pos-line-top { display: flex; align-items: center; gap: .5rem; }
.pos-form .pos-line-name { flex: 1; min-width: 0; font-weight: 700; padding: .25rem .4rem; }
.pos-form .pos-line-name[readonly] { border-color: transparent; background: transparent; padding-left: 0; }
.pos-line-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-line-remove { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--app-ink-muted, #6B7280); font-size: .95rem; }
.pos-line-remove:hover { background: #FFE1DE; color: #9b2018; }
.pos-line-bottom { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.pos-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--app-border-strong, #D1D5DB);
  border-radius: 999px; overflow: hidden; }
.pos-step-btn { width: 2.1rem; border: 0; cursor: pointer; font-size: 1.1rem; font-weight: 800;
  background: var(--app-surface-2, #F3F4F6); color: inherit; }
.pos-step-btn:hover { background: var(--app-border, #E5E7EB); }
.pos-form .pos-stepper input { width: 2.8rem; border: 0; border-radius: 0; text-align: center; padding: .3rem 0;
  -moz-appearance: textfield; appearance: textfield; }
.pos-stepper input::-webkit-outer-spin-button, .pos-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-line-field { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem;
  color: var(--app-ink-muted, #6B7280); }
.pos-form .pos-line-field input { width: 5.25rem; padding: .3rem .4rem; }
.pos-form .pos-line-tax input { width: 4rem; }

/* Totals */
.pos-summary { margin: 0; padding: .75rem .9rem; border-radius: var(--app-radius, 10px);
  background: var(--app-surface-2, #FAFAFC); border: 1px solid var(--app-border, #E5E7EB); }
.pos-summary > div, .pos-summary > p { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin: .2rem 0; }
.pos-summary dt { color: var(--app-ink-soft, #4B5563); }
.pos-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.pos-summary .pos-total { font-size: 1.35rem; padding-top: .45rem; margin-top: .4rem;
  border-top: 1px solid var(--app-border, #E5E7EB); }
.pos-summary .pos-total dt { color: var(--app-ink, #14181F); font-weight: 800; }
.pos-summary .pos-total dd { font-weight: 800; }
.pos-tip-quick { display: inline-flex; gap: .25rem; }
.pos-tip-quick .pos-chip { padding: .15rem .5rem; font-size: .75rem; }
.pos-money-input { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.pos-form .pos-money-input input { width: 6rem; text-align: right; }

/* Tender */
.pos-tender { border: 0; margin: 0; padding: 0; min-width: 0; }
.pos-tender-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.pos-tender-opt { position: relative; cursor: pointer; }
.pos-tender-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pos-tender-opt > span { display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem .2rem; font-size: .78rem; font-weight: 700; text-align: center;
  border: 1px solid var(--app-border-strong, #D1D5DB); border-radius: var(--app-radius, 10px);
  background: var(--app-surface, #fff); transition: border-color .12s, background .12s; }
.pos-tender-icon { font-size: 1.25rem; line-height: 1; }
.pos-tender-opt:hover > span { border-color: var(--accent); }
.pos-tender-opt input:checked + span { border-color: var(--accent); background: var(--accent);
  color: var(--accent-ink, #fff); box-shadow: var(--app-shadow-sm); }
.pos-tender-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-cash { margin-top: .75rem; }
.pos-cash-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pos-cash-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.pos-change, .pos-short { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: var(--app-radius, 10px);
  display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.pos-change { background: #E7F7EC; color: #1c5c1c; }
.pos-change strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pos-short { background: #FFF4E5; color: #8a4b00; }

.pos-notes summary { cursor: pointer; font-size: .88rem; color: var(--app-ink-soft, #4B5563); font-weight: 700; }
.pos-notes input { width: 100%; margin-top: .4rem; }
.admin-app .pos-charge { width: 100%; font-size: 1.2rem; padding: .9rem 1rem; }
.admin-app .pos-charge:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.table-scroll { overflow-x: auto; }

@media (max-width: 1100px) {
  .pos-layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); }
}
@media (max-width: 860px) {
  .pos-layout { grid-template-columns: 1fr; }
  .pos-ticket { position: static; max-height: none; overflow: visible; }
  .pos-help { margin-left: 0; }
  .pos-help[open] .pos-help-steps { left: 0; right: auto; }
}
@media (max-width: 480px) {
  .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .pos-tender-options { grid-template-columns: repeat(3, 1fr); }
}

/* Receipt: success header with the total and change in big type. */
.receipt-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 1.25rem; margin-bottom: 1rem; border-radius: var(--app-radius-lg, 14px);
  background: #E7F7EC; border: 1px solid #B7E1C3; color: #1c5c1c; }
.receipt-hero.is-pending { background: #FFF4E5; border-color: #F5D39B; color: #8a4b00; }
.receipt-hero.is-refunded { background: var(--app-surface-2, #FAFAFC); border-color: var(--app-border, #E5E7EB); color: var(--app-ink-soft); }
.receipt-hero h2 { margin: 0; font-size: 1.25rem; }
.receipt-hero p { margin: .15rem 0 0; }
.receipt-hero-amounts { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.receipt-hero-amounts span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.receipt-hero-amounts strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.receipt-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; }
.refund-quick { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .25rem 0 .5rem; }
.refund-note { font-size: .85rem; margin: .25rem 0 .5rem; }

/* ---------- Confirmation dialog (shared by every data-confirm form) ---------- */
.confirm-dialog { margin: auto; border: 0; padding: 0; width: min(28rem, calc(100vw - 2rem));
  border-radius: var(--app-radius-lg, 14px); box-shadow: var(--app-shadow-lg);
  background: var(--app-surface, #fff); color: var(--app-ink, #14181F); }
.confirm-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.confirm-dialog-body { padding: 1.25rem 1.35rem 1.1rem; }
.confirm-dialog-title { margin: 0 0 .4rem; font-size: 1.2rem; font-family: var(--font-display); }
.confirm-dialog-message { margin: 0 0 .75rem; color: var(--app-ink-soft, #4B5563); }
.confirm-dialog-details { margin: 0 0 .75rem; padding: .5rem .75rem; max-height: 16rem; overflow-y: auto;
  border-radius: var(--app-radius, 10px); background: var(--app-surface-2, #FAFAFC);
  border: 1px solid var(--app-border, #E5E7EB); }
.confirm-dialog-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.confirm-dialog-details dt { color: var(--app-ink-soft, #4B5563); }
.confirm-dialog-details dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.confirm-dialog-total { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.confirm-dialog-actions .btn { min-width: 7rem; }

/* Neutral secondary buttons inside the admin shell. */
.admin-app .btn-secondary { background: var(--app-surface, #fff); color: var(--app-ink, #14181F);
  border: 1px solid var(--app-border-strong, #D1D5DB); }
.admin-app .btn-secondary:hover { background: var(--app-surface-2, #F3F4F6); }

/* ---------- Time clock ---------- */
/* Hero row: current state on the left, live wall-clock on the right. Big
   type so someone glancing at a shared kiosk from across the counter can
   see what state they're in. */
.timeclock-panel { padding-top: 1.25rem; }
.timeclock-hero { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.timeclock-status p { margin: .35rem 0 0; }
.timeclock-now { text-align: right; }
.timeclock-now-time { display: block; font-size: 2rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timeclock-now-date { display: block; font-size: .85rem; }
.timeclock-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0; }
.timeclock-hint { margin: .5rem 0 0; font-style: italic; }

.timeclock-today { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: .5rem 0; }
.timeclock-today div { padding: .5rem .75rem; background: #FBF9F6;
  border-radius: 8px; }
.timeclock-today strong { display: block; font-size: 1.1rem; margin-top: .15rem; }

.timeclock-log { width: 100%; margin-top: .75rem; border-collapse: collapse; }
.timeclock-log th, .timeclock-log td { padding: .35rem .5rem; border-bottom: 1px solid var(--cloud);
  font-size: .9rem; text-align: left; }
.timeclock-kiosk summary { cursor: pointer; padding: .25rem 0; }
.timeclock-kiosk[open] summary { margin-bottom: .5rem; }
.timeclock-kiosk-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- Cash drawer ---------- */
/* Open-drawer summary tiles + closing form. Tiles show float / opened-at /
   expected cash as three prominent cards. */
.drawer-open { border-color: #1c5c1c; }
.drawer-tiles { display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: .5rem 0 1rem; }
.drawer-tile { padding: .6rem .8rem; background: #FBF9F6; border-radius: 8px;
  border: 1px solid var(--cloud); }
.drawer-tile strong { display: block; font-size: 1.2rem; margin-top: .1rem;
  font-variant-numeric: tabular-nums; }
.drawer-tile-expected { background: #E2F6D8; border-color: #b7dfa3; }
.drawer-tile-note { font-size: .75rem; }
.drawer-h3 { margin: 1rem 0 .25rem; font-size: 1.05rem; }

/* Live over/short preview under the counted-cash input. */
.drawer-preview { margin: .5rem 0; padding: .5rem .75rem;
  background: #FBF9F6; border-radius: 8px; border: 1px dashed var(--spot); }
.drawer-preview p { margin: 0; }
.drawer-over  { color: #1c5c1c; font-variant-numeric: tabular-nums; }
.drawer-short { color: #9b2018; font-variant-numeric: tabular-nums; }

.drawer-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin: .5rem 0 .25rem; }
.drawer-presets .muted { margin-right: .35rem; }


/* Shared calendar: one grid for every kind of booking, colour-coded by kind,
   with a site dot when the business runs several locations. */
.calendar-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .5rem 0 1rem; }
.calendar-filters label { display: inline-flex; gap: .35rem; align-items: center; font-size: .85rem; }
.calendar-kinds { display: flex; flex-wrap: wrap; gap: .25rem .8rem; border: 0; margin: 0; padding: 0; }
.calendar-chip.kind-class { background: #DDE8FF; }
.calendar-chip.kind-appointment { background: #EDE1FB; }
.calendar-chip.kind-time_off { background: #EEEEEE; color: #444; }
.calendar-chip.kind-class.status-draft { opacity: .7; border: 1px dashed #8aa2d8; }
.calendar-chip .site-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .25rem; vertical-align: middle; }
.legend-dot.class { background: #DDE8FF; }
.legend-dot.appointment { background: #EDE1FB; }
.legend-dot.time_off { background: #EEEEEE; }

/* Per-location settings scope switcher. */
.settings-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }

/* Printing a receipt: just the receipt — no app chrome, banner buttons, or
   refund form. */
@media print {
  .admin-app .app-sidebar, .admin-app .app-topbar, .receipt-hero-actions,
  .admin-app #refund, .admin-app #void, .admin-app .banner-flash, .confirm-dialog { display: none !important; }
  .admin-app .app-shell { display: block; }
  .receipt-hero { background: none; border: 0; color: inherit; padding: 0; }
}

/* Narrow screens: let the top bar's page buttons wrap onto their own row
   instead of pushing the page wider than the phone. */
@media (max-width: 640px) {
  .app-topbar { flex-wrap: wrap; row-gap: .4rem; }
  .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
  .admin-app .topbar-actions .btn-sm { padding: .3rem .6rem; }
}
.receipt-refunded { color: #9b2018; font-weight: 700; }

/* Phones: the month calendars fit the screen instead of scrolling sideways.
   Day cells shrink to a seventh of the width, so chips drop to a small font
   and clamp to a few lines; the full title stays in the chip's tooltip. */
@media (max-width: 700px) {
  .month-calendar-header { gap: .6rem; padding: .6rem .5rem; }
  .month-calendar-header h2 { min-width: 0; font-size: 1.15rem; }
  .calendar-weekdays span { padding: .35rem 0; font-size: .7rem; }
  .calendar-day { min-height: 4.5rem; padding: .2rem; }
  .calendar-day > time { width: 1.4rem; height: 1.4rem; font-size: .75rem; }
  .calendar-day-events { gap: .15rem; margin-top: .15rem; }
  .calendar-chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; padding: .15rem .2rem 0; border-bottom: .15rem solid transparent; font-size: .6rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
  .calendar-chip > span { display: none; }  /* time: too wide for a phone cell; the chip links to the details */
  .calendar-legend { flex-wrap: wrap; justify-content: center; row-gap: .3rem; }
  .calendar-filters { padding: 0 .6rem; }
  .availability-calendar-header { gap: .6rem; }
  .availability-calendar-header h2 { min-width: 0; }
  .availability-weekdays, .availability-days { gap: .2rem; padding: .4rem .4rem; }
  .availability-weekdays { padding-bottom: 0; }
  .availability-day { font-size: .85rem; }
}

/* Wide admin tables scroll inside their own box (app.js wraps each one)
   rather than widening the whole page on a phone. */
.admin-app .table-scroll { max-width: 100%; }
.legend-item { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.legend-item .legend-dot { margin-left: .4rem; }

/* Reports: view tabs, quick date ranges, and the Daily Sales Report's
   accounting-style tables (amounts right-aligned, subtotal and total rules). */
.report-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .8rem; }
.quick-ranges { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .5rem 0 0; }
.quick-ranges .is-current { font-weight: 700; text-decoration: underline; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-table { width: 100%; }
.ledger-table tr.subtotal td { border-top: 1px solid currentColor; font-weight: 700; }
.ledger-table tr.total td { border-top: 3px double currentColor; font-weight: 800; }
@media print {
  .report-tabs, .quick-ranges, .filter-form, .dsr .text-button { display: none !important; }
  .panel { break-inside: avoid; box-shadow: none; }
}

/* Drawer: denomination count grid, and X / Z readings printed like a tape. */
.drawer-count { margin: .6rem 0; }
.drawer-count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .4rem .8rem; margin-top: .5rem; }
.drawer-reading { max-width: 40rem; }
.drawer-reading h3 { margin-top: 1.2rem; }
@media print { .drawer-reading { max-width: none; border: 0; padding: 0; } }

/* Receipts: an invoice-style document that prints alone on letter / A4. */
.receipt-sheet { max-width: 48rem; }
.receipt-doc { background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 2rem 2.2rem; max-width: 48rem; margin: 0 auto 1rem; font-size: .95rem; line-height: 1.45; }
.receipt-doc-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  border-bottom: 2px solid #111; padding-bottom: 1rem; margin-bottom: 1rem; }
.receipt-doc-brand { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; }
.receipt-doc-logo svg { width: 2rem; height: 2rem; }
.receipt-doc-meta { text-align: right; }
.receipt-doc-meta h1 { margin: 0 0 .4rem; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; }
.receipt-doc-meta dl { margin: 0; }
.receipt-doc-meta dl div { display: flex; justify-content: flex-end; gap: .6rem; }
.receipt-doc-meta dt { color: #6b7280; }
.receipt-doc-meta dd { margin: 0; font-weight: 600; }
.receipt-doc-label { display: block; color: #6b7280; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.receipt-doc-billto { margin-bottom: 1rem; }
.receipt-doc-lines, .receipt-doc-totals { width: 100%; border-collapse: collapse; }
.receipt-doc-lines th { text-align: left; border-bottom: 1px solid #111; padding: .4rem .3rem; font-size: .8rem; text-transform: uppercase; color: #374151; }
.receipt-doc-lines td { border-bottom: 1px solid #e5e7eb; padding: .45rem .3rem; }
.receipt-doc-lines th.num { text-align: right; }
.receipt-doc-discount td { color: #047857; }
.receipt-doc-totals { width: auto; min-width: 18rem; margin: 1rem 0 0 auto; }
.receipt-doc-totals td { padding: .25rem .3rem; }
.receipt-doc-total td { border-top: 2px solid #111; font-weight: 800; font-size: 1.1rem; padding-top: .45rem; }
.receipt-doc-refund td { color: #b91c1c; }
.receipt-doc-taxmark { display: inline-block; font-size: .7rem; font-weight: 700; border: 1px solid #9ca3af; border-radius: 3px; padding: 0 .2rem; color: #4b5563; }
.receipt-doc-fine { color: #6b7280; font-size: .8rem; }
.receipt-doc-void { color: #b91c1c; font-weight: 800; font-size: 1.2rem; text-align: center; }
.receipt-doc-foot { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid #e5e7eb; text-align: center; color: #374151; }
.receipt-email-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.receipt-email-form input[type=email] { min-width: 16rem; flex: 1 1 16rem; }
.receipt-page { background: #f4f4f5; padding: 1rem; margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }
.receipt-page .btn { display: inline-block; background: #111827; color: #fff; border: 0;
  border-radius: 8px; padding: .6rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.receipt-page-actions { max-width: 48rem; margin: 0 auto .8rem; text-align: right; }
@media (max-width: 600px) {
  .receipt-doc { padding: 1.1rem; }
  .receipt-doc-meta { text-align: left; }
  .receipt-doc-meta dl div { justify-content: flex-start; }
  .receipt-doc-totals { min-width: 0; width: 100%; }
}
@media print {
  @page { margin: 14mm; }
  body.receipt-page { background: #fff; padding: 0; }
  .no-print { display: none !important; }
  .receipt-doc { border: 0; border-radius: 0; padding: 0; max-width: none; }
}

/* Business-hours editor: a day per row, open/close time pickers. */
.hours-table { border-collapse: collapse; margin: .25rem 0 1rem; }
.hours-table th, .hours-table td { padding: .2rem .5rem .2rem 0; text-align: left; font-weight: 600; }
.hours-table td input[type="time"] { min-width: 7.5rem; }
@media (max-width: 640px) { .hours-table thead { display: none; } .hours-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: .5rem; } .hours-table th[scope=row] { grid-column: 1 / -1; } }