/* Club brand layer for the main app (index.html), loaded right after styles.css.
   Same identity as the public pages, registration page, live screen and PDFs: navy / blue / lime,
   the pink-blue-lime stripe, UTM-Avo type. Keeps the dark/light switch: both themes are re-tokened. */

@font-face { font-family: 'UTM-Avo'; src: url('UTM-Avo.ttf'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'UTM-Avo'; src: url('UTM-AvoBold.ttf'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'UTM-Avo'; src: url('UTM-AvoItalic.ttf'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --brand-navy: #002CA6;
    --brand-deep: #001A66;
    --brand-blue: #018CF0;
    --brand-lime: #85C61E;
    --brand-pink: #E90763;
    --stripe: linear-gradient(90deg, var(--brand-pink) 0 33.33%, var(--brand-blue) 33.33% 66.66%, var(--brand-lime) 66.66% 100%);

    --bg-primary: #000f33;
    --bg-secondary: #00194d;
    --bg-card: rgba(0, 30, 90, 0.72);
    --bg-glass: rgba(255, 255, 255, 0.05);
    --border-glass: rgba(255, 255, 255, 0.1);
    --text-primary: #eef2fb;
    --text-secondary: #a9b8dc;
    --text-muted: #7c8db5;
    --accent-primary: #2f9dff;
    --accent-secondary: var(--brand-navy);
    --accent-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    --accent-glow: rgba(1, 140, 240, 0.3);
    --border-color: rgba(255, 255, 255, 0.1);
    --font: 'UTM-Avo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
[data-theme="light"] {
    --bg-primary: #f3f5fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-glass: rgba(0, 26, 102, 0.04);
    --border-glass: #dfe4ee;
    --text-primary: #1c202c;
    --text-secondary: #52607e;
    --text-muted: #7b86a0;
    --accent-primary: var(--brand-navy);
    --accent-secondary: var(--brand-blue);
    --accent-gradient: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
    --accent-glow: rgba(0, 44, 166, 0.2);
    --border-color: #dfe4ee;
}
body, button, input, select, textarea { font-family: var(--font); }

/* ---------- Top bar: navy band with the brand stripe (both themes) ---------- */
.app-header {
    background: linear-gradient(90deg, var(--brand-deep), var(--brand-navy)) !important;
    border-bottom: none !important;
    color: #fff;
}
.app-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--stripe);
}
.app-header .header-text h1 { color: #fff; letter-spacing: 0.2px; }
.app-header .subtitle { color: #c9d6f7; }
.app-header .logo img { background: #fff; padding: 2px; }
.app-header .theme-toggle { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.app-header .user-profile,
[data-theme="light"] .app-header .user-profile { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.app-header .user-name { color: #fff; }
.user-avatar { border-color: var(--brand-lime); }
.btn-logout {
    font-size: 0.78rem; font-weight: 700; color: #fff; opacity: 0.85;
    border: 1px solid rgba(255, 255, 255, 0.3); padding: 5px 10px;
}
.btn-logout:hover { opacity: 1; background: rgba(233, 7, 99, 0.35); }

/* ---------- Dashboard ---------- */
.btn-create-tournament {
    background: var(--brand-lime); color: var(--brand-deep);
    box-shadow: 0 4px 16px rgba(133, 198, 30, 0.3);
}
.btn-create-tournament:hover { box-shadow: 0 8px 24px rgba(133, 198, 30, 0.4); }
.tournament-card:hover, [data-theme="light"] .tournament-card:hover { border-color: var(--brand-blue); box-shadow: 0 8px 28px rgba(0, 44, 166, 0.18); }
.tc-banner { height: 84px; }
.tc-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--stripe); z-index: 2; }
.tc-banner-waves { display: none; }
.tc-logo-wrapper { margin-top: -36px; }
.tc-logo-tile {
    width: 132px; height: 68px; background: #fff; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(0, 16, 60, 0.3);
}
.tc-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tc-body { padding-top: 16px; }
.tc-lanes { background: rgba(1, 140, 240, 0.15); color: var(--accent-primary); }
.tc-name { letter-spacing: 0.2px; }

/* Account section: bulk actions folded, the lock button is an outline, not a big red slab */
.staff-bulk { border: 1px dashed var(--border-glass); border-radius: 10px; padding: 8px 10px; }
.btn-danger-outline {
    background: transparent !important; color: var(--danger) !important;
    border: 1.5px solid var(--danger) !important; box-shadow: none !important;
}
.btn-danger-outline:hover { background: rgba(239, 68, 68, 0.12) !important; }

/* ---------- Meet header: the name is already in the top bar ---------- */
.tournament-header-bar { margin-bottom: 14px; gap: 10px; }
.tournament-header-info #tvName, .tournament-header-info #tvDates { display: none; }
.btn-edit-tournament {
    opacity: 1; font-size: 0.82rem; color: var(--text-secondary);
    border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding: 6px 12px; background: var(--bg-glass);
}
.btn-edit-tournament:hover { color: var(--text-primary); border-color: var(--accent-primary); }
.tournament-lanes-badge { background: rgba(1, 140, 240, 0.15); color: var(--accent-primary); }

/* Stats: one compact strip instead of four big tiles */
.stats-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stat-card { padding: 6px 12px; gap: 8px; border-radius: 999px; flex: 0 0 auto; }
.stat-icon { font-size: 1rem; }
.stat-info { flex-direction: row; align-items: baseline; gap: 5px; }
.stat-value { font-size: 1rem; }
.stat-label { font-size: 0.8rem; }

/* ---------- Tabs ---------- */
.tab-nav { background: var(--bg-card); }
.tab-btn.active {
    background: linear-gradient(135deg, rgba(1, 140, 240, 0.22), rgba(0, 44, 166, 0.3));
    border-color: rgba(1, 140, 240, 0.35);
    box-shadow: none;
}
.tab-btn.active::after, .tab-btn:hover::after { background: var(--brand-lime); }
[data-theme="light"] .tab-nav { background: #e6ebf5; border-color: #dfe4ee; box-shadow: none; }
[data-theme="light"] .tab-btn { color: #52607e; }
[data-theme="light"] .tab-btn.active { background: var(--brand-navy); color: #fff; box-shadow: 0 2px 8px rgba(0, 44, 166, 0.25); }
[data-theme="light"] .tab-btn.active::after { background: var(--brand-lime); }

/* ---------- Small fixes ---------- */
.btn-add-session {
    font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--accent-primary); border: 1.5px dashed var(--accent-primary);
}
.btn-add-session:hover { background: rgba(1, 140, 240, 0.1); }
.scoreboard-nav { flex-wrap: wrap; }
/* Selected session / mode pill: white text (the per-session colour stays on the border) */
.sb-mode-btn.active { color: #fff !important; background: rgba(1, 140, 240, 0.25); }
[data-theme="light"] .sb-mode-btn.active { background: var(--brand-navy); }
.scoreboard-nav .sb-auto-summary { flex-basis: 100%; }

@media (max-width: 768px) {
    /* Phone: keep the tab names (icons alone were guesswork) in the scrolling row */
    .tab-text { display: inline; }
    .stats-bar { display: flex; gap: 6px; }
    .stat-card { padding: 5px 10px; }
    .btn-logout { padding: 4px 8px; font-size: 0.72rem; white-space: nowrap; }
    .app-header .user-name, .app-header .user-avatar { display: none !important; }
    .app-header .user-profile { padding: 4px; }
    .app-header .header-text h1 { font-size: 1rem; line-height: 1.2; }
    .stat-card { padding: 4px 9px; gap: 5px; }
    .stat-icon { display: none; }
    .stat-value, .stat-label { font-size: 0.8rem; }
    .btn-back, .btn-edit-tournament { padding: 6px 10px; font-size: 0.78rem; }
}

/* Admin page only (not the live-screen account, not fullscreen): the live board is always dark (like the TV), so its text stays light in BOTH themes.
   Without this the light theme painted dark names on the dark board. */
body:not(.viewer-mode) #content-scoreboard:not(.sb-fullscreen) .scoreboard-board {
    background: linear-gradient(180deg, #001A66, #000f33) !important;
    color: #eef2fb;
    --text-primary: #eef2fb;
    --text-secondary: #a9b8dc;
    --text-muted: #7c8db5;
    --accent-primary: #2f9dff;
}
body:not(.viewer-mode) #content-scoreboard:not(.sb-fullscreen) .scoreboard-board .sb-table td { color: #eef2fb; }
body:not(.viewer-mode) #content-scoreboard:not(.sb-fullscreen) .scoreboard-board .sb-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ---------- Results tab: per-athlete save ---------- */
.result-time-cell { display: flex; align-items: center; gap: 6px; }
.result-time-cell .rs-save { padding: 4px 8px; opacity: 0.35; transition: opacity .15s, background .15s; }
.result-time-cell .rs-save:disabled { visibility: hidden; }
tr.result-dirty .result-time-input { border-color: var(--warning) !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); }
tr.result-dirty .rs-save { opacity: 1; background: var(--brand-lime); color: var(--brand-deep); border-color: var(--brand-lime); }
tr.result-saved td { animation: resultSavedFlash 1.6s ease-out; }
@keyframes resultSavedFlash { 0% { background: rgba(133, 198, 30, 0.35); } 100% { background: transparent; } }
.result-save-hint { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }