/* Club Overview — only what player.css / bax_checker.css don't already
   cover (identity card, subnav, tab-panel, search-*, league-tag, mode-tabs,
   stat-grid, pl-empty/skeleton are all reused as-is). */

#season-select {
    width: auto;
    flex: 0 0 auto;
}

/* Stat tiles — same component as player.html, colored like its BAX tiles
   (reusing the already theme-tuned --disc-* tokens so light/dark just work,
   see bax_checker.css). Wider min column + a fixed min-height keeps the
   longer "Best rank" sub-label from looking cramped, on desktop or mobile. */
#c-stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
#c-stats .stat { min-height: 74px; }
#c-stats .stat:nth-child(1) { border-left: 3px solid var(--disc-einzel); }
#c-stats .stat:nth-child(2) { border-left: 3px solid var(--disc-doppel); }
#c-stats .stat:nth-child(3) { border-left: 3px solid var(--disc-waiting); }
#c-stats .stat__sub {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Phone: the header used to take most of the first screen — Star wrapped
   onto its own line and the three tiles stacked one per row (each with a
   74px floor). Here the Star button sits beside the name and the tiles go
   three across, like player.html's identity card (which player.css's
   ≤560px block already tightens; only what differs for the club lives
   here). Labels shrink via .lbl-long/.lbl-short, the season drops onto its
   own line under the label instead of trailing it, and the best-rank
   tile's league sub-line is hidden — the Teams tab right below already
   shows every team's league. */
@media (max-width: 560px) {
    #identity-card .identity { flex-wrap: nowrap; align-items: center; }
    #identity-card .identity > div:first-child { flex: 1 1 auto; min-width: 0; }
    #identity-card .identity__links { flex: 0 0 auto; }

    #c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
    #c-stats .stat { min-height: 0; padding: 0.45rem 0.55rem; }
    #c-stats .stat__value { font-size: 1.2rem; white-space: nowrap; }
    #c-stats .stat__sub { display: none; }
    .stat__dot { display: none; }
    .stat__season { display: block; color: var(--ink-faint); }
}

/* Roster — split into gender groups, side by side on wide screens, one
   below the other on narrow ones (auto-fit handles both via minmax). */
.roster-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem 1.75rem;
    align-items: start;
}
/* A grid item's default min-width is "auto", which floors it at its own
   min-content size — and the roster table's nowrap cells make that size
   huge, so without this the whole grid (and the page under it) was blown
   out wide enough to need a horizontal scrollbar, instead of the table's
   own overflow-x:auto (see rosterTableHtml) ever getting a chance to clip
   it locally. */
.roster-group { min-width: 0; }
.roster-group__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}
.roster-group__title--w { color: var(--disc-mixed); background: color-mix(in srgb, var(--disc-mixed) 15%, transparent); }
.roster-group__title--m { color: var(--disc-einzel); background: color-mix(in srgb, var(--disc-einzel) 15%, transparent); }
.roster-group__title--o { color: var(--ink-dim); background: var(--card-2); }

.club-roster {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.club-roster th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    padding: 0 0.4rem 0.5rem;
}
.club-roster th.is-num, .club-roster td.is-num { text-align: right; }
/* Sortable column headers */
.club-roster th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.club-roster th[data-sort]:hover { color: var(--accent); }
.club-roster th[data-sort].is-sorted { color: var(--accent); }
.club-roster .sort-arrow { font-size: 0.6rem; margin-left: 0.15rem; }
.club-roster td {
    padding: 0.55rem 0.4rem;
    border-top: 1px solid var(--border);
    white-space: nowrap;
}
.club-roster tr:hover td { background: var(--card-2); }
.club-roster a.roster-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.club-roster a.roster-name:hover { color: var(--accent); text-decoration: underline; }
.club-roster .winrate-bar {
    display: inline-block;
    width: 32px;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    vertical-align: middle;
    margin-right: 0.35rem;
}
.club-roster .winrate-bar > span {
    display: block;
    height: 100%;
}
/* Win rate: green above 50%, red below (won vs lost), reusing the same
   win/loss ink as the Teams tab's W/D/L (see .club-team-card__wdl). */
.club-roster .wr-pos { color: var(--success); }
.club-roster .wr-neg { color: var(--danger); }
.club-roster .winrate-bar .wr-pos { background: var(--success); }
.club-roster .winrate-bar .wr-neg { background: var(--danger); }

/* Teams tab — one season's teams as a bordered row-list (redesign: density
   over decoration — a scouting tool scans a ranked/grouped list faster than
   equal-size cards; see the "Instrument" direction). Keeps everything the
   card version earned from real feedback (league + record together in one
   compressed line, explicit colored W/D/L, a clear "this row leads
   somewhere" affordance) — just as a row instead of a card. Reuses
   .rank-badge/.league-tag (bax_checker.css) as-is. */
#teams-season-select { width: auto; flex: 0 0 auto; }

.teams-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--ink-dim);
}
.teams-hint svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

.club-team-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
}
.club-team-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}
.club-team-rows .club-team-row:last-child { border-bottom: none; }
.club-team-row:hover { background: var(--card-2); }
.club-team-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.club-team-row--static { cursor: default; }
.club-team-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.club-team-row__name {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.club-team-row:hover .club-team-row__name { color: var(--accent); }
.club-team-row__division {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--ink-dim);
    min-width: 0;
}
.club-team-row__division span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.club-team-row__division .league-tag { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); flex-shrink: 0; }

/* Explicit, labeled, colored W/D/L (feedback: "not clear ... make them
   explicit") — compact inline group instead of the card's stacked block. */
.club-team-row__wdl {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.club-team-row__wdl b { font-size: 0.85rem; }
.club-team-row__wdl .w { color: var(--success); }
.club-team-row__wdl .d { color: var(--ink-faint); }
.club-team-row__wdl .l { color: var(--danger); }
.club-team-row__wdl span { display: inline-flex; flex-direction: column; align-items: center; gap: 0.02rem; }
.club-team-row__wdl-label { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); }

.club-team-row__chev { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; }
.club-team-row:hover .club-team-row__chev { color: var(--accent); transform: translateX(2px); }

@media (max-width: 480px) {
    .club-team-row__division span:last-child { display: none; } /* league-tag stays, division text hides — the row is tight enough already */
}

/* The roster table's 5 columns (Name/Born/W-L/Win rate/BAX) don't fit a
   phone-width column even after the base tightening above — drop the
   least essential one (Born) and the win-rate bar's decoration, keeping
   the number itself, rather than letting the table force its own
   horizontal scrollbar. */
@media (max-width: 420px) {
    .club-roster th:nth-child(2), .club-roster td:nth-child(2) { display: none; }
    .club-roster .winrate-bar { display: none; }
}