/* =========================================================================
 * Coatr — shared design tokens & primitives
 * Dark, club-friendly, "drunk-proof": big touch targets, high contrast,
 * large type. Every app (guest / staff / admin) imports THIS first, then
 * layers its own styles.css on top.
 *
 * Per-club theming: the accent is a CSS variable (--accent). Apps set it at
 * runtime from club.settings.theme.accentColor via:
 *     document.documentElement.style.setProperty('--accent', color)
 * ========================================================================= */

:root {
  /* ---- Core palette (light — coatr paper-white Scandinavian) -------------
   * Navy #3e4c63 ink on paper white #f4f5f3, quiet hairlines, minimal shadow.
   * Calm, spacious, high-contrast. Everything is light; the accent IS the
   * brand navy (legible directly on paper), overridable per club at runtime. */
  --bg:            #f4f5f3;   /* paper — app background                 */
  --bg-elevated:   #ffffff;   /* cards, sheets                          */
  --bg-raised:     #eef0ec;   /* inputs, raised rows                    */
  --bg-overlay:    #e6e9e3;   /* hover / pressed surfaces               */
  --line:          #e2e5df;   /* hairline borders                       */
  --line-strong:   #cfd4cb;

  --text:          #2b3547;   /* primary ink (navy-charcoal)            */
  --text-muted:    #5d6675;   /* secondary text                        */
  --text-faint:    #929aa6;   /* tertiary / placeholders               */
  --text-invert:   #ffffff;   /* text on navy fills                     */

  /* ---- Accent (coatr brand navy #3e4c63 — legible on paper) -------------- */
  --brand-navy:    #3e4c63;
  --brand-paper:   #f4f5f3;
  --accent:        #3e4c63;   /* brand navy — overridden per club at runtime  */
  --accent-strong: #313d51;
  --accent-soft:   rgba(62, 76, 99, 0.10);
  --accent-text:   #3e4c63;

  /* ---- Status colors (deepened for legibility on paper) ----------------- */
  --ok:            #1a9d5a;   /* paid / ready / picked-up               */
  --ok-soft:       rgba(26, 157, 90, 0.12);
  --warn:          #b06f12;   /* call requested / pending               */
  --warn-soft:     rgba(199, 137, 26, 0.15);
  --danger:        #d1394f;   /* lost / errors                          */
  --danger-soft:   rgba(209, 57, 79, 0.12);
  --info:          #2b76c8;
  --info-soft:     rgba(43, 118, 200, 0.12);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  /* Rounded display face for the wordmark + big numerals (echoes the logo). */
  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               Quicksand, var(--font-sans);

  /* Drunk-proof scale — deliberately large, generous line-height */
  --text-xs:   0.8125rem;  /* 13px  labels/captions          */
  --text-sm:   0.9375rem;  /* 15px  secondary body           */
  --text-base: 1.0625rem;  /* 17px  body                     */
  --text-lg:   1.25rem;    /* 20px  emphasised body          */
  --text-xl:   1.5rem;     /* 24px  section titles           */
  --text-2xl:  2rem;       /* 32px  screen titles            */
  --text-3xl:  2.75rem;    /* 44px  hero numbers             */
  --text-4xl:  4rem;       /* 64px  the hook number / code   */

  --weight-regular: 400;
  --weight-medium:  550;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(43, 53, 71, 0.05);
  --shadow-md: 0 4px 16px rgba(43, 53, 71, 0.07);
  --shadow-lg: 0 16px 40px rgba(43, 53, 71, 0.10);

  /* ---- Ergonomics ------------------------------------------------------- */
  --tap: 48px;              /* minimum touch target — never smaller       */
  --tap-lg: 60px;          /* primary action buttons                     */
  --motion: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
  --maxw: 560px;           /* single-column app content max width        */
}

/* =========================================================================
 * Reset / base
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Kill the document-level rubber-band bounce (feels un-native in the shell, and
 * makes short screens like the login "scroll" when there's nothing to scroll). */
html, body { overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No grey flash on tap — the biggest "this is a web page" tell on iOS. */
  -webkit-tap-highlight-color: transparent;
  /* Kill the double-tap-to-zoom gesture (and its ~300ms tap delay) → taps fire
   * instantly and scrolling feels native instead of laggy. */
  touch-action: manipulation;
  /* safe-area padding for notched phones running the installed PWA */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* On touch devices the chrome shouldn't be text-selectable or long-press a
 * callout menu — that's the last "web page" tell. Inputs and explicitly copyable
 * values (codes, mono IDs) stay selectable. Desktop (fine pointer — the admin /
 * operator console) keeps normal selection so report values can be copied. */
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, select, [contenteditable],
  .gos-code, .gos-mono, .selectable {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.15; font-weight: var(--weight-bold); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-3); }
