/* ── Count badge ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
}

.badge--count {
  background: var(--color-primary);
  color: #fff;
}

/* ── Sport group accordion ──────────────────────────────────── */
.sport-groups {
  columns: 4;
  column-gap: var(--space-2);
}

.sport-group {
  break-inside: avoid;
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sport-group__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s;
}

.sport-group__toggle:hover { background: var(--color-bg); }

.sport-group__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sport-group__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
  flex: 1;
}

.sport-group__count {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-right: var(--space-1);
}

.sport-group__chevron {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}

.sport-group__toggle[aria-expanded="false"] .sport-group__chevron {
  transform: rotate(-90deg);
}

.sport-group__teams {
  display: flex;
  flex-direction: column;
}

.sport-group__teams--collapsed { display: none; }

/* ── Team card ───────────────────────────────────────────────── */
.team-card {
  display: flex;
  align-items: center;
  padding: 4px var(--space-3) 4px var(--space-4);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.12s;
}

.team-card:last-child { border-bottom: none; }
.team-card:hover { background: var(--color-bg); }

.team-card__info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.team-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.team-card__season {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.team-card__arrow {
  color: var(--color-primary-light);
  font-size: var(--text-lg);
  margin-left: var(--space-2);
}

/* ── Schedule table ──────────────────────────────────────────── */
.table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.schedule-table {
  width: 100%;
  font-size: var(--text-sm);
}

.schedule-table thead th {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.schedule-table thead th:first-child { padding-left: var(--space-5); }

.schedule-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.1s;
}

.schedule-table tbody .schedule-row {
  cursor: pointer;
}

.schedule-table tbody tr:last-child { border-bottom: none; }
.schedule-table tbody .schedule-row:hover { background: var(--color-bg); }

.schedule-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.schedule-table td:first-child { padding-left: var(--space-5); }

.schedule-row--past { color: var(--color-text-primary); }
.schedule-row--future { color: var(--color-text-secondary); }

.schedule-row--next { background: var(--color-scheduled-bg); }
.schedule-row--next td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

.schedule-row--cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

.col-date    { white-space: nowrap; font-weight: var(--weight-medium); }
.col-day     { white-space: nowrap; color: var(--color-text-secondary); }
.col-time    { white-space: nowrap; }
.col-ha      { text-align: center; }
.col-result  { white-space: nowrap; }

/* H/A badge */
.ha-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.ha-badge--home {
  background: var(--color-primary);
  color: #fff;
}

.ha-badge--away {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Result badge */
.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  margin-right: var(--space-1);
}

.result-badge--win      { background: var(--color-win-bg);       color: var(--color-win); }
.result-badge--loss     { background: var(--color-loss-bg);      color: var(--color-loss); }
.result-badge--tie      { background: var(--color-tie-bg);       color: var(--color-tie); }
.result-badge--cancelled{ background: var(--color-cancelled-bg); color: var(--color-cancelled); }
.result-badge--postponed{ background: var(--color-postponed-bg); color: var(--color-postponed); }
.result-badge--place    { background: var(--color-place-bg);     color: var(--color-place); }

.result-score {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.result-dash {
  color: var(--color-text-muted);
}

/* ── Expanded row detail panel ───────────────────────────────── */
.row-detail {
  display: none;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
}

.row-detail.open { display: table-row; }

.row-detail td {
  padding: var(--space-4) var(--space-5);
}

.row-detail__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.row-detail__venue { flex: 1; }
.row-detail__venue-name {
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}


/* ── Record bar connects visually to table below it ─────────── */
.record-bar + .table-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

.record-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-dark);
  color: #fff;
  font-size: var(--text-sm);
  border-radius: var(--radius) var(--radius) 0 0;
}

.record-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.record-val {
  font-weight: var(--weight-bold);
}

/* ── Year selector ───────────────────────────────────────────── */
.year-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.year-selector__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.year-select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-3) 4px var(--space-2);
  cursor: pointer;
  appearance: auto;
}

.year-select:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

/* Record bar context: year selector on dark background */
.record-bar .year-selector__label {
  color: rgba(255,255,255,0.65);
}

.record-bar .year-select {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}

.record-bar .year-select option {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* ── Schedule page header ────────────────────────────────────── */
.schedule-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.team-badge__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* ── Medium: sport groups 2 columns ─────────────────────────── */
@media (max-width: 860px) {
  .sport-groups {
    columns: 2;
  }
}

/* ── Mobile: sport groups single column + hide table columns ─── */
@media (max-width: 640px) {
  .sport-groups {
    columns: 1;
  }

  .col-day, .col-location, .col-time {
    display: none;
  }

  .schedule-table td,
  .schedule-table thead th {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .schedule-table td:first-child,
  .schedule-table thead th:first-child {
    padding-left: var(--space-3);
  }
}