/*
 * player-board.css — the shared PLAYER STATS BOARD skin.
 *
 * ONE stylesheet for both competitions: /ipl/players and /{he,en}/pl/player-stats.
 * The two boards are meant to be visually identical, so they must not own separate
 * copies of these rules — a fix applied to one would silently not reach the other.
 * League-specific bits (position badge palette, RTL/LTR quirks) live below, keyed
 * off the board root, not off the page.
 *
 * Paired with public/vc/player-board.js (the behaviour) — change them together.
 */
/* Suppressed ADVANCED cell (see IPL_ADVANCED_AVAILABLE) — reads as "not sourced",
   visibly distinct from the "-" a real zero renders as. */
.vc-table td.adv-empty { color: var(--vc-text-sub); opacity: 0.55; }

/* Position badge colours */
.pos-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
  text-align: center;
  min-width: 44px;
}
.pos-badge.gk  { background: rgba(255,204,2,0.15); color: #ffcc02; }
.pos-badge.def { background: rgba(79,195,247,0.15); color: #4fc3f7; }
.pos-badge.mid { background: rgba(129,199,132,0.15); color: #81c784; }
.pos-badge.fwd { background: rgba(239,154,154,0.15); color: #ef9a9a; }

/* Pager */
.vc-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--vc-text-sub);
}
.vc-pager-controls {
  display: flex;
  gap: 6px;
}
.vc-pager-btn {
  background: var(--vc-surface2);
  border: 1px solid var(--vc-border);
  border-radius: 5px;
  color: var(--vc-text);
  padding: 5px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vc-pager-btn:hover:not(:disabled) {
  background: var(--vc-accent-dim);
  border-color: var(--vc-accent);
}
.vc-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Table scroll container */
.players-table-wrap {
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: var(--vc-surface);
}

.players-table-wrap .vc-table thead th {
  position: static;
}

@media (min-width: 641px) {
  .players-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .players-table-wrap .vc-table {
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
  }
  /* ONE frozen column: the player. The `#` rank column that used to be first (and
     used to carry the hard 46px cap and the 46px offset this rule sat at) was dropped
     2026-08-04 along with the team column — so the player cell is now the first child,
     it starts at 0, and it is the only thing worth keeping in view while the metrics
     scroll. It is deliberately NOT capped: it carries the club crest as well as the
     name and both have to fit on one line. */
  .players-table-wrap .vc-table th.col-name,
  .players-table-wrap .vc-table td.col-name {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--vc-surface);
    box-shadow: 0 0 0 1px var(--vc-border), 0 0 18px rgba(4, 7, 28, 0.22);
  }
  .players-table-wrap .vc-table thead th.col-name {
    z-index: 4;
    background: var(--vc-surface2);
  }
}

/* Name column is wider */
.vc-table .col-name { min-width: 120px; }

/* ── The player cell: club crest + name ───────────────────────────────────────
   The team COLUMN was dropped 2026-08-04 (owner) and the club moved INTO this cell as
   a crest, so the table is a column narrower without losing which club a player is at.
   One inline-flex box rather than two cells: `flex: none` on a fixed 18px box means a
   slow, missing or oversized badge can never change the row height, and keeping the
   name inside the same box stops it wrapping away from its crest. `object-fit: contain`
   because the two sources ship different aspect ratios (the PL badge CDN is square,
   Sport5's logos are not). Same `.crest` class the set-piece boards use. */
.board-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.board-name-crest {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}
.board-name-text { min-width: 0; }

.players-table-wrap .vc-table th,
.players-table-wrap .vc-table td {
  padding: 11px 9px;
  font-size: 0.92rem;
}

.players-table-wrap .pos-badge {
  min-width: 42px;
  padding: 3px 7px;
  font-size: 0.74rem;
}

/* Search input wider */
.vc-filters .search-input { min-width: 180px; }

.range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  /* direction inherits from the page (rtl on HE, ltr on EN) */
}
.range-row input[type="range"] {
  flex: 1;
  padding: 0;
  height: 34px;
  /* direction inherits from the page (rtl on HE, ltr on EN) */
}
.range-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--vc-text-sub);
  padding: 0 2px;
  /* direction inherits from the page (rtl on HE, ltr on EN) */
}
.range-value {
  min-width: 42px;
  text-align: end;
  color: var(--vc-accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Count display. The count and (on a board that has one) its data-source credit
   share ONE row at opposite ends, immediately above the table — so the credit
   explains the numbers before they are read instead of trailing after them. In
   RTL the count keeps the start (right) edge and the credit takes the end (left)
   one; LTR mirrors it. The row still lays out correctly with the credit absent,
   which is the PL board's case. */
.board-count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.result-count {
  font-size: 0.8rem;
  color: var(--vc-text-sub);
  margin-bottom: 8px;
}
.board-count-row .result-count { margin-bottom: 0; }
.players-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.players-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.players-tab {
  border: 1px solid var(--vc-border);
  background: var(--vc-surface2);
  color: var(--vc-text-sub);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.players-tab.active {
  background: rgba(219, 181, 128, 0.12);
  border-color: #dbb580;
  color: #dbb580;
}
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vc-text-sub);
  font-size: 0.82rem;
  font-weight: 600;
  user-select: none;
}
.view-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--vc-accent);
  cursor: pointer;
}
.players-mobile-list {
  display: none;
  gap: 10px;
  margin-top: 10px;
}
.player-mobile-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.player-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.player-mobile-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vc-text);
  min-width: 0;
}
.player-mobile-rank {
  color: var(--vc-text-sub);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 32px;
}
.player-mobile-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--vc-text-sub);
  font-size: 0.8rem;
}
.player-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.player-mobile-metric {
  background: var(--vc-surface2);
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.player-mobile-metric .label {
  display: block;
  font-size: 0.72rem;
  color: var(--vc-text-sub);
  margin-bottom: 3px;
}
.player-mobile-metric .value {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--vc-text);
  line-height: 1.35;
  word-break: break-word;
}
@media (max-width: 640px) {
  .players-table-shell {
    position: relative;
    padding-top: 18px;
  }
  .players-table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-end: 12px;
    top: -22px;
    color: #f6d37a;
    font-size: 2.35rem;
    font-weight: 1000;
    animation: mobile-scroll-nudge 1.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 8;
    opacity: 0.96;
    line-height: 1;
    text-shadow: 0 0 10px rgba(246, 211, 122, 0.28);
  }
  .mobile-scroll-arrow[hidden] {
    display: none;
  }
  .players-mobile-list {
    display: none;
  }
  .players-table-wrap .vc-table {
    width: max-content;
    min-width: 100%;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .players-table-wrap .vc-table th,
  .players-table-wrap .vc-table td {
    padding: 8px 6px;
    font-size: 0.76rem;
    line-height: 1.3;
  }
  /* A little wider than the old name-only 96px, because the cell now carries the club
     crest beside the name. */
  .players-table-wrap .vc-table .col-name {
    min-width: 108px;
  }
  /* ONE frozen column on a phone too — the player, now the first child. Same reasoning
     as the wide-screen rule above; the `#` column it used to sit behind is gone. */
  .players-table-wrap .vc-table th.col-name,
  .players-table-wrap .vc-table td.col-name {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--vc-surface);
    box-shadow: 0 0 0 1px var(--vc-border), 0 0 14px rgba(4, 7, 28, 0.2);
  }
  .players-table-wrap .vc-table thead th.col-name {
    z-index: 4;
    background: var(--vc-surface2);
  }
  .players-table-wrap .pos-badge {
    min-width: 34px;
    padding: 2px 5px;
    font-size: 0.66rem;
  }
  .vc-pager {
    font-size: 0.74rem;
  }
  .vc-pager-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
}
@keyframes mobile-scroll-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.78; }
  50% { transform: translateX(-6px); opacity: 1; }
}

