/* ============================================================================
   TipsChampions - Sports Betting Platform for Friends & Family

   @package     TipsChampions
   @subpackage  Theme Tokens + UI Primitives
   @version     1.1
   @since       May 2026
   @license     Proprietary

   @file        public/assets/css/themes/_base.css
   @description Canonical primitive layer for the user-facing frontend.
                Defines:
                  1. The `--tc-*` token contract every primitive reads from.
                  2. The `.ui-*` component styles (card, stat, list-row,
                     match-row, alert-banner, table, form-section, badge,
                     progress-meter, modal).
                Tokens default to the legacy app.css palette so the existing
                `light` and `dark` themes keep working unchanged. New themes
                = a single [data-theme="..."] block setting --tc-* values.
                Every .ui-* rule picks the new tokens up via the cascade.

   LOAD ORDER:
     1. bootstrap.min.css (CDN)
     2. app.css                 (legacy variables + Bootstrap augmentation)
     3. dark-theme.css          (dark overrides at [data-theme="dark"])
     4. responsive-fixes.css
     5. THIS FILE               (token aliasing + .ui-* primitives)

   CONVENTIONS:
   - Token names: kebab-case, under the `--tc-` prefix.
   - Primitive classes: kebab-case, under the `.ui-` prefix.
   - Primitives NEVER hard-code colour / shadow / radius / spacing -- only
     tokens. That is what makes themes a one-block override.

   SECTIONS (search the headings below):
     1. Token contract           -- the --tc-* custom-properties
     2. Body / utility helpers
     3. Bottom tab bar primitive
     4. UI primitives (.ui-*)    -- one block per primitive
     5. Compatibility shims      -- (empty for now)
   ============================================================================ */


/* ============================================================================
   SECTION 1 — TOKEN CONTRACT
   ============================================================================ */

:root {

    /* ---- Surface --------------------------------------------------------- */
    --tc-bg:               var(--tc-bg-body,       #f8f9fa);
    --tc-bg-elevated:      var(--tc-bg-surface,    #ffffff);
    --tc-bg-sunken:        var(--tc-bg-muted,      #f5f6fa);
    --tc-bg-hover:         var(--tc-bg-surface-hover,  #f8f9fa);
    --tc-bg-active:        var(--tc-bg-surface-active, #e9ecef);
    --tc-bg-highlight:     var(--tc-primary-light, rgba(102, 126, 234, 0.08));

    /* ---- Foreground / text ---------------------------------------------- */
    --tc-fg:               var(--tc-text-primary,   #212529);
    --tc-fg-dim:           var(--tc-text-secondary, #6c757d);
    --tc-fg-muted:         var(--tc-text-muted,     #9ca3af);
    --tc-fg-on-accent:     var(--tc-text-inverse,   #ffffff);

    /* ---- Accents (semantic) --------------------------------------------- */
    --tc-accent:           var(--tc-primary,        #667eea);
    --tc-accent-hover:     var(--tc-primary-hover,  #5568d3);
    --tc-accent-soft:      var(--tc-primary-light,  rgba(102, 126, 234, 0.12));
    --tc-accent-fg:        var(--tc-text-inverse,   #ffffff);

    --tc-success:          var(--tc-success,        #28a745);
    --tc-success-soft:     var(--tc-success-light,  rgba(40, 167, 69, 0.12));
    --tc-success-fg:       #ffffff;

    --tc-warning:          var(--tc-warning,        #ffc107);
    --tc-warning-soft:     var(--tc-warning-light,  rgba(255, 193, 7, 0.18));
    --tc-warning-fg:       var(--tc-warning-text,   #856404);

    --tc-danger:           var(--tc-danger,         #dc3545);
    --tc-danger-soft:      var(--tc-danger-light,   rgba(220, 53, 69, 0.12));
    --tc-danger-fg:        #ffffff;

    --tc-info:             var(--tc-info,           #17a2b8);
    --tc-info-soft:        var(--tc-info-light,     rgba(23, 162, 184, 0.14));
    --tc-info-fg:          #ffffff;

    /* ---- Position medals (1st / 2nd / 3rd) ------------------------------ */
    --tc-gold:             #d4af37;
    --tc-gold-soft:        rgba(212, 175, 55, 0.18);
    --tc-silver:           #adb5bd;
    --tc-silver-soft:      rgba(173, 181, 189, 0.18);
    --tc-bronze:           #cd7f32;
    --tc-bronze-soft:      rgba(205, 127, 50, 0.18);

    /* ---- Structure ------------------------------------------------------ */
    --tc-border:           var(--tc-border-color,   #dee2e6);
    --tc-border-strong:    var(--tc-border-dark,    #ced4da);

    --tc-radius-xs:        0.25rem;     /* 4px  -- small badge */
    --tc-radius-sm:        0.375rem;    /* 6px  -- chips, buttons */
    --tc-radius-md:        0.75rem;     /* 12px -- cards, panels */
    --tc-radius-lg:        1.25rem;     /* 20px -- hero cards */
    --tc-radius-pill:      999px;

    --tc-shadow-flat:      none;
    /* Card shadow layered: a tight contact-shadow + a soft ambient one. Works
       on both light and dark themes because both layers use rgba(0,0,0,...). */
    --tc-shadow-card:      0 1px 2px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.06);
    --tc-shadow-card-hover:0 2px 4px rgba(0,0,0,0.10), 0 12px 28px rgba(0,0,0,0.10);
    --tc-shadow-floating:  var(--tc-shadow-lg,      0 12px 32px rgba(0,0,0,0.20));

    /* ---- Type ----------------------------------------------------------- */
    --tc-font-body:        var(--tc-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    --tc-font-display:     var(--tc-font-body);
    --tc-font-mono:        var(--tc-font-mono, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);

    --tc-fs-stat:          1.75rem;     /* big-number size on stat blocks */
    --tc-fs-stat-sm:       1.25rem;     /* compact big-number */

    /* ---- Spacing scale -------------------------------------------------- */
    --tc-space-1:          0.25rem;     /* 4px  */
    --tc-space-2:          0.5rem;      /* 8px  */
    --tc-space-3:          0.75rem;     /* 12px */
    --tc-space-4:          1rem;        /* 16px */
    --tc-space-5:          1.5rem;      /* 24px */
    --tc-space-6:          2rem;        /* 32px */
    --tc-space-7:          3rem;        /* 48px */
    --tc-space-8:          4rem;        /* 64px */

    /* ---- Motion --------------------------------------------------------- */
    --tc-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --tc-ease-in:          cubic-bezier(0.7, 0, 0.84, 0);
    --tc-dur-fast:         140ms;
    --tc-dur-med:          240ms;

    /* ---- Z-index scale -------------------------------------------------- */
    --tc-z-nav:            1020;
    --tc-z-bottom-tab:     1030;
    --tc-z-modal:          1050;
    --tc-z-toast:          1080;
}


/* ============================================================================
   SECTION 2 — Body / utility helpers
   ============================================================================ */

/* Tabular numerics anywhere we want clean number columns. */
.tc-num,
.ui-stat__value,
.ui-table td.is-num,
.ui-table th.is-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}


/* ============================================================================
   SECTION 3 — Bottom tab bar primitive (retained from previous _base.css)
   ============================================================================ */

.tc-bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tc-z-bottom-tab);
    display: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--tc-bg-elevated);
    border-top: 1px solid var(--tc-border);
}

.tc-bottom-tabs__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    color: var(--tc-fg-dim);
    text-decoration: none;
    font-size: 0.7rem;
    line-height: 1.1;
    gap: 2px;
}

.tc-bottom-tabs__item.is-active { color: var(--tc-accent); }
.tc-bottom-tabs__item i { font-size: 1.25rem; }

@media (max-width: 767.98px) {
    body.has-bottom-tabs .tc-bottom-tabs { display: flex; }
    body.has-bottom-tabs main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}


/* ============================================================================
   SECTION 4 — UI PRIMITIVES (.ui-*)
   ============================================================================
   Each primitive is documented at the top with:
   - Markup contract (the HTML the partial outputs)
   - States / modifiers
   - Tokens consumed
   ============================================================================ */


/* ----- .ui-card ----------------------------------------------------------
   Markup:
     <article class="ui-card[ ui-card--accent][ ui-card--urgent][ ui-card--compact]">
       <header class="ui-card__header">...</header>   <!-- optional -->
       <div    class="ui-card__body">...</div>
       <footer class="ui-card__footer">...</footer>   <!-- optional -->
     </article>
   ---------------------------------------------------------------------- */

.ui-card {
    background: var(--tc-bg-elevated);
    color: var(--tc-fg);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* On dark themes the card / page-bg luminance gap is small. Lift the card a
   touch with a 1px inner highlight + slightly heavier border so panels read
   clearly without us having to fork tokens per-theme. */
[data-theme="dark"] .ui-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.08);
}

.ui-card__header {
    padding: var(--tc-space-4) var(--tc-space-5);
    border-bottom: 1px solid var(--tc-border);
    background: var(--tc-bg-sunken);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    font-weight: 600;
    font-size: 1rem;
}
.ui-card__header > :first-child { margin: 0; }

.ui-card__body {
    padding: var(--tc-space-5);
    flex-grow: 1;
}

.ui-card__footer {
    padding: var(--tc-space-3) var(--tc-space-5);
    border-top: 1px solid var(--tc-border);
    background: var(--tc-bg-sunken);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tc-space-2);
}

/* Density */
.ui-card--compact .ui-card__header { padding: var(--tc-space-2) var(--tc-space-3); }
.ui-card--compact .ui-card__body   { padding: var(--tc-space-3); }
.ui-card--compact .ui-card__footer { padding: var(--tc-space-2) var(--tc-space-3); }

/* Tone modifiers */
.ui-card--accent  { border-color: var(--tc-accent);  box-shadow: 0 0 0 1px var(--tc-accent-soft), var(--tc-shadow-card); }
.ui-card--urgent  { border-color: var(--tc-danger);  box-shadow: 0 0 0 1px var(--tc-danger-soft), var(--tc-shadow-card); }
.ui-card--success { border-color: var(--tc-success); }
.ui-card--warning { border-color: var(--tc-warning); }


/* ----- .ui-accordion -----------------------------------------------------
   Markup (Bootstrap collapse structure inside a .ui-accordion wrapper):
     <div class="ui-accordion accordion" id="...">
       <div class="accordion-item">
         <h3 class="accordion-header">
           <button class="accordion-button collapsed" data-bs-toggle="collapse" ...>Q</button>
         </h3>
         <div class="accordion-collapse collapse" data-bs-parent="#...">
           <div class="accordion-body">A</div>
         </div>
       </div>
       ...
     </div>
   Drives Bootstrap's own --bs-accordion-* vars off the token contract so each
   item reads as a themed card (not a raw white panel) on every theme. The
   glass theme adds the frosted backdrop blur (12-stadium-glass.css).
   ---------------------------------------------------------------------- */

.ui-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--tc-fg);
    --bs-accordion-border-color: var(--tc-border);
    --bs-accordion-border-radius: var(--tc-radius-md);
    --bs-accordion-inner-border-radius: var(--tc-radius-md);
    --bs-accordion-btn-color: var(--tc-fg);
    --bs-accordion-btn-bg: var(--tc-bg-elevated);
    --bs-accordion-active-color: var(--tc-accent);
    --bs-accordion-active-bg: var(--tc-accent-soft);
    --bs-accordion-btn-focus-border-color: var(--tc-accent);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--tc-accent-soft);
    --bs-accordion-body-color: var(--tc-fg-dim);
    /* Neutral chevron — reads on both light and dark button surfaces; the
       expanded state switches to the lime accent. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a96a8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C8FF5C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-2);
}
/* Each item is its own rounded "box" (gap above separates them). */
.ui-accordion .accordion-item {
    background: var(--tc-bg-elevated);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    overflow: hidden;
}
.ui-accordion .accordion-button {
    font-weight: 600;
    border-radius: var(--tc-radius-md);
}
.ui-accordion .accordion-button:not(.collapsed) { box-shadow: none; }


/* ----- .ui-stat ----------------------------------------------------------
   Markup:
     <div class="ui-stat ui-stat--{tone}">
       <span class="ui-stat__icon"><i class="bi bi-{...}"></i></span>
       <span class="ui-stat__label">...</span>
       <div   class="ui-stat__value">...</div>
       <div   class="ui-stat__subtitle">...</div>   <!-- optional -->
       <span  class="ui-stat__trend ui-stat__trend--{up|down|same}">+12</span>  <!-- optional -->
     </div>
   Tone = primary | success | warning | danger | info | neutral
   ---------------------------------------------------------------------- */

.ui-stat {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "icon  label    trend"
        "icon  value    trend"
        "icon  subtitle trend";
    gap: var(--tc-space-1) var(--tc-space-3);
    align-items: center;
    padding: var(--tc-space-4);
    background: var(--tc-bg-elevated);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    color: var(--tc-fg);
}

.ui-stat__icon {
    grid-area: icon;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tc-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--tc-bg-sunken);
    color: var(--tc-fg-dim);
    align-self: center;
}

.ui-stat__label {
    grid-area: label;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tc-fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.ui-stat__value {
    grid-area: value;
    font-size: var(--tc-fs-stat);
    font-weight: 700;
    color: var(--tc-fg);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ui-stat__subtitle {
    grid-area: subtitle;
    font-size: 0.8rem;
    color: var(--tc-fg-dim);
    line-height: 1.2;
}

.ui-stat__trend {
    grid-area: trend;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--tc-radius-pill);
    align-self: center;
}
.ui-stat__trend--up   { background: var(--tc-success-soft); color: var(--tc-success); }
.ui-stat__trend--down { background: var(--tc-danger-soft);  color: var(--tc-danger);  }
.ui-stat__trend--same { background: var(--tc-bg-sunken);    color: var(--tc-fg-dim);  }

/* Tone — paints the icon chip in the semantic colour */
.ui-stat--primary .ui-stat__icon { background: var(--tc-accent-soft);  color: var(--tc-accent);  }
.ui-stat--success .ui-stat__icon { background: var(--tc-success-soft); color: var(--tc-success); }
.ui-stat--warning .ui-stat__icon { background: var(--tc-warning-soft); color: var(--tc-warning); }
.ui-stat--danger  .ui-stat__icon { background: var(--tc-danger-soft);  color: var(--tc-danger);  }
.ui-stat--info    .ui-stat__icon { background: var(--tc-info-soft);    color: var(--tc-info);    }

/* Compact variant (used in dense dashboards) */
.ui-stat--compact { padding: var(--tc-space-3); }
.ui-stat--compact .ui-stat__icon { width: 2rem; height: 2rem; }
.ui-stat--compact .ui-stat__value { font-size: var(--tc-fs-stat-sm); }


/* ----- .ui-list-row ------------------------------------------------------
   Markup:
     <a class="ui-list-row[ ui-list-row--clickable][ ui-list-row--{state}]" href="...">
       <div class="ui-list-row__leading">...</div>   <!-- icon/avatar/rank, optional -->
       <div class="ui-list-row__content">
         <div class="ui-list-row__title">...</div>
         <div class="ui-list-row__subtitle">...</div>   <!-- optional -->
       </div>
       <div class="ui-list-row__trailing">...</div>   <!-- badge/time/action, optional -->
     </a>
   States: default | active | urgent | read | unread
   ---------------------------------------------------------------------- */

.ui-list-row {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3) var(--tc-space-4);
    color: var(--tc-fg);
    text-decoration: none;
    border-bottom: 1px solid var(--tc-border);
    background: transparent;
    transition: background var(--tc-dur-fast) var(--tc-ease-out);
}
.ui-list-row:last-child { border-bottom: none; }

.ui-list-row--clickable { cursor: pointer; }
.ui-list-row--clickable:hover { background: var(--tc-bg-hover); color: var(--tc-fg); text-decoration: none; }

.ui-list-row__leading {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
}

.ui-list-row__content {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-list-row__title {
    font-weight: 500;
    color: var(--tc-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list-row__subtitle {
    font-size: 0.8rem;
    color: var(--tc-fg-dim);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list-row__trailing {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    color: var(--tc-fg-dim);
    font-size: 0.85rem;
}

/* States */
.ui-list-row--active  { background: var(--tc-accent-soft); }
.ui-list-row--active .ui-list-row__title { color: var(--tc-accent); font-weight: 600; }
.ui-list-row--urgent  { background: var(--tc-danger-soft); border-left: 3px solid var(--tc-danger); padding-left: calc(var(--tc-space-4) - 3px); }
.ui-list-row--unread  { background: var(--tc-accent-soft); border-left: 3px solid var(--tc-accent); padding-left: calc(var(--tc-space-4) - 3px); }
.ui-list-row--unread .ui-list-row__title { font-weight: 600; }
.ui-list-row--read    { opacity: 0.72; }


/* ----- .ui-match-row -----------------------------------------------------
   The most-reused element in the betting cluster. 4 size variants:
     - compact      (Betting Hub dense view)
     - comfortable  (matches list)
     - spacious     (single-match hero)
     - tabular      (my-bets table row)
   States: open | live | closed | settled
   Markup:
     <div class="ui-match-row ui-match-row--{size} ui-match-row--{state}">
       <div class="ui-match-row__team ui-match-row__team--home">...</div>
       <div class="ui-match-row__center">...</div>
       <div class="ui-match-row__team ui-match-row__team--away">...</div>
       <div class="ui-match-row__odds">...</div>    <!-- optional -->
       <div class="ui-match-row__userbet">...</div> <!-- optional -->
     </div>
   ---------------------------------------------------------------------- */

.ui-match-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "home center away";
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3) var(--tc-space-4);
    background: var(--tc-bg-elevated);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    color: var(--tc-fg);
}
.ui-match-row + .ui-match-row { margin-top: var(--tc-space-2); }

.ui-match-row__team {
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    min-width: 0;
}
.ui-match-row__team--home { grid-area: home; justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.ui-match-row__team--away { grid-area: away; justify-content: flex-start; text-align: left; }

.ui-match-row__crest {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-bg-sunken);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--tc-fg-dim);
}

.ui-match-row__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ui-match-row__center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    min-width: 100px;
}
.ui-match-row__kickoff { font-size: 0.75rem; color: var(--tc-fg-dim); }
.ui-match-row__score   { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tc-fg); }
.ui-match-row__vs      { font-size: 0.85rem; color: var(--tc-fg-muted); font-weight: 600; }
.ui-match-row__deadline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--tc-warning-soft);
    color: var(--tc-warning-fg);
    border-radius: var(--tc-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
}
.ui-match-row__deadline--urgent { background: var(--tc-danger-soft); color: var(--tc-danger); }

.ui-match-row__odds {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--tc-space-2);
    justify-content: center;
    margin-top: var(--tc-space-3);
}
.ui-match-row__odd {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--tc-space-2) var(--tc-space-3);
    background: var(--tc-bg-sunken);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
    min-width: 64px;
    color: var(--tc-fg);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.ui-match-row__odd-label { font-size: 0.65rem; font-weight: 500; color: var(--tc-fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.ui-match-row__odd-value { font-size: 0.95rem; }
.ui-match-row__odd:hover { background: var(--tc-bg-hover); }
.ui-match-row__odd.is-picked,
.ui-match-row__odd--picked { background: var(--tc-accent-soft); border-color: var(--tc-accent); color: var(--tc-accent); }

.ui-match-row__userbet {
    grid-column: 1 / -1;
    margin-top: var(--tc-space-2);
    padding-top: var(--tc-space-2);
    border-top: 1px dashed var(--tc-border);
    font-size: 0.8rem;
    color: var(--tc-fg-dim);
    text-align: center;
}

/* Size variants */
.ui-match-row--compact {
    padding: var(--tc-space-2) var(--tc-space-3);
    border-radius: var(--tc-radius-sm);
}
.ui-match-row--compact .ui-match-row__center { min-width: 70px; }
.ui-match-row--compact .ui-match-row__crest { width: 22px; height: 22px; font-size: 0.7rem; }
.ui-match-row--compact .ui-match-row__score { font-size: 0.95rem; }
.ui-match-row--compact .ui-match-row__odds { display: none; }

.ui-match-row--spacious {
    padding: var(--tc-space-5);
    border-radius: var(--tc-radius-lg);
}
.ui-match-row--spacious .ui-match-row__crest { width: 56px; height: 56px; font-size: 1.2rem; }
.ui-match-row--spacious .ui-match-row__name { font-size: 1.1rem; font-weight: 600; }
.ui-match-row--spacious .ui-match-row__score { font-size: 2rem; }
.ui-match-row--spacious .ui-match-row__center { min-width: 140px; gap: var(--tc-space-1); }

/* State */
.ui-match-row--live { border-color: var(--tc-success); box-shadow: 0 0 0 1px var(--tc-success-soft); }
.ui-match-row--closed { opacity: 0.85; }
.ui-match-row--settled { background: var(--tc-bg-sunken); }


/* ----- .ui-alert-banner --------------------------------------------------
   Markup:
     <div class="ui-alert-banner ui-alert-banner--{tone}" role="alert">
       <span class="ui-alert-banner__icon"><i class="bi bi-..."></i></span>
       <div class="ui-alert-banner__content">
         <div class="ui-alert-banner__title">...</div>      <!-- optional -->
         <div class="ui-alert-banner__body">...</div>
       </div>
       <a class="ui-alert-banner__action" href="...">...</a>  <!-- optional -->
     </div>
   Tone: info | success | warning | danger | urgent (urgent = pulsing danger)
   ---------------------------------------------------------------------- */

.ui-alert-banner {
    display: flex;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3) var(--tc-space-4);
    border-radius: var(--tc-radius-md);
    border-left: 4px solid var(--tc-accent);
    background: var(--tc-accent-soft);
    color: var(--tc-fg);
}
.ui-alert-banner__icon { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.ui-alert-banner__content { flex: 1 1 auto; min-width: 0; }
.ui-alert-banner__title { font-weight: 600; margin-bottom: 2px; }
.ui-alert-banner__body  { font-size: 0.9rem; color: var(--tc-fg-dim); }
.ui-alert-banner__action {
    flex: 0 0 auto;
    padding: var(--tc-space-2) var(--tc-space-4);
    background: var(--tc-accent);
    color: var(--tc-accent-fg);
    border-radius: var(--tc-radius-pill);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
}
.ui-alert-banner__action:hover { background: var(--tc-accent-hover); color: var(--tc-accent-fg); }

/* Tones */
.ui-alert-banner--info    { background: var(--tc-info-soft);    border-left-color: var(--tc-info);    }
.ui-alert-banner--info    .ui-alert-banner__action { background: var(--tc-info);    color: var(--tc-info-fg);    }
.ui-alert-banner--success { background: var(--tc-success-soft); border-left-color: var(--tc-success); }
.ui-alert-banner--success .ui-alert-banner__action { background: var(--tc-success); color: var(--tc-success-fg); }
.ui-alert-banner--warning { background: var(--tc-warning-soft); border-left-color: var(--tc-warning); }
.ui-alert-banner--warning .ui-alert-banner__action { background: var(--tc-warning); color: var(--tc-warning-fg); }
.ui-alert-banner--danger  { background: var(--tc-danger-soft);  border-left-color: var(--tc-danger);  }
.ui-alert-banner--danger  .ui-alert-banner__action { background: var(--tc-danger);  color: var(--tc-danger-fg);  }

.ui-alert-banner--urgent {
    background: var(--tc-danger-soft);
    border-left-color: var(--tc-danger);
    animation: ui-alert-pulse 2s ease-in-out infinite;
}
@keyframes ui-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--tc-danger-soft); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}


/* ----- .ui-table ---------------------------------------------------------
   Markup:
     <div class="ui-table-wrap">
       <table class="ui-table[ ui-table--hover][ ui-table--compact]">
         <thead><tr>...</tr></thead>
         <tbody>...</tbody>
       </table>
     </div>
   `td.is-num` and `th.is-num` opt-in to tabular-nums + right alignment.
   ---------------------------------------------------------------------- */

.ui-table-wrap {
    overflow-x: auto;
    border-radius: var(--tc-radius-md);
    border: 1px solid var(--tc-border);
    background: var(--tc-bg-elevated);
}
.ui-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--tc-fg);
}
.ui-table th, .ui-table td {
    padding: var(--tc-space-3) var(--tc-space-4);
    text-align: left;
    border-bottom: 1px solid var(--tc-border);
    vertical-align: middle;
}
.ui-table th {
    background: var(--tc-bg-sunken);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tc-fg-dim);
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table--hover tbody tr { transition: background var(--tc-dur-fast); }
.ui-table--hover tbody tr:hover { background: var(--tc-bg-hover); }
.ui-table th.is-num, .ui-table td.is-num { text-align: right; }
.ui-table--compact th, .ui-table--compact td { padding: var(--tc-space-2) var(--tc-space-3); }
.ui-table__row--highlight td { background: var(--tc-accent-soft); }


/* ----- .ui-form-section --------------------------------------------------
   A card-wrapped form section with title + description + fields + footer.
   Reuses .ui-card visually. The whole partial outputs a .ui-card.
   ---------------------------------------------------------------------- */

.ui-form-section__title       { font-size: 1rem; font-weight: 600; margin: 0; }
.ui-form-section__description { font-size: 0.85rem; color: var(--tc-fg-dim); margin: 4px 0 0; }
.ui-form-section__fields > * + * { margin-top: var(--tc-space-4); }


/* ----- .ui-badge ---------------------------------------------------------
   Markup: <span class="ui-badge ui-badge--{tone}[ ui-badge--pill]"><i>...</i>label</span>
   Tones: primary | success | warning | danger | info | gold | silver | bronze | neutral
   ---------------------------------------------------------------------- */

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--tc-radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--tc-bg-sunken);
    color: var(--tc-fg);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ui-badge--pill    { border-radius: var(--tc-radius-pill); padding: 3px 10px; }
.ui-badge--primary { background: var(--tc-accent-soft);  color: var(--tc-accent);  }
.ui-badge--success { background: var(--tc-success-soft); color: var(--tc-success); }
.ui-badge--warning { background: var(--tc-warning-soft); color: var(--tc-warning-fg); }
.ui-badge--danger  { background: var(--tc-danger-soft);  color: var(--tc-danger);  }
.ui-badge--info    { background: var(--tc-info-soft);    color: var(--tc-info);    }
.ui-badge--gold    { background: var(--tc-gold-soft);    color: var(--tc-gold);    }
.ui-badge--silver  { background: var(--tc-silver-soft);  color: var(--tc-silver);  }
.ui-badge--bronze  { background: var(--tc-bronze-soft);  color: var(--tc-bronze);  }
.ui-badge--neutral { background: var(--tc-bg-sunken);    color: var(--tc-fg-dim);  }

/* Tokenised utility used for non-badge position-3 markers (e.g. circular
   rank tile on member-stats). Kept as a plain class because Bootstrap
   utility forms .bg-warning / .bg-secondary already handle 1st/2nd. */
.bg-bronze { background-color: var(--tc-bronze) !important; color: #fff !important; }


/* ----- .ui-progress-meter ------------------------------------------------
   Used for password-strength bars + any 0..100 score. */

.ui-progress-meter { display: flex; flex-direction: column; gap: 4px; }
.ui-progress-meter__label-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--tc-fg-dim); }
.ui-progress-meter__track {
    height: 6px;
    background: var(--tc-bg-sunken);
    border-radius: var(--tc-radius-pill);
    overflow: hidden;
}
.ui-progress-meter__bar {
    height: 100%;
    background: var(--tc-accent);
    border-radius: inherit;
    transition: width var(--tc-dur-med) var(--tc-ease-out), background var(--tc-dur-fast);
}
.ui-progress-meter__bar--danger  { background: var(--tc-danger);  }
.ui-progress-meter__bar--warning { background: var(--tc-warning); }
.ui-progress-meter__bar--success { background: var(--tc-success); }


/* ----- .ui-modal ---------------------------------------------------------
   Bootstrap modal with theme-token chrome. Markup follows Bootstrap's
   .modal>.modal-dialog>.modal-content>.modal-header/body/footer pattern.
   ---------------------------------------------------------------------- */

.ui-modal .modal-content {
    background: var(--tc-bg-elevated);
    color: var(--tc-fg);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    box-shadow: var(--tc-shadow-floating);
}
.ui-modal .modal-header {
    border-bottom: 1px solid var(--tc-border);
    background: var(--tc-bg-sunken);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    padding: var(--tc-space-4) var(--tc-space-5);
    gap: var(--tc-space-3);
}
.ui-modal__header-icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-accent-soft);
    color: var(--tc-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ui-modal .modal-title { font-weight: 600; margin: 0; }
.ui-modal .modal-body  { padding: var(--tc-space-5); }
.ui-modal .modal-footer {
    border-top: 1px solid var(--tc-border);
    background: var(--tc-bg-sunken);
    padding: var(--tc-space-3) var(--tc-space-5);
}


/* ============================================================================
   SECTION 5 — Compatibility shims
   ============================================================================
   The legacy app.css and view markup keep working unchanged. As views migrate
   to .ui-* primitives we can prune those rules. Nothing here for now -- the
   primitive layer is purely additive.
   ============================================================================ */