/* =============================================================================
   Sport CMS — design system (Bootstrap 5.3.3 + Bootstrap Icons 1.11.3 + this file)
   -----------------------------------------------------------------------------
   PAGE CONTRACT (PHP)
     $page_title  = 'Članovi';     // <title>; optional
     $page_assets = ['members'];   // loads assets/pages/members.css (head) + members.js (after app.js)
     include __DIR__ . '/../inc/header.php';  ... content ...  include __DIR__ . '/../inc/footer.php';
     asset('pages/x.js') -> '/sport/assets/pages/x.js?v=<mtime>' (always use for /assets URLs)
     No inline JS (CSP). PHP->JS data: data-* attributes or <script type="application/json" id="...">.
     Use flash('success'|'danger'|'warning'|'info', 'Poruka') + redirect (PRG); header renders toasts.
     Colours: never hard-code #fff/#000/bg-light/bg-white for surfaces — use the tokens below
     (var(--surface), var(--surface-2), var(--border), var(--text-muted), var(--accent) …) so dark mode works.

   LAYOUT (full width: content spans sidebar -> right edge; gutter is fluid via --page-x)
     <div class="page"> … </div>            content wrapper (no max-width — use grids so wide screens are filled)
     .page-narrow is kept as an alias (no longer narrow).  Legacy <div class="container py-4"> still works.
     The first .page-head is sticky on desktop (blur + hairline once scrolled; app.js). Sticky content below it
     uses top: var(--stick-top) (= page-head height on desktop, app bar height on phones).
     .auto-grid (style="--min: 320px")    responsive card grid, auto-fit; add .fill to keep empty tracks
     .section-grid [.cols-3]              form-section cards: 1 col, 2 cols ≥1200px, 3 cols ≥1800px (.cols-3)
     .card-head                           card header row: title left, quiet action right
     .section-icon [.tone-*]              small tinted icon tile (e.g. inside .form-section-title)
     .lift                                hover lift for clickable cards
     .table-responsive.table-sticky       sticky thead on desktop (table-card uses overflow: clip)
     d-xxl-table-cell columns             extra table columns shown only ≥1400px

   1. PAGE HEADER
     <div class="page-head">
       <div><h1>Članovi</h1><p class="page-sub">124 aktivna · 6 ističe uskoro</p></div>
       <div class="page-actions"><a class="btn btn-primary" href="#"><i class="bi bi-plus-lg"></i>Novi član</a></div>
     </div>                               (on phones, actions go full-width below the title)

   2. CARDS / SECTIONS
     .card (refined Bootstrap card), .card-header, .card-body
     <h2 class="section-title">Danas <span class="section-meta">3 termina</span></h2>
     .table-card = card that wraps a table (no padding; transparent on phones for .table-stack)

   3. STAT TILES
     <div class="stats">                  (auto grid; 2 columns on phones)
       <a class="stat" href="…"><span class="stat-icon tone-success"><i class="bi bi-people"></i></span>
         <span class="stat-label">Aktivni članovi</span><span class="stat-value">124</span>
         <span class="stat-hint"><span class="stat-delta up">+4</span> ovaj tjedan</span></a>
     </div>    tones: tone-accent (default), tone-success, tone-warning, tone-danger, tone-info, tone-muted

   4. PILLS
     <span class="pill pill-success">Aktivan</span>  pill-warning | pill-danger | pill-info | pill-muted
     .pill-nodot removes the dot.

   5. EMPTY STATE
     <div class="empty-state"><div class="empty-state-icon"><i class="bi bi-people"></i></div>
       <h3>Nema članova</h3><p>Dodajte prvog člana.</p><a class="btn btn-primary" href="#">Dodaj člana</a></div>

   6. TOOLBAR / FILTERS
     <div class="toolbar">
       <div class="search"><i class="bi bi-search"></i>
         <input type="search" class="form-control" placeholder="Pretraži…" aria-label="Pretraži" data-filter-table="#t"></div>
       <div class="segmented" role="group" aria-label="Status">
         <a href="?s=all" class="active" aria-current="true">Svi</a><a href="?s=active">Aktivni</a></div>
       <div class="toolbar-actions"><button class="btn btn-ghost">Izvoz</button></div>
     </div>
     .segmented children: <a>, <button aria-pressed>, or <input type=radio class="btn-check"> + <label>.
     Active = .active | [aria-pressed=true] | [aria-current] | :checked + label.  .segmented-sm = compact.

   7. RESPONSIVE DATA TABLE  (table on ≥768px, stacked cards on phones)
     <div class="card table-card"><div class="table-responsive">
       <table class="table table-stack align-middle mb-0" id="t">
         <thead><tr><th>Ime</th><th>Članarina</th><th>Status</th><th class="text-end">Akcije</th></tr></thead>
         <tbody><tr>
           <td class="cell-primary">…avatar + name…</td>        (card title row, no label)
           <td data-label="Članarina">01.10. – 31.10.</td>     (label shown on phones)
           <td data-label="Status"><span class="pill pill-success">Aktivan</span></td>
           <td class="cell-actions text-end">…buttons…</td>    (card footer row)
         </tr></tbody></table></div></div>

   8. AVATAR
     <img class="avatar avatar-sm|avatar-md|avatar-lg" src="…" alt="">   (32 / 40 / 64px; default 40)
     <span class="avatar avatar-md avatar-initials" aria-hidden="true">IK</span>

   9. FORMS
     <section class="form-section"><h2 class="form-section-title">Osobni podaci</h2>
       <p class="form-section-desc">Kratak opis.</p> … Bootstrap .row/.col + .form-label/.form-control … </section>
     <label class="form-label required">Ime</label>      (adds red *)
     .form-floating works in both themes; .is-invalid/.invalid-feedback for inline validation.
     <div class="form-actions form-actions-sticky"><button class="btn btn-ghost">Odustani</button>
       <button class="btn btn-primary">Spremi</button></div>   (-sticky: sticks above tab bar on phones)

   10. MODALS / BOTTOM SHEETS
     <div class="modal fade modal-sheet" …><div class="modal-dialog modal-dialog-centered">…
     RULE: a dialog never scrolls — all content visible at once (1366x768 is the reference laptop).
     Never use .modal-dialog-scrollable or max-height/overflow on .modal-body. If it doesn't fit, widen it
     (#x { --bs-modal-width: 960px } on the .modal) and use columns (.row g-3 / CSS grid), compact
     <h3 class="modal-section-title"> labels, helper text inline. Verify at 1366x768, 1280x720 and 390x844.
     On phones (<576px) .modal-sheet slides up from the bottom; a sheet taller than the screen scrolls as a whole.
     A <form> directly inside .modal-content is supported (wrap .modal-body + .modal-footer in it).

   11. CONFIRM DIALOG (replaces window.confirm; no inline JS)
     <form method="post" data-confirm="Obrisati člana Ivo Ivić?" data-confirm-danger data-confirm-ok="Obriši">
     <button name="action" value="delete" data-confirm="…">   (on a submit button: name/value is preserved)
     <a href="…" data-confirm="…">    data-confirm-title="…"   data-confirm-type="OBRIŠI" (must type word)
     JS: App.confirm({message, title, ok, danger, type}) -> Promise<boolean>

   12. DOUBLE-SUBMIT PROTECTION — automatic on every form: submitter disabled + spinner until navigation.
     Opt out: <form data-no-lock> (AJAX forms, downloads). Forms whose own submit handler calls
     preventDefault() are skipped automatically.

   13. LIVE FILTER (debounced, diacritics-insensitive: "cokic" finds "Čokić", all words must match)
     <input type="search" data-filter-table="#tableId">   filters tbody rows
     <input type="search" data-filter-list="#listId">     filters descendants with [data-filter-item]
     Optional data-filter-text="…" on a row/item overrides the searched text. "Nema rezultata" is automatic.

   14. JS API (assets/app.js)
     App.toast('Spremljeno.', 'success'|'danger'|'warning'|'info')
     App.confirm({...}) -> Promise<boolean>

   15. PWA — handled globally (SW registration, install banner ≤ once / 30 days, [data-install] menu items).

   16. UTILITIES
     .btn-ghost (quiet secondary button)  .btn-icon (square icon-only button; add aria-label)
     .tabular-nums  .text-truncate-2  .min-w-0  .text-muted / .text-body-secondary (accessible muted)
     Tokens: --accent --accent-text --accent-subtle --surface --surface-2 --surface-3 --border
             --border-strong --text --text-muted --success-bg/-fg --warning-bg/-fg --danger-bg/-fg
             --info-bg/-fg --radius (12px) --radius-sm (10px) --shadow-sm/-md/-lg
   Legacy (kept for old pages): .page-title .grid-yellow .cal-cell.has-events .table-fixed .grid-cell
     .shadow-hover .btn-responsive .w-md-auto  thead th.sticky
   ============================================================================= */

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="light"] {
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-active: #1e40af;
  --accent-text: #1d4ed8;
  --accent-bright: #60a5fa;
  --accent-subtle: #eaf1ff;
  --accent-border: #bfd3fe;
  --ring: rgba(37, 99, 235, .28);

  --app-bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f4f5f8;
  --surface-3: #eaedf1;
  --border: #e5e7ec;
  --border-strong: #d0d5dd;
  --text: #0f172a;
  --text-muted: #556070;
  --hover: rgba(15, 23, 42, .035);

  --ink: #0b1220;
  --ink-border: #1b2435;
  --ink-text: #c3cad6;
  --ink-muted: #8a94a6;

  --success-bg: #e8f7ee; --success-fg: #066a3a; --success-border: #b7e4c8;
  --warning-bg: #fff6e0; --warning-fg: #8a4b00; --warning-border: #f6d58f;
  --danger-bg: #fdeceb;  --danger-fg: #b42318;  --danger-border: #f5c2bd;
  --info-bg: #e9f1ff;    --info-fg: #1e4fc2;    --info-border: #c4d7fc;
  --muted-bg: #eef0f3;   --muted-fg: #4a5464;

  --grid-yellow: #fffbe6;
  --grid-yellow-hover: #fff3c4;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-md: 0 10px 24px -8px rgba(16, 24, 40, .12), 0 3px 6px -3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22), 0 6px 14px -6px rgba(16, 24, 40, .08);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .7);
  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* fluid page gutter: 16px on phones, ~48px on a 2560px monitor */
  --page-x: clamp(1rem, .4rem + 1.9vw, 3.25rem);
  --page-top: clamp(1.1rem, .6rem + 1vw, 2rem);
  --stick-top: calc(56px + env(safe-area-inset-top)); /* what sticky content must clear (app bar on phones, page header on desktop) */
  --sidebar-w: 256px;
  --tabbar-h: 64px;

  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: #1e40af;
  --bs-primary-bg-subtle: #eaf1ff;
  --bs-primary-border-subtle: #bfd3fe;
  --bs-link-color: #1d4ed8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1e40af;
  --bs-link-hover-color-rgb: 30, 64, 175;
  --bs-body-bg: var(--app-bg);
  --bs-body-bg-rgb: 245, 246, 248;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 15, 23, 42;
  --bs-emphasis-color: #020617;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-3);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(15, 23, 42, .1);
  --bs-focus-ring-color: var(--ring);
}

