/*
 * The club page's Matches tab (ClubMatches.js) — a view toggle, a filter row,
 * then the chronological list of competition cards.
 */

.club-matches {
  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-matches[hidden] {
  display: none;
}

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

/* --- Controls ----------------------------------------------------------- */

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

/*
 * List / Calendar. Both segments are equal width, so the highlight behind
 * them is a plain transform off `data-active` rather than a measured,
 * content-sized indicator — there is nothing here for a ResizeObserver to do.
 */
.club-matches__view {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.club-matches__view-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  transition: transform var(--duration) var(--easing);
}

.club-matches__view[data-active="calendar"] .club-matches__view-indicator {
  transform: translateX(100%);
}

.club-matches__view-tab {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  transition: color var(--duration) var(--easing);
}

.club-matches__view-tab[aria-selected="true"] {
  color: var(--text);
}

.club-matches__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  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-matches__filters[hidden] {
  display: none;
}

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

.club-matches__status-row {
  display: flex;
  gap: var(--space-2);
}

/* --- Competition filter pill ---------------------------------------------
 *
 * Same shape as `.club-table__filter*` (club-table.css) — no ready-made
 * popover exists elsewhere in the app to extend, and this is the second,
 * not the first, purpose-built one, so the styling is carried over rather
 * than reinvented.
 */

.club-matches__filter {
  position: relative;
}

.club-matches__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);
}

.club-matches__filter-chevron {
  display: grid;
  place-items: center;
  transition: transform var(--duration) var(--easing);
}

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

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

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

.club-matches__filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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-matches__filter-option[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* --- List ----------------------------------------------------------------
 *
 * Real cards, the same white-on-grey the home list's competition groups wear
 * (league-accordion.css) — the two lists are the same surface in two places,
 * and they read as such by sharing one treatment.
 */

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

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

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

.club-matches__card {
  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 row press-fills into the card edge. */
  overflow: clip;
}

.club-matches__competition {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  text-align: left;
}

.club-matches__competition-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.club-matches__competition-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.club-matches__competition-region {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.club-matches__rows {
  border-top: 1px solid var(--border);
}

.club-matches__row {
  position: relative;
}

.club-matches__row + .club-matches__row {
  border-top: 1px solid var(--border);
}

/*
 * The tap target. A separate element from `.club-matches__row` rather than
 * the row itself, because the star beside it is a sibling button — the same
 * split match-row.css's own row makes, and for the same reason: nested
 * buttons are invalid, and the row's own last grid column is left empty on
 * purpose, reserving exactly the width the star sits over.
 */
.club-matches__row-button {
  display: grid;
  grid-template-columns: 46px 1fr 34px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  text-align: left;
}

.club-matches__row-button:active {
  background: var(--surface-sunken);
}

.club-matches__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.club-matches__date {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.club-matches__time {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.club-matches__teams {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

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

.club-matches__team-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/*
 * Over the gutter the row button's own last grid column reserves, not inside
 * it — the same positioning match-row.css's own star uses, so the two taps
 * (row, star) are genuinely independent rather than one nested in the other.
 */
.club-matches__star {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: calc(34px + var(--space-4));
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* Filled blue: --accent owns "this one is selected", and a favourite is that
   — the same rule match-row.css's own star follows. */
.club-matches__row[data-favourite="true"] .club-matches__star {
  color: var(--accent);
}