html {
  font-size: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Floating "back" button on detail pages (Team Profile, Player Profile) reached by drilling in
   from many different origins - anchored bottom-right so it stays reachable while scrolling a
   long profile page, out of the way of the page's own content/header. */
.back-button-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #16283f;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, background 0.15s ease;
}

.back-button-fab:hover,
.back-button-fab:focus {
    background: #1d3550;
    color: #fff;
    transform: translateY(-2px);
}


/* Data table row hover - a subtle gold-tinted overlay (the site's existing accent color, used
   for focus rings/playoff seeds/brand accent elsewhere) rather than the previous solid khaki
   fill, which read as a jarring, off-theme flash and flipped text to dark gray mid-row. */
.table-hover {
    --bs-table-hover-bg: rgba(201, 138, 46, 0.16);
    --bs-table-hover-color: #fff;
}

html {
  position: relative;
  min-height: 100%;
}

/*body {
  margin-bottom: 60px;
}*/

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* Footer Overrides */
.footer {
    bottom: 0;
    position: static;
    white-space: nowrap;
    width: 100%;
}

/* Filter controls (page-level dropdowns/selects above tables) - the theme's default
   form-select/dropdown-toggle borders are nearly invisible against the dark background,
   so give every filter control on the site a consistent, visible treatment here rather
   than restyling per-page. */
.form-select,
.filter-dropdown-toggle {
    background-color: #16283f;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.form-select:hover,
.filter-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.45);
}

.form-select:focus,
.filter-dropdown-toggle:focus {
    border-color: #c98a2e;
    box-shadow: 0 0 0 0.2rem rgba(201, 138, 46, 0.35);
}

.filter-dropdown-toggle {
    min-width: 9rem;
}

.filter-dropdown-toggle::after {
    margin-left: auto;
}

/* Sortable table headers */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-th:hover {
    text-decoration: underline;
}

.sortable-th.sort-asc::after {
    content: " \25B2";
}

.sortable-th.sort-desc::after {
    content: " \25BC";
}

/* Team Schedule result column - a bolder pill+icon treatment than a plain color badge. */
.game-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.game-result-badge-win {
    background-color: rgba(61, 214, 140, 0.15);
    color: #3dd68c;
}

.game-result-badge-loss {
    background-color: rgba(224, 85, 79, 0.15);
    color: #e0554f;
}

.game-result-badge-tie {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Team Rankings trend column - up/down/same movement vs. previous rank. */
.rank-movement {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
}

.rank-movement-up {
    color: #3dd68c;
}

.rank-movement-down {
    color: #e0554f;
}

.rank-movement-same,
.rank-movement-none {
    color: rgba(255, 255, 255, 0.4);
}

/* Data table column separators - stat-heavy tables (Player Stats, Player Ratings, Team Stats)
   pack a lot of numeric columns edge-to-edge, which is hard to scan on narrow/mobile widths
   without a visual break between them. Applies site-wide instead of per-page. */
.table-responsive .table > :not(caption) > * > td,
.table-responsive .table > :not(caption) > * > th {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.table-responsive .table > :not(caption) > * > td:last-child,
.table-responsive .table > :not(caption) > * > th:last-child {
    border-right: 0;
}

/* Data table header/stripe contrast - the theme's default dark-mode table stripes/header are
   barely visible against the page background, making dense stat tables hard to scan. Applies
   site-wide instead of per-page, same as the column separators above. */
.table-responsive .table > thead > tr > th {
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.table-responsive .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.045);
}

/* Data loading fade transition - the standard site-wide treatment for swapping table data
   after a filter/sort change (Team Stats, Player Stats, Player Ratings, Team Schedule). */
.table-responsive .table,
table.table {
    transition: opacity 150ms ease;
}

/* Playoff seed number (League Standings) - bigger/bolder than a plain badge so the seed
   order stands out at a glance. */
.playoff-seed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: #c98a2e;
    color: #16283f;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Stat type / position "cyclable select" - a dropdown flanked by prev/next arrows, used
   wherever a button-group filter used to break width on small devices. */
.stat-type-cycler {
    width: auto;
}

.stat-type-cycler .form-select {
    min-width: 8rem;
}

/* Filter row - visually distinct from the label row above it so it doesn't read as another
   header, and from the data rows below so it doesn't read as a player. */
.filter-row td {
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.filter-row input {
    min-width: 3.5rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

/* Global navbar - kept compact, minimal vertical footprint */
.site-navbar {
    background: #0f1c2c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    --bs-navbar-padding-y: 0.35rem;
    --bs-navbar-brand-padding-y: 0;
    --bs-nav-link-padding-y: 0.3rem;
}

.site-navbar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.75rem;
    width: 100%;
}

.site-navbar-center {
    justify-self: center;
}

.site-navbar-end {
    justify-self: end;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: #fff !important;
}

@media (min-width: 576px) {
    .site-brand {
        font-size: 1.6rem;
    }
}

.site-brand-accent {
    color: #c98a2e;
}

.site-brand-logo {
    border-radius: 6px;
}

.site-navbar .nav-link {
    color: #cfd9e4 !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #fff !important;
}

.site-navbar-leagues {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem !important;
    border-radius: 999px;
}

.site-navbar-leagues:hover,
.site-navbar-leagues:focus {
    background: rgba(255, 255, 255, 0.08);
}

.site-navbar-leagues .bi {
    font-size: 1.05rem;
    color: #c98a2e;
}

/* User account dropdown */
.site-navbar-user {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.55rem !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.site-navbar-user:hover,
.site-navbar-user:focus {
    background: rgba(255, 255, 255, 0.12);
}

.site-navbar-user::after {
    margin-left: 0.2rem;
}

.site-navbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.site-navbar-username {
    color: #fff !important;
    font-weight: 600;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-navbar-user-menu {
    position: absolute !important;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 14rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
}

.site-navbar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.site-navbar-user-menu .dropdown-item i {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    color: #c98a2e;
}

.site-navbar-user-menu .dropdown-item:hover,
.site-navbar-user-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.site-navbar-btn {
    font-weight: 600;
}

.site-navbar-end .navbar-nav {
    align-items: center;
    gap: 0.5rem;
}

/* League navigation - single collapsed bar (menu trigger showing the current page + league name),
   expanding into a full League/Teams/Players menu on tap. One row of real estate by default on
   every screen size; the full option list only costs space while actually open. */
.league-nav {
    background: #0a141f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.league-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.9rem;
}

.league-nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.3rem 0.4rem;
    margin-left: -0.4rem;
}

.league-nav-toggle .bi-list {
    font-size: 1.35rem;
    color: #e8a941;
}

.league-nav-toggle-chevron {
    font-size: 0.8rem;
    color: #8b95a3;
    transition: transform 0.15s ease;
}

.league-nav-toggle[aria-expanded="true"] .league-nav-toggle-chevron {
    transform: rotate(180deg);
}

.league-nav-brand {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: #e2e0e0;
    background: rgba(232, 169, 65, 0.12);
    border: 1px solid rgba(232, 169, 65, 0.35);
    border-radius: 6px;
    padding: 0.3rem 0.85rem;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .league-nav-brand {
        font-size: 0.7rem;
        padding: 0.25rem 0.65rem;
    }
}

.league-nav-menu {
    background: #0d1826;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.league-nav-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0.9rem 1.25rem;
}

@media (min-width: 576px) {
    .league-nav-menu-inner {
        flex-direction: row;
        gap: 2rem;
    }
}

.league-menu-group {
    flex: 1 1 0;
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
}

.league-menu-group.active {
    border-left-color: #e8a941;
}

.league-menu-group-title {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b95a3;
    margin-bottom: 0.5rem;
}

.league-menu-group.active .league-menu-group-title {
    color: #e8a941;
}

.league-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.league-menu-list li {
    position: relative;
    padding-left: 0.85rem;
}

.league-menu-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 50%;
    width: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-left-radius: 4px;
}

.league-menu-list li:last-child::before {
    bottom: auto;
    height: 0.7rem;
}

.league-menu-link {
    display: block;
    color: #e4e9ef;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 0.4rem 0;
}

.league-menu-link:hover,
.league-menu-link:focus {
    color: #fff;
}

.league-menu-link.active {
    color: #e8a941;
    font-weight: 700;
}

.league-menu-link.disabled {
    color: #5b6472;
    cursor: not-allowed;
}

/* Leagues grid - "My Leagues" and "Leagues" card sections */
.league-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    color: inherit;
    height: 100%;
}

a.league-card:hover,
a.league-card:focus {
    transform: translateY(-2px);
    border-color: #c98a2e;
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
    color: inherit;
}

.league-card-mine {
    border-top: 3px solid #c98a2e;    
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.6);
}

