/* rm.light.css - RotoMonster-only overrides.
   Loaded AFTER bm.light.css. Nothing shared belongs in here: bm.light.css
   is a verbatim copy of the RotoMonsterUI stylesheet and gets refreshed by
   overwriting it, so any edit made there is lost on the next refresh. */

/* ---- RotoMonster overrides ------------------------------------
   The shared component styles are sized for Basketball Monster's
   roomier layout. These pages are deliberately dense, so scale
   the player rows back down. */

.card .display-player-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.card .display-player-team,
.card .display-player-pos {
    font-size: 0.7rem;
}

/* Injury and news lists read as rows, not a grid. */
.card .table-sm td {
    padding: 0.3rem 0.5rem;
    border-color: #eef0f3;
}

.card .table-sm tbody tr:hover td {
    background: #f7f8fa;
}

/* Status pills were fighting the row for attention. */
.card .badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Player names are links but shouldn't look like body-text links
   in a list — the whole row is already scannable. */
.card .display-player-name {
    text-decoration: none;
    color: #1a4d8f;
}

.card .display-player-name:hover {
    text-decoration: underline;
}

/* Ownership cells are empty when nobody's logged in, which leaves a
   reserved column doing nothing. Collapse it rather than reserve it. */
.card .table-sm td:empty {
    padding: 0;
    border: none;
}

/* Status pills sit closer to the name they belong to. */
.card .display-player + .badge,
.card .badge {
    vertical-align: middle;
}

/* ---- Adopt the Monster control styling ------------------------
   No markup changes — RotoMonster's existing Bootstrap buttons and
   inputs get the same treatment as the library's modern-filter
   controls, so the two sites match without swapping components. */

.btn {
    padding: 0.4rem 0.85rem;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: transparent;
    color: #fff;
}

.btn-primary:hover {
    background: var(--brand-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--brand-primary-rgb), 0.2);
}

.btn-secondary,
.btn-light {
    background: #fff;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-light:hover {
    background: var(--color-bg-primary);
    border-color: var(--brand-primary);
    color: var(--color-text-primary);
}

/* Inputs and selects to match the button shape. */
.form-control,
.form-select,
input[type="date"],
select {
    border-radius: 8px;
    border: 2px solid var(--color-border);
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: none;
}

/* The data table gets the library's card treatment. */
.table-responsive-sm,
.table-container {
    background: #fff;
    border-radius: 8px;
}

.rm-data-table-head {
    --bs-table-bg: #212529;
    --bs-table-color: #fff;
    background-color: #212529;
    color: #fff;
}

/* merged from shared.css */
.bg {
    background-color: #e6e6e6;
}

.nba {
    background-color: #e65c00;
}

.nba-txt {
    color: #e65c00;
}

.mlb {
    background-color: #009933;
}

.mlb-txt {
    color: #009933;
}

.nfl {
    background-color: #86592d;
}

.nfl-txt {
    color: #86592d;
}

.nhl {
    background-color: #0077b3;
}

.nhl-txt {
    color: #0077b3;
}

.logo {
    font-family: "Passion One", sans-serif;
    white-space: nowrap;
    padding: 1px 10px 1px 10px;
    border-radius: 5px;
    width: 80px;
    color: white;
    text-decoration: none;
}

    .logo a {
        text-decoration: none;
        color: white;
    }


.td-small td {
    padding: 2px 3px 2px 3px;
}
/* Nav player search - the shared sheet styles navbar inputs for a dark navbar */
.navbar input#navPlayerSearch {
    width: 260px;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    background: #ffffff;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.navbar input#navPlayerSearch::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
}

.navbar input#navPlayerSearch:focus {
    outline: none;
    color: var(--color-text-primary);
    background: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

/* jQuery UI autocomplete sits under the navbar without this */
.ui-autocomplete {
    z-index: 1100;
}

/* Autocomplete dropdown - match the library's completion list */
.ui-autocomplete {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-size: 0.85rem;
    list-style: none;
}
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 0.4rem 0.7rem;
    border-radius: 5px;
    border: none;
    color: var(--color-text-primary);
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--brand-primary);
    color: #ffffff;
    margin: 0;
}

/* Keep the logo from being squeezed by the search box */
.navbar .navbar-brand {
    flex-shrink: 0;
    white-space: nowrap;
}
.navbar input#navPlayerSearch {
    width: 200px;
    max-width: 100%;
    flex-shrink: 1;
}

