/* players page fixed header — auth-bar _offsetSibling() sets top:32px automatically */
#players-header { position: fixed; left: 0; right: 0; z-index: 100; background: var(--fixed-element-bg); }
/* #main-content used to have overflow-x:hidden here, which broke .pt-th's position:sticky
   (below): setting overflow-x to anything but visible forces overflow-y to compute to 'auto'
   too (CSS Overflow spec), turning #main-content into an unintended scroll container — sticky
   positions relative to its nearest scroll-container ancestor, not the viewport, so the header
   stopped tracking the real page scroll and could resolve off-screen. Dropped entirely; nothing
   here actually overflows horizontally (Bootstrap's own .container already caps width). */

/* Players table — a genuine <table> (name | born in | plays for), page-specific: the map
   page's own dim-mode player list (css/player.css's .pt-player-row/.pt-country-header) groups
   players under a country header instead of one flat sortable row per player, a different
   enough shape that it isn't reused here. */
/* table-layout:fixed makes column widths content-independent (see .pt-born/.pt-caps below) —
   without it, a long unbroken name (e.g. "Bosnie-Herzégovine") forces the column, and thus the
   whole table/page, wider than the viewport regardless of overflow/text-overflow settings. */
.pt-table { table-layout: fixed; font-size: 12px; }
.pt-table thead th.pt-th {
  color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap;
  /* Sticks right below the fixed #players-header — --players-header-h is that header's own
     measured bottom edge (wc2026_players.html's _syncHeaderLayout, same value driving
     #main-content's padding-top), so this tracks it exactly whether the header is title-only
     or stacked (sidebar wrapped beneath the title on narrow screens). Needs its own opaque
     background (table-striped/table-hover only paint tbody rows, not thead) so scrolled-past
     rows don't show through underneath while stuck. */
  position: sticky; top: var(--players-header-h, 0px); z-index: 2;
  background: var(--fixed-element-bg);
}
.pt-table thead th.pt-th:hover { color: var(--color-default); }
.pt-table thead th.pt-th-active { color: var(--color-default); }
.pt-flag { margin-right: 5px; border-radius: 2px; vertical-align: -1px; }

/* "born in"/"plays for" columns — same muted/11px look as .pt-caps (css/player.css) had on
   its own, restated here since .pt-caps' own rule doesn't touch layout, just color/size. */
.pt-born { color: var(--text-muted); font-size: 11px; }

/* Fixed share of the table's width (the "name" column absorbs whatever's left — table-layout:
   fixed distributes unclaimed width across columns with no explicit width of their own). Long
   names truncate with an ellipsis instead of forcing the table wider than the viewport; the
   full name is still available via the <td title> tooltip (wc2026_players.html). */
.pt-born, .pt-caps { width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Numeric column(s) — index.html's own "caps" and insights/discipline.html's several stat
   columns (matches/fouls/cards/ratio) both used this shape independently before sharing it here
   (index.html's own version used to live in css/index.css, discipline.html's own as .disc-num) —
   right-aligned, non-wrapping, tabular-nums so digits of different widths (1 vs 10 vs 100) still
   line up in a column instead of jittering row to row. */
.pt-num { width: 10%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* Players sidebar (control 2 — js/players_sidebar.js)
 *
 * #players-sidebar carries the shared .csb-panel/.csb-always-open classes (see
 * css/control-sidebar.css's own header comment for what .csb-panel covers: font-size,
 * background, .csb-content/.csb-inset/.csb-table basics, .csb-row, .csb-sort-item,
 * .csb-sort-dir, .csb-header, --sort-extra-pad) — everything below is genuinely specific to
 * this sidebar's simpler 2-row filter shape (no rowspan/colspan grid, no elo/pop-grouping
 * divider tied to control 1's 4×2 matrix) or has no control-1 equivalent at all.
 */

/* .csb-always-open sets .csb-body's background/height/width for #control-sidebar (this class
   is shared with it — css/control-sidebar.css) but stays #control-sidebar-scoped there for a
   specificity reason (see that file's own comment) — #players-sidebar has no competing base
   .csb-body rule to out-rank, so it just needs this on its own, unconditionally. */
#players-sidebar .csb-body { background: transparent; }

/* .csb-sort-table's own border-left:0 is shared (.csb-panel, control-sidebar.css) — this is
   just the remainder for control 2's simpler, rowspan/colspan-free filter table shape. */
#players-sidebar .csb-filter-table td:first-child { border-left: 0; }

/* Filter rows (native/moved) — standard Bootstrap btn-check toggle buttons (same pattern as
   .psb-conf-scope), so on/off state and the click target are both Bootstrap's own; this only
   needs to override .csb-table td's default right-align (meant for a column that sits next to
   a separate checkbox column, which these rows don't have). */
#players-sidebar .csb-filter-table .csb-row { text-align: center; }

/* Marks which criterion is currently leading the "plays for" column's team sort — every item
   stays clickable regardless (see js/players_sidebar.js's sort-list click handler, which
   switches into team mode itself rather than requiring it first), so unlike control 1's
   .csb-sort-item--disabled this never dims/disables, just highlights the active one. No
   control-1 equivalent (its own .csb-sort-item--disabled means something else entirely). */
#players-sidebar .csb-sort-item--active { background: var(--bg-hover); font-weight: 600; }

/* Which country the confederation dropdown checks (team vs. birth) — standard Bootstrap
   btn-check radio-toggle pair (getbootstrap.com/docs/5.3/forms/checks-radios/#checkbox-toggle-
   buttons), ms-auto right-aligns it within .csb-toolbar. flex-shrink:0 keeps it full width even
   as .csb-conf-label (control-sidebar.css) shrinks/truncates next to it. No control-1
   equivalent — control 1's own .csb-display-toggle is a different concept (team/match view). */
.psb-conf-scope { display: flex; flex-shrink: 0; white-space: nowrap; }

/* ── Stage carousel host — .elo-viz/.elo-stage-carousel/.carousel-* are all global
   (css/global.css), not tied to <elo-ranking> — mounting createStageCarousel()'s own .el
   here needs no extra rules beyond not letting it collide with the toolbar above it. No
   control-1 equivalent — its own carousel lives inside <elo-ranking>, not the sidebar itself.
   width:100% (not a fixed px value) so it always matches .csb-toolbar/.csb-layout's own width
   (both stretch to the card's actual content width, which varies with locale/table content) —
   a fixed width here left the prev/next buttons (positioned edge-to-edge of this host) flush
   on the left but short of the card's real right edge, since the sibling rows kept stretching
   past whatever px value this had while this one didn't. */
#players-sidebar{ min-width: min(100vw, 420px); }
#players-sidebar .psb-carousel-host { width: 100%; }

/* Footer (visible/total count) — js/players_sidebar.js reuses control 1's own #elo-meta/
   #elo-meta-count ids directly (styled in css/control-sidebar.css) rather than a
   players-specific id: the two sidebars never coexist on the same page, and the concept
   (a count line in the footer) is identical, so there's nothing here to restate. */