/* ===========================================================================
   tokens.css — the design system.
   The ONLY place a colour, radius, shadow, type step or spacing value is
   written down. Everything else references these.

   Opt-in per app: fs-ongoo queues it in its own partials/head.php (the other
   apps on this shared core keep their own palettes). It is emitted AFTER
   Bootstrap's own <link> — equal specificity, later source order, so these win
   with no !important. Order against global.css does not matter: the two share
   no selector, and var() resolves at use time.

   HOW BOOTSTRAP 5.3.3 ACTUALLY WORKS — verified against the shipped file, not
   assumed, because the two halves behave differently:

     Inherits from :root for free:
       .bg-primary, .text-bg-*, .link-primary, plain <a>, .text-muted, .table,
       .alert, body background/colour/font-size, and every generic
       --bs-border-radius consumer.

     Does NOT inherit, for two different reasons:
       (a) Bootstrap compiles a literal hex ONTO the class — all 16 .btn-*
           variants, .form-control:focus, .form-select:focus,
           .form-check-input:checked/:focus, .form-range thumbs, .nav-pills,
           .pagination, .progress, .dropdown-menu, .list-group active state.
       (b) Bootstrap re-declares the component's own --bs-<component>-* var ON
           the component class, which shadows anything set at :root — .card,
           .badge, .modal, .dropdown-menu, .list-group, .accordion.
     Both kinds are re-pointed on their own selectors below. Setting them at
     :root looks right and silently does nothing (verified with computed styles
     in a headless browser, which is the only way to catch case (b)).
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* ── One accent ────────────────────────────────────────────────────────
     Every interactive element in the app is this colour. There is no second
     brand colour. #0066cc measures 5.57:1 on white (Bootstrap's #0d6efd is
     4.50:1 — right on the AA floor), so this is a legibility win, not just a
     hue change. */
  --fs-accent:        #0066cc;
  --fs-accent-rgb:    0, 102, 204;
  --fs-accent-hover:  #0055ab;
  --fs-accent-active: #004a94;
  /* Solid fills carrying white text. Identical to --fs-accent in light mode;
     they diverge in dark mode, where the readable link blue is too light to
     sit under white text. */
  --fs-accent-fill:     var(--fs-accent);
  --fs-accent-fill-rgb: var(--fs-accent-rgb);
  --fs-accent-subtle:   rgba(0, 102, 204, .10);
  --fs-focus-ring:      rgba(0, 102, 204, .25);

  /* ── Surfaces ──────────────────────────────────────────────────────────
     Depth comes from the surface change and a hairline, never from a shadow.
     Parchment page + white cards is the whole elevation system. */
  --fs-page:      #f5f5f7;   /* Apple parchment: just off white, so white lists read as surfaces */
  --fs-surface:   #ffffff;
  --fs-recessed:  #ebebef;
  --fs-hairline:  rgba(0, 0, 0, .11);
  --fs-ink:       #1d1d1f;
  --fs-ink-muted: #6e6e73;
  /* Navigation is neutral glass (Liquid Glass): translucent, blurred, and only
     the current page is tinted. Blue is for content and actions, not chrome. */
  --fs-glass:        rgba(255, 255, 255, .72);
  --fs-glass-solid:  #ffffff;
  --fs-glass-edge:   rgba(255, 255, 255, .65);
  --fs-glass-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);

  /* ── Radii: 3 steps, not 24 ────────────────────────────────────────── */
  --fs-radius-sm:   8px;
  --fs-radius:     12px;
  --fs-radius-lg:  18px;
  --fs-radius-pill: 9999px;

  /* ── Elevation: exactly one real shadow, reserved for photography ─────
     Everything else uses the hairline. This is the single Apple-style drop
     that gives a photo weight on a surface; it is never used on chrome. */
  --fs-shadow-photo: 0 3px 30px rgba(0, 0, 0, .22);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --fs-press: scale(0.97);

  /* =====================================================================
     Bootstrap adoption. Everything below re-points a --bs-* variable that
     Bootstrap reads off :root, so ~18,900 lines of existing markup restyles
     with no edits.
     ===================================================================== */

  --bs-primary:               var(--fs-accent-fill);
  --bs-primary-rgb:           var(--fs-accent-fill-rgb);
  --bs-primary-text-emphasis: var(--fs-accent-active);
  --bs-primary-bg-subtle:     #e3effb;
  --bs-primary-border-subtle: #a8ccee;

  --bs-link-color:              var(--fs-accent);
  --bs-link-color-rgb:          var(--fs-accent-rgb);
  --bs-link-hover-color:        var(--fs-accent-hover);
  --bs-link-hover-color-rgb:    var(--fs-accent-rgb);

  --bs-body-bg:        var(--fs-page);
  --bs-body-color:     var(--fs-ink);
  --bs-body-color-rgb: 29, 29, 31;
  --bs-secondary-color: var(--fs-ink-muted);   /* drives .text-muted (×125) */
  --bs-emphasis-color: var(--fs-ink);
  --bs-tertiary-bg:    var(--fs-recessed);
  --bs-border-color:   var(--fs-hairline);
  --bs-border-color-translucent: var(--fs-hairline);

  --bs-border-radius:     var(--fs-radius);
  --bs-border-radius-sm:  var(--fs-radius-sm);
  --bs-border-radius-lg:  var(--fs-radius-lg);
  --bs-border-radius-xl:  var(--fs-radius-lg);

  /* Surfaces sit on the page, separated by a hairline rather than a blur.
     Re-pointing --bs-box-shadow-sm retunes all 24 existing .shadow-sm sites
     at once, so no markup has to lose its class. */
  --bs-box-shadow-sm: 0 0 0 1px var(--fs-hairline);
  --bs-box-shadow:    0 0 0 1px var(--fs-hairline);

  /* Body at 17px for prose. Controls and tables are clawed back to 16px
     below — Czech runs long and the 10-column admin tables have no room. */
  --bs-body-font-size:   1.0625rem;
  --bs-body-line-height: 1.47;
}