/* ── Mode toggle (quick overview / full table) ────────────────────────
   Sits UNDER the filters in the page markup, so it reads as "now choose how to
   view the filtered set" rather than as page-level navigation above them.

   The control IS the shared segmented capsule component now: the markup on both
   boards carries `.vc-seg-toggle` / `.vc-seg-btn`, defined once in vc-theme.css
   alongside the fantasy-provider toggle it was always meant to match. The
   private `.mode-toggle` copy that lived here was deleted 2026-08-03, and the
   `.mode-toggle` class was dropped from the markup with it: vc-theme.css still
   carries pre-pill `html[data-vc-theme="light"] .mode-toggle` rules for
   public/vc/ucl/players.html, whose same-named control is a DIFFERENT design,
   and this block existed largely to fight those off these two boards.

   Only the phone centring stays here, because it is this board's geometry and
   not the component's. On a narrow column the capsule is the only thing on its
   line and reads as a lone off-centre lump pinned to one edge — and to WHICH
   edge changes with direction (LTR on the English PL board, RTL on the Hebrew
   one), so it looks like a different mistake in each. Auto INLINE margins on a
   shrink-to-fit block centre it identically in both; `width: fit-content` gives
   those margins something to split, and `display: flex` is required because auto
   inline margins do nothing on an inline-level box. Desktop keeps the
   inline-flex start alignment untouched. */
@media (max-width: 700px) {
  .vc-seg-toggle {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
  /* ── The toolbar on a phone: tabs and per-90 share ONE row ──────────────────
     The per-90 capsule used to take a whole line to itself under the tabs. It now
     rides at the FAR END of the tabs' own row — the tab group leads (right, in RTL)
     and the capsule sits opposite it.

     WHAT PUTS IT THERE IS `flex-grow` ON THE TABS, NOT `space-between`, and that is
     deliberate: the tabs grow to eat the line's free space, so the capsule's auto
     inline margins (from the rule above) resolve to ZERO and it lands flush at the
     end edge. Growing happens before auto margins are fed, which is the whole trick —
     it means the SAME capsule, with the same margins, still centres itself the moment
     it is alone on a line. One declaration covers both layouts; nothing has to detect
     which one is in force.

     It is deliberately the SMALLER of the two controls here. The tabs pick what the
     board is about; per-90 only restates the same numbers, so a capsule shrunk a
     step below the tabs reads as a secondary control beside them rather than as a
     fourth tab competing with them. Its vertical padding is kept close to the tabs'
     so the two end up the SAME height (35px against the tabs' 34px) — the shrink is
     horizontal and typographic, not a squashing of the tap target.

     The tabs shrink a little too, because three of them plus a capsule is more than
     a phone row holds at their desktop size. Only the horizontal padding and the
     type come down; the 7px vertical padding is untouched.

     ⚠️ THE 190px FLEX BASIS IS THE WHOLE FALLBACK MECHANISM — no extra breakpoint.
     It says "the tab group needs this much before it is worth sharing a row". When
     the viewport cannot give it that much beside the capsule, flex-wrap drops the
     capsule to its own line and the centring above takes over, unchanged. 190px is
     `נתוני פנטזי` + `נתונים מתקדמים` side by side; below that the tabs would wrap
     into three ragged one-pill lines, which is worse than the old stacked layout.
     Measured flip point (2026-08-04): the row stacks at and below 329px on the PL
     Hebrew board, 344px on the IPL one (a fourth tab) and 347px on the PL English one
     (a wider `Total`/`Per 90` capsule and longer tab labels). So every phone from
     360px up shares the row, and 320px — the width where three tabs and a capsule
     genuinely do not fit — stacks.

     The old `.has-game-picker` pair of rules is GONE, and so is the class that fed
     them (see syncDcControls). They existed to put per-90 beside the defcon game
     picker on that one tab, which was the best available home for it when it could
     not be on the tabs' row. Now that it always is, the picker takes the full width
     under that row and centres itself — one rule, one layout, on every tab. */
  .players-tabs {
    flex: 1 1 190px;
    gap: 5px;
  }
  .players-tab {
    padding: 7px 9px;
    font-size: 0.76rem;
  }
  .board-per90-toggle {
    flex: 0 0 auto;
    /* TOP of the row, not its middle: level with the FIRST line of tabs, which is what
       makes it read as riding on their row rather than floating in the gap between the
       two tab lines. */
    align-self: flex-start;
    /* The 16px the shared capsule reserves under itself was for standing alone. */
    margin-bottom: 0;
    /* 2px rather than the component's 6px so the capsule lands within a pixel of the
       tabs' 34px height — top-aligned controls of visibly different heights are what
       makes a row look accidental. */
    padding: 2px;
    gap: 3px;
  }
  .board-per90-toggle .vc-seg-btn {
    padding: 6px 9px;
    font-size: 0.72rem;
  }
  /* The PL defcon tab's third control. Its own full-width line under the tabs row,
     centred — the toolbar's `space-between` would otherwise strand it at one edge
     with nothing opposite it. Its capsule has to give up the auto inline margins the
     rule at the top of this block hands every `.vc-seg-toggle`, or they would centre
     the capsule inside the label's free space and leave the "משחק:" caption stranded
     at the far edge instead of sitting next to what it labels. */
  .players-toolbar > #dcGamePicker {
    flex-basis: 100%;
    justify-content: center;
  }
  .players-toolbar > #dcGamePicker .vc-seg-toggle {
    margin-inline: 0;
    margin-bottom: 0;
  }
}

