/* ==========================================================================
   Scoreboard design layer
   Loaded after site.css. Every league theme (League.SelectedTheme ->
   <html data-theme="...">) maps its colours onto the --ss-* tokens below;
   the rules in sections 3-13 only ever use those tokens, so each theme gets
   the same scoreboard look in its own colours.
   On-colours (--ss-on-*) were chosen per theme for WCAG AA (4.5:1) contrast;
   the ratios are noted above each theme block. To add a theme, add a
   [data-theme] block here with the same tokens (and its picker entry in
   Areas/Leagues/Pages/Edit.cshtml).
   ========================================================================== */

/* 1. Fonts: Barlow / Barlow Condensed, SIL Open Font License (see /fonts/barlow/OFL.txt) */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow/barlow-condensed-700.woff2") format("woff2"); }

/* ==========================================================================
   2. Theme tokens (default = :root, used when a page has no league theme)
   ========================================================================== */
/* Light (default): on-primary 17.38:1, on-accent 9.95:1, text 17.23:1 */
:root,
[data-theme="light"] {
    --ss-primary: #0A1A33;
    --ss-primary2: #0E2445;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #FFB81C;
    --ss-on-accent: #0B1B33;
    --ss-rule: #FFB81C;
    --ss-bg: #E9EDF3;
    --ss-on-bg: #0B1B33;
    --ss-on-bg-muted: #455265;
    --ss-surface: #FFFFFF;
    --ss-surface2: #F5F6F7;
    --ss-text: #0B1B33;
    --ss-muted: #4A5668;
    --ss-border: #D8DBDE;
    --ss-border-strong: #ACB1BA;
    --ss-zebra: #F0F1F3;
    --ss-row-hover: #FFF1D2;
    --ss-win: #0F7B3F;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #0A1A33;
    --ss-input-bg: #FFFFFF;
    --ss-input-text: #0B1B33;
    --ss-banner-bg: #FFFFE0;
    --ss-banner-text: #000000;
    --ss-accent-edge: #FFB81C;
    --ss-link-bg: #0A1A33;
    --ss-solid: #0A1A33;
    --ss-info: #0A1A33;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E2E4E7;
    --ss-info-ink: #0B1B33;
    --ss-ok: #0F7B3F;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #E2EFE8;
    --ss-ok-ink: #0D4638;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F6E5E3;
    --ss-bad-ink: #571F27;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #F1EBE0;
    --ss-warn-ink: #44371C;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #0B1B33;
    --ss-link-rgb: 10,26,51;
    --ss-link-bg-rgb: 10,26,51;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Dark: on-primary 17.40:1, on-accent 7.60:1, text 14.35:1 */
[data-theme="dark"] {
    --ss-primary: #1A1A1A;
    --ss-primary2: #444444;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #00B4D8;
    --ss-on-accent: #121212;
    --ss-rule: #00B4D8;
    --ss-bg: #121212;
    --ss-on-bg: #FFFFFF;
    --ss-on-bg-muted: #C1C1C1;
    --ss-surface: #2A2A2A;
    --ss-surface2: #333333;
    --ss-text: #FFFFFF;
    --ss-muted: #C8C8C8;
    --ss-border: #4C4C4C;
    --ss-border-strong: #727272;
    --ss-zebra: #373737;
    --ss-row-hover: #22464D;
    --ss-win: #5BD68A;
    --ss-loss: #FF8F85;
    --ss-tie: #F2C14E;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #00B4D8;
    --ss-input-bg: #343A40;
    --ss-input-text: #E9ECEF;
    --ss-banner-bg: #FFFFE0;
    --ss-banner-text: #000000;
    --ss-accent-edge: #00B4D8;
    --ss-link-bg: #00B4D8;
    --ss-solid: #1A1A1A;
    --ss-info: #00B4D8;
    --ss-on-info: #111111;
    --ss-info-tint: #253B3F;
    --ss-info-ink: #8CDDED;
    --ss-ok: #5BD68A;
    --ss-on-ok: #111111;
    --ss-ok-tint: #303F36;
    --ss-ok-ink: #B5EDCA;
    --ss-bad: #FF8F85;
    --ss-on-bad: #111111;
    --ss-bad-tint: #443635;
    --ss-bad-ink: #FFCDC8;
    --ss-warn: #F2C14E;
    --ss-on-warn: #111111;
    --ss-warn-tint: #423C2E;
    --ss-warn-ink: #F9E3AF;
    --ss-changed-bg: #FFE36E;
    --ss-changed-text: #111111;
    --ss-changed-border: #FFFFFF;
    --ss-link-rgb: 0,180,216;
    --ss-link-bg-rgb: 0,180,216;
    --ss-on-primary-invert: 1;
    color-scheme: dark;
}

/* Nature: on-primary 8.93:1, on-accent 6.79:1, text 19.55:1 */
[data-theme="nature"] {
    --ss-primary: #2F4F4F;
    --ss-primary2: #6C7B61;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #E76F51;
    --ss-on-accent: #000000;
    --ss-rule: #FFFFFF;
    --ss-bg: #E9ECEF;
    --ss-on-bg: #000000;
    --ss-on-bg-muted: #3D3D3E;
    --ss-surface: #FAF7E9;
    --ss-surface2: #F0EDE0;
    --ss-text: #000000;
    --ss-muted: #41403D;
    --ss-border: #D2CFC4;
    --ss-border-strong: #A5A39A;
    --ss-zebra: #EBE8DB;
    --ss-row-hover: #F6DCCB;
    --ss-win: #0E723A;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #2F4F4F;
    --ss-input-bg: #E9F5E9;
    --ss-input-text: #355E3B;
    --ss-banner-bg: #F5F5DC;
    --ss-banner-text: #355E3B;
    --ss-accent-edge: #E76F51;
    --ss-link-bg: #2F4F4F;
    --ss-solid: #2F4F4F;
    --ss-info: #2F4F4F;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E2E3D7;
    --ss-info-ink: #152424;
    --ss-ok: #0E723A;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #DEE7D4;
    --ss-ok-ink: #06331A;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F2DED0;
    --ss-bad-ink: #51100B;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #EDE4CD;
    --ss-warn-ink: #3E2900;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #000000;
    --ss-link-rgb: 47,79,79;
    --ss-link-bg-rgb: 47,79,79;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Cyberpunk: on-primary 17.39:1, on-accent 6.31:1, text 16.67:1 */
[data-theme="cyberpunk"] {
    --ss-primary: #0D1B2A;
    --ss-primary2: #1B263B;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #FF00FF;
    --ss-on-accent: #0A0A0A;
    --ss-rule: #FF00FF;
    --ss-bg: #0A0A0A;
    --ss-on-bg: #FFFFFF;
    --ss-on-bg-muted: #BFBFBF;
    --ss-surface: #1E1E1E;
    --ss-surface2: #272727;
    --ss-text: #FFFFFF;
    --ss-muted: #C4C4C4;
    --ss-border: #424242;
    --ss-border-strong: #6A6A6A;
    --ss-zebra: #2C2C2C;
    --ss-row-hover: #4B184B;
    --ss-win: #5BD68A;
    --ss-loss: #FF8A80;
    --ss-tie: #F2C14E;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #FF00FF;
    --ss-input-bg: #2D2D2D;
    --ss-input-text: #00FFFF;
    --ss-banner-bg: #00FFFF;
    --ss-banner-text: #000000;
    --ss-accent-edge: #FF00FF;
    --ss-link-bg: #FF00FF;
    --ss-solid: #0D1B2A;
    --ss-info: #FF00FF;
    --ss-on-info: #111111;
    --ss-info-tint: #391A39;
    --ss-info-ink: #FF8CFF;
    --ss-ok: #5BD68A;
    --ss-on-ok: #111111;
    --ss-ok-tint: #25342B;
    --ss-ok-ink: #B5EDCA;
    --ss-bad: #FF8A80;
    --ss-on-bad: #111111;
    --ss-bad-tint: #392B2A;
    --ss-bad-ink: #FFCAC6;
    --ss-warn: #F2C14E;
    --ss-on-warn: #111111;
    --ss-warn-tint: #373224;
    --ss-warn-ink: #F9E3AF;
    --ss-changed-bg: #FFE36E;
    --ss-changed-text: #111111;
    --ss-changed-border: #FFFFFF;
    --ss-link-rgb: 255,0,255;
    --ss-link-bg-rgb: 255,0,255;
    --ss-on-primary-invert: 1;
    color-scheme: dark;
}

/* Red & Black: on-primary 8.92:1, on-accent 18.88:1, text 21.00:1 */
[data-theme="red-black"] {
    --ss-primary: #990000;
    --ss-primary2: #EE0000;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #111111;
    --ss-on-accent: #FFFFFF;
    --ss-rule: #FFFFFF;
    --ss-bg: #000000;
    --ss-on-bg: #FFFFFF;
    --ss-on-bg-muted: #BDBDBD;
    --ss-surface: #FFFFFF;
    --ss-surface2: #F5F5F5;
    --ss-text: #000000;
    --ss-muted: #424242;
    --ss-border: #D6D6D6;
    --ss-border-strong: #A8A8A8;
    --ss-zebra: #F0F0F0;
    --ss-row-hover: #CFCFCF;
    --ss-win: #0C6433;
    --ss-loss: #AB2117;
    --ss-tie: #7B5000;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #111111;
    --ss-input-bg: #333333;
    --ss-input-text: #FFCCCC;
    --ss-banner-bg: #FFFFE0;
    --ss-banner-text: #747474;
    --ss-accent-edge: #A8A8A8;
    --ss-link-bg: #FFFFFF;
    --ss-solid: #990000;
    --ss-info: #111111;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E2E2E2;
    --ss-info-ink: #080808;
    --ss-ok: #0C6433;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #E2ECE7;
    --ss-ok-ink: #052D17;
    --ss-bad: #AB2117;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F5E4E3;
    --ss-bad-ink: #4D0F0A;
    --ss-warn: #7B5000;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #EFEAE0;
    --ss-warn-ink: #372400;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #000000;
    --ss-link-rgb: 17,17,17;
    --ss-link-bg-rgb: 255,255,255;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Ocean Breeze: on-primary 10.80:1, on-accent 5.45:1, text 10.07:1 */
[data-theme="ocean-breeze"] {
    --ss-primary: #1E3C72;
    --ss-primary2: #2A5298;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #48C6EF;
    --ss-on-accent: #1E3C72;
    --ss-rule: #48C6EF;
    --ss-bg: #E0F7FA;
    --ss-on-bg: #1E3C72;
    --ss-on-bg-muted: #506D95;
    --ss-surface: #F0F8FF;
    --ss-surface2: #E8F0F9;
    --ss-text: #1E3C72;
    --ss-muted: #556D97;
    --ss-border: #CEDAE8;
    --ss-border-strong: #A9B8CF;
    --ss-zebra: #E3EDF7;
    --ss-row-hover: #CEEEFC;
    --ss-win: #0E763D;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #1E3C72;
    --ss-input-bg: #D1E8F5;
    --ss-input-text: #1E3C72;
    --ss-banner-bg: #E6F3FA;
    --ss-banner-text: #1E3C72;
    --ss-accent-edge: #48C6EF;
    --ss-link-bg: #1E3C72;
    --ss-solid: #1E3C72;
    --ss-info: #1E3C72;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #D7E1EE;
    --ss-info-ink: #1E3C72;
    --ss-ok: #0E763D;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #D5E8E8;
    --ss-ok-ink: #17565A;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #E9DEE3;
    --ss-bad-ink: #62314A;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #E4E5E0;
    --ss-warn-ink: #4F4A3F;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #1E3C72;
    --ss-link-rgb: 30,60,114;
    --ss-link-bg-rgb: 30,60,114;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Sunset Glow: on-primary 6.32:1, on-accent 6.33:1, text 10.44:1 */
[data-theme="sunset-glow"] {
    --ss-primary: #FF5E62;
    --ss-primary2: #F39047;
    --ss-on-primary: #111111;
    --ss-accent: #FFB347;
    --ss-on-accent: #4A2C6B;
    --ss-rule: #111111;
    --ss-bg: #F9E1CC;
    --ss-on-bg: #4A2C6B;
    --ss-on-bg-muted: #785B84;
    --ss-surface: #FFF5E6;
    --ss-surface2: #F8EDE1;
    --ss-text: #4A2C6B;
    --ss-muted: #79608B;
    --ss-border: #E2D5D2;
    --ss-border-strong: #C1B1BC;
    --ss-zebra: #F4E9DF;
    --ss-row-hover: #FFE8C6;
    --ss-win: #0E763D;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #4A2C6B;
    --ss-input-bg: #FCE8D4;
    --ss-input-text: #4A2C6B;
    --ss-banner-bg: #FFE8CC;
    --ss-banner-text: #4A2C6B;
    --ss-accent-edge: #FFB347;
    --ss-link-bg: #4A2C6B;
    --ss-solid: #4A2C6B;
    --ss-info: #4A2C6B;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E9DDD7;
    --ss-info-ink: #4A2C6B;
    --ss-ok: #0E763D;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #E2E6D2;
    --ss-ok-ink: #2F4D56;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F6DCCD;
    --ss-bad-ink: #7A2846;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #F1E2CA;
    --ss-warn-ink: #67413B;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #4A2C6B;
    --ss-link-rgb: 74,44,107;
    --ss-link-bg-rgb: 74,44,107;
    --ss-on-primary-invert: 0;
    color-scheme: light;
}

/* Forest Night: on-primary 12.26:1, on-accent 4.86:1, text 7.66:1 */
[data-theme="forest-night"] {
    --ss-primary: #1B3B2F;
    --ss-primary2: #355E3B;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #8A9A5B;
    --ss-on-accent: #1F2A1F;
    --ss-rule: #8A9A5B;
    --ss-bg: #1F2A1F;
    --ss-on-bg: #E6CCB2;
    --ss-on-bg-muted: #B2A28C;
    --ss-surface: #2E3B2E;
    --ss-surface2: #354133;
    --ss-text: #E6CCB2;
    --ss-muted: #B6A690;
    --ss-border: #4B5243;
    --ss-border-strong: #6D6C5B;
    --ss-zebra: #394436;
    --ss-row-hover: #404E37;
    --ss-win: #5BD68A;
    --ss-loss: #FFA19A;
    --ss-tie: #F2C14E;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #E6CCB2;
    --ss-input-bg: #354F3A;
    --ss-input-text: #D4E6B2;
    --ss-banner-bg: #3A4F3B;
    --ss-banner-text: #E6CCB2;
    --ss-accent-edge: #8A9A5B;
    --ss-link-bg: #8A9A5B;
    --ss-solid: #1B3B2F;
    --ss-info: #E6CCB2;
    --ss-on-info: #111111;
    --ss-info-tint: #444C3E;
    --ss-info-ink: #E6CCB2;
    --ss-ok: #5BD68A;
    --ss-on-ok: #111111;
    --ss-ok-tint: #334E39;
    --ss-ok-ink: #A7D1A0;
    --ss-bad: #FFA19A;
    --ss-on-bad: #111111;
    --ss-bad-tint: #47473B;
    --ss-bad-ink: #F1B9A7;
    --ss-warn: #F2C14E;
    --ss-on-warn: #111111;
    --ss-warn-tint: #464B32;
    --ss-warn-ink: #EBC785;
    --ss-changed-bg: #FFE36E;
    --ss-changed-text: #111111;
    --ss-changed-border: #E6CCB2;
    --ss-link-rgb: 230,204,178;
    --ss-link-bg-rgb: 138,154,91;
    --ss-on-primary-invert: 1;
    color-scheme: dark;
}

/* Pastel Dream: on-primary 11.44:1, on-accent 12.59:1, text 4.99:1 */
[data-theme="pastel-dream"] {
    --ss-primary: #B3CDE0;
    --ss-primary2: #D4E4F7;
    --ss-on-primary: #111111;
    --ss-accent: #F7C6D6;
    --ss-on-accent: #111111;
    --ss-rule: #111111;
    --ss-bg: #F0F4F8;
    --ss-on-bg: #5C7085;
    --ss-on-bg-muted: #607183;
    --ss-surface: #F9F2F4;
    --ss-surface2: #F3EDEF;
    --ss-text: #576B7F;
    --ss-muted: #626F7E;
    --ss-border: #DFDCE1;
    --ss-border-strong: #C2C4CC;
    --ss-zebra: #EFEAED;
    --ss-row-hover: #F9E9EE;
    --ss-win: #0E763D;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #576B7F;
    --ss-input-bg: #F2F6FB;
    --ss-input-text: #5E7388;
    --ss-banner-bg: #F5F5DC;
    --ss-banner-text: #5C7085;
    --ss-accent-edge: #F7C6D6;
    --ss-link-bg: #5C7085;
    --ss-solid: #576B7F;
    --ss-info: #576B7F;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E6E2E6;
    --ss-info-ink: #536679;
    --ss-ok: #0E763D;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #DDE3DE;
    --ss-ok-ink: #346D5E;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F1D9DA;
    --ss-bad-ink: #814B51;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #ECE0D7;
    --ss-warn-ink: #6E6346;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #576B7F;
    --ss-link-rgb: 87,107,127;
    --ss-link-bg-rgb: 92,112,133;
    --ss-on-primary-invert: 0;
    color-scheme: light;
}

/* Midnight Blue: on-primary 17.00:1, on-accent 4.60:1, text 9.11:1 */
[data-theme="midnight-blue"] {
    --ss-primary: #0D1B3A;
    --ss-primary2: #1E3A6B;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #4682B4;
    --ss-on-accent: #111111;
    --ss-rule: #4682B4;
    --ss-bg: #0F172A;
    --ss-on-bg: #D3D3D3;
    --ss-on-bg-muted: #A0A2A7;
    --ss-surface: #1C2E4A;
    --ss-surface2: #23354F;
    --ss-text: #D3D3D3;
    --ss-muted: #A3A8AF;
    --ss-border: #394860;
    --ss-border-strong: #5A6679;
    --ss-zebra: #273852;
    --ss-row-hover: #243F5F;
    --ss-win: #5BD68A;
    --ss-loss: #FF8A80;
    --ss-tie: #F2C14E;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #D3D3D3;
    --ss-input-bg: #2C3E50;
    --ss-input-text: #B0C4DE;
    --ss-banner-bg: #2A4066;
    --ss-banner-text: #D3D3D3;
    --ss-accent-edge: #4682B4;
    --ss-link-bg: #D3D3D3;
    --ss-solid: #0D1B3A;
    --ss-info: #D3D3D3;
    --ss-on-info: #111111;
    --ss-info-tint: #32425A;
    --ss-info-ink: #D3D3D3;
    --ss-ok: #5BD68A;
    --ss-on-ok: #111111;
    --ss-ok-tint: #244252;
    --ss-ok-ink: #9DD4B2;
    --ss-bad: #FF8A80;
    --ss-on-bad: #111111;
    --ss-bad-tint: #373950;
    --ss-bad-ink: #E7B2AE;
    --ss-warn: #F2C14E;
    --ss-on-warn: #111111;
    --ss-warn-tint: #36404A;
    --ss-warn-ink: #E1CB97;
    --ss-changed-bg: #FFE36E;
    --ss-changed-text: #111111;
    --ss-changed-border: #D3D3D3;
    --ss-link-rgb: 211,211,211;
    --ss-link-bg-rgb: 211,211,211;
    --ss-on-primary-invert: 1;
    color-scheme: dark;
}

/* Golden Luxe: on-primary 12.81:1, on-accent 9.13:1, text 11.86:1 */
[data-theme="golden-luxe"] {
    --ss-primary: #3C2F2F;
    --ss-primary2: #5E4B3C;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #FFD700;
    --ss-on-accent: #3C2F2F;
    --ss-rule: #FFD700;
    --ss-bg: #FAF2E6;
    --ss-on-bg: #3C2F2F;
    --ss-on-bg-muted: #6D625F;
    --ss-surface: #FFF5E6;
    --ss-surface2: #F7EDDF;
    --ss-text: #3C2F2F;
    --ss-muted: #6F625F;
    --ss-border: #E0D5C9;
    --ss-border-strong: #BDB2A8;
    --ss-zebra: #F3E9DB;
    --ss-row-hover: #FFEFB8;
    --ss-win: #0E763D;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #3C2F2F;
    --ss-input-bg: #FEF6E8;
    --ss-input-text: #5E4B3C;
    --ss-banner-bg: #FFF8E1;
    --ss-banner-text: #3C2F2F;
    --ss-accent-edge: #FFD700;
    --ss-link-bg: #3C2F2F;
    --ss-solid: #3C2F2F;
    --ss-info: #3C2F2F;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E8DDD0;
    --ss-info-ink: #3C2F2F;
    --ss-ok: #0E763D;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #E2E6D2;
    --ss-ok-ink: #274F35;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F6DCCD;
    --ss-bad-ink: #722A25;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #F1E2CA;
    --ss-warn-ink: #5F421A;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #3C2F2F;
    --ss-link-rgb: 60,47,47;
    --ss-link-bg-rgb: 60,47,47;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Arctic Chill: on-primary 8.31:1, on-accent 4.50:1, text 7.92:1 */
[data-theme="arctic-chill"] {
    --ss-primary: #2C5364;
    --ss-primary2: #527896;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #A3BFFA;
    --ss-on-accent: #2C5364;
    --ss-rule: #A3BFFA;
    --ss-bg: #EDF2F7;
    --ss-on-bg: #2C5364;
    --ss-on-bg-muted: #56717E;
    --ss-surface: #F7FAFC;
    --ss-surface2: #EFF3F6;
    --ss-text: #2C5364;
    --ss-muted: #5B7683;
    --ss-border: #D7DFE4;
    --ss-border-strong: #B2C1C8;
    --ss-zebra: #EBF0F3;
    --ss-row-hover: #E6EEFC;
    --ss-win: #0F7B3F;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #2C5364;
    --ss-input-bg: #E9EEF5;
    --ss-input-text: #2C5364;
    --ss-banner-bg: #E6F0FA;
    --ss-banner-text: #2C5364;
    --ss-accent-edge: #A3BFFA;
    --ss-link-bg: #2C5364;
    --ss-solid: #2C5364;
    --ss-info: #2C5364;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #DFE6EA;
    --ss-info-ink: #2C5364;
    --ss-ok: #0F7B3F;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #DBEBE5;
    --ss-ok-ink: #1F6553;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #EFE0E1;
    --ss-bad-ink: #693D42;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #EAE7DE;
    --ss-warn-ink: #565637;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #2C5364;
    --ss-link-rgb: 44,83,100;
    --ss-link-bg-rgb: 44,83,100;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Vintage Sepia: on-primary 12.60:1, on-accent 5.68:1, text 11.20:1 */
[data-theme="vintage-sepia"] {
    --ss-primary: #4A2C1B;
    --ss-primary2: #6B4423;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #D2A679;
    --ss-on-accent: #4A2C1B;
    --ss-rule: #D2A679;
    --ss-bg: #EFE6D9;
    --ss-on-bg: #4A2C1B;
    --ss-on-bg-muted: #755C4C;
    --ss-surface: #FAF0E6;
    --ss-surface2: #F3E8DE;
    --ss-text: #4A2C1B;
    --ss-muted: #785F50;
    --ss-border: #DED1C6;
    --ss-border-strong: #BEADA1;
    --ss-zebra: #EFE4DA;
    --ss-row-hover: #F2E1D0;
    --ss-win: #0E723A;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #4A2C1B;
    --ss-input-bg: #F0E4D0;
    --ss-input-text: #6B4423;
    --ss-banner-bg: #F5E8D3;
    --ss-banner-text: #4A2C1B;
    --ss-accent-edge: #D2A679;
    --ss-link-bg: #4A2C1B;
    --ss-solid: #4A2C1B;
    --ss-info: #4A2C1B;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #E5D8CE;
    --ss-info-ink: #4A2C1B;
    --ss-ok: #0E723A;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #DEE1D1;
    --ss-ok-ink: #2F4C29;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #F2D7CD;
    --ss-bad-ink: #7A281A;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #EDDECA;
    --ss-warn-ink: #67410F;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #4A2C1B;
    --ss-link-rgb: 74,44,27;
    --ss-link-bg-rgb: 74,44,27;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* Emerald City: on-primary 9.64:1, on-accent 8.51:1, text 9.31:1 */
[data-theme="emerald-city"] {
    --ss-primary: #1B4D3E;
    --ss-primary2: #2D816B;
    --ss-on-primary: #FFFFFF;
    --ss-accent: #34C759;
    --ss-on-accent: #111111;
    --ss-rule: #34C759;
    --ss-bg: #E0F7E0;
    --ss-on-bg: #1B4D3E;
    --ss-on-bg-muted: #4C7665;
    --ss-surface: #F0FFF0;
    --ss-surface2: #E7F8E9;
    --ss-text: #1B4D3E;
    --ss-muted: #527B6C;
    --ss-border: #CEE3D4;
    --ss-border-strong: #A8C2B3;
    --ss-zebra: #E3F4E5;
    --ss-row-hover: #CAF4D2;
    --ss-win: #0E763D;
    --ss-loss: #B42318;
    --ss-tie: #8A5A00;
    --ss-danger: #C62828;
    --ss-on-danger: #FFFFFF;
    --ss-link: #1B4D3E;
    --ss-input-bg: #D9F5D9;
    --ss-input-text: #1B4D3E;
    --ss-banner-bg: #E6FFE6;
    --ss-banner-text: #1B4D3E;
    --ss-accent-edge: #34C759;
    --ss-link-bg: #1B4D3E;
    --ss-solid: #1B4D3E;
    --ss-info: #1B4D3E;
    --ss-on-info: #FFFFFF;
    --ss-info-tint: #D6EADB;
    --ss-info-ink: #1B4D3E;
    --ss-ok: #0E763D;
    --ss-on-ok: #FFFFFF;
    --ss-ok-tint: #D5EFDB;
    --ss-ok-ink: #155F3E;
    --ss-bad: #B42318;
    --ss-on-bad: #FFFFFF;
    --ss-bad-tint: #E9E5D6;
    --ss-bad-ink: #603A2D;
    --ss-warn: #8A5A00;
    --ss-on-warn: #FFFFFF;
    --ss-warn-tint: #E4EBD3;
    --ss-warn-ink: #4D5322;
    --ss-changed-bg: #FFF59D;
    --ss-changed-text: #111111;
    --ss-changed-border: #1B4D3E;
    --ss-link-rgb: 27,77,62;
    --ss-link-bg-rgb: 27,77,62;
    --ss-on-primary-invert: 1;
    color-scheme: light;
}

/* ==========================================================================
   3. Bootstrap bridge + shared tokens
   Bootstrap's own variables follow the active theme so modals, dropdowns,
   toasts, list groups and alerts pick up the theme without extra rules.
   ========================================================================== */
:root, [data-theme] {
    --ss-font: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --ss-font-display: "Barlow Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
    --ss-radius: 10px;
    --ss-radius-sm: 6px;
    --ss-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 4px 14px rgba(0, 0, 0, .10);
    --ss-focus: 0 0 0 3px color-mix(in srgb, var(--ss-accent) 55%, transparent);
    --bs-body-font-family: var(--ss-font);
    --bs-body-bg: var(--ss-surface);
    --bs-body-color: var(--ss-text);
    --bs-emphasis-color: var(--ss-text);
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--ss-muted);
    --bs-tertiary-color: var(--ss-muted);
    --bs-border-color: var(--ss-border);
    --bs-secondary-bg: var(--ss-zebra);
    --bs-tertiary-bg: var(--ss-surface2);
    --bs-link-color: var(--ss-link);
    --bs-link-hover-color: var(--ss-link);
    --bs-link-color-rgb: var(--ss-link-rgb);
    --bs-link-hover-color-rgb: var(--ss-link-rgb);
    --bs-border-radius: var(--ss-radius-sm);
    /* "current" colours: page background by default, card colours inside panels */
    --ss-cur-text: var(--ss-on-bg);
    --ss-cur-muted: var(--ss-on-bg-muted);
}

/* ==========================================================================
   4. Page frame
   ========================================================================== */
body {
    font-family: var(--ss-font);
    background-color: var(--ss-bg);
    color: var(--ss-on-bg);
    --bs-link-color-rgb: var(--ss-link-bg-rgb);
    --bs-link-hover-color-rgb: var(--ss-link-bg-rgb);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 0;
}

body > .container {
    flex: 1 0 auto;
}

main {
    overflow-x: clip; /* nothing may push the page wider than the phone */
}

main img:not(.scorebookPhotoZoom img):not(.scorebookPhotoModalBody img) {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6, .display-4, .display-5, .display-6 {
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: .01em;
}

main > h1, main > h2 {
    text-transform: uppercase;
}

.table, .dataTable, .tab-button, .statSummary {
    font-variant-numeric: tabular-nums;
}

.text-danger {
    color: var(--ss-cur-loss, var(--ss-loss)) !important;
}

.text-muted, .text-secondary {
    color: var(--ss-cur-muted) !important;
}

/* ==========================================================================
   5. Top bar
   ========================================================================== */
nav.navbar {
    background: linear-gradient(180deg, var(--ss-primary2), var(--ss-primary)) !important;
    border-bottom: 4px solid var(--ss-rule) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--ss-on-primary);
}

nav.navbar .navbar-brand,
nav.navbar .navbar-brand span {
    color: var(--ss-on-primary);
}

nav.navbar .navbar-brand > img,
nav.navbar a.navbar-brand:first-child img {
    border-radius: 6px !important;
}

nav.navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
}

nav.navbar .sportStatNav,
nav.navbar .baseballStatsButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px !important;
    line-height: 1 !important;
    margin: 4px 6px 4px 0 !important;
    padding: 0 14px !important;
    border-radius: var(--ss-radius-sm) !important;
    font-family: var(--ss-font-display) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none !important;
}

nav.navbar .sportStatNav {
    background: transparent !important;
    color: var(--ss-on-primary) !important;
    border: 1px solid color-mix(in srgb, var(--ss-on-primary) 28%, transparent) !important;
}

nav.navbar .sportStatNav:hover,
nav.navbar .sportStatNav:focus-visible,
nav.navbar .show > .sportStatNav {
    background: color-mix(in srgb, var(--ss-on-primary) 14%, transparent) !important;
    color: var(--ss-on-primary) !important;
}

nav.navbar .sportStatNav img {
    max-height: 30px !important;
    width: auto;
    border-radius: 4px;
}

nav.navbar .navbar-toggler {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--ss-on-primary) 40%, transparent) !important;
}

nav.navbar .navbar-toggler-icon {
    filter: invert(var(--ss-on-primary-invert));
}

nav.navbar .navbar-toggler:focus {
    box-shadow: var(--ss-focus);
}

/* "More..." menu in the bar */
nav .dropdown-menu,
li.nav-item.dropdown .dropdown-menu {
    background: var(--ss-primary) !important;
    border: 1px solid color-mix(in srgb, var(--ss-on-primary) 22%, transparent) !important;
    border-top: 3px solid var(--ss-rule) !important;
    border-radius: var(--ss-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    padding: 6px;
}

nav .dropdown-menu .dropdown-item,
nav .dropdown-menu .sportStatNav {
    width: 100%;
    justify-content: flex-start !important;
    border-color: transparent !important;
    margin: 2px 0 !important;
}

@media (max-width: 575.98px) {
    nav.navbar .navbar-nav .nav-item {
        display: block;
    }

    nav.navbar .sportStatNav,
    nav.navbar .baseballStatsButton {
        display: flex !important;
        width: 100%;
        margin: 4px 0 !important;
    }

    nav.navbar .navbar-collapse {
        padding-top: 6px;
    }
}

/* ==========================================================================
   6. Buttons
   SaveGuard's .saveGuardBusy (opacity/cursor/pointer-events) is left alone:
   nothing here sets opacity, cursor or pointer-events.
   ========================================================================== */
.baseballStatsButton,
.btn-primary {
    background-image: none !important;
    background-color: var(--ss-accent) !important;
    color: var(--ss-on-accent) !important;
    border: 1px solid var(--ss-accent-edge) !important;
    border-radius: var(--ss-radius-sm) !important;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--ss-accent) 60%, #000) !important;
    font-family: var(--ss-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.baseballStatsButton:hover,
.btn-primary:hover {
    filter: brightness(1.06);
    color: var(--ss-on-accent) !important;
}

.baseballStatsButton:focus-visible,
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.tab-button:focus-visible {
    outline: none;
    box-shadow: var(--ss-focus) !important;
}

.btn-danger,
.removeButton {
    background-image: none !important;
    background-color: var(--ss-danger) !important;
    color: var(--ss-on-danger) !important;
    border: 1px solid color-mix(in srgb, var(--ss-danger) 70%, #000) !important;
    border-radius: var(--ss-radius-sm) !important;
    font-family: var(--ss-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.btn-danger {
    box-shadow: 0 2px 0 color-mix(in srgb, var(--ss-danger) 60%, #000) !important;
}

.btn-danger:hover {
    filter: brightness(1.08);
    color: var(--ss-on-danger) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
    --bs-btn-color: var(--ss-cur-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ss-border-strong);
    --bs-btn-hover-color: var(--ss-cur-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ss-cur-text) 10%, transparent);
    --bs-btn-hover-border-color: var(--ss-border-strong);
    --bs-btn-active-color: var(--ss-on-primary);
    --bs-btn-active-bg: var(--ss-primary);
    --bs-btn-active-border-color: var(--ss-primary);
    border-radius: var(--ss-radius-sm);
    font-weight: 600;
}

/* segmented tabs (Hitting / Pitching etc.) */
.tab-button {
    background-image: none !important;
    background-color: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border: 1px solid var(--ss-border-strong) !important;
    border-radius: var(--ss-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--ss-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tab-button.active {
    background-color: var(--ss-primary) !important;
    color: var(--ss-on-primary) !important;
    border-color: var(--ss-primary) !important;
    box-shadow: inset 0 -3px 0 var(--ss-rule) !important;
}

/* toggle switch */
.slider {
    background-image: none !important;
    background-color: var(--ss-border-strong) !important;
}

input:checked + .slider {
    background-color: var(--ss-accent) !important;
    box-shadow: inset 0 0 0 1px var(--ss-accent-edge);
}

/* ==========================================================================
   7. Cards / panels and title bars
   ========================================================================== */
.detailPanel,
.card,
.modal-content,
.dropdown-content {
    --ss-cur-text: var(--ss-text);
    --ss-cur-muted: var(--ss-muted);
    --bs-link-color-rgb: var(--ss-link-rgb);
    --bs-link-hover-color-rgb: var(--ss-link-rgb);
}

.detailPanel {
    background-color: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius) !important;
    box-shadow: var(--ss-shadow) !important;
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.card {
    --bs-card-bg: var(--ss-surface);
    --bs-card-color: var(--ss-text);
    --bs-card-border-color: var(--ss-border);
    border-radius: var(--ss-radius);
}

/* full-width panels: keep site.css's 5px side margins without spilling past the row */
.detailPanel[class*="col-"] {
    max-width: calc(100% - 10px);
}

/* a full-width panel that is a direct .row column would otherwise sit in the row's
   negative gutter and get its rounded corners clipped by main */
.row > .detailPanel.col-md-12,
.row > .detailPanel.col-12:not([class*="col-md-"]):not([class*="col-lg-"]),
.row > .detailPanel.col-sm-12:not([class*="col-md-"]):not([class*="col-lg-"]) {
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    max-width: calc(100% - var(--bs-gutter-x, 1.5rem));
}

/* single-form pages (create / edit / login) sit centred instead of hugging the left */
main > .row > .detailPanel[class*="col-lg-6"]:only-child,
main > .row > .row.detailPanel[class*="col-lg-6"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

.tableTitle,
.detailPanel > h3:not(#announcementContent *),
.detailPanel > h4,
.detailPanel > section > h3,
.detailPanel > section > h4,
.detailPanel > section > form > h3,
.scoreboardTitle {
    display: block;
    background: linear-gradient(180deg, var(--ss-primary2), var(--ss-primary));
    color: var(--ss-on-primary) !important;
    border-bottom: 3px solid var(--ss-rule);
    border-radius: 8px;
    margin: 0 0 14px;
    padding: 9px 14px;
    font-family: var(--ss-font-display);
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
}

.tableTitle > div,
.tableTitle > span {
    color: inherit !important;
}

/* a .tableTitle that only holds action buttons (stat entry) stays a plain button row */
.tableTitle:has(> .baseballStatsButton) {
    background: none;
    border: 0;
    padding: 0;
    text-align: center;
}

hr {
    border-color: var(--ss-border-strong);
    opacity: 1;
}

/* game results */
span.win { color: var(--ss-win) !important; }
span.loss { color: var(--ss-loss) !important; }
span.tie { color: var(--ss-tie) !important; }

span.win, span.loss, span.tie {
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: .05em;
}

/* announcement banner */
.messageBanner {
    background-color: var(--ss-banner-bg) !important;
    color: var(--ss-banner-text) !important;
    border-bottom: 3px solid var(--ss-rule);
    font-family: var(--ss-font-display);
    letter-spacing: .03em;
    padding: 10px 12px 6px !important;
}

/* carousel (league news) */
.carouselDetailPanel {
    background: var(--ss-surface2) !important;
    color: var(--ss-text) !important;
    border-left: 5px solid var(--ss-rule);
    border-radius: 8px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--ss-solid) !important;
    border-radius: 50%;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--ss-border-strong) !important;
}

.carousel-indicators [data-bs-target].active {
    background-color: var(--ss-accent) !important;
    border-color: var(--ss-accent-edge) !important;
}

/* Hall of fame badge keeps its own gold-on-black look in every theme */
.hof-badge {
    font-family: var(--ss-font-display);
}

/* ==========================================================================
   8. Tables
   ========================================================================== */
.table {
    --bs-table-bg: var(--ss-surface);
    --bs-table-color: var(--ss-text);
    --bs-table-striped-bg: var(--ss-zebra);
    --bs-table-striped-color: var(--ss-text);
    --bs-table-hover-bg: var(--ss-row-hover);
    --bs-table-hover-color: var(--ss-text);
    --bs-table-border-color: var(--ss-border);
    color: var(--ss-text);
}

.table > thead > tr > th,
.table.table-striped thead tr th,
.table.table-striped thead.fixedHeader tr th,
table.dataTable > thead > tr > th {
    background: var(--ss-primary) !important;
    color: var(--ss-on-primary) !important;
    border-bottom: 3px solid var(--ss-rule) !important;
    border-color: var(--ss-primary);
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table > thead > tr > th *,
table.dataTable > thead > tr > th * {
    color: inherit;
    opacity: 1;
}

.table > thead > tr > th:first-child { border-top-left-radius: 6px; }
.table > thead > tr > th:last-child { border-top-right-radius: 6px; }

.table.table-striped tbody tr td,
.table.table-striped tbody tr th {
    background-color: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border-color: var(--ss-border);
}

.table.table-striped tbody tr:nth-of-type(odd) > td,
.table.table-striped tbody tr:nth-of-type(odd) > th {
    background-color: var(--ss-zebra) !important;
}

table.actionTable tbody tr:hover td,
.table-hover tbody tr:hover > * {
    background-color: var(--ss-row-hover) !important;
    color: var(--ss-text) !important;
}

.table tfoot td,
.table tfoot th,
.table tr.totalsRow td {
    background-color: var(--ss-surface2) !important;
    color: var(--ss-text) !important;
    border-top: 2px solid var(--ss-border-strong);
    font-weight: 700;
}

/* DataTables chrome */
div.dt-container,
div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
    color: var(--ss-cur-text);
}

div.dt-container .dt-info {
    color: var(--ss-cur-muted);
}

/* wide tables scroll sideways on phones instead of being cut off */
.dt-layout-table,
.table-responsive,
.statsTableContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pagination {
    --bs-pagination-bg: var(--ss-surface);
    --bs-pagination-color: var(--ss-text);
    --bs-pagination-border-color: var(--ss-border);
    --bs-pagination-hover-bg: var(--ss-zebra);
    --bs-pagination-hover-color: var(--ss-text);
    --bs-pagination-focus-box-shadow: var(--ss-focus);
    --bs-pagination-active-bg: var(--ss-primary);
    --bs-pagination-active-color: var(--ss-on-primary);
    --bs-pagination-active-border-color: var(--ss-primary);
    --bs-pagination-disabled-bg: var(--ss-surface2);
    --bs-pagination-disabled-color: var(--ss-muted);
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--ss-border);
}

/* action pop-up menu used in stat entry tables */
.dropdown-content {
    background-color: var(--ss-surface) !important;
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
    overflow: hidden;
}

.dropdown-content > :first-child:not(a) {
    background-image: none !important;
    background-color: var(--ss-primary) !important;
    color: var(--ss-on-primary) !important;
    border-bottom: 3px solid var(--ss-rule);
    font-family: var(--ss-font-display);
    letter-spacing: .04em;
}

.dropdown-content a {
    color: var(--ss-text) !important;
}

.dropdown-content a:hover {
    background-color: var(--ss-row-hover) !important;
}

/* ==========================================================================
   9. Forms
   ========================================================================== */
label,
.control-label,
.form-label {
    color: var(--ss-cur-muted);
}

.control-label {
    font-family: var(--ss-font-display);
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.form-check-label,
.form-check label {
    color: var(--ss-cur-text);
    text-transform: none;
    letter-spacing: normal;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--ss-input-bg) !important;
    color: var(--ss-input-text) !important;
    border: 1px solid var(--ss-border-strong) !important;
    border-radius: var(--ss-radius-sm) !important;
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--ss-input-text) 60%, var(--ss-input-bg));
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ss-accent-edge) !important;
    box-shadow: var(--ss-focus) !important;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: .75;
}

.form-floating > label {
    color: color-mix(in srgb, var(--ss-input-text) 78%, var(--ss-input-bg));
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--ss-input-text);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: var(--ss-input-bg) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    color: var(--ss-input-text) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: var(--ss-surface2);
    color: var(--ss-text);
    border-color: var(--ss-border-strong);
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--ss-input-bg);
    color: var(--ss-input-text);
    border-color: var(--ss-border-strong);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--ss-input-text);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--ss-primary) !important;
    color: var(--ss-on-primary) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--ss-zebra);
    color: var(--ss-input-text);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--ss-input-bg);
    color: var(--ss-input-text);
}

