/* ==========================================================================
   Sporty theme
   --------------------------------------------------------------------------
   Shared look first built for the session cards. Two layers:

   1. Components (.sx-*) any template can use: page hero, scoreboard tiles,
      chips, pills, score bars, session cards, big action buttons.
   2. A skin, switched on by `sx-skin` on <body> (see base.html), that
      restyles plain Bootstrap cards, buttons, badges, tables and headings
      on a whole app at once. Covers every app page.
   ========================================================================== */

:root {
    --sx-ink: #0f172a;
    --sx-ink-2: #1e293b;
    --sx-blue: #2563eb;
    --sx-green: #10b981;
    --sx-green-deep: #059669;
    --sx-amber: #f59e0b;
    --sx-orange: #f97316;
    --sx-red: #ef4444;
    --sx-cyan: #06b6d4;
    --sx-slate: #64748b;
    --sx-radius: 16px;
    --sx-radius-sm: 10px;
    --sx-shadow: 0 6px 18px -12px rgba(15,23,42,.35);
}

/* ---- 1. Components ------------------------------------------------------ */

/* Uppercase, letter-spaced micro label (eyebrows, stat captions). */
.sx-eyebrow {
    font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sx-accent, var(--sx-blue));
}

/* Page hero: dark band with an accent stripe, bold italic title. */
.sx-hero {
    --sx-accent: var(--sx-green);
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
    border-radius: var(--sx-radius);
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sx-accent) 35%, transparent) 0%, transparent 55%),
        repeating-linear-gradient(-55deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, var(--sx-ink), var(--sx-ink-2));
    box-shadow: 0 14px 30px -20px rgba(15,23,42,.8);
}
.sx-hero::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--sx-accent);
}
.sx-hero-main { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.sx-hero .sx-eyebrow { color: color-mix(in srgb, var(--sx-accent) 70%, #fff); }
.sx-hero-title {
    margin: .1rem 0 .15rem; font-size: clamp(1.3rem, 4.5vw, 1.75rem);
    font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1.1; color: #fff;
}
.sx-hero-sub { font-size: .85rem; color: #cbd5e1; }
.sx-hero-sub i { margin-right: .3rem; opacity: .7; }
.sx-hero-back {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #fff; text-decoration: none; font-size: 1.1rem;
}
.sx-hero-back:hover { background: rgba(255,255,255,.16); color: #fff; }
.sx-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sx-hero .btn-outline-light { border-color: rgba(255,255,255,.3); }
.sx-hero-blue   { --sx-accent: var(--sx-blue); }

/* Auto hero: a page's own header row, tagged by sporty.js. Keeps the row's
   layout and only repaints it, so any header markup works. */
.sx-hero-auto {
    --sx-accent: var(--sx-green);
    position: relative; overflow: hidden;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: var(--sx-radius);
    color: #e2e8f0;
    border: 0 !important;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sx-accent) 35%, transparent) 0%, transparent 55%),
        repeating-linear-gradient(-55deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, var(--sx-ink), var(--sx-ink-2)) !important;
    box-shadow: 0 14px 30px -20px rgba(15,23,42,.8) !important;
}
.sx-hero-auto::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--sx-accent); }
.sx-hero-auto .sx-hero-auto-title, .sx-hero-auto.sx-hero-auto-title {
    color: #fff !important; font-weight: 900 !important; font-style: italic; letter-spacing: -.02em;
}
.sx-hero-auto h1, .sx-hero-auto h2, .sx-hero-auto h3, .sx-hero-auto h4, .sx-hero-auto h5,
.sx-hero-auto .h1, .sx-hero-auto .h2, .sx-hero-auto .h3, .sx-hero-auto .h4, .sx-hero-auto strong { color: #fff !important; }
.sx-hero-auto p, .sx-hero-auto small, .sx-hero-auto .text-muted, .sx-hero-auto .text-secondary,
.sx-hero-auto .text-body-secondary, .sx-hero-auto [class*="subtitle"] { color: #cbd5e1 !important; }
.sx-hero-auto > :last-child { margin-bottom: 0 !important; }
.sx-hero-auto [class*="eyebrow"] { color: color-mix(in srgb, var(--sx-accent) 70%, #fff) !important; }
.sx-hero-auto a:not(.btn) { color: #fff; }
.sx-hero-auto .btn-outline-secondary, .sx-hero-auto .btn-outline-primary, .sx-hero-auto .btn-outline-dark,
.sx-hero-auto .btn-light, .sx-hero-auto .btn-secondary, .sx-hero-auto .btn-outline-info, .sx-hero-auto .btn-outline-success {
    background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important;
}
.sx-hero-auto .btn-outline-secondary:hover, .sx-hero-auto .btn-outline-primary:hover, .sx-hero-auto .btn-outline-dark:hover,
.sx-hero-auto .btn-light:hover, .sx-hero-auto .btn-secondary:hover, .sx-hero-auto .btn-outline-info:hover, .sx-hero-auto .btn-outline-success:hover {
    background: rgba(255,255,255,.16) !important;
}
.sx-hero-auto .btn-outline-danger { background: rgba(239,68,68,.14) !important; color: #fecaca !important; border-color: rgba(239,68,68,.4) !important; }
.sx-hero-auto .badge.bg-light, .sx-hero-auto .badge.text-dark { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.sx-hero-amber  { --sx-accent: var(--sx-amber); }
.sx-hero-red    { --sx-accent: var(--sx-red); }

/* Scoreboard: a row of stat tiles with big italic numbers. */
.sx-scoreboard {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem;
    margin-bottom: 1.25rem;
}
.sx-tile {
    --sx-accent: var(--sx-slate);
    position: relative; overflow: hidden;
    padding: .7rem .85rem .65rem;
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color-translucent, #e5e7eb);
    box-shadow: var(--sx-shadow);
}
.sx-tile::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sx-accent);
}
.sx-tile-num {
    display: block; font-size: 1.75rem; font-weight: 900; font-style: italic; line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sx-accent);
}
.sx-tile-label {
    display: block; margin-top: .3rem;
    font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bs-secondary-color, #64748b);
}
.sx-tile-green  { --sx-accent: var(--sx-green); }
.sx-tile-red    { --sx-accent: var(--sx-red); }
.sx-tile-amber  { --sx-accent: var(--sx-amber); }
.sx-tile-cyan   { --sx-accent: var(--sx-cyan); }
.sx-tile-blue   { --sx-accent: var(--sx-blue); }
@media (max-width: 575.98px) {
    .sx-scoreboard { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: .4rem; }
    .sx-tile { padding: .55rem .5rem .5rem; border-radius: 12px; }
    .sx-tile-num { font-size: 1.35rem; }
    .sx-tile-label { font-size: .56rem; letter-spacing: .06em; }
}

/* Section heading inside a page. */
.sx-section-title {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .75rem; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.sx-section-title::before {
    content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--sx-accent, var(--sx-green));
}

/* Big uppercase action buttons. */
.sx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .62rem .9rem; border-radius: var(--sx-radius-sm);
    font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform .08s, filter .12s, background .12s;
}
.sx-btn:active { transform: scale(.97); }
.sx-btn-lg { padding: .8rem 1.4rem; font-size: .92rem; }
@media (max-width: 575.98px) { .sx-btn-lg { padding: .75rem 1rem; font-size: .85rem; } }
.sx-btn-go, .sx-btn-mark {
    background: linear-gradient(135deg, #16a34a, var(--sx-green-deep)); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(5,150,105,.9);
}
.sx-btn-kiosk {
    background: linear-gradient(135deg, var(--sx-amber), var(--sx-orange)); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(249,115,22,.9);
}
.sx-btn-go:hover, .sx-btn-mark:hover, .sx-btn-kiosk:hover { color: #fff; filter: brightness(1.06); }
.sx-btn-view { background: transparent; color: #4f46e5; border-color: rgba(79,70,229,.35); }
.sx-btn-view:hover { background: rgba(79,70,229,.08); color: #4338ca; }
.sx-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.sx-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.sx-btn-ghost-red { background: rgba(239,68,68,.14); color: #fecaca; border-color: rgba(239,68,68,.4); }
.sx-btn-ghost-red:hover { background: rgba(239,68,68,.24); color: #fff; }
.sx-btn-line { background: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color, #d1d5db); }
.sx-btn-line:hover { background: var(--bs-tertiary-bg, #f1f5f9); color: var(--bs-body-color); }

/* ---- Mobile session cards (templates/attendance/_session_card.html) ---- */
.sx-list { display: flex; flex-direction: column; gap: .85rem; padding: .85rem; background: var(--bs-tertiary-bg, #f3f4f6); }
@media (min-width: 768px) {
    .sx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; padding: 1rem; }
    .sx-list .sx-card { display: flex; flex-direction: column; }
    .sx-list .sx-score { margin-top: auto; }  /* line up the scores and buttons across a row */
}
.sx-list > .text-center { grid-column: 1 / -1; }
.sx-title { font-weight: 800; font-size: .95rem; line-height: 1.2; margin: .1rem 0 .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-list-bar {
    display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #e5e7eb);
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.sx-list-bar-item { display: inline-flex; align-items: center; gap: .45rem; margin: 0; cursor: pointer; color: var(--bs-secondary-color, #6b7280); text-decoration: none; }
.sx-list-bar-item:hover { color: var(--bs-body-color, #111827); }
.sx-list-bar-item .form-check-input { margin: 0; }
.sx-card {
    --sx-accent: #2563eb; --sx-accent-soft: rgba(37,99,235,.10);
    position: relative; overflow: hidden;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color-translucent, #e5e7eb);
    border-radius: 16px;
    padding: 1rem 1rem .85rem 1.15rem;
    box-shadow: 0 6px 18px -12px rgba(15,23,42,.35);
}
.sx-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    background: linear-gradient(180deg, var(--sx-accent), color-mix(in srgb, var(--sx-accent) 55%, #000));
}
.sx-card.sx-in_progress { --sx-accent: #f59e0b; --sx-accent-soft: rgba(245,158,11,.14); }
.sx-card.sx-completed   { --sx-accent: #10b981; --sx-accent-soft: rgba(16,185,129,.12); }
.sx-card.sx-cancelled   { --sx-accent: #ef4444; --sx-accent-soft: rgba(239,68,68,.12); }
.sx-top { display: flex; align-items: flex-start; gap: .8rem; }
.sx-date {
    flex: 0 0 auto; width: 56px; padding: .35rem 0 .3rem;
    border-radius: 12px; text-align: center; line-height: 1;
    background: linear-gradient(145deg, #0f172a, #1e293b); color: #fff;
    box-shadow: inset 0 -3px 0 var(--sx-accent);
}
.sx-day { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-mon { display: block; margin-top: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cbd5e1; }
.sx-head { flex: 1 1 auto; min-width: 0; }
.sx-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sx-dow { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-accent); }
.sx-time { font-size: 1.1rem; font-weight: 800; font-style: italic; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; }
.sx-time i, .sx-where i { font-style: normal; margin-right: .35rem; opacity: .6; font-size: .85em; }
.sx-where { font-size: .78rem; color: var(--bs-secondary-color, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sx-top > .session-cb { flex: 0 0 auto; margin-top: .15rem; }
.sx-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .3rem .6rem; border-radius: 999px;
    background: var(--sx-accent-soft); color: var(--sx-accent);
}
.sx-live { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sx-pulse 1.4s ease-in-out infinite; }
@keyframes sx-pulse { 50% { opacity: .25; } }
.sx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 .75rem; }
.sx-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 6px;
    background: var(--bs-tertiary-bg, #f1f5f9); color: var(--bs-body-color, #334155);
    border: 1px solid var(--bs-border-color-translucent, #e2e8f0);
}
.sx-chip-private { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; }
.sx-chip-repl { background: rgba(14,165,233,.12); color: #0284c7; border-color: rgba(14,165,233,.3); }
.sx-score {
    display: flex; align-items: center; gap: .85rem;
    padding: .6rem .75rem; border-radius: 12px;
    background: var(--sx-accent-soft);
}
.sx-score-num { font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.sx-score-num strong { font-size: 1.6rem; font-weight: 900; font-style: italic; color: var(--sx-accent); }
.sx-score-num span { font-size: .95rem; font-weight: 700; color: var(--bs-secondary-color, #64748b); }
.sx-score-body { flex: 1 1 auto; min-width: 0; }
.sx-score-label { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color, #64748b); margin-bottom: .3rem; }
.sx-bar { height: 7px; border-radius: 999px; background: rgba(100,116,139,.18); overflow: hidden; }
.sx-bar span {
    display: block; height: 100%; max-width: 100%; min-width: 0; border-radius: inherit;
    background: repeating-linear-gradient(-45deg, var(--sx-accent) 0 6px, color-mix(in srgb, var(--sx-accent) 80%, #fff) 6px 12px);
}
.sx-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .45rem; margin-top: .8rem; }
.sx-tools { display: flex; justify-content: space-between; gap: .25rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--bs-border-color-translucent, #e5e7eb); }
.sx-tool {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .35rem .25rem; border: 0; background: transparent; border-radius: 8px;
    font-size: .76rem; font-weight: 600; color: var(--bs-secondary-color, #64748b); text-decoration: none;
}
.sx-tool:hover { background: var(--bs-tertiary-bg, #f1f5f9); color: var(--bs-body-color, #1f2937); }
.sx-tool-del { color: #dc2626; }
.sx-tool-del:hover { background: rgba(239,68,68,.1); color: #b91c1c; }
[data-bs-theme="dark"] .sx-list { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .sx-card { box-shadow: none; }
[data-bs-theme="dark"] .sx-date { background: linear-gradient(145deg, #1e293b, #334155); }
[data-bs-theme="dark"] .sx-chip { background: rgba(255,255,255,.06); color: #e2e8f0; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .sx-chip-private { background: rgba(139,92,246,.2); color: #c4b5fd; border-color: rgba(139,92,246,.4); }
[data-bs-theme="dark"] .sx-btn-view { color: #a5b4fc; border-color: rgba(165,180,252,.35); }

.sx-actions .sx-btn { padding-inline: .5rem; }

/* Player tile (Mark Attendance): one trainee, status stripe, big tap targets. */
.sx-player {
    --sx-accent: var(--sx-slate);
    position: relative; overflow: hidden; height: 100%;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color-translucent, #e5e7eb);
    border-radius: 14px;
    box-shadow: var(--sx-shadow);
    padding: .85rem .85rem .8rem 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.sx-player::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--sx-accent);
    transition: background .15s;
}
.sx-player.status-present { --sx-accent: var(--sx-green); }
.sx-player.status-absent  { --sx-accent: var(--sx-red); }
.sx-player.status-late    { --sx-accent: var(--sx-amber); }
.sx-player.status-excused { --sx-accent: var(--sx-cyan); }
.sx-player.status-medical { --sx-accent: var(--sx-slate); }

/* Sticky save bar. */
.sx-savebar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    margin-top: 1.25rem; padding: .75rem;
    border-radius: var(--sx-radius) var(--sx-radius) 0 0;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bs-border-color-translucent, #e5e7eb); border-bottom: 0;
    box-shadow: 0 -10px 24px -18px rgba(15,23,42,.6);
}

/* ---- 2. Skin: every app page (body.sx-skin, set in base.html) ------------
   Barlow for reading; Barlow Condensed for anything that should read like a
   scoreboard: headings, numbers, buttons, labels, table heads, badges.
   Colours come from the brand tokens in base.html (--sx-brand,
   --sx-brand-deep, --sx-gold), so a club's own colour carries through.
   -------------------------------------------------------------------------- */

/* Type ---------------------------------------------------------------------- */
.sx-skin { font-family: var(--font-body); }

.sx-skin :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
             .page-title, .card-title, .modal-title, .offcanvas-title, .popover-header,
             .display-1, .display-2, .display-3, .display-4, .display-5, .display-6),
.sx-hero-title, .sx-hero-auto-title, .sx-eyebrow, .sx-section-title, .sx-btn,
.sx-tile-num, .sx-tile-label, .sx-day, .sx-mon, .sx-dow, .sx-time, .sx-pill, .sx-chip,
.sx-score-num, .sx-score-label, .sx-title, .sx-list-bar {
    font-family: var(--font-sport);
}
.sx-skin :is(h1, h2, h3, .h1, .h2, .h3, .page-title) { font-weight: 800; letter-spacing: .005em; line-height: 1.08; text-wrap: balance; }
.sx-skin :is(h4, h5, h6, .h4, .h5, .h6) { font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.sx-skin :is(h1, .h1, .page-title) { font-style: italic; text-transform: uppercase; letter-spacing: .01em; }
.sx-skin :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { font-weight: 800; }

/* Anything a template already sets in capitals reads as a scoreboard label. */
.sx-skin .text-uppercase { font-family: var(--font-sport); letter-spacing: .08em; }

/* Page hero titles: big, italic, capitals, one size on every page. */
.sx-hero-title,
.sx-hero-auto .sx-hero-auto-title, .sx-hero-auto.sx-hero-auto-title {
    font-weight: 800 !important; font-style: italic; text-transform: uppercase;
    letter-spacing: .01em !important; line-height: 1.02;
    font-size: clamp(1.55rem, 4.8vw, 2.15rem) !important;
}
.sx-eyebrow, .sx-hero-auto [class*="eyebrow"] { font-size: .8rem; font-weight: 700; letter-spacing: .16em; }
.sx-section-title { font-size: 1rem; font-weight: 800; letter-spacing: .1em; }

/* Numbers: condensed, heavy, lined up. */
.sx-tile-num { font-size: 2.15rem; font-weight: 800; letter-spacing: 0; }
.sx-tile-label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; }
.sx-score-num strong { font-size: 1.9rem; font-weight: 800; }
.sx-day { font-size: 1.75rem; font-weight: 800; }
.sx-mon, .sx-dow { font-size: .78rem; }
.sx-time { font-size: 1.25rem; }
.sx-pill { font-size: .74rem; font-weight: 700; }
.sx-chip { font-size: .8rem; font-weight: 600; letter-spacing: .05em; }
.sx-title { font-size: 1.12rem; font-weight: 700; }
.sx-list-bar { font-size: .82rem; font-weight: 700; }
.sx-skin :is(.stat-value, [class*="stat-value"], [class*="stat-num"], [class*="stat-total"],
             .metric-value, .score-big, .score-ring-value) {
    font-family: var(--font-sport); font-weight: 800; letter-spacing: .005em;
    font-variant-numeric: tabular-nums; line-height: 1.05;
}
.sx-skin .stat-value { font-size: 2.2rem; }
.sx-skin :is(.stat-label, [class*="stat-label"], .stat-card .stat-info h3) {
    font-family: var(--font-sport); font-weight: 700; font-size: .85rem;
    letter-spacing: .1em; text-transform: uppercase;
}

/* Buttons --------------------------------------------------------------------
   Capitals in the condensed face, a 2px edge, and a light sweep across the
   solid colours on hover. Links and long left-aligned choice buttons keep
   normal text. */
.sx-btn { font-size: 1rem; font-weight: 700; letter-spacing: .06em; }
.sx-btn-lg { font-size: 1.1rem; }

.sx-skin .btn {
    font-family: var(--font-sport);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-width: 2px;
    border-radius: 10px;
    --bs-btn-border-radius: 10px;
    transition: transform .12s ease, box-shadow .15s ease, background-position .55s ease,
                background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.sx-skin .btn-sm { font-size: .9rem; letter-spacing: .05em; border-radius: 8px; --bs-btn-border-radius: 8px; }
.sx-skin .btn-lg { font-size: 1.2rem; border-radius: 12px; --bs-btn-border-radius: 12px; }
.sx-skin :is(.btn-link, .btn.text-start, .btn.text-wrap, .btn.text-none) {
    font-family: var(--font-body); font-weight: 600; letter-spacing: normal; text-transform: none;
}
.sx-skin .btn-link { border-width: 1px; }
.sx-skin .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sx-brand) 50%, transparent);
    outline-offset: 2px;
}
.sx-skin .btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }

/* Solid colours: each variant sets its two gradient stops (and text). */
.sx-skin .btn-primary   { --sx-b1: var(--sx-brand); --sx-b2: var(--sx-brand-deep); }
.sx-skin .btn-success   { --sx-b1: #16a34a; --sx-b2: #047857; }
.sx-skin .btn-danger    { --sx-b1: #ef4444; --sx-b2: #b91c1c; }
.sx-skin .btn-warning   { --sx-b1: #fbbf24; --sx-b2: #f97316; --sx-bt: #1c1300; }
.sx-skin .btn-info      { --sx-b1: #06b6d4; --sx-b2: #0e7490; }
.sx-skin .btn-secondary { --sx-b1: #64748b; --sx-b2: #334155; }
.sx-skin .btn-dark      { --sx-b1: #1e293b; --sx-b2: #020617; }
.sx-skin :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark) {
    color: var(--sx-bt, #fff);
    border-color: transparent;
    background-color: var(--sx-b2);
    background-image:
        linear-gradient(105deg, transparent 38%, rgba(255,255,255,.24) 50%, transparent 62%),
        linear-gradient(135deg, var(--sx-b1), var(--sx-b2));
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 8px 18px -12px var(--sx-b1);
}
.sx-skin :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark):is(:hover, :focus-visible) {
    color: var(--sx-bt, #fff);
    border-color: transparent;
    background-color: var(--sx-b2);
    background-position: -30% 0, 0 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 12px 22px -12px var(--sx-b1);
    transform: translateY(-1px);
}
.sx-skin :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark):is(:active, .active, .show) {
    color: var(--sx-bt, #fff);
    background-color: var(--sx-b2);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
    transform: scale(.97);
}
.sx-skin .btn:is(:disabled, .disabled) { transform: none; box-shadow: none; filter: saturate(.55); }

/* Outline colours: Bootstrap's own variables, so checked toggles and
   active states keep working. */
.sx-skin [class*="btn-outline-"] { background-image: none; }
.sx-skin .btn-outline-primary {
    --bs-btn-color: var(--sx-brand); --bs-btn-border-color: color-mix(in srgb, var(--sx-brand) 55%, transparent);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sx-brand); --bs-btn-hover-border-color: var(--sx-brand);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sx-brand-deep); --bs-btn-active-border-color: var(--sx-brand-deep);
    --bs-btn-disabled-color: var(--sx-brand); --bs-btn-disabled-border-color: color-mix(in srgb, var(--sx-brand) 40%, transparent);
}
.sx-skin :is(.btn-outline-secondary, .btn-outline-dark) {
    --bs-btn-color: var(--text-primary); --bs-btn-border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-color));
    --bs-btn-hover-color: var(--card-bg); --bs-btn-hover-bg: var(--text-primary); --bs-btn-hover-border-color: var(--text-primary);
    --bs-btn-active-color: var(--card-bg); --bs-btn-active-bg: var(--text-primary); --bs-btn-active-border-color: var(--text-primary);
    --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-border-color: var(--border-color);
}
.sx-skin .btn-outline-dark { --bs-btn-border-color: var(--text-primary); }
.sx-skin .btn-outline-success {
    --bs-btn-color: #15803d; --bs-btn-border-color: rgba(22,163,74,.55);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #047857; --bs-btn-active-border-color: #047857;
}
.sx-skin .btn-outline-danger {
    --bs-btn-color: #dc2626; --bs-btn-border-color: rgba(220,38,38,.5);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c;
}
.sx-skin .btn-outline-warning {
    --bs-btn-color: #b45309; --bs-btn-border-color: rgba(245,158,11,.6);
    --bs-btn-hover-color: #1c1300; --bs-btn-hover-bg: #fbbf24; --bs-btn-hover-border-color: #fbbf24;
    --bs-btn-active-color: #1c1300; --bs-btn-active-bg: #f59e0b; --bs-btn-active-border-color: #f59e0b;
}
.sx-skin .btn-outline-info {
    --bs-btn-color: #0e7490; --bs-btn-border-color: rgba(6,182,212,.55);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0891b2; --bs-btn-hover-border-color: #0891b2;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0e7490; --bs-btn-active-border-color: #0e7490;
}
.sx-skin [class*="btn-outline-"]:not(.btn-outline-light) {
    color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); background-color: transparent;
}
.sx-skin [class*="btn-outline-"]:not(.btn-outline-light):is(:hover, :focus-visible) {
    color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color);
}
.sx-skin [class*="btn-outline-"]:not(.btn-outline-light):is(:active, .active, .show),
.sx-skin .btn-check:checked + [class*="btn-outline-"]:not(.btn-outline-light) {
    color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color);
}
[data-bs-theme="dark"] .sx-skin .btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--sx-brand) 55%, #fff); }
[data-bs-theme="dark"] .sx-skin .btn-outline-success { --bs-btn-color: #4ade80; }
[data-bs-theme="dark"] .sx-skin .btn-outline-danger  { --bs-btn-color: #f87171; }
[data-bs-theme="dark"] .sx-skin .btn-outline-warning { --bs-btn-color: #fbbf24; }
[data-bs-theme="dark"] .sx-skin .btn-outline-info    { --bs-btn-color: #22d3ee; }

.sx-skin .btn-light { border-color: var(--border-color); }
.sx-skin .btn-light:is(:hover, :focus-visible) { background: var(--border-color); color: var(--text-primary); }

/* The small view button on session cards follows the brand too. */
.sx-btn-view { color: var(--sx-brand, #4f46e5); border-color: color-mix(in srgb, var(--sx-brand, #4f46e5) 40%, transparent); }
.sx-btn-view:hover { background: color-mix(in srgb, var(--sx-brand, #4f46e5) 8%, transparent); color: var(--sx-brand-deep, #3730a3); }
[data-bs-theme="dark"] .sx-btn-view { color: color-mix(in srgb, var(--sx-brand, #4f46e5) 50%, #fff); border-color: color-mix(in srgb, var(--sx-brand, #4f46e5) 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .sx-skin .btn, .sx-btn { transition: none; }
    .sx-skin .btn:hover, .sx-skin .btn:active { transform: none !important; }
}

/* Cards ---------------------------------------------------------------------- */
.sx-skin .card {
    border-radius: var(--sx-radius);
    border-color: var(--border-color);
    box-shadow: var(--sx-shadow);
}
.sx-skin .card > .card-header:first-child { border-radius: calc(var(--sx-radius) - 1px) calc(var(--sx-radius) - 1px) 0 0; }
.sx-skin .card > .card-footer:last-child  { border-radius: 0 0 calc(var(--sx-radius) - 1px) calc(var(--sx-radius) - 1px); }
.sx-skin .card-header {
    font-family: var(--font-sport); font-size: 1.05rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    border-bottom-color: var(--border-color);
}
.sx-skin .card-header :is(h1, h2, h3, h4, h5, h6, .card-title) {
    font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-style: normal;
}
/* Copy, inputs and links sitting in a card header keep their normal text. */
.sx-skin .card-header :is(p, small, .small, .text-muted, .form-text, input, select, textarea, .form-control, .form-select, a:not(.btn)) {
    font-family: var(--font-body); letter-spacing: normal; text-transform: none;
}
.sx-skin .card-header :is(p, small, .small, .text-muted, .form-text) { font-weight: 400; }
.sx-skin .card-footer { border-top-color: var(--border-color); }
.sx-skin .stat-card { border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); }
.sx-skin .stat-icon { border-radius: 12px; }

/* Tables: league-table heads ---------------------------------------------- */
.sx-skin .table > thead > tr > :is(th, td) {
    font-family: var(--font-sport); font-size: .84rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    border-bottom: 2px solid color-mix(in srgb, var(--text-primary) 65%, transparent);
}
.sx-skin .table > thead:not(.table-dark):not(.table-primary) > tr > :is(th, td) { color: var(--text-secondary); }
.sx-skin .table > tbody td { font-variant-numeric: tabular-nums; }
.sx-skin .table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--sx-brand) 6%, transparent); }

/* Badges -------------------------------------------------------------------- */
.sx-skin .badge {
    font-family: var(--font-sport); font-size: .8rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .36em .62em .32em; border-radius: 6px;
}

/* Forms --------------------------------------------------------------------- */
.sx-skin :is(.form-label, .col-form-label) {
    font-family: var(--font-sport); font-size: 1.02rem; font-weight: 700; letter-spacing: .02em;
}
.sx-skin .form-check-label { font-weight: 500; }
.sx-skin :is(.form-control, .form-select) { border-width: 1.5px; border-radius: 10px; }
.sx-skin :is(.form-control-sm, .form-select-sm) { border-radius: 8px; }
.sx-skin :is(.form-control, .form-select):hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
    border-color: color-mix(in srgb, var(--text-secondary) 55%, var(--border-color));
}
.sx-skin :is(.form-control, .form-select):focus:not(.is-invalid):not(.is-valid) {
    border-color: var(--sx-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-brand) 16%, transparent);
}
.sx-skin .form-check-input:is(:checked, :indeterminate) { background-color: var(--sx-brand); border-color: var(--sx-brand); }
.sx-skin .form-check-input:focus {
    border-color: var(--sx-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-brand) 18%, transparent);
}
.sx-skin .form-range::-webkit-slider-thumb { background: var(--sx-brand); }
.sx-skin .form-range::-moz-range-thumb { background: var(--sx-brand); }
.sx-skin .input-group-text {
    font-family: var(--font-sport); font-weight: 700; letter-spacing: .03em;
    border-width: 1.5px; background: var(--bg-color);
}

/* Tabs and pills ------------------------------------------------------------- */
.sx-skin :is(.nav-tabs, .nav-pills, .nav-underline) .nav-link {
    font-family: var(--font-sport); font-size: 1rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.sx-skin .nav-tabs { border-bottom: 2px solid var(--border-color); }
.sx-skin .nav-tabs .nav-link {
    border: 0; border-radius: 0; margin-bottom: -2px;
    color: var(--text-secondary); background: transparent;
}
.sx-skin .nav-tabs .nav-link:hover { color: var(--text-primary); box-shadow: inset 0 -3px 0 var(--border-color); }
.sx-skin .nav-tabs :is(.nav-link.active, .nav-item.show .nav-link) {
    color: var(--sx-brand); background: transparent; box-shadow: inset 0 -3px 0 var(--sx-brand);
}
[data-bs-theme="dark"] .sx-skin .nav-tabs :is(.nav-link.active, .nav-item.show .nav-link) { color: color-mix(in srgb, var(--sx-brand) 50%, #fff); }
.sx-skin .nav-pills .nav-link { border-radius: 999px; }
.sx-skin .nav-pills :is(.nav-link.active, .show > .nav-link) {
    color: #fff;
    background: linear-gradient(135deg, var(--sx-brand), var(--sx-brand-deep));
    box-shadow: 0 8px 16px -12px var(--sx-brand);
}

/* Modals, dropdowns, popovers, toasts ---------------------------------------- */
.sx-skin .modal-content {
    border: 0; border-radius: 18px;
    box-shadow: 0 30px 70px -25px rgba(2,6,23,.6);
}
.sx-skin .modal-header { position: relative; border-bottom-color: var(--border-color); }
.sx-skin .modal-content > .modal-header:first-child::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--sx-brand), var(--sx-gold));
}
.sx-skin .modal-title { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.sx-skin .modal-footer { border-top-color: var(--border-color); }

.sx-skin .dropdown-menu {
    border: 1px solid var(--border-color); border-radius: 12px; padding: .35rem;
    box-shadow: 0 18px 40px -18px rgba(2,6,23,.45);
}
.sx-skin .dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; }
.sx-skin .dropdown-item:is(.active, :active) { background: var(--sx-brand); color: #fff; }
.sx-skin .dropdown-header {
    font-family: var(--font-sport); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.sx-skin .toast { --bs-toast-border-radius: 12px; }

/* Pagination ----------------------------------------------------------------- */
.sx-skin .pagination { gap: .3rem; flex-wrap: wrap; }
.sx-skin .page-link {
    min-width: 2.5rem; margin-left: 0 !important; text-align: center;
    font-family: var(--font-sport); font-size: 1.02rem; font-weight: 700;
    border-width: 1.5px; border-radius: 8px !important;
    color: var(--text-primary);
}
.sx-skin .page-link:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-brand) 18%, transparent); }
.sx-skin .page-item.active .page-link { background: var(--sx-brand); border-color: var(--sx-brand); color: #fff; }

/* Progress: striped like a running track ------------------------------------- */
.sx-skin .progress, .sx-skin .progress-stacked {
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--text-secondary) 18%, transparent);
}
.sx-skin .progress-bar:not(.progress-bar-striped):not(.bg-gradient) {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 7px, transparent 7px 14px);
}

/* Lists, accordions, alerts, breadcrumbs ------------------------------------ */
.sx-skin .list-group {
    --bs-list-group-border-radius: 14px;
    --bs-list-group-active-bg: var(--sx-brand);
    --bs-list-group-active-border-color: var(--sx-brand);
}
.sx-skin .accordion {
    --bs-accordion-border-radius: 14px;
    --bs-accordion-inner-border-radius: 13px;
    --bs-accordion-active-color: var(--sx-brand);
    --bs-accordion-active-bg: color-mix(in srgb, var(--sx-brand) 8%, transparent);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-brand) 16%, transparent);
}
.sx-skin .accordion-button { font-family: var(--font-sport); font-size: 1.08rem; font-weight: 700; letter-spacing: .03em; }
[data-bs-theme="dark"] .sx-skin .accordion { --bs-accordion-active-color: color-mix(in srgb, var(--sx-brand) 50%, #fff); }
.sx-skin .alert {
    border: 0;
    border-left: 5px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 12px;
}
.sx-skin .alert-heading { font-family: var(--font-sport); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sx-skin .breadcrumb {
    font-family: var(--font-sport); font-size: .9rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}

/* App frame: dark "bench" sidebar and a brand stripe under the top bar --------
   The sidebar carries data-bs-theme="dark" in base.html, so Bootstrap and the
   base dark tokens already apply inside it; these rules set the surface. */
.sidebar[data-bs-theme="dark"] {
    --card-bg: #131c30;
    --bg-color: rgba(255,255,255,.06);
    --border-color: rgba(255,255,255,.08);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    background:
        repeating-linear-gradient(-55deg, rgba(255,255,255,.022) 0 14px, transparent 14px 28px),
        #0b1220;
    border-right: 0;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.sidebar .sidebar-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sx-brand) 26%, #0b1220), #0b1220);
    border-bottom-color: rgba(255,255,255,.07);
}
.sidebar .sidebar-header.club-mode::before { background: linear-gradient(90deg, var(--sx-brand), var(--sx-gold)); }
.sidebar .sidebar-brand {
    font-family: var(--font-sport); font-size: 1.1rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.sidebar .mode-badge { font-family: var(--font-sport); font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.sidebar .nav-section {
    font-family: var(--font-sport); font-size: .95rem; font-weight: 700;
    letter-spacing: .1em; color: #fff;
}
.sidebar .nav-section.collapsible::after { opacity: .85; }
.sidebar .nav-link {
    font-family: var(--font-sport); font-size: 1.06rem; font-weight: 600;
    letter-spacing: .02em; color: #fff;
}
.sidebar .nav-link i { color: #fff; transition: color .15s ease; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link:hover i { color: #fff; }
.sidebar .nav-link.active {
    color: #fff;
    background: linear-gradient(100deg, var(--sx-brand), var(--sx-brand-deep));
    box-shadow: inset 4px 0 0 var(--sx-gold), 0 10px 20px -14px var(--sx-brand);
}
.sidebar .nav-link.active i { color: #fff; }
.sidebar .nav-link-help {
    background: rgba(245,179,1,.08); border-color: rgba(245,179,1,.28);
    color: #fde68a !important;
}
.sidebar .nav-link-help i { color: var(--sx-gold); }
.sidebar .nav-link-help:hover { background: rgba(245,179,1,.16); border-color: rgba(245,179,1,.45); color: #fff !important; }
.sidebar .nav-link-help.active { background: linear-gradient(100deg, #f5b301, #f97316); color: #1c1300 !important; }
.sidebar .nav-link-help.active i { color: #1c1300; }
.sidebar .context-switcher { font-family: var(--font-sport); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidebar .context-switcher-wrapper { background: rgba(255,255,255,.03); }
.sidebar .context-option.active { background: rgba(255,255,255,.07); }
.sidebar .sidebar-close { color: #cbd5e1; }

.sx-skin .top-header {
    border-bottom: 0;
    background:
        linear-gradient(90deg, var(--sx-brand), var(--sx-gold)) left bottom / 100% 3px no-repeat,
        var(--card-bg);
}

[data-bs-theme="dark"] .sx-tile,
[data-bs-theme="dark"] .sx-player { box-shadow: none; }
[data-bs-theme="dark"] .sx-skin .card,
[data-bs-theme="dark"] .sx-skin .stat-card { box-shadow: none; }

/* Breadcrumbs sitting on a dark hero. */
.sx-hero-auto .breadcrumb { --bs-breadcrumb-divider-color: #64748b; --bs-breadcrumb-item-active-color: #cbd5e1; }
.sx-hero-auto .breadcrumb-item.active { color: #cbd5e1 !important; }

/* Empty states size their big illustration icon with `.empty-state i`, which
   also caught the small icon inside the call-to-action button. */
.sx-skin .empty-state .btn i { font-size: 1em !important; margin: 0 !important; opacity: 1 !important; }