/* ── Widget grid ── */
.widgets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 6px;
}
@media (max-width: 1100px) {
  .widgets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .widgets-grid { grid-template-columns: 1fr; }
}
/* Advanced (paid) widgets: span the full row and blur behind one unlock overlay. */
.widgets-locked-group { grid-column: 1 / -1; }
.widgets-locked-inner { margin-top: 0; }
/* On a phone the widget grid collapses to ONE column, so the locked group becomes a
   very tall stack of blurred cards. The overlay's default vertical centering then
   parks the unlock card halfway down that run — a free visitor meets blurred data
   and has to scroll a long way to find out why it is blurred. Pin the card to the
   TOP of the blurred region instead, so the prompt sits beside the FIRST locked
   card and is in view the moment the blur starts. Desktop and tablet (3 and 2
   columns — a far shorter group) keep the centred card. */
@media (max-width: 700px) {
  .widgets-locked-group > .vc-locked-overlay { align-items: flex-start; }
}

/* "Next season's numbers are not here yet" line. Sits on its OWN row directly ABOVE
   THE FILTERS (moved there 2026-08-04, from just above the count row): it says which
   season the whole board is serving, which the reader needs before they start
   narrowing it, not after. Tinted rather than plain muted text: it is a statement
   about the whole board, not another footnote, and plain muted grey would read as
   one. The start-edge rule uses border-inline-start so it lands on the right in RTL
   and the left in LTR.
   Rendered (and hidden) by player-board.js — see renderSeasonComingNote. */
.board-season-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--vc-text-sub);
  /* Literal dark-theme gold as the fallback; the light theme remaps --vc-gold to a
     blue, and color-mix keeps the tint following it. */
  background: rgba(252, 198, 29, 0.07);
  background: color-mix(in srgb, var(--vc-gold) 7%, transparent);
  border-inline-start: 3px solid rgba(252, 198, 29, 0.5);
  border-inline-start-color: color-mix(in srgb, var(--vc-gold) 50%, transparent);
}
.board-season-note[hidden] { display: none; }

/* Small muted source credit for a board tab's table (IPL advanced stats). Lives on
   the count row above the table — see .board-count-row. */
.board-source-note {
  font-size: 0.78rem;
  color: var(--vc-text-sub);
  opacity: 0.9;
  margin: 0;
  text-align: end;
}

/* An explainer for the tab the reader is on — what the column MEANS, one sentence,
   directly above the table it describes.

   ⚠️ ITS OWN ROW, not a third item on .board-count-row like .board-source-note is.
   That row is a two-end flex sized for a short credit; a full sentence dropped into it
   squeezes the player count against the opposite edge and wraps raggedly on a phone —
   the same reason .board-season-note sits on its own row. This one is start-aligned
   (a sentence, read from the beginning) where the credit is end-aligned (a trailing
   attribution), which is the other reason they are not one class. */
.board-rule-note {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--vc-text-sub);
  opacity: 0.92;
  text-align: start;
}
.board-rule-note[hidden] { display: none; }

/* ── Widget card ── */
.widget-card {
  background: linear-gradient(180deg, rgba(39, 52, 73, 0.96), rgba(15, 23, 42, 0.96));
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
}
.widget-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.widget-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vc-accent);
  letter-spacing: -0.01em;
}
.widget-card-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219, 181, 128, 0.1);
  color: var(--vc-accent-dim);
  border: 1px solid rgba(219, 181, 128, 0.15);
  white-space: nowrap;
}

/* ── Widget rows ── */
.widget-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.widget-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.widget-row:last-child { border-bottom: none; }
.widget-rank {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vc-text-sub);
  text-align: center;
  line-height: 1;
}
.widget-row:first-child .widget-rank { color: var(--vc-gold); }
.widget-player-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.widget-player-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.widget-player-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--vc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-player-team {
  font-size: 0.74rem;
  color: var(--vc-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.widget-player-team::before { content: '·'; margin-left: 2px; }
.widget-pos-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  line-height: 1.4;
}
.widget-pos-badge.gk  { background: rgba(255,204,2,0.13); color: #ffcc02; }
.widget-pos-badge.def { background: rgba(79,195,247,0.13); color: #4fc3f7; }
.widget-pos-badge.mid { background: rgba(129,199,132,0.13); color: #81c784; }
.widget-pos-badge.fwd { background: rgba(239,154,154,0.13); color: #ef9a9a; }

/* ── Bar + value ── */
.widget-value-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 80px;
}
.widget-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vc-light);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.widget-bar-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.widget-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--vc-accent);
  transition: width 0.4s ease;
}

.widget-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--vc-text-sub);
  font-size: 0.85rem;
}