/* CFM Stats theme - loaded right after stock Bootstrap and before site.css. Everything that makes
   Bootstrap look like CFM Stats lives here: the --cfm-* tokens, Bootstrap's own variables pointed at
   them, and the few component colors Bootstrap compiles in as literals. site.css holds layout and
   feature styling only and pulls every color from the tokens below.

   A theme is a matter of redefining the token block; a light theme later would redefine it (plus
   --cfm-overlay-rgb to dark ink) under a theme attribute rather than touching site.css. */

/* ==========================================================================================
   Theme tokens - every themeable color on the site resolves through one of these.
   Keep new rules on these tokens instead of adding raw colors.
   ========================================================================================== */
:root {
    /* Base overlay - every translucent white wash/hairline/muted-text on the site is
       rgba(var(--cfm-overlay-rgb), alpha), so a light theme can flip them all to dark ink at once. */
    --cfm-overlay-rgb: 255, 255, 255;

    /* Text on the page/card surfaces (not text on colored buttons/badges, which stays #fff). */
    --cfm-text-strong: #f4f7fa;

    /* Page, body text and Bootstrap component surfaces (fed into Bootstrap's own variables below) */
    --cfm-page-bg: #18212d;
    --cfm-page-bg-rgb: 15, 26, 40;
    --cfm-body-text: #ecf1f6;
    --cfm-body-text-rgb: 236, 241, 246;
    --cfm-muted-text: #dee2e6;
    --cfm-muted-text-rgb: 168, 182, 199;
    --cfm-card-bg: #1a2a3e;
    --cfm-card-cap-bg: #23364d;
    --cfm-border: #2e425a;
    --cfm-secondary: #2e425a;
    --cfm-secondary-rgb: 46, 66, 90;
    --cfm-secondary-hover: #3a5170;
    --cfm-warning-text: #e2b25e;

    /* Surfaces */
    --cfm-surface: #1a2a3e;
    --cfm-surface-hover: #23364d;
    --cfm-input-focus-bg: #23364d;
    --cfm-navbar-bg: #0f1c2c;
    --cfm-leaguenav-bg: #0a141f;
    --cfm-leaguenav-menu-bg: #0d1826;
    --cfm-auth-card-bg: #1c2c40;
    --cfm-bracket-matchup-bg: #1c2c40;
    --cfm-bracket-matchup-hover-bg: #23364d;
    /* Featured tiles (Player of the Week) - a navy gradient a shade bluer than the cards so the
       feature reads as its own spotlight, not one more card. */
    --cfm-feature-bg-a: #173556;
    --cfm-feature-bg-b: #0c1b2d;

    /* Navigation text */
    --cfm-nav-text: #c9d2dc;
    --cfm-nav-muted: #a9b3bf;
    --cfm-menu-link: #dfe4ea;
    --cfm-menu-disabled: #687789;
    --cfm-leaguenav-brand-text: #eef1f4;

    /* Gold brand accent - --cfm-accent for fills/borders/focus, --cfm-accent-text for gold text
       and icons, --cfm-accent-bright for active/selected states. */
    --cfm-accent: #c98a2e;
    --cfm-accent-rgb: 201, 138, 46;
    --cfm-accent-text: #e8b862;
    --cfm-accent-hover: #e6b96a;
    --cfm-accent-bright: #e8a941;
    --cfm-accent-bright-rgb: 232, 169, 65;

    /* Player ratings - table highlight (>=90 / <=70) and the five RatingTier bands */
    --cfm-rating-high: #8be0a8;
    --cfm-rating-low: #8a98aa;
    --cfm-rating-elite: #6fd394;
    --cfm-rating-great: #45b06d;
    --cfm-rating-good: #e8a25a;
    --cfm-rating-below: #ec8b7f;
    --cfm-rating-poor: #cf6a62;
}


/* ==========================================================================================
   Bootstrap palette - stock Bootstrap's own variables, pointed at the CFM look. Semantic colors
   (primary/success/info/warning/danger) keep the muted blue/green/red/orange family the site has
   always used; the grays/darks are navy so nothing renders as an off-palette gray patch.
   ========================================================================================== */
