/* =============================================================================
   ZEETIUS TOURNAMENTS — DESIGN SYSTEM  (v2 · "Navy + Electric")
   -----------------------------------------------------------------------------
   A single, documented visual foundation layered on top of Bootstrap 5.
   Visual-only: no markup, routes, or business logic required. Restyling the
   shared Bootstrap components here cascades the new look to every module.

   Brand:   Deep navy (#0C172F) = identity.  Indigo→Violet→Cyan gradient = energy.
   Spacing: strict 8px grid (--space-*).      Type: Inter (UI) + Lexend (display).

   CONTENTS
     1. Design tokens (:root)         6. Forms & controls
     2. Bootstrap variable bridge     7. Tabs · Alerts · Dropdowns
     3. Base, a11y & typography       8. Tables · Pagination
     4. Buttons                       9. Modals · Badges · Chips
     5. Cards · Stat tiles          10. Skeletons · Utilities · Motion
   ========================================================================== */

/* ============================ 1. DESIGN TOKENS ============================ */
:root {
    /* ---- Brand: navy identity scale ---- */
    --brand-950: #060B17;
    --brand-900: #0C172F;   /* primary brand navy */
    --brand-800: #142140;
    --brand-700: #1E2E52;
    --brand-600: #2B3D68;
    --brand: var(--brand-900);

    /* ---- Electric accent gradient stops (energy / premium) ---- */
    --elec-indigo: #6366F1;
    --elec-violet: #8B5CF6;
    --elec-cyan:   #06B6D4;
    --elec-blue:   #3B82F6;
    --brand-gold:  #FCED23;   /* sports CTA highlight (used sparingly) */

    /* ---- Secondary sport accents (live/success/energy highlights — NOT a
       replacement for the gold primary CTA) ---- */
    --accent-lime:   #84CC16;
    --accent-green:  #22C55E;
    --accent-orange: #F97316;

    /* ---- "Stadium Energy" retouch tokens — scoped to shared chrome + the
       Home/Browse marketing pages, deliberately separate from the tokens
       above so nothing outside those pages shifts color. ---- */
    --stadium-navy:     #0a0e1a;
    --stadium-navy-2:   var(--brand-700);  /* = #1E2E52, already an exact match */
    --stadium-lime:     #c6f135;           /* true neon — distinct from --accent-lime */
    --stadium-lime-ink: var(--stadium-navy);
    --stadium-gradient-navy: linear-gradient(135deg, var(--stadium-navy-2) 0%, var(--stadium-navy) 100%);
    --stadium-font:     'Archivo', var(--ds-font-display);

    /* ---- Signature gradients ---- */
    --ds-gradient:        linear-gradient(135deg, var(--elec-indigo) 0%, #4F46E5 50%, #2563EB 100%);
    --ds-gradient-accent: linear-gradient(135deg, var(--elec-violet) 0%, var(--elec-indigo) 50%, var(--elec-cyan) 100%);
    --ds-gradient-hero:   linear-gradient(120deg, var(--brand-900) 0%, #26306A 55%, #0E7490 130%);
    --ds-gradient-navy:   linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
    --ds-gradient-lime:   linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-green) 100%);
    --ds-gradient-orange: linear-gradient(135deg, #FB923C 0%, var(--accent-orange) 100%);

    /* ---- Semantic ---- */
    --ds-primary:        var(--brand-900);
    --ds-primary-hover:  var(--brand-800);
    --ds-accent:         var(--elec-indigo);
    --ds-accent-2:       var(--elec-cyan);
    --ds-success: #16A34A;
    --ds-warning: #F59E0B;
    --ds-danger:  #EF4444;
    --ds-info:    #0EA5E9;

    /* ---- Neutrals (slate) ---- */
    --slate-50:  #F8FAFC;  --slate-100: #F1F5F9; --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;  --slate-400: #94A3B8; --slate-500: #64748B;
    --slate-600: #475569;  --slate-700: #334155; --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* ---- Surface / text / border ---- */
    --ds-bg:             #F5F7FB;
    --ds-surface:        #FFFFFF;
    --ds-surface-alt:    #FAFBFE;
    --ds-border:         #E6E8EF;
    --ds-border-strong:  #D5D9E4;
    --ds-text:           var(--slate-900);
    --ds-text-secondary: var(--slate-500);
    --ds-text-muted:     var(--slate-400);
    --ds-hover:          var(--slate-100);
    --ds-selected:       #E9E8FD;
    /* Open-accordion trigger text — needs its own theme-aware token because
       --brand-900 (navy) is fixed regardless of theme; against the dark-mode
       --ds-hover background it was reading as near-invisible navy-on-navy. */
    --ds-acc-open-color: var(--brand-900);

    /* ---- Spacing — 8px grid (base unit = 8px) ---- */
    --space-0:  0;
    --space-1:  4px;    /* 0.5× */
    --space-2:  8px;    /* 1×   */
    --space-3:  12px;   /* 1.5× */
    --space-4:  16px;   /* 2×   */
    --space-5:  24px;   /* 3×   */
    --space-6:  32px;   /* 4×   */
    --space-7:  40px;   /* 5×   */
    --space-8:  48px;   /* 6×   */
    --space-9:  64px;   /* 8×   */
    --space-10: 80px;   /* 10×  */
    --space-12: 96px;   /* 12×  */

    /* ---- Typography ---- */
    --ds-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ds-font-display: 'Lexend', 'Inter', system-ui, sans-serif;
    --fs-xs:   12px;  --fs-sm:  13px;  --fs-base: 14px; --fs-md: 15px;
    --fs-lg:   16px;  --fs-xl:  18px;  --fs-2xl: 21px;  --fs-3xl: 26px;
    --fs-4xl:  32px;  --fs-5xl: clamp(30px, 4vw, 46px);

    /* ---- Radius ---- */
    --ds-radius-sm:   10px;
    --ds-radius:      14px;
    --ds-radius-lg:   20px;
    --ds-radius-xl:   28px;
    --ds-radius-pill: 999px;

    /* ---- Elevation ---- */
    --ds-shadow-xs:      0 1px 2px rgba(15,23,42,.06);
    --ds-shadow-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --ds-shadow-md:      0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
    --ds-shadow-lg:      0 12px 28px rgba(15,23,42,.12), 0 6px 12px rgba(15,23,42,.06);
    --ds-shadow-xl:      0 24px 56px rgba(15,23,42,.16);
    --ds-shadow-primary: 0 8px 22px rgba(37,99,235,.34);
    --ds-shadow-navy:    0 10px 26px rgba(12,23,47,.28);
    --ds-ring:           0 0 0 3px rgba(59,130,246,.35);   /* focus ring */

    /* ---- Motion / z-index ---- */
    --ds-ease:      cubic-bezier(.4, 0, .2, 1);
    --ds-ease-out:  cubic-bezier(.22, 1, .36, 1);
    --ds-t-fast:    .12s;
    --ds-t:         .2s;
    --ds-t-slow:    .32s;
    --z-header: 1030;
    --z-modal:  1055;
    --z-toast:  1090;
}

/* This legacy --ds-* token system (gamification badges, breadcrumbs, timeline
   cards, FAQ accordion, results tables, ...) predates the newer --zt-* tokens
   in tailwind-src.css and never got a dark-mode pass — every --ds-surface/
   --ds-text* value above is hardcoded light, so any .ds-* component reads as
   near-white-on-near-white once .dark is applied to <html>. Mirrors the same
   navy palette --zt-* already uses in dark mode so the two systems feel like
   one theme instead of two clashing surfaces. */
.dark {
    --ds-bg:             #0d1120;
    --ds-surface:        #12162a;
    --ds-surface-alt:    #1b2140;
    --ds-border:         #2a305a;
    --ds-border-strong:  #363d6e;
    --ds-text:           #eef0fb;
    --ds-text-secondary: #a7addd;
    --ds-text-muted:     #7d84b8;
    --ds-hover:          #1b2140;
    --ds-selected:       rgba(139, 92, 246, .18);
    --ds-acc-open-color: #eef0fb;
}

/* ======================= 2. BOOTSTRAP VARIABLE BRIDGE ===================== */
/* Map the brand onto Bootstrap so every native component inherits the system. */
:root {
    --bs-primary:        var(--brand-900);
    --bs-primary-rgb:    12, 23, 47;
    --bs-link-color:     var(--elec-blue);
    --bs-link-hover-color:#2563EB;
    --bs-border-color:   var(--ds-border);
    --bs-body-color:     var(--ds-text);
    --bs-body-bg:        var(--ds-bg);
    --bs-secondary-color:var(--ds-text-secondary);
    --bs-border-radius:  var(--ds-radius);
    --bs-font-sans-serif: var(--ds-font);
}

/* ==================== 3. BASE, ACCESSIBILITY & TYPE ====================== */
/* This stylesheet was written assuming Bootstrap's reboot.css was still loaded
   (see file header) — it set `box-sizing: border-box` globally. Bootstrap's CSS
   was fully removed site-wide and Tailwind's own reset (preflight) is deliberately
   off (see tailwind.config.js), so without this, every element that combines
   `width: 100%` with padding/border (content-box default) overflows its
   container by that padding+border amount — e.g. the login modal's inputs,
   causing a stray horizontal scrollbar. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Bootstrap's CSS used to hide `<div asp-validation-summary>` whenever a form has no
   errors (`.validation-summary-valid { display: none }`). ASP.NET Core's tag helper
   always renders a `<ul><li style="display:none"></li></ul>` inside that div even when
   there are zero errors, so it's never actually DOM-`:empty` — with Bootstrap gone,
   nothing hid it anymore, leaving a visible-but-blank styled bar on every clean form
   load (e.g. Admin/CreateRegistration's error-summary). */
.validation-summary-valid {
    display: none;
}

body {
    font-family: var(--ds-font) !important;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--ds-text);
    background: linear-gradient(180deg, #EEF3FE 0%, #F6F8FD 32%, #FFFFFF 68%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.006em;
    position: relative;
}
/* This gradient is an opaque background-image, which paints over the dark
   background-color tailwind.css sets on body for .dark — without this override,
   dark mode keeps the light gradient while text switches to its light-on-dark
   color, making page content unreadable everywhere the body shows through
   (i.e. anywhere not inside a .zt-card). */
.dark body {
    background: rgb(var(--zt-surface-2));
}
/* Soft ambient glows behind every page — depth without clutter. Fixed +
   negative z-index so it never intercepts clicks or scrolls with content. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(620px circle at 6% 6%,   rgba(99,102,241,.10), transparent 60%),
        radial-gradient(580px circle at 100% 16%, rgba(37,99,235,.09),  transparent 55%),
        radial-gradient(520px circle at 14% 96%,  rgba(252,237,35,.06), transparent 55%),
        radial-gradient(560px circle at 92% 92%,  rgba(34,197,94,.06),  transparent 55%);
}
@media (prefers-reduced-transparency: reduce), (max-width: 575.98px) {
    body::before { display: none; }
}

/* Section background rhythm — alternate these between page sections instead
   of leaving every block on the same flat white/grey. */
.ds-sect-white  { background: var(--ds-surface); }
.ds-sect-tint   { background: linear-gradient(180deg, #EEF3FE 0%, #F7F9FD 100%); }
.ds-sect-grey   { background: var(--ds-bg); }
.ds-sect-navy   { background: var(--ds-gradient-navy); color: #fff; }

/* Glassmorphism — reserve for hero/CTA surfaces only, never regular content
   cards (those stay solid white per the design system). */
.ds-glass {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 8px 32px rgba(15,23,42,.14);
}
.ds-glass-dark {
    background: rgba(12,23,47,.35); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--ds-font-display); }
h1,.h1 { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.022em; }
h2,.h2 { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.22; letter-spacing: -0.018em; }
h3,.h3 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3;  letter-spacing: -0.012em; }
h4,.h4 { font-size: var(--fs-xl);  font-weight: 600; line-height: 1.4; }
h5,.h5 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.4; }
h6,.h6 { font-size: var(--fs-sm);  font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-text-secondary); }