/* Save bar on stat entry / league edit: a sticky footer bar that never hides content */
#fixed-button-panel {
    margin: 0 !important;
    background-color: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border: 1px solid var(--ss-border);
    border-top: 3px solid var(--ss-rule);
    border-radius: var(--ss-radius) var(--ss-radius) 0 0 !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18) !important;
}

body:has(#fixed-button-panel) main {
    padding-bottom: 96px;
}

/* ==========================================================================
   10. Modals, alerts, badges, toasts
   ========================================================================== */
.modal-content {
    background-color: var(--ss-surface);
    color: var(--ss-text);
    border: 0;
    border-radius: var(--ss-radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.modal-header {
    background: linear-gradient(180deg, var(--ss-primary2), var(--ss-primary));
    color: var(--ss-on-primary);
    border-bottom: 3px solid var(--ss-rule);
}

.modal-header .modal-title {
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.modal-header .btn-close {
    filter: invert(var(--ss-on-primary-invert)) grayscale(100%) brightness(2);
    opacity: .85;
}

.modal-footer {
    border-top-color: var(--ss-border);
}

.alert {
    border-radius: var(--ss-radius-sm);
    border-left-width: 5px;
}

.badge {
    font-family: var(--ss-font-display);
    letter-spacing: .05em;
}

.toast {
    border-radius: var(--ss-radius-sm);
    border-left: 5px solid var(--ss-rule);
}

.dropdown-menu:not(nav .dropdown-menu) {
    --bs-dropdown-bg: var(--ss-surface);
    --bs-dropdown-color: var(--ss-text);
    --bs-dropdown-link-color: var(--ss-text);
    --bs-dropdown-link-hover-bg: var(--ss-row-hover);
    --bs-dropdown-link-hover-color: var(--ss-text);
    --bs-dropdown-link-active-bg: var(--ss-primary);
    --bs-dropdown-link-active-color: var(--ss-on-primary);
    --bs-dropdown-border-color: var(--ss-border);
}

/* ==========================================================================
   11. Home page (Pages/Index.cshtml): hero, features, scan steps, leagues
   ========================================================================== */
.homeHero,
.homeClosing {
    background: linear-gradient(180deg, var(--ss-primary2), var(--ss-primary));
    color: var(--ss-on-primary);
    border-bottom: 4px solid var(--ss-rule);
    border-radius: var(--ss-radius);
    margin-bottom: 28px;
}

.homeHero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 40px 40px 44px;
}

.homeHeroLogo { display: block; max-height: 88px; width: auto; margin-bottom: 14px; }

.homeKicker {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ss-accent);
    color: var(--ss-on-accent);
    font-family: var(--ss-font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.homeHero h1.homeHeroTitle {
    margin: 0 0 16px;
    color: var(--ss-on-primary);
    font-size: clamp(2.3rem, 5.2vw, 3.9rem);
    line-height: .98;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.homeHeroTitle > span {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 6px solid var(--ss-rule);
}

.homeHeroLead {
    max-width: 36em;
    margin: 0 0 24px;
    color: var(--ss-on-primary);
    font-size: 1.15rem;
    line-height: 1.5;
}

.homeCtas { display: flex; flex-wrap: wrap; gap: 12px; }

.homeBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    border-radius: var(--ss-radius-sm);
    border: 2px solid transparent;
    font-family: var(--ss-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.homeBtnPrimary { background: var(--ss-accent); color: var(--ss-on-accent); border-color: var(--ss-accent); }
.homeBtnPrimary:hover { color: var(--ss-on-accent); filter: brightness(1.06); }
.homeBtnGhost { background: transparent; color: var(--ss-on-primary); border-color: var(--ss-on-primary); }
.homeBtnGhost:hover { color: var(--ss-on-primary); background: color-mix(in srgb, var(--ss-on-primary) 12%, transparent); }
.homeBtn:focus-visible { outline: 3px solid var(--ss-on-primary); outline-offset: 3px; }

/* Scan illustration: the review step of Game Stats, drawn with the scan tokens */
.homeScanDemo {
    margin: 0;
    background: var(--ss-surface);
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: rotate(1.2deg);
}

.homeScanDemoBar {
    padding: 8px 14px;
    background: var(--ss-surface2);
    border-bottom: 1px solid var(--ss-border);
    color: var(--ss-text);
    font-size: .9rem;
}

.homeScanDemoBanner {
    margin: 12px 14px 4px;
    padding: 8px 12px;
    border-left: 4px solid var(--ss-ok);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-ok-tint);
    color: var(--ss-ok-ink);
    font-weight: 600;
}

.homeScanDemoBanner .bi { color: var(--ss-ok-ink); }

table.homeScanDemoGrid {
    width: calc(100% - 28px);
    margin: 8px 14px 10px;
    border-collapse: separate;
    border-spacing: 4px;
    font-variant-numeric: tabular-nums;
}

.homeScanDemoGrid th {
    padding: 6px 8px;
    background: var(--ss-primary);
    color: var(--ss-on-primary);
    font-family: var(--ss-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}

.homeScanDemoGrid th:first-child { text-align: left; border-top-left-radius: 6px; }
.homeScanDemoGrid th:last-child { border-top-right-radius: 6px; }

.homeScanDemoGrid td {
    padding: 4px 8px;
    border: 1px solid var(--ss-border);
    border-radius: 4px;
    text-align: center;
    color: var(--ss-text);
    background: var(--ss-surface);
}

.homeScanDemoGrid td:first-child { text-align: left; border-color: transparent; font-weight: 600; white-space: nowrap; }
.homeScanDemoGrid td.c { background: var(--ss-changed-bg); color: var(--ss-changed-text); border: 2px solid var(--ss-changed-border); font-weight: 700; }
.homeScanDemoGrid td.u { background: var(--ss-changed-bg); color: var(--ss-changed-text); border: 2px solid var(--ss-changed-border); outline: 3px dashed var(--ss-tie); outline-offset: 2px; font-weight: 700; }

.homeScanDemo figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 0 14px 14px;
    color: var(--ss-muted);
    font-size: .9rem;
}

.homeKey { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; border-radius: 3px; }
.homeKeyChanged { background: var(--ss-changed-bg); border: 2px solid var(--ss-changed-border); }
.homeKeyUnsure { border: 2px dashed var(--ss-tie); }

/* Sections */
.homeSection { margin: 0 0 36px; }

.homeSection h2.homeSectionTitle {
    margin: 0 0 18px;
    color: var(--ss-on-bg);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    text-transform: uppercase;
}

.homeSection h2.homeSectionTitle::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 6px;
    border-radius: 3px;
    background: var(--ss-rule);
}

.homeFeatures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.homeFeature,
.homeStep {
    padding: 20px 20px 16px;
    background: var(--ss-surface);
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
}

.homeFeature > .bi {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: var(--ss-radius-sm);
    background: var(--ss-primary);
    color: var(--ss-on-primary);
    font-size: 1.5rem;
    box-shadow: inset 0 -4px 0 var(--ss-rule);
}

.homeFeature h3,
.homeStep h3 {
    margin: 0 0 6px;
    color: var(--ss-text);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.homeFeature p,
.homeStep p { margin: 0; color: var(--ss-text); line-height: 1.5; }

.homeFeatureLead { grid-column: 1 / -1; border-left: 6px solid var(--ss-accent-edge); }
.homeFeatureLead > .bi { background: var(--ss-accent); color: var(--ss-on-accent); box-shadow: none; }
.homeFeatureLead p { max-width: 60em; font-size: 1.08rem; }

/* How scorebook scan works */
.homeStepList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homeStep { position: relative; padding-top: 30px; }

.homeStepNum {
    position: absolute;
    top: -16px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ss-accent);
    color: var(--ss-on-accent);
    border: 3px solid var(--ss-bg);
    font-family: var(--ss-font-display);
    font-weight: 700;
    font-size: 1.3rem;
}

.homeSteps { padding-top: 6px; }
.homeStep h3 .bi { color: var(--ss-text); margin-right: 4px; }

/* Leagues */
.homeLeaguesHead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }

.homeLeagueSearch {
    position: relative;
    margin-bottom: 18px;
    flex: 0 1 320px;
}

.homeLeagueSearch .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ss-muted); }

