/**
 * WaveCtl — Global Design System v2.0 (Bootstrap 4.6 Compatible)
 * Single source of truth for tokens, reset, and shared components.
 *
 * Architecture:
 *   style.css    ← YOU ARE HERE — global tokens + Bootstrap overrides
 *   header.css   ← header/nav layout only (uses :root tokens)
 *   wave.css     ← wave builder layout only (uses :root tokens)
 *   dashboard.css ← dashboard layout only (uses :root tokens)
 *   brand.css    ← white-label overrides only (dynamic)
 *
 * Brand Philosophy: "Control is Primary. Motion is Secondary."
 *   --brand-primary   = authority layer (logo, nav, buttons, structural)
 *   --brand-secondary = motion layer (timers, live data, active states)
 *
 * White-Label Ready:
 *   Clients override --brand-primary and --brand-secondary in brand.css
 *   All components reference these tokens — changes apply instantly
 *
 * Bootstrap 4.6 Integration:
 *   - All variables map to Bootstrap's $theme-colors where appropriate
 *   - Utility classes extend Bootstrap's existing system
 *   - No !important conflicts with Bootstrap
 */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   ================================================================ */
   :root {
     /* ════════════════════════════════════════════════════════
        THEME LAYER — the white-label input

        The only place a raw brand colour is written. A client theme
        supplies these four roles and nothing else; everything below
        derives from them, so a new theme is a token change, never a
        CSS rewrite.

        includes/header.php overrides these from admin settings, and
        zone.php includes the same partial, so every screen shares one
        branding source. Defaults here keep any page standalone-safe.

        Dependency direction is theme -> semantic -> component, never
        the reverse: if these read from the semantic layer instead, the
        admin override would land on a variable nothing reads and
        white-labelling would silently stop working.
        ════════════════════════════════════════════════════════ */
     --theme-primary:         #0F2D4A;   /* authority — chrome, structure */
     --theme-primary-hover:   #1A3F65;
     --theme-primary-active:  #091F33;
     --theme-secondary:       #00D4FF;   /* motion — live data, CTAs */
     --theme-secondary-hover: #26DDFF;
     --theme-secondary-active:#009CC2;
     --theme-tertiary:        #AFC3D6;   /* neutral — metadata, labels */
     --theme-accent:          var(--theme-secondary);  /* active-state accent */

     /* ════════════════════════════════════════════════════════
        BRAND — Authority Layer (Navy)
        Structural chrome: nav, sidebar, headers, primary buttons

        COMPAT: derives from the theme layer. Closed to new use.
        ════════════════════════════════════════════════════════ */

     /* ════════════════════════════════════════════════════════
        BRAND — Motion Layer (Cyan)
        Live data: timers, active states, CTAs, progress
        ════════════════════════════════════════════════════════ */

     /* ════════════════════════════════════════════════════════
        BRAND — Neutral Layer
        Metadata, labels, secondary text on dark surfaces
        ════════════════════════════════════════════════════════ */

     /* ════════════════════════════════════════════════════════
        BRAND — Muted Layer
        Subtle backgrounds, inactive elements
        ════════════════════════════════════════════════════════ */

     /* ════════════════════════════════════════════════════════
        BACKWARD COMPATIBLE ALIASES
        ════════════════════════════════════════════════════════ */



     /* ════════════════════════════════════════════════════════
        BOOTSTRAP THEME MAPPING
        ════════════════════════════════════════════════════════ */

     /* ════════════════════════════════════════════════════════
        STATUS — Semantic (never brand)
        ════════════════════════════════════════════════════════ */
     --state-success:               #00A65A;
     --state-success-bg:            rgba(0, 166, 90, 0.12);
     --state-success-border:        rgba(0, 166, 90, 0.20);
     --state-success-border-strong: rgba(0, 166, 90, 0.35);

     --state-warning:               #B38600;
     --state-warning-bg:            rgba(179, 134, 0, 0.12);
     --state-warning-border:        rgba(179, 134, 0, 0.20);
     --state-warning-border-strong: rgba(179, 134, 0, 0.35);

     --state-danger:                #D93B3B;
     --state-danger-bg:             rgba(217, 59, 59, 0.12);
     --state-danger-border:         rgba(217, 59, 59, 0.20);
     --state-danger-border-strong:  rgba(217, 59, 59, 0.35);

     --state-info:                  #3B82F6;
     --state-info-bg:               rgba(59, 130, 246, 0.12);
     --state-info-border:           rgba(59, 130, 246, 0.20);
     --state-info-border-strong:    rgba(59, 130, 246, 0.35);

     /* ════════════════════════════════════════════════════════
        CATEGORY COLORS
        Solo = Cyan (motion), Duo = Amber (team), Relay = Green (group)
        ════════════════════════════════════════════════════════ */
     --category-solo:        #00D4FF;
     --category-solo-bg:     rgba(0, 212, 255, 0.06);
     --category-solo-border: rgba(0, 212, 255, 0.12);

     --category-duo:         #B38600;
     --category-duo-bg:      rgba(179, 134, 0, 0.08);
     --category-duo-border:  rgba(179, 134, 0, 0.15);

     --category-relay:        #00A65A;
     --category-relay-bg:     rgba(0, 166, 90, 0.08);
     --category-relay-border: rgba(0, 166, 90, 0.15);

     /* ════════════════════════════════════════════════════════
        CONFLICT / GAP ALERT
        ════════════════════════════════════════════════════════ */
     --state-conflict:        #E0A800;
     --state-conflict-bg:     rgba(224, 168, 0, 0.10);
     --state-conflict-border: rgba(224, 168, 0, 0.25);
     --state-conflict-border-strong: rgba(224, 168, 0, 0.45);

     /* ════════════════════════════════════════════════════════
        SURFACES — Dark mode (default)
        ════════════════════════════════════════════════════════ */
     --surface-body:     #0A0A0A;
     --surface-default:  #121212;
     --surface-card:     #1A1A1A;
     --surface-hover: #242424;
     --surface-input:    #121212;
     --surface-sidebar:  var(--theme-primary-active);
     --surface-elevated: #2E2E2E;

     /* ════════════════════════════════════════════════════════
        TEXT — Dark mode (default)
        ════════════════════════════════════════════════════════ */
     --text-primary:   #F5F7FA;
     --text-secondary: #B4BCC5;
     --text-muted:     #7D8794;
     --text-disabled:  #4E5865;
     --text-inverse:   #0F1923;

     /* ════════════════════════════════════════════════════════
        BORDERS — Dark mode (default)
        ════════════════════════════════════════════════════════ */
     --border-default: #2F343A;
     --border-soft:    #23272C;
     --border-active:  #4A525C;

     /* ════════════════════════════════════════════════════════
        FONTS
        ════════════════════════════════════════════════════════ */
     --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-display: 'Barlow Condensed', 'Anton', 'Impact', sans-serif;
     --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

     /* ── Typography Scale ── */
     --ops-number: 42px;
     --ops-number-sm: 28px;
     --ops-number-xs: 22px;
     --ops-value: 18px;
     --ops-label: 14px;
     --ops-meta: 14px;
     --ops-body: 16px;
     --ops-micro: 13px;
     --ops-tiny: 11px;

     /* ════════════════════════════════════════════════════════
        SPACING
        ════════════════════════════════════════════════════════ */
     --spacing-xs:  4px;
     --spacing-sm:  8px;
     --spacing-md:  16px;
     --spacing-lg:  24px;
     --spacing-xl:  32px;
     --spacing-2xl: 48px;

     /* ════════════════════════════════════════════════════════
        RADIUS
        ════════════════════════════════════════════════════════ */
     --radius-sm:   4px;
     --radius-md:   8px;
     --radius-lg:   12px;
     --radius-xl:   16px;
     --radius-pill: 999px;

     /* ════════════════════════════════════════════════════════
        SHADOWS
        ════════════════════════════════════════════════════════ */
     --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
     --shadow-md:        0 4px 12px rgba(0,0,0,0.4);
     --shadow-lg:        0 8px 32px rgba(0,0,0,0.5);
     --shadow-glow:      0 0 32px rgba(0, 212, 255, 0.12);
     /* COMPAT: colour-bearing glows are --effect-* now. These two name a brand
        colour, which is what this phase removes. wave.css still holds 13
        references to --shadow-secondary; retire when that file migrates. */

     /* ════════════════════════════════════════════════════════
        TRANSITIONS
        ════════════════════════════════════════════════════════ */
     --transition-fast:   0.15s ease;
     --transition-normal: 0.3s ease;
     --transition-slow:   0.5s ease;

     /* ════════════════════════════════════════════════════════
        LAYOUT
        ════════════════════════════════════════════════════════ */
     --rm-nav-h:      72px;
     --rm-bar-h:      82px;
     --rm-radius:     12px;
     --sidebar-width: 350px;

     /* ════════════════════════════════════════════════════════
        LIVE TIMING
        ════════════════════════════════════════════════════════ */
     --timer-color:  #00D4FF;
     --timer-live:   #00A65A;
     --timer-paused: #B38600;
     --delta-behind: #D93B3B;
     --delta-ahead:  #00A65A;
 }

 /* ════════════════════════════════════════════════════════════
    SEMANTIC TOKEN LAYER  (Phase 2)

    Names describe ROLE and MEANING, never colour. Components should
    reference these; `--brand-cyan`, `--brand-navy`, `--state-green` and
    friends are legacy and closed to new use.

    DIRECTION OF ALIASING — read before changing:

      semantic  ->  brand        (correct)
      brand     ->  semantic     (breaks white-labelling)

    includes/header.php emits an inline <style> block AFTER every
    stylesheet that assigns --brand-navy / --brand-cyan from admin
    settings. That block wins the cascade. If the aliases pointed the
    other way (--brand-cyan: var(--color-secondary)) the admin value
    would land on a variable nothing reads any more, and white-labelling
    would silently stop working while still appearing configurable.

    Because every token below is a var() reference, light mode keeps
    working untouched: [data-theme="light"] redefines --bg-* / --text-*
    and these resolve to the new values automatically.
    ════════════════════════════════════════════════════════════ */
 :root {

     /* ── 1. Foundation — palette ROLES, read straight from the theme ── */
     --color-primary:          var(--theme-primary);
     --color-primary-hover:    var(--theme-primary-hover);
     --color-primary-active:   var(--theme-primary-active);
     --color-secondary:        var(--theme-secondary);
     --color-secondary-hover:  var(--theme-secondary-hover);
     --color-secondary-active: var(--theme-secondary-active);
     --color-tertiary:         var(--theme-tertiary);
     --color-accent:           var(--theme-accent);

     /* ── 2/3/5. COMPATIBILITY ALIASES ──
        The semantic tokens now OWN their values (defined above in the STATUS,
        CATEGORY and SURFACES blocks). These legacy names are what the not-yet-
        migrated stylesheets still reference, so they point AT the semantic
        layer. Direction stays theme -> semantic -> component; nothing reads a
        legacy name to produce a semantic one.

        Retire each line only when its external consumers reach zero:
          --brand-danger 76 · --brand-warning 68 · --brand-success 66
          --bg-card 34 · --bg-surface 35 · --bg-card-hover 20 · --bg-input 17
          --brand-info 16 · --brand-conflict 14 · --bg-body 11 · --cat-* 14
        ── */







     /* ── 8. Actions ── */
     --action-primary:   var(--color-secondary);
     --action-secondary: var(--color-primary);
     --action-danger:    var(--state-danger);
     /* Links are neither an action surface nor a state: a themed accent that
        must stay distinguishable from body text. Its own token so link colour
        can move without dragging buttons with it. */
     --action-link:      var(--color-secondary);

     /* ══════════════════════════════════════════════════════
        RETAINED COMPATIBILITY ALIASES

        NOT dead. These are still consumed from OUTSIDE .css — inline
        style="" attributes in PHP templates and style strings built in JS:

          --brand-cyan       includes/footer.php:42 · wave.php:768
                             assets/js/wave.js:3148
          --brand-warning    wave.php:738 · wave.js:2380,3198 · custom.js:744
          --brand-success    wave.js:2380,3197 · custom.js:744
          --brand-danger     includes/header.php:326 · modals.js:342
          --brand-conflict   modals.js:359,467
          --brand-secondary* modals.js:369,627,629
          --bg-input         includes/footer.php:322

        Retiring these requires editing markup/JS, which is a separate change.
        Do not delete until those consumers are migrated.
        ══════════════════════════════════════════════════════ */
     --brand-secondary:        var(--action-primary);
     --brand-secondary-bg:     var(--action-primary-bg);
     --brand-secondary-border: var(--action-primary-border);
     --brand-cyan:             var(--action-primary);
     --brand-success:          var(--state-success);
     --brand-warning:          var(--state-warning);
     --brand-danger:           var(--state-danger);
     --brand-conflict:         var(--state-conflict);
     --bg-input:               var(--surface-input);

     /* ── Tint tier ──
        Translucent neutral washes: faint surfaces and hairlines that read as
        "slightly lighter/darker than the thing behind me". Distinct from
        --surface-hover, which is an opaque colour.

        --tint-base is what the wash is made of, and it FLIPS with the theme:
        white on dark backgrounds, deep navy on light ones. Mixing against
        `transparent` means the token carries no brand hue, so a white-label
        theme cannot leave a cyan cast in a neutral hairline.

        color-mix(in srgb, X n%, transparent) === X at n% alpha, exactly — so
        this reproduces the previous literals byte-for-byte (verified).

        Only the rungs with real consumers exist; no unused matrix. */
     --tint-base:            #FFFFFF;
     --surface-tint-subtle:  color-mix(in srgb, var(--tint-base) 4%, transparent);
     --surface-tint:         color-mix(in srgb, var(--tint-base) 6%, transparent);
     --border-tint:          color-mix(in srgb, var(--tint-base) 8%, transparent);
     --border-tint-strong:   color-mix(in srgb, var(--tint-base) 15%, transparent);

     /* Action VARIANTS — added only where a consumer exists (10 of them).
        Kept distinct from the --state-* variants on purpose: they currently
        share a colour, but "hovering a button" and "this row is live" are
        different facts. Conflating them would mean a theme could never move
        one without the other. */
     --action-primary-hover:         var(--color-secondary-hover);
     --action-primary-active:        var(--color-secondary-active);
     --action-primary-bg:            color-mix(in srgb, var(--action-primary) 6%, transparent);
     --action-primary-border:        color-mix(in srgb, var(--action-primary) 12%, transparent);
     --action-primary-border-strong: color-mix(in srgb, var(--action-primary) 25%, transparent);

     --action-secondary-hover:         var(--color-primary-hover);
     --action-secondary-active:        var(--color-primary-active);
     --action-secondary-bg:            rgba(15, 45, 74, 0.40);
     --action-secondary-border:        rgba(255, 255, 255, 0.06);
     --action-secondary-border-strong: rgba(255, 255, 255, 0.12);

     /* Branded CHROME fill — a filled modal header or a neutral badge is
        structure wearing the brand, not an action. Mapping these to
        --action-secondary would have said 'button' about a header bar. Same
        value as --color-primary today; separate name so chrome and buttons
        can diverge without hunting through selectors. */
     --surface-brand:    var(--color-primary);

     /* ── 9. Elevation vs effect ──
        --shadow-sm / md / lg are structural elevation and stay as-is.
        Colour-bearing glows are EFFECTS and derive their colour from the
        semantic token they express, so a theme change carries them along.
        --shadow-primary / --shadow-secondary are legacy: they name a brand
        colour, which is what this phase removes. */
     --effect-focus-glow:  0 0 0 3px var(--state-info-border-strong);
     --effect-active-glow: 0 0 32px color-mix(in srgb, var(--state-active) 12%, transparent);
     --effect-brand-glow:  0 0 32px color-mix(in srgb, var(--color-primary) 40%, transparent);
     --shadow-focus:       var(--effect-focus-glow);   /* compat */
 }

 /* ════════════════════════════════════════════════════════════
    4. RACE / UI STATES

    Each race state gets one accent token plus bg/border variants, so a
    card, a chip and a row can share one rule and differ only by state.

    These names describe MEANING. The legacy --state-green / --state-yellow
    / --state-red / --state-black (emitted by includes/theme_tokens.php)
    name colours and are closed to new use.

    Defined as TOKENS, deliberately NOT as global `.state-*` classes. Those
    names are generic enough to collide with existing class names across the
    app, so the classes that consume these tokens are scoped to their
    component (e.g. `.jcard.state-active`) in the component stylesheet and
    are never declared globally here.
    ════════════════════════════════════════════════════════════ */
 :root {
     --state-active:   var(--color-accent);
     --state-hold:     var(--state-warning);
     --state-pending:  var(--state-info);
     --state-exited:   var(--text-muted);
     --state-finished: var(--state-success);
     --state-dnf:      var(--state-danger);
     --state-dq:       var(--state-danger);
     --state-disabled: var(--text-disabled);

     --state-active-bg:      var(--action-primary-bg);
     /* Normal active-state border. This previously pointed at
        --action-primary-border-strong (0.25) while --state-active-bg pointed
        at the normal tint (0.06) — an inconsistency that silently doubled the
        opacity of every 0.12 border migrated onto it. Every consumer audited
        (12, all in modals.css) came from --brand-secondary-border, i.e. the
        NORMAL weight, so this is the normal rung and -strong is explicit. */
     --state-active-border:        var(--action-primary-border);
     --state-active-border-strong: var(--action-primary-border-strong);
     --state-hold-bg:        var(--state-warning-bg);
     --state-hold-border:    var(--state-warning-border-strong);
     --state-pending-bg:     var(--state-info-bg);
     --state-pending-border: var(--state-info-border-strong);
     --state-finished-bg:    var(--state-success-bg);
     --state-finished-border:var(--state-success-border-strong);
 }

 /* ════════════════════════════════════════════════════════════
    LIGHT MODE
    Override surfaces, text, borders only.
    Brand colors (navy, cyan, status, category) are unchanged —
    they work on both dark and light backgrounds.
    ════════════════════════════════════════════════════════════ */
 [data-theme="light"] {

     /* Surfaces */
     --surface-body:       #F0F2F5;
     --surface-default:    #FFFFFF;
     --surface-card:       #FFFFFF;
     --surface-hover: #F4F6F9;
     --surface-input:      #FFFFFF;
     --surface-sidebar:    var(--theme-primary);      /* sidebar follows the event theme's chrome, in both modes */
     --surface-elevated:   #FFFFFF;

     /* Text */
     --text-primary:   #0F1923;
     --text-secondary: #3D4E5C;
     --text-muted:     #6B7A8D;
     --text-disabled:  #A0AABA;
     --text-inverse:   #F5F7FA;

     /* Borders */
     --border-default: #D4DAE0;
     --border-soft:    #E2E7EC;
     --border-active:  #B8C0CA;

     /* Neutral layer — flips for light backgrounds */


     /* Secondary-action (navy) surface variants — flip for light bg.
        Overrides the SEMANTIC tokens, not the --brand-* aliases: the aliases
        point here, so overriding them instead would break the link and leave
        light mode reading the dark values. */
     --action-secondary-bg:            rgba(15, 45, 74, 0.06);
     --action-secondary-border:        rgba(15, 45, 74, 0.12);
     --action-secondary-border-strong: rgba(15, 45, 74, 0.25);

     /* Tint base flips to navy on light backgrounds. --border-tint-strong is
        12% here, not 15% — matching the previous --brand-neutral-border, which
        was the one rung whose alpha differed between themes. */
     --tint-base:          #0F2D4A;
     --border-tint-strong: color-mix(in srgb, var(--tint-base) 12%, transparent);

     /* Shadows — lighter on light backgrounds */
     --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
     --shadow-md:        0 4px 12px rgba(0,0,0,0.10);
     --shadow-lg:        0 8px 32px rgba(0,0,0,0.12);
     --shadow-glow:      0 0 32px rgba(0, 212, 255, 0.10);
     /* Glows are softer on light backgrounds. Overriding the EFFECT tokens
        (not --shadow-primary/-secondary) keeps the compat aliases pointing at
        one definition, so light mode cannot drift from dark. */
     --effect-brand-glow:  0 0 32px color-mix(in srgb, var(--color-primary) 12%, transparent);
     --effect-active-glow: 0 0 32px color-mix(in srgb, var(--state-active) 10%, transparent);
 }