a  { color: var(--accent-text); text-decoration: none; }

img, svg, canvas { max-width: 100%; display: block; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================================
 * Brand — coatr wordmark + box-and-check mark
 * Usage: <a class="gos-brand"> {inline SVG .gos-brand-mark} <span>coatr</span> </a>
 * The mark uses currentColor, so it inherits the header's text color (near-white
 * on the dark apps, brand navy where placed on paper). Keep the SVG paths in
 * sync with shared/icon.svg and the server landing page if the mark changes.
 * ========================================================================= */
.gos-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text); text-decoration: none; font-family: var(--font-display);
  font-weight: var(--weight-black); font-size: var(--text-xl); letter-spacing: -0.02em;
}
.gos-brand:hover { color: var(--text); }
.gos-brand-mark { width: 1.6em; height: 1.6em; flex: none; color: var(--accent-text); }
.gos-brand-word { line-height: 1; }
.gos-brand-word b { font-weight: var(--weight-black); }
.gos-brand-tag {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
}

/* =========================================================================
 * Layout primitives
 * ========================================================================= */
.gos-app {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-4);
  /* Fill the viewport MINUS the body's safe-area padding, so the page is never
   * taller than the screen just because of the notch inset (that overflow is
   * what let the login screen rubber-band). */
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gos-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.gos-stack   { display: flex; flex-direction: column; gap: var(--space-3); }
.gos-row     { display: flex; align-items: center; gap: var(--space-3); }
.gos-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.gos-grow    { flex: 1 1 auto; min-width: 0; }
.gos-center  { display: flex; align-items: center; justify-content: center; }

/* =========================================================================
 * Buttons — min 48px tall, primaries 60px
 * ========================================================================= */
.gos-btn {
  appearance: none;
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--motion), transform var(--motion), border-color var(--motion);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.gos-btn:hover { background: var(--bg-overlay); }
.gos-btn:active { transform: scale(0.98); }
.gos-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gos-btn[disabled] { opacity: 0.45; pointer-events: none; }

.gos-btn--primary {
  min-height: var(--tap-lg);
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--text-invert);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.gos-btn--primary:hover { background: var(--accent-strong); }

.gos-btn--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.gos-btn--ghost  { background: transparent; border-color: var(--line); }
.gos-btn--block  { display: flex; width: 100%; }
.gos-btn--lg     { min-height: var(--tap-lg); font-size: var(--text-lg); }

/* =========================================================================
 * Form controls
 * ========================================================================= */
.gos-input, .gos-select, .gos-textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
}
.gos-input::placeholder, .gos-textarea::placeholder { color: var(--text-faint); }
.gos-input:focus, .gos-select:focus, .gos-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.gos-label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }

/* Big segmented / chip selectors (item type, payment method) */
.gos-chip {
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.gos-chip[aria-pressed="true"], .gos-chip--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

/* =========================================================================
 * Status badges — map 1:1 to Ticket.status
 * ========================================================================= */
.gos-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gos-badge--checked_in     { background: var(--info-soft);   color: var(--info); }
.gos-badge--call_requested { background: var(--warn-soft);   color: var(--warn); }
.gos-badge--ready_for_pickup { background: var(--accent-soft); color: var(--accent); }
.gos-badge--picked_up      { background: var(--ok-soft);     color: var(--ok); }
.gos-badge--lost           { background: var(--danger-soft); color: var(--danger); }
.gos-badge--paid           { background: var(--ok-soft);     color: var(--ok); }
.gos-badge--pending        { background: var(--warn-soft);   color: var(--warn); }

/* =========================================================================
 * The hook number / human code — the thing everyone stares at
 * ========================================================================= */
.gos-hook-number {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}
.gos-code {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  letter-spacing: 0.28em;
  font-weight: var(--weight-bold);
  color: var(--accent-text);
}

/* =========================================================================
 * Utilities
 * ========================================================================= */
.gos-muted   { color: var(--text-muted); }
.gos-faint   { color: var(--text-faint); }
.gos-mono    { font-family: var(--font-mono); }
.gos-hidden  { display: none !important; }
.gos-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gos-divider { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0; }

/* Toast / inline notice */
.gos-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: var(--text-sm);
}
.gos-notice--ok     { background: var(--ok-soft);     border-color: var(--ok); }
.gos-notice--warn   { background: var(--warn-soft);   border-color: var(--warn); }
.gos-notice--danger { background: var(--danger-soft); border-color: var(--danger); }

/* Sponsor slot — the "sponsored wallet pass" ad inventory */
.gos-sponsor {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px dashed var(--line-strong);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.gos-sponsor img { height: 28px; width: auto; border-radius: var(--radius-sm); }