:root {
    --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --bs-blue: #375a7f;
    --bs-red: #e74c3c;
    --bs-yellow: #f39c12;
    --bs-green: #00bc8c;
    --bs-cyan: #3498db;

    --bs-primary: #375a7f;
    --bs-secondary: var(--cfm-secondary);
    --bs-success: #00bc8c;
    --bs-info: #3498db;
    --bs-warning: #f39c12;
    --bs-danger: #e74c3c;
    --bs-light: #adb5bd;
    --bs-dark: #0c1622;
    --bs-primary-rgb: 55, 90, 127;
    --bs-secondary-rgb: var(--cfm-secondary-rgb);
    --bs-success-rgb: 0, 188, 140;
    --bs-info-rgb: 52, 152, 219;
    --bs-warning-rgb: 243, 156, 18;
    --bs-danger-rgb: 231, 76, 60;
    --bs-light-rgb: 173, 181, 189;
    --bs-dark-rgb: 12, 22, 34;

    --bs-focus-ring-color: rgba(55, 90, 127, 0.25);
    --bs-form-valid-color: #00bc8c;
    --bs-form-valid-border-color: #00bc8c;
    --bs-form-invalid-color: #e74c3c;
    --bs-form-invalid-border-color: #e74c3c;
}

/* Body-level variables - on [data-bs-theme="dark"] (set on <body>) because that's where Bootstrap's
   own dark mode redefines them; a :root-only value would be shadowed there. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--cfm-page-bg);
    --bs-body-bg-rgb: var(--cfm-page-bg-rgb);
    --bs-body-color: var(--cfm-body-text);
    --bs-body-color-rgb: var(--cfm-body-text-rgb);
    --bs-emphasis-color: var(--cfm-text-strong);
    --bs-secondary-color: var(--cfm-muted-text);
    --bs-secondary-color-rgb: var(--cfm-muted-text-rgb);
    --bs-tertiary-color: rgba(var(--cfm-body-text-rgb), 0.5);
    --bs-secondary-bg: var(--cfm-card-bg);
    --bs-tertiary-bg: var(--cfm-surface);
    --bs-border-color: var(--cfm-border);

    --bs-link-color: #879cb2;
    --bs-link-color-rgb: 135, 156, 178;
    --bs-link-hover-color: #9fb0c1;
    --bs-link-hover-color-rgb: 159, 176, 193;

    /* Soft tints (alerts, accordion open state, subtle badges) for each semantic color */
    --bs-primary-text-emphasis: #879cb2;
    --bs-success-text-emphasis: #66d7ba;
    --bs-info-text-emphasis: #85c1e9;
    --bs-warning-text-emphasis: #f8c471;
    --bs-danger-text-emphasis: #f1948a;
    --bs-primary-bg-subtle: #0b1219;
    --bs-success-bg-subtle: #00261c;
    --bs-info-bg-subtle: #0a1e2c;
    --bs-warning-bg-subtle: #311f04;
    --bs-danger-bg-subtle: #2e0f0c;
    --bs-primary-border-subtle: #21364c;
    --bs-success-border-subtle: #007154;
    --bs-info-border-subtle: #1f5b83;
    --bs-warning-border-subtle: #925e0b;
    --bs-danger-border-subtle: #8b2e24;
    --bs-light-border-subtle: var(--cfm-border);
    --bs-dark-border-subtle: var(--cfm-border);

    --bs-form-valid-color: #66d7ba;
    --bs-form-valid-border-color: #66d7ba;
    --bs-form-invalid-color: #f1948a;
    --bs-form-invalid-border-color: #f1948a;
}


/* ==========================================================================================
   Type scale - headings run a step larger than stock Bootstrap (3 / 2.5 / 2rem at desktop).
   ========================================================================================== */
