/* 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;
}

/* The header row is .rm-page-bar, not .navbar, so these cannot be scoped
   under .navbar the way the rule above is. */
.rm-page-bar input#navPlayerSearch {
    width: 320px;
    max-width: 100%;
    flex-shrink: 0;
}

.rm-page-bar .bm-custom-select {
    min-width: 300px;
}

/* 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;
}

/* rm-default */
.rm-display .rm-default > label::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
    margin-left: 6px;
    vertical-align: 2px;
}

.rm-display .rm-default > label {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* rm-page-guide-placement */
.bm-page-guide-trigger {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* rm-own-badge */
.own-badge {
    --own-badge-starting-bg: #00b33c;
    --own-badge-bench-bg: #00b33c;
    --own-badge-ir-bg: #00b33c;
    --own-badge-other-starting-bg: #c5cdd3;
    --own-badge-other-bench-bg: #c5cdd3;
    --own-badge-other-ir-bg: #c5cdd3;
    --own-badge-waiver-bg: #6b7f92;
    --own-badge-starting-fg: #ffffff;
    --own-badge-bench-fg: #ffffff;
    --own-badge-ir-fg: #ffffff;
    --own-badge-other-starting-fg: #ffffff;
    --own-badge-other-bench-fg: #ffffff;
    --own-badge-other-ir-fg: #ffffff;
    --own-badge-waiver-fg: #dbe4ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 34px;
    height: 24px;
    border-radius: 5px;
    color: #fff;
    vertical-align: middle;
}

.own-badge-icon {
    width: 17px;
    height: 17px;
    display: block;
}

.own-badge-icon--ir {
    width: 20px;
    height: 20px;
}

.own-badge-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.own-badge--starting {
    background-color: var(--own-badge-starting-bg);
    color: var(--own-badge-starting-fg);
}

.own-badge--bench {
    background-color: var(--own-badge-bench-bg);
    color: var(--own-badge-bench-fg);
}

.own-badge--ir {
    background-color: var(--own-badge-ir-bg);
    color: var(--own-badge-ir-fg);
}

.own-badge--other-starting {
    background-color: var(--own-badge-other-starting-bg);
    color: var(--own-badge-other-starting-fg);
}

.own-badge--other-bench {
    background-color: var(--own-badge-other-bench-bg);
    color: var(--own-badge-other-bench-fg);
}

.own-badge--other-ir {
    background-color: var(--own-badge-other-ir-bg);
    color: var(--own-badge-other-ir-fg);
}

.own-badge--waiver {
    background-color: var(--own-badge-waiver-bg);
}

.own-last-marker {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    vertical-align: middle;
}

td.own-cell {
    padding: 2px 4px !important;
}

td.own-cell > .bm-tooltip-wrap:first-child {
    display: block;
}

/* rm-monster-bar-weights */
.range-badge--monster .monster-bar-measure {
    font-weight: 400;
}

.range-badge--monster .monster-bar-cell--ownable {
    font-weight: 500;
}

.range-badge--monster .monster-bar-cell--dim {
    font-weight: 500;
}

/* rm-badge */
/* One shared fill badge. .rm-badge is canonical; .pct-badge and .value-badge
   are kept as aliases so existing markup is unaffected. */
td.rm-badge-cell,
td.pct-badge-cell,
td.value-badge-cell {
    padding: 0 !important;
    height: 1px;
}

.rm-badge,
.pct-badge,
.value-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1f1d;
    box-sizing: border-box;
}

/* Change value pinned inside the badge. Absolute rather than a flex row so
   the percent stays centered whatever the change is - a -100 and a +5 leave
   it in the same place. */
.rm-badge,
.pct-badge,
.value-badge {
    position: relative;
}

.rm-badge-change {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 2px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* Inline variant - sits inside a cell alongside other content rather than
   filling it. Used for the opposing team badge in the schedule grid. */
.rm-badge--inline {
    display: inline-flex;
    width: auto;
    min-height: 0;
    padding: 1px 5px;
}

/* rm-rankings-compact-rows */
.rm-rankings table.table > :not(caption) > * > * {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* rm-rankings-player-name */
.rm-rankings .display-player-name {
    font-size: 0.85rem;
    font-weight: 500;
}

/* rm-mbar-head */
/* Stack the GAME / TOTAL label above its badge instead of beside it.
   .range-badge is inline-flex, so a block wrapper on the label is what
   pushes the badge onto the next line. */
.rm-mbar-head > .bm-tooltip-wrap {
    display: block;
    text-align: center;
    line-height: 1.1;
}

/* rm-opp-badge */
/* Opposing team as a badge in the schedule grid. Deliberately inherits
   colour and font-size - the cell also holds starter icons, so only the
   shape is changed here. */
.rm-opp-badge {
    align-items: center;
    padding: 1px 5px;
    border-radius: 5px;
    font-weight: 500;
    white-space: nowrap;
}

/* rm-badge-outline */
/* For a badge with no background of its own - IR% has no colour, so it
   keeps the pill shape but stays transparent and inherits its text colour
   rather than taking the dark fill colour meant for coloured badges. */
.rm-badge--outline {
    background-color: transparent;
    color: inherit;
    border: 1px solid var(--color-border);
}

/* rm-import */
/* League import page. Built from the shared tokens rather than Bootstrap
   cards, so it matches the rest of the modernised pages and follows the
   dark theme without a second set of rules. */

.rm-import-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 0.85rem;
}

.rm-import-tab {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.25;
    transition: all 0.15s ease;
}

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

.rm-import-tab--active {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
    color: var(--color-text-primary);
}

.rm-import-tab-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.rm-import-tab-count {
    font-size: 0.7rem;
    opacity: 0.65;
    white-space: nowrap;
}

.rm-import-tab-count--off {
    font-style: italic;
}

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

.rm-import-panel h5,
.rm-import-panel h6 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

.rm-import-connection {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.rm-import-connection form {
    margin: 0;
}

.rm-import-connection-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* A dot rather than the word "connected" in green, which read as a warning
   next to the red "not connected" state. */
.rm-import-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}

/* Text that behaves like a link but posts a form. */
.rm-import-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    text-decoration: underline;
    cursor: pointer;
}

.rm-import-linkbtn:hover {
    color: var(--color-text-primary);
}

.rm-import-linkbtn--danger:hover {
    color: #ef4444;
}

.rm-import-table {
    width: auto;
    min-width: 32rem;
    max-width: 56rem;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0.85rem;
    font-size: 0.85rem;
}

.rm-import-table thead th {
    padding: 0.4rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.rm-import-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.rm-import-table tbody tr:last-child td {
    border-bottom: none;
}

.rm-import-table tbody tr:hover td {
    background: rgba(128, 128, 128, 0.06);
}

.rm-import-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.rm-import-team {
    color: var(--color-text-secondary);
}

/* Imported rows sit back so the ones still to do carry the attention. */
.rm-import-row--done .rm-import-name,
.rm-import-row--done .rm-import-team {
    opacity: 0.65;
}

.rm-import-check {
    width: 2.5rem;
    text-align: center;
}

.rm-import-check .bm-checkbox {
    gap: 0;
}

.rm-import-status {
    width: 7rem;
}

.rm-import-action {
    width: 5rem;
    text-align: right;
}

.rm-import-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(128, 128, 128, 0.15);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.rm-import-pill--done {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.rm-import-pill--failed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.rm-import-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.rm-import-hint,
.rm-import-muted {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
}

.rm-import-empty {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.rm-import-error {
    margin-top: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.85rem;
}

.rm-import-input {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-input, var(--color-bg-card));
    color: var(--color-text-primary);
    font-size: 0.85rem;
    min-width: 16rem;
}

.rm-import-manual {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.rm-import-manual p {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.6rem;
}

.rm-import-manual-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Connect panels */
.rm-import-connect-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--color-text-primary);
}

.rm-import-connect-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.rm-import-help {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
}

.rm-import-help h6 {
    font-size: 0.8rem;
    margin: 0.75rem 0 0.3rem;
    color: var(--color-text-secondary);
}

.rm-import-help ol {
    margin: 0;
    padding-left: 1.1rem;
}

.rm-import-help li {
    margin-bottom: 0.15rem;
}

/* rm-import-lead */
/* Says what the checkboxes are for. Without it the column reads as decoration
   rather than the main action on the page. */
.rm-import-lead {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.rm-import-lead b {
    color: var(--color-text-primary);
}

.rm-import-selectall-label {
    gap: 0.3rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}

/* A row that can still be imported is clickable, so it should say so. */
.rm-import-row--pick {
    cursor: pointer;
}

/* rm-import-selectall */
/* Sits beside the import button as plain text. A checkbox in the header row
   read as another league to tick rather than a control. */
.rm-import-selectall {
    font-size: 0.78rem;
}

.rm-import-selectall-label {
    display: none;
}

/* rm-import-merge */
/* Extra columns from the old UserLeagues page. */
.rm-import-id {
    width: 8rem;
}

.rm-import-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* Four actions in a row, so they need spacing and a wider column than the
   single Remove link did. */
.rm-import-action {
    width: 14rem;
    text-align: right;
    white-space: nowrap;
}

.rm-import-action .rm-import-linkbtn,
.rm-import-action a.rm-import-linkbtn {
    margin-left: 0.6rem;
}

.rm-import-action a.rm-import-linkbtn {
    text-decoration: underline;
}

.rm-import-name a {
    color: inherit;
    text-decoration: none;
}

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

/* rm-import-action-narrower */
/* Three actions instead of four now that Rosters is gone. */
.rm-import-action {
    width: 11rem;
}

/* rm-import-action-narrower */
/* Three actions instead of four now that Rosters is gone. */
.rm-import-action {
    width: 11rem;
}

/* rm-import-action-narrower */
/* Three actions instead of four now that Rosters is gone. */
.rm-import-action {
    width: 11rem;
}

/* rm-gamestate-badge */
/* The lineup badge holds a play or pause icon, sometimes a batting order, and
   sometimes a lock. They were inline elements on the text baseline, so each
   sat at a different height and the badge stretched to contain them.
   A flex row puts them on one centre line.

   The font size is fixed rather than relative because this badge lives inside
   a <small> and .badge scales again on top of that, which compounded the
   number down to about 8px. */
.pgs-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

/* Block removes the baseline gap under an inline svg, which was adding a few
   stray pixels to the badge height. */
.pgs-badge svg {
    display: block;
    flex: none;
}

.pgs-detail {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Space between the injury abbreviation and the games count. Sits in
   rm.light.css because it is spacing, not colour, so it applies in both themes. */
.badge .status-badge-count {
    margin-left: 3px;
}

/* team-dot: separates the team code from the positions. The dot is a pseudo
   element so it takes the row's text color rather than the team color, and
   the margins either side are equal. */
.display-player-team {
    margin-right: 0 !important;
}

.display-player-team::after {
    content: "\00b7";
    display: inline-block;
    margin: 0 0.4rem;
    color: var(--color-text-tertiary);
    font-weight: 400;
}

/* dot-balance: the first position sits right after the dot and brings its own
   ml-1, which made the right gap wider than the left. */
.display-player-team + .display-player-pos {
    margin-left: 0 !important;
}

/* rm-filter-label-inline -----------------------------------------------
   Ken, Small RotoMonster Updates: move the controls onto the same line as
   the headings, and make the headings a fixed width so the items to their
   right line up.

   The label comes from .rm-filter-section[data-title]::before, which set
   flex-basis:100% to force a full-width first line. A fixed width puts it
   inline instead. Appended at the end of the file deliberately - the
   rm-spacing block earlier already overrides the original ::before, so
   this has to come after both to win on source order.

   The label reverts to its own line under 992px, where .modern-filter-row
   switches to a column and a fixed-width label would squeeze the controls. */

:root {
    --rm-filter-label-width: 9rem;
}

.rm-filter-section[data-title]::before {
    flex: 0 0 var(--rm-filter-label-width);
    width: var(--rm-filter-label-width);
    max-width: var(--rm-filter-label-width);
    margin-bottom: 0;
    padding-right: 0.75rem;
    align-self: center;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .rm-filter-section[data-title]::before {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
        margin-bottom: 0.35rem;
        padding-right: 0;
    }
}

/* pv-boost-tip ---------------------------------------------------------
   Ken, Small RotoMonster Updates: the Positional Value popup was the last
   bootstrap modal in the table header. It is a bm-tooltip now.

   The base .bm-tooltip-content is text-align:center, which is right for a
   sentence and wrong for a two column table, so the table is left aligned
   with the value column pushed right. */

.pv-boost-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    opacity: 0.9;
    cursor: pointer;
    /* The PosV label next to it is a btn-link with its own baseline, so the
       icon rides high on vertical-align alone. Nudged down to sit on the
       text baseline instead of the line box. */
    position: relative;
    top: 2px;
}

.pv-boost-trigger:hover {
    opacity: 1;
}

.pv-boost-trigger svg {
    display: block;
}

.pv-boost-tip {
    text-align: left;
    min-width: 190px;
}

.pv-boost-title {
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.pv-boost-note {
    margin-bottom: 0.4rem;
    opacity: 0.75;
    line-height: 1.3;
}

.pv-boost-table {
    width: 100%;
    border-collapse: collapse;
}

.pv-boost-table td {
    padding: 0.1rem 0;
    vertical-align: middle;
}

.pv-boost-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}