/* Leagues / team / tournament pages (SPA overlays) */
.pageOverlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-secondary-1);
  overflow-y: auto;
  padding: 20px 16px 60px;
}
.pageOverlay__inner {
  max-width: var(--width-layout);
  margin: 0 auto;
}
.pageOverlay__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 16px;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 16px;
}
.pageOverlay__back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-secondary-3);
  background: transparent;
  color: var(--color-white);
  font-size: 16px;
}
.pageOverlay__title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-white); }
.pageOverlay__subtitle { font-size: 11px; color: var(--color-support-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }

/* Sub-tabs on pages */
.pageTabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--color-support-1);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow-x: auto;
}
.pageTabs__tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
  border-radius: 8px;
  background: transparent;
  border: 0;
  white-space: nowrap;
}
.pageTabs__tab:hover { color: var(--color-white); background: var(--color-secondary-3); }
.pageTabs__tab--active { background: var(--color-secondary-3); color: var(--color-white); pointer-events: none; }

/* Leagues catalog */
.leagueFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--color-secondary-3);
  background: transparent;
  color: var(--color-white);
}
.chip:hover { background: var(--color-secondary-3); }
.chip--active { background: var(--color-primary); border-color: var(--color-primary); }

.leagueCard {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  cursor: pointer;
}
.leagueCard:hover { border-color: var(--color-support-3); }
.leagueCard__img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.leagueCard__name { font-size: 14px; font-weight: 700; color: var(--color-white); }
.leagueCard__sub { font-size: 11px; color: var(--color-support-2); }
.leagueCard__meta { font-size: 11px; color: var(--color-support-2); text-align: right; min-width: 70px; }

/* Team page */
.teamCard {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 16px;
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  margin-bottom: 16px;
  align-items: center;
}
.teamCard__crest { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--color-secondary-3); }
.teamCard__name { font-size: 22px; font-weight: 800; color: var(--color-white); }
.teamCard__meta { font-size: 12px; color: var(--color-support-2); margin-top: 4px; }
.teamStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.statBox {
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: grid;
  gap: 4px;
  text-align: center;
}
.statBox__v { font-size: 18px; font-weight: 800; color: var(--color-white); }
.statBox__l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-support-2); }

/* Standings table */
.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--color-support-1);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.standings th, .standings td { padding: 8px 12px; text-align: left; }
.standings thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
  background: var(--color-secondary-3);
}
.standings thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.standings thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.standings tbody tr:last-child td { border-bottom: 0; }
.standings tbody tr { border-top: 1px solid var(--color-divider); }
.standings tbody tr:nth-child(4n+1), .standings tbody tr:nth-child(4n+2) { /* promotion zone hint */ }
.standings td.num { text-align: center; font-weight: 700; }
.standings .pos { width: 32px; color: var(--color-support-2); font-weight: 700; }
.standings .pos--prom { color: var(--color-green); }
.standings .pos--rel { color: var(--color-red); }

/* Squad list */
.squadGroup { margin-bottom: 12px; }
.squadGroup__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-divider);
}
.playerRow {
  display: grid;
  grid-template-columns: 40px 1fr repeat(3, 48px);
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
}
.playerRow:last-child { border-bottom: 0; }
.playerRow__jersey {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-3);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-white);
}
.playerRow__name { color: var(--color-white); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playerRow__num { text-align: center; font-size: 11px; font-weight: 700; color: var(--color-support-2); }

/* Calendar day headers on tournament page */
.calDay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-support-2);
}
.calDay__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.calDay__date { color: var(--color-white); }