[data-bs-theme="dark"] {
  --accent: #2563eb;
  --accent-hover: #3b6ff0;
  --accent-active: #1d4ed8;
  --accent-text: #8cb2ff;
  --accent-bright: #6ea0ff;
  --accent-subtle: rgba(59, 130, 246, .16);
  --accent-border: rgba(96, 150, 250, .45);
  --ring: rgba(96, 150, 250, .4);

  --app-bg: #080b12;
  --surface: #0f141e;
  --surface-2: #151b27;
  --surface-3: #1c2433;
  --border: #1f2837;
  --border-strong: #2e3a4f;
  --text: #e7eaf0;
  --text-muted: #9aa4b5;
  --hover: rgba(255, 255, 255, .03);

  --ink: #0b0f18;
  --ink-border: #1a2130;

  --success-bg: rgba(34, 197, 94, .13);  --success-fg: #6fe0a0; --success-border: rgba(34, 197, 94, .3);
  --warning-bg: rgba(245, 158, 11, .14); --warning-fg: #fbc164; --warning-border: rgba(245, 158, 11, .32);
  --danger-bg: rgba(240, 68, 56, .15);   --danger-fg: #ff958c; --danger-border: rgba(240, 68, 56, .35);
  --info-bg: rgba(59, 130, 246, .16);    --info-fg: #93b8ff;   --info-border: rgba(59, 130, 246, .35);
  --muted-bg: rgba(148, 163, 184, .13);  --muted-fg: #b4bdcb;

  --grid-yellow: rgba(250, 204, 21, .07);
  --grid-yellow-hover: rgba(250, 204, 21, .13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .035);

  --bs-primary-text-emphasis: #a9c4ff;
  --bs-primary-bg-subtle: rgba(59, 130, 246, .16);
  --bs-primary-border-subtle: rgba(96, 150, 250, .45);
  --bs-link-color: #8cb2ff;
  --bs-link-color-rgb: 140, 178, 255;
  --bs-link-hover-color: #b3ccff;
  --bs-link-hover-color-rgb: 179, 204, 255;
  --bs-body-bg-rgb: 10, 14, 22;
  --bs-body-color-rgb: 231, 234, 240;
  --bs-emphasis-color: #fff;
  --bs-border-color-translucent: rgba(255, 255, 255, .1);
}