h1, .h1 { font-size: calc(1.425rem + 2.1vw); }
h2, .h2 { font-size: calc(1.375rem + 1.5vw); }
h3, .h3 { font-size: calc(1.325rem + 0.9vw); }
.fs-1 { font-size: calc(1.425rem + 2.1vw) !important; }
.fs-2 { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-3 { font-size: calc(1.325rem + 0.9vw) !important; }

@media (min-width: 1200px) {
    h1, .h1 { font-size: 3rem; }
    h2, .h2 { font-size: 2.5rem; }
    h3, .h3 { font-size: 2rem; }
    .fs-1 { font-size: 3rem !important; }
    .fs-2 { font-size: 2.5rem !important; }
    .fs-3 { font-size: 2rem !important; }
}


/* ==========================================================================================
   Components - Bootstrap compiles these colors into each component class as literals, so the
   :root palette above doesn't reach them; each one is restated here on the theme tokens.
   ========================================================================================== */

/* Surfaces */
.card {
    --bs-card-bg: var(--cfm-card-bg);
    --bs-card-cap-bg: var(--cfm-card-cap-bg);
}

.modal {
    --bs-modal-bg: var(--cfm-card-bg);
    --bs-modal-border-color: var(--cfm-border);
    --bs-modal-header-border-color: var(--cfm-border);
    --bs-modal-footer-border-color: var(--cfm-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--cfm-card-bg);
    --bs-dropdown-border-color: var(--cfm-border);
    --bs-dropdown-divider-bg: var(--cfm-border);
    --bs-dropdown-link-color: var(--cfm-body-text);
    --bs-dropdown-link-hover-color: var(--cfm-text-strong);
    --bs-dropdown-link-hover-bg: var(--bs-primary);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-header-color: var(--cfm-muted-text);
}

.list-group {
    --bs-list-group-color: var(--cfm-body-text);
    --bs-list-group-bg: var(--cfm-card-bg);
    --bs-list-group-border-color: var(--cfm-border);
    --bs-list-group-action-hover-color: var(--cfm-text-strong);
    --bs-list-group-action-hover-bg: var(--cfm-card-cap-bg);
    --bs-list-group-action-active-bg: var(--cfm-page-bg);
    --bs-list-group-disabled-bg: var(--cfm-card-bg);
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

.tooltip {
    --bs-tooltip-color: var(--bs-emphasis-color);
    --bs-tooltip-bg: var(--cfm-card-cap-bg);
}

.progress, .progress-stacked {
    --bs-progress-bg: var(--cfm-border);
    --bs-progress-bar-bg: var(--bs-primary);
}

/* Tables - cell text follows the body color (stock Bootstrap uses the brighter emphasis color) */
.table {
    --bs-table-color: var(--cfm-body-text);
    --bs-table-striped-color: var(--cfm-body-text);
    --bs-table-active-color: var(--cfm-body-text);
    --bs-table-hover-color: var(--cfm-body-text);
    --bs-table-border-color: var(--cfm-border);
}

.table-warning {
    --bs-table-color: #fff;
    --bs-table-bg: #f39c12;
    --bs-table-border-color: #f5b041;
    --bs-table-striped-bg: #f4a11e;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #f4a62a;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #f4a324;
    --bs-table-hover-color: #fff;
}

/* Navs - tab links read as white text with roomier padding rather than link-blue */
.nav {
    --bs-nav-link-padding-x: 2rem;
    --bs-nav-link-color: var(--cfm-text-strong);
    --bs-nav-link-hover-color: var(--cfm-text-strong);
    --bs-nav-link-disabled-color: var(--cfm-menu-disabled);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--cfm-border);
    --bs-nav-tabs-link-hover-border-color: var(--cfm-border) var(--cfm-border) var(--cfm-border);
    --bs-nav-tabs-link-active-color: var(--cfm-text-strong);
    --bs-nav-tabs-link-active-bg: var(--cfm-page-bg);
    --bs-nav-tabs-link-active-border-color: var(--cfm-border) var(--cfm-border) var(--cfm-page-bg);
}

/* Pagination - navy pages with the gold active page, matching the League Nav's gold
   active-tab indicator. */
.pagination {
    --bs-pagination-color: var(--cfm-body-text);
    --bs-pagination-bg: var(--cfm-secondary);
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--cfm-text-strong);
    --bs-pagination-hover-bg: var(--cfm-secondary-hover);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--cfm-text-strong);
    --bs-pagination-focus-bg: var(--cfm-secondary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--cfm-accent-rgb), 0.35);
    --bs-pagination-active-color: var(--cfm-page-bg);
    --bs-pagination-active-bg: var(--cfm-accent-bright);
    --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-color: var(--cfm-menu-disabled);
    --bs-pagination-disabled-bg: var(--cfm-card-bg);
    --bs-pagination-disabled-border-color: transparent;
}