/* ================================================================
   BOOTSTRAP 4.6 OVERRIDES
   ================================================================ */

/* ── Card Overrides ── */
.card {
    background: var(--surface-card);
    border-color: var(--border-default);
}
.card:hover {
    border-color: var(--border-active);
}
.card-header {
    background: var(--surface-default);
    border-color: var(--border-soft);
}
.card-footer {
    background: var(--surface-default);
    border-color: var(--border-soft);
}

/* ── Modal Overrides ── */
.modal-content {
    background: var(--surface-default) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
}
.modal-header {
    background: var(--surface-brand) !important;
    border-bottom: 1px solid var(--action-secondary-hover) !important;
    color: var(--text-primary) !important;
    padding: 14px 20px !important;
}
.modal-header .close {
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
    text-shadow: none !important;
}
.modal-header .close:hover { opacity: 1 !important; }
.modal-footer {
    background: var(--surface-card) !important;
    border-top: 1px solid var(--border-soft) !important;
}
.modal-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-body .form-control {
    background: var(--surface-input) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}
.modal-body .form-control:focus {
    border-color: var(--action-primary) !important;
    box-shadow: 0 0 0 3px var(--action-primary-bg) !important;
    outline: none !important;
}

/* ── Form Overrides ── */
.form-control {
    background: var(--surface-input) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
.form-control:focus {
    border-color: var(--action-primary) !important;
    box-shadow: 0 0 0 3px var(--action-primary-bg) !important;
}
.form-control::placeholder {
    color: var(--text-disabled);
    opacity: 0.5;
}
.form-control[readonly] {
    background: var(--surface-card) !important;
}

/* ── List Group Overrides ── */
.list-group-item {
    background: var(--surface-card);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
.list-group-item:hover {
    background: var(--surface-hover);
}

/* ── Dropdown Overrides ── */
.dropdown-menu {
    background: var(--surface-default);
    border-color: var(--border-default);
}
.dropdown-item {
    color: var(--text-secondary);
}
.dropdown-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.dropdown-item.active {
    background: var(--action-primary-bg);
    color: var(--action-primary);
}
.dropdown-divider {
    border-color: var(--border-soft);
}

/* ── Nav Overrides ── */
.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--text-secondary);
}
.nav-tabs .nav-link.active {
    background: var(--surface-card);
    border-color: var(--border-default) var(--border-default) transparent;
    color: var(--action-primary);
}
.nav-tabs .nav-link.active:hover {
    color: var(--action-primary-hover);
}
.nav-tabs {
    border-color: var(--border-default);
}