/* Wrapper added by modern-select.js. .bm-custom-select is width:100% with a
   200px minimum, which is too wide for a row of four filters - size these to
   their content instead. Lives here rather than in rm.dark.css because this
   file loads in both themes. */
.rm-modern-select-wrap {
    width: auto;
    min-width: 150px;
}

select.rm-modern-select {
    width: auto;
    min-width: 150px;
}

.rm-modern-select-wrap.rm-modern-select-wide,
select.rm-modern-select-wide {
    min-width: 240px;
}

/* ---- PlayerRankings filter area -------------------------------------
   The controls above the table were five unrelated wrappers with their own
   ad-hoc margins. These give every group the same gap and a divider, so the
   area reads as one panel. .modern-filter-row comes from bm.light.css. */

.rm-filter-section {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* Section labels, rendered from the data-title attribute rather than a real
   element - the sections are flex rows, so flex-basis 100% turns ::before into
   a full-width first line. Avoids nesting every row one level deeper. */
.rm-filter-section[data-title]::before {
    content: attr(data-title);
    flex-basis: 100%;
    width: 100%;
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-secondary);
}

.rm-filter-section:last-of-type {
    border-bottom: none;
}

/* Native date inputs sat unstyled next to the buttons. */
.rm-date-input {
    width: auto;
    min-width: 9rem;
}

/* ---- Position filter badges -----------------------------------------
   Kept as RADIOS - single select, unchanged behaviour. This is the badge
   look from the library's position filter, not the component itself.

   _ColoredPosition is shared and emits `<span style="color:#xxx">`, so it
   is left alone: currentColor picks each position's own colour up for the
   border and the selected tint, with no per-position CSS. */

.rm-pos-filter {
    gap: 1.25rem;
}

.rm-pos-filter .rm-pos-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rm-pos-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.rm-pos-badge input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rm-pos-badge-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    /* Neutral, not currentColor: a spot can hold several positions in
       different colours, and borrowing one of them reads as arbitrary. */
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    background-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rm-pos-badge:hover .rm-pos-badge-label {
    border-color: var(--brand-primary);
}

.rm-pos-badge input[type="radio"]:checked + .rm-pos-badge-label {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
    background-color: rgba(var(--brand-primary-rgb), 0.12);
}

.rm-pos-badge input[type="radio"]:focus-visible + .rm-pos-badge-label {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* inline-block so the flex gap applies between them - as plain inline
   they ran together with no separation. */
.rm-pos-badge-label span {
    display: inline-block;
}

/* The page name in header row 2. Deliberately NOT .page-header - that is the
   brand panel (gradient + tagline) and belongs to the site name on the front
   page, not to "Depth Charts". */
.rm-page-heading {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    /* Large bold type reads loose at default tracking. */
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text-primary);
}

/* Narrow screens: keep it from pushing the controls onto their own line. */
@media (max-width: 991px) {
    .rm-page-heading {
        font-size: 1.6rem;
    }
}

/* Header row 2. A solid band rather than a bordered strip - the background is
   what separates it from the page, so there is no rule under the nav. In dark
   mode this sits flush against the navbar gradient and reads as one header. */
.rm-page-bar {
    background: var(--color-bg-secondary);
    padding: 0.85rem 0;
    margin-bottom: 1rem;
}

/* Depth Charts team cards. auto-fill means the column count follows the window
   with no breakpoints; align-items:start stops a short team being stretched to
   match the tallest card in its row. */
/* Wrapping flex, NOT grid. Grid gives every column the same width, but these
   cards vary - "Show Total Monster Bar" adds a whole second bar column - so
   any fixed column width clips one of the two states. At natural width a card
   is never narrower than its table, so nothing is cut off and nothing needs to
   scroll. Flex also wraps uneven heights without leaving the holes floats do. */
.rm-depth-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 1.25rem;
}

.rm-depth-grid > .card {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    /* Only these two - transitioning `all` would also animate the border
       colour, which is set inline per card. */
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rm-depth-grid > .card:hover {
    /* Deliberately small. A big lift on a page this dense reads as noise. */
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .rm-depth-grid > .card {
        transition: box-shadow 0.18s ease;
    }

    /* Shadow still deepens, so hover stays legible without movement. */
    .rm-depth-grid > .card:hover {
        transform: none;
    }
}

.rm-depth-grid .card-header {
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.5rem;
}

.rm-depth-grid .card-body {
    padding: 0;
}

/* ---- Outline buttons ------------------------------------------------
   rm.light.css restyles .btn with a transparent border, which leaves
   btn-outline-dark with nothing to show - the button rows on Rankings
   rendered as plain text. Appended last so it wins over that .btn rule.

   rm.dark.css loads after this file and carries its own version, so dark
   mode is unaffected. */

.btn-outline-dark {
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    border-color: var(--brand-primary);
    background-color: rgba(var(--brand-primary-rgb), 0.10);
    color: var(--color-text-primary);
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
    color: var(--color-text-tertiary);
    border-color: var(--color-border);
    opacity: 0.65;
}

/* rm-position-colors */

.pos-1b { color: var(--pos-1b); }
.pos-2b { color: var(--pos-2b); }
.pos-3b { color: var(--pos-3b); }
.pos-c { color: var(--pos-c); }
.pos-cf { color: var(--pos-cf); }
.pos-cl { color: var(--pos-cl); }
.pos-dh { color: var(--pos-dh); }
.pos-lf { color: var(--pos-lf); }
.pos-of { color: var(--pos-of); }
.pos-p { color: var(--pos-p); }
.pos-ph { color: var(--pos-ph); }
.pos-pp { color: var(--pos-pp); }
.pos-pr { color: var(--pos-pr); }
.pos-rf { color: var(--pos-rf); }
.pos-rp { color: var(--pos-rp); }
.pos-sp { color: var(--pos-sp); }
.pos-ss { color: var(--pos-ss); }

.pos-border-1b { border-color: var(--pos-1b); }
.pos-border-2b { border-color: var(--pos-2b); }
.pos-border-3b { border-color: var(--pos-3b); }
.pos-border-c { border-color: var(--pos-c); }
.pos-border-cf { border-color: var(--pos-cf); }
.pos-border-cl { border-color: var(--pos-cl); }
.pos-border-dh { border-color: var(--pos-dh); }
.pos-border-lf { border-color: var(--pos-lf); }
.pos-border-of { border-color: var(--pos-of); }
.pos-border-p { border-color: var(--pos-p); }
.pos-border-ph { border-color: var(--pos-ph); }
.pos-border-pp { border-color: var(--pos-pp); }
.pos-border-pr { border-color: var(--pos-pr); }
.pos-border-rf { border-color: var(--pos-rf); }
.pos-border-rp { border-color: var(--pos-rp); }
.pos-border-sp { border-color: var(--pos-sp); }
.pos-border-ss { border-color: var(--pos-ss); }

/* rm-position-colors-nba */
.pos-g { color: var(--pos-g); }
.pos-f { color: var(--pos-f); }
.pos-pg { color: var(--pos-pg); }
.pos-sg { color: var(--pos-sg); }
.pos-sf { color: var(--pos-sf); }
.pos-pf { color: var(--pos-pf); }

.pos-border-g { border-color: var(--pos-g); }
.pos-border-f { border-color: var(--pos-f); }
.pos-border-pg { border-color: var(--pos-pg); }
.pos-border-sg { border-color: var(--pos-sg); }
.pos-border-sf { border-color: var(--pos-sf); }
.pos-border-pf { border-color: var(--pos-pf); }

/* rm-scores-layout */
.rm-scores-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.rm-scores-side {
    flex: 0 0 340px;
    max-width: 340px;
}

.rm-scores-main {
    flex: 1 1 auto;
    min-width: 0;
}

.rm-scores-panel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.rm-scores-date {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.rm-scores-count {
    color: var(--color-text-tertiary);
    font-weight: 400;
}

.rm-scores-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.rm-scores-datebox {
    width: auto;
}

.rm-scores-toggle {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.rm-scores-games {
    padding: 0.5rem;
}

.rm-scores-game {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
    border-radius: 8px;
}

.rm-scores-game:hover {
    background: var(--color-bg-primary);
}

.rm-scores-view {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--brand-primary);
}

.rm-scores-table {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.rm-scores-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-tertiary);
    border: 1px dashed var(--color-border);
    border-radius: 12px;
}

/* rm-scores-team */
.rm-scores-team {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.4rem;
    margin-bottom: 1.25rem;
}

.rm-scores-team-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.rm-scores-team-code {
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 6px;
}

.rm-scores-team-score {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.rm-scores-table table {
    font-size: 0.78rem;
}

.rm-scores-table table td,
.rm-scores-table table th {
    padding: 0.22rem 0.4rem;
    border-color: var(--color-border-light);
}

.rm-scores-table .rm-data-table-head th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.rm-scores-table table tbody tr:hover td {
    filter: brightness(1.06);
}

/* rm-scores-header */
.rm-scores-table table {
    width: auto;
    max-width: 100%;
}

.rm-scores-header {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rm-scores-state {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.75rem;
    border-radius: 8px;
    background: var(--status-success);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

.rm-scores-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 1.05rem;
}

.rm-scores-pill-code {
    font-weight: 700;
}

.rm-scores-pill-score {
    font-weight: 700;
}

/* rm-scores-sizing */
.rm-scores-team {
    width: fit-content;
    max-width: 100%;
    padding: 0.9rem 1rem 0.6rem;
}

.rm-scores-header {
    width: fit-content;
    max-width: 100%;
}

.rm-scores-side {
    flex: 0 0 400px;
    max-width: 400px;
}

.rm-scores-panel {
    padding: 1.1rem 1.25rem;
}

.rm-scores-date {
    font-size: 1.25rem;
    margin-bottom: 0.9rem;
}

.rm-scores-controls {
    gap: 0.6rem;
}

.rm-scores-controls .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
}

.rm-scores-datebox {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.rm-scores-toggle {
    margin-top: 0.9rem;
    font-size: 0.95rem;
}

.rm-scores-games {
    padding: 0.6rem;
}

.rm-scores-game.small {
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    gap: 0.6rem;
}

.rm-scores-game .pbar-holder {
    min-width: 96px;
    font-size: 0.9em;
}

.rm-scores-game .teamscore {
    min-width: 72px;
}

.rm-scores-view {
    font-size: 0.82rem;
}

/* rm-scores-modern */
.rm-scores-team {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
}

.rm-scores-team-head {
    display: none;
}

.rm-scores-table {
    margin-bottom: 0;
}

.rm-scores-table + .rm-scores-table {
    border-top: 8px solid var(--color-bg-primary);
}

.rm-scores-table table.table {
    margin-bottom: 0;
    border: none;
    font-variant-numeric: tabular-nums;
}

.rm-scores-table table.table > :not(caption) > * > * {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.4rem 0.55rem;
    vertical-align: middle;
}

.rm-scores-table table.table > tbody > tr:last-child > * {
    border-bottom: none;
}

.rm-scores-table .rm-data-table-head th {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.55rem;
    white-space: nowrap;
}

.rm-scores-table .rm-data-table-head th .btn {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rm-scores-table table.table tbody tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08));
}

.rm-scores-table .display-player-name {
    font-size: 0.86rem;
    font-weight: 500;
}

.rm-scores-table td[style*="background-color:#"] {
    border-radius: 3px;
    background-clip: padding-box;
}

.rm-scores-header {
    margin-bottom: 1.1rem;
}

.rm-scores-state,
.rm-scores-pill {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* rm-scores-calm */
.rm-scores-team {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.rm-scores-table table.table {
    font-size: 0.82rem;
}

.rm-scores-table table.table > :not(caption) > * > * {
    padding: 0.5rem 0.65rem;
}

.rm-scores-table table.table > tbody > tr:nth-child(even) > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.045), rgba(128, 128, 128, 0.045));
}

