/* ============================================================================
   classifiche.css — la veste delle pagine a classifica: campionato.php e
   palmares.php.

   Caricato da quelle due pagine via $extraCSS, come gia' fanno news.php ed
   events.php con feed.css e index.php con home.css. Arriva dopo style.css e
   mobile-app.css, quindi puo' sovrascriverli senza !important.

   Le due pagine sono gemelle — stesso switch di gironi, stesse due classifiche,
   stesse colonne — e prima ne avevano due copie divergenti nei rispettivi
   <style> inline. Qui stanno una volta sola.
   ============================================================================ */

/* ============================================================================
   ⚠️ ECCEZIONE alla veste: qui le intestazioni delle sezioni restano NERE con
   la scritta ORO, mentre altrove sono diventate occhielli tenui.
   Decisione dell'utente del 2026-09-10, presa guardando la pagina: sopra una
   tabella l'occhiello non regge, perche' la tabella ha gia' una sua riga di
   intestazione e le due si confondono. Il nero le separa.
   L'oro qui sta su fondo nero, quindi torna il #d4af37 pieno: e' sul bianco che
   e' vietato, non ovunque.
   ============================================================================ */
.app-card-header {
  background-color: var(--app-black);
  color: var(--app-gold);
  padding: 12px 15px;
  font-size: 0.78rem;
}

.app-card-header h5 {
  font-size: 0.78rem;
  color: var(--app-gold);
}

/* .text-gold vale #8A6A10 (oro DA TESTO, per il fondo chiaro) e porta
   !important: su questo nero sparirebbe. Qui torna l'oro pieno. */
.app-card-header .text-gold,
.app-card-header i {
  color: var(--app-gold) !important;
}

/* ============================================================================
   Le classifiche.
   La tabella vive dentro la scheda avorio, quindi non ha un fondo suo: le righe
   si distinguono per velo, non per riquadro.
   ============================================================================ */
.app-card .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--veste-inchiostro);
  --bs-table-border-color: var(--veste-riga);
  --bs-table-striped-bg: rgba(25, 19, 5, 0.035);
  --bs-table-striped-color: var(--veste-inchiostro);
  --bs-table-hover-bg: rgba(212, 175, 55, 0.14);
  --bs-table-hover-color: var(--veste-inchiostro);
  /* Numeri incolonnati: le cifre devono stare sulla stessa verticale da una
     riga all'altra, come sulla home (home.css:56). */
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

.app-card .table > thead > tr > th {
  background-color: transparent;
  color: var(--veste-tenue);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--veste-riga);
  vertical-align: bottom;
  padding: 10px 7px;
}

.app-card .table > tbody > tr > td {
  border-color: var(--veste-riga);
  vertical-align: middle;
  padding: 10px 7px;
}

/* ⛔ Niente `white-space: nowrap`, ne' sulle intestazioni ne' sulle celle.
   E' stato provato per evitare che «I Buongustai Dart» andasse a capo, e il
   risultato e' che la classifica non ci stava piu' in larghezza: si era
   costretti a trascinare di lato per vedere le colonne dei punti, che sono il
   motivo per cui si guarda una classifica. Meglio un nome su due righe che una
   tabella da scorrere. Il respiro si guadagna sul padding, non sui ritorni a
   capo. Le colonne numeriche restano strette da sole: il contenuto e' di una o
   due cifre. */

/* Sul telefono si stringe ancora: e' li' che la classifica trabocca. */
@media (max-width: 575.98px) {
  .app-card .table > thead > tr > th,
  .app-card .table > tbody > tr > td {
    padding: 8px 4px;
    font-size: 0.82rem;
  }

  .app-card .table > thead > tr > th {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }
}

/* I pulsantini dentro le celle («Dettagli», «Referto»): erano `btn-outline-dark`,
   cioe' un rettangolo nero in mezzo alle righe. Diventano pastiglie quiete, che
   si accendono d'oro solo quando ci passi sopra. */
