/* ============================================================================
   CRONOLOGIA SCOMMESSE (Account Betlist) — vestito completo
   Richiesta Dav 22/07, rif. `inbox/new/Dav_lista_scommesse_ref.png`:
   «deve essere così, ma lascia il menu account a sinistra come adesso».
   Quindi: la RICCHEZZA del template (filtri, toggle area, tabella larga,
   pallini d'esito con legenda, totali, paginazione) DENTRO la nostra pagina,
   con la sidebar account a sinistra invariata.

   Design D, 22-07-2026. Solo struttura vestita: i filtri, il caricamento e la
   paginazione li wira B (form GET, come `_filtri_data.html`).

   ⚠️ DUE PELLI, si sceglie con UNA classe sul contenitore `.bl`:
     .bl              → chiara, come il template di Dav (pagine a tema importato,
                        dove la card `.pg-card` è bianca)     ← default
     .bl.bl--scuro    → il nostro tema scuro (player/base.html, tb.css)
   Nessun colore è scritto due volte: tutto passa dalle variabili qui sotto.
   ========================================================================== */

.bl{
  /* — pelle chiara (default), i toni del template — */
  --bl-ink:#1c4267;          /* testo forte */
  --bl-dim:#5b7793;          /* testo debole (etichette, legenda) */
  --bl-line:rgba(28,66,103,.14);
  --bl-line-2:rgba(28,66,103,.28);
  --bl-head:#276aa6;         /* fondo intestazione tabella */
  --bl-head-ink:#fff;
  --bl-zebra:rgba(28,66,103,.035);
  --bl-hover:rgba(39,106,166,.08);
  --bl-field:#fff;           /* fondo dei campi */
  --bl-field-ink:#12314e;
  --bl-bar:rgba(39,106,166,.06);   /* fondo barra filtri e riga totali */
  --bl-acc:#276aa6;          /* azione principale (Cerca) */
  --bl-acc-ink:#fff;
  --bl-link:#1a5da6;
  --bl-money:#1c4267;

  /* — i sei esiti: gli stessi colori del template — */
  --bl-lose:#e8402a;
  --bl-win:#1f8a2f;
  --bl-pending:#f08c00;
  --bl-payed:#7ec93f;
  --bl-running:#f2d024;
  --bl-rejected:#2b4fd6;

  color:var(--bl-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* il nostro tema scuro: cambiano SOLO le variabili */
.bl.bl--scuro{
  --bl-ink:#eaf0f7;
  --bl-dim:#9fbdd2;
  --bl-line:rgba(255,255,255,.10);
  --bl-line-2:rgba(255,255,255,.20);
  --bl-head:#0e2140;
  --bl-head-ink:#eaf0f7;
  --bl-zebra:rgba(255,255,255,.035);
  --bl-hover:rgba(255,255,255,.07);
  --bl-field:#0e2140;
  --bl-field-ink:#eaf0f7;
  --bl-bar:rgba(255,255,255,.05);
  --bl-acc:#f5c451;
  --bl-acc-ink:#0e2140;
  --bl-link:#7fb7ff;
  --bl-money:#f5c451;        /* l'oro è il denaro */
}

/* ── intestazione della pagina ───────────────────────────────────────────── */
.bl-intro{margin:0 0 12px;color:var(--bl-dim);font-size:.92rem}

/* ── barra FILTRI ────────────────────────────────────────────────────────────
   Stato scommessa · Dal giorno · Al giorno · Da · A (importo) · Esito · Cerca
   È un <form method="get">: i filtri restano nell'URL (ricaricabile, linkabile,
   il tasto «indietro» fa quel che uno si aspetta). Stessa regola di `_filtri_data`. */
.bl-filtri{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  padding:12px 14px;margin:0 0 10px;
  background:var(--bl-bar);border:1px solid var(--bl-line);border-radius:10px;
}
.bl-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.bl-campo label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;color:var(--bl-dim);
}
.bl-campo input,.bl-campo select{
  padding:8px 10px;border-radius:7px;border:1px solid var(--bl-line-2);
  background:var(--bl-field);color:var(--bl-field-ink);
  font:inherit;font-size:.9rem;min-width:150px;
}
.bl-campo input:focus-visible,.bl-campo select:focus-visible,
.bl-cerca:focus-visible,.bl-reset:focus-visible,
.bl-area input:focus-visible+.bl-sw{outline:2px solid var(--bl-acc);outline-offset:2px}
/* i due importi sono corti: non meritano la larghezza di una data */
.bl-campo--num input{min-width:92px;max-width:110px}

.bl-azioni{display:flex;gap:8px;margin-left:auto}
.bl-cerca,.bl-reset{
  padding:9px 18px;border-radius:7px;border:0;line-height:1.2;
  font:inherit;font-weight:800;font-size:.88rem;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.bl-cerca{background:var(--bl-acc);color:var(--bl-acc-ink)}
.bl-cerca:hover{filter:brightness(1.06)}
.bl-reset{background:transparent;color:var(--bl-dim);border:1px solid var(--bl-line-2)}
.bl-reset:hover{color:var(--bl-ink);border-color:var(--bl-acc)}

/* ── riga TOGGLE d'area: Sport / Live / Casino ───────────────────────────────
   Interruttori veri (checkbox nascosta + <span class="bl-sw">): funzionano da
   tastiera e si leggono con lo screen reader. B li manda nel GET. */
.bl-aree{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  padding:10px 14px;margin:0 0 12px;
  background:var(--bl-bar);border:1px solid var(--bl-line);border-radius:10px;
}
.bl-area{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.9rem;font-weight:700;color:var(--bl-ink)}
.bl-area input{position:absolute;opacity:0;width:0;height:0}
.bl-sw{
  width:38px;height:20px;border-radius:999px;flex:none;position:relative;
  background:var(--bl-line-2);transition:background .15s ease;
}
.bl-sw::after{
  content:"";position:absolute;inset:2px auto 2px 2px;width:16px;border-radius:50%;
  background:#fff;transition:transform .15s ease;
}
.bl-area input:checked+.bl-sw{background:var(--bl-acc)}
.bl-area input:checked+.bl-sw::after{transform:translateX(18px)}

/* ── TABELLA ─────────────────────────────────────────────────────────────── */
.bl-wrap{overflow-x:auto;border:1px solid var(--bl-line);border-radius:10px}
.bl-tab{width:100%;border-collapse:collapse;font-size:.88rem}
.bl-tab th{
  text-align:left;padding:9px 12px;white-space:nowrap;
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;font-weight:800;
  background:var(--bl-head);color:var(--bl-head-ink);
  border-right:1px solid rgba(255,255,255,.14);
}
.bl-tab th:last-child{border-right:0}
.bl-tab td{
  padding:10px 12px;white-space:nowrap;vertical-align:middle;
  border-bottom:1px solid var(--bl-line);
}
.bl-tab tbody tr:nth-child(even) td{background:var(--bl-zebra)}
.bl-tab tbody tr:hover td{background:var(--bl-hover)}
.bl-tab tbody tr:last-child td{border-bottom:0}
.bl-id{font-weight:800;color:var(--bl-link);text-decoration:none}
.bl-id:hover{text-decoration:underline}
.bl-num{text-align:right;font-variant-numeric:tabular-nums}
.bl-money{text-align:right;font-weight:800;color:var(--bl-money);
  font-variant-numeric:tabular-nums}
.bl-ctx{color:var(--bl-dim)}
.bl-live{background:var(--bl-lose);color:#fff;font-size:.7em;font-weight:800;
  padding:1px 6px;border-radius:4px;letter-spacing:.04em;vertical-align:1px}

/* ── il PALLINO d'esito + la LEGENDA ─────────────────────────────────────────
   Il colore da solo non è un'informazione (daltonismo, stampa): ogni pallino
   porta il suo `title`/`aria-label` in parole, e la legenda sta sempre sotto. */
.bl-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--bl-dim);box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
}
.bl-dot.lose{background:var(--bl-lose)}
.bl-dot.win{background:var(--bl-win)}
.bl-dot.pending{background:var(--bl-pending)}
.bl-dot.payed{background:var(--bl-payed)}
.bl-dot.running{background:var(--bl-running)}
.bl-dot.rejected{background:var(--bl-rejected)}
.bl-tab td.bl-esito{text-align:center}