.ds-display   { font-family: var(--ds-font-display); font-size: var(--fs-5xl); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
.ds-eyebrow   { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ds-accent); }
.ds-lead      { font-size: var(--fs-xl); color: var(--ds-text-secondary); line-height: 1.5; }
.ds-rank-accent {
    color: var(--elec-indigo);
}
.text-muted, .text-secondary { color: var(--ds-text-secondary) !important; }

a  { color: var(--elec-blue); text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: color var(--ds-t-fast) var(--ds-ease); }
a:hover { color: #2563EB; }

/* Consistent, always-visible keyboard focus (WCAG 2.4.7) */
*:focus { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible, [tabindex]:focus-visible,
.page-link:focus-visible, summary:focus-visible {
    outline: none;
    box-shadow: var(--ds-ring);
    border-radius: 8px;
}

/* Skip link (present in _Layout) */
.ds-skip-link {
    position: absolute; left: var(--space-2); top: -60px; z-index: var(--z-toast);
    background: var(--brand-900); color: #fff; padding: 10px 18px;
    border-radius: var(--ds-radius-sm); font-weight: 600; box-shadow: var(--ds-shadow-lg);
    transition: top var(--ds-t) var(--ds-ease);
}
.ds-skip-link:focus { top: var(--space-2); color: #fff; }

/* Icon-size utilities (Bootstrap Icons has no fa-*x equivalent) */
.ds-ico-2x { font-size: 2em; }
.ds-ico-3x { font-size: 3em; }

/* Screen-reader-only helper */
.ds-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--ds-selected); }

/* Custom scrollbar */
* { scrollbar-color: #C7CBDA transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #C7CBDA; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #AEB3C8; background-clip: content-box; }
/* No arrow buttons at the track ends — otherwise they can render inside/beside a sticky
   header (see the Admin Users table) and look like a stray glyph next to the column labels. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ---- Page shell / section rhythm (8px based) ---- */
.ds-section { padding-block: var(--space-8); }
.ds-container { max-width: 1240px; margin-inline: auto; padding-inline: var(--space-4); }
.ds-stack > * + * { margin-top: var(--space-4); }
.ds-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Hero / page header ---- */
.ds-hero {
    position: relative; overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-gradient-hero); color: #fff;
    padding: var(--space-6) var(--space-6);
    box-shadow: var(--ds-shadow-lg);
}
.ds-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(900px 280px at 110% -40%, rgba(255,255,255,.26), transparent 60%),
        radial-gradient(520px 220px at -10% 130%, rgba(6,182,212,.28), transparent 60%);
}
.ds-hero > * { position: relative; z-index: 1; }
.ds-hero h1, .ds-hero h2, .ds-hero .h1, .ds-hero .h2 { color: #fff; }
.ds-hero .ds-hero-sub { color: rgba(255,255,255,.85); }

/* ============================ 4. BUTTONS ================================= */
.btn {
    --bs-btn-focus-box-shadow: var(--ds-ring);
    border-radius: 12px;
    font-weight: 600;
    font-size: var(--fs-base);
    padding: 10px 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    transition: filter var(--ds-t-fast) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease),
                background-color var(--ds-t-fast) var(--ds-ease), transform .08s var(--ds-ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 13px 26px; border-radius: 14px; font-size: var(--fs-md); }
.btn-sm { padding: 7px 14px;  border-radius: 10px; font-size: var(--fs-sm); }
.btn-icon { padding: 10px; width: 42px; height: 42px; }
.btn-icon.btn-sm { padding: 7px; width: 34px; height: 34px; }

/* Primary = brand navy (broad, high-contrast, on-brand) */
.btn-primary {
    background-image: var(--ds-gradient-navy); background-color: var(--brand-900);
    border: none; color: #fff; box-shadow: var(--ds-shadow-navy);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.12); color: #fff; box-shadow: 0 12px 30px rgba(12,23,47,.34); }
.btn-primary:active { filter: brightness(.96); }

/* CTA / accent = electric gradient (reserve for hero & key actions) */
.btn-cta, .btn-accent {
    background-image: var(--ds-gradient); border: none; color: #fff;
    box-shadow: var(--ds-shadow-primary);
    position: relative; overflow: hidden;
}
.btn-cta::before, .btn-accent::before {
    content: ""; position: absolute; inset: 0 -100% 0 auto; width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg); transition: right var(--ds-t-slow) var(--ds-ease); right: 120%;
}
.btn-cta:hover::before, .btn-accent:hover::before { right: -30%; }
.btn-cta:hover, .btn-accent:hover, .btn-cta:focus, .btn-accent:focus { color: #fff; filter: brightness(1.06); box-shadow: 0 10px 28px rgba(79,70,229,.44); }

/* Gold sports CTA (e.g. Create Tournament) */
.btn-gold {
    background: var(--brand-gold); color: var(--brand-900); border: none; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(252,237,35,.32);
    transition: transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease), background .25s var(--ds-ease), filter .25s var(--ds-ease);
}
/* Premium hover — richer gold gradient + lift + soft shadow (never a flat black bg) */
.btn-gold:hover, .btn-gold:focus-visible {
    background: linear-gradient(135deg, #ffe75a 0%, var(--brand-gold) 45%, #f2c40a 100%);
    color: var(--brand-900); filter: none; transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(234,179,8,.45);
}
.btn-gold:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(252,237,35,.32); }

/* Secondary sport-energy CTAs — live/success actions, not the primary CTA */
.btn-lime, .btn-orange {
    color: #fff; border: none; font-weight: 700; cursor: pointer;
    transition: transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease), filter .25s var(--ds-ease);
}
.btn-lime   { background: var(--ds-gradient-lime);   box-shadow: 0 6px 16px rgba(34,197,94,.32); }
.btn-orange { background: var(--ds-gradient-orange); box-shadow: 0 6px 16px rgba(249,115,22,.32); }
.btn-lime:hover, .btn-lime:focus-visible, .btn-orange:hover, .btn-orange:focus-visible {
    color: #fff; filter: brightness(1.06); transform: translateY(-2px);
}
.btn-lime:active, .btn-orange:active { transform: translateY(0); }