.app-card .table .btn {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--veste-oro-testo);
  --bs-btn-border-color: var(--veste-riga);
  --bs-btn-hover-bg: rgba(212, 175, 55, 0.18);
  --bs-btn-hover-color: var(--veste-inchiostro);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: rgba(212, 175, 55, 0.28);
  --bs-btn-active-color: var(--veste-inchiostro);
  --bs-btn-active-border-color: transparent;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* La riga della propria squadra / del proprio nome. Era l'azzurro
   `table-primary` di Bootstrap, l'unico colore estraneo alla pagina: diventa il
   velo d'oro. */
.app-card .table > tbody > tr.table-primary {
  --bs-table-bg: rgba(212, 175, 55, 0.22);
  --bs-table-color: var(--veste-inchiostro);
}

/* ============================================================================
   Lo switch dei gironi: UN comando segmentato, non tanti bottoni.
   Prima erano riquadri col bordo oro e l'attivo nero pieno; ognuno sembrava un
   pulsante a se', e la fila andava a capo su telefono. Adesso c'e' una sola
   pista avorio con dentro le posizioni, e l'attiva porta il velo d'oro — la
   stessa pastiglia di `.home-etichetta` (home.css:540), l'unico modo in cui
   l'oro compare su fondo chiaro senza diventare illeggibile.

   ⚠️ Le due pagine avevano un `style="border-color: … !important"` incollato su
   ogni linguetta: e' stato tolto dal markup, altrimenti nessun foglio potrebbe
   vestirle. Non rimetterlo.
   ============================================================================ */
.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  /* Su telefono la pista scorre invece di andare a capo: cosi' resta UN comando
     anche con otto gironi, e non diventa un muro di riquadri. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background-color: var(--veste-scheda);
  border: none;
  border-radius: 999px;
  padding: 4px;
}

.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav-tabs .nav-item {
  flex: 1 0 auto;
  max-width: none;
  text-align: center;
}

.nav-tabs .nav-link {
  display: block;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--veste-inchiostro-2);
  background-color: transparent;
  white-space: nowrap;
}

/* La coppa su OGNI posizione non distingue niente: sono tutti gironi. Resta nel
   markup — puo' servire altrove — ma qui non si stampa. */
.nav-tabs .nav-link i {
  display: none;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background-color: rgba(25, 19, 5, 0.05);
  color: var(--veste-inchiostro);
}

/* Velo d'oro + oro DA TESTO: il #d4af37 pieno qui sotto renderebbe la scritta
   illeggibile. */
.nav-tabs .nav-link.active {
  background-color: rgba(212, 175, 55, 0.26);
  color: #6d520a;
}

/* ============================================================================
   I rimandi in cima alla pagina.
   Su campionato.php erano tre — grigio, verde e rosso — per tre link che non
   sono azioni ne' hanno gravita' diversa; ne e' rimasto uno solo, e su
   palmares.php c'e' il ritorno al campionato. Una sola famiglia per entrambi.
   Si passa per le variabili --bs-btn-* invece che per i colori: e' il modo in
   cui Bootstrap 5.3 vuole essere scavalcato, e non serve alzare specificita'.
   ============================================================================ */
/* ⚠️ L'ASPETTO dei rimandi — pastiglia avorio, icona in oro da testo — non sta
   piu' qui: e' passato in mobile-app.css, perche' la stessa fila di pulsanti
   c'e' anche su live.php, profile.php, match-report.php e results.php, che
   questo foglio non lo caricano. Qui resta solo la MISURA, che e' di queste
   due pagine. */
.btn-action {
  min-width: 160px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* Nessun margine a destra: il bordo del pulsante cade sulla stessa verticale
     del bordo destro della pista dei gironi, che sta nella stessa `.container`. */
  margin: 0 0 0 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  /* ⚠️ Anche sul telefono resta a DESTRA. Centrarlo era la regola di prima,
     quando i pulsanti erano tre e riempivano la riga; con uno solo il centro
     non e' un allineamento, e' un pulsante che galleggia. */
  .action-buttons {
    margin-top: 1rem;
    justify-content: flex-end;
    width: 100%;
  }

  .btn-action {
    margin: 0 0 0 0.5rem;
  }
}