.league-card-mine .card-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.league-name-display {
    color: inherit;
    text-decoration: none;
}

.league-name-display:hover,
.league-name-display:focus {
    color: #e8a941;
}

.league-edit-toggle {
    color: rgba(255, 255, 255, 0.45);
    line-height: 0;
}

.league-edit-toggle:hover {
    color: #c98a2e;
}

.league-card-mine .copy-group {
    margin-top: 0.75rem;
}

.league-card-mine .copy-value {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    cursor: pointer;
}

.league-card-mine .copy-button-success {
    color: #4ade80;
    font-weight: 600;
    border-color: #4ade80;
}

/* League search - filter box on the Leagues index page */
.league-search-group .league-search-clear {
    border-left: 0;
    color: #adb5bd;
}

.league-search-group .league-search-clear:hover,
.league-search-group .league-search-clear:focus {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.league-card-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.league-card-context span {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #cfd9e4;
}

.league-card-season {
    color: #c98a2e !important;
}

/* Team Schedule - the whole game card is a link (to Box Score if played, Matchup if not), same
   hover-lift treatment as .league-card so the two "clickable card" patterns on the site match. */
.schedule-game-card {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    color: inherit;
}

.schedule-game-card:hover,
.schedule-game-card:focus,
.schedule-game-card:focus-within {
    transform: translateY(-2px);
    border-color: #c98a2e;
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
    color: inherit;
}

.schedule-game-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.schedule-game-team {
    min-width: 0;
}

.schedule-score {
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.schedule-score-winner {
    color: #c98a2e;
}

.schedule-score-loser {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.schedule-score-sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0.15rem;
}

.schedule-team-logo {
    flex-shrink: 0;
}

.schedule-team-city {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;    
    color: rgba(255, 255, 255, 0.5);
}

.schedule-team-name {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}

.schedule-team-record {
    display: inline-block;
    margin: 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
}

/* Below the sm breakpoint, drop the score's grid column entirely (it was
   stealing width from both side columns on every row, forcing long
   nicknames like "Commanders" to wrap even after they were moved off the
   score's row) and float the score over the top instead, so each side gets
   the full half-card width for its logo + name/record/info. */
@media (max-width: 575.98px) {
    .schedule-game-grid {
        position: relative;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 56px auto;
        grid-template-areas: "logoA logoB" "infoA infoB";
        row-gap: 0.35rem;
    }

    .schedule-game-team {
        display: contents;
    }

    .schedule-team-logo-away {
        grid-area: logoA;
        justify-self: start;
    }

    .schedule-team-logo-home {
        grid-area: logoB;
        justify-self: end;
    }

    .schedule-team-info-away {
        grid-area: infoA;
    }

    .schedule-team-info-home {
        grid-area: infoB;
    }

    .schedule-game-score {
        position: absolute;
        top: 28px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.schedule-team-user {
    font-weight: 600;
    color: #c98a2e;
}

.schedule-team-user.is-cpu {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    font-style: italic;
}

/* League Home placeholder cards */
.home-feature-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-feature-card .card-header .bi {
    color: #c98a2e;
}

.home-feature-card .card-header .badge {
    font-weight: 600;
    font-size: 0.65rem;
}

/* Game of the Week now renders as a .schedule-game-card (same gradient/hover-lift treatment as
   Team Schedule's cards) instead of its own boxed .card-header - the "Game of the Week" label
   and change-toggle are small overlays on top of that card instead of a separate header bar.
   The card is fully clickable via a stretched-link over the matchup grid, so both overlays need
   to sit above that. */
.gotw-card {
    position: relative;
}

.gotw-card .schedule-game-grid {
    cursor: pointer;
}

.gotw-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #c98a2e;
}

.gotw-change-toggle {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
}

.gotw-change-toggle:hover {
    color: #fff;
}

.gotw-picker-form {
    position: relative;
    z-index: 2;
}

/* The picker <select> sizes to its widest option (long matchup strings like "Commanders @
   Buccaneers") - w-auto let that intrinsic width force the form wider than the card on narrow
   viewports, bleeding past the page edge. Letting it shrink inside the flex row instead keeps
   it contained. */
.gotw-picker-form select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Game of the Week - shares the .schedule-team-* look (logo/city/name/user/OVR) from Team
   Schedule so the featured matchup on League Home reads as the same component, not a
   one-off. .gotw-at is just the "@" separator on narrow widths where teams stack. */
.gotw-at {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
}

/* Player of the Week mockup */
.potw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
    .potw-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.potw-tile {
    background: #16283f;
    padding: 0.85rem 1rem 1rem;
}

.potw-tile-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.65rem;
}

.potw-conf-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.potw-tile-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.potw-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.potw-info {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.85rem;
}

.potw-pos {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
}

.potw-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2;
}

.potw-stats {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    line-height: 1.5;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.potw-team-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Season Awards winner - the #1 tile in each ranked column gets the site's gold brand accent
   (same rgb(201, 138, 46) used for focus rings/playoff seeds elsewhere) so it reads as the actual
   award rather than just the first row of a list; runner-up tiles stay the plain potw-tile look. */
.award-tile-winner {
    background: linear-gradient(135deg, rgba(201, 138, 46, 0.22), #16283f 55%);
    border-left: 3px solid #c98a2e;
}

.award-tile-winner .potw-tile-label {
    color: #e0ac52;
}

.award-tile-winner .potw-name {
    color: #ffd98a;
}

.award-tile-winner .potw-photo {
    width: 68px;
    height: 68px;
    border: 2px solid #c98a2e;
}

/* Weekly Leaders */
.stat-icon {
    display: inline-flex;
    vertical-align: -0.3em;
    color: #c98a2e;
}

.stat-icon svg {
    width: 1.15em;
    height: 1.15em;
}

.weekly-leaders-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.5rem;
}

.weekly-leaders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.weekly-leaders-table th {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    padding: 0 0 0.35rem;
}

.weekly-leaders-table th:first-child,
.weekly-leaders-table td:first-child {
    text-align: left;
}

.weekly-leaders-table td {
    padding: 0.35rem 0;
    vertical-align: middle;
    text-align: right;
}

.weekly-leaders-table tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Team Stats table */
.team-stats-name-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-stats-logo {
    flex-shrink: 0;
}

.weekly-leaders-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.weekly-leaders-player img {
    flex-shrink: 0;
}

.weekly-leaders-player-info {
    min-width: 0;
    overflow: hidden;
}

.weekly-leaders-team {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.weekly-leaders-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-leaders-value {
    color: #c98a2e;
    font-weight: 700;
}

.weekly-leaders-card .card-body {
    padding-top: 0.75rem;
}

/* Team Schedule */
.team-schedule-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-schedule-team-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    min-width: 10rem;
    justify-content: center;
}

.team-schedule-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 8.5rem;
    padding: 0.375rem 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.team-schedule-action-btn:hover,
.team-schedule-action-btn:focus {
    transform: translateY(-1px);
}

.team-schedule-action-btn-boxscore {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
}

.team-schedule-action-btn-boxscore:hover,
.team-schedule-action-btn-boxscore:focus {
    filter: brightness(1.1);
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.45);
}

.team-schedule-action-btn-matchup {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.team-schedule-action-btn-matchup:hover,
.team-schedule-action-btn-matchup:focus {
    background: rgba(148, 163, 184, 0.2);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
}

/* Player rating tables (Player Ratings, and anywhere else numeric 0-99 ratings are shown) -
   gives elite ratings a pop and weak ones a duller, muted treatment, ported from the WebForms
   app's highRating/lowRating thresholds (>=90 / <=70) but re-themed for this dark UI. */
.rating-high {
    color: #4ade80 !important;
    font-weight: 700;
}

.rating-low {
    color: #64748b !important;
}

/* Subtle practice squad / injury indicators used next to a player's name in list/table contexts
   (Player Ratings grid, roster lists) - deliberately understated, unlike the prominent injury
   banner on the Player Profile page below. */
.player-status-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}

.player-status-badge-ps {
    background-color: rgba(255, 193, 7, 0.18);
    color: #ffca2c;
}

/* Two distinct injury states, both subtle: on IR (red) vs. injured but still on the active
   roster (amber) - see InjuryStatus for how these differ. */
.player-status-icon-ir {
    font-size: 0.7rem;
    color: #e0637a;
    opacity: 0.85;
    vertical-align: middle;
}

.player-status-icon-injured {
    font-size: 0.7rem;
    color: #d9a94f;
    opacity: 0.85;
    vertical-align: middle;
}

/* Prominent injury callout on the Player Profile page - contrasts with the subtle in-table
   indicators above, matching how the legacy WebForms app made an active injury hard to miss.
   Amber by default (injured but still on the active roster); the -ir modifier switches to red
   for the more severe on-IR state - same two-state split as .player-status-icon-ir/-injured. */
.player-injury-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(217, 169, 79, 0.12);
    border: 1px solid rgba(217, 169, 79, 0.4);
    border-radius: 0.4rem;
    padding: 0.4rem 0.75rem;
}