.homeLeagueSearch input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-input-bg);
    color: var(--ss-input-text);
}

.homeLeagues {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.homeLeague {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 16px;
    background: var(--ss-surface);
    color: var(--ss-text);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    text-decoration: none;
}

.homeLeague:hover { border-color: var(--ss-accent-edge); color: var(--ss-text); box-shadow: inset 4px 0 0 var(--ss-accent-edge); }
.homeLeague:focus-visible { outline: 3px solid var(--ss-text); outline-offset: 2px; }
.homeLeague img { max-width: 52px; max-height: 52px; object-fit: contain; flex: none; }

.homeLeagueInitial {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: var(--ss-primary);
    color: var(--ss-on-primary);
    font-family: var(--ss-font-display);
    font-weight: 700;
    font-size: 1.5rem;
}

.homeLeagueName { flex: 1; font-family: var(--ss-font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.homeLeague > .bi { color: var(--ss-muted); }
.homeLeagueEmpty { color: var(--ss-on-bg); }
.homeLeaguesMore a { color: var(--ss-on-bg); font-weight: 600; }

/* Closing band */
.homeClosing { padding: 36px 40px; text-align: center; }
.homeClosing h2 { margin: 0 0 8px; color: var(--ss-on-primary); text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.homeClosing p { max-width: 40em; margin: 0 auto 20px; color: var(--ss-on-primary); font-size: 1.1rem; }
.homeClosing .homeCtas { justify-content: center; }

@media (max-width: 991.98px) {
    .homeHero { grid-template-columns: 1fr; padding: 32px 28px 36px; }
    .homeScanDemo { transform: none; max-width: 560px; }
}

@media (max-width: 1199.98px) {
    .homeFeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .homeStepList { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 575.98px) {
    .homeHero { padding: 24px 18px 28px; gap: 24px; }
    .homeHeroLogo { max-height: 64px; }
    .homeHeroLead { font-size: 1.05rem; }
    .homeCtas .homeBtn { flex: 1 1 100%; justify-content: center; }
    .homeFeatures { grid-template-columns: 1fr; gap: 12px; }
    .homeFeature { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; }
    .homeFeature > .bi { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 1.3rem; }
    .homeFeature h3 { font-size: 1.15rem; }
    .homeClosing { padding: 28px 18px; }
    table.homeScanDemoGrid { border-spacing: 3px; }
    .homeScanDemoGrid th, .homeScanDemoGrid td { padding: 4px 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .homeScanDemo { transform: none; }
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.ssFooter {
    flex-shrink: 0;
    margin-top: 32px;
    padding: 16px 0;
    background: var(--ss-primary);
    color: var(--ss-on-primary);
    border-top: 4px solid var(--ss-rule);
    font-size: .9rem;
}

.ssFooter a {
    color: var(--ss-on-primary);
    text-decoration: underline;
}

.ssFooter .ssFooterBrand {
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ==========================================================================
   13. Small screens
   ========================================================================== */
@media (max-width: 575.98px) {
    .detailPanel {
        padding: 12px;
    }

    .tableTitle,
    .detailPanel > h3:not(#announcementContent *),
    .detailPanel > h4 {
        font-size: 1.05rem !important;
    }

    #fixed-button-panel {
        padding: 8px 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .baseballStatsButton, .btn-primary, .btn-danger, #fixed-button-panel {
        transition: none !important;
    }
}

/* DataTables Responsive hides columns with .dtr-hidden (display:none), so :first-child/:last-child can land on a hidden cell.
   Round the first and last *visible* header cells instead. */
.table > thead > tr > th:last-child.dtr-hidden,
table.dataTable > thead > tr > th:last-child.dtr-hidden { border-top-right-radius: 0; }
.table > thead > tr > th:not(.dtr-hidden):not(:has(~ th:not(.dtr-hidden))),
table.dataTable > thead > tr > th:not(.dtr-hidden):not(:has(~ th:not(.dtr-hidden))) { border-top-right-radius: 6px; }
.table > thead > tr > th:not(.dtr-hidden):not(th:not(.dtr-hidden) ~ th),
table.dataTable > thead > tr > th:not(.dtr-hidden):not(th:not(.dtr-hidden) ~ th) { border-top-left-radius: 6px; }

/* Stat grid cells filled by a scan or by voice/typed entry (scorebook-import.js adds .statsCellChanged; focus removes it). */
td input.statsCellChanged,
input.statsCellChanged {
    background-color: var(--ss-changed-bg) !important;
    color: var(--ss-changed-text) !important;
    border: 3px solid var(--ss-changed-border) !important;
}

/* League theme picker: each swatch carries data-theme="<key>", so it reads that theme's own tokens
   (the same ones the live preview uses) and can never drift from the real theme. */
.themeSwatch {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
    overflow: hidden;
    border: 1px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-sm);
    box-shadow: 0 0 0 1px var(--ss-bg);
}

.themeSwatch > span {
    display: block;
    width: 18px;
    height: 20px;
}

.themeSwatch > .themeSwatchBg { background: var(--ss-bg); }
.themeSwatch > .themeSwatchSurface { background: var(--ss-surface); }
.themeSwatch > .themeSwatchPrimary { background: var(--ss-primary); box-shadow: inset 0 -4px 0 var(--ss-rule); }
.themeSwatch > .themeSwatchAccent { background: var(--ss-accent); }