/* ============================================================================
   IL COUPON (schedina) — foglio unico, servito su ogni pagina del giocatore
   dal middleware `AppMobileShell` (quindi DOPO il CSS del tema: vince di cascata).

   Nasce da due `<style>` che stavano dentro i template (`schedina.html` e
   `_gambe_coupon.html`): stessi selettori, portati fuori come vuole la regola di
   Dav — CSS in un `.css` col `<link>`, mai inline.

   ⚠️ E con la DENSITÀ ridotta che Dav chiede da giorni. Il compatto era finito solo
   in `tb.css`, che veste il NOSTRO tema scuro: il coupon vivo gira sul tema
   IMPORTATO e quelle regole non lo toccavano nemmeno. Da qui invece sì.
   Cosa cala (nient'altro: colori, disegno e comportamento restano identici):
     · card della selezione:  76px → ~56px di altezza
     · testata, riga «accetta riproposte», righe importi/quote: padding e corpo
     · bottoni e zona prenotatore: un filo più bassi
   D, 22-07-2026.
   ========================================================================== */

/* la radice del tema è FLEX e il wrapper figlio ha min-width:auto: un nome partita
   lungo gonfiava la larghezza minima e il pannello sbordava dal rail. */
.box-sidebar--coupon>.box-sidebar--wrapper{width:100%;max-width:100%;min-width:0}
.box-sidebar--coupon{--tb-blu:var(--primary-color,#1d3b5a);--tb-oro:#e6d2a8;
  font-variant-numeric:tabular-nums;padding:6px}
.box-sidebar--coupon .tb-head{display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px 3px;font-weight:800;letter-spacing:.02em;font-size:.94em}
.box-sidebar--coupon .tb-head small{font-weight:600;opacity:.75}
.box-sidebar--coupon .tb-accetta{display:flex;gap:6px;align-items:flex-start;margin:1px 10px 6px;
  font-size:.78em;line-height:1.2;opacity:.9;cursor:pointer}
.box-sidebar--coupon .tb-accetta input{margin-top:2px}

/* card evento (scheda "tb-", usata dai temi che non montano le .cpn-) */
.tb-ev{margin:0 8px 5px;border:1px solid rgba(0,0,0,.09);border-radius:8px;overflow:hidden;
  background:var(--box-background-b,#fff);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tb-ev-h{display:flex;align-items:center;gap:6px;background:var(--tb-oro);
  color:#3a2f14;padding:4px 8px;font-weight:700;font-size:.84em}
.tb-ev-name{flex:1;width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-live{flex:none;background:#e33;color:#fff;font-size:.72em;font-weight:800;
  text-transform:uppercase;padding:1px 5px;border-radius:4px;letter-spacing:.04em}
.tb-banker{flex:none;width:20px;height:20px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:.82em;cursor:pointer;
  background:rgba(29,59,90,.25);color:#fff;transition:background .15s}
.tb-banker:hover{background:rgba(29,59,90,.5)}
.tb-banker.on{background:#f60;box-shadow:0 0 0 2px rgba(255,102,0,.25)}
.tb-leg{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 12px;font-size:.84em}
.tb-leg+.tb-leg{border-top:1px dashed rgba(0,0,0,.08)}
.tb-leg-chiusa{opacity:.5}
.tb-leg-name{flex:1;width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-leg-odds{flex:none;background:rgba(29,59,90,.09);color:var(--tb-blu);
  padding:2px 6px;border-radius:5px;font-size:.95em}
.tb-x{all:unset;cursor:pointer;color:#d33;line-height:1;padding:2px;border-radius:4px}
.tb-x:hover{background:rgba(221,51,51,.12)}

/* schede */
.box-sidebar--coupon .coupon-tabs{margin:2px 8px 0}
/* pannello campi */
.tb-panel{margin:5px 8px;border:1px solid rgba(0,0,0,.09);border-radius:8px;
  background:var(--box-background-b,#fff);padding:3px 0;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tb-cp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 10px;min-width:0;font-size:.86em}
.tb-cp-row>:first-child{flex:1;min-width:0;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-cp-row>:last-child{font-weight:700;color:var(--tb-blu);white-space:nowrap}
.tb-cp-row.tot{border-top:1px solid rgba(0,0,0,.09);margin-top:2px;padding-top:6px;
  font-size:.94em}
.tb-cp-row.tot>:first-child{opacity:1;font-weight:800}
.tb-amount{width:82px;flex:none;text-align:right;border:1px solid rgba(29,59,90,.35);
  border-radius:6px;padding:3px 7px;font-weight:700;background:#fff;color:#123}
.tb-amount:focus{outline:2px solid rgba(255,102,0,.4);border-color:#f60}

/* righe del sistema */
.tb-sys-row{display:grid;grid-template-columns:minmax(0,1fr) 32px 66px;gap:6px;
  align-items:center;padding:3px 10px;font-size:.86em}
.tb-sys-row.hd{font-weight:800;font-size:.74em;letter-spacing:.05em;opacity:.7;
  padding-bottom:1px;text-transform:uppercase}
.tb-sys-row label{display:flex;gap:6px;align-items:center;cursor:pointer;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sys-row .n{justify-self:center;background:rgba(29,59,90,.09);color:var(--tb-blu);
  font-weight:700;min-width:22px;text-align:center;border-radius:5px;padding:1px 5px;font-size:.9em}
.tb-sys-row .tb-amount{width:100%;padding:2px 5px}
.tb-cp-sub{display:flex;justify-content:space-between;gap:8px;padding:0 10px 4px 30px;
  opacity:.62;font-size:.75em}
.box-sidebar--coupon input[type=checkbox]{accent-color:#f60}

/* bottoni */
.box-sidebar--coupon #placeForm{width:100%}
.box-sidebar--coupon .tb-btns{display:flex;gap:6px;margin:8px 7px 6px}
.box-sidebar--coupon .tb-btns button{flex:1;min-width:0;border:0;cursor:pointer;
  padding:7px 0;font-weight:800;font-size:.72em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:.02em;border-radius:999px;
  color:#fff;transition:filter .15s}
.box-sidebar--coupon .tb-btns button:hover{filter:brightness(1.08)}
.box-sidebar--coupon .tb-btns .tb-annulla{background:linear-gradient(180deg,#f0503a,#dd3322)}
.box-sidebar--coupon .tb-btns .tb-scommetti{background:linear-gradient(180deg,#ff8a1e,#f56a00)}
.box-sidebar--coupon .tb-btns button:disabled{opacity:.45;cursor:default;filter:none}

/* PRENOTATORE (classi .pb-/.rd-): il Prenota è SECONDARIO (l'oro resta sul bottone
   che muove soldi), il codice è una card tratteggiata oro, il riscatto un input
   mono maiuscolo. */
.pb-zone{margin:0 8px 8px}
.pb-btn{width:100%;border:1.5px solid var(--tb-blu);background:var(--box-background-b,#fff);
  color:var(--tb-blu);border-radius:999px;padding:7px 0;font-weight:800;font-size:.76em;
  letter-spacing:.03em;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:7px}
.pb-btn svg{width:14px;height:14px}
.pb-btn:hover{background:rgba(28,66,103,.06)}
.pb-note{font-size:.68em;opacity:.65;margin:5px 2px 0;text-align:center;line-height:1.3}
.pb-done{border:1.5px dashed #F5B301;border-radius:9px;background:#FFFBEE;color:#23303F;
  padding:10px;text-align:center}
.pb-done h4{margin:0 0 2px;font-size:.82em}
.pb-code{font:800 1.45em/1.2 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.1em;color:#1c4267;margin:5px 0 2px}
.pb-exp{font-size:.72em;color:#6B7A8C;margin:0 0 7px;line-height:1.3}
.pb-exp b{color:#b3651e}
.pb-copy{border:0;cursor:pointer;background:#1c4267;color:#fff;border-radius:999px;
  padding:6px 20px;font-weight:800;font-size:.76em}
.rd-in{display:grid;grid-template-columns:1fr auto;gap:6px;margin:7px 0 0}
.rd-in input{border:1.5px solid rgba(28,66,103,.25);border-radius:7px;padding:8px 9px;
  font:700 .92em/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;min-width:0;background:var(--box-background-b,#fff);color:#123}
.rd-in input:focus{outline:2px solid #F5B301;border-color:#F5B301}
.rd-in button{border:0;cursor:pointer;background:#F5B301;color:#23303F;border-radius:7px;
  padding:0 14px;font-weight:800;font-size:.78em}
.tb-msg{margin:0 8px 6px;padding:8px 10px;font-size:.8em;border-radius:0 7px 7px 0;line-height:1.3}
.tb-msg.ok{border-left:3px solid #1f7a3f;background:#F0F9F3;color:#14532d}
.tb-msg.err{border-left:3px solid #d23c3c;background:#FBF1F1;color:#7f1d1d}
[data-tip]{cursor:help}
.tb-cp-row [data-tip], .tb-accetta [data-tip]{border-bottom:1px dotted rgba(0,0,0,.3)}
.tb-vuoto{padding:12px 10px;text-align:center;opacity:.8;font-size:.88em}
.tb-vuoto .input-box{margin-top:8px}

/* ── LE CARD DELLE SELEZIONI (.cpn-, quelle che si vedono dal vivo) ──────────
   Erano il pezzo più arioso del coupon: qui perdono ~20px per selezione senza
   perdere una virgola d'informazione. */
.cpn-card{background:var(--box-background-b,#fff);border:1px solid rgba(0,0,0,.10);
  border-radius:8px;margin:0 8px 4px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.cpn-card.is-live{border-left:3px solid #2f9e44}
.cpn-card.cpn-dead{opacity:.55}
.cpn-top{display:flex;align-items:center;gap:6px;padding:2px 8px 0;min-width:0;line-height:1.1}
.cpn-live{flex:none;background:#2f9e44;color:#fff;font-size:.55em;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;padding:1px 4px;border-radius:3px}
.cpn-comp{flex:1;min-width:0;font-size:.62em;color:#8a97a6;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpn-banker{flex:none;width:16px;height:16px;border-radius:5px;display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:.72em;cursor:pointer;
  background:rgba(29,59,90,.22);color:#123;transition:background .15s}
.cpn-banker.on{background:#f60;color:#fff;box-shadow:0 0 0 2px rgba(255,102,0,.25)}
.cpn-match{padding:0 8px 2px;font-weight:700;font-size:.78em;color:#12314f;
  display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap;line-height:1.15}
/* il nome sta su UNA riga: andando a capo si portava dietro 14px per selezione, ed è
   la ragione per cui il coupon restava alto anche coi padding ridotti. Tagliato con
   i puntini — il nome intero resta nel `title` e nella pagina dell'evento. */
.cpn-match>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cpn-match .cpn-score{color:#d98a15;font-weight:800;font-size:.92em;font-variant-numeric:tabular-nums}
.cpn-leg{display:flex;align-items:center;gap:7px;padding:1px 8px 2px;
  border-top:1px dashed rgba(0,0,0,.08)}
.cpn-odds{flex:none;min-width:40px;text-align:center;background:rgba(29,59,90,.08);
  color:#12314f;font-weight:800;font-size:.8em;padding:1px 6px;border-radius:5px;
  font-variant-numeric:tabular-nums}
.cpn-leg-txt{flex:1;min-width:0;font-size:.7em;line-height:1.2;color:#5b6b7c;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpn-leg-txt b{color:#12314f}
.cpn-leg-txt .cpn-closed{color:#d33;font-weight:700}
.cpn-x{all:unset;flex:none;cursor:pointer;color:#c2ccd6;line-height:1;padding:2px;
  border-radius:5px;font-size:.9em}
.cpn-x:hover{background:rgba(221,51,51,.12);color:#d33}

/* ── STATI DELLO SLIP VELOCE (li mette e li toglie il JS in schedina.html) ────
   La selezione che togli sparisce SUBITO (non aspetta il giro sul server) e i
   NUMERI del pannello si velano finché non arrivano quelli veri dal motore:
   il coupon non mostra mai una cifra inventata, e non resta mai fermo a mentire. */
.cpn-card.cpn-va{opacity:0;transform:translateX(14px);height:0;margin:0 8px;
  transition:opacity .12s ease,transform .12s ease,height .12s ease}
.box-sidebar--coupon.tb-aggiorna .tb-panel,
.box-sidebar--coupon.tb-aggiorna .tb-cp-row>:last-child{opacity:.45;
  transition:opacity .12s ease}
.box-sidebar--coupon.tb-aggiorna .tb-btns button{pointer-events:none;opacity:.6}
/* filo di avanzamento sotto la testata: dice «sto aggiornando» senza rubare spazio */
.box-sidebar--coupon.tb-aggiorna .tb-head{position:relative}
.box-sidebar--coupon.tb-aggiorna .tb-head::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#f60,transparent);
  animation:tb-filo 900ms linear infinite}
@keyframes tb-filo{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
@media (prefers-reduced-motion:reduce){
  .cpn-card.cpn-va{transition:none}
  .box-sidebar--coupon.tb-aggiorna .tb-head::after{animation:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   COUPON VUOTO — layout del mock Dav (23/07): messaggio + «Codice evento» con
   Salva / Carica. «Carica» = riscatto attuale; «Salva» crea il codice dal coupon
   (disabilitato a coupon vuoto). CSS in file (regola Dav). Colori dalle var del tema.
   ──────────────────────────────────────────────────────────────────────────── */
.cpn-save-form{display:contents}
.cpn-code{padding:0 10px 12px}
.cpn-code-h{font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#5b7793;margin:2px 0 6px}
.cpn-code-in{width:100%;border:1.5px solid rgba(28,66,103,.25);border-radius:8px;
  padding:9px 10px;font:700 .92em/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;background:var(--box-background-b,#fff);color:#123;min-width:0}
.cpn-code-in::placeholder{text-transform:none;letter-spacing:0;color:#9fb0c2;font-weight:600}
.cpn-code-in:focus{outline:2px solid #F5B301;border-color:#F5B301}
.cpn-code-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cpn-code-btns button{border:0;cursor:pointer;border-radius:8px;padding:10px 8px;
  font-weight:800;font-size:.82em}
/* Salva = azione verde (crea codice); Carica = riscatta (grigio-navy, come il mock) */
.cpn-save{background:#7dac2e;color:#fff}
.cpn-save:hover{filter:brightness(1.05)}
.cpn-save:disabled{background:#cdd9e6;color:#8aa0b4;cursor:not-allowed}
.cpn-load{background:#dfe9f4;color:#1c4267}
.cpn-load:hover{background:#cfe0f0}