.rm-scores-table table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.11), rgba(128, 128, 128, 0.11));
}

.rm-scores-table .display-player-name {
    font-size: 0.9rem;
}

.rm-scores-table td.tdr,
.rm-scores-table td.tdc {
    color: var(--color-text-secondary);
}

/* rm-data-table-modern */
table.table {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

table.table > :not(caption) > * > * {
    border-color: var(--color-border-light);
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
}

.rm-data-table-head th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.45rem 0.4rem;
}

.rm-data-table-head th .btn {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: baseline;
}

table.table > tbody > tr > td {
    transition: none;
}

table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.10), rgba(128, 128, 128, 0.10));
}

table.table a {
    text-decoration: none;
}

table.table a:hover {
    text-decoration: underline;
}

/* rm-league-grid */
.rm-league-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.rm-league-grid > .card {
    margin-bottom: 0 !important;
    flex: 0 1 auto;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.rm-league-grid > .card > .card-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* rm-front */
.rm-front .card {
    border: 1px solid var(--color-border) !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.rm-front .card-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.7rem 0.9rem;
}

.rm-front .card-header h4 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.rm-front .card-header h5 {
    font-size: 0.95rem;
    font-weight: 600;
}

.rm-front .card-header a {
    text-decoration: none;
}

.rm-front .card-header a:hover {
    text-decoration: underline;
}

.rm-front .card-body {
    padding: 0.8rem 0.9rem;
}

.rm-front .card table.table {
    margin-bottom: 0;
}

.rm-front .card table.table > :not(caption) > * > * {
    border-left: none;
    border-right: none;
    border-color: var(--color-border-light);
}

.rm-front .card table.table > tbody > tr:last-child > * {
    border-bottom: none;
}

.rm-front .btn {
    border-radius: 8px;
}

/* rm-toggle-link */
.modern-filter-container {
    position: relative;
    z-index: 20;
}

.btn-outline-dark {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    border-color: var(--brand-primary);
    background: var(--color-bg-primary);
    color: var(--brand-primary);
    box-shadow: none;
}

.btn-outline-dark:active {
    transform: translateY(1px);
}

.rm-toggle-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.rm-toggle-link:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    text-decoration: none;
}