/* riga finale: legenda a sinistra, TOTALI a destra (come nel template) */
.bl-piede{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  padding:11px 14px;margin-top:-1px;
  background:var(--bl-bar);border:1px solid var(--bl-line);
  border-radius:0 0 10px 10px;
}
.bl-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  font-size:.8rem;color:var(--bl-dim);font-weight:600}
.bl-legenda span{display:inline-flex;align-items:center;gap:6px}
.bl-totali{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto;
  font-size:.85rem;color:var(--bl-dim);font-weight:700}
.bl-totali b{color:var(--bl-money);font-weight:900;font-variant-numeric:tabular-nums}
/* quando c'è il piede, la tabella non arrotonda in basso */
.bl-wrap:has(+.bl-piede){border-radius:10px 10px 0 0;border-bottom:0}

/* ── PAGINAZIONE ─────────────────────────────────────────────────────────── */
.bl-pag{display:flex;justify-content:center;gap:6px;margin:14px 0 4px;flex-wrap:wrap}
.bl-pag a,.bl-pag span{
  min-width:34px;height:34px;padding:0 9px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bl-line-2);background:var(--bl-field);color:var(--bl-ink);
  font-size:.86rem;font-weight:700;text-decoration:none;
}
.bl-pag a:hover{border-color:var(--bl-acc);color:var(--bl-acc)}
.bl-pag .on{background:var(--bl-acc);color:var(--bl-acc-ink);border-color:var(--bl-acc)}
.bl-pag .off{opacity:.4;pointer-events:none}

