/* IL FOGLIO DEL PANNELLO CAMPIONATI TOP — e arriva a TUTTE le skin, che è il punto.
 *
 * PM, 06/08: «foglio proprio, caricato dal widget che lo usa». Due ragioni, misurate:
 *
 *   · `casa.css` NON arriva alle skin col tema importato. Misurato sulla pagina servita di
 *     bet365: i suoi <link> sono `styles.css`, `template_b`, `color_b365`, `extra.css`,
 *     `casa.css` — `tb.css` non c'è. Mettere le regole del pannello in `tb.css`, come avevo
 *     fatto io per prima, vuol dire che sulle skin col tema importato non arrivano MAI.
 *   · e 32 KB addosso a ogni pagina per una cosa che serve a UNA zona è spreco.
 *
 * Quindi: questo foglio e `loghi_leghe.css` li carica il pannello stesso
 * (`player/_pannello_leghe_css.html`), una volta sola per pagina. Pesa dove serve, e arriva
 * ovunque il pannello ci sia.
 *
 * ⚠️ NON è generato: `loghi_leghe.css` lo scrive `manage.py loghi_leghe`, questo si scrive a mano.
 * Due file separati apposta — uno cambia quando cambiano i loghi, l'altro quando cambia la regola.
 */

/* ══════════ LA RIGA SENZA NIENTE DA VENDERE ══════════
 * PM, 06/08: «una riga senza turno giocabile NON dev'essere cliccabile — non un link spento
 * dall'aspetto uguale: proprio non un link».
 *
 * La prima metà è già fatta nel markup: dove non c'è niente da vendere il template scrive uno
 * <span>, non un <a>. È la guardia vera, e regge anche senza una riga di CSS.
 * La seconda metà è qui: **deve anche VEDERSI** che non è cliccabile. Una riga identica alle
 * altre che non risponde al clic è una promessa non mantenuta di secondo tipo — il giocatore
 * pensa che il sito sia rotto invece di capire che quella lega oggi non gioca.
 *
 * Il pannello è disegnato in SEI markup diversi (misurato il 06/08: i due legacy, arena, la
 * famiglia di temi, il sottomenu, il frammento di casa). Le classi sono due — `.lg-vuota` e
 * `.league-item--vuota` — e valgono per tutti e sei. */
.lg-vuota > span,
.wdg-league-vuota > span,
.league-item--vuota {
  opacity: .45;
  cursor: default;
  /* Nessun bersaglio: né clic, né mano, né fermata del tabulatore. Il <span> già non naviga;
     questo toglie anche il passaggio del mouse che il tema disegna su `.league-item`. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* La scatola della riga spenta nella BARRA di casa: stesso passo e stessa altezza della riga
   viva, o dieci righe di cui otto vuote sembrerebbero una lista sbagliata invece di un
   campionato fermo. (Era in `tb.css`: spostata qui perché lì non arrivava alle skin importate.) */
.rail-card .wdg-league-list .wdg-league-vuota > span {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--r-s); color: var(--primary-text);
  font-weight: 600; font-size: 12.5px;
}
.rail-card .wdg-league-list .wdg-league-vuota .muted {
  font-weight: 500; letter-spacing: .2px;
  /* 🔴 La data del prossimo turno NON va a capo. Trovato accendendo il pannello in prova col
     caso misto (06/08): su «UEFA Champions League» — il nome piu' lungo dei dieci — il nome
     andava su due righe e la data si spezzava dietro, «Dom 9 / Ago». Una data spezzata in due
     righe dentro una colonna di 236px si legge come un errore di impaginazione, non come un
     dato. Il nome puo' andare a capo, la data no. */
  white-space: nowrap;
}

/* La stessa riga dentro il WIDGET della home composta (l'altro dei due posti di casa).
   ⚠️ E la data non va a capo NEMMENO QUI. La prima volta l'avevo scritto solo per `.rail-card`, e
   la misura sul banco diceva ancora «una data su due righe»: il pannello vive in DUE posti, e una
   regola scritta per uno dei due vale per metà dei casi. È lo stesso inciampo del difetto che
   `_top_league_lista.html` esiste apposta per non avere più — solo dal lato del foglio. */
.wdg-league-list > .wdg-league-vuota > span {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; line-height: 1.3;
}
.wdg-league-list > .wdg-league-vuota .muted { white-space: nowrap; }

/* ══════════ IL LOGO DELLA LEGA ══════════
 * La forma della pastiglia sta qui; le dieci immagini stanno in `loghi_leghe.css`, che è
 * generato. Una lega senza logo non porta la classe e non disegna niente: è la lezione dei 38
 * riquadri vuoti dei provider — la pagina non deve poter chiedere un'immagine che non esiste. */
.lg-logo {
  display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}