/* ============================================================================
   FRAME LIVE dell'evento — come il template (richiesta Dav, priorità).
   Hero con "stadio" (glow campo + fari), competizione centrata, minuto/fase,
   squadre con LOGO ai lati e PUNTEGGIO grande al centro, riga azioni, tabellina
   tempi. Tema scuro nostro (navy + oro), geometria del template.
   ⚠️ Il frame oggi vive di 24 stili INLINE in `intestazione_evento.html`: B li
   toglie (lista nel task) così queste classi prendono il comando. CSS via <link>.
   Design D, 22-07-2026.
   ========================================================================== */

.match-list--single-wrapper{ margin:0 0 10px; }

/* ── HERO: lo "stadio" senza foto pesante — glow del campo + navy + fari ── */
.match-list--event{
  position:relative; overflow:hidden; isolation:isolate;
  padding:12px 16px 14px; border-radius:12px;
  color:#eaf4ff;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(31,122,63,.42), transparent 60%),
    radial-gradient(90% 60% at 50% -20%, rgba(63,140,255,.16), transparent 60%),
    linear-gradient(180deg,#0e2a45,#0a1c30);
  border:1px solid #163a5c;
}
/* la "linea di centrocampo" appena accennata, sotto il punteggio */
.match-list--event::after{
  content:""; position:absolute; z-index:-1; inset-inline:12%; inset-block-start:52%;
  height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
/* i fari già nel markup (.stadium-lights .light): tenui bagliori in alto */
.stadium-lights{position:absolute;inset-block-start:0;inset-inline:0;height:60%;z-index:-1;
  display:flex;justify-content:space-around;pointer-events:none;opacity:.5}
.stadium-lights .light{width:2px;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 70%);
  filter:blur(2px);animation:lf-flash 3.5s ease-in-out infinite}
.stadium-lights .flash2{animation-delay:.5s}.stadium-lights .flash3{animation-delay:1s}
.stadium-lights .flash4{animation-delay:1.5s}.stadium-lights .flash5{animation-delay:2s}
@keyframes lf-flash{0%,100%{opacity:.25}50%{opacity:.7}}

/* riga INFO in cima all'hero: sport/nazione/stat a sx, stadio a dx */
.match-list--info-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:11.5px;color:#a8c6e0;
}
.match-list--info-top a{color:inherit;text-decoration:none}
.match-list--info-top a:hover{color:#fff}
.match-list--left-bar{display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-list--right-bar{white-space:nowrap;display:flex;align-items:center;gap:6px}

/* competizione (con icona sport) — centrata sopra le squadre */
.match-list--single-top{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;font-size:12.5px;font-weight:700;color:#cfe0f2;
}
.match-list--single-top .btn-icon--sport img{width:16px;height:16px;opacity:.85}

/* minuto/fase — in oro, centrato, sopra il punteggio */
.tb-ev-clock{
  text-align:center;margin-top:3px;
  font:800 12.5px/1 ui-monospace,"SF Mono",Menlo,monospace;
  color:var(--money,#F5B301);letter-spacing:.03em;
}

/* ── la riga SQUADRE + PUNTEGGIO: griglia 1fr · auto · 1fr, centrata ── */
.match-list--single-bottom{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  margin-top:6px;
}
.match-list--single-left,.match-list--single-right{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.match-list--single-left{justify-content:flex-end;text-align:end}
.match-list--single-right{justify-content:flex-start;text-align:start}
.match-list--single-left .match-text,.match-list--single-right .match-text{
  font-weight:800;font-size:15px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* i LOGO/bandiere ai lati del punteggio (grandi come nel template) */
.match-list--single-bottom .icon-sport img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  background:#0a1c30;border:1px solid #1f4a72;padding:2px;
}
/* PUNTEGGIO grande e bicolore al centro */
.match-list--single-center{display:flex;flex-direction:column;align-items:center;gap:2px}
.match-list--single-center .date-time{
  font-size:34px !important;font-weight:900;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.match-list--single-center .date-time > span:first-child{color:#4aa3ff}   /* casa */
.match-list--single-center .date-time > span:last-child{color:#4fd47a}    /* ospite */

/* tabellina tempi: compatta, attaccata sotto lo score */
.tb-ev-sets{border-collapse:collapse;margin-top:2px;font-size:11px;color:#a8c6e0}
.tb-ev-sets td{padding:1px 7px;text-align:center;font-variant-numeric:tabular-nums}
.tb-ev-sets td.h{color:#7fa8cc;font-weight:700}

/* ── riga AZIONI sotto l'hero (Formazioni / Statistiche / Classifica) ── */
.ev-actions{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 14px;background:#0c2740;border:1px solid #163a5c;border-top:0;
}
.ev-actions button,.ev-actions a{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:transparent;border:0;color:#a8c6e0;font:inherit;font-size:12.5px;font-weight:600;
  padding:5px 8px;border-radius:7px;text-decoration:none;
}
.ev-actions button:hover,.ev-actions a:hover{background:rgba(255,255,255,.06);color:#fff}

/* ── barra TAB MERCATI, pulita — sulle CLASSI REALI del template
   (`.box-match--heading > .box-match--center > .match-list--tabs > .tabs-list > .tab-item`).
   B: basta togliere il <style> inline in evento.html; qui c'è il vestito. ── */
.box-match--heading{
  background:#0a1c30;border:1px solid #163a5c;border-top:0;border-radius:0 0 10px 10px;
  padding:0 8px;
}
.match-list--tabs .tabs-list{
  display:flex;align-items:center;gap:2px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
}
.match-list--tabs .tabs-list::-webkit-scrollbar{display:none}
.match-list--tabs .tab-item{
  flex:none;cursor:pointer;position:relative;
  padding:11px 12px;color:#a8c6e0;font-weight:700;font-size:12.5px;white-space:nowrap;
  border-bottom:0;opacity:1;background:transparent;
}
.match-list--tabs .tab-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.match-list--tabs .tab-item.active{color:#fff;font-weight:800}
/* Dav 25/07: QUI c'era un ::after giallo (var(--money)) sotto il tab attivo — si sommava
   alla sottolineatura VERDE del template base. Via il giallo: resta solo il verde. */
/* icone strumenti + ricerca mercato (se presenti nella heading) */
.tb-mkt-ico{
  width:30px;height:30px;display:inline-grid;place-items:center;cursor:pointer;
  color:#a8c6e0;border-radius:7px
}
.tb-mkt-ico:hover{background:rgba(255,255,255,.06);color:#fff}
.box-match--heading .input-box{
  background:#0e2a45;border:1px solid #163a5c;border-radius:7px;color:#eaf4ff;
  font-size:12px;padding:6px 10px;outline:none
}
.box-match--heading .input-box:focus{border-color:var(--money,#F5B301)}

/* riga AZIONI (Formazioni/Statistiche/Classifica) — OPZIONALE: solo se il widget la
   fornisce. B: avvolgila in `.ev-actions` per vestirla, altrimenti si salta. */
.ev-actions{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 14px;background:#0c2740;border:1px solid #163a5c;border-top:0;
}
.ev-actions button,.ev-actions a{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:transparent;border:0;color:#a8c6e0;font:inherit;font-size:12.5px;font-weight:600;
  padding:5px 8px;border-radius:7px;text-decoration:none
}
.ev-actions button:hover,.ev-actions a:hover{background:rgba(255,255,255,.06);color:#fff}

@media (max-width:640px){
  .match-list--single-bottom{gap:8px}
  .match-list--single-left .match-text,.match-list--single-right .match-text{font-size:12.5px}
  .match-list--single-bottom .icon-sport img{width:26px;height:26px}
  .match-list--single-center .date-time{font-size:26px !important}
}
@media (prefers-reduced-motion:reduce){.stadium-lights .light{animation:none}}

/* ============================================================================
   DROPDOWN Formazioni / Statistiche / Posizioni — resa coerente col frame scuro
   (BUG Dav: "si vedono male in alcuni punti"). I pannelli `.tb-ev-pan` erano
   BIANCHI (background:#fff) e si aprivano sotto l'hero navy → stonavano; l'empty
   state era slavato. Qui li rendo scuri come il frame. Specificità `.tb-ev-pan[id]`
   così vince anche PRIMA che B tolga lo <style> inline in intestazione_evento.html
   (quello va tolto: regola casa). Design D.
   ========================================================================== */

/* riga azioni: i tre raccolti al centro, cliccabili, con stato aperto */
.match-list--event .match-list--info-bottom{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.10);
}
.match-list--info-bottom > span{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 12px;border-radius:8px;
  color:#cfe0f2 !important;font-weight:700;font-size:12.5px;
  transition:background .12s,color .12s;
}
.match-list--info-bottom > span:hover{background:rgba(255,255,255,.08);color:#fff !important}
.match-list--info-bottom > span.on{background:rgba(63,140,255,.18);color:#fff !important}
.match-list--info-bottom .mdi-chevron-down{transition:transform .15s}
.match-list--info-bottom > span.on .mdi-chevron-down{transform:rotate(180deg)}

/* IL PANNELLO: da bianco a NAVY come il frame */
.tb-ev-pan[id]{
  background:#0c2740 !important;color:#dbe8f6 !important;
  border:1px solid #163a5c;border-top:0;
  border-radius:0 0 12px 12px;
  padding:14px 16px;margin:0 0 10px;
  box-shadow:0 10px 26px rgba(2,10,24,.5);
}
.tb-ev-pan[id] h4{color:#fff !important;margin:0 0 10px;font-weight:800;font-size:14px}
.tb-ev-pan[id] h4 + *{margin-top:0}

/* stato "in attivazione": leggibile, non slavato */
.tb-ev-pan[id] .tb-ev-vuoto{
  opacity:1 !important;color:#a8c6e0;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);
  border-radius:8px;padding:16px;text-align:center;font-size:12.5px;line-height:1.5;
}

/* formazioni: due colonne leggibili su scuro */
.tb-ev-pan[id] .tb-lineup .col b{color:#fff !important}
.tb-ev-pan[id] .tb-lineup .g{color:#dbe8f6;border-bottom:1px solid rgba(255,255,255,.06)}
.tb-ev-pan[id] .tb-lineup .g em{color:#8fb2d4 !important;opacity:1}

/* statistiche: righe leggibili */
.tb-ev-pan[id] .tb-stat-row{color:#dbe8f6}

/* posizioni: la tabella classifica su scuro */
.tb-ev-pan[id] .pg-table th{background:#123a5c !important;color:#cfe0f2 !important;
  border-color:#1d466f !important}
.tb-ev-pan[id] .pg-table td{color:#dbe8f6 !important;border-color:rgba(255,255,255,.08) !important}
.tb-ev-pan[id] .pg-table tr:nth-child(even) td{background:rgba(255,255,255,.03) !important}
.tb-ev-pan[id] .pg-table td b{color:var(--money,#F5B301) !important}

/* ── VIA la barra bianca vuota in alto (Dav 22/07) ───────────────────────────
   Sulla scheda evento il tema rende comunque `.top-menu--sports` (il menu sport
   orizzontale delle liste), che qui è vuoto: una striscia chiara inutile sopra il
   breadcrumb. La si toglie SOLO sulla pagina evento (quella che ha il frame single),
   non sulle liste dove il menu serve davvero. */
.main-container:has(.match-list--single-wrapper) .top-menu--sports{display:none !important}

/* ════════════════════════════════════════════════════════════════════════════
   EVENTO LIVE — hero + pannelli F/S/P (Dav 23/07). Stili SPOSTATI dall'inline
   `<style>` di intestazione_evento.html (regola casa: niente inline nella pagina).
   • I pannelli Formazioni/Statistiche/Posizioni sono OVERLAY `position:absolute`
     ancorati SOTTO l'hero (`.tb-ev-live{position:relative}` + `top:100%`): si aprono
     nello spazio sotto il box live e NON spingono i mercati (task 1+2 Dav).
   • Colori del brand dalle VARIABILI `:root` del tema (task 3): il navy dei pannelli
     usa `--header-background-color` (fallback #1c4267), niente hardcoded sparsi.
   ──────────────────────────────────────────────────────────────────────────── */
.tb-ev-live{position:relative}
/* «LIVE» IN-FLOW nell'header evento (A32 23/07): il tema stila `.btn-live--ctm` come badge
   ASSOLUTO (top/left dentro `.tb-ev-live`) e finiva ad ACCAVALLARE la tabellina dei parziali sotto
   il punteggio (bug «spazio storto»). Qui, SOLO nell'header evento, torna una pillola normale nel
   flusso — nella barra info a destra accanto allo stadio — senza sovrapporsi a niente. */
.tb-ev-live .btn-live--ctm{position:static;top:auto;left:auto;right:auto;bottom:auto;
  display:inline-block;vertical-align:middle;margin-left:6px}

/* colori testo dell'hero sul fondo scuro (valgono anche nel caricamento parziale) */
.match-list--event,
.match-list--event .match-text,
.match-list--info-top,.match-list--info-top a,
.match-list--info-bottom{color:#e8f1fb}
.match-list--info-top{opacity:1}
.match-list--event .match-list--single-top{color:#b9d0e8;font-weight:700}
.match-list--event .match-text{font-weight:800;text-shadow:0 1px 2px rgba(3,14,30,.45)}
.match-list--event .tb-ev-clock{color:#ffd25a;opacity:1;font-weight:800}
.match-list--single-top .btn-icon--sport img{max-width:20px;max-height:20px}

/* barra azioni Formazioni | Statistiche | Posizioni (era inline) */
.match-list--info-bottom{display:flex;justify-content:space-between;gap:8px;
  font-size:.86em;margin-top:8px}
.tb-ev-act{cursor:pointer;color:#dbe8f6}
.tb-ev-act:hover{color:#fff}

/* parziali dei tempi, compatti sotto lo score */
.tb-ev-sets{border-collapse:collapse;background:rgba(6,22,45,.66);border-radius:8px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(2,10,24,.30);
  overflow:hidden;font-size:.74em;line-height:1.15;color:#e8f1fb}
.tb-ev-sets td{padding:3px 9px}
.tb-ev-sets td.h{font-weight:800;opacity:1;color:#a8c4e2;text-align:center}
.tb-ev-sets td.nm{opacity:1;color:#dce9f7;font-weight:600;max-width:96px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tb-ev-sets td.hm{text-align:center;color:#3aa0ff;font-weight:800}
.tb-ev-sets td.aw{text-align:center;color:#7dda58;font-weight:800}

/* ── PANNELLI F/S/P: OVERLAY assoluto sotto l'hero (non spinge i mercati) ── */
.tb-ev-pan{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
  background:#fff;color:var(--header-background-color,#1c4267);
  border-radius:0 0 12px 12px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(10,25,45,.30)}
.tb-ev-pan.on{display:block}
.tb-ev-pan h4{margin:0 0 10px;font-weight:900}
.tb-stat-row{display:grid;grid-template-columns:44px 1fr 110px 1fr 44px;gap:8px;
  align-items:center;padding:5px 0;font-weight:700}
.tb-stat-row .lbl{text-align:center;font-size:.82em;opacity:.65;font-weight:700}
.tb-stat-row .bar{height:8px;border-radius:99px;background:rgba(28,66,103,.10);overflow:hidden;display:flex}
.tb-stat-row .bar.sx{justify-content:flex-end}
.tb-stat-row .bar i{display:block;height:100%}
.tb-ev-vuoto{text-align:center;padding:18px;opacity:.65}
.tb-lineup{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tb-lineup .col b{display:block;margin-bottom:6px;color:var(--header-background-color,#1c4267)}
.tb-lineup .g{display:flex;gap:8px;padding:3px 0;font-weight:600}
.tb-lineup .g em{font-style:normal;opacity:.5;min-width:22px;text-align:right}