/* "Stadium Energy" primary CTA — neon lime pill (Home/Browse + shared chrome only) */
.btn-stadium {
    background: var(--stadium-lime); color: var(--stadium-lime-ink); border: none;
    font-family: var(--stadium-font); font-weight: 800; border-radius: var(--ds-radius-pill);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(198,241,53,.35);
    transition: transform .25s var(--ds-ease), box-shadow .25s var(--ds-ease), filter .25s var(--ds-ease);
}
.btn-stadium:hover, .btn-stadium:focus-visible {
    color: var(--stadium-lime-ink); filter: brightness(1.05); transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(198,241,53,.45);
}
.btn-stadium:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(198,241,53,.35); }

.btn-outline-primary { color: var(--brand-900); border-color: var(--ds-border-strong); background: #fff; }
.btn-outline-primary:hover { background-color: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.btn-outline-secondary { color: var(--ds-text-secondary); border-color: var(--ds-border); }
.btn-outline-secondary:hover { background-color: var(--ds-hover); color: var(--ds-text); border-color: var(--ds-border-strong); }
.btn-ghost { background: transparent; border: none; color: var(--ds-text-secondary); }
.btn-ghost:hover { background: var(--ds-hover); color: var(--ds-text); }
.btn-danger { background-color: var(--ds-danger); border-color: var(--ds-danger); box-shadow: 0 6px 16px rgba(239,68,68,.26); }
.btn-success { background-image: linear-gradient(135deg,#22C55E,#16A34A); border: none; color: #fff; box-shadow: 0 6px 18px rgba(22,163,74,.26); }
.btn-success:hover, .btn-success:focus { filter: brightness(1.05); color: #fff; }
.btn-warning { background-color: var(--ds-warning); border-color: var(--ds-warning); color: #1f2937; }
.btn-light { background-color: #fff; border-color: var(--ds-border); color: var(--ds-text); }
.btn-light:hover { background-color: var(--ds-hover); }
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none; filter: grayscale(.2); }

/* Inline button spinner */
.btn .ds-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ======================== 5. CARDS · STAT TILES ========================= */
.card {
    border-radius: var(--ds-radius);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow var(--ds-t) var(--ds-ease), transform var(--ds-t) var(--ds-ease), border-color var(--ds-t) var(--ds-ease);
}
.card:hover { box-shadow: var(--ds-shadow-md); }
.card-hover { cursor: pointer; }
.card-hover:hover, a > .card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-border-strong); }
.card .card-header { background: transparent; border-bottom: 1px solid var(--ds-border); font-weight: 700; padding: var(--space-4) var(--space-5); }
.card .card-body   { padding: var(--space-5); }
.card .card-footer { background: var(--ds-surface-alt); border-top: 1px solid var(--ds-border); padding: var(--space-4) var(--space-5); }
.card-accent { position: relative; overflow: hidden; }
.card-accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ds-gradient-accent); }

/* Stat tiles */
.ds-stat {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--ds-radius);
    background: var(--ds-surface); border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm); transition: transform var(--ds-t) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease);
}
.ds-stat:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-md); }
.ds-stat .ds-stat-icon {
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
    display: grid; place-items: center; font-size: 20px; color: #fff;
    background: var(--ds-gradient); box-shadow: var(--ds-shadow-primary);
}
.ds-stat .ds-stat-icon.accent  { background: var(--ds-gradient-accent); box-shadow: 0 6px 18px rgba(139,92,246,.32); }
.ds-stat .ds-stat-icon.navy    { background: var(--ds-gradient-navy);   box-shadow: var(--ds-shadow-navy); }
.ds-stat .ds-stat-icon.success { background: linear-gradient(135deg,#22C55E,#16A34A); box-shadow: 0 6px 18px rgba(22,163,74,.30); }
.ds-stat .ds-stat-icon.warning { background: linear-gradient(135deg,#FBBF24,#F59E0B); box-shadow: 0 6px 18px rgba(245,158,11,.30); }
.ds-stat .ds-stat-value { font-family: var(--ds-font-display); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ds-stat .ds-stat-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-secondary); text-transform: uppercase; letter-spacing: .03em; }

/* ======================== 6. FORMS & CONTROLS =========================== */
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ds-text); margin-bottom: var(--space-2); }
.form-text  { font-size: var(--fs-xs); color: var(--ds-text-secondary); }
.form-control, .form-select {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    font-size: var(--fs-base);
    padding: 10px 14px;
    background-color: #fff;
    transition: border-color var(--ds-t-fast) var(--ds-ease), box-shadow var(--ds-t-fast) var(--ds-ease);
}
.form-control-lg, .form-select-lg { min-height: 52px; border-radius: 14px; font-size: var(--fs-md); }
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 10px; font-size: var(--fs-sm); }
.form-control::placeholder { color: var(--ds-text-muted); }
.form-control:focus, .form-select:focus {
    border-color: var(--elec-blue);
    box-shadow: var(--ds-ring);
    background-color: #fff;
}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--ds-danger); }
/* :not(.ds-flatpickr-alt) on both halves — flatpickr copies the real (now hidden)
   date input's `required` attribute (and, via JS, sometimes its is-valid class) onto
   its visible altInput, so once a form gets was-validated (added permanently on the
   first "Next"/submit attempt, never removed) every filled date field matched this
   rule forever with no way for the user to clear it back to a normal border — unlike
   every other required field, whose input stays the single element the user actually
   types into. */
.form-control.is-valid:required:not(.ds-flatpickr-alt),   .was-validated .form-control:valid:required:not(.ds-flatpickr-alt)   { border-color: var(--ds-success); }
.input-group-text { border-radius: 12px; border-color: var(--ds-border); background: var(--ds-hover); color: var(--ds-text-secondary); }
.form-check-input { border-color: var(--ds-border-strong); }
.form-check-input:checked { background-color: var(--brand-900); border-color: var(--brand-900); }
.form-check-input:focus  { border-color: var(--elec-blue); box-shadow: var(--ds-ring); }
.form-switch .form-check-input:checked { background-color: var(--elec-indigo); border-color: var(--elec-indigo); }
.form-floating > label { color: var(--ds-text-secondary); }

/* Field validation message */
.ds-field-error, .field-error { color: var(--ds-danger); font-size: var(--fs-xs); font-weight: 500; margin-top: var(--space-2); }

/* =================== 7. TABS · ALERTS · DROPDOWNS ======================= */
/* Underline tabs (nav-tabs) */
.nav-tabs { border-bottom: 1px solid var(--ds-border); gap: var(--space-2); }
.nav-tabs .nav-link { color: var(--ds-text-secondary); font-weight: 600; border: none; border-bottom: 2.5px solid transparent; border-radius: 0; padding: var(--space-3) var(--space-2); }
.nav-tabs .nav-link:hover { color: var(--ds-text); border-bottom-color: var(--ds-border-strong); }
.nav-tabs .nav-link.active { color: var(--brand-900); background: transparent; border-bottom-color: var(--elec-indigo); }

/* Segmented pill tabs (reusable) */
.ds-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--ds-hover); border-radius: 12px; }
.ds-tabs .nav-link, .ds-tabs .ds-tab { border: none; background: transparent; color: var(--ds-text-secondary); font-weight: 600; font-size: var(--fs-sm); padding: 8px 16px; border-radius: 9px; transition: all var(--ds-t) var(--ds-ease); }
.ds-tabs .nav-link.active, .ds-tabs .ds-tab.active { background: #fff; color: var(--brand-900); box-shadow: var(--ds-shadow-sm); }

/* Alerts */
.alert { border-radius: 14px; border: 1px solid transparent; font-size: var(--fs-base); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; }
.alert-success { background: #DCFCE7; color: #14532D; border-color: #A7F3D0; }
.alert-danger  { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
.alert-warning { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.alert-info    { background: #E0F2FE; color: #0C4A6E; border-color: #7DD3FC; }

/* Dropdowns */
.dropdown-menu { border-radius: 14px; border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-lg); padding: 6px; }
.dropdown-item { border-radius: 10px; font-size: var(--fs-base); padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ds-hover); }
.dropdown-item:active { background: var(--brand-900); color: #fff; }

/* ======================= 8. TABLES · PAGINATION ========================= */
.table { color: var(--ds-text); border-color: var(--ds-border); vertical-align: middle; }
.table > thead th {
    background: #F4F5FB; color: var(--ds-text-secondary);
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--ds-border); padding: 13px 16px; white-space: nowrap;
}
.table > tbody td { padding: 15px 16px; border-color: #EEF0F6; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--ds-surface-alt); }
.table-hover > tbody > tr:hover > * { background-color: var(--ds-hover); }
.table-responsive { border-radius: var(--ds-radius); border: 1px solid var(--ds-border); }
.ds-table-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; box-shadow: var(--ds-shadow-sm); }
.ds-table-card .table { margin: 0; }

/* Pagination */
.pagination { gap: var(--space-1); }
.page-link {
    color: var(--ds-text-secondary); border: 1px solid var(--ds-border);
    border-radius: 10px !important; margin: 0; min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: var(--fs-sm); background: #fff;
    transition: all var(--ds-t-fast) var(--ds-ease);
}
.page-link:hover { background: var(--ds-hover); color: var(--ds-text); border-color: var(--ds-border-strong); }
.page-item.active .page-link { background: var(--ds-gradient-navy); border-color: var(--brand-900); color: #fff; box-shadow: var(--ds-shadow-navy); }
.page-item.disabled .page-link { color: var(--ds-text-muted); background: var(--ds-surface-alt); opacity: .7; }

/* ==================== 9. MODALS · BADGES · CHIPS ======================== */
.modal-content { border-radius: var(--ds-radius-lg); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-xl); }
.modal-header, .modal-footer { border-color: var(--ds-border); }
.modal-header { padding: var(--space-4) var(--space-5); }
.modal-body   { padding: var(--space-5); }
.modal-footer { padding: var(--space-4) var(--space-5); gap: var(--space-2); }
.modal.fade .modal-dialog { transition: transform var(--ds-t) var(--ds-ease), opacity var(--ds-t) var(--ds-ease); transform: scale(.96); }
.modal.show .modal-dialog { transform: scale(1); }
.modal-backdrop.show { opacity: .5; backdrop-filter: blur(2px); }

/* Badges */
.badge { font-size: var(--fs-xs); font-weight: 700; border-radius: var(--ds-radius-pill); padding: 5px 11px; }
.badge.bg-primary { background-color: var(--brand-900) !important; }
.badge.bg-success { background-color: var(--ds-success) !important; }
.badge.bg-danger  { background-color: var(--ds-danger) !important; }
.badge.bg-warning { background-color: var(--ds-warning) !important; color: #1f2937 !important; }
.badge.bg-info    { background-color: var(--ds-info) !important; }
.badge.bg-accent  { background-image: var(--ds-gradient-accent) !important; color: #fff; }
.badge.bg-lime    { background-image: var(--ds-gradient-lime) !important; color: #fff; }
.badge.bg-orange, .badge.bg-live { background-image: var(--ds-gradient-orange) !important; color: #fff; }

/* Soft status chips */
.ds-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1;
    padding: 6px 11px; border-radius: var(--ds-radius-pill);
    background: var(--ds-hover); color: var(--ds-text-secondary); border: 1px solid transparent;
}
.ds-chip i { font-size: 13px; }
.ds-chip-primary { background: #E7EAF6; color: var(--brand-900); }
.ds-chip-success { background: #DCFCE7; color: #15803D; }
.ds-chip-warning { background: #FEF3C7; color: #B45309; }
.ds-chip-danger  { background: #FEE2E2; color: #B91C1C; }
.ds-chip-info    { background: #E0F2FE; color: #0369A1; }
.ds-chip-accent  { background: #F3E8FF; color: #7E22CE; }

/* Registration / payment status badges (used across dashboard, participants, edit) */
.status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--ds-radius-pill); line-height: 1; border: 1px solid transparent; }
.status-badge.paid, .status-badge.success, .status-badge.confirmed, .status-badge.approved { background: #DCFCE7; color: #15803D; }
.status-badge.pending, .status-badge.processing, .status-badge.created { background: #FEF3C7; color: #B45309; }
.status-badge.unknown, .status-badge.unpaid, .status-badge.failed { background: #FEE2E2; color: #B91C1C; }
.badge-closed { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--ds-radius-pill); background: #FEE2E2; color: #B91C1C; }

/* ============= 10. SKELETONS · UTILITIES · MOTION ====================== */
/* Skeleton loaders */
.ds-skeleton {
    background: linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
    border-radius: 8px;
}
.ds-skeleton-text  { height: 12px; margin-bottom: var(--space-2); }
.ds-skeleton-text.w-75 { width: 75%; } .ds-skeleton-text.w-50 { width: 50%; }
.ds-skeleton-title { height: 20px; width: 60%; margin-bottom: var(--space-3); border-radius: 9px; }
.ds-skeleton-circle{ width: 48px; height: 48px; border-radius: 50%; }
.ds-skeleton-btn   { height: 40px; width: 120px; border-radius: 12px; }
.ds-skeleton-card  {
    padding: var(--space-5); border-radius: var(--ds-radius);
    border: 1px solid var(--ds-border); background: var(--ds-surface);
}
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Utilities */
.shadow-sm { box-shadow: var(--ds-shadow-sm) !important; }
.shadow, .shadow-md { box-shadow: var(--ds-shadow-md) !important; }
.shadow-lg { box-shadow: var(--ds-shadow-lg) !important; }
.rounded-2xl { border-radius: var(--ds-radius-lg) !important; }
.rounded-pill { border-radius: var(--ds-radius-pill) !important; }
.bg-gradient-primary { background-image: var(--ds-gradient) !important; color: #fff; }
.bg-gradient-accent  { background-image: var(--ds-gradient-accent) !important; color: #fff; }
.bg-gradient-navy    { background-image: var(--ds-gradient-navy) !important; color: #fff; }
.bg-surface { background: var(--ds-surface) !important; }
.text-brand { color: var(--brand-900) !important; }
.border-ds  { border: 1px solid var(--ds-border) !important; }
.ds-divider { height: 1px; background: var(--ds-border); border: 0; margin-block: var(--space-5); }

/* 8px spacing helpers (opt-in, augment Bootstrap's 4px scale) */
.gap-2xs { gap: var(--space-1) !important; } .gap-xs { gap: var(--space-2) !important; }
.gap-sm  { gap: var(--space-3) !important; } .gap-md { gap: var(--space-4) !important; }
.gap-lg  { gap: var(--space-5) !important; } .gap-xl { gap: var(--space-6) !important; }

/* Entrance */
.ds-reveal { animation: ds-reveal .4s var(--ds-ease-out) both; }
@keyframes ds-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

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

/* Responsive type/rhythm */
@media (max-width: 575.98px) {
    h1,.h1 { font-size: var(--fs-3xl); }
    h2,.h2 { font-size: var(--fs-2xl); }
    .ds-hero { padding: var(--space-5) var(--space-4); }
    .card .card-body { padding: var(--space-4); }
    .ds-section { padding-block: var(--space-6); }
}

/* Avatar */
.navbar-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); object-fit: cover; }
.avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-700); color: #fff; display: grid; place-items: center; font-weight: 700; }
.ds-header .dropdown-menu { border-radius: 14px; box-shadow: var(--ds-shadow-xl); border: 1px solid var(--ds-border); }

/* Mobile: collapse becomes a panel */
@media (max-width: 767.98px) {
    .ds-header .navbar-collapse {
        background: var(--stadium-gradient-navy);
        padding: var(--space-4); margin-top: var(--space-2);
        border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
    }
    .ds-header .navbar-collapse .d-flex,
    .ds-header .navbar-collapse .btn,
    .ds-header .navbar-collapse .dropdown { width: 100%; }
    .ds-header .navbar-collapse .btn { justify-content: center; }
    .ds-header .navbar-collapse .ds-nav-link { display: block; text-align: center; padding: 10px; }
    .ds-header .navbar-collapse .dropdown-menu { width: 100%; position: static !important; transform: none !important; margin-top: var(--space-2); }
}

/* ========================== 12. FOOTER ================================== */
.ds-footer {
    position: relative;
    background: radial-gradient(1200px 500px at 50% -30%, rgba(99,102,241,.14), transparent 60%), var(--stadium-navy);
    color: rgba(233,237,246,.72);
    padding-top: var(--space-9);
    margin-top: var(--space-9);
    border-top: 1px solid rgba(255,255,255,.06);
}
.ds-footer::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--elec-indigo) 30%, var(--elec-cyan) 70%, transparent); opacity: .7;
}
.ds-footer .ds-footer-title { color: #fff; font-family: var(--ds-font-display); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--space-4); }
.ds-footer a { color: rgba(233,237,246,.72); text-decoration: none; transition: color var(--ds-t-fast) var(--ds-ease); }
.ds-footer a:hover, .ds-footer a:focus-visible { color: #fff; }
.ds-footer ul { list-style: none; padding: 0; margin: 0; }
.ds-footer ul li { margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.ds-footer .ds-social {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-grid; place-items: center; font-size: var(--fs-lg);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: rgba(233,237,246,.82); transition: transform var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
}
.ds-footer .ds-social:hover { transform: translateY(-2px); background: var(--ds-gradient-accent); color: #fff; border-color: transparent; }
.ds-footer .ds-footer-bottom { border-top: 1px solid rgba(255,255,255,.07); margin-top: var(--space-8); padding-block: var(--space-5); font-size: var(--fs-xs); }
.ds-footer .ds-footer-brand { max-height: 132px; opacity: .95; }

/* ===================== 13. MOBILE OPTIMIZATION LAYER ===================== */
/* App-wide responsive + touch refinements. Breakpoints target 1024 / 768 / 414 / 375 / 320. */

/* Prevent horizontal overflow on small screens (clip keeps position:sticky working) */
@media (max-width: 1024px) {
    html, body { overflow-x: clip; }
    img, video, svg, canvas { max-width: 100%; }
}

/* ---- Tablet & below (≤1024) ---- */
@media (max-width: 1024px) {
    .container, .container-fluid, .container-lg, .container-xl { padding-inline: var(--space-4); }
    /* Tabs: scroll horizontally instead of wrapping/cramping */
    .nav-tabs, .ds-tabs, .tab-nav, .mkt-secnav, .tl-secnav {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar, .ds-tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .tab-button, .ds-tabs .nav-link { white-space: nowrap; }
    /* Tables scroll with momentum */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---- Phones (≤768) — touch targets, forms, spacing ---- */
@media (max-width: 767.98px) {
    /* Touch targets: 44px minimum (WCAG 2.5.5) */
    .btn, .page-link, .dropdown-item, .nav-link, .ds-nav-link, .tab-button,
    .form-select, .mkt-qchip, .ds-tabs .nav-link { min-height: 44px; }
    .btn { padding-block: 11px; }
    .btn-sm { min-height: 38px; }
    .btn-icon { width: 44px; height: 44px; }

    /* Forms: 16px inputs prevent iOS auto-zoom; larger controls */
    .form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"], input[type="date"], textarea {
        font-size: 16px !important; min-height: 48px;
    }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
    .input-group { flex-wrap: nowrap; }

    /* Cards & spacing */
    .card .card-body { padding: var(--space-4); }
    .card .card-header, .card .card-footer { padding: var(--space-3) var(--space-4); }
    .ds-section { padding-block: var(--space-6); }
    .modal-dialog { margin: var(--space-3); }
    .modal-body { padding: var(--space-4); }

    /* Full-width primary actions read better on phones */
    .ds-actions-stack .btn, .btn-block-mobile { width: 100%; }

    /* Tighten table cells a touch */
    .table > thead th, .table > tbody td { padding: 11px 12px; }
}

/* ---- Small phones (≤414 / 375) ---- */
@media (max-width: 414px) {
    .container, .container-fluid { padding-inline: var(--space-3); }
    h1, .h1 { font-size: var(--fs-3xl); }
    h2, .h2 { font-size: var(--fs-2xl); }
    .card .card-body { padding: var(--space-3); }
    .btn-lg { padding: 13px 20px; font-size: var(--fs-base); }
}

/* ---- Very small (≤320) ---- */
@media (max-width: 320px) {
    .container, .container-fluid { padding-inline: var(--space-2); }
    .ds-cluster { gap: var(--space-2); }
    .badge, .ds-chip { font-size: 11px; padding: 4px 9px; }
}

/* Reusable table→cards on mobile (opt-in via .table-stack) */
@media (max-width: 575.98px) {
    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-stack tr { display: block; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); margin-bottom: var(--space-3); padding: var(--space-2); background: var(--ds-surface); }
    .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: none !important; padding: 8px 10px !important; text-align: right; }
    .table-stack td::before { content: attr(data-label); font-weight: 700; color: var(--ds-text-secondary); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
}

/* Reusable sticky bottom action bar */
.ds-sticky-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ds-border); box-shadow: 0 -6px 20px rgba(15,23,42,.1);
}
.ds-sticky-actions .btn { flex: 1; }
@media (min-width: 768px) { .ds-sticky-actions.d-md-none { display: none !important; } }

/* ===================== 14. MOBILE BOTTOM NAVIGATION ===================== */
.ds-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    display: none; justify-content: space-around; align-items: stretch;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
    border-top: 1px solid var(--ds-border); box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ds-bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 8px 4px; min-height: 56px; text-decoration: none; color: var(--ds-text-muted);
    font-size: 10.5px; font-weight: 600; background: none; border: none; position: relative;
    transition: color var(--ds-t-fast) var(--ds-ease);
}
.ds-bn-item i { font-size: 21px; }
.ds-bn-item span { letter-spacing: .01em; }
.ds-bn-item:active { color: var(--elec-indigo); }
.ds-bn-item.active { color: var(--brand-900); }
.ds-bn-item.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ds-gradient); }
@media (max-width: 767.98px) {
    .ds-bottomnav { display: flex; }
    body { padding-bottom: 60px; }                     /* clear the bottom nav */
    /* chatbot-widget.css's own mobile panel-sizing reads this to keep the panel's
       height in sync with however high this pushes the trigger button — otherwise
       the panel's height (calibrated against a much smaller default offset) doesn't
       shrink to compensate, and its top (header, close button) renders off-screen
       above the viewport. */
    :root { --chatbot-mobile-clearance: 74px; }
    #chatbot-widget { bottom: var(--chatbot-mobile-clearance) !important; }        /* lift the chat button above the nav */
    .tl-mobile-cta { bottom: 60px; }                    /* page CTA sits above the nav... */
    body:has(.tl-mobile-cta) .ds-bottomnav { display: none; }   /* ...or hide nav on pages with their own bottom bar */
    body:has(.ds-sticky-actions) .ds-bottomnav { display: none; }
}

/* ===================== 15. PREMIUM MOTION (tasteful, GPU-only) ===================== */
/* Every rule here animates opacity/transform only, and is auto-disabled by the global
   prefers-reduced-motion kill-switch above. Kept short & subtle — never gratuitous. */

/* Smooth in-page scrolling, offset for the sticky header on anchor jumps */
html { scroll-behavior: smooth; scroll-padding-top: 78px; }

/* Reusable motion utilities */
.ds-hover-lift { transition: transform var(--ds-t) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease); }
.ds-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); }
.ds-fade-in  { animation: ds-fade-in .5s var(--ds-ease-out) both; }
.ds-slide-up { animation: ds-slide-up .5s var(--ds-ease-out) both; }
@keyframes ds-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Improved dropdown entrance (opacity-only — never touches Popper's positioning transform) */
.dropdown-menu.show { animation: ds-dropdown-in .16s var(--ds-ease-out) both; }
@keyframes ds-dropdown-in { from { opacity: 0; } to { opacity: 1; } }

/* Lazy-image fade-in (class applied by ui-enhance.js only to not-yet-loaded images) */
img.ds-img-fade { opacity: 0; transition: opacity .5s var(--ds-ease); }
img.ds-img-fade.ds-loaded { opacity: 1; }

/* Card & interactive transitions are defined on their components (.card, .btn, .mkt-card …);
   this just guarantees images inside cards animate their own hover zoom smoothly. */
.card img, .mkt-card img, .hp-card img { transition: transform .5s var(--ds-ease); }

/* ===================== 16. COMPONENTS: BREADCRUMB · ACCORDION · TIMELINE · STEPPER ===================== */

/* ---- Breadcrumbs ---- */
.breadcrumb, .ds-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.breadcrumb .breadcrumb-item, .ds-breadcrumb > * { display: inline-flex; align-items: center; color: var(--ds-text-secondary); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before, .ds-breadcrumb > * + *::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: 11px; color: var(--ds-text-muted); margin: 0 var(--space-2); }
.breadcrumb a, .ds-breadcrumb a { color: var(--ds-text-secondary); text-decoration: none; font-weight: 500; border-radius: 6px; padding: 2px 6px; transition: color var(--ds-t-fast), background var(--ds-t-fast); }
.breadcrumb a:hover, .ds-breadcrumb a:hover { color: var(--brand-900); background: var(--ds-hover); }
.breadcrumb .active, .ds-breadcrumb [aria-current="page"] { color: var(--ds-text); font-weight: 700; }

/* ---- Accordion (premium override of Bootstrap) ---- */
.accordion { --bs-accordion-border-color: var(--ds-border); }
.accordion-item { border: 1px solid var(--ds-border); border-radius: var(--ds-radius) !important; margin-bottom: var(--space-3); overflow: hidden; background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); }
.accordion-button { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--fs-md); border-radius: var(--ds-radius); padding: var(--space-4) var(--space-5); color: var(--ds-text); }
.accordion-button:not(.collapsed) { background: var(--ds-hover); color: var(--brand-900); box-shadow: none; }
.accordion-button::after { transition: transform var(--ds-t) var(--ds-ease); }
.accordion-button:focus { border-color: transparent; box-shadow: var(--ds-ring); }
.accordion-body { color: var(--ds-text-secondary); padding: 0 var(--space-5) var(--space-4); line-height: 1.65; }

/* ---- Timeline + timeline cards ---- */
.ds-timeline { position: relative; padding-left: var(--space-6); margin: 0; list-style: none; }
.ds-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--ds-border); border-radius: 2px; }
.ds-timeline-item { position: relative; padding-bottom: var(--space-5); }
.ds-timeline-item:last-child { padding-bottom: 0; }
.ds-timeline-dot { position: absolute; left: calc(var(--space-6) * -1); top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--ds-gradient); box-shadow: var(--ds-shadow-primary); border: 3px solid var(--ds-surface); }
.ds-timeline-dot.success { background: linear-gradient(135deg,#22C55E,#16A34A); box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.ds-timeline-dot.muted { background: var(--ds-border-strong); box-shadow: none; color: var(--ds-text-secondary); }
.ds-timeline-time { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-accent); margin-bottom: 4px; }
.ds-timeline-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--space-4); box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-t), transform var(--ds-t); }
.ds-timeline-card:hover { box-shadow: var(--ds-shadow-md); transform: translateX(2px); }
.ds-timeline-card .t-title { font-weight: 700; margin: 0 0 2px; }
.ds-timeline-card .t-sub { color: var(--ds-text-secondary); font-size: var(--fs-sm); margin: 0; }

