/* ============================================================================
   PREMATCH — restyle «look di Dav» (v0.0.1) sulla nostra lista
   Scelta operatore (22/07): l'ASPETTO di Dav (heading sport/lega, celle quota pulite,
   riga squadre+bandiere+«+N») SOPRA la nostra lista già viva raggruppata per lega —
   NIENTE checkbox-leghe (domanda ancora aperta a Dav) né menu «Today +» (spec a parte).

   Rif. `A32_prematch_2` + `dav-prematch/prematch/css/styles.css` (`.qt-box`/`.qt-btn`).
   Tutto scoped a `.lc--pm` (solo momento=prematch): la LIVE non si tocca. CSS in file,
   servito dal middleware dopo lo style del tema (regola Dav). Design D, 22-07-2026.
   ========================================================================== */

/* ── heading di lega: più netto, come le testate del design di Dav ─────────── */
/* NB: overflow VISIBILE (era hidden): l'hidden ritagliava i tooltip delle
   intestazioni mercato che sporgono dalla card (segnalazione Angelo). Gli angoli
   si arrotondano dall'header in cima; le righe sotto sono trasparenti e non
   sbordano dai bordi tondi. */
.lc.lc--pm .lc-group{margin-bottom:10px;border:1px solid rgba(28,66,103,.10);
  border-radius:10px;overflow:visible;background:#fff;box-shadow:0 1px 3px rgba(18,40,66,.06)}
.lc.lc--pm .lc-group-h{background:linear-gradient(180deg,#f4f8fc,#eaf1f8);
  border-bottom:1px solid rgba(28,66,103,.12);border-radius:10px 10px 0 0}
.lc.lc--pm .lc-group-name{font-weight:800;color:#12314f;letter-spacing:.01em}
.lc.lc--pm .lc-group-name .item-img{filter:saturate(1.05)}
/* le etichette colonna (1 · X · 2 / Over · Under) in maiuscoletto tenue come nel design */
.lc.lc--pm .lc-cols span{font-size:.72em;letter-spacing:.03em;color:#5b7793;font-weight:700}
/* i tooltip delle intestazioni mercato di BORDO non escano dallo schermo:
   la prima colonna àncora la bolla a sinistra, l'ultima a destra (freccia al centro).
   Riusa le regole align di tooltip.css senza dover mettere l'attributo nel markup. */
.lc.lc--pm .lc-cols [data-tb-tip]:first-of-type::after{left:0;right:auto;transform:translate(0,4px)}
.lc.lc--pm .lc-cols [data-tb-tip]:last-of-type::after{left:auto;right:0;transform:translate(0,4px)}
.lc.lc--pm .lc-cols [data-tb-tip]:first-of-type:hover::after,
.lc.lc--pm .lc-cols [data-tb-tip]:first-of-type:focus-visible::after,
.lc.lc--pm .lc-cols [data-tb-tip]:last-of-type:hover::after,
.lc.lc--pm .lc-cols [data-tb-tip]:last-of-type:focus-visible::after{transform:translate(0,0)}

/* ── celle quota: valori di Dav (min-width ~80, angoli 6, bold navy su azzurro) ── */
.lc.lc--pm .lc-q{min-height:38px;border-radius:6px;background:#eef3f9;
  color:#12314f;font-weight:800;font-size:13px;
  box-shadow:inset 0 0 0 1px rgba(28,66,103,.06)}
.lc.lc--pm .lc-q:hover{background:#e0e9f4}
/* la selezione: SFONDO ORO pieno (Dav 23/07: la cella selezionata è evidenziata) */
.lc.lc--pm .lc-q.qt-btn--active{background:#f5b301;color:#1a1205;box-shadow:inset 0 0 0 1px #d99400}
.lc.lc--pm .lc-odds{gap:7px;padding:9px 6px}

/* ── riga evento: un filo più d'aria, come nel riferimento ─────────────────── */
.lc.lc--pm .lc-ev{padding-top:2px;padding-bottom:2px}
.lc.lc--pm .lc-team-name{font-weight:700;color:#17324d}
.lc.lc--pm .lc-extra{color:#5b7793}

/* ── «+N» altri mercati: pill col chevron, come il «+220» di Dav ──────────── */
.lc.lc--pm .lc-plus{display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:999px;background:#eef3f9;color:#1a5da6;
  font-weight:800;font-size:.82em;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(28,66,103,.08)}
.lc.lc--pm .lc-plus:hover{background:#e0e9f4;color:#12456f}

/* ── la barra di ricerca evento sopra la lista, coerente col fondo chiaro ──── */
.lc--pm ~ * .tb-evsearch--in,
.tb-evsearch--in{border-radius:8px}

@media (max-width:680px){
  .lc.lc--pm .lc-group{border-radius:8px}
  .lc.lc--pm .lc-q{min-height:34px}
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMATCH — menu «Oggi +» (spec Dav 21/07 15:36): filtro FINESTRA TEMPORALE in
   alto a DESTRA della lista prematch. Design D, 22/07.
   COSA FA D (qui): il controllo + la tendina delle opzioni, nel look chiaro del
   prematch (bianco/navy, oro sull'attivo come le celle quota).
   COSA FA B (wiring): apre/chiude la tendina (classe `.is-open` sul `.pm-today`),
   al click di un'opzione aggiorna l'etichetta e FILTRA gli eventi per orario di
   inizio (`starts_at`) nella finestra scelta (`data-tb-win`: all/today/1h/3h/6h/
   tomorrow, o una data da `data-tb-win-date`). Nessun handler nel CSS: solo classi.
   Markup pronto in `design_reference/prematch_today/markup.html`.
   ──────────────────────────────────────────────────────────────────────────── */

/* la toolbar (barra ricerca) diventa una riga: ricerca a sinistra, «Oggi +» a destra */
.tb-evsearch:has(.pm-today){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-evsearch:has(.pm-today) .tb-evsearch--in{flex:1 1 180px;min-width:0}
.tb-evsearch:has(.pm-today) .tb-evsearch--none{flex:1 0 100%}

.pm-today{position:relative;display:inline-flex;flex:0 0 auto}
.pm-today-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;
  border-radius:8px;border:1px solid rgba(28,66,103,.14);background:#fff;color:#12314f;
  font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 1px 2px rgba(18,40,66,.06);
  transition:background .12s,border-color .12s}
.pm-today-btn:hover{background:#f4f8fc;border-color:rgba(28,66,103,.24)}
.pm-today-cal{font-size:14px;line-height:1}
.pm-today-lbl{white-space:nowrap}
/* il «+»: tondo azzurro; a menu aperto ruota in «×» */
.pm-today-plus{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:#eef3f9;color:#1a5da6;
  font-weight:900;font-size:13px;line-height:1;transition:transform .18s}
.pm-today.is-open .pm-today-plus{transform:rotate(45deg)}

/* la tendina */
.pm-today-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:214px;
  background:#fff;border:1px solid rgba(28,66,103,.14);border-radius:10px;
  box-shadow:0 14px 34px rgba(18,40,66,.20);padding:6px}
.pm-today-menu[hidden]{display:none}
.pm-today-grp{font-size:11px;font-weight:800;color:#5b7793;text-transform:uppercase;
  letter-spacing:.04em;padding:6px 8px 4px}
.pm-today-opt{display:flex;align-items:center;width:100%;gap:8px;padding:8px;border:0;
  background:none;border-radius:7px;color:#17324d;font-weight:700;font-size:13px;
  text-align:left;cursor:pointer}
.pm-today-opt:hover{background:#f4f8fc}
/* check a destra sempre presente (trasparente) → l'allineamento non salta */
.pm-today-opt::after{content:"✓";margin-left:auto;font-weight:900;color:#f5a623;opacity:0}
.pm-today-opt.is-sel{background:#fff7e9;color:#b3651e;box-shadow:inset 0 0 0 1px #f5a623}
.pm-today-opt.is-sel::after{opacity:1}
.pm-today-sep{height:1px;background:rgba(28,66,103,.10);margin:5px 4px}
.pm-today-date{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;font-weight:700;color:#17324d;font-size:13px}
.pm-today-date input[type=date]{border:1px solid rgba(28,66,103,.18);border-radius:7px;
  padding:5px 7px;color:#12314f;background:#fff;font:inherit;cursor:pointer}

@media (max-width:680px){
  .pm-today-menu{right:auto;left:0;min-width:200px}
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMATCH — HEADER DI SEZIONE SPORT sopra i gruppi-lega (Dav `.box-match--heading`).
   Step «resto pagina» n.2, design D 22/07 (ordine Angelo). Sport + chevron a sinistra,
   conteggio, e a destra le azioni del design di Dav (stampa quote, seleziona-tutte,
   espandi tutto). Look coerente con la banda sport della directory leghe (navy).
   Scoped `.pm-sporthead`; classi di Dav riusate 1:1. Markup:
   `design_reference/prematch_sporthead/markup.html`. WIRING B: chevron→cambia sport,
   `.btn-icon--print-odds`→stampa, `.btn-icon--select-all`→seleziona, `.btn-icon--go-over`
   →espandi/collassa i gruppi. Nel CSS solo classi.
   ──────────────────────────────────────────────────────────────────────────── */
.pm-sporthead{display:flex;align-items:center;gap:10px;padding:.5rem .75rem;margin:12px 0 8px;
  background:linear-gradient(180deg,#12314f,#0f2a45);color:#fff;border-radius:10px;
  box-shadow:0 1px 3px rgba(18,40,66,.10)}
.pm-sporthead .box-match--left{display:flex;align-items:center;min-width:0}
.pm-sporthead .menu-list--sport{display:inline-flex;align-items:center;gap:8px;border:0;
  background:none;color:#fff;font-weight:800;font-size:14px;cursor:pointer;padding:0;line-height:1}
.pm-sporthead .menu-list--sport .ic{width:18px;height:18px;color:#cfe3ff;flex:0 0 auto}
.pm-sporthead .menu-list--sport .chev{font-size:11px;opacity:.85}
.pm-sporthead .pml-sport-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-sporthead .cnt{font-size:12px;font-weight:800;color:#0f2a45;background:#f5b301;
  border-radius:999px;padding:1px 9px;line-height:1.5;flex:0 0 auto}
.pm-sporthead .box-match--center{flex:1 1 auto}
.pm-sporthead .box-match--right{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.pm-sporthead .icon-box{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#dfeaf6;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:15px;text-decoration:none;transition:background .12s,border-color .12s}
.pm-sporthead .icon-box:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
@media (max-width:560px){
  .pm-sporthead{gap:7px;padding:.45rem .6rem}
  .pm-sporthead .icon-box{width:26px;height:26px}
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMATCH — GRID TABELLARE per-lega (design Dav, rif Angelo_prematch_riferimento).
   Integrazione 23/07 (ordine Angelo/GC): la pagina VERA /player/?momento=prematch
   mostra la tabella per lega coi dati veri. Look chiaro navy/oro. Scoped `.pmg`.
   ──────────────────────────────────────────────────────────────────────────── */
.pmg{background:#fff;color:#12314f;font-size:13px}
.pmg-league{border:1px solid rgba(28,66,103,.12);border-radius:10px;margin:0 0 14px;
  overflow:hidden;box-shadow:0 1px 3px rgba(18,40,66,.06)}
/* banda sport (⚽ Calcio) — navy come il riferimento */
.pmg-sport{display:flex;align-items:center;gap:8px;padding:.5rem .75rem;
  background:linear-gradient(180deg,#12314f,#0f2a45);color:#fff;font-weight:800;font-size:13px}
.pmg-sport-ic{font-size:15px;line-height:1}
/* testata lega: bandiera + nome + scheda «Principale» */
.pmg-lg{display:flex;align-items:center;gap:10px;padding:.5rem .75rem;
  background:linear-gradient(180deg,#f4f8fc,#eaf1f8);border-bottom:1px solid rgba(28,66,103,.12)}
.pmg-lg-name{display:flex;align-items:center;gap:8px;font-size:13.5px}
.pmg-lg-name b{color:#12314f;font-weight:800}
.pmg-lg-flag{font-size:11px;font-weight:800;color:#5b7793;background:#e6eef7;
  border-radius:4px;padding:1px 6px;letter-spacing:.02em}
.pmg-tabs{display:flex;gap:6px;margin-left:auto}
.pmg-tab{font-weight:800;font-size:12.5px;color:#5b7793;padding:4px 12px;border-radius:999px}
.pmg-tab.is-on{color:#0f2a45;background:#fff;box-shadow:inset 0 0 0 1px rgba(28,66,103,.16)}
/* etichetta giorno */
.pmg-day{padding:7px 12px;font-weight:800;font-size:12.5px;color:#12314f;
  background:#eef3f9;border-bottom:1px solid rgba(28,66,103,.08)}
/* la tabella scrolla in orizzontale su schermi stretti senza sfondare la pagina */
.pmg-scroll{overflow-x:auto}
.pmg-tab-t{width:100%;border-collapse:collapse;min-width:820px}
.pmg-tab-t thead th{font-weight:700;color:#5b7793;font-size:11px;text-align:center;
  padding:5px 3px;border-bottom:1px solid rgba(28,66,103,.10);white-space:nowrap}
.pmg-tab-t .pmg-grp th{font-size:11.5px;color:#12456f;font-weight:800;
  border-left:1px solid rgba(28,66,103,.08);background:#f7fafd}
.pmg-tab-t .pmg-sub th{background:#fbfdff}
.pmg-c-id{width:52px;text-align:left !important;padding-left:10px !important}
.pmg-c-time{width:48px}
.pmg-c-name{min-width:180px;text-align:left !important}
.pmg-c-chart{width:30px}
.pmg-c-oth{width:34px}
.pmg-row{border-bottom:1px solid #eef2f7}
.pmg-row:hover{background:#fbfcfe}
.pmg-row>td{padding:5px 3px;text-align:center;font-size:12.5px;vertical-align:middle}
.pmg-c-id{color:#5b7793;font-variant-numeric:tabular-nums}
.pmg-c-time{color:#5b7793;font-variant-numeric:tabular-nums}
.pmg-c-name a{color:#17324d;font-weight:700;text-decoration:none}
.pmg-c-name a:hover{color:#1a5da6}
.pmg-chart,.pmg-more{color:#1a5da6;text-decoration:none;font-weight:800}
/* celle-quota: il form non deve occupare spazio; il bottone riempie la cella */
.pmg-q{padding:3px 4px !important}
.pmg-q form{margin:0;display:block}
.pmg-q .qt-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:30px;
  border:0;border-radius:6px;background:#eef3f9;color:#12314f;font-weight:800;font-size:12.5px;
  cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(28,66,103,.06)}
.pmg-q .qt-btn:hover{background:#e0e9f4}
.pmg-q .qt-btn.qt-btn--active{background:#f5b301;color:#1a1205;box-shadow:inset 0 0 0 1px #d99400}
/* posto vuoto onesto / quota bloccata / linea HND: niente bottone, solo il segno */
.pmg-q.is-void,.pmg-q.is-locked,.pmg-q.pm-hnd{color:#9fb0c2;font-weight:700}
.pmg-q.pm-hnd{color:#5b7793;font-weight:800}
@media (max-width:680px){
  .pmg-tabs{display:none}
  .pmg-q .qt-btn{min-height:28px;font-size:12px}
}

/* avviso «categoria in arrivo» delle tab-mercato non ancora popolate (grid WIDE .lcw) */
.lcw-soon{font-size:12px;font-weight:700;color:#b3651e;background:#fff7e9;
  border:1px solid #f5a623;border-radius:6px;padding:3px 10px;align-self:center;margin-left:4px}

/* ════════════════════════════════════════════════════════════════════════════
   PREMATCH GRID — RIFINITURA colonne fisse (D 23/07, assegnata da B in COORDINATION).
   Rende i GRUPPI-mercato più leggibili come nel riferimento: un filo verticale a
   separare 1X2 · Doppia chance · Over/Under · O/U 2.5 · GG/NG, e una zebra tenue
   sulle righe. Ordine celle: 1=ID 2=Orario 3=Evento 4=chart, poi i gruppi.
   ──────────────────────────────────────────────────────────────────────────── */
.pmg-tab-t tbody td:nth-child(5),   /* 1  → inizio 1X2 */
.pmg-tab-t tbody td:nth-child(8),   /* 1X → inizio Doppia chance */
.pmg-tab-t tbody td:nth-child(11),  /* Over → inizio Over/Under */
.pmg-tab-t tbody td:nth-child(14),  /* Over → inizio Over/Under 2.5 */
.pmg-tab-t tbody td:nth-child(17){  /* GG → inizio GG/NG */
  box-shadow:inset 1px 0 0 rgba(28,66,103,.10);
}
.pmg-row:nth-child(even){background:#f7fafd}
.pmg-tab-t .pmg-grp th{border-left:1px solid rgba(28,66,103,.12)}

/* ════════════════════════════════════════════════════════════════════════════
   QUOTA SELEZIONATA — SFONDO ORO evidenziato, OVUNQUE (Dav 23/07).
   Quando una quota è nel coupon la cella deve avere lo sfondo oro del brand
   (non solo un contorno): prematch/live LISTA (.lc-q.qt-btn--active), GRIGLIA
   (.pmg-q .qt-btn--active, già sopra) e DETTAGLIO evento (.chip.on).
   `!important` per battere il contorno VERDE inline della lista base (palinsesto)
   e il `.chip.on` bianco del tema importato (tb.css non veste skin 11).
   TOGGLE della classe = B: il server la mette già da `chosen`; per il feedback
   IMMEDIATO al click, B aggiunge/toglie `qt-btn--active`/`on` via JS all'inserimento
   nel coupon (e la toglie alla rimozione). Nel CSS solo lo stato.
   ──────────────────────────────────────────────────────────────────────────── */
.lc .lc-q.qt-btn--active,
.chip.on{
  background:#f5b301 !important;
  color:#1a1205 !important;
  border-color:#e0a200 !important;
  outline:none !important;
  box-shadow:inset 0 0 0 1px #d99400, 0 2px 6px rgba(245,179,1,.38) !important;
  font-weight:800 !important;
}
.chip.on .lbl,.chip.on .px{color:#1a1205 !important}