.player-injury-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #d9a94f;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
}

.player-injury-banner-ir {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.4);
}

.player-injury-banner-ir .player-injury-banner-tag {
    background-color: #dc3545;
    color: #fff;
}

.player-injury-banner-label {
    font-weight: 600;
    color: #e8c88a;
}

.player-injury-banner-ir .player-injury-banner-label {
    color: #f1a3ad;
}

.player-link {
    color: #c98a2e;
    text-decoration: none;
}

.player-link:hover,
.player-link:focus {
    color: #e0a24a;
    text-decoration: underline;
}

.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 0.75rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: #101d2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.auth-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(201, 138, 46, 0.15);
    color: #c98a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
}

.auth-card-title {
    text-align: center;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.auth-card-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.auth-field-icon {
    background: rgba(255, 255, 255, 0.04);
    border-right: none;
    color: rgba(255, 255, 255, 0.55);
}

.auth-field-icon + .form-control {
    border-left: none;
}

.auth-field-icon + .form-control:focus {
    border-left: none;
    box-shadow: none;
}

.auth-password-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-left: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.auth-card .form-control:focus {
    border-color: #c98a2e;
    box-shadow: 0 0 0 0.2rem rgba(201, 138, 46, 0.2);
}

.auth-card .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.auth-card .form-group.mb-3 {
    margin-bottom: 1.35rem !important;
}

.auth-submit {
    width: 100%;
}

.auth-card-footer {
    text-align: center;
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.auth-card-footer a {
    color: #c98a2e;
}

.auth-forgot-link {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* Teams Home (division grid of team cards) */
.team-home-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.team-home-card:hover {
    border-color: rgba(201, 138, 46, 0.6);
    transform: translateY(-2px);
}

/* Team Profile page */
.team-profile-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    height: 100%;
}

/* Player Profile page - Season/Games/Ratings tabs use minimal labels instead of card wrappers */
.stat-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}

.rating-minimal-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rating-minimal-row {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
}

.team-profile-portrait {
    width: 28px;
    height: 28px;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.team-profile-portrait-sm {
    width: 24px;
    height: 24px;
}

/* Depth chart position-group cards (built client-side by TeamDepthChartController.js) */
.depth-chart-card .card-header {
    font-weight: 700;
}

.depth-chart-card .table {
    margin-bottom: 0;
}

.depth-chart-card .table td,
.depth-chart-card .table th {
    white-space: nowrap;
}

/* Sitewide announcement banner - driven entirely by SiteWide:Message in appsettings.json, so it
   can be turned on/off by editing the deployed config file directly (reloadOnChange picks it up
   without a restart), no code change or deploy needed. Empty/missing message renders nothing. */
.sitewide-alert {
    text-align: center;
    font-weight: 600;
}

/* Home page Discord callout (_DiscordCallout.cshtml) - deliberately narrower than the page so it
   doesn't stretch a two-line alert + two buttons across the full container width. */
.home-callout {
    max-width: 420px;
}

.home-callout-alert {
    font-size: 0.9rem;
}

.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #5865f2;
    border: 1px solid #5865f2;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.discord-btn:hover {
    background-color: #4752c4;
    border-color: #4752c4;
    color: #ffffff;
}

.discord-btn:active {
    background-color: #3949a8;
    border-color: #3949a8;
}

.discord-btn-outline {
    background-color: transparent;
    color: #a3aef7;
}

.discord-btn-outline:hover {
    background-color: rgba(88, 101, 242, 0.15);
    color: #ffffff;
}