.page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.pagination a:hover {
    text-decoration: none;
}

/* Alerts - solid fills with white text */
.alert {
    color: #fff;
    border: none;
}

.alert-primary { background-color: var(--bs-primary); }
.alert-success { background-color: var(--bs-success); }
.alert-info { background-color: var(--bs-info); }
.alert-warning { background-color: var(--bs-warning); }
.alert-danger { background-color: var(--bs-danger); }

.alert a, .alert .alert-link {
    color: #fff;
    text-decoration: underline;
}

/* Badges/fills on bright backgrounds take white text */
.text-bg-info, .text-bg-warning, .text-bg-light {
    color: #fff !important;
}

/* --bs-secondary is the navy button fill, too dark for text - .text-secondary means muted text */
.text-secondary {
    color: var(--bs-secondary-color) !important;
}

/* Bootstrap's warning orange used as text (OVR tiers, callouts) is softened to the gold family so it
   doesn't fight the accent. Badges/backgrounds keep the real warning color. */
.text-warning {
    color: var(--cfm-warning-text) !important;
}

/* Accordion - chevron in the muted primary tint rather than stock bright blue */
.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

[data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23879cb2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23879cb2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* Navbar - roomier default padding (.site-navbar sets its own tighter values) */
.navbar {
    --bs-navbar-padding-y: 1rem;
}

.navbar-dark, .navbar[data-bs-theme="dark"] {
    --bs-navbar-color: rgba(255, 255, 255, 0.6);
    --bs-navbar-hover-color: #fff;
}

/* Forms - inputs sit on the card surface with a visible hairline border (the stock dark-mode
   border nearly vanishes on navy); focus picks up the gold accent. */
.form-control,
.form-select {
    background-color: var(--cfm-surface);
    border: 1px solid rgba(var(--cfm-overlay-rgb), 0.25);
    color: var(--cfm-text-strong);
}

.form-select:hover {
    border-color: rgba(var(--cfm-overlay-rgb), 0.45);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--cfm-input-focus-bg);
    border-color: var(--cfm-accent);
    color: var(--cfm-text-strong);
    box-shadow: 0 0 0 0.2rem rgba(var(--cfm-accent-rgb), 0.35);
}

.input-group-text {
    color: var(--cfm-muted-text);
    background-color: var(--cfm-card-cap-bg);
    border-color: rgba(var(--cfm-overlay-rgb), 0.25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cfm-page-bg), 0 0 0 0.25rem var(--cfm-muted-text);
}


/* ==========================================================================================
   Buttons - only the variants the site uses. Solid fills darken on hover; outlines fill in.
   ========================================================================================== */
.btn-primary {
    --bs-btn-bg: #375a7f;
    --bs-btn-border-color: #375a7f;
    --bs-btn-hover-bg: #2f4d6c;
    --bs-btn-hover-border-color: #2c4866;
    --bs-btn-focus-shadow-rgb: 85, 115, 146;
    --bs-btn-active-bg: #2c4866;
    --bs-btn-active-border-color: #29445f;
    --bs-btn-disabled-bg: #375a7f;
    --bs-btn-disabled-border-color: #375a7f;
}

.btn-secondary {
    --bs-btn-color: var(--cfm-text-strong);
    --bs-btn-bg: var(--cfm-secondary);
    --bs-btn-border-color: var(--cfm-secondary);
    --bs-btn-hover-color: var(--cfm-text-strong);
    --bs-btn-hover-bg: var(--cfm-secondary-hover);
    --bs-btn-hover-border-color: var(--cfm-secondary-hover);
    --bs-btn-active-color: var(--cfm-text-strong);
    --bs-btn-active-bg: var(--cfm-secondary-hover);
    --bs-btn-active-border-color: var(--cfm-secondary-hover);
    --bs-btn-disabled-bg: var(--cfm-secondary);
    --bs-btn-disabled-border-color: var(--cfm-secondary);
}

