/* Club stats board (public/vc/shared/club-stats-view.js). Rides on player-board.css —
   widget cards, tabs, heat bands, the crest-in-name cell — and adds only what a club
   table needs that a player table does not: the always-on frozen club column (the
   player board swaps to cards on a phone; a 14-36 row club table reads better as one
   table that scrolls sideways), the short-name swap, and the match-by-match drill-down. */

.cs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.cs-note { margin: 0 0 10px; }
.cs-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vc-text-sub);
  margin: 18px 0 10px;
}
.cs-group-title:first-child { margin-top: 4px; }
/* As many 260px cards as fit: four on a wide screen, two on a laptop, one on a phone.
   min-width:0 so a long club name ellipsizes instead of widening the track. */
.cs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cs-widget { min-width: 0; }
/* The shell's watermark rides in the card header; let the title keep its line. */
.cs-widget .widget-card-header { flex-wrap: wrap; }
.cs-widget .widget-card-title { white-space: nowrap; }
.cs-widget-row { border-radius: 6px; }

/* Numbers and scores are LTR inside an RTL page: "-1.2" and "2–0" must not mirror. */
.cs-table td.cs-num, .cs-log-table td, .cs-res, .widget-value { direction: ltr; unicode-bidi: isolate; }

.cs-toolbar { margin-bottom: 4px; }
.cs-hint { font-size: 0.78rem; color: var(--vc-text-sub); margin: 2px 0 8px; }

/* ── Table ─────────────────────────────────────────────────────────────── */
.cs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cs-table-wrap .cs-table {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cs-table th.cs-num, .cs-table td.cs-num { text-align: center; }
.cs-table th.start-h, .cs-table td.start-c { text-align: start; }
.cs-table .col-rank { width: 28px; text-align: center; color: var(--vc-text-sub); font-size: 0.8rem; padding-inline: 6px; }
.cs-table th.cs-locked-h { cursor: default; }

/* Frozen club column at EVERY width (player-board.css freezes it ≥641px only). */
.cs-table th.col-name,
.cs-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);
}
.cs-table thead th.col-name { z-index: 4; background: var(--vc-surface2); }
.cs-table .col-rank { position: static; }

.cs-row { cursor: pointer; }
.cs-row:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: -2px; }
.cs-row.is-open td { background: var(--vc-surface2); }
.cs-caret {
  font-size: 0.7rem;
  color: var(--vc-text-sub);
  transition: transform 0.15s;
  margin-inline-start: 2px;
}
.cs-row.is-open .cs-caret { transform: rotate(180deg); color: var(--vc-accent); }

.cs-name-short { display: none; }
@media (max-width: 640px) {
  .cs-name-full { display: none; }
  .cs-name-short { display: inline; }
  .cs-table-wrap .vc-table th,
  .cs-table-wrap .vc-table td { padding: 9px 7px; font-size: 0.84rem; }
  .cs-table .col-rank { display: none; }
  .cs-bar { justify-content: center; }
  /* The two filters side by side: stacked, they took most of the first screen. */
  .cs-filters { flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 10px; }
  .cs-filters label { flex: 1 1 0; min-width: 0; }
  .cs-filters select { width: 100%; min-width: 0; }
}

/* ── Match-by-match drill-down ─────────────────────────────────────────── */
.cs-log-row > td {
  padding: 0 !important;
  background: var(--vc-bg);
  white-space: normal;
}
.cs-log {
  position: sticky;
  inset-inline-start: 0;
  max-width: min(100vw - 40px, 760px);
  padding: 12px 14px 14px;
}
.cs-log-title { font-size: 0.82rem; font-weight: 800; color: var(--vc-accent); margin-bottom: 8px; }
.cs-log-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-log-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.cs-log-table th {
  font-size: 0.7rem; font-weight: 700; color: var(--vc-text-sub);
  padding: 4px 6px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--vc-border);
}
.cs-log-table td { padding: 6px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--vc-border); color: var(--vc-text); }
.cs-log-table tr:last-child td { border-bottom: none; }
.cs-log-table .start-h, .cs-log-table .start-c { text-align: start; }
.cs-log-rd { color: var(--vc-text-sub); }
.cs-log-date { display: block; font-size: 0.66rem; opacity: 0.8; }
.cs-ha {
  display: inline-block; min-width: 18px; font-size: 0.66rem; font-weight: 700;
  border: 1px solid var(--vc-border); border-radius: 4px; padding: 0 4px; color: var(--vc-text-sub);
}
.cs-res { display: inline-block; min-width: 38px; border-radius: 5px; padding: 1px 6px; font-weight: 800; }
.cs-res-w { background: rgba(var(--vc-heat-pos), 0.22); }
.cs-res-d { background: rgba(148, 163, 184, 0.2); }
.cs-res-l { background: rgba(var(--vc-heat-neg), 0.2); }