/* ==========================================================================
   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. Apps are added to the skin one at a time.
   ========================================================================== */

: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: plain Bootstrap on opted-in apps -------------------------- */

.sx-skin .main-content h1, .sx-skin .main-content .h1,
.sx-skin .main-content h2, .sx-skin .main-content .h2,
.sx-skin .main-content h3, .sx-skin .main-content .h3,
.sx-skin .main-content .h4 { font-weight: 800; letter-spacing: -.015em; }
.sx-skin .main-content > .container-fluid > .d-flex h1,
.sx-skin .main-content > .container-fluid > div > h1 { font-style: italic; }

.sx-skin .main-content .card {
    border-radius: var(--sx-radius);
    border-color: var(--bs-border-color-translucent, #e5e7eb);
    box-shadow: var(--sx-shadow);
}
.sx-skin .main-content .card > .card-header:first-child { border-radius: var(--sx-radius) var(--sx-radius) 0 0; }
.sx-skin .main-content .card > .card-footer:last-child  { border-radius: 0 0 var(--sx-radius) var(--sx-radius); }
.sx-skin .main-content .card-header {
    font-weight: 800; letter-spacing: .02em;
    border-bottom-color: var(--bs-border-color-translucent, #e5e7eb);
}
.sx-skin .main-content .card-header h5, .sx-skin .main-content .card-header h6,
.sx-skin .main-content .card-header .card-title {
    font-size: .82rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}

.sx-skin .main-content .btn { border-radius: var(--sx-radius-sm); font-weight: 700; letter-spacing: .01em; }
.sx-skin .main-content .btn-sm { border-radius: 8px; }
.sx-skin .main-content .btn-lg { font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-size: .95rem; }
.sx-skin .main-content .btn-primary,
.sx-skin .main-content .btn-success {
    border: 0;
    box-shadow: 0 6px 14px -9px currentColor;
}
.sx-skin .main-content .btn-success { background: linear-gradient(135deg, #16a34a, var(--sx-green-deep)); color: #fff; box-shadow: 0 6px 14px -9px rgba(5,150,105,.9); }
.sx-skin .main-content .btn-primary { box-shadow: 0 6px 14px -9px rgba(79,70,229,.9); }

.sx-skin .main-content .badge { font-weight: 800; letter-spacing: .05em; border-radius: 6px; }

.sx-skin .main-content .table > thead th {
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--bs-secondary-color, #64748b);
}
.sx-skin .main-content .table > tbody td { font-variant-numeric: tabular-nums; }

.sx-skin .main-content .form-control,
.sx-skin .main-content .form-select { border-radius: var(--sx-radius-sm); }
.sx-skin .main-content .form-label { font-weight: 700; }

.sx-skin .main-content .nav-pills .nav-link { border-radius: 999px; font-weight: 700; }
.sx-skin .main-content .nav-tabs .nav-link { font-weight: 700; }
.sx-skin .main-content .nav-tabs .nav-link.active { box-shadow: inset 0 -3px 0 var(--sx-green); }

.sx-skin .main-content .alert { border-radius: 12px; border-left-width: 5px; }

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