/* ============================================================
   Floorball Analīze — App Styles
   Neutral palette, clean, sport-utility aesthetic
   ============================================================ */

:root {
    --primary:        #1a56a0;
    --primary-dark:   #133e7a;
    --primary-light:  #e8f0fb;
    --accent:         #e8491d;
    --success:        #1a8a4a;
    --warning:        #b07000;
    --danger:         #c0392b;
    --info:           #0277bd;

    --bg:             #f4f5f7;
    --surface:        #ffffff;
    --border:         #dee2e6;
    --text:           #212529;
    --text-muted:     #6c757d;

    --navbar-h:       72px;
    --sidebar-w:      230px;
    --sidebar-collapsed: 60px;

    --radius:         8px;
    --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
    --shadow:         0 2px 12px rgba(0,0,0,.10);

    --font-main:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:      'Courier New', Courier, monospace;
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-main);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    min-height: 100vh;
}

/* ---- Site Header ---- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--navbar-h);
    background: #1a0505;
    box-shadow: 0 2px 0 rgba(180,20,20,.6), 0 4px 20px rgba(0,0,0,.5);
}

/* Red glow line at the very bottom */
.hdr-bottom-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #c0392b 25%, #ff4444 50%, #c0392b 75%, transparent 100%);
    opacity: .9;
}

/* Inner flex row */
.site-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.1rem;
    gap: .75rem;
}

/* Sidebar toggle */
.hdr-toggle {
    flex-shrink: 0;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.hdr-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Brand */
.hdr-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.hdr-logo {
    width: 46px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.7));
    transition: transform .2s;
}
.hdr-brand:hover .hdr-logo { transform: scale(1.07); }

.hdr-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.hdr-brand-name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.hdr-brand-sub {
    font-size: .65rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Spacer pushes user row to the right */
.hdr-spacer { flex: 1; }

/* User row — greeting · avatar · name | logout — all in one line */
.hdr-user-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50px;
    padding: .3rem .3rem .3rem .75rem;
}