/* ---------- Base ---------- */
:root {
  --bs-font-sans-serif: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: 16px;
}
html { -webkit-text-size-adjust: 100%; }
@media (min-width: 2200px) { html { font-size: 17px; } } /* big reception monitors: everything a notch larger */
body {
  background: var(--app-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.015em; font-weight: 650; color: var(--bs-emphasis-color); }
a { text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-subtle); }
.text-muted { color: var(--text-muted) !important; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.min-w-0 { min-width: 0; }

.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 2000;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Shell ---------- */
.app-main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; } /* one wide element must not zoom out the whole mobile layout */
.app-content { flex: 1 0 auto; }
.app-content:focus { outline: none; }
/* Pages span sidebar -> right edge; only the gutter is fluid. Lay content out with grids, never a max-width. */
.page { max-width: none; margin: 0; padding: 0 var(--page-x) 2.5rem; }
.page-narrow { max-width: none; }
.app-content > .container { max-width: none; padding-left: var(--page-x); padding-right: var(--page-x); }

.app-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  padding: 1.25rem 1rem 1.5rem; font-size: .8125rem; color: var(--text-muted);
}
.app-footer a { color: inherit; }

.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-logo { display: flex; align-items: center; height: 34px; flex-shrink: 0; }
.brand-logo img { height: 100%; width: auto; max-width: 112px; object-fit: contain; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1rem;
  background: linear-gradient(140deg, #4f8bff, #1d4ed8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-name { color: #fff; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo + .brand-name { padding-left: .7rem; border-left: 1px solid rgba(255, 255, 255, .16); font-weight: 600; color: #e5e9f0; }
.brand-compact .brand-logo { height: 28px; }

.nav-group-label {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); padding: 1.1rem .75rem .4rem;
}

/* Sidebar (desktop) */
.sidebar { display: none; }
.appbar { display: flex; }
.tabbar { display: grid; }
@media (min-width: 992px) {
  .sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030;
    width: var(--sidebar-w); padding: 1rem .75rem .75rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, #1d4ed8) 0%, var(--ink) 38%), var(--ink);
    color: var(--ink-text);
    border-right: 1px solid var(--ink-border);
  }
  .has-shell .app-main { margin-left: var(--sidebar-w); }
  .appbar, .tabbar { display: none !important; }
  .page { padding-bottom: 3.5rem; }
  :root { --stick-top: var(--head-h, 0px); }
}
.sidebar-brand { display: flex; padding: .4rem .6rem 1rem; text-decoration: none; border-radius: var(--radius-sm); }
.sidebar-nav { flex: 1; overflow-y: auto; margin: 0 -.25rem; padding: 0 .25rem; scrollbar-width: thin; }
.sidebar-nav .nav-group-label:first-child { padding-top: .5rem; }
.side-link {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: 40px; padding: .5rem .75rem; margin-bottom: 2px; border-radius: var(--radius-sm);
  color: var(--ink-text); text-decoration: none; font-weight: 500; font-size: .9375rem;
  transition: background-color .15s, color .15s;
}
.side-link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; opacity: .8; }
.side-link:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.side-link.active { background: linear-gradient(90deg, rgba(96, 165, 250, .16), rgba(255, 255, 255, .05)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.side-link.active .bi { color: var(--accent-bright); opacity: 1; }
.side-link.active::before {
  content: ""; position: absolute; left: -.75rem; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-bright);
}
.side-link:focus-visible, .user-card:focus-visible, .sidebar-brand:focus-visible { outline-color: var(--accent-bright); }
.sidebar-user { border-top: 1px solid var(--ink-border); padding-top: .75rem; margin-top: .5rem; }
.user-card {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-text); text-align: left;
}
.user-card:hover, .user-card[aria-expanded="true"] { background: rgba(255, 255, 255, .06); }
.user-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.user-card-name { color: #fff; font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card-role { color: var(--ink-muted); font-size: .75rem; }
.sidebar .avatar-initials, .appbar .avatar-initials { background: rgba(255, 255, 255, .12); color: #fff; }

/* App bar (phones/tablets) */
.appbar {
  position: sticky; top: 0; z-index: 1030;
  align-items: center; gap: .75rem;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(.75rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--ink-border);
}
.appbar-brand { display: flex; flex: 1; min-width: 0; text-decoration: none; }
.appbar-avatar {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; padding: 0;
}
.appbar-avatar:focus-visible { outline-color: var(--accent-bright); }

/* Bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); padding: 6px 2px; border: 0; background: transparent;
  color: var(--text-muted); text-decoration: none; font-size: .71875rem; font-weight: 500; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tab > * { position: relative; }
.tab .bi { font-size: 1.25rem; line-height: 1; }
.tab::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 56px; height: 30px; margin-left: -28px;
  border-radius: 15px; background: var(--accent-subtle); transform: scaleX(.4); opacity: 0;
  transition: transform .2s, opacity .2s;
}
.tab.active { color: var(--accent-text); font-weight: 600; }
.tab.active::before { transform: none; opacity: 1; }
.tab:hover { color: var(--text); }
.tab.active:hover { color: var(--accent-text); }
.tab:focus-visible { outline-offset: -4px; border-radius: 12px; }
@media (max-width: 991.98px) {
  .has-shell .app-main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* "Više" bottom sheet + user menu */
.sheet.offcanvas-bottom {
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-border-color: var(--border);
  height: auto; max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-grabber, .modal-sheet .modal-content::before {
  width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 0;
}
.sheet .offcanvas-header { padding: .75rem 1.25rem .5rem; }
.sheet .offcanvas-body { padding: 0 .75rem 1rem; }
.sheet .nav-group-label { color: var(--text-muted); }
.sheet-list > form { margin: 0; }
.sheet-link {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  min-height: 52px; padding: .65rem .75rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); text-decoration: none; font-size: 1rem; font-weight: 500; text-align: left;
}
.sheet-link > .bi:first-child { font-size: 1.2rem; width: 1.5rem; text-align: center; color: var(--text-muted); }
.sheet-link.text-danger > .bi:first-child { color: inherit; }
.sheet-link:hover, .sheet-link:active { background: var(--surface-2); color: var(--text); }
.sheet-link.text-danger:hover { color: var(--danger-fg) !important; }
.sheet-link.active { background: var(--accent-subtle); color: var(--accent-text); }
.sheet-link.active > .bi:first-child { color: inherit; }
.sheet-link .bi-chevron-right { color: var(--text-muted); font-size: .85rem; }
.sheet-theme { display: flex; flex-direction: column; gap: .4rem; padding: .75rem .75rem 1rem; }

.user-menu { min-width: 270px; }
.user-menu-head { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem .35rem; }
.user-menu .text-danger:hover, .user-menu .text-danger:focus { color: var(--danger-fg) !important; background: var(--danger-bg); }
.theme-switch > button { flex: 1 1 0; }

/* Default-PIN warning banner */
.shell-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .7rem 1rem; font-size: .9rem;
  background: var(--warning-bg); color: var(--warning-fg); border-bottom: 1px solid var(--warning-border);
}
.shell-banner > .bi { font-size: 1.15rem; }
.shell-banner > span { flex: 1 1 14rem; }
.shell-banner .btn { margin-left: auto; }
@media (min-width: 992px) { .shell-banner { padding: .7rem 2.5rem; } }

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; z-index: 1090; pointer-events: none;
  top: calc(env(safe-area-inset-top) + .6rem); left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 1.5rem));
  display: flex; flex-direction: column; gap: .5rem;
}
@media (min-width: 992px) { .toast-stack { top: 1.25rem; right: 1.25rem; left: auto; transform: none; width: 380px; } }
.app-toast {
  --bs-toast-bg: var(--surface); --bs-toast-border-color: var(--border); --bs-toast-border-radius: var(--radius);
  --bs-toast-box-shadow: var(--shadow-lg); --bs-toast-max-width: 100%; --bs-toast-font-size: .9375rem;
  width: 100%; pointer-events: auto; color: var(--text);
}
.app-toast .toast-body { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem; }
.toast-icon { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; }
.toast-msg { flex: 1; min-width: 0; padding-top: 1px; line-height: 1.45; overflow-wrap: anywhere; }
.app-toast .btn-close { font-size: .7rem; margin: 4px 0 0; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success-fg); }
.toast-danger  .toast-icon { color: var(--danger-fg); }
.toast-warning .toast-icon { color: var(--warning-fg); }
.toast-info    .toast-icon { color: var(--info-fg); }
.toast-success { border-left: 3px solid var(--success-fg) !important; }
.toast-danger  { border-left: 3px solid var(--danger-fg) !important; }
.toast-warning { border-left: 3px solid var(--warning-fg) !important; }
.toast-info    { border-left: 3px solid var(--info-fg) !important; }
.toast.showing, .toast.show { animation: toast-in .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* Install banner (created by app.js) */
.install-banner {
  position: fixed; z-index: 1035; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .75rem);
  width: min(460px, calc(100vw - 1.5rem));
  display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  animation: toast-in .3s cubic-bezier(.2, .8, .2, 1);
}
.is-guest .install-banner { bottom: calc(env(safe-area-inset-bottom) + .75rem); }
@media (min-width: 992px) { .install-banner { left: auto; right: 1.25rem; bottom: 1.25rem; transform: none; } }
.install-banner-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent-text); font-size: 1.1rem; flex-shrink: 0; }
.install-banner-text { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; }
.install-banner-text strong { display: block; font-size: .9375rem; }
.install-banner-text span { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .9375rem;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-focus-box-shadow: 0 0 0 4px var(--ring);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 8px; gap: .35rem; }
.btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--radius); }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .14), 0 2px 6px -2px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-text); --bs-btn-border-color: var(--accent-border);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-color: var(--accent-text); --bs-btn-disabled-border-color: var(--accent-border);
}
.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--text); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost {
  --bs-btn-color: var(--text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--border);
}
.btn-danger {
  --bs-btn-bg: #d92d20; --bs-btn-border-color: #d92d20;
  --bs-btn-hover-bg: #b42318; --bs-btn-hover-border-color: #b42318;
  --bs-btn-active-bg: #912018; --bs-btn-active-border-color: #912018;
  --bs-btn-disabled-bg: #d92d20; --bs-btn-disabled-border-color: #d92d20;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-fg); --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d92d20; --bs-btn-hover-border-color: #d92d20;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #b42318; --bs-btn-active-border-color: #b42318;
}
.btn-ghost { --bs-btn-bg: var(--surface); box-shadow: var(--shadow-sm); }
.btn-ghost.text-danger { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--danger-bg); --bs-btn-hover-border-color: transparent; box-shadow: none; }
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 38px; height: 38px; flex-shrink: 0; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn.is-loading { cursor: progress; }
.btn .spinner-border { --bs-spinner-width: .95em; --bs-spinner-height: .95em; --bs-spinner-border-width: .14em; }
.btn-link { --bs-btn-color: var(--accent-text); --bs-btn-hover-color: var(--accent-hover); }
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn-icon.btn-sm { width: 40px; height: 40px; }
}

