/* Site skin (2026-10-10 redesign): dresses existing Bootstrap pages in the new look without rewriting them.
   Wrap a page in  <div class="qx" data-theme="dark" data-bs-theme="dark">  — Bootstrap's own dark mode restyles its
   components, the site's [data-theme=dark] rules (qse-theme.css) restyle QSE surfaces, and this file swaps in the
   brand palette, shapes and the page header. Everything here is scoped to .qx. */
.qx, .qx-page {
    --qse-app-bg: #0B1220; --qse-surface: #121B2E; --qse-surface-2: #1A2742;
    --qse-text: #EEF2F8; --qse-text-muted: #A6B1C4; --qse-border: rgba(255,255,255,0.09);
    --bs-body-bg: #0B1220; --bs-body-color: #EEF2F8; --bs-body-color-rgb: 238, 242, 248;
    --bs-secondary-color: #A6B1C4; --bs-secondary-bg: #121B2E; --bs-tertiary-bg: #1A2742;
    --bs-border-color: rgba(255,255,255,0.12); --bs-emphasis-color: #FFFFFF;
    --bs-link-color: #9CC2FF; --bs-link-color-rgb: 156, 194, 255;
    --bs-link-hover-color: #C7DCFF; --bs-link-hover-color-rgb: 199, 220, 255;
    --qx-amber: #FFB800; --qx-line: rgba(255,255,255,0.09); --qx-dim: #A6B1C4; --qx-dim2: #C7D0DE;
    --qx-disp: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    --qx-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: #0B1220; color: #EEF2F8;
}
.qx { margin: -1.5rem; padding-bottom: 48px; min-height: calc(100vh - 140px); font-size: 16px; }
@media (max-width: 767.98px) { .qx { margin: -1rem; } }
.qx-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 48px); }
.qx-wrap.narrow { max-width: 1000px; }