/* ---- Reusable stepper / progress indicator ---- */
.ds-stepper { display: flex; justify-content: space-between; position: relative; max-width: 640px; margin-inline: auto; }
.ds-stepper::before { content: ""; position: absolute; top: 22px; left: 8%; right: 8%; height: 3px; background: var(--ds-border); border-radius: 3px; z-index: 0; }
.ds-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.ds-step-num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ds-font-display); font-weight: 800; font-size: 17px; background: #fff; border: 2px solid var(--ds-border); color: var(--ds-text-muted); transition: all var(--ds-t) var(--ds-ease); }
.ds-step-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-muted); text-align: center; }
.ds-step.active .ds-step-num { background: var(--ds-gradient); border-color: transparent; color: #fff; box-shadow: var(--ds-shadow-primary); transform: scale(1.08); }
.ds-step.active .ds-step-label { color: var(--brand-900); }
.ds-step.completed .ds-step-num { background: linear-gradient(135deg,#22C55E,#16A34A); border-color: transparent; color: #fff; }
.ds-step.completed .ds-step-label { color: #16A34A; }
@media (max-width: 575.98px) { .ds-step-num { width: 40px; height: 40px; font-size: 15px; } .ds-step-label { font-size: 10px; } }

/* Organizer-context banner in the shared auth modal (shown when opened from an organizer CTA) */
.organizer-note { display: none; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(252,237,35,.18), rgba(99,102,241,.1)); border: 1px solid rgba(234,179,8,.3);
    color: var(--brand-900); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.organizer-note i { color: #d97706; font-size: 18px; flex: 0 0 auto; }

/* =============================================================================
   17. Robust accordion (dependency-free, [data-accordion])
   Flicker-free CSS grid-rows expand/collapse — does not rely on Bootstrap's
   Collapse JS, so it keeps working even if a CDN script fails to load.
   Markup contract: see wwwroot/js/ui-enhance.js "Accessible accordion".
   ========================================================================== */
.ds-acc { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-acc-item {
    background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs); overflow: hidden;
    transition: box-shadow var(--ds-t) var(--ds-ease), transform var(--ds-t) var(--ds-ease), border-color var(--ds-t) var(--ds-ease);
}
.ds-acc-item:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); border-color: var(--ds-border-strong); }
.ds-acc-item.is-open { border-color: rgba(255,158,46,.35); box-shadow: var(--ds-shadow-md); }
.ds-acc-trigger {
    width: 100%; display: flex; align-items: center; gap: var(--space-4); text-align: left;
    background: transparent; border: 0; cursor: pointer; padding: var(--space-4) var(--space-5);
    font-family: var(--ds-font-display); font-weight: 600; font-size: var(--fs-md); color: var(--ds-text);
    transition: background var(--ds-t) var(--ds-ease), color var(--ds-t) var(--ds-ease);
}
.ds-acc-trigger:hover { background: var(--ds-hover); }
.ds-acc-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255,158,46,.35); }
.ds-acc-item.is-open .ds-acc-trigger { background: var(--ds-hover); color: var(--ds-acc-open-color); }
.ds-acc-q { flex: 1; }
.ds-acc-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--slate-100); color: var(--ds-text-secondary); font-size: 15px;
    transition: transform var(--ds-t-slow) var(--ds-ease), background var(--ds-t) var(--ds-ease), color var(--ds-t) var(--ds-ease);
}
.ds-acc-item.is-open .ds-acc-icon { transform: rotate(180deg); background: linear-gradient(135deg,#ffb648,#f2801a); color: #fff; }
.ds-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ds-t-slow) var(--ds-ease); }
.ds-acc-item.is-open .ds-acc-panel { grid-template-rows: 1fr; }
.ds-acc-panel > div { overflow: hidden; }
.ds-acc-body { padding: 0 var(--space-5) var(--space-4); color: var(--ds-text-secondary); line-height: 1.7; }
.ds-acc-body :is(a) { color: #f2801a; font-weight: 600; }
.ds-acc-body :is(ul, ol) { padding-left: 1.25em; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ds-acc-panel, .ds-acc-icon, .ds-acc-item { transition: none !important; } }

/* =============================================================================
   18. Match results table — shared by all per-sport Results partials
   (Views/Tournament/Results/_*.cshtml). Previously each sport partial carried
   its own copy-pasted, off-brand purple <style> block, and two sports
   (Volleyball, Wrestling) had none at all and rendered as a raw unstyled
   table. Consolidated once here, re-themed onto the app's actual tokens.
   ========================================================================== */
.results-container { background: var(--ds-gradient); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); overflow: hidden; }
.results-header { background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.2); padding: var(--space-5); }
.results-search-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.results-search-bar .search-input { flex: 1; padding: 10px var(--space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); font-size: var(--fs-sm); background: #fff; transition: border-color var(--ds-t) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease); }
.results-search-bar .search-input:focus { outline: none; border-color: var(--elec-indigo); box-shadow: var(--ds-ring); }
.results-header .filter-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.results-header .filter-btn { padding: 8px var(--space-3); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: #fff; color: var(--ds-text-secondary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--ds-t) var(--ds-ease); }
.results-header .filter-btn:hover { background: var(--ds-hover); transform: translateY(-1px); }
.results-header .filter-btn.active { background: var(--ds-gradient); color: #fff; border-color: transparent; box-shadow: var(--ds-shadow-primary); }
.results-header .search-stats { margin-left: auto; display: flex; align-items: center; padding: 6px var(--space-3); background: rgba(99,102,241,.1); border-radius: var(--ds-radius-sm); border: 1px solid rgba(99,102,241,.2); }
.results-header .results-count { font-size: var(--fs-sm); font-weight: 700; color: var(--elec-indigo); }
.results-header .loading-indicator { display: none; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); background: rgba(234,179,8,.12); border-radius: var(--ds-radius-sm); border: 1px solid rgba(234,179,8,.25); color: #92610c; font-size: var(--fs-sm); }
.results-header .loading-indicator.show { display: flex; }
.results-header .loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(146,97,12,.25); border-top-color: #92610c; border-radius: 50%; animation: ds-spin .8s linear infinite; }
.results-table-container { padding: var(--space-5); background: rgba(255,255,255,.03); }
.results-table { width: 100%; background: #fff; border-radius: var(--ds-radius); overflow: hidden; box-shadow: var(--ds-shadow-sm); }
.results-table thead { background: var(--ds-gradient); color: #fff; }
.results-table th { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--fs-sm); text-align: left; border-bottom: 2px solid rgba(255,255,255,.2); }
.results-table tbody tr { border-bottom: 1px solid var(--ds-border); transition: background var(--ds-t) var(--ds-ease); }
.results-table tbody tr:hover { background: var(--ds-hover); }
.results-table td { padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); vertical-align: middle; }
.event-cell { font-weight: 600; color: var(--ds-text); min-width: 120px; }
.event-cell .event-name { font-size: var(--fs-sm); font-weight: 600; }
.round-cell { min-width: 100px; text-align: center; }
.round-name { font-weight: 500; color: var(--ds-text-secondary); padding: 2px var(--space-2); background: var(--ds-hover); border-radius: 4px; display: inline-block; min-width: 60px; text-align: center; }
.team-cell, .team-1-cell, .team-2-cell { min-width: 150px; }
.player-name { font-weight: 600; color: var(--ds-text); display: flex; align-items: center; gap: 4px; }
.player-name.winner { color: #059669; }
.winner-icon { font-size: var(--fs-sm); }
.player-partner { font-size: var(--fs-xs); color: var(--ds-text-secondary); margin-left: var(--space-2); font-style: italic; display: inline; }
.team-names { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.score-cell { text-align: center; min-width: 140px; }
.result-status { margin-top: var(--space-2); }
.duration-cell { min-width: 120px; font-size: var(--fs-xs); }
.duration-time { font-weight: 600; color: var(--ds-text); margin-bottom: 2px; }
.match-date, .court-info { color: var(--ds-text-secondary); font-size: 10px; }
.set-scores { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.set-score-compact { background: var(--ds-hover); border: 1px solid var(--ds-border); border-radius: 4px; padding: 2px 6px; font-size: var(--fs-xs); font-weight: 600; min-width: 2rem; text-align: center; }
.set-score-compact.final { background: var(--ds-gradient); color: #fff; border-color: transparent; }
.score-display { display: flex; justify-content: center; }
.final-score { font-size: var(--fs-lg); font-weight: 800; color: var(--ds-text); }
.results-table .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--space-2); border-radius: var(--ds-radius-pill); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.results-table .status-badge.completed { background: #d1fae5; color: #065f46; }
.results-table .status-badge.walkover { background: #fef3c7; color: #92400e; }
.meta-info { font-size: var(--fs-xs); color: var(--ds-text-secondary); line-height: 1.4; }
.results-empty { text-align: center; padding: var(--space-9) var(--space-5); color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border-radius: var(--ds-radius-lg); margin: var(--space-5); }
.results-empty i { font-size: 40px; margin-bottom: var(--space-4); opacity: .7; color: rgba(255,255,255,.75); display: block; }
.results-empty h3 { margin-bottom: var(--space-2); color: #fff; font-size: var(--fs-xl); font-weight: 700; }
.results-empty p { color: rgba(255,255,255,.8); font-size: var(--fs-sm); }
@media (max-width: 1024px) {
    .results-table { font-size: var(--fs-xs); }
    .team-cell, .event-cell { min-width: 100px; }
    .round-cell { min-width: 80px; }
    .score-cell { min-width: 120px; }
    .duration-cell { min-width: 100px; }
}
@media (max-width: 768px) {
    .results-search-bar { flex-direction: column; }
    .results-header .filter-buttons { justify-content: center; }
    .results-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .results-table { min-width: 800px; font-size: 11px; }
    .results-table th, .results-table td { padding: 8px var(--space-3); }
    .team-cell { min-width: 130px; }
    .score-cell { min-width: 100px; }
    .set-scores { gap: 2px; }
    .set-score-compact { padding: 2px 4px; font-size: 10px; min-width: 1.5rem; }
}
@media (max-width: 480px) {
    .results-table-container { padding: var(--space-2); }
    .results-table { min-width: 700px; font-size: 11px; }
    .results-table th, .results-table td { padding: 6px var(--space-2); }
    .team-cell, .event-cell { min-width: 90px; }
    .round-cell { min-width: 70px; }
    .duration-cell { min-width: 90px; }
}

/* FAQ page shell reusing the same tokens as the rest of the app */
.ds-faq-hero {
    background: var(--ds-gradient-hero); color: #fff; padding: var(--space-10) var(--space-4) var(--space-9);
    text-align: center; border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl); box-shadow: var(--ds-shadow-lg); margin-bottom: var(--space-7);
}
.ds-faq-hero .ds-eyebrow { color: rgba(255,255,255,.75); }
.ds-faq-hero h1 { font-family: var(--ds-font-display); font-weight: 800; margin-bottom: var(--space-2); }
.ds-faq-hero p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto; }
.ds-faq-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.ds-faq-search { position: relative; min-width: 240px; flex: 1 1 260px; max-width: 360px; }
.ds-faq-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ds-text-muted); }
.ds-faq-search input {
    width: 100%; padding: 10px 14px 10px 38px; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border);
    background: var(--ds-surface-alt); font-size: var(--fs-sm); transition: border-color var(--ds-t) var(--ds-ease), box-shadow var(--ds-t) var(--ds-ease);
}
.ds-faq-search input:focus { outline: none; border-color: var(--elec-indigo); box-shadow: var(--ds-ring); background: #fff; }
.ds-faq-count { font-size: var(--fs-xs); font-weight: 700; color: var(--ds-text-secondary); background: var(--ds-hover); padding: 4px 10px; border-radius: var(--ds-radius-pill); }
.ds-faq-empty { text-align: center; padding: var(--space-9) var(--space-4); color: var(--ds-text-secondary); }
.ds-faq-empty i { font-size: 40px; color: var(--ds-text-muted); margin-bottom: var(--space-3); display: block; }
#loginModal.organizer-context .organizer-note { display: flex; animation: ds-fade-in .3s var(--ds-ease-out) both; }

/* =============================================================================
   19. Flatpickr theme — retheme onto the app's own tokens (brand gradient,
   radius/shadow scale, Inter). Wired app-wide via ui-enhance.js initFlatpickr;
   the visible field here is the "altInput" — a plain text field that inherits
   the original input's classes, so it already looks like .form-control.
   ========================================================================== */
.ds-flatpickr-alt { cursor: pointer; background-image: none; }
.flatpickr-calendar {
    background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg); font-family: var(--ds-font); padding: var(--space-3);
    animation: ds-fade-in .16s var(--ds-ease-out) both;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { display: none; }
.flatpickr-months { align-items: center; margin-bottom: var(--space-2); }
.flatpickr-months .flatpickr-month { color: var(--ds-text); height: 40px;
    /* flatpickr's own CSS hardcodes overflow: hidden here (sized for its default 34px-tall,
       thin-font header) — our bold display font's taller glyph metrics need real headroom,
       not a clip boundary. This is the actual box that was clipping "August 2026"'s ascenders;
       everything below only controls the text inside it. !important: flatpickr.min.css is a
       separate <link> loaded AFTER this stylesheet in _Layout.cshtml, so at equal specificity
       its own unqualified overflow:hidden keeps winning the cascade otherwise. */
    overflow: visible !important;
}
/* line-height (not padding-top) centers the text vertically in the 40px-tall .flatpickr-month
   box above — flatpickr's own .flatpickr-current-month CSS ships line-height:1 and a
   padding-top calibrated for its default thin font, both too small for our bold Lexend display
   font's taller glyph metrics, clipping the ascenders/tops of "August 2026" at the parent's
   overflow boundary. !important for the same load-order reason as the parent's overflow above:
   flatpickr.min.css loads after this stylesheet, so its own line-height/padding otherwise wins
   at equal specificity and silently re-clips text this rule already intended to fix. */
.flatpickr-current-month { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--fs-md); line-height: 40px !important; padding: 0 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year {
    font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-text);
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; top: 6px;
    transition: background var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--ds-hover); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brand-900); }
span.flatpickr-weekday { font-weight: 700; font-size: var(--fs-xs); color: var(--ds-text-muted); text-transform: uppercase; }
.flatpickr-day { border-radius: 10px; font-weight: 500; color: var(--ds-text); transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--ds-hover); border-color: transparent; transform: translateY(-1px); }
.flatpickr-day.today { border-color: var(--elec-indigo); }
.flatpickr-day.today:hover { background: var(--ds-hover); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    background: var(--ds-gradient); border-color: transparent; color: #fff; box-shadow: var(--ds-shadow-primary);
}
.flatpickr-day.inRange { background: rgba(99,102,241,.12); border-color: transparent; box-shadow: none; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: var(--ds-text-muted); opacity: .45;
}
.flatpickr-time { border-top: 1px solid var(--ds-border); }
.flatpickr-time input { font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-text); }
.flatpickr-time .flatpickr-am-pm, .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--ds-hover); }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--ds-text-muted); }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--ds-text-muted); }
@media (max-width: 575.98px) {
    .flatpickr-calendar { width: 300px !important; }
    .flatpickr-day { max-width: none; }
    /* flatpickr's own CSS pins .flatpickr-current-month to a fixed `left: 12.5%; width: 75%;
       overflow: hidden` box sized for its default (light-weight, narrower) font. Our bold
       display font is wider, so at this narrower 300px calendar width the month/year text
       ("August 2026") no longer fits and gets silently clipped on both edges instead of
       wrapping or shrinking. Free it to the full row width (still clearing the 32px prev/next
       arrows via padding) and let it size itself instead of clipping.
       !important, same as .flatpickr-calendar's width above: flatpickr.min.css is a separate
       <link> loaded AFTER this stylesheet in _Layout.cshtml, so at equal specificity its
       unqualified `left`/`width`/`overflow` values win the cascade by source order and silently
       overrode this rule without it. */
    .flatpickr-current-month {
        left: 0 !important; width: 100% !important; padding-inline: 36px !important;
        overflow: visible !important; font-size: 13px !important;
    }
}
@media (prefers-reduced-motion: reduce) { .flatpickr-calendar { animation: none !important; } }

