/* Shared FlagTastic interface. Load after functional and legacy page styles. */
:root {
    color-scheme: dark;
    --color-page: #070d1a;
    --color-surface: #101b2e;
    --color-surface-raised: #132039;
    --color-border: rgba(163, 184, 218, .2);
    --color-muted: #b0bfd6;
    --ui-radius: 14px;
    --ui-radius-small: 9px;
    --ui-gap: 20px;
    --ui-hero: linear-gradient(120deg, #18345d, #0c1b34);
    --ui-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: radial-gradient(ellipse at 75% 0, rgba(29, 66, 119, .24), transparent 45rem), var(--color-page);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: rgba(244, 197, 66, .12); }
:where(button, a, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}
button:disabled { opacity: .55; cursor: not-allowed; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--ui-radius-small); background: var(--color-gold); color: #071a37; font-weight: 700; }
.skip-link:focus { top: 12px; }
.content { width: min(1200px, calc(100% - 48px)); padding: 32px 0; }
.league-page { display: grid; gap: var(--ui-gap); width: 100%; min-width: 0; }
.league-page > .section-header {
    padding: 24px;
    margin: 0;
    border: 1px solid rgba(244, 197, 66, .2);
    border-radius: 18px;
    background: var(--ui-hero);
    box-shadow: var(--ui-shadow);
}
.league-page > .section-header h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 8px; overflow-wrap: anywhere; }
.league-page > .section-header p { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.6; }
.league-page .ui-kicker, .auth-panel .ui-kicker { color: var(--color-gold); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
.league-page > .section-header .ui-kicker { margin-bottom: 8px; color: var(--color-gold); font-size: 11px; }
.league-page h3 { font-size: 18px; line-height: 1.35; margin-bottom: 14px; }
.league-page h4 { font-size: 16px; line-height: 1.4; }
.league-page > :where(.form-panel, .filters-panel, .form-message, .back-link, .link-button) { margin: 0; }
.league-page .form-panel, .league-page .filters-panel, .auth-panel {
    border-radius: var(--ui-radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 20px;
    box-shadow: var(--ui-shadow);
}
.league-page .form-panel:has(> .ui-disclosure), .league-page .ui-action-hub { padding: 0; }
.ui-disclosure + .ui-disclosure { border-top: 1px solid var(--color-border); }
.ui-disclosure > summary, .ui-action-hub > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--color-gold);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--ui-radius);
}
.ui-disclosure > summary::-webkit-details-marker, .ui-action-hub > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after, .ui-action-hub > summary::after { content: "+"; font-size: 22px; line-height: 1; }
.ui-disclosure[open] > summary::after, .ui-action-hub[open] > summary::after { content: "−"; }
.ui-disclosure-hint { margin-left: auto; color: var(--color-muted); font-size: 11px; font-weight: 400; }
.ui-disclosure[open] > summary, .ui-action-hub[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.ui-disclosure-body { padding: 20px; min-width: 0; }
.ui-disclosure-body > .form-panel { margin: 0 0 12px; box-shadow: none; }
.ui-disclosure-body > .form-panel:last-child { margin-bottom: 0; }
.content form label:not(.role-choice):not(.privacy-consent), .content .filters-panel label { gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
.content form label small, .content .form-help, .content .form-hint, .content .registration-help { color: var(--color-muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.content input:not([type="checkbox"]):not([type="radio"]), .content select, .content textarea {
    border: 1px solid rgba(163, 184, 218, .3);
    border-radius: var(--ui-radius-small);
    background: #0b1629;
    color: var(--color-text);
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    max-width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.content input:focus, .content select:focus, .content textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(244, 197, 66, .08); }
.content input::placeholder, .content textarea::placeholder { color: #8395b0; opacity: 1; }
.content input[readonly], .content input:disabled, .content select:disabled { color: var(--color-muted); background: rgba(255, 255, 255, .03); }
.content input[type="checkbox"], .content input[type="radio"] { accent-color: var(--color-gold); }
.content input[type="file"] { padding: 7px; font-size: 12px; overflow: hidden; }
.content input[type="file"]::file-selector-button { min-height: 32px; padding: 6px 10px; border: 0; border-radius: 6px; font-size: 12px; margin-right: 8px; }
.content fieldset { border: 1px solid var(--color-border); border-radius: var(--ui-radius-small); padding: 14px; min-width: 0; }
.content legend { color: var(--color-muted); font-size: 12px; padding: 0 6px; }
.content button:not(.link-button):not(.team-delete-button) {
    border-radius: var(--ui-radius-small);
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.content button[type="submit"], .content button[data-primary-action], .content #confirm-schedule {
    color: #071a37;
    background: var(--color-gold);
    border: 1px solid var(--color-gold);
}
.content button[type="submit"]:hover:not(:disabled), .content button[data-primary-action]:hover:not(:disabled) { background: #ffe083; border-color: #ffe083; }
.content .secondary-button, .content .secondary-action, .content .team-manage-link {
    border: 1px solid rgba(244, 197, 66, .35);
    background: rgba(244, 197, 66, .05);
    color: var(--color-gold);
    border-radius: var(--ui-radius-small);
}
.content .secondary-button:hover:not(:disabled), .content .team-manage-link:hover { background: rgba(244, 197, 66, .12); }
.content .danger-button, .content .team-delete-button { border: 1px solid rgba(248, 113, 113, .5); color: #fecaca; background: rgba(127, 29, 29, .18); border-radius: var(--ui-radius-small); }
.content .back-link, .content .link-button { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding: 8px 0; font-size: 13px; }
.content .form-message:empty { display: none; }
.content .form-message:not(:empty) { border-left: 3px solid var(--color-gold); padding: 10px 12px; background: rgba(244, 197, 66, .06); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.content .readonly-control { min-height: 44px; border-radius: var(--ui-radius-small); font-size: 14px; }
.content .team-card, .content .game-card, .content .roster-player, .content .leaderboard-panel, .content .referee-roster-card, .content .representative-team-panel, .content .dashboard-team-card {
    border-radius: var(--ui-radius);
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--ui-shadow);
}
.content .empty-state { border-radius: var(--ui-radius); background: var(--color-surface); border: 1px dashed rgba(163, 184, 218, .3); padding: 28px 20px; text-align: center; }
.content .empty-state h3, .content .empty-state h4 { font-size: 17px; margin: 0 0 8px; }
.content .empty-state p { font-size: 13px; line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.content .stat-item { border-radius: var(--ui-radius); padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); }
.content .stat-item span { font-size: 12px; line-height: 1.5; }
.content .stat-item strong { font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.league-page .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.content .dashboard-quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.content .dashboard-quick-links a { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-small); padding: 10px 12px; font-size: 12px; text-align: center; background: rgba(244, 197, 66, .05); border: 1px solid rgba(244, 197, 66, .25); }
.content .team-status, .content .game-status, .content .game-state, .content .status-badge { font-size: 11px; line-height: 1.4; padding: 4px 9px; border-radius: 999px; }
.content .dashboard-section-heading { padding: 0; margin-bottom: 4px; }
.content .dashboard-section-heading h3 { margin: 0 0 5px; }
.content .dashboard-section-heading p { font-size: 13px; line-height: 1.5; }
.content .player-profile-header, .content .roster-header, .content .team-management-header { gap: 18px; min-width: 0; align-items: center; }
.content .player-profile-header > div { min-width: 0; }
.content .profile-photo { width: 88px; height: 88px; flex: 0 0 88px; border-width: 3px; }
.content .team-staff { gap: 12px; border-radius: var(--ui-radius); }
.content .standings-table, .content .users-table-wrapper, .content .table-scroll { border-radius: var(--ui-radius); border: 1px solid var(--color-border); background: var(--color-surface); }
.content table { border-collapse: separate; border-spacing: 0; }
.content table th { color: var(--color-muted); background: #172844; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.content table td { font-size: 13px; }
.content table th, .content table td { border-bottom: 1px solid var(--color-border); }
.content table tbody tr:last-child td { border-bottom: 0; }
.content table tbody tr:hover { background: rgba(244, 197, 66, .035); }
.content .referee-history-panel { border-radius: var(--ui-radius); }
.content .danger-zone { border-color: rgba(248, 113, 113, .4); }
.auth-page { width: min(100%, 520px); margin: 0 auto; min-height: 0; }
.auth-page .auth-panel { width: 100%; padding: 28px; }
.auth-page h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
.auth-page .auth-form { gap: 16px; }
.auth-page .auth-form > a, .auth-panel > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--color-gold); }
.auth-page .auth-panel > .eyebrow { display: none; }
.auth-page .auth-recovery-link { display: flex; }
.privacy-page { max-width: 800px; }
.privacy-page > section { border: 1px solid var(--color-border); background: var(--color-surface); padding: 20px; border-radius: var(--ui-radius); }
.privacy-page p, .privacy-page li { font-size: 14px; line-height: 1.8; }
.site-footer { border-top: 1px solid var(--color-border); padding-top: 20px; margin-top: 32px; font-size: 12px; color: var(--color-muted); gap: 16px; }
.site-footer small { font-size: 10px; }
.sidebar { background: #0a1425; border-color: var(--color-border); position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.sidebar .brand h1 { font-size: 20px; }
.sidebar .eyebrow { font-size: 11px; color: var(--color-muted); }
.sidebar .nav-link { display: flex; gap: 10px; align-items: center; text-decoration: none; border-radius: var(--ui-radius-small); font-size: 13px; min-height: 44px; }
.sidebar .nav-short { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; color: var(--color-gold); }
.sidebar .nav-short svg { width: 20px; height: 20px; }
.sidebar .nav-link[aria-current="page"] { background: rgba(244, 197, 66, .12); border-color: rgba(244, 197, 66, .38); color: var(--color-gold); }
.sidebar .logout-button { min-height: 44px; font-size: 13px; border-radius: var(--ui-radius-small); }
.mobile-page-context { display: none; min-width: 0; }
@media (hover: hover) {
    .content .team-card:hover, .content .referee-card:hover, .content .dashboard-team-card:hover { border-color: rgba(244, 197, 66, .45); }
}
@media (max-width: 820px) {
    .sidebar { position: fixed; }
    .content { width: 100%; padding: 86px 16px 28px; }
    body.sidebar-collapsed .sidebar { height: 68px; padding: 10px 16px; grid-template-columns: 44px 46px minmax(0, 1fr); gap: 12px; background: #0a1425; box-shadow: 0 4px 20px rgba(0, 0, 0, .25); }
    body.sidebar-collapsed .brand-logo { width: 46px; height: 46px; border-radius: 9px; }
    body.sidebar-collapsed .mobile-page-context { display: grid; gap: 2px; }
    .mobile-page-context span { color: var(--color-gold); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
    .mobile-page-context strong { color: var(--color-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .league-page { gap: 16px; }
    .league-page > .section-header { padding: 18px; border-radius: var(--ui-radius); }
    .league-page > .section-header h2 { font-size: 25px; }
    .league-page > .section-header p { font-size: 13px; }
    .league-page .form-panel, .league-page .filters-panel { padding: 16px; }
    .league-page .form-panel:has(> .ui-disclosure), .league-page .ui-action-hub { padding: 0; }
    .ui-disclosure > summary, .ui-action-hub > summary { padding: 14px 16px; }
    .ui-disclosure-body { padding: 16px; }
    .content .stat-item { padding: 14px; }
    .content .stat-item strong { font-size: 28px; }
    .league-page .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .content .dashboard-quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content .profile-photo { width: 72px; height: 72px; flex-basis: 72px; }
    .content .player-profile-header { gap: 14px; }
    .content .auth-panel { padding: 22px; }
    .content .filters-panel { gap: 12px; }
    .content .game-time-heading h3 { font-size: 16px; }
    .content .game-time-heading time { font-size: 16px; }
    .site-footer { display: grid; gap: 10px; }
}
@media (max-width: 380px) {
    .ui-disclosure-hint { display: none; }
    .ui-disclosure > summary::after, .ui-action-hub > summary::after { margin-left: auto; }
    .content .player-profile-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Friendly fixtures use both a text label and a distinct blue accent. */
.game-card.game-card-friendly { border-color: #60a5fa; border-left: 4px solid #60a5fa; background: linear-gradient(135deg, rgba(37,99,235,.16), #0e1a2d); }
.game-friendly-badge { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #60a5fa; border-radius: 999px; color: #bfdbfe; background: #17345c; font-size: 12px; font-weight: 700; line-height: 1.4; }