[data-bs-theme="dark"] {
  /* Two accents in dark mode, and the split is not cosmetic: white text on
     #2997ff measures 3.01:1 and fails AA, so solid fills use the darker
     #0071e3 (4.70:1) while links and icons use the lighter one (5.58:1 on
     the surface below). */
  --fs-accent:        #2997ff;
  --fs-accent-rgb:    41, 151, 255;
  --fs-accent-hover:  #54acff;
  --fs-accent-active: #7cc0ff;
  --fs-accent-fill:     #0071e3;
  --fs-accent-fill-rgb: 0, 113, 227;
  --fs-accent-subtle:   rgba(41, 151, 255, .14);
  --fs-focus-ring:      rgba(41, 151, 255, .30);

  --fs-page:      #000000;
  --fs-surface:   #1c1c1e;
  --fs-recessed:  #2c2c2e;
  --fs-hairline:  rgba(255, 255, 255, .14);
  --fs-ink:       #f5f5f7;
  --fs-ink-muted: #98989d;
  --fs-glass:        rgba(44, 44, 48, .72);
  --fs-glass-solid:  #2c2c30;
  --fs-glass-edge:   rgba(255, 255, 255, .12);
  --fs-glass-shadow: 0 8px 28px rgba(0, 0, 0, .5);

  --bs-primary-text-emphasis: var(--fs-accent-active);
  --bs-primary-bg-subtle:     #0a2540;
  --bs-primary-border-subtle: #14487a;
  --bs-body-color-rgb: 245, 245, 247;
  --bs-emphasis-color: #ffffff;
}

/* ===========================================================================
   Part 2 — the classes Bootstrap hardcodes.
   None of these inherit from :root; each carries a literal hex in the shipped
   stylesheet, so each needs re-pointing by hand.
   =========================================================================== */

/* ── Surfaces that shadow :root ──────────────────────────────────────────
   Bootstrap declares each of these on the component class itself, so the same
   variable set at :root is overridden and has no effect. This is the whole
   elevation system: white (dark: #1c1c1e) surfaces on a parchment (dark: black)
   page, separated by a hairline instead of a shadow. */
.card {
  --bs-card-bg:           var(--fs-surface);
  --bs-card-border-color: var(--fs-hairline);
  --bs-card-cap-bg:       transparent;
  --bs-card-border-radius:       var(--fs-radius-lg);
  --bs-card-inner-border-radius: calc(var(--fs-radius-lg) - 1px);
}
.modal        { --bs-modal-bg: var(--fs-surface); }
.dropdown-menu{ --bs-dropdown-bg: var(--fs-surface); }
.list-group   { --bs-list-group-bg: var(--fs-surface); }

/* Badges read as labels: pill-shaped, and no bolder than the text around them.
   Resolves the three competing badge shapes that sat in one dashboard row. */
.badge {
  --bs-badge-border-radius: var(--fs-radius-pill);
  --bs-badge-font-weight:   600;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Bootstrap sets --bs-btn-* ON each .btn-* class, so :root cannot reach them.
   Only the primary pair is re-coloured: the semantic variants (success,
   danger, warning, info) still mean what they say and stay Bootstrap's. */
.btn-primary {
  --bs-btn-bg:                var(--fs-accent-fill);
  --bs-btn-border-color:      var(--fs-accent-fill);
  --bs-btn-hover-bg:          var(--fs-accent-hover);
  --bs-btn-hover-border-color: var(--fs-accent-hover);
  --bs-btn-active-bg:         var(--fs-accent-active);
  --bs-btn-active-border-color: var(--fs-accent-active);
  --bs-btn-disabled-bg:       var(--fs-accent-fill);
  --bs-btn-disabled-border-color: var(--fs-accent-fill);
  --bs-btn-focus-shadow-rgb:  var(--fs-accent-rgb);
}

.btn-outline-primary {
  --bs-btn-color:             var(--fs-accent);
  --bs-btn-border-color:      var(--fs-accent);
  --bs-btn-hover-bg:          var(--fs-accent-fill);
  --bs-btn-hover-border-color: var(--fs-accent-fill);
  --bs-btn-active-bg:         var(--fs-accent-active);
  --bs-btn-active-border-color: var(--fs-accent-active);
  --bs-btn-disabled-color:    var(--fs-accent);
  --bs-btn-disabled-border-color: var(--fs-accent);
  --bs-btn-focus-shadow-rgb:  var(--fs-accent-rgb);
}

.btn-link {
  --bs-btn-color:       var(--fs-accent);
  --bs-btn-hover-color: var(--fs-accent-hover);
  --bs-btn-active-color: var(--fs-accent-active);
}

/* Buttons are 12px-radius commands; only the large ones read as pills. There
   are 117 .btn-sm in the app, often six in an admin toolbar — full pills there
   read as chips and waste horizontal room. */
.btn { --bs-btn-border-radius: var(--fs-radius); }
.btn-lg { --bs-btn-border-radius: var(--fs-radius-pill); }
/* The primary action is a pill (the Apple action signal) wherever it is not a
   compact toolbar button. */
.btn-primary:not(.btn-sm),
.btn-outline-primary:not(.btn-sm) { --bs-btn-border-radius: var(--fs-radius-pill); --bs-btn-padding-x: 1.15rem; }

/* The system-wide press state. */
.btn:active,
.btn.active,
.list-group-item-action:active {
  transform: var(--fs-press);
}
.btn { transition: transform .12s ease, background-color .12s ease, border-color .12s ease; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active,
  .btn.active,
  .list-group-item-action:active { transform: none; }
}

/* ── Form controls ───────────────────────────────────────────────────────
   These carry raw property declarations (#86b7fe border, rgba(13,110,253,.25)
   glow), not variables, so they need property-level overrides. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--fs-accent);
  box-shadow: 0 0 0 .25rem var(--fs-focus-ring);
}

.form-check-input:checked {
  background-color: var(--fs-accent-fill);
  border-color: var(--fs-accent-fill);
}


/* ── Component-scoped active states ──────────────────────────────────────
   Each of these defines its own --bs-* var with a literal on the component
   class, so the override has to sit on the same selector. */
.progress { --bs-progress-bar-bg: var(--fs-accent-fill); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--fs-accent-fill); }
.list-group    { --bs-list-group-active-bg: var(--fs-accent-fill);
                 --bs-list-group-active-border-color: var(--fs-accent-fill); }

/* ===========================================================================
   Part 3 — typographic and density corrections.
   =========================================================================== */

/* Headings tighten as they grow. Only above 20px, and at roughly half Apple's
   tracking: Czech stacks diacritics horizontally as well as vertically
   (ě š č ř ž ů ť ď ň), and tight tracking collides in a way English doesn't. */