/* ── Table Overrides ── */
.table {
    color: var(--text-secondary);
}
.table thead th {
    border-color: var(--border-soft);
    color: var(--text-muted);
}
.table td, .table th {
    border-color: var(--border-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02);
}
.table-hover tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
.table-dark {
    background: var(--surface-card);
}
.table-dark td, .table-dark th, .table-dark thead th {
    border-color: var(--border-soft);
}

/* ── Pagination Overrides ── */
.page-link {
    background: var(--surface-default);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.page-link:hover {
    background: var(--surface-hover);
    border-color: var(--border-active);
    color: var(--text-primary);
}
.page-item.active .page-link {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.page-item.disabled .page-link {
    background: var(--surface-default);
    border-color: var(--border-default);
    color: var(--text-disabled);
}

/* ── Alert Overrides ── */
.alert {
    border-radius: var(--radius-md);
}
.alert-success {
    background: var(--state-success-bg);
    border-color: var(--state-success-border);
    color: var(--state-success);
}
.alert-warning {
    background: var(--state-warning-bg);
    border-color: var(--state-warning-border);
    color: var(--state-warning);
}
.alert-danger {
    background: var(--state-danger-bg);
    border-color: var(--state-danger-border);
    color: var(--state-danger);
}
.alert-info {
    background: var(--state-info-bg);
    border-color: var(--state-info-border);
    color: var(--state-info);
}
.alert-dark {
    background: var(--surface-card);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* ── Badge Overrides ── */
.badge-primary {
    background: var(--state-active);
    color: #071216;
}
.badge-secondary {
    background: var(--surface-brand);
    color: #FFFFFF;
}
.badge-success {
    background: var(--state-success);
}
.badge-warning {
    background: var(--state-warning);
}
.badge-danger {
    background: var(--state-danger);
}
.badge-info {
    background: var(--state-info);
}
.badge-dark {
    background: var(--surface-card);
    color: var(--text-secondary);
}

/* ── Progress Overrides ── */
.progress {
    background: var(--border-soft);
}
.progress-bar {
    background: var(--state-active);
}
.progress-bar-success {
    background: var(--state-success);
}
.progress-bar-warning {
    background: var(--state-warning);
}
.progress-bar-danger {
    background: var(--state-danger);
}
.progress-bar-info {
    background: var(--state-info);
}

/* ================================================================
   BRAND UTILITY CLASSES (Bootstrap Compatible)
   ================================================================ */

/* ── Background Utilities ── */
.bg-brand-primary        { background: var(--color-primary) !important; }
.bg-brand-primary-bg     { background: var(--action-secondary-bg) !important; }
.bg-brand-secondary      { background: var(--color-secondary) !important; }
.bg-brand-secondary-bg   { background: var(--action-primary-bg) !important; }

/* Backward Compatible */
.bg-brand-navy           { background: var(--color-primary) !important; }
.bg-brand-navy-bg        { background: var(--action-secondary-bg) !important; }
.bg-brand-cyan           { background: var(--color-secondary) !important; }
.bg-brand-cyan-bg        { background: var(--action-primary-bg) !important; }

.bg-brand-success        { background: var(--state-success) !important; }
.bg-brand-success-bg     { background: var(--state-success-bg) !important; }

.bg-brand-warning        { background: var(--state-warning) !important; }
.bg-brand-warning-bg     { background: var(--state-warning-bg) !important; }

.bg-brand-danger         { background: var(--state-danger) !important; }
.bg-brand-danger-bg      { background: var(--state-danger-bg) !important; }

.bg-brand-info           { background: var(--state-info) !important; }
.bg-brand-info-bg        { background: var(--state-info-bg) !important; }

.bg-brand-conflict       { background: var(--state-conflict) !important; }
.bg-brand-conflict-bg    { background: var(--state-conflict-bg) !important; }

.bg-surface              { background: var(--surface-default) !important; }
.bg-card                 { background: var(--surface-card) !important; }
.bg-card-hover           { background: var(--surface-hover) !important; }
.bg-body                 { background: var(--surface-body) !important; }
.bg-input                { background: var(--surface-input) !important; }

/* ── Border Utilities ── */
.border-brand-primary         { border-color: var(--color-primary) !important; }
.border-brand-primary-hover   { border-color: var(--action-secondary-hover) !important; }
.border-brand-primary-strong  { border-color: var(--action-secondary-border-strong) !important; }
.border-brand-primary-bg      { border-color: var(--action-secondary-border) !important; }

.border-brand-secondary       { border-color: var(--color-secondary) !important; }
.border-brand-secondary-hover { border-color: var(--action-primary-hover) !important; }
.border-brand-secondary-strong { border-color: var(--action-primary-border-strong) !important; }
.border-brand-secondary-bg    { border-color: var(--action-primary-border) !important; }

/* Backward Compatible */
.border-brand-navy            { border-color: var(--color-primary) !important; }
.border-brand-navy-strong     { border-color: var(--action-secondary-border-strong) !important; }
.border-brand-navy-bg         { border-color: var(--action-secondary-border) !important; }
.border-brand-cyan            { border-color: var(--color-secondary) !important; }
.border-brand-cyan-strong     { border-color: var(--action-primary-border-strong) !important; }
.border-brand-cyan-bg         { border-color: var(--action-primary-border) !important; }

.border-brand-success         { border-color: var(--state-success) !important; }
.border-brand-success-bg      { border-color: var(--state-success-border) !important; }
.border-brand-success-strong  { border-color: var(--state-success-border-strong) !important; }

.border-brand-warning         { border-color: var(--state-warning) !important; }
.border-brand-warning-bg      { border-color: var(--state-warning-border) !important; }
.border-brand-warning-strong  { border-color: var(--state-warning-border-strong) !important; }

.border-brand-danger          { border-color: var(--state-danger) !important; }
.border-brand-danger-bg       { border-color: var(--state-danger-border) !important; }
.border-brand-danger-strong   { border-color: var(--state-danger-border-strong) !important; }

.border-brand-info            { border-color: var(--state-info) !important; }
.border-brand-info-bg         { border-color: var(--state-info-border) !important; }

.border-brand-conflict        { border-color: var(--state-conflict) !important; }
.border-brand-conflict-bg     { border-color: var(--state-conflict-border) !important; }

.border-card                  { border-color: var(--border-default) !important; }
.border-soft                  { border-color: var(--border-soft) !important; }
.border-active                { border-color: var(--border-active) !important; }

/* ── Text Utilities ── */
.text-brand-primary     { color: var(--color-primary) !important; }
.text-brand-secondary   { color: var(--color-secondary) !important; }

/* Backward Compatible */
.text-brand-navy        { color: var(--color-primary) !important; }
.text-brand-cyan        { color: var(--color-secondary) !important; }

.text-brand-success     { color: var(--state-success) !important; }
.text-brand-warning     { color: var(--state-warning) !important; }
.text-brand-danger      { color: var(--state-danger) !important; }
.text-brand-info        { color: var(--state-info) !important; }
.text-brand-conflict    { color: var(--state-conflict) !important; }

.text-cat-solo          { color: var(--category-solo) !important; }
.text-cat-duo           { color: var(--category-duo) !important; }
.text-cat-relay         { color: var(--category-relay) !important; }

/* ── Category Background Utilities ── */
.bg-cat-solo        { background: var(--category-solo-bg) !important; border-color: var(--category-solo-border) !important; }
.bg-cat-duo         { background: var(--category-duo-bg) !important; border-color: var(--category-duo-border) !important; }
.bg-cat-relay       { background: var(--category-relay-bg) !important; border-color: var(--category-relay-border) !important; }

/* ── Category Border Utilities ── */
.border-cat-solo    { border-color: var(--category-solo-border) !important; }
.border-cat-duo     { border-color: var(--category-duo-border) !important; }
.border-cat-relay   { border-color: var(--category-relay-border) !important; }

/* ── Category Badge Utilities ── */
.badge-cat-solo {
    background: var(--category-solo-bg);
    color: var(--category-solo);
    border-color: var(--category-solo-border);
}
.badge-cat-duo {
    background: var(--category-duo-bg);
    color: var(--category-duo);
    border-color: var(--category-duo-border);
}
.badge-cat-relay {
    background: var(--category-relay-bg);
    color: var(--category-relay);
    border-color: var(--category-relay-border);
}

/* ── Status Badge Utilities ── */
.badge-brand-primary {
    background: var(--action-secondary-bg);
    color: #B4BCC5;
    border-color: var(--action-secondary-border);
}
.badge-brand-secondary {
    background: var(--action-primary-bg);
    color: var(--state-active);
    border-color: var(--action-primary-border);
}

/* Backward Compatible */
.badge-brand-navy {
    background: var(--action-secondary-bg);
    color: #B4BCC5;
    border-color: var(--action-secondary-border);
}
.badge-brand-cyan {
    background: var(--action-primary-bg);
    color: var(--state-active);
    border-color: var(--action-primary-border);
}

.badge-brand-success {
    background: var(--state-success-bg);
    color: var(--state-success);
    border-color: var(--state-success-border);
}
.badge-brand-warning {
    background: var(--state-warning-bg);
    color: var(--state-warning);
    border-color: var(--state-warning-border);
}
.badge-brand-danger {
    background: var(--state-danger-bg);
    color: var(--state-danger);
    border-color: var(--state-danger-border);
}
.badge-brand-info {
    background: var(--state-info-bg);
    color: var(--state-info);
    border-color: var(--state-info-border);
}
.badge-brand-conflict {
    background: var(--state-conflict-bg);
    color: var(--state-conflict);
    border-color: var(--state-conflict-border);
}
.badge-muted {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border-color: var(--border-soft);
}

/* ── Status Button Utilities ── */
.btn-brand-primary {
    background: var(--action-secondary);
    border-color: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-primary:hover {
    background: var(--action-secondary-hover);
    border-color: var(--action-secondary-hover);
    color: #FFFFFF;
}

.btn-brand-secondary {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.btn-brand-secondary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: #071216;
}

/* Backward Compatible */
.btn-brand-navy {
    background: var(--action-secondary);
    border-color: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-navy:hover {
    background: var(--action-secondary-hover);
    border-color: var(--action-secondary-hover);
    color: #FFFFFF;
}
.btn-brand-cyan {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.btn-brand-cyan:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: #071216;
}

.btn-brand-success {
    background: var(--state-success);
    border-color: var(--state-success);
    color: #FFFFFF;
}
.btn-brand-success:hover {
    background: #00875A;
    border-color: #00875A;
}
.btn-danger,
.btn-brand-danger {
    background: var(--state-danger);
    border-color: var(--state-danger);
    color: #FFFFFF;
}
.btn-danger:hover,
.btn-brand-danger:hover {
    background: #C62828;
    border-color: #C62828;
}
.btn-warning,
.btn-brand-warning {
    background: var(--state-warning);
    border-color: var(--state-warning);
    color: #FFFFFF;
}
.btn-warning:hover,
.btn-brand-warning:hover {
    background: #996600;
    border-color: #996600;
}
.btn-info,
.btn-brand-info {
    background: var(--state-info);
    border-color: var(--state-info);
    color: #FFFFFF;
}
.btn-info:hover,
.btn-brand-info:hover {
    background: #2563EB;
    border-color: #2563EB;
}

.btn-brand-outline-primary {
    background: transparent;
    border: 1.5px solid var(--action-secondary);
    color: var(--action-secondary);
}
.btn-brand-outline-primary:hover {
    background: var(--action-secondary);
    color: #FFFFFF;
}

.btn-brand-outline-secondary {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-brand-outline-secondary:hover {
    background: var(--action-primary);
    color: #071216;
}

/* Backward Compatible */
.btn-brand-outline-navy {
    background: transparent;
    border: 1.5px solid var(--action-secondary);
    color: var(--action-secondary);
}
.btn-brand-outline-navy:hover {
    background: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-outline-cyan {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-brand-outline-cyan:hover {
    background: var(--action-primary);
    color: #071216;
}

/* ================================================================
   RESET & BASE (Bootstrap Compatible)
   ================================================================ */
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    background: var(--surface-body);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }

/* ── Typography (compatible with Bootstrap) ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

a {
    color: var(--action-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--action-primary-hover);
    text-decoration: none;
}

/* ── Code / Mono ── */
code, .mono {
    font-family: var(--font-mono);
}

/* ── Display Font ── */
.display-font {
    font-family: var(--font-display);
}

/* ================================================================
   CUSTOM COMPONENTS (Beyond Bootstrap)
   ================================================================ */

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.btn:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}

/* Primary — authority, structural actions */
.btn-primary-custom, .btn-navy {
    background: var(--action-secondary);
    color: #FFFFFF;
    border: 1px solid var(--action-secondary-hover);
}
.btn-primary-custom:hover, .btn-navy:hover {
    background: var(--action-secondary-hover);
    box-shadow: var(--effect-brand-glow);
    color: #FFFFFF;
}
.btn-primary-custom:active, .btn-navy:active {
    background: var(--action-secondary-active);
}

/* Secondary — motion, live actions */
.btn-secondary-custom, .btn-cyan, .btn-action {
    background: var(--action-primary);
    color: #071216;
    border: none;
    font-weight: 600;
}
.btn-secondary-custom:hover, .btn-cyan:hover, .btn-action:hover {
    background: var(--action-primary-hover);
    box-shadow: var(--effect-active-glow);
    color: #071216;
}
.btn-secondary-custom:active, .btn-cyan:active, .btn-action:active {
    background: var(--action-primary-active);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
}
.btn-ghost:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}

/* Danger */
.btn-danger-custom {
    background: var(--state-danger-bg);
    border: 1px solid var(--state-danger-border);
    color: var(--state-danger);
}
.btn-danger-custom:hover {
    background: rgba(217, 59, 59, 0.2);
    border-color: var(--state-danger-border-strong);
}

/* Success */
.btn-success-custom {
    background: var(--state-success);
    color: #fff;
    border: none;
}
.btn-success-custom:hover {
    background: #00875A;
}

/* Outline secondary */
.btn-outline-secondary, .btn-outline {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-outline-secondary:hover, .btn-outline:hover {
    background: var(--action-primary);
    color: #071216;
}

/* Backward Compatible: .btn-navy/.btn-cyan/.btn-action/.btn-outline are
   aliased above via selector grouping (grouped with their real .btn-*-custom
   counterparts, not real CSS's nonexistent @extend) — footer.php's shared
   modal buttons (saveTimeBtn, saveAthlete, etc.) still use these class names. */

/* Sizes */
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-xs { padding: 3px 10px; font-size: 11px; }

/* States */
.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon button */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-icon:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}
.btn-icon.active {
    border-color: var(--action-primary);
    color: var(--action-primary);
    background: var(--action-primary-bg);
}

/* ── Form Elements ── */
.form-group { margin-bottom: var(--spacing-md); }

.form-group label,
.form-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}

input,
select,
textarea,
.form-control {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px var(--action-primary-bg);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-disabled);
    opacity: 0.5;
}

select option { background: var(--surface-card); color: var(--text-primary); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* ── Live Dot Animation ── */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--state-active);
    animation: pulse-live 1.5s ease-in-out infinite;
    vertical-align: middle;
}
.live-dot.success { background: var(--state-success); }
.live-dot.warning { background: var(--state-warning); }

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* ── Timer Displays ── */
.timer-display {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--state-active);
    letter-spacing: 2px;
    line-height: 1;
}
.timer-xl  { font-size: 56px; }
.timer-lg  { font-size: 42px; }
.timer-md  { font-size: 28px; }
.timer-sm  { font-size: 18px; }

/* ── Empty State ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 40px;
    margin-bottom: 14px;
    color: var(--action-secondary-hover);
    opacity: 0.4;
}
.empty-state h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.empty-state p {
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.6;
    max-width: 240px;
    line-height: 1.5;
}

/* ── Toast Notifications ── */
.toast-notification {
    position: fixed;
    top: calc(var(--rm-nav-h) + 12px);
    right: 20px;
    padding: 13px 20px;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    z-index: 99999;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    animation: toastIn 0.25s ease;
    transition: opacity 0.3s, transform 0.3s;
}
.toast-notification.toast-hide { opacity: 0; transform: translateX(110%); }
.toast-notification.success {
    background: #0A1F0F;
    border-color: var(--state-success-border-strong);
    color: var(--state-success);
}
.toast-notification.danger  {
    background: #1F0A0A;
    border-color: var(--state-danger-border-strong);
    color: var(--state-danger);
}
.toast-notification.warning {
    background: #1A140A;
    border-color: var(--state-warning-border-strong);
    color: var(--state-warning);
}
.toast-notification.info    {
    background: #0A1229;
    border-color: var(--state-info-border-strong);
    color: var(--state-info);
}
.toast-close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.6;
    padding: 0 2px;
}
.toast-close-btn:hover { opacity: 1; }

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── Focus / Accessibility ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--action-link);
    outline-offset: 2px;
}

