/* ============================================================================
   CRONOLOGIA SCOMMESSE — la STRUTTURA, e solo quella.

   Perché questo foglio esiste (Stefano AR, 03/08: «le giocate arrivano di nuovo
   aperte»). Su una skin con TEMA IMPORTATO il middleware non serve `casa.css`:
   si caricano solo i `FOGLI_STRUTTURALI` (decisione di Angelo del 29/07,
   commit 716360fb — il vestito è del tema). `betlist.css` non era fra quelli,
   quindi la cronologia arrivava SENZA una riga del suo stile: la tabella e le
   schede si vedevano tutte e due, ogni giocata stampata due volte e per intero.

   Qui c'è solo ciò che serve perché la pagina sia LEGGIBILE anche se il tema non
   sa niente di noi: la griglia delle colonne e l'impilamento sul telefono.
   ⚠️ NIENTE COLORE — gli strutturali si caricano PRIMA dello `<style>` del tema,
   e il colore resta l'ultima parola del tema. Il vestito sta in `betlist.css`.
   C'è un test che lo tiene fermo (`tests/test_betlist_righe_chiuse.py`).

   La riga resta CHIUSA da sola: è un `<details>`, cioè HTML. Questo foglio non
   la chiude e non potrebbe riaprirla — è il punto di tutta la correzione.
   ========================================================================== */

.bl-lista { display: block; }

/* — le nove colonne, una griglia sola per l'intestazione e per ogni riga — */
.bl-intesta,
.bl-riga > .bl-linea {
  display: grid;
  grid-template-columns:
    minmax(5.5em, .8fr)   /* ID */
    minmax(7em, 1fr)      /* Tipo */
    minmax(3.5em, .4fr)   /* Eventi */
    minmax(5.5em, .6fr)   /* Contesto */
    minmax(9em, 1fr)      /* Data scommessa */
    minmax(9em, 1fr)      /* Data ultimo evento */
    minmax(6em, .7fr)     /* Importo */
    minmax(6em, .7fr)     /* Vincita */
    minmax(3.5em, .35fr); /* Esito */
  align-items: center;
  gap: 0 10px;
  padding: 9px 12px;
}

/* — LA VARIANTE DELLA RETE: le stesse nove colonne PIÙ «Utente» (Angelo, 04/08) —
 * La colonna in più va DICHIARATA anche qui: una griglia a nove colonne con dieci celle dentro
 * manda l'ultima a capo — misurato nel proof, «Resultado» finiva su una seconda riga e la
 * tabella sembrava rotta. La lista è la stessa (`_lista_giocate.html`): cambia solo quante
 * colonne dichiara chi la ospita. */
.bl-lista--rete .bl-intesta,
.bl-lista--rete .bl-riga > .bl-linea {
  grid-template-columns:
    minmax(5.5em, .8fr)   /* ID */
    minmax(6em, .8fr)     /* Utente — solo in rete: distingue i sottoconti */
    minmax(7em, 1fr)      /* Tipo */
    minmax(3.5em, .4fr)   /* Eventi */
    minmax(5.5em, .6fr)   /* Contesto */
    minmax(9em, 1fr)      /* Data scommessa */
    minmax(9em, 1fr)      /* Data ultimo evento */
    minmax(6em, .7fr)     /* Importo */
    minmax(6em, .7fr)     /* Vincita */
    minmax(3.5em, .35fr); /* Esito */
}

/* LE GAMBE stese sotto la riga (34-r): una fila per gamba, non una tabella dentro la tabella. */
/* LE GAMBE ESPANDIBILI (Angelo, 04/08 22:43): sulla rete stavano sempre stese e con 1.788
   coupon la pagina diventava un muro. Il riassunto dice quante sono, così si sa cosa si apre. */
/* ⛔ NESSUN COLORE QUI. Gli strutturali si caricano PRIMA dello <style> del tema: un colore
   qui dentro ridipinge la pagina di un tema che non l'ha chiesto (stessa regola di
   chrome_struttura.css e casino_struttura.css). Il separatore delle gambe espandibili
   (Angelo, 04/08 22:43) era nato qui con un rgba: la STRUTTURA resta, il colore lo mette
   il vestito con `--bl-line` — la variabile che `betlist.css` usa GIÀ per gli altri separatori
   di questa lista, definita per tutt'e due le pelli (chiara e scura). Così il bordo delle gambe
   segue la skin invece di avere un grigio suo, e senza tema resta TRASPARENTE: non si vede e non
   ridipinge niente. */
.bl-gambe-d { border-top: 1px solid var(--bl-line, transparent); }
.bl-gambe-s { list-style: none; cursor: pointer; padding: 6px 12px; font-size: .78rem;
  opacity: .7; user-select: none; }
.bl-gambe-s::-webkit-details-marker { display: none; }
.bl-gambe-s::before { content: '\203A'; display: inline-block; width: 12px;
  transition: transform .15s; }
.bl-gambe-d[open] > .bl-gambe-s::before { transform: rotate(90deg); }
.bl-gambe-s:hover { opacity: 1; }
.bl-gambe { padding: 0 12px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.bl-gamba {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(3.5em, .3fr);
  gap: 0 10px; font-size: .86em; opacity: .92; padding: 2px 0;
}
.bl-gamba .bl-g-qt { text-align: right; font-variant-numeric: tabular-nums; }
.bl-gamba .bl-g-quando { opacity: .7; }

/* La LEGENDA in fondo: le voci in fila, non incollate una all'altra (misurato nel proof:
 * «In giocoGanadaPerdida…» tutto attaccato, perché senza questa riga sono <span> di seguito). */
.bl-piede { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between;
  padding: 10px 12px; }
.bl-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: .82em; }
.bl-legenda span { display: inline-flex; align-items: center; gap: 5px; }

.bl-riga > .bl-linea { cursor: pointer; list-style: none; }
/* LA RIGA È UN LINK (Stefano 03/08 22:11, Angelo 04/08 01:44): un clic e si apre la giocata per
   intero. Senza queste due proprietà la riga uscirebbe blu e sottolineata — l'aspetto attuale è
   già stato approvato, e cambiarlo mentre si cambia il clic sarebbe due modifiche per una. */
.bl-riga > a.bl-linea { color: inherit; text-decoration: none; }
/* la freccetta di sistema starebbe FUORI dalla griglia e sfalserebbe le colonne */
.bl-riga > .bl-linea::-webkit-details-marker { display: none; }
.bl-riga > .bl-linea::marker { content: ""; }

.bl-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-num, .bl-money { text-align: right; }
.bl-esito { text-align: center; }

/* — il dettaglio dentro la riga — */
.bl-dett { padding: 4px 12px 12px; }
.bl-gamba {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 7px 0;
}
.bl-g-q { text-align: right; font-variant-numeric: tabular-nums; }
.bl-apri { display: inline-block; margin-top: 6px; }

/* — piccolo: la riga si impila, e ogni campo si presenta da sé —
   Le etichette arrivano dai `data-t` del markup: la stessa riga serve le due
   misure, senza una seconda copia della lista da tenere allineata. */
@media (max-width: 820px) {
  .bl-intesta { display: none; }
  .bl-riga > .bl-linea {
    grid-template-columns: 1fr 1fr;
    gap: 3px 10px;
    padding: 10px 12px;
  }
  .bl-c { white-space: normal; }
  .bl-c::before {
    content: attr(data-t) ": ";
    font-size: .78em;
    opacity: .7;
  }
  .bl-num, .bl-money, .bl-esito { text-align: left; }
  .bl-gamba { grid-template-columns: 1fr auto; }
}