/* =============================================================================
   20. Tournament card primitives — shared by every card variant (homepage
   teaser cards, marketplace showcase cards, and any future listing). Badges,
   the favourite/share icon buttons and the countdown pill live here once so
   every card looks and behaves identically. Interactivity is wired globally
   in ui-enhance.js (initCardInteractions).
   ========================================================================== */
.mkt-badges-tl { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.mkt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: var(--ds-radius-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mkt-badge-rank { background: var(--stadium-lime); color: var(--stadium-navy); }
.mkt-badge-trending { background: var(--ds-gradient-orange); color: #fff; }
.mkt-badge-live { background: rgba(239,68,68,.94); color: #fff; }
.mkt-badge-upcoming { background: rgba(10,14,26,.92); color: #fff; }
.mkt-badge-open { background: rgba(16,185,129,.94); color: #fff; }
.mkt-badge-closed, .mkt-badge-completed { background: rgba(15,23,42,.7); color: #e2e8f0; }
.mkt-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: mkt-pulse 1.6s infinite; }
@keyframes mkt-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6);} 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0);} 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);} }
.mkt-actions-tr { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.mkt-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--brand-900); font-size: 15px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--ds-t-fast), background var(--ds-t-fast), color var(--ds-t-fast); }
.mkt-icon-btn:hover { transform: scale(1.1); }
.mkt-icon-btn.is-fav { background: #ef4444; color: #fff; }
.mkt-icon-btn:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.mkt-countdown { position: absolute; top: 54px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(12,23,47,.62); border: 1px solid rgba(255,255,255,.18); padding: 4px 9px; border-radius: var(--ds-radius-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mkt-countdown.is-live { background: rgba(239,68,68,.85); }

/* ---- _TournamentCardDs.cshtml (the compact "teaser" card variant) — moved
   here from Home/Index.cshtml's page-local styles so every page that renders
   this shared partial (Home/Index, Home/List, ...) gets identical styling
   instead of relying on one specific page happening to define it. ---- */
.hp-card { overflow: hidden; border: 1px solid var(--ds-border); }
.hp-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ds-gradient-navy); }
.hp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ds-ease); }
.hp-card:hover .hp-card-media img { transform: scale(1.06); }
.hp-card-media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,10,24,.55)); }
.hp-sport-chip { position: absolute; bottom: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: var(--ds-radius-pill); background: rgba(12,23,47,.6); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hp-card-title { font-family: var(--stadium-font, var(--ds-font-display)); font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; margin: 0 0 var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-card-meta { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--ds-text-secondary); margin-bottom: var(--space-4); }
.hp-card-meta i { color: var(--elec-indigo); margin-right: 4px; }
.hp-urgency { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-orange); margin-bottom: var(--space-3); }
.hp-card:hover { box-shadow: var(--ds-shadow-lg), 0 0 0 1px rgba(99,102,241,.16); }
.hp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hp-entries { font-size: var(--fs-xs); font-weight: 700; color: var(--ds-text-secondary); }
.hp-entries i { color: var(--elec-indigo); }
.hp-enroll { position: relative; z-index: 3; border-radius: var(--ds-radius-pill); }

/* RTL overrides — this file predates the Tailwind/zt-* design system's logical (ps-/pe-/ms-/me-)
   utilities and uses physical left/right properties throughout; these are the ones that visibly
   read backwards once html[dir="rtl"] is set for Arabic. */
html[dir="rtl"] .table-stack td { text-align: left; }
html[dir="rtl"] .table-stack td::before { text-align: right; }
html[dir="rtl"] .ds-timeline { padding-left: 0; padding-right: var(--space-6); }
html[dir="rtl"] .ds-timeline::before { left: auto; right: 11px; }
html[dir="rtl"] .ds-timeline-dot { left: auto; right: calc(var(--space-6) * -1); }
html[dir="rtl"] .ds-acc-trigger { text-align: right; }
html[dir="rtl"] .ds-acc-body :is(ul, ol) { padding-left: 0; padding-right: 1.25em; }
html[dir="rtl"] .results-header .search-stats { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .results-table th { text-align: right; }
html[dir="rtl"] .player-partner { margin-left: 0; margin-right: var(--space-2); }
html[dir="rtl"] .hp-card-meta i { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .hp-sport-chip { left: auto; right: 12px; }