/* ================================================================
   UTILITY CLASSES (Bootstrap Compatible Extensions)
   ================================================================ */

/* ── Text Utilities ── */
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-disabled  { color: var(--text-disabled) !important; }

/* ── Custom Spacing Extensions ── */
.mt-1  { margin-top: var(--spacing-sm); }
.mt-2  { margin-top: var(--spacing-md); }
.mt-3  { margin-top: var(--spacing-lg); }
.mb-1  { margin-bottom: var(--spacing-sm); }
.mb-2  { margin-bottom: var(--spacing-md); }
.mb-3  { margin-bottom: var(--spacing-lg); }
.p-1   { padding: var(--spacing-sm); }
.p-2   { padding: var(--spacing-md); }
.p-3   { padding: var(--spacing-lg); }

/* ── Gap Utilities (Flex/Grid) ── */
.gap-xs         { gap: var(--spacing-xs); }
.gap-sm         { gap: var(--spacing-sm); }
.gap-md         { gap: var(--spacing-md); }
.gap-lg         { gap: var(--spacing-lg); }

/* ── Flex Utilities ── */
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }

/* ── Misc ── */
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-wide  { letter-spacing: 0.8px; }
.tracking-wider { letter-spacing: 1.2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

select.form-control{height: auto!important}


/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
    }
    .modal-header {
        padding: 12px 16px !important;
    }
    .modal-footer {
        padding: 12px 16px !important;
    }
    .form-row { grid-template-columns: 1fr; gap: var(--spacing-sm); }
}