/* ── vuoto ───────────────────────────────────────────────────────────────── */
.bl-vuoto{padding:28px 14px;text-align:center;color:var(--bl-dim)}

/* ── piccolo: la tabella diventa schede, stessa informazione ─────────────── */
.bl-cards{display:none}
@media (max-width:820px){
  .bl-wrap{display:none}
  .bl-cards{display:block;border:1px solid var(--bl-line);border-radius:10px 10px 0 0;
    border-bottom:0;overflow:hidden}
  .bl-card{display:block;padding:11px 13px;text-decoration:none;color:inherit;
    border-bottom:1px solid var(--bl-line)}
  .bl-card:nth-child(even){background:var(--bl-zebra)}
  .bl-card-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .bl-card-t b{color:var(--bl-link)}
  .bl-card small{display:block;margin-top:4px;color:var(--bl-dim)}
  .bl-card small b{color:var(--bl-money)}
  .bl-campo input,.bl-campo select{min-width:0;width:100%}
  .bl-campo{flex:1 1 45%}
  .bl-azioni{margin-left:0;width:100%}
  .bl-totali{margin-left:0;width:100%}
}

/* ============================================================================
   FILTRI DENTRO LA CARD (Dav 22/07) — Cronologia scommesse
   La barra `_filtri_data` (`.tb-filtri`) nasce per la fascia BLU dell'header conto:
   testo chiaro, fondo translucido. Dav l'ha voluta DENTRO la card bianca, sopra la
   tabella (`.pg-card-flt`). Qui la rivesto per il fondo chiaro — più specifico di
   `.tb-filtri`, quindi vince senza toccare il partial condiviso.
   ========================================================================== */
.pg-card-flt{padding:12px 14px 0}
.pg-card .pg-card-flt .tb-filtri{
  background:transparent;border:0;border-bottom:1px solid rgba(28,66,103,.12);
  border-radius:0;margin:0 0 4px;padding:0 0 12px;
}
/* etichette leggibili sul bianco (erano bianche su blu → invisibili) */
.pg-card .pg-card-flt .tb-filtri label{color:#5b7793;opacity:1}
/* CAMPI BIANCHI, identici a «Le mie scommesse» (target `.bl` chiaro: --bl-field:#fff /
   --bl-field-ink:#12314e). Erano navy (#0e2140): la parità che D aveva segnalato. Ora i filtri
   transazioni e quelli delle scommesse hanno lo STESSO campo, come chiedeva Angelo. */
.pg-card .pg-card-flt .tb-filtri input,
.pg-card .pg-card-flt .tb-filtri select{
  border-color:rgba(28,66,103,.28);background:#fff;color:#12314e;
}
/* icona calendario: ora che il campo è BIANCO, l'indicatore nativo (scuro) si vede già; annullo
   l'invert che `app_mobile.css` applica ai `.tb-filtri` scuri (più specifico → vince), sennò
   sarebbe bianco-su-bianco. */
.pg-card .pg-card-flt .tb-filtri input[type=date]::-webkit-calendar-picker-indicator{
  filter:none;
}
/* Filtra resta oro; Pulisci diventa un contorno scuro sul bianco */
.pg-card .pg-card-flt .tb-filtri button{background:#f5c451;color:#0e2140}
.pg-card .pg-card-flt .tb-filtri .tbf-pulisci{
  background:transparent;color:#5b7793;border:1px solid rgba(28,66,103,.28);
}
.pg-card .pg-card-flt .tb-filtri .tbf-pulisci:hover{color:#1c4267;border-color:#276aa6}