.rm-toggle-link[aria-expanded="true"] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* rm-spacing */
table.table > :not(caption) > * > * {
    padding: 0.45rem 0.6rem;
}

.rm-data-table-head th {
    padding: 0.6rem 0.6rem;
}

.modern-filter-container {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.rm-filter-section {
    padding: 0.9rem 0;
}

.rm-filter-section[data-title]::before {
    margin-bottom: 0.45rem;
}

.modern-filter-row {
    gap: 0.6rem;
}

.rm-toggle-link {
    margin-bottom: 0.35rem;
}

.rm-page-heading {
    margin-bottom: 0.25rem;
}

/* rm-depth-card */
.rm-depth-card {
    border: 1px solid var(--color-border) !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.rm-depth-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.5rem 0.6rem;
}

.rm-depth-card table.table,
.rm-depth-card table.table > :not(caption) > * > * {
    border: none;
}

.rm-depth-card table.table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}

.rm-depth-card .rm-data-table-head th {
    background: transparent !important;
    color: var(--color-text-tertiary) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    font-size: 0.64rem;
    padding: 0.3rem 0.5rem;
    position: static;
}

.rm-depth-card .rm-data-table-head th .btn {
    color: var(--color-text-tertiary) !important;
    font-size: 0.64rem;
}

.rm-depth-card table.table > tbody > tr:nth-child(even) > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.05), rgba(128, 128, 128, 0.05));
}

.rm-depth-card table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.12), rgba(128, 128, 128, 0.12));
}

/* rm-depth-tone */
.rm-depth-card table.table > tbody > tr:nth-child(even) > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.025), rgba(128, 128, 128, 0.025));
}

.rm-depth-card table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.07), rgba(128, 128, 128, 0.07));
}

.rm-depth-card .rm-data-table-head th {
    border-bottom-color: rgba(128, 128, 128, 0.12) !important;
}

.rm-depth-card .card-header {
    border-bottom-color: rgba(128, 128, 128, 0.10);
}

.rm-depth-card .display-player-name,
.rm-depth-card .display-player-name:hover {
    color: var(--brand-primary);
}

.injury-badge {
    color: #ffffff !important;
}

/* rm-players */
.rm-players > .container {
    margin-left: 0 !important;
}

.rm-players .card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.rm-players .card-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.9rem 1.1rem;
}

.rm-players .card-header h1,
.rm-players .card-header h2,
.rm-players .card-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.rm-players .card-body {
    padding: 0.9rem 1.1rem;
}

.rm-players table.table > :not(caption) > * > * {
    border-left: none;
    border-right: none;
    border-color: var(--color-border-light);
    padding: 0.4rem 0.55rem;
}

.rm-players table.table > tbody > tr:last-child > * {
    border-bottom: none;
}

.rm-players table.table > tbody > tr:nth-child(even) > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.03), rgba(128, 128, 128, 0.03));
}

.rm-players table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08));
}

.rm-players .rm-data-table-head th {
    position: static;
}