/* Page header */
.qx-head { position: relative; isolation: isolate; border-bottom: 1px solid var(--qx-line);
    background: radial-gradient(ellipse at 18% 0%, rgba(124,170,255,0.14) 0%, rgba(11,18,32,0) 55%), #0B1220; }
.qx-head .qx-wrap { padding-block: 40px 30px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.qx-head .copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 480px; }
.qx-kick { margin: 0; font-family: var(--qx-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qx-amber); }
.qx-head h1 { margin: 0; font-family: var(--qx-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.92; letter-spacing: 0.005em; }
.qx-head p.lede { margin: 0; color: var(--qx-dim2); font-size: 18px; max-width: 60ch; }
.qx-body { padding-top: 28px; }
:is(.qx, .qx-page) h2, :is(.qx, .qx-page) .h2, :is(.qx, .qx-page) h3, :is(.qx, .qx-page) .h3 { color: #FFFFFF; }

/* Bootstrap components in the brand palette */
:is(.qx, .qx-page) .card { --bs-card-bg: #121B2E; --bs-card-border-color: var(--qx-line); --bs-card-border-radius: 16px; --bs-card-inner-border-radius: 15px; --bs-card-cap-bg: #0E1626; --bs-card-color: #EEF2F8; }
:is(.qx, .qx-page) .card-header { font-weight: 700; }
:is(.qx, .qx-page) .card-header.bg-primary { background: #0E1626 !important; color: var(--qx-amber) !important; font-family: var(--qx-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
:is(.qx, .qx-page) .btn { --bs-btn-border-radius: 10px; --bs-btn-font-weight: 700; }
:is(.qx, .qx-page) .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; }
:is(.qx, .qx-page) .btn-primary {
    --bs-btn-bg: #FFB800; --bs-btn-border-color: #FFB800; --bs-btn-color: #111111;
    --bs-btn-hover-bg: #FFC633; --bs-btn-hover-border-color: #FFC633; --bs-btn-hover-color: #111111;
    --bs-btn-active-bg: #E6A600; --bs-btn-active-border-color: #E6A600; --bs-btn-active-color: #111111;
    --bs-btn-disabled-bg: #FFB800; --bs-btn-disabled-border-color: #FFB800; --bs-btn-disabled-color: #111111;
    --bs-btn-focus-shadow-rgb: 255, 184, 0;
}
:is(.qx, .qx-page) .btn-outline-primary {
    --bs-btn-color: #FFD27A; --bs-btn-border-color: rgba(255,184,0,0.55);
    --bs-btn-hover-bg: #FFB800; --bs-btn-hover-border-color: #FFB800; --bs-btn-hover-color: #111111;
    --bs-btn-active-bg: #FFB800; --bs-btn-active-border-color: #FFB800; --bs-btn-active-color: #111111;
    --bs-btn-disabled-color: #FFD27A; --bs-btn-disabled-border-color: rgba(255,184,0,0.35);
}
:is(.qx, .qx-page) .btn-outline-secondary {
    --bs-btn-color: #C7D0DE; --bs-btn-border-color: rgba(255,255,255,0.24);
    --bs-btn-hover-bg: #1A2742; --bs-btn-hover-border-color: rgba(255,255,255,0.45); --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #1A2742; --bs-btn-active-border-color: rgba(255,255,255,0.45); --bs-btn-active-color: #FFFFFF;
}
:is(.qx, .qx-page) .nav-tabs { --bs-nav-tabs-border-color: var(--qx-line); --bs-nav-tabs-border-width: 1px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
:is(.qx, .qx-page) .nav-tabs .nav-link { color: var(--qx-dim); font-weight: 600; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 14px; min-height: 44px; white-space: nowrap; background: none; }
:is(.qx, .qx-page) .nav-tabs .nav-link:hover { color: #FFFFFF; }
:is(.qx, .qx-page) .nav-tabs .nav-link.active { color: #FFFFFF; background: none; border-bottom-color: var(--qx-amber); }
:is(.qx, .qx-page) .form-control, :is(.qx, .qx-page) .form-select { background-color: #0F1828; border-color: rgba(255,255,255,0.2); color: #EEF2F8; border-radius: 10px; min-height: 44px; }
:is(.qx, .qx-page) .form-control:focus, :is(.qx, .qx-page) .form-select:focus { border-color: #7FB0FF; box-shadow: 0 0 0 0.2rem rgba(127,176,255,0.25); }
:is(.qx, .qx-page) .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
:is(.qx, .qx-page) .input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
:is(.qx, .qx-page) .alert { --bs-alert-border-radius: 14px; }
:is(.qx, .qx-page) .alert-primary { --bs-alert-bg: rgba(255,184,0,0.08); --bs-alert-border-color: rgba(255,184,0,0.45); --bs-alert-color: #EEF2F8; }
:is(.qx, .qx-page) .alert-info { --bs-alert-bg: rgba(56,189,248,0.1); --bs-alert-border-color: rgba(125,211,252,0.35); --bs-alert-color: #BAE6FD; }
:is(.qx, .qx-page) .badge.bg-info { background: rgba(56,189,248,0.16) !important; color: #7DD3FC !important; }
:is(.qx, .qx-page) .badge.bg-secondary { background: rgba(255,255,255,0.1) !important; color: #C7D0DE !important; }
:is(.qx, .qx-page) .table { --bs-table-bg: transparent; --bs-table-color: #EEF2F8; --bs-table-border-color: var(--qx-line); --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.05); }
:is(.qx, .qx-page) .modal-content { --bs-modal-bg: #121B2E; --bs-modal-border-color: var(--qx-line); --bs-modal-border-radius: 16px; }
:is(.qx, .qx-page) .text-muted { color: var(--qx-dim) !important; }
:is(.qx, .qx-page) .spinner-border.text-primary { color: var(--qx-amber) !important; }

/* List rows (Leagues) */
.qx-list { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--qx-line); background: #121B2E; overflow: hidden; }
.qx-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--qx-line); color: #EEF2F8; text-decoration: none; min-height: 64px; }
.qx-row:last-child { border-bottom: 0; }
a.qx-row:hover, button.qx-row:hover { background: #1A2742; color: #FFFFFF; }
button.qx-row { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--qx-line); background: transparent; font: inherit; cursor: pointer; }
.qx-row .glyph { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #1A2742; }
.qx-row .t { flex: 1; min-width: 0; }
.qx-row .t b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qx-row .t small { display: block; color: var(--qx-dim); font-size: 14px; }
.qx-row .meta { color: var(--qx-dim); font-size: 14px; white-space: nowrap; text-align: right; }
.qx-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; background: rgba(255,255,255,0.08); color: #C7D0DE; margin-left: 6px; vertical-align: 2px; }
.qx-pill.live { background: rgba(74,222,128,0.14); color: #86EFAC; }
.qx-pill.mode { background: rgba(255,184,0,0.14); color: #FFD27A; }
.qx-panel { border-radius: 16px; border: 1px solid var(--qx-line); background: #121B2E; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.qx-panel h2 { margin: 0; font-size: 22px; font-weight: 700; }
.qx-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; border-radius: 12px; background: #0E1626; border: 1px solid rgba(255,255,255,0.24); box-shadow: 0 20px 40px rgba(0,0,0,0.45); }
.qx-menu a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #EEF2F8; text-decoration: none; white-space: nowrap; }
.qx-menu a:hover { background: #1A2742; }
@media (max-width: 575.98px) { .qx-row .meta { display: none; } }

/* Layout-level skin (PortalLayout / EmptyLayout content area on every non-game page). Page h1s get the brand
   display face at zero specificity, so any page or component rule still wins. */
.qx-page { min-height: 60vh; }
:where(.qx-page) h1 { font-family: var(--qx-disp); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; color: #FFFFFF; }
:where(.qx-page) :is(h2, h3) { font-weight: 700; }
.qse-topbar-shell > main { background: #0B1220 !important; }
.qx-page .qse-empty { color: var(--qse-text); }

/* Light-only Bootstrap utilities, mapped for the dark skin (found by the 2026-10-10 contrast sweep: Golf's
   btn-outline-dark rendered dark-on-dark). */
:is(.qx, .qx-page) .btn-outline-dark {
    --bs-btn-color: #C7D0DE; --bs-btn-border-color: rgba(255,255,255,0.24);
    --bs-btn-hover-bg: #1A2742; --bs-btn-hover-border-color: rgba(255,255,255,0.45); --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #1A2742; --bs-btn-active-border-color: rgba(255,255,255,0.45); --bs-btn-active-color: #FFFFFF;
}
:is(.qx, .qx-page) .btn-dark, :is(.qx, .qx-page) .btn-light {
    --bs-btn-bg: #1A2742; --bs-btn-border-color: rgba(255,255,255,0.18); --bs-btn-color: #EEF2F8;
    --bs-btn-hover-bg: #22325A; --bs-btn-hover-border-color: rgba(255,255,255,0.3); --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #22325A; --bs-btn-active-color: #FFFFFF;
}
:is(.qx, .qx-page) .bg-light { background-color: #121B2E !important; color: #EEF2F8; }
:is(.qx, .qx-page) .table-light { --bs-table-bg: #1A2742; --bs-table-color: #EEF2F8; --bs-table-border-color: rgba(255,255,255,0.12); --bs-table-striped-bg: #1E2C4C; --bs-table-hover-bg: #22325A; }

/* Bootstrap's contextual table rows keep pale backgrounds even in dark mode (found by the contrast sweep on
   /football/season: muted text on a pale table-success row). Dark tints instead. */
:is(.qx, .qx-page) :is(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger) {
    --bs-table-color: #EEF2F8; --bs-table-border-color: rgba(255,255,255,0.12);
    --bs-table-striped-color: #EEF2F8; --bs-table-active-color: #EEF2F8; --bs-table-hover-color: #FFFFFF;
}
:is(.qx, .qx-page) .table-primary { --bs-table-bg: #1B2A4A; --bs-table-striped-bg: #20304F; --bs-table-active-bg: #243556; --bs-table-hover-bg: #243556; }
:is(.qx, .qx-page) .table-secondary { --bs-table-bg: #1A2233; --bs-table-striped-bg: #1F2839; --bs-table-active-bg: #242E40; --bs-table-hover-bg: #242E40; }
:is(.qx, .qx-page) .table-success { --bs-table-bg: #12302A; --bs-table-striped-bg: #153630; --bs-table-active-bg: #183B34; --bs-table-hover-bg: #183B34; }
:is(.qx, .qx-page) .table-info { --bs-table-bg: #102C3D; --bs-table-striped-bg: #133244; --bs-table-active-bg: #16384B; --bs-table-hover-bg: #16384B; }
:is(.qx, .qx-page) .table-warning { --bs-table-bg: #33290E; --bs-table-striped-bg: #392E10; --bs-table-active-bg: #3F3312; --bs-table-hover-bg: #3F3312; }
:is(.qx, .qx-page) .table-danger { --bs-table-bg: #3A1A1E; --bs-table-striped-bg: #401D21; --bs-table-active-bg: #462024; --bs-table-hover-bg: #462024; }

/* Page header (Shared/PageHeader.razor): kicker + display h1, drop-in for a page's h1. */
.qx-ph { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 0.75rem; }
.qx-ph h1 { margin: 0; font-family: var(--qx-disp, "Roboto Condensed", sans-serif); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 3.6vw, 56px); line-height: 0.92; color: #FFFFFF; }
.qx-ph .qx-kick { margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #FFB800; }
.qx-ph .lede { margin: 0; color: #C7D0DE; font-size: 17px; max-width: 60ch; }

/* "All pages" drawer / sidebar (Layout/NavMenu.razor), in the brand palette. */
.qse-portal-navigation.sidebar { background: #0E1626 !important; border-right: 1px solid rgba(255,255,255,0.09); }
.qse-topbar-shell > .qse-portal-navigation { width: 264px !important; }
.qse-portal-navigation .qd-lock img { height: 30px; }
.qse-portal-navigation .qd-lock span { font-size: 18px; letter-spacing: 0.12em; }
.qse-portal-navigation .qd-lock small { font-size: 9px; }
.qse-portal-navigation .nav-link { color: #C7D0DE !important; font-weight: 600; font-size: 0.92rem; border-radius: 8px; margin: 1px 0; min-height: 40px; display: flex; align-items: center; padding: 0.4rem 0.75rem; }
.qse-portal-navigation .nav-link:hover { background: #1A2742; color: #FFFFFF !important; }
.qse-portal-navigation .nav-link.active { background: #1A2742; color: #FFFFFF !important; box-shadow: inset 3px 0 0 #FFB800; }
.qse-portal-navigation .nav-item small.text-muted { display: block; margin-top: 0.75rem; padding-left: 0.75rem !important; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; letter-spacing: 0.16em; color: #FFB800 !important; }
.qse-portal-navigation .qse-sidebar-fullscreen { border-radius: 10px; background: transparent !important; border-color: rgba(255,255,255,0.24) !important; min-height: 40px; }
.qse-portal-navigation .btn-outline-light { border-color: rgba(255,255,255,0.24); color: #EEF2F8; border-radius: 10px; min-height: 40px; }
.qse-portal-navigation .btn-outline-light:hover { background: #1A2742; color: #FFFFFF; }
.qse-portal-navigation .border-top.border-secondary { border-color: rgba(255,255,255,0.09) !important; }

/* Contrast sweep 2026-10-10: Bootstrap's primary blue text is 3.0:1 on navy; the home page's admin-only temp
   buttons inherited light text on amber. */
:is(.qx, .qx-page) .text-primary { color: #7FB0FF !important; }
:is(.qx, .qx-page) a.text-primary:hover { color: #A8C8FF !important; }
.qh .btn-warning { color: #111111 !important; }

/* Router FocusOnNavigate puts focus on the page h1 (tabindex=-1) after each navigation; no outline box for that. */
.qx-page h1[tabindex="-1"]:focus, .qx h1[tabindex="-1"]:focus { outline: none; }