h1, .h1 { font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2rem); letter-spacing: -0.014em; font-weight: 600; line-height: 1.15; }
h2, .h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.6rem); letter-spacing: -0.012em; font-weight: 600; line-height: 1.2; }
h3, .h3 { font-size: 1.3rem;  letter-spacing: -0.008em; font-weight: 600; }
h4, .h4 { font-size: 1.15rem; letter-spacing: -0.006em; font-weight: 600; }
h5, .h5 { font-size: 1.05rem; font-weight: 600; }
h6, .h6 { font-size: 1rem;    font-weight: 600; }

/* Table header tint. A bg-* utility on <thead> does nothing visible: Bootstrap
   paints every cell with `background-color: var(--bs-table-bg)`, which covers
   the thead's own background. Setting the variable is the only lever, and
   unlike .table-light (a fixed #f8f9fa) this one follows the theme. */
.fs-thead {
  --bs-table-bg: var(--fs-recessed);
  --bs-table-color: var(--fs-ink-muted);
}

/* Dense surfaces claw back the 17px body bump — users.php is a 10-column
   two-tier table and msg_diagnostics.php has 8; 6% more text is room they do
   not have. Money columns line up. */
.table {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.badge { font-variant-numeric: tabular-nums; }

/* iOS zooms any input under 16px on focus. */
.form-control, .form-select { font-size: 1rem; }

/* ── The one shadow ──────────────────────────────────────────────────────
   Photography resting on a surface. Never chrome, never cards, never text. */
.media-thumb {
  box-shadow: var(--fs-shadow-photo);
}

/* ===========================================================================
   Part 4 — chrome.
   =========================================================================== */

/* Two navigations, one per form factor, never both:
   - desktop (≥992px): a glass top bar listing every page, current page as a pill;
   - phone/tablet: a floating glass tab bar (Domů · Akce · Fotky · Více) at the
     bottom, the only navigation in installed/standalone mode, so it never hides.
   Scoped class names: a bare `header` selector would also catch the per-order
   <header> in merch_my_orders.php and the logo <header> on login/register. */
.fs-topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 1rem;
  height: 52px; padding: 0 1.5rem;
  background: var(--fs-glass-solid);
  border-bottom: 1px solid var(--fs-hairline);
}
.fs-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--fs-ink); letter-spacing: -.01em; white-space: nowrap; }
.fs-brand:hover { text-decoration: none; color: var(--fs-ink); }
.fs-topnav { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.fs-topnav a { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--fs-radius-pill); font-size: .875rem; color: var(--fs-ink); white-space: nowrap; }
.fs-topnav .fs-icon { width: 1.1em; height: 1.1em; flex: none; }
.fs-topnav a:hover { text-decoration: none; background: var(--fs-recessed); }
.fs-topnav a.is-active { background: var(--fs-accent-subtle); color: var(--fs-accent); font-weight: 600; }

.fs-tabbar {
  position: fixed; z-index: 1030;
  left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  height: 58px; padding: 4px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-glass-solid);
  border: 1px solid var(--fs-glass-edge);
  box-shadow: var(--fs-glass-shadow);
}
.fs-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: var(--fs-radius-pill);
  font-size: .6875rem; font-weight: 500; color: var(--fs-ink);
}
.fs-tab:hover { text-decoration: none; color: var(--fs-ink); }
.fs-tab .fs-icon { width: 22px; height: 22px; }
.fs-tab.is-active { background: var(--fs-accent-subtle); color: var(--fs-accent); font-weight: 600; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fs-topbar { background: color-mix(in srgb, var(--fs-page) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .fs-tabbar { background: var(--fs-glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}

@media (max-width: 991.98px) {
  .fs-topbar { display: none; }
}
@media (min-width: 992px) {
  .fs-tabbar { display: none; }
}

/* Avatars: the user's Fakin hra character (pixel art, cropped to the head), else an initial. */
.fs-avatar, .fs-avatar-lg { display: grid; place-items: center; overflow: hidden; position: relative; border-radius: 50%; background: var(--fs-accent-fill); color: #fff; font-weight: 600; }
.fs-avatar { width: 32px; height: 32px; flex: none; }
.fs-avatar.is-active { box-shadow: 0 0 0 2px var(--fs-page), 0 0 0 4px var(--fs-accent); }
.fs-avatar-lg { width: 48px; height: 48px; flex: none; font-size: 1.25rem; }
.fs-char { position: absolute; top: 8%; left: 50%; height: 170%; max-width: none; transform: translateX(-50%); image-rendering: pixelated; }
.fs-char.is-locked { filter: brightness(0) invert(1); opacity: .45; } /* no character yet: white silhouette on the blue circle */

/* Fragment jumps (#order-N, #chart-N redirects) land below the pinned top bar, not under it.
   touch-action: scroll only, no double-tap or pinch zoom (a zooming page feels like a website, not an app).
   iOS Safari also needs its gesture events cancelled: ui.js.
   touch-callout: no iOS long-press preview + Sdílet/Uložit menu on images and links (photos have Stáhnout). */
html { scroll-padding-top: 4.5rem; touch-action: pan-x pan-y; -webkit-touch-callout: none; }

/* Main content region: a consistent gutter for the pages that render edge-to-edge,
   and on phones room under the content for the floating tab bar. */
.fs-main {
  padding-top: 1.25rem;
  padding-bottom: calc(2rem + 84px + env(safe-area-inset-bottom));
}
@media (min-width: 992px) {
  .fs-main { padding-top: 1.75rem; padding-bottom: 3rem; }
}

/* The content region is focus target for the skip link; never show a ring for
   the programmatic focus that produces. */
.fs-main:focus { outline: none; }

/* ── Grouped lists (iOS Settings) ─────────────────────────────────────────
   .fs-list > .fs-row: white rounded group, hairline between rows that starts
   after the icon. Used by Více now and by the redesigned screens next. */
.fs-large-title { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: .25rem 0 1rem; }
.fs-list-header { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fs-ink-muted); margin: 1.25rem 1rem .4rem; }
.fs-list { background: var(--fs-surface); border-radius: var(--fs-radius-lg); overflow: hidden; margin-bottom: 1rem; max-width: 40rem; }
.fs-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; min-height: 52px; color: var(--fs-ink); position: relative; }
.fs-row:hover { text-decoration: none; color: var(--fs-ink); }
/* Only tappable rows light up, and only with a real pointer: iOS keeps :hover stuck after a tap. */
@media (hover: hover) { :is(a, button, label, summary).fs-row:hover { background: var(--fs-recessed); } }
.fs-row + .fs-row::before { content: ""; position: absolute; top: 0; right: 0; left: 3.6rem; border-top: 1px solid var(--fs-hairline); }
.fs-row-profile + .fs-row::before { left: 4.6rem; }
.fs-row-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; }
.fs-row-icon .fs-icon { width: 17px; height: 17px; }
.fs-row-icon.is-blue { background: var(--fs-accent-fill); } .fs-row-icon.is-orange { background: #ff9500; } .fs-row-icon.is-yellow { background: #ffcc00; color: #1d1d1f; }
.fs-row-icon.is-purple { background: #af52de; } .fs-row-icon.is-teal { background: #30b0c7; } .fs-row-icon.is-red { background: #ff3b30; } .fs-row-icon.is-gray { background: #8e8e93; } .fs-row-icon.is-green { background: #34c759; }
.fs-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fs-row-text b { font-weight: 500; }
.fs-row-text small { color: var(--fs-ink-muted); font-size: .8125rem; }
.fs-row-chev { width: 15px; height: 15px; color: var(--fs-ink-muted); opacity: .6; flex: none; }
.fs-icon { width: 1.25em; height: 1.25em; }

/* Touch targets. fs_event_action_link() renders every per-person money action
   (confirm a deposit, admit off the waitlist, mark a settle-up paid) as a
   .btn-link.btn-sm.p-0, which is a ~21px line box. .p-0 is !important, so the
   padding has to be reclaimed with an equal negative margin to avoid shifting
   the layout those links already sit in. */
.btn-link.btn-sm.p-0 {
  padding: .5rem !important;
  margin: -.5rem;
  display: inline-block;
}

/* Skip link — every keyboard user currently re-tabs the whole nav on each page. */
.fs-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: .75rem 1.25rem;
  background: var(--fs-surface);
  color: var(--fs-accent);
  border-radius: 0 0 var(--fs-radius) 0;
}
.fs-skip-link:focus {
  left: 0;
  outline: 2px solid var(--fs-accent);
}