/* LE COLONNE DELLA PARTE CENTRALE della scheda evento — «Uno / Due / Tre» di Jesper (06/08).
 *
 * Il gesto e la preferenza NON stanno qui: sono gia' del sito (`tbColPick`/`tbColApply` in
 * `_live_score_realtime.html`, chiave `event_cols` in `player_ui/prefs.py`). Qui c'e' solo il
 * VESTITO — il controllo e le colonne — perche' su studio5 mancava solo quello.
 *
 * ⛔ ZERO COLORI SCRITTI A MANO, nemmeno nei ripieghi: solo variabili della skin. Un ripiego
 * esadecimale scatta proprio dove la skin quel token non lo dichiara, cioe' dove il nostro
 * colore non c'entra niente — e non lo trova nemmeno la ricerca di «#».
 */

/* ══════════ LE COLONNE ══════════
 * Multi-colonna e non griglia: i mercati hanno altezze diversissime (un 1X2 e' tre chip, un
 * «punteggio esatto» ne ha trentasei) e le colonne CSS li impaginano da sole senza buchi.
 * `break-inside: avoid` e' la riga che tiene una card INTERA nella sua colonna: senza, un
 * mercato si spezza a meta' fra due colonne e le sue quote finiscono sotto un altro titolo —
 * cioe' un prezzo attaccato al mercato sbagliato. */
.qt-box--container { column-gap: 10px; }
.qt-box--container > .qt-box { break-inside: avoid; -webkit-column-break-inside: avoid; }
.qt-box--container[data-cols="1"] { columns: 1; }
.qt-box--container[data-cols="2"] { columns: 2; }
.qt-box--container[data-cols="3"] { columns: 3; }

/* ══════════ IL CONTROLLO ══════════ */
.tb-colpick { position: relative; float: inline-end; }
.tb-colpick-apri {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-s, 9px); cursor: pointer;
  color: var(--secondary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
.tb-colpick-apri:hover { color: var(--primary-text, currentColor); }
.tb-colpick .pop {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 190px; padding: 10px; border-radius: var(--r, 12px);
  background: var(--primary-background, inherit);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.tb-colpick .pop.on { display: block; }
.tb-colpick .ttl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary-text, currentColor); margin-bottom: 8px;
}
.tb-colpick .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tb-colpick .row button {
  padding: 7px 4px; border-radius: var(--r-s, 9px); cursor: pointer; font-weight: 700;
  font-size: 12.5px; color: var(--primary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
/* la scelta attiva: si vede col colore dell'azione DELLA SKIN, mai col nostro */
.tb-colpick .row button.on {
  background: var(--btn-primary, currentColor);
  border-color: var(--btn-primary, currentColor);
  color: var(--btn-primary-text, var(--primary-background, inherit));
}
.tb-colpick .salva {
  display: block; width: 100%; margin-top: 9px; padding: 8px; cursor: pointer;
  border: 0; border-radius: var(--r-s, 9px); font-weight: 800; font-size: 12.5px;
  background: var(--btn-primary, currentColor);
  color: var(--btn-primary-text, var(--primary-background, inherit));
}

/* ══════════ SOTTO I 1100px: UNA COLONNA, E IL CONTROLLO NON C'E' ══════════
 * La soglia e' quella che l'implementazione di timerbet ha gia' («@media (max-width:1100px)
 * columns:1»): non se ne inventa una seconda.
 *
 * 🔴 E QUI IL CONTROLLO SPARISCE, deciso dal PM il 06/08. Sull'originale resta e non fa niente:
 * si preme «Tre» su un telefono e non cambia nulla. «Un'impostazione che non cambia niente e' un
 * bottone finto» — lo dice `player_ui/prefs.py` di se stesso. Chi lo preme pensa che sia rotto il
 * sito, non che sia una scelta. La preferenza resta ricordata e torna quando lo schermo si
 * allarga: non si perde niente, si smette solo di offrire una scelta che non esiste. */
@media (max-width: 1100px) {
  .qt-box--container[data-cols] { columns: 1; }
  .tb-colpick { display: none; }
}

/* ══════════ LA FRECCIA CHE APRE E CHIUDE LE QUOTE ══════════
 * Accanto al controllo delle colonne (Jesper, 06/08). Stessa forma del suo vicino: due bottoni
 * che stanno insieme e si comportano diversamente confondono piu' di due bottoni diversi.
 * ⛔ Zero colori scritti a mano, nemmeno nei ripieghi. */
.tb-apri-quote {
  float: inline-end; margin-inline-end: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-s, 9px); cursor: pointer;
  color: var(--secondary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
.tb-apri-quote:hover { color: var(--primary-text, currentColor); }
/* chiuso: la freccia si gira. Il verso lo dice lo STATO, non un secondo bottone. */
.tb-apri-quote.tb-chiuso svg { transform: rotate(180deg); }
/* Il corpo di un mercato chiuso sparisce; il titolo resta, o non si saprebbe cosa si sta
   riaprendo. `.hidden` e' la classe che il gesto mette, la stessa del markup del tema. */
.qt-box--container > .qt-box > .card-b.hidden { display: none; }

/* 🔴 PUNTO 4 DI JESPER (07/08 20:06): i due bottoni — apri/chiudi quote e tendina delle colonne —
   «in basso a destra dentro .b-ev-live». La classe che ha nominato non esiste: quella vera e'
   `.tb-ev-live`, ed e' il frammento CONDIVISO con timerbet, che non si tocca. Percio' i bottoni
   restano dove sono nel markup e li porta qui il posizionamento: `.tb-ev-testa-wrap` avvolge la
   barra e la testata, la barra esce dal flusso e si appoggia in basso a destra del blocco.
   ⚠️ `position:relative` sul contenitore e non su `.tb-ev-live`: quello e' del frammento comune,
   e dargli una proprieta' da qui vorrebbe dire cambiarlo anche per timerbet dal foglio di casa. */
.tb-ev-testa-wrap{position:relative}
.tb-ev-testa-wrap > .tb-ev-barra{
  position:absolute; right:8px; bottom:8px; z-index:2;
  margin-block-end:0;                    /* annulla il margine in linea: fuori dal flusso non serve */
  display:flex; gap:6px; align-items:center;
}
/* Sotto i 700px la testata si stringe e i bottoni sopra il punteggio darebbero fastidio: tornano
   nel flusso, dove stavano prima. Meglio un comando che scende che un comando che copre. */
@media (max-width:700px){
  .tb-ev-testa-wrap > .tb-ev-barra{position:static; margin-block-end:8px; justify-content:flex-end}
}