@media (max-width: 480px) {
    .timer-xl { font-size: 40px; }
    .timer-lg { font-size: 32px; }
    .btn { font-size: 13px; padding: 8px 14px; }
    .btn-lg { font-size: 14px; padding: 11px 20px; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .card { border: 1px solid #ddd !important; background: #fff !important; }
    .btn, .toast-notification, .modal, .dropdown-menu { display: none !important; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   CONTEXT TABS — sub-navigation for MANAGEMENT surfaces

   Second-level navigation for management/information pages
   (architecture.md §14). It answers "which section of this area am I in",
   never "which mode am I in" — that is the global mode switcher's job, and
   this must not compete with it visually.

   Operational controller surfaces (Race Control, Wave Builder, Zone Control)
   deliberately have NO context navigation and must not adopt this component.

   Mirrors the shipped .settings-tabs pattern (settings.css) — pill row, inset
   track, horizontal scroll on narrow screens — but is expressed in semantic
   tokens. settings.css predates the token migration and still hardcodes its
   colours, including a #FFC107 active state left over from the old Race Master
   palette. New components do not reintroduce that; see the migration note in
   architecture.md.
   ================================================================ */
.context-tabs {
    display: flex;
    flex-wrap: nowrap;



    justify-content: center;
    gap: 2px;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--surface-default);
    border-bottom: 1px solid var(--border-soft);

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}




/* display: flex;
gap: 2px;
margin-bottom: 28px;
background: var(--surface-elevated);
border: 1px solid var(--border-default);
padding: var(--spacing-md);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--border-default) transparent;
flex-wrap: nowrap;
 */


.context-tabs::-webkit-scrollbar        { height: 4px; }
.context-tabs::-webkit-scrollbar-track  { background: transparent; }
.context-tabs::-webkit-scrollbar-thumb  { background: var(--border-default); border-radius: var(--radius-pill); }

.context-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-muted);
    background: transparent;
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

.context-tab:hover {
    color: var(--text-primary);
    background: var(--surface-tint-subtle);
    text-decoration: none;
}
.context-tab.active {
    color: var(--text-inverse);
    background: var(--action-primary);
    font-weight: 700;
}
.context-tab i { font-size: 13px; }