/* ---------- Cards / sections ---------- */
.card {
  --bs-card-bg: var(--surface); --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius); --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: .85rem; --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem;
  box-shadow: var(--shadow-sm), var(--highlight);
}
.card-header { font-weight: 600; color: var(--bs-emphasis-color); border-bottom-color: var(--border); }
/* Card header with a title on the left and a quiet action on the right */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 56px; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.card-head .btn .bi-chevron-right { margin: 0 -.2rem 0 .1rem; font-size: .8em; }
.card-head-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: .95rem; }
/* Responsive grid that fills the full width: <div class="auto-grid" style="--min: 320px"> */
.auto-grid { display: grid; gap: clamp(.75rem, .4rem + .6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 320px)), 1fr)); }
.auto-grid.fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 320px)), 1fr)); } /* keep empty tracks: cards stay card-sized */
/* Interactive surfaces lift slightly on hover */
.lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
@media (hover: hover) { .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } }
.card-footer { background: var(--surface-2); }
.card.border-0 { border: 1px solid var(--border) !important; }
.section-title {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: 1rem; font-weight: 650; margin: 0 0 .75rem; letter-spacing: -.01em;
}
.section-meta { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }

/* ---------- Page header (sticky on desktop; app.js adds .is-stuck once content scrolls under it) ---------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1rem; margin: 0 calc(-1 * var(--page-x)) 1.5rem; padding: var(--page-top) var(--page-x) 0;
}
.page-head > :first-child { min-width: 0; }
.page-head h1 { font-size: clamp(1.375rem, 1.1rem + .55vw, 1.875rem); font-weight: 700; letter-spacing: -.03em; margin: 0; line-height: 1.15; }
.page-sub { margin: .35rem 0 0; color: var(--text-muted); font-size: .9375rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 992px) {
  .page > .page-head {
    position: sticky; top: 0; z-index: 1020; padding-bottom: 1rem; margin-bottom: .75rem;
    border-bottom: 1px solid transparent;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
  }
  .page > .page-head.is-stuck {
    background: color-mix(in srgb, var(--app-bg) 80%, transparent);
    -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
    border-bottom-color: var(--border);
    box-shadow: 0 6px 20px -16px rgba(16, 24, 40, .35);
  }
}
@media (max-width: 575.98px) {
  .page-head { margin-bottom: 1.1rem; }
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > form, .page-actions > .dropdown { flex: 1 1 auto; }
  .page-actions > form > .btn, .page-actions > .dropdown > .btn { width: 100%; }
}

/* ---------- Stat tiles ---------- */
.stats { display: grid; gap: clamp(.75rem, .4rem + .6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: clamp(1rem, .6rem + .8vw, 1.75rem); }
@media (max-width: 575.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } }
.stat {
  position: relative; display: flex; flex-direction: column; gap: .25rem; height: 100%; overflow: hidden;
  padding: 1.1rem 1.25rem 1.15rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm), var(--highlight); color: var(--text); text-decoration: none;
  transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease);
}
/* soft tinted glow in the corner, coloured like the icon */
.stat::after {
  content: ""; position: absolute; top: -70px; right: -60px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--stat-tone, var(--accent)) 8%, transparent), transparent);
}
@media (hover: hover) { a.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); color: var(--text); transform: translateY(-2px); } }
.stat-label { font-size: .8125rem; font-weight: 550; color: var(--text-muted); padding-right: 3rem; }
.stat-value { font-size: clamp(1.6rem, 1.3rem + .6vw, 2.125rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin-top: .15rem; font-variant-numeric: tabular-nums; color: var(--bs-emphasis-color); }
.stat-hint { display: flex; align-items: center; font-size: .8125rem; color: var(--text-muted); }
.stat-delta { font-weight: 600; }
.stat-delta.up { color: var(--success-fg); }
.stat-delta.down { color: var(--danger-fg); }
.stat-icon {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 12px; z-index: 1;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--accent-subtle); color: var(--accent-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}
.stat:has(.tone-success) { --stat-tone: var(--success-fg); }
.stat:has(.tone-warning) { --stat-tone: var(--warning-fg); }
.stat:has(.tone-danger)  { --stat-tone: var(--danger-fg); }
@media (max-width: 575.98px) {
  .stat { padding: .85rem .9rem; }
  .stat-value { font-size: 1.45rem; }
  .stat-icon { width: 32px; height: 32px; font-size: .9rem; top: .75rem; right: .75rem; border-radius: 9px; }
  .stat-label { padding-right: 2.2rem; }
}
.tone-accent  { background: var(--accent-subtle) !important; color: var(--accent-text) !important; }
.tone-success { background: var(--success-bg) !important; color: var(--success-fg) !important; }
.tone-warning { background: var(--warning-bg) !important; color: var(--warning-fg) !important; }
.tone-danger  { background: var(--danger-bg) !important;  color: var(--danger-fg) !important; }
.tone-info    { background: var(--info-bg) !important;    color: var(--info-fg) !important; }
.tone-muted   { background: var(--muted-bg) !important;   color: var(--muted-fg) !important; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .2rem .6rem; border-radius: 999px; font-size: .78125rem; font-weight: 600; line-height: 1.4;
  background: var(--muted-bg); color: var(--muted-fg);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-nodot::before { display: none; }
.pill-success { background: var(--success-bg); color: var(--success-fg); }
.pill-warning { background: var(--warning-bg); color: var(--warning-fg); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.pill-info    { background: var(--info-bg);    color: var(--info-fg); }
.pill-muted   { background: var(--muted-bg);   color: var(--muted-fg); }

/* ---------- Empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem; padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) 1.25rem; }
.empty-state-icon {
  position: relative; width: 56px; height: 56px; border-radius: 16px; margin-bottom: .9rem;
  display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--text-muted); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), 0 0 0 8px color-mix(in srgb, var(--surface-2) 70%, transparent), 0 0 0 9px var(--border);
}
.empty-state h3, .empty-state .empty-state-title { font-size: 1.0625rem; font-weight: 650; margin: 0; }
.empty-state p { color: var(--text-muted); max-width: 38ch; margin: 0 0 .6rem; }

/* ---------- Toolbar / search / segmented ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.search { position: relative; flex: 1 1 240px; max-width: 420px; }
.search > .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: .95rem; }
.search > .form-control { padding-left: 2.4rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) {
  .search { flex-basis: 100%; max-width: none; }
  .toolbar > .segmented { max-width: 100%; }
  .toolbar-actions { margin-left: 0; width: 100%; }
  .toolbar-actions > .btn { flex: 1 1 auto; }
}
.segmented {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-3); border-radius: var(--radius-sm);
}
.segmented::-webkit-scrollbar { display: none; }
.segmented > a, .segmented > button, .segmented > label {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: 1 0 auto;
  min-height: 34px; padding: .35rem .85rem; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted); font-size: .875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s;
}
.segmented > a:hover, .segmented > button:hover, .segmented > label:hover { color: var(--text); }
.segmented > input { position: absolute; opacity: 0; pointer-events: none; }
.segmented > .active, .segmented > [aria-pressed="true"], .segmented > [aria-current]:not([aria-current="false"]), .segmented > input:checked + label {
  background: var(--surface); color: var(--bs-emphasis-color); font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .04);
}
[data-bs-theme="dark"] .segmented > .active, [data-bs-theme="dark"] .segmented > [aria-pressed="true"],
[data-bs-theme="dark"] .segmented > [aria-current]:not([aria-current="false"]), [data-bs-theme="dark"] .segmented > input:checked + label {
  background: var(--border-strong); box-shadow: none;
}
.segmented > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented .count { font-size: .75rem; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.segmented-sm > a, .segmented-sm > button, .segmented-sm > label { min-height: 30px; padding: .25rem .6rem; font-size: .8125rem; }
@media (pointer: coarse) { .segmented > a, .segmented > button, .segmented > label { min-height: 40px; } }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text);
  --bs-table-striped-bg: var(--hover); --bs-table-striped-color: var(--text);
  --bs-table-active-bg: var(--accent-subtle);
}
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
.table > thead > tr > th {
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); background: var(--surface-2); white-space: nowrap;
}
.table-light { --bs-table-color: var(--text-muted); --bs-table-bg: var(--surface-2); --bs-table-border-color: var(--border); }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.card > .table, .card > .table-responsive > .table, .card > .card-body.p-0 > .table-responsive > .table { margin-bottom: 0; }
.table-card { overflow: hidden; overflow: clip; } /* clip (not hidden) so sticky headers inside still stick to the page */
.table > tbody > tr { transition: background-color .12s; }
/* Sticky column headers on desktop: <div class="table-responsive table-sticky"> */
@media (min-width: 992px) {
  .table-sticky { overflow: visible; }
  .table-sticky > .table > thead > tr > th { position: sticky; top: var(--stick-top); z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
}
.table-card thead th:first-child, .table-card tbody td:first-child { padding-left: 1.25rem; }
.table-card thead th:last-child, .table-card tbody td:last-child { padding-right: 1.25rem; }
tr.filter-empty > td { padding: 0 !important; }
.filter-empty-msg { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2rem 1rem; color: var(--text-muted); text-align: center; }
@media (max-width: 767.98px) {
  .table-card:has(.table-stack) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .table-stack, .table-stack > tbody { display: block; width: 100%; }
  .table-stack > thead { display: none; }
  .table-stack > tbody > tr {
    display: block; margin-bottom: .65rem; padding: .8rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  }
  .table-stack > tbody > tr > td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .3rem 0 !important; border: 0; text-align: right; background: transparent; box-shadow: none;
  }
  .table-stack > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    color: var(--text-muted); font-size: .8125rem; font-weight: 500;
  }
  .table-stack > tbody > tr > td.cell-primary { justify-content: flex-start; text-align: left; font-weight: 600; padding-bottom: .5rem !important; }
  .table-stack > tbody > tr > td.cell-actions {
    justify-content: flex-end; flex-wrap: wrap; gap: .5rem;
    margin-top: .5rem; padding-top: .7rem !important; border-top: 1px solid var(--border);
  }
  .table-stack > tbody > tr.filter-empty { padding: 0; }
  .table-stack > tbody > tr.filter-empty > td { justify-content: center; }
}

/* ---------- Avatar ---------- */
.avatar {
  --avatar-size: 40px;
  width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0;
  display: inline-grid; place-items: center; overflow: hidden; vertical-align: middle;
  border-radius: 50%; object-fit: cover; background: var(--surface-3); color: var(--text-muted);
}
.avatar-sm { --avatar-size: 32px; }
.avatar-md { --avatar-size: 40px; }
.avatar-lg { --avatar-size: 64px; }
.avatar-initials {
  background: var(--accent-subtle); color: var(--accent-text);
  font-weight: 650; font-size: calc(var(--avatar-size) * .38); letter-spacing: .02em; line-height: 1; user-select: none;
}

/* ---------- Forms ---------- */
.form-label { font-size: .875rem; font-weight: 550; margin-bottom: .35rem; color: var(--bs-emphasis-color); }
.form-label.required::after, .required > .form-label::after { content: " *"; color: var(--danger-fg); }
.form-text { color: var(--text-muted); font-size: .8125rem; }
.form-control, .form-select {
  --bs-border-color: var(--border-strong);
  padding: .55rem .85rem; font-size: 1rem; border-radius: var(--radius-sm);
  background-color: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.4rem; }
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .875rem; border-radius: 8px; }
.form-control::placeholder { color: var(--text-muted); opacity: .8; }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-muted)); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); background-color: var(--surface); color: var(--text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-2); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .2); }
.invalid-feedback { font-size: .8125rem; color: var(--danger-fg); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger-fg); }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); }
.form-floating > .form-control, .form-floating > .form-select { padding-top: 1.625rem; padding-bottom: .625rem; }
.form-floating > label { color: var(--text-muted); }
.form-floating > .form-control ~ label::after, .form-floating > .form-select ~ label::after { background-color: var(--surface) !important; }
.form-check-input { --bs-border-color: var(--border-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.form-switch { padding-left: 3.1em; }
.form-switch .form-check-input { width: 2.4em; height: 1.35em; margin-top: .05em; margin-left: -3.1em; }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
@media (pointer: coarse) {
  .form-control:not(textarea):not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: 44px; }
  .form-check-input { width: 1.25em; height: 1.25em; }
}
.form-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--highlight); padding: 1.25rem; margin-bottom: 1rem;
}
@media (min-width: 768px) { .form-section { padding: 1.5rem 1.6rem; } }
.form-section-title { display: flex; align-items: center; gap: .6rem; font-size: 1.0625rem; font-weight: 650; margin: 0 0 .25rem; }
.form-section-title > .section-icon { margin-right: .1rem; }
/* Small tinted icon tile used in section titles */
.section-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: inline-grid; place-items: center; font-size: .95rem; background: var(--accent-subtle); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }
/* Section cards side by side on wide screens: <div class="section-grid"> <section class="form-section">… */
.section-grid { display: grid; gap: clamp(1rem, .6rem + .6vw, 1.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.section-grid > .form-section, .section-grid > form > .form-section { margin: 0; }
@media (min-width: 1200px) { .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .section-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Keep single inputs at a readable width inside wide cards */
.field-narrow { max-width: 14rem; }
.field-medium { max-width: 28rem; }
.form-section-desc { color: var(--text-muted); font-size: .875rem; margin: 0 0 1.1rem; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-top: .5rem; }
@media (max-width: 991.98px) {
  .form-actions-sticky {
    position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    margin: 1rem -1rem 0; padding: .75rem 1rem;
    background: color-mix(in srgb, var(--app-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .is-guest .form-actions-sticky { bottom: 0; }
  .form-actions-sticky > .btn { flex: 1 1 0; }
}

/* ---------- Dropdowns / nav / alerts / misc Bootstrap ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius); --bs-dropdown-inner-border-radius: calc(var(--radius) - 1px);
  --bs-dropdown-padding-x: .35rem; --bs-dropdown-padding-y: .35rem;
  --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-item-border-radius: 8px;
  --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--accent);
  --bs-dropdown-divider-bg: var(--border); --bs-dropdown-font-size: .9375rem;
  box-shadow: var(--shadow-lg);
}
.dropdown-item { display: flex; align-items: center; gap: .6rem; }
.dropdown-item > .bi { color: var(--text-muted); width: 1.1rem; text-align: center; }
.dropdown-item.text-danger > .bi, .dropdown-item:active > .bi { color: inherit; }
@media (pointer: coarse) { .dropdown-item { min-height: 44px; } }
.nav-pills { --bs-nav-pills-link-active-bg: var(--accent); --bs-nav-pills-border-radius: var(--radius-sm); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); --bs-nav-tabs-link-hover-border-color: transparent; }
.nav-tabs .nav-link { color: var(--text-muted); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--bs-emphasis-color); font-weight: 600; }
.nav-link { --bs-nav-link-color: var(--accent-text); --bs-nav-link-hover-color: var(--accent-hover); }
.alert { --bs-alert-border-radius: var(--radius); font-size: .9375rem; }
.badge { font-weight: 600; letter-spacing: .01em; }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); --bs-list-group-active-bg: var(--accent); --bs-list-group-active-border-color: var(--accent); --bs-list-group-action-hover-bg: var(--surface-2); }
.progress { --bs-progress-bar-bg: var(--accent); --bs-progress-bg: var(--surface-3); }
.pagination { --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-color: var(--accent-text); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-border-color: var(--border); }
.popover, .tooltip { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); }
hr { border-color: var(--border); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { --bs-border-color: var(--border); }

/* ---------- Modals & bottom sheets ----------
   RULE: dialogs never scroll internally — everything must be visible at once. Make a dialog wider
   (--bs-modal-width on the .modal) and lay fields out in columns instead of letting it grow tall.
   Only a phone sheet that is taller than the screen falls back to scrolling the whole sheet (.modal). */
.modal {
  --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: 16px; --bs-modal-inner-border-radius: 15px;
  --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border);
  --bs-modal-header-padding: .9rem 1.5rem; --bs-modal-padding: 1.25rem 1.5rem; --bs-modal-footer-gap: .5rem;
  --bs-modal-box-shadow: var(--shadow-lg);
}
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-size: 1.0625rem; font-weight: 650; }
.modal-footer { background: var(--surface); padding: .75rem 1.25rem; }
.modal-backdrop { --bs-backdrop-bg: #070b13; --bs-backdrop-opacity: .5; }
.modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-body .form-label { margin-bottom: .3rem; }
/* Compact section label inside dialogs: <h3 class="modal-section-title">Kontakt</h3> */
.modal-section-title { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 .6rem; }
@media (min-width: 576px) {
  /* wide dialogs keep a gutter on tablets */
  .modal-dialog { max-width: min(var(--bs-modal-width), calc(100% - 2rem)); }
}
@media (min-width: 576px) and (max-height: 820px) { .modal { --bs-modal-margin: .75rem; } }
@media (max-width: 575.98px) {
  .modal { --bs-modal-padding: 1rem; --bs-modal-header-padding: .75rem 1rem; }
  .modal-sheet .modal-dialog {
    display: flex; align-items: flex-end; margin: 0; max-width: none; width: 100%;
    min-height: 100%; padding-top: calc(env(safe-area-inset-top) + 1rem);
  }
  .modal-sheet .modal-content {
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-sheet .modal-content::before { content: ""; display: block; flex-shrink: 0; }
  .modal-sheet .modal-header { border-bottom: 0; padding-bottom: .25rem; }
  .modal-sheet .modal-body { padding-top: .5rem; }
  .modal-sheet .modal-footer { flex-wrap: nowrap; padding: .6rem 1rem .75rem; }
  .modal-sheet .modal-footer > .btn { flex: 1 1 0; }
  .modal-sheet.fade .modal-dialog { transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .modal-sheet.show .modal-dialog { transform: none; }
}

/* Confirm dialog (built by app.js) */
.confirm-modal .modal-dialog { max-width: 420px; }
.confirm-modal .modal-body { padding: 1.5rem 1.5rem .5rem; }
.confirm-modal .modal-footer { border-top: 0; padding: 1rem 1.5rem 1.25rem; }
.confirm-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 1rem; background: var(--accent-subtle); color: var(--accent-text); }
.confirm-modal.is-danger .confirm-icon { background: var(--danger-bg); color: var(--danger-fg); }
.confirm-msg { color: var(--text-muted); margin: .4rem 0 0; white-space: pre-line; }
.confirm-type { margin-top: 1rem; }
.confirm-type .form-label strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--danger-fg); letter-spacing: .04em; }

/* ---------- Login (index.php) ---------- */
.is-guest {
  background:
    radial-gradient(900px 520px at 0% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    radial-gradient(700px 480px at 110% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--app-bg);
  background-attachment: fixed;
}
.auth { min-height: calc(100dvh - 64px); display: grid; place-items: center; padding: max(1.5rem, env(safe-area-inset-top)) 1rem 1rem; }
.auth-card {
  width: 100%; max-width: 380px; padding: 2rem 1.5rem 1.5rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg);
}
@media (min-width: 576px) { .auth-card { padding: 2.25rem 2rem 1.75rem; } }
.auth-brand { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.auth-brand .brand-chip {
  display: inline-flex; align-items: center; gap: .6rem; height: 56px; padding: 0 1rem;
  background: var(--ink); border-radius: 16px; box-shadow: var(--shadow-md);
}
.auth-brand .brand-chip img { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.auth-brand .brand-mark { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }
.auth-site { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.auth-sub { color: var(--text-muted); margin: .35rem 0 0; font-size: .9375rem; }
.pin-dots { display: flex; justify-content: center; gap: .9rem; margin: 1.5rem 0 .25rem; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.pin-dot.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.has-error .pin-dot { border-color: var(--danger-fg); }
.auth-msg { min-height: 1.5rem; margin: .5rem 0 0; font-size: .875rem; font-weight: 500; color: var(--danger-fg); }
.auth-msg:empty { visibility: hidden; }
.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.pin-key {
  display: grid; place-items: center; height: 64px; padding: 0;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2);
  color: var(--bs-emphasis-color); font-size: 1.5rem; font-weight: 550; font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .12s, transform .08s, border-color .12s;
}
.pin-key:hover:not(:disabled) { background: var(--surface-3); }
.pin-key:active:not(:disabled), .pin-key.pressed { transform: scale(.95); background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-text); }
.pin-key-fn { background: transparent; border-color: transparent; color: var(--text-muted); font-size: 1.3rem; }
.pin-key:disabled { opacity: .4; cursor: not-allowed; }
.is-busy .pinpad { opacity: .6; pointer-events: none; }
.auth-foot { margin-top: 1.25rem; font-size: .8125rem; color: var(--text-muted); }
.auth-foot kbd { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); font-size: .75rem; padding: .1rem .35rem; }
@media (max-height: 680px) { .pin-key { height: 54px; } .auth-card { padding-top: 1.5rem; } .pin-dots { margin-top: 1.1rem; } }

/* ---------- Legacy helpers (old pages; remove once all pages use the new components) ---------- */
.page-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.page-title > .bi { color: var(--accent-text); }
.page-title h1 { font-size: 1.5rem !important; font-weight: 700; letter-spacing: -.025em; }
.table-fixed { table-layout: fixed; }
.grid-cell { min-width: 45px; text-align: center; }
.shadow-hover { transition: box-shadow .2s, transform .2s; }
.shadow-hover:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); }
.table thead th.sticky { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.table.grid-yellow > :not(caption) > * > * { background-color: var(--grid-yellow) !important; }
.table.grid-yellow > thead > tr > th { background-color: var(--surface-2) !important; }
.table.grid-yellow.table-hover tbody tr:hover > * { background-color: var(--grid-yellow-hover) !important; }
.cal-cell.has-events { background: var(--grid-yellow) !important; }
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }
@media (max-width: 576px) { .btn-responsive { padding: .65rem .9rem; font-size: 1rem; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}