/* ============================================================================
 * tm-matches.css — restyle mirato di Partite & Classifica
 * Incluso SOLO in index.html e partite-classifica.html, DOPO tm-theme.css.
 * Obiettivo: densità e gerarchia (il contenuto vero prima, meno spazio sprecato).
 * ========================================================================= */

/* ── Header: rispetta la safe-area in alto (prima il titolo era incollato al
      bordo/notch) e resta compatto. ── */
header {
  padding-top: calc(12px + var(--safe-t)) !important;
}

/* ── Segmented control (Partite/Classifica/Statistiche/Fasi Finali):
      da cerchioni alti 79px a pill compatte allineate al tema. ── */
.tabs-container {
  gap: 6px !important;
  padding: 6px !important;
}

.tab-button {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 9px 8px !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-1) !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  gap: 5px !important;
  font-size: 13px !important;
}

.tab-button i {
  font-size: 15px !important;
}

.tab-button.active {
  background: var(--primary-a20) !important;
  border-color: var(--primary-a35) !important;
  color: var(--text) !important;
}

.tab-button.active i {
  color: var(--primary-300) !important;
}

/* ── Stat cards: da 3 cardoni impilati (≈313px) a una riga 3-up compatta. ── */
.stats-overview {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  flex-direction: initial !important;
}

.stats-card {
  padding: 14px 8px !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r-md) !important;
}

/* Numero grande ma non gigante; etichetta piccola su una riga */
.stats-card .stats-number,
.stats-card .stat-number,
.stats-card > *:first-child {
  font-size: clamp(20px, 6.4vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: var(--text) !important;
}

.stats-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted-2) !important;
  letter-spacing: 0.2px;
  line-height: 1.15 !important;
}

/* ── Hero "Classifica Generale": più basso, meno invadente, sul colore torneo. ── */
.section-hero,
.classifica-hero,
.tab-content > .hero,
.leaderboard-hero {
  padding: 14px 16px !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(135deg, var(--primary-a20), var(--primary-a06)) !important;
  border: 1px solid var(--primary-a20) !important;
}

/* ── Riga classifica: righe più fitte, leggibili, bordo sottile. ── */
.standings-row,
.classifica-row,
.leaderboard-row {
  border-bottom: 1px solid var(--stroke) !important;
}

/* Margini verticali generali del contenuto un filo più stretti */
.main-container {
  margin-top: 12px !important;
}

/* ── Barra collassabile "Classifica squadre": era bianca (tema chiaro
      residuo) con testo scuro → la portiamo sul tema scuro. ── */
.standings-expand-header {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r-md) !important;
}

.standings-expand-header * {
  color: var(--text) !important;
}

/* ── Nome squadra in classifica: garantiamo massimo contrasto e togliamo
      l'eventuale animazione di colore sulle righe "in campo" che lo rendeva
      illeggibile (blu scuro su fondo scuro). ── */
.tm-team-name,
.team-playing-row .tm-team-name,
.tm-team-row .tm-team-name {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Evidenza "squadra in campo": una barretta a sinistra invece di tingere il
   testo. Discreta e leggibile. */
.team-playing-row {
  background: color-mix(in oklab, var(--warning) 9%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--warning);
}

/* Header tabella: fondo coerente col tema */
thead th,
.table-header {
  background: var(--surface-1) !important;
  color: var(--muted) !important;
}

/* ── Il nome squadra VISIBILE in classifica è un <strong> senza classe con
      colore navy #102338 (residuo tema chiaro): era testo scuro su fondo scuro,
      di fatto illeggibile. Lo riportiamo su testo chiaro. ── */
.main-container strong,
td strong,
.tm-team-row strong,
.team-playing-row strong,
.standings-row strong {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* ── Classi Tailwind grigie ereditate (text-gray-500/600/700): su fondo scuro
      risultano quasi invisibili. Le mappiamo sul muted del tema. ── */
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
  color: var(--muted-2) !important;
}