/*
 * The club page's Table tab (ClubTable.js) — a filter pill, a static
 * competition badge, then the standings grid.
 *
 * Rows are full-bleed (no inline padding on `.club-table` / `.club-table__grid`
 * themselves) so the own row's highlight can span edge to edge — see
 * `.club-table__row[data-own="true"]` below; each row carries its own inline
 * padding instead, the same split `club-overview.css` uses.
 */

.club-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

/* `[hidden]` is a UA rule; the `display: flex` above it wins outright without
   this, the same failure mode every other panel in this app documents. */
.club-table[hidden] {
  display: none;
}

.club-table[data-open="false"] {
  opacity: 0;
}

/* --- Header ----------------------------------------------------------------- */

.club-table__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

/* --- Filter pill -------------------------------------------------------------
 *
 * "All" / "Home" / "Away" — Tobi-confirmed labels (see ClubTable.js). No
 * ready-made popover exists elsewhere to extend, so this is new chrome:
 * `.filter-chip`'s soft-grey pill body, its own chevron.
 */

.club-table__filter {
  position: relative;
  align-self: flex-start;
}

.club-table__filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

/*
 * Points down at rest and flips to point up while open — the plain "reveals
 * a menu below it" reading, not the -90deg/0deg "closed points right, open
 * points down" scheme `.filter-chip__chevron` uses: that one is an inline
 * expander unfolding its own row, this is a popover, and the two affordances
 * read differently on purpose.
 */
.club-table__filter-chevron {
  display: grid;
  place-items: center;
  transition: transform var(--duration) var(--easing);
}

.club-table__filter--open .club-table__filter-chevron {
  transform: rotate(180deg);
}

.club-table__filter-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 112px;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
}

.club-table__filter-menu[hidden] {
  display: none;
}

.club-table__filter-option {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.club-table__filter-option[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* --- Competition badge ---------------------------------------------------
 *
 * Static, not a link — Tobi confirmed no competition page for this to open,
 * the same call ClubOverview.js's own (real) competition link makes when its
 * card is a preview stub.
 */

.club-table__competition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.club-table__competition-name {
  min-width: 0;
}

/* --- Grid --------------------------------------------------------------- */

.club-table__grid {
  display: flex;
  flex-direction: column;
  margin-inline: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* Rounds the zone bars and the own-row tint into the card's corners. */
  overflow: clip;
}

/* The card's own border closes the grid now — a divider under the last row
   would double it. */
.club-table__row:last-child {
  border-bottom: none;
}

/*
 * Six columns: rank, team (flexible), then the four right-aligned stats. Both
 * the header row and every body row share this template so the columns stay
 * lined up without a shared CSS grid ancestor — each row is its own grid,
 * since each also has to be its own button for the tap target.
 */
.club-table__row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr 30px 56px 40px 34px;
  align-items: center;
  column-gap: var(--space-2);
  width: 100%;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* The own row — see the module comment in ClubTable.js for why it's a div,
   not a button. */
div.club-table__row {
  cursor: default;
}

/*
 * The rows left out of an excerpt — see `GapRow` in StandingsGrid.js. Flex
 * rather than the six-column grid, because it has one thing in it and that
 * thing is centred; shorter than a real row, so it reads as a seam between two
 * parts of one table rather than as a row with its contents missing.
 */
.club-table__row--gap {
  display: flex;
  justify-content: center;
  padding-block: 2px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  line-height: 1;
}

/*
 * The zone indicator: a coloured bar at the row's own left edge, inside its
 * padding rather than a seventh grid column, so it never competes with the
 * rank digit for width. Transparent (no rule fires) for a mid-table row with
 * no zone — see zoneForRank in state/selectors.js.
 */
.club-table__row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
}

.club-table__row[data-zone="promotion"]::before {
  background: var(--zone-promotion);
}

.club-table__row[data-zone="playoff"]::before {
  background: var(--zone-playoff);
}

.club-table__row[data-zone="relegation"]::before {
  background: var(--zone-relegation);
}

/*
 * The current club's own row — full-width, distinct from every other row.
 * --accent-soft, the same "this one is active" tint the follow button and a
 * selected filter chip already use: the subject of the page is the one thing
 * on this table that counts as "active" the same way.
 */
.club-table__row[data-own="true"] {
  background: var(--accent-soft);
}

.club-table__row[data-own="true"] .club-table__team-name {
  font-weight: var(--weight-bold);
}

.club-table__row--head {
  padding-block: var(--space-1) var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: default;
}

/* --- Cells ---------------------------------------------------------------- */

.club-table__cell {
  min-width: 0;
}

.club-table__cell--rank {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.club-table__row--head .club-table__cell--rank {
  color: inherit;
}

.club-table__cell--team {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.club-table__team-name {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.club-table__cell--stat {
  text-align: right;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.club-table__row--head .club-table__cell--stat {
  color: inherit;
  font-weight: inherit;
}

.club-table__cell--pts {
  font-weight: var(--weight-bold);
  color: var(--text);
}