.hdr-avatar {
    height: 30px;
    min-width: 30px;
    padding: 0 .45rem;
    border-radius: 50px;
    background: rgba(200,30,30,.55);
    border: 1px solid rgba(255,100,100,.35);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.hdr-username {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.hdr-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

.hdr-logout {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(190,25,25,.5);
    border: 1px solid rgba(240,80,80,.3);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    padding: .35rem .75rem;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: .02em;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.hdr-logout:hover {
    background: rgba(220,38,38,.85);
    border-color: rgba(255,100,100,.5);
    color: #fff;
}

/* ---- Avatar ---- */
.avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: .03em;
}

.avatar-circle.avatar-sm {
    width: auto !important;
    min-width: 30px;
    height: 30px;
    padding: 0 .5rem;
    border-radius: 50px !important;
    font-size: .65rem;
    background: var(--primary-light);
    color: var(--primary);
    white-space: nowrap;
    letter-spacing: .04em;
}

/* ---- Wrapper / Sidebar / Main ---- */
.wrapper {
    margin-top: var(--navbar-h);
    min-height: calc(100vh - var(--navbar-h));
}

.sidebar {
    width: var(--sidebar-w);
    min-height: calc(100vh - var(--navbar-h));
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    transition: width .2s ease;
    overflow: hidden;
    position: sticky;
    top: var(--navbar-h);
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label { display: none; }

.sidebar-nav { padding: .75rem 0; }

.sidebar-nav .nav-section-label {
    padding: 1rem 1rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 500;
    border-radius: 0;
    transition: color .15s, background .15s;
    white-space: nowrap;
}

.sidebar-nav .nav-link i {
    width: 18px;
    text-align: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.sidebar-nav .nav-link:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.sidebar-nav .nav-link.active {
    color: var(--primary);
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
    font-weight: 600;
}

.main-content {
    min-width: 0;
    padding-bottom: 3rem;
}

/* ---- Footer ---- */
.footer {
    border-top: 1px solid var(--border);
    padding: .6rem 0;
    background: var(--surface);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
}

/* ---- Page title ---- */
.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}
.text-accent { color: var(--accent); }

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---- Stat cards ---- */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: box-shadow .15s, transform .15s;
}

.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.stat-icon {
    width: 42px; height: 42px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.stat-label {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Quick link cards ---- */
.quick-link-card {
    transition: box-shadow .15s, transform .15s;
}
.quick-link-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.quick-link-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ---- Soft bg helpers ---- */
.bg-primary-soft   { background: #e8f0fb; }
.bg-success-soft   { background: #e6f4ec; }
.bg-warning-soft   { background: #fef3e2; }
.bg-danger-soft    { background: #fdecea; }
.bg-info-soft      { background: #e3f2fd; }
.bg-secondary-soft { background: #f0f0f0; }

/* ---- Badges ---- */
.badge.bg-success-soft { background: #e6f4ec !important; }
.badge.bg-danger-soft  { background: #fdecea !important; }

/* ---- Table ---- */
.table th {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.table thead.table-dark th { color: #fff; }

.table td { font-size: .9rem; vertical-align: middle; }
.table-vtop td { vertical-align: top !important; }

/* ---- Role checkboxes ---- */
.role-checkbox {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .4rem .75rem .4rem 2rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.role-checkbox:has(input:checked) {
    background: var(--primary-light);
    border-color: var(--primary);
}
.role-checkbox.badge-admin:has(input:checked) {
    background: #fdecea;
    border-color: var(--danger);
}
.role-checkbox.badge-player:has(input:checked) {
    background: #e6f4ec;
    border-color: var(--success);
}

/* ---- Buttons ---- */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ---- Auth Layout ---- */
.auth-body {
    background: #0f0404;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(100,10,10,.6) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(80,5,5,.5) 0%, transparent 55%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.auth-card {
    background: #1a0808;
    border: 1px solid rgba(180,30,30,.25);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 64px rgba(0,0,0,.6);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.auth-logo {
    width: 90px; height: 90px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(180,30,30,.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    padding: .5rem;
}

.auth-logo-img {
    width: 72px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

.auth-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .25rem;
    color: #fff;
}

.auth-subtitle {
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .85rem;
    margin-bottom: 1.75rem;
    letter-spacing: .04em;
}

/* form label + inputs on dark bg */
.auth-card .form-label {
    color: rgba(255,255,255,.7);
    font-size: .85rem;
    font-weight: 500;
}

.auth-card .form-control,
.auth-card .input-group-text {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #fff;
}

.auth-card .form-control::placeholder { color: rgba(255,255,255,.25); }
.auth-card .form-control:focus {
    background: rgba(255,255,255,.09);
    border-color: rgba(200,40,40,.6);
    box-shadow: 0 0 0 3px rgba(180,20,20,.2);
    color: #fff;
}

.auth-card .input-group-text {
    color: rgba(255,255,255,.5);
}

.auth-card .btn-outline-secondary {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
}
.auth-card .btn-outline-secondary:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.btn-login {
    padding: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #7a1010 0%, #c0392b 100%);
    border: none;
    font-size: .95rem;
    transition: opacity .15s, transform .1s;
}
.btn-login:hover {
    opacity: .9;
    transform: translateY(-1px);
    background: linear-gradient(135deg, #7a1010 0%, #c0392b 100%);
    border: none;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        left: -230px;
        top: var(--navbar-h);
        z-index: 1025;
        height: calc(100vh - var(--navbar-h));
        transition: left .25s ease;
        box-shadow: var(--shadow);
    }
    .sidebar.mobile-open { left: 0; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 1024;
    }
    .sidebar-overlay.active { display: block; }

    .main-content { padding-bottom: 4rem; }

    /* Header mobile */
    .hdr-brand-text { display: none; }

    .hdr-logo { width: 38px; }

    .hdr-spacer { flex: 1; min-width: 0; }

    .hdr-user-row {
        padding: .25rem .25rem .25rem .5rem;
        gap: .35rem;
    }

    /* Hide full name on mobile, keep avatar + logout */
    .hdr-username { display: none; }
    .hdr-divider  { display: none; }

    .hdr-logout span { display: none; }
    .hdr-logout { padding: .35rem .55rem; }
}

/* ============================================================
   Additional styles — Teams, Games, Analysis
   ============================================================ */

/* ---- Color swatch (categories) ---- */
.color-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.15);
    vertical-align: middle;
}

/* ---- Team logos ---- */
.team-logo-lg {
    width: 80px; height: 80px;
    object-fit: contain;
    border-radius: 6px;
}
.team-logo-md {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 4px;
}
.team-logo-sm {
    width: 36px; height: 36px;
    object-fit: contain;
    border-radius: 4px;
}
.team-logo-xs {
    width: 24px; height: 24px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}
.team-logo-placeholder {
    width: 36px; height: 36px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: .8rem;
    flex-shrink: 0;
}
.team-logo-placeholder-xs {
    width: 24px; height: 24px;
    border-radius: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: .65rem;
}
.team-logo-preview {
    width: 80px; height: 80px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
}
.team-card { transition: box-shadow .15s, transform .15s; }
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* ---- Member check rows ---- */
.member-check {
    padding: .5rem .75rem .5rem 2.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    margin-bottom: .25rem;
}
.member-check:has(input:checked) {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* ---- Season tabs ---- */
.season-tabs { align-items: center; }
.season-tab-label {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Result badges ---- */
.result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 52px;
    padding: .2rem .5rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: .9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.result-badge.result-tbd { color: var(--text-muted); }
.result-badge-protocol {
    font-size: .95rem;
    margin-left: .15rem;
    color: inherit;
    opacity: .65;
}
.result-badge-protocol:hover { opacity: 1; color: inherit; }

.result-badge.result-badge-game-win {
    background: #d4edda;
    border-color: #1a8a4a;
    color: #0f5132;
}
.result-badge.result-badge-game-otwin {
    background: #e8f5ec;
    border-color: #52b788;
    color: #276644;
}
.result-badge.result-badge-game-loss {
    background: #fdecea;
    border-color: #c0392b;
    color: #7b1d1d;
}
.result-badge.result-badge-game-otloss {
    background: #fef0e6;
    border-color: #e07b39;
    color: #7c3a0f;
}

/* Game row result colors */
tr.game-win    { background: #f0faf3 !important; border-left: 5px solid #1a8a4a; }
tr.game-otwin  { background: #f6fef8 !important; border-left: 5px solid #52b788; }
tr.game-loss   { background: #fdf2f2 !important; border-left: 5px solid #c0392b; }
tr.game-otloss { background: #fdf8f2 !important; border-left: 5px solid #e07b39; }
tr.game-tbd    {                                  border-left: 5px solid #adb5bd; }

/* Result dot legend */
.result-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.result-dot.win    { background: #1a8a4a; }
.result-dot.otwin  { background: #52b788; }
.result-dot.loss   { background: #c0392b; }
.result-dot.otloss { background: #e07b39; }

/* Orange badge for SO */
.bg-orange { background: #e07b39; color: #fff; }

/* ---- Games table ---- */
.games-table td { padding: .6rem .75rem; }

/* Collapsible Datums / Sezona columns */
.games-table .col-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.games-table .col-toggle .col-hide-icon { font-size: .65rem; opacity: .4; }
.games-table .col-toggle:hover .col-hide-icon { opacity: .8; }
.games-table .col-toggle .col-show-icon { display: none; color: var(--text-muted); }
.games-table .col-toggle:hover .col-show-icon { color: inherit; }

.games-table.hide-col-date .col-date .col-label,
.games-table.hide-col-date .col-date .col-hide-icon,
.games-table.hide-col-season .col-season .col-label,
.games-table.hide-col-season .col-season .col-hide-icon,
.games-table.hide-col-date td.col-date > *,
.games-table.hide-col-season td.col-season > * { display: none !important; }

.games-table.hide-col-date .col-date .col-show-icon,
.games-table.hide-col-season .col-season .col-show-icon { display: inline; }

.games-table.hide-col-date .col-date,
.games-table.hide-col-season .col-season { width: 1%; padding-left: .5rem; padding-right: .5rem; }

/* ---- Analysis layout ---- */
.analysis-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
    align-items: start;
}

/* Phone: always stacked, no toggle */
@media (max-width: 767.98px) {
    .analysis-layout {
        grid-template-columns: 1fr;
    }
}

/* iPad (portrait + landscape): two columns by default, toggle to stacked */
@media (min-width: 768px) and (max-width: 1366px) {
    .analysis-layout {
        grid-template-columns: 1fr 320px;
    }
    .analysis-layout.ep-stacked {
        grid-template-columns: 1fr;
    }
    .ep-panel-toggle {
        display: inline-flex !important;
    }
}

.analysis-video-panel { min-width: 0; }

/* YouTube 16:9 responsive wrapper */
.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.youtube-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; opacity: .5;
}

.analysis-tags-panel {
    min-width: 0;
    position: sticky;
    top: calc(var(--navbar-h) + 1rem);
    max-height: calc(100vh - var(--navbar-h) - 2rem);
    overflow-y: auto;
}

/* Tag form */
.tag-form-panel .card { border-width: 2px; }

/* Tags list */
.tags-list { max-height: 420px; overflow-y: auto; }

/* Video selector */
.video-selector { border-bottom: 1px solid var(--border); padding-bottom: .5rem; }

.yt-external-btn {
    font-size: .85rem;
}

/* Video rows in game form */
.video-row { transition: box-shadow .12s; }
.video-row:hover { box-shadow: var(--shadow-sm); }

/* Members list scroll */
.members-list { scrollbar-width: thin; }

/* Category drag-to-reorder */
.cat-drag-handle {
    cursor: grab;
    padding: .4rem .6rem;
    opacity: .4;
    transition: opacity .12s;
}
.cat-drag-handle:hover { opacity: .9; }
.cat-drag-handle:active { cursor: grabbing; }
.cat-row-ghost { opacity: .35; background: var(--primary-light) !important; }

/* ============================================================
   Episode Tagging System
   ============================================================ */

/* ── Category toggle pills (form) ── */
.ep-cat-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
}
.ep-cat-toggle .ep-cat-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ep-cat-label {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 20px;
    border: 2px solid var(--cat-color, #6c757d);
    color: var(--cat-color, #6c757d);
    font-size: .78rem;
    font-weight: 600;
    transition: background .13s, color .13s;
    line-height: 1.4;
}
.ep-cat-toggle:hover .ep-cat-label {
    background: color-mix(in srgb, var(--cat-color, #6c757d) 15%, transparent);
}
.ep-cat-toggle .ep-cat-checkbox:checked + .ep-cat-label {
    background: var(--cat-color, #6c757d);
    color: #fff;
}

/* ── Time input ── */
.ep-time-input { max-width: 120px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── External URL toggle + input ── */
#btnToggleExternalUrl { font-size: .82rem; }
.ep-ext-chevron { font-size: .7rem; opacity: .6; }
#epExternalUrl.is-invalid { border-color: var(--danger); }
#epExternalUrl.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(220,53,69,.25); }

/* ── Players grid (form) ── */
.ep-players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.ep-players-grid-single {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem;
    scrollbar-width: thin;
}
.ep-team-col {
    display: flex;
    flex-direction: column;
}
.ep-team-header {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding-bottom: .3rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--border);
}
.ep-player-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    cursor: pointer;
    padding: .22rem .55rem .22rem .35rem;
    border-radius: 20px;
    border: 2px solid var(--border);
    background: transparent;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.3;
    user-select: none;
    white-space: nowrap;
}
.ep-player-label:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}
.ep-player-label input[type="checkbox"] {
    display: none;
}
.ep-player-label:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.ep-player-label:has(input:checked) .ep-pnum {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.ep-pnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .68rem;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 20px;
    padding: 0 .35rem;
    min-width: 1.5rem;
    flex-shrink: 0;
    line-height: 1.6;
}

/* ── Episode cards (list) ── */
#episodesList {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
/* ══ Episode search page ══════════════════════════════════════════════ */

/* Category pill checkbox (filter form) */
.ep-search-cat-pill {
    display: inline-flex;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--cat-color) 20%, transparent);
    color: color-mix(in srgb, var(--cat-color) 60%, #000);
    transition: border-color .1s, background .1s, color .1s;
    user-select: none;
}
.ep-search-cat-pill input { display: none; }
.ep-search-cat-pill:hover {
    background: color-mix(in srgb, var(--cat-color) 35%, transparent);
    border-color: color-mix(in srgb, var(--cat-color) 50%, transparent);
}
.ep-search-cat-pill.active {
    background: var(--cat-color);
    color: #fff;
    border-color: color-mix(in srgb, var(--cat-color) 70%, #000);
}

/* Results list */
.ep-search-results { display: flex; flex-direction: column; gap: 1rem; }

/* Game group wrapper */
.ep-search-group { display: flex; flex-direction: column; }

/* Game group header */
.ep-search-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: .4rem .75rem;
    font-size: .82rem;
}
.ep-search-game-title { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.ep-search-score {
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    padding: .1rem .45rem;
    font-weight: 700;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}
.ep-search-game-meta { display: flex; align-items: center; gap: .4rem; color: #6c757d; font-size: .78rem; }
.btn-xs {
    padding: .1rem .45rem;
    font-size: .72rem;
    border-radius: 4px;
    line-height: 1.5;
}

/* Episode card within search results */
.ep-search-card {
    border: 1px solid var(--border);
    border-top: none;
    padding: .45rem .75rem;
    background: var(--surface);
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ep-search-card + .ep-search-card { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ep-search-card.ep-card-meeting { background: #fff8e1; }
.ep-search-card-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.ep-search-creator {
    color: #6c757d;
    font-size: .72rem;
    white-space: nowrap;
    cursor: default;
}
.ep-search-creator:hover { color: #495057; }

/* Game group toggle */
.ep-search-game-toggle { cursor: pointer; user-select: none; }
.ep-search-game-toggle:hover { background: color-mix(in srgb, var(--bg) 60%, var(--border)); }
.ep-search-chevron { font-size: .7rem; color: #6c757d; transition: transform .2s; flex-shrink: 0; }
.ep-search-game-toggle[aria-expanded="false"] .ep-search-chevron { transform: rotate(180deg); }
.ep-search-cards { display: flex; flex-direction: column; }
.ep-search-cards.ep-collapsed { display: none; }
.ep-search-group .ep-search-card:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* ── Episode filter bar ── */
.ep-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.ep-filter-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .45rem .25rem .35rem;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted, #6c757d);
    font-size: .7rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s;
    position: relative;
}
.ep-filter-btn:last-child { border-right: none; }
.ep-filter-btn i { font-size: .85rem; }
.ep-filter-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ep-filter-count {
    font-size: .68rem;
    font-weight: 700;
    background: #dee2e6;
    color: #495057;
    border-radius: 10px;
    padding: 0 .35em;
    min-width: 1.4em;
    text-align: center;
    line-height: 1.5;
    transition: background .15s, color .15s;
}
.ep-filter-btn:hover {
    background: #e9ecef;
    color: var(--primary);
}
.ep-filter-btn.active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 600;
}
.ep-filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--primary);
}
.ep-filter-btn.active .ep-filter-count {
    background: var(--primary);
    color: #fff;
}

/* Active list title + count strip */
.ep-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .6rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    min-height: 1.9rem;
}

/* ── Category filter button + dropdown ── */
.ep-cat-filter-wrap {
    position: relative;
}
.btn-ep-cat-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: #6c757d;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-ep-cat-filter:hover { border-color: var(--primary); color: var(--primary); }
.btn-ep-cat-filter.ep-cat-filter-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.ep-cat-filter-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    background: var(--danger);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 .3em;
    min-width: 1.1em;
    line-height: 1.5;
    text-align: center;
}
.ep-cat-filter-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    min-width: 200px;
    max-width: 280px;
    padding: .5rem;
}
.ep-cat-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}
.btn-ep-cat-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: .72rem;
    color: var(--danger);
    cursor: pointer;
    text-decoration: underline;
}
.btn-ep-cat-clear:hover { opacity: .75; }
.ep-cat-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-height: 200px;
    overflow-y: auto;
}
.ep-cat-filter-pill {
    border: 2px solid transparent;
    border-radius: 20px;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--cat-color) 20%, transparent);
    color: color-mix(in srgb, var(--cat-color) 60%, #000);
    transition: border-color .1s, background .1s, color .1s;
}
.ep-cat-filter-pill:hover {
    background: color-mix(in srgb, var(--cat-color) 35%, transparent);
    border-color: color-mix(in srgb, var(--cat-color) 50%, transparent);
}
.ep-cat-filter-pill.active {
    background: var(--cat-color);
    color: #fff;
    border-color: color-mix(in srgb, var(--cat-color) 70%, #000);
}

/* ── Player filter pill (same base style, no cat-color) ── */
.ep-player-filter-pill,
.ep-side-filter-pill {
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg);
    color: var(--text);
    transition: border-color .1s, background .1s, color .1s;
    white-space: nowrap;
}
.ep-player-filter-pill:hover,
.ep-side-filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.ep-player-filter-pill.active,
.ep-side-filter-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-dark);
}
.ep-player-filter-pill .ep-pnum {
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: inherit;
    min-width: auto;
    color: var(--primary);
}
.ep-player-filter-pill.active .ep-pnum {
    color: rgba(255,255,255,.9);
}

.ep-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem .65rem;
    background: var(--surface);
    font-size: .82rem;
    transition: box-shadow .12s;
}
.ep-card:hover { box-shadow: var(--shadow-sm); }
.ep-card-playing {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary);
}
/* Highlight takes precedence over the meeting border when both apply */
.ep-card-meeting.ep-card-playing {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.ep-card-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
    min-width: 0;
}
.ep-time-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 700;
    padding: .18rem .55rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
    text-decoration: none;
}
.ep-time-btn:hover {
    background: var(--primary-dark);
    color: #fff;
    text-decoration: none;
}

.ep-cats-row {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    flex: 1;
    min-width: 0;
}
/* Categories as their own block row (episode list) */
.ep-cats-row-block {
    flex: none;
    width: 100%;
    margin-bottom: .2rem;
}
.ep-cat-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.ep-players {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .25rem;
}
.ep-player-tag {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .74rem;
    background: var(--primary-light);
    border: 1px solid #c8d9f0;
    border-radius: 4px;
    padding: .05rem .35rem;
    cursor: default;
    white-space: nowrap;
}
.ep-player-tag .ep-pnum {
    min-width: auto;
    font-size: .72rem;
    background: none;
    padding: 0;
    line-height: inherit;
    border-radius: 0;
}
.ep-player-abbr {
    font-weight: 600;
    letter-spacing: .02em;
}

.ep-comment {
    color: var(--text);
    font-size: .82rem;
    white-space: pre-wrap;
    word-break: break-word;
    /* Collapse to ~2 lines, expand on hover */
    position: relative;
    max-height: 3.2em;
    overflow: hidden;
    transition: max-height .3s ease;
    cursor: default;
}
.ep-comment::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1.5em;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
    transition: opacity .3s;
}
.ep-comment:hover {
    max-height: 40em;
}
.ep-comment:hover::after {
    opacity: 0;
}
/* Text fits — no clamp needed */
.ep-comment.ep-fits {
    max-height: none;
    overflow: visible;
    cursor: default;
}
.ep-comment.ep-fits::after {
    display: none;
}

.ep-coach-comment {
    background: #eff6ff;
    border-left: 3px solid var(--primary);
    padding: 0 .35rem;
    border-radius: 0 4px 4px 0;
    font-size: .8rem;
    color: #1a56a0;
    white-space: pre-wrap;
    word-break: break-word;
    /* Collapse to ~2 lines, expand on hover */
    position: relative;
    max-height: 3.5em;
    overflow: hidden;
    transition: max-height .3s ease;
    cursor: default;
}
.ep-coach-comment::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1.5em;
    background: linear-gradient(transparent, #eff6ff);
    pointer-events: none;
    transition: opacity .3s;
}
.ep-coach-comment:hover {
    max-height: 40em;
}
.ep-coach-comment:hover::after {
    opacity: 0;
}
/* Text fits — no clamp needed */
.ep-coach-comment.ep-fits {
    max-height: none;
    overflow: visible;
    cursor: default;
}
.ep-coach-comment.ep-fits::after {
    display: none;
}

.ep-creator-avatar {
    height: 22px !important;
    min-width: 22px;
    font-size: .6rem !important;
    padding: 0 .3rem !important;
    cursor: default;
    flex-shrink: 0;
}

/* Action buttons group (edit + delete) */
.ep-actions {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
    margin-left: auto;
}
.btn-ep-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    font-size: .72rem;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    padding: 0;
}
.btn-ep-action:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-ep-edit {
    border-color: #b8d4f5;
    color: var(--primary);
}
.btn-ep-edit:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-ep-delete {
    border-color: #f5c6cb;
    color: var(--danger);
}
.btn-ep-delete:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
/* Meeting toggle button */
.btn-ep-meeting { color: var(--text-muted); border-color: var(--border); }
.btn-ep-meeting:hover { background: #fff8e1; border-color: #f0a500; color: #f0a500; }
.btn-ep-meeting-on { background: #fff3cd; border-color: #f0a500 !important; color: #c87800 !important; }
.btn-ep-meeting-on:hover { background: #f0a500 !important; color: #fff !important; }

/* Meeting indicator badge in card header */
.ep-meeting-badge {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    color: #c87800;
    background: #fff3cd;
    border: 1px solid #f0cc6e;
    border-radius: 4px;
    padding: .1rem .35rem;
    flex-shrink: 0;
}

/* Card highlight when in meeting */
.ep-card-meeting {
    border-color: #f0cc6e;
    background: #fffdf0;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 480px) {
    .ep-players-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Statistics System
   ============================================================ */

/* ── Stats top bar ── */
.stats-topbar {
    background: var(--surface);
}

/* ── Action button tap feedback + iOS :active override ──
   iOS Safari keeps :active until next tap. Override each variant directly with
   !important so the persistent :active is invisible. No @supports/@media wrapper
   since those were unreliable on iOS Safari with non-standard properties. ── */
.stats-pressing-btn,
.possession-team-btn {
    -webkit-tap-highlight-color: transparent;
}
.possession-team-btn.is-pressing {
    opacity: 0.65;
    transition: none;
}
/* Pressing buttons: show filled background while finger is down as click confirmation */
.stats-pressing-btn.btn-outline-success.is-pressing {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
}
.stats-pressing-btn.btn-outline-danger.is-pressing {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.stats-pressing-btn.btn-outline-secondary.is-pressing {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
}
.stats-pressing-btn.btn-outline-success:active,
.possession-team-btn.btn-outline-success:active {
    background-color: transparent !important;
    color: #198754 !important;
    border-color: #198754 !important;
    box-shadow: none !important;
}
.stats-pressing-btn.btn-outline-danger:active,
.possession-team-btn.btn-outline-danger:active {
    background-color: transparent !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    box-shadow: none !important;
}
.stats-pressing-btn.btn-outline-secondary:active,
.possession-team-btn.btn-outline-secondary:active {
    background-color: transparent !important;
    color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
}
/* iOS also applies sticky :hover on tap — override on touch-only devices.
   :not(.is-pressing) ensures the override doesn't cancel the press feedback. */
@media (hover: none) {
    .stats-pressing-btn.btn-outline-success:hover:not(.is-pressing),
    .possession-team-btn.btn-outline-success:hover {
        background-color: transparent !important;
        color: #198754 !important;
        border-color: #198754 !important;
        box-shadow: none !important;
    }
    .stats-pressing-btn.btn-outline-danger:hover:not(.is-pressing),
    .possession-team-btn.btn-outline-danger:hover {
        background-color: transparent !important;
        color: #dc3545 !important;
        border-color: #dc3545 !important;
        box-shadow: none !important;
    }
    .stats-pressing-btn.btn-outline-secondary:hover:not(.is-pressing),
    .possession-team-btn.btn-outline-secondary:hover {
        background-color: transparent !important;
        color: #6c757d !important;
        border-color: #6c757d !important;
        box-shadow: none !important;
    }
}

/* ── Score displays ── */
.stats-score-inline {
    font-variant-numeric: tabular-nums;
    min-width: 3.5rem;
    text-align: center;
    letter-spacing: .04em;
}
.stats-score-big {
    font-size: 2.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    line-height: 1;
}

/* ── Period / line buttons ── */
.stats-period-btn   { min-width: 42px; font-weight: 600; }
.stats-line-btn     { font-weight: 500; }
.stats-line-btn.btn-primary { font-weight: 700; }

/* ── Player rows ── */
.stats-player-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem .5rem .25rem;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.stats-player-row::-webkit-scrollbar { display: none; }
.stats-player-row:last-child { border-bottom: none; }
.stats-player-row:hover      { background: var(--bg); }
#statsPlayerRows .ep-pnum,
#statsGkRows .ep-pnum { width: 2.4rem; flex-shrink: 0; }
#statsPlayerRows .stats-player-info .fw-semibold,
#statsGkRows .stats-player-info .fw-semibold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stats-player-info {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
    overflow: hidden;
}
@media (min-width: 576px) {
    .stats-player-info {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }
    .stats-bench-gk-row .stats-player-info {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }
}
@media (min-width: 768px) {
    .stats-player-info {
        width: 220px;
        min-width: 220px;
        max-width: 220px;
    }
}
@media (min-width: 1200px) {
    .stats-player-info {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }
}

.stats-player-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    flex: 1;
    justify-content: flex-end;
}

/* Goalkeeper row tint */
.stats-gk-row { background: #f0f4ff; }
.stats-gk-row:hover { background: #e6eeff; }
.stats-action-sep { display: inline-block; width: 1px; height: 1.4rem; background: #ced4da; margin: 0 .15rem; vertical-align: middle; }

/* Opponent row */
.stats-opp-row {
    background: #fef2f2;
    border-top: 2px solid #fca5a5;
    padding: .5rem .75rem;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Event log ── */
.stats-event-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem .4rem .75rem;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    min-width: 0;
}
.stats-event-item:last-child { border-bottom: none; }
.stats-event-item.is-goal     { background: #f0faf3; }
.stats-event-item.is-opp-goal { background: #fdf2f2; }

.stats-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Shot dot legend (summary page) ── */
.stats-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,.2);
}
.goal-dot   { background: #f1c40f; }
.shot-dot   { background: #3498db; }
.missed-dot { background: #95a5a6; }
.opp-dot    { background: #e74c3c; }

/* ── Time input ── */
.stats-time-input {
    max-width: 80px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

/* ── Utility ── */
.cursor-pointer { cursor: pointer; }
.min-w-0        { min-width: 0; }
.opacity-40     { opacity: .4; }
.opacity-60     { opacity: .6; }
.gk-star-btn, .gk-star-btn:hover, .gk-star-btn:focus { text-decoration: none; box-shadow: none; outline: none; }

/* ── Setup view modes ── */
/* Tab nav: hidden by default, shown in tab mode */
#setupForm .setup-tab-nav              { display: none; }
#setupForm.setup-tab-mode .setup-tab-nav { display: block; }

/* In tab mode: hide all cards, show only active */
#setupForm.setup-tab-mode .setup-line-card               { display: none; }
#setupForm.setup-tab-mode .setup-line-card.tab-active    { display: block; }
/* Always open the body when tab is active (regardless of toggle state) */
#setupForm.setup-tab-mode .setup-line-card.tab-active .line-body { display: block !important; }

/* Tab buttons: no wrapping, scrollable row */
.setup-tab-btn { white-space: nowrap; flex-shrink: 0; }

/* Thin styled scrollbar below tab buttons */
.hide-scrollbar { scrollbar-width: thin; scrollbar-color: #dee2e6 transparent; }
.hide-scrollbar::-webkit-scrollbar { height: 4px; }
.hide-scrollbar::-webkit-scrollbar-track { background: transparent; }
.hide-scrollbar::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 2px; }

/* Status dot */
.setup-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}
.setup-status-dot.dot-set     { background: #198754; }
.setup-status-dot.dot-partial { background: #ffc107; }
.setup-status-dot.dot-empty   { background: #dee2e6; border: 1px solid #ced4da; }

/* ── Settings view modes (team settings form) ── */
#settingsForm .setup-tab-nav                { display: none; }
#settingsForm.setup-tab-mode .setup-tab-nav { display: block; }
#settingsForm.setup-tab-mode .settings-line-card              { display: none; }
#settingsForm.setup-tab-mode .settings-line-card.tab-active   { display: block; }
#settingsForm.setup-tab-mode .settings-line-card.tab-active .sl-body { display: block !important; }

/* ── Player column grid (top-to-bottom ordering) ── */
.player-col-grid {
    columns: 1;
    column-gap: .5rem;
    column-fill: balance;
}
.player-col-grid > * {
    break-inside: avoid;
    display: block;
    margin-bottom: .25rem;
}
@media (min-width: 480px) { .player-col-grid { columns: 2; } }
@media (min-width: 768px) { .player-col-grid { columns: 3; } }
@media (min-width: 1100px) { .player-col-grid { columns: 4; } }

/* Tighter padding inside the grid — flexbox row, so the large left indent isn't needed */
.player-col-grid .member-check {
    padding: .45rem .5rem;
}

/* ── Field wrapper ── */
.field-svg-wrap { border-radius: var(--radius); overflow: hidden; }

/* ── Field modal — maximise field on small/medium screens (phones + tablets up to iPad landscape) ── */
@media (max-width: 991.98px) {
    #fieldModal .modal-content  { border-radius: 0; }
    #fieldModal .modal-header   { padding: .4rem .75rem; }
    #fieldModal .modal-body     { padding: .4rem .5rem; }
    #fieldModal .modal-footer   { padding: .4rem .75rem; }
    /* Let the SVG fill the full modal width — drop the 820 px cap */
    #fieldModal .field-svg-wrap { max-width: 100% !important; }
}

/* ── Field modal — phone landscape: constrain by height so field fits without scrolling ── */
@media (orientation: landscape) and (max-height: 500px) {
    #fieldModal .field-svg-wrap { max-width: 100% !important; }
    #fieldModal .field-svg-wrap svg {
        /* Height-driven sizing: field grows to fill vertical space, width follows aspect ratio */
        width: auto !important;
        height: calc(100dvh - 145px) !important;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ── Stats action buttons — filled style ── */
.stats-player-actions .btn-outline-primary   { background: var(--bs-primary);   color: #fff;  border-color: var(--bs-primary); }
.stats-player-actions .btn-outline-success   { background: var(--bs-success);   color: #fff;  border-color: var(--bs-success); }
.stats-player-actions .btn-outline-danger    { background: var(--bs-danger);    color: #fff;  border-color: var(--bs-danger); }
.stats-player-actions .btn-outline-warning   { background: var(--bs-warning);   color: #000;  border-color: var(--bs-warning); }
.stats-player-actions .btn-outline-info      { background: var(--bs-info);      color: #000;  border-color: var(--bs-info); }
.stats-player-actions .btn-outline-secondary { background: var(--bs-secondary); color: #fff;  border-color: var(--bs-secondary); }
.stats-player-actions .btn-outline-dark      { background: var(--bs-dark);      color: #fff;  border-color: var(--bs-dark); }
.stats-player-actions .btn:hover,
.stats-player-actions .btn:focus             { opacity: .7; transform: scale(.94); box-shadow: none; }
.stats-player-actions .btn:disabled {
    background: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    opacity: 1;
    pointer-events: auto;
    cursor: not-allowed;
}

/* ── Responsive stats ── */
@media (max-width: 575.98px) {
    .stats-player-actions .btn { padding: .25rem .45rem; font-size: .75rem; }
    .stats-score-big           { font-size: 2rem; }
    .stats-topbar .d-flex      { flex-wrap: wrap; gap: .35rem !important; }
}

@media (max-width: 575.98px) {
    .stats-topbar .card-body > .d-flex { justify-content: center; }
    .stats-topbar #statsGameModeLabel  { margin-left: 0 !important; align-self: center; }
}

.pm-player-select {
    padding-right: 1.25rem;
    background-position: right 0.3rem center;
    background-size: 10px 8px;
}

/* ── Ball possession block ── */
.possession-team-btn {
    min-height: 44px;
    font-size: .8rem;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}
.possession-team-btn:disabled {
    opacity: .45;
    pointer-events: none;
}

/* Pulsing dot in card header */
.possession-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: possession-pulse 1.2s ease-in-out infinite;
    vertical-align: middle;
}
.possession-dot-our      { background-color: #198754; }
.possession-dot-neutral  { background-color: #6c757d; }
.possession-dot-opponent { background-color: #dc3545; }

@keyframes possession-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.75); }
}

/* Summary table */
.possession-summary-table th,
.possession-summary-table td {
    padding: .2rem .35rem;
    white-space: nowrap;
}
.possession-period-th {
    cursor: default;
    user-select: none;
    position: relative;
    padding-right: 1.7rem !important;
}
.possession-period-th > .possession-clear-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    padding: 4px 5px !important;
    font-size: .8rem !important;
}
.possession-period-th.active {
    background-color: #e9f3ff;
}
.possession-period-switch {
    cursor: pointer;
    font-weight: 600;
}
.possession-period-switch:hover {
    text-decoration: underline;
}

/* Possession edit button — disabled while timer runs */
#possessionEditToggle.possession-edit-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Progress bar team label */
.possession-bar-label {
    width: 6rem;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 576px) {
    .possession-bar-label { width: 9rem; }
}

/* Edit form inputs */
.possession-edit-input {
    min-width: 60px;
    text-align: center;
    font-size: .8rem;
    padding: .15rem .25rem;
}

/* Period-change toast */
.possession-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: rgba(0,0,0,.78);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: 2rem;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
    pointer-events: none;
}
.possession-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Summary stats view ────────────────────────────────────────────────── */
/* ── Summary section nav ── */
.summary-section-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    background: #e9ecef;
    border-radius: .5rem;
    padding: .3rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}
.summary-section-nav::-webkit-scrollbar { display: none; }
.ssn-link {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    justify-content: center;
    padding: .4rem .6rem;
    border-radius: .375rem;
    color: #6c757d;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}
.ssn-link:hover {
    color: #212529;
    background: rgba(255,255,255,.55);
}
.ssn-link.active {
    background: #fff;
    color: var(--primary, #1a56a0);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.ssn-link i {
    font-size: .85em;
    opacity: .8;
}
.ssn-link.active i {
    opacity: 1;
}
@media (max-width: 575px) {
    .ssn-link span { display: none; }
    .ssn-link i { font-size: 1rem; opacity: .75; }
    .ssn-link.active i { opacity: 1; }
    .ssn-link { padding: .5rem .6rem; }
}

abbr.summary-abbr {
    cursor: help;
    text-decoration: underline dotted;
    border-bottom: none;
    font-style: normal;
    text-transform: none;
}
.sf-filter-note {
    font-size: .72rem;
    cursor: default;
}

/* Per-line player tables — fixed layout so all tables share identical column widths */
.lp-table { table-layout: fixed; }
.lp-table td, .lp-table th { white-space: nowrap; }
.lp-total-row td { background: #f8f9fa !important; }

/* Sticky first column for wide tables */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,.12);
}
.table-sticky-first thead th:first-child {
    z-index: 3;
    background: #f8f9fa;
}

/* Sticky first TWO columns (#  + Spēlētājs) */
.table-sticky-two th:first-child,
.table-sticky-two td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}
.table-sticky-two th:nth-child(2),
.table-sticky-two td:nth-child(2) {
    position: sticky;
    left: 36px;                             /* width of the # column */
    z-index: 2;
    background: #fff;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,.12);
}
.table-sticky-two thead th:first-child,
.table-sticky-two thead th:nth-child(2) {
    z-index: 3;
    background: #f8f9fa;
}
.summary-filter-bar {
    border-radius: .375rem;
}
.summary-filter-bar .btn-sm {
    font-size: .72rem;
    white-space: nowrap;
}
/* Active pill highlight inside filter bar */
#sfPeriods .btn.active,
#sfModes .btn.active,
#sfLines .btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
#sfLines .sf-line-btn:disabled {
    opacity: .3;
    text-decoration: line-through;
    pointer-events: none;
}
/* Multi-game summary filter — same active + disabled styles */
#msfPeriods .btn.active,
#msfModes .btn.active,
#msfLines .btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
#msfLines .msf-line-btn:disabled {
    opacity: .3;
    text-decoration: line-through;
    pointer-events: none;
}
/* Responsive per-game chart container height */
.ms-chart-wrap { position: relative; width: 100%; height: 220px; }
@media (min-width: 576px) { .ms-chart-wrap { height: 320px; } }
@media (min-width: 992px) { .ms-chart-wrap { height: 400px; } }

/* Compact chart type toggle buttons in card headers on phones — saves space for title */
@media (max-width: 575.98px) {
    .card-header .btn-group.btn-group-sm .btn {
        padding: .2rem .35rem;
        font-size: .75rem;
        line-height: 1.2;
    }
    .card-header .btn-group.btn-group-sm {
        margin-right: -.75rem;
    }
}
/* Pressing summary badges */
.press-stat-badge {
    font-size: 1rem;
    padding: .5rem .75rem;
}
@media (max-width: 991px) {
    .press-stat-badge {
        font-size: .72rem;
        padding: .25rem .4rem;
    }
}

/* Shot map local filter pills */
.sm-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
}
.sf-pill {
    font-size: .68rem;
    padding: .1rem .4rem;
    border-radius: .25rem;
}
.sf-pill.active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}
.sf-pill.btn-outline-primary.active,
.sf-pill.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.sf-pill.btn-outline-warning.active,
.sf-pill.btn-outline-warning:hover {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #000;
}
.sf-pill.btn-outline-success.active,
.sf-pill.btn-outline-success:hover {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.sf-pill.btn-outline-danger.active,
.sf-pill.btn-outline-danger:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}
.sf-pill.btn-outline-dark.active,
.sf-pill.btn-outline-dark:hover {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: #fff;
}
.sf-pill.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}
/* Timeline dataset toggle labels */
#section-timeline label { font-size: .78rem; cursor: pointer; }