.btn-success {
    --bs-btn-bg: #00bc8c;
    --bs-btn-border-color: #00bc8c;
    --bs-btn-hover-bg: #00a077;
    --bs-btn-hover-border-color: #009670;
    --bs-btn-focus-shadow-rgb: 38, 198, 157;
    --bs-btn-active-bg: #009670;
    --bs-btn-active-border-color: #008d69;
    --bs-btn-disabled-bg: #00bc8c;
    --bs-btn-disabled-border-color: #00bc8c;
}

.btn-link {
    --bs-btn-disabled-color: var(--cfm-menu-disabled);
}

/* The primary blue as an outline would nearly disappear on navy - lightened so unselected filter
   buttons (e.g. Player Ratings Development) stay readable. */
.btn-outline-primary {
    --bs-btn-color: #a9c1dc;
    --bs-btn-border-color: #5a7899;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #375a7f;
    --bs-btn-hover-border-color: #375a7f;
    --bs-btn-focus-shadow-rgb: 55, 90, 127;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #375a7f;
    --bs-btn-active-border-color: #375a7f;
    --bs-btn-disabled-color: #5a7899;
    --bs-btn-disabled-border-color: #5a7899;
}

.btn-outline-secondary {
    --bs-btn-color: var(--cfm-muted-text);
    --bs-btn-border-color: var(--cfm-secondary-hover);
    --bs-btn-hover-color: var(--cfm-text-strong);
    --bs-btn-hover-bg: var(--cfm-secondary-hover);
    --bs-btn-hover-border-color: var(--cfm-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--cfm-secondary-rgb);
    --bs-btn-active-color: var(--cfm-text-strong);
    --bs-btn-active-bg: var(--cfm-secondary-hover);
    --bs-btn-active-border-color: var(--cfm-secondary-hover);
    --bs-btn-disabled-color: var(--cfm-menu-disabled);
    --bs-btn-disabled-border-color: var(--cfm-secondary);
}

.btn-outline-success {
    --bs-btn-color: #00bc8c;
    --bs-btn-border-color: #00bc8c;
    --bs-btn-hover-bg: #00bc8c;
    --bs-btn-hover-border-color: #00bc8c;
    --bs-btn-focus-shadow-rgb: 0, 188, 140;
    --bs-btn-active-bg: #00bc8c;
    --bs-btn-active-border-color: #00bc8c;
    --bs-btn-disabled-color: #00bc8c;
    --bs-btn-disabled-border-color: #00bc8c;
}

.btn-outline-info {
    --bs-btn-color: #3498db;
    --bs-btn-border-color: #3498db;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3498db;
    --bs-btn-hover-border-color: #3498db;
    --bs-btn-focus-shadow-rgb: 52, 152, 219;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3498db;
    --bs-btn-active-border-color: #3498db;
    --bs-btn-disabled-color: #3498db;
    --bs-btn-disabled-border-color: #3498db;
}

.btn-outline-warning {
    --bs-btn-color: #f39c12;
    --bs-btn-border-color: #f39c12;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f39c12;
    --bs-btn-hover-border-color: #f39c12;
    --bs-btn-focus-shadow-rgb: 243, 156, 18;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f39c12;
    --bs-btn-active-border-color: #f39c12;
    --bs-btn-disabled-color: #f39c12;
    --bs-btn-disabled-border-color: #f39c12;
}

.btn-outline-danger {
    --bs-btn-color: #e74c3c;
    --bs-btn-border-color: #e74c3c;
    --bs-btn-hover-bg: #e74c3c;
    --bs-btn-hover-border-color: #e74c3c;
    --bs-btn-focus-shadow-rgb: 231, 76, 60;
    --bs-btn-active-bg: #e74c3c;
    --bs-btn-active-border-color: #e74c3c;
    --bs-btn-disabled-color: #e74c3c;
    --bs-btn-disabled-border-color: #e74c3c;
}

.btn-outline-light {
    --bs-btn-color: #adb5bd;
    --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #adb5bd;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: 173, 181, 189;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #adb5bd;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-border-color: #adb5bd;
}