/* LA RICERCA UTENTE A CASCATA — il vestito che non aveva nessuno.
 *
 * Stefano, 06/08 01:05, con lo scatto: *«sistema bene la grafica di questo menu a cascata, così
 * non si capisce niente»*. Misurato prima di scrivere: `.ruc` e `.ruc-campo` avevano **zero
 * regole in tutti i fogli**, mentre i campi VICINI sulla stessa riga — «Tipologia movimento»,
 * «Dal giorno», «Al giorno» — sono vestiti da `.tx-campo`. Quindi la cascata usciva coi `<select>`
 * nudi del browser accanto a campi disegnati, ed è il **contrasto** che la rendeva illeggibile:
 *
 *   · le frecce delle tendine galleggiavano lontano dalle etichette — un `select` senza larghezza
 *     minima è largo quanto il suo testo, quindi ogni riga finiva in un punto diverso;
 *   · «— tutta la mia rete —» sembrava testo e non un menu: senza bordo né sfondo un `select`
 *     trasparente non si legge come campo;
 *   · le cinque righe non erano allineate fra loro, e il blocco restava impilato a sinistra
 *     mentre gli altri filtri stavano in riga.
 *
 * 🔑 PERCHÉ UN FOGLIO E NON UN `<style>` NELLA PAGINA. Le regole `.tx-*` stanno dentro
 * `rete_transazioni.html`, ed è il motivo per cui il componente **condiviso** non poteva
 * ereditarle: vivono in una pagina sola. Dav l'ha vietato per iscritto (*«non hardcodare codice
 * nella pagina ma in caso aggiungilo in un css separato»*), e qui la ragione si tocca con mano —
 * il giorno che una seconda pagina include la cascata, con lo stile nella pagina ricomincia da capo.
 *
 * ⚠️ NON SI CHIAMA `*_struttura.css`, ED È VOLUTO. Quei fogli hanno una regola severa — zero
 * colore, nemmeno un `rgb()` — perché su una pagina vestita il colore è del tema. Questo foglio
 * invece un velo lo porta: bordo e fondo `rgba(128,128,128,…)`. Non è una deroga di comodo: senza
 * bordo il campo **non si vede**, ed è esattamente il difetto che Stefano ha fotografato. Il velo
 * è neutro — lo stesso grigio dei campi accanto — quindi funziona su fondo chiaro e su fondo
 * scuro e non porta la tavolozza di nessuna skin. Chiamarlo «struttura» sarebbe stato promettere
 * una cosa che non fa.
 *
 * 📌 Dove morde, misurato il 06/08: il componente lo include **una pagina sola**,
 * `theme_family/rete_transazioni.html` (Transazioni rete, area agenzia). Nessun'altra pagina
 * cambia faccia. Il giorno che un'altra lo include, se lo trova già vestito — ed è il motivo per
 * cui queste regole non stanno dentro quella pagina.
 */

/* I cinque livelli in riga, e a capo da soli quando lo spazio finisce. `.ruc` è un elemento solo
   dentro la riga dei filtri: così si comporta bene sia lì dentro sia da solo, se un domani
   qualcuno lo mette in una pagina che non ha una riga di filtri. */
.ruc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.ruc-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* L'etichetta come quella dei campi accanto: piccola, maiuscola, un po' spenta — così si legge
   come «nome del campo» e non come una frase. */
.ruc-campo label {
  font-size: .72rem;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Il campo: bordo, fondo appena accennato e una larghezza MINIMA. La larghezza minima è la regola
   che raddrizza la colonna delle frecce — senza, ogni tendina è larga quanto la parola che
   contiene, ed è il disallineamento che si vede nello scatto di Stefano. */
.ruc-campo select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, .35);
  background: rgba(128, 128, 128, .06);
  color: inherit;
  min-width: 170px;
}
/* 🔴 IL MENU APERTO LO DISEGNA IL SISTEMA, SU FONDO BIANCO — e `color:inherit` qui sopra
   gli passa il testo CHIARO del tema scuro. Misurato sul servito il 18/08 su
   /player/calendario: timerbet rgb(255,255,255) su bianco = **1,00:1**, studio5 e
   betslot rgb(234,242,248) = **1,13:1**. Cioe' invisibile — e' la foto di Angelo.
   ⛔ Non basta scurire il testo: si fissa LA COPPIA, o il tema chiaro riprende il difetto
   al contrario. ⚠️ Non si vede provando la pagina: le voci del menu aperto non stanno nel
   DOM e nessuna misura di contrasto le trova. Si vede solo aprendolo. */
.ruc-campo select option{background:#ffffff;color:#12202c}

/* Un livello senza nodi resta a video e lo dice (regola di Angelo, 04/08): nasconderlo farebbe
   credere che il filtro non esista. Ma si vede che non si può usare, invece di sembrare un campo
   rotto — `disabled` da solo, su alcuni temi, non cambia niente a schermo. */
.ruc-campo select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Sullo stretto i cinque livelli si impilano e prendono tutta la larghezza: una tendina larga
   170px dentro uno schermo da 390 costringerebbe a scorrere in orizzontale per leggere il nome di
   un'agenzia. */
@media (max-width: 620px) {
  .ruc { gap: 8px; }
  .ruc-campo { flex: 1 1 100%; }
  .ruc-campo select { width: 100%; min-width: 0; }
}