/* rm-players-fit */
.rm-players table.table {
    width: auto;
    max-width: 100%;
}

.rm-players .card {
    width: fit-content;
    max-width: 100%;
    min-width: 420px;
    margin-bottom: 1.25rem;
}

.rm-players .card-header {
    padding: 0.85rem 1.25rem;
}

.rm-players .card-body {
    padding: 0.85rem 1.25rem;
}

.rm-players .rm-history-wrap,
.rm-players .rm-gamelog-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.rm-players .btn {
    border-radius: 8px;
}

.rm-players form {
    margin-bottom: 1rem;
}

/* rm-player-header */
.rm-players > .container[style*="max-width"] {
    display: none;
}

.rm-players .card-header h1 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.rm-players .card-header h1 span {
    font-size: 0.9rem;
    font-weight: 600;
    vertical-align: middle;
}

.rm-players .card-header h4 {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 0 !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rm-players .card-header h4 > span {
    padding: 0 !important;
}

.rm-players .card-header h4 span[style] {
    padding: 2px 8px !important;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.rm-players .card-header h4 small {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
}

.rm-players .card-header .border {
    border: none !important;
    border-radius: 6px;
    padding: 3px 9px !important;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rm-players .card-header .border small {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.85;
}

.rm-players .card-header > div.mt-0 {
    margin-top: 0.7rem !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* rm-players-grid */
.rm-players {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: start;
}

.rm-players > form[method="get"] {
    display: none;
}

.rm-players > div:has(> .card) {
    grid-column: 1;
    grid-row: 1;
}

.rm-players > form[method="post"] {
    grid-column: 1;
    grid-row: 2;
}

.rm-players > .container.ms-0 {
    grid-column: 1;
    grid-row: 3;
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.rm-players > .mt-3 {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0 !important;
    overflow-x: auto;
}

.rm-players .card {
    width: 100%;
    min-width: 0;
}

.rm-players > form[method="post"] .row {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .rm-players {
        grid-template-columns: minmax(0, 1fr);
    }

    .rm-players > div:has(> .card),
    .rm-players > form[method="post"],
    .rm-players > .container.ms-0,
    .rm-players > .mt-3 {
        grid-column: 1;
        grid-row: auto;
    }
}

/* rm-players-grid2 */
.rm-players > .container.ms-0 {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1.5rem;
}

.rm-players > .mt-3 {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.rm-players > .container.ms-0 table.table {
    width: 100%;
}

.rm-players > .mt-3 table.table {
    width: 100%;
}

@media (max-width: 1100px) {
    .rm-players > .container.ms-0 {
        grid-column: 1;
        grid-row: auto;
    }
}

/* rm-players-hero */
.rm-players {
    grid-template-columns: minmax(0, 1fr);
}

.rm-players > div:has(> .card) {
    grid-column: 1 / -1;
    grid-row: 1;
}

.rm-players > form[method="post"] {
    grid-column: 1 / -1;
    grid-row: 2;
}

.rm-players > .mt-3 {
    grid-column: 1 / -1;
    grid-row: 3;
}

.rm-players > .container.ms-0 {
    grid-column: 1 / -1;
    grid-row: 4;
}

.rm-players .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 1.4rem 1.6rem;
}

.rm-players .card-header h1 {
    flex-basis: 100%;
    font-size: 2.3rem;
    margin-bottom: 0.15rem !important;
}

.rm-players .card-header h1 span {
    font-size: 1.1rem;
}

.rm-players .card-header h4 {
    margin: 0 !important;
    font-size: 0.95rem;
}

.rm-players .card-header h4 span[style],
.rm-players .card-header h4 small {
    font-size: 0.8rem;
}

.rm-players .card-header > div.mt-0 {
    margin-top: 0 !important;
    margin-left: auto;
}

.rm-players .card-header .border {
    font-size: 0.9rem;
    padding: 5px 12px !important;
}

.rm-players > .container.ms-0 {
    max-height: 520px;
    overflow-y: auto;
}

/* rm-table-head-brand */
.rm-data-table-head th {
    --bs-table-bg: var(--brand-primary);
    --bs-table-color: #ffffff;
    background-color: var(--brand-primary);
    color: #ffffff;
}

.rm-data-table-head th .btn,
.rm-data-table-head th a {
    color: #ffffff !important;
}

/* rm-identity */
.rm-identity {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.75rem 2rem 2.5rem;
}

.rm-identity h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

.rm-identity h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.rm-identity form#account,
.rm-identity form#registerForm {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.rm-identity label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.3rem;
}

.rm-identity .form-control {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.rm-identity .btn {
    border-radius: 8px;
    padding: 0.45rem 1.4rem;
    font-weight: 600;
}

.rm-identity a {
    text-decoration: none;
}

.rm-identity a:hover {
    text-decoration: underline;
}

.rm-identity section > p a {
    display: inline-block;
    margin-top: 0.2rem;
}

/* rm-identity-size */
.rm-identity h1 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.rm-identity .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
}

.rm-identity form#account,
.rm-identity form#registerForm {
    padding: 2rem;
}

.rm-identity label {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.rm-identity .form-control {
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
}

.rm-identity .mb-3 {
    margin-bottom: 1.15rem !important;
}

.rm-identity form#account .btn,
.rm-identity form#registerForm .btn {
    width: 100%;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    margin-top: 0.3rem;
}

.rm-identity form#account a,
.rm-identity form#registerForm a {
    font-size: 0.9rem;
}

/* rm-leagues */
.rm-leagues {
    padding: 0.5rem 0 2rem;
}

.rm-leagues h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rm-leagues .btn {
    border-radius: 8px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
}

.rm-leagues > .p-2 {
    padding-left: 0 !important;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.rm-leagues .container {
    margin-left: 0 !important;
    padding-left: 0;
    max-width: 1100px;
}

.rm-leagues table.table {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.rm-leagues table.table > :not(caption) > * > * {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.6rem 0.8rem;
    vertical-align: middle;
}

.rm-leagues table.table > tbody > tr:last-child > * {
    border-bottom: none;
}

.rm-leagues table.table > tbody > tr:nth-child(even) > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.03), rgba(128, 128, 128, 0.03));
}

.rm-leagues table.table > tbody > tr:hover > td {
    background-image: linear-gradient(rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08));
}

.rm-leagues table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.rm-leagues table a {
    text-decoration: none;
    font-weight: 500;
}

.rm-leagues table a:hover {
    text-decoration: underline;
}

/* rm-display */
.rm-display {
    margin-left: 0 !important;
    padding: 0.5rem 0 2.5rem;
    max-width: 1500px;
}

.rm-display form {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.rm-display form > .row {
    order: 1;
    margin: 0;
    gap: 2rem;
    flex-wrap: wrap;
}

.rm-display form > div:not(.row):not(.rm-display-bar) {
    order: 2;
    margin: 1.25rem 0 0 !important;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border-light);
}

.rm-display .col-auto {
    margin: 0 !important;
    padding: 0;
    flex: 1 1 240px;
    min-width: 0;
}

.rm-display .row > .col-auto:first-child {
    flex: 1 1 65%;
    column-count: 3;
    column-gap: 2.5rem;
}

.rm-display h4 {
    column-span: all;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 0.45rem;
    margin-bottom: 0.6rem;
}

.rm-display .ms-2 {
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
    break-inside: avoid;
    cursor: pointer;
}

.rm-display .ms-2:hover {
    background-image: linear-gradient(rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08));
}

.rm-display input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.rm-display label {
    margin: 0;
    cursor: pointer;
    line-height: 1.3;
}

.rm-display .btn {
    border-radius: 8px;
    padding: 0.45rem 1.4rem;
    font-weight: 600;
}

/* rm-display-bar */
.rm-display-bar {
    order: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--color-border-light);
}

.rm-display-bar .form-control {
    max-width: 300px;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
}

.rm-display-count {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.rm-display-link {
    background: none;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rm-display-link:hover {
    color: var(--brand-primary-light);
}

/* rm-display-bar-top */
.rm-display form > .rm-display-bar {
    order: -1;
    justify-content: flex-end;
    margin: 0 0 1.1rem !important;
    padding-top: 0;
    padding-bottom: 1rem;
    border-top: none;
    border-bottom: 1px solid var(--color-border-light);
}

.rm-display-bar .form-control {
    order: 3;
    max-width: 260px;
}

.rm-display-count {
    order: 0;
    margin-right: auto;
}

#rmDisplayAll {
    order: 1;
}

#rmDisplayNone {
    order: 2;
    margin-right: 0.5rem;
}