/* stesso giallo di sfondo delle celle filtro (td.val/td.fld in bs5.css), esteso a
   tutta la pagina (come cotture.css/ordsearch.css/ritord.css) - senza, lo sfondo
   giallo si fermava alle celle dei filtri e l'area sotto (div#pivot), specie
   quando la tabella pivot e' larga e va in overflow orizzontale, restava di un
   colore diverso invece di essere "contenuta" nel giallo */
html, body {
    background-color: var(--color-gts-50, #FAFFBD);
    }

/* icone calendario/cancellino accanto ai campi data (entrambe .gv-cal-trigger, ma
   fa-regular vs fa-solid rendono a dimensione/allineamento leggermente diversi di
   default) - forzata stessa dimensione e allineamento verticale per farle combaciare */
.gv-cal-trigger {
    display: inline-flex !important;
    align-items: center !important;
    }
.gv-cal-trigger i {
    font-size: 13px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    }

/* pulsanti "bottone blu" dei campi trascinabili della pivot (PivotTable.js) - vedi anche ordcli.css su guf.
   IMPORTANTE: .pvtAttr NON deve avere "position:relative" (ne' nessun altro position
   diverso da static) - PivotTable.js (pivot.min.js), al click sulla freccina ▾,
   calcola dove aprire il popup filtro-valori (.pvtFilterBox) con jQuery
   $(triangle).position(), che restituisce le coordinate RELATIVE AL PIU' VICINO
   ANTENATO POSIZIONATO. Se .pvtAttr (il piccolo pulsante) e' quell'antenato, il
   popup finisce posizionato con coordinate relative al pulsante stesso invece che
   al contenitore che la libreria si aspetta - risultato: popup sempre in cima alla
   pagina, scollegato dal campo cliccato (visto dal vivo in devtools: "top:13.3px").
   La freccina e' quindi posizionata con un layout flex (margin-left auto) invece
   che con position:absolute, cosi' non serve rendere posizionato il pulsante. */
.pvtAttr {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 5px;
    border: 1px solid #0056b3;
    padding-right: 15px !important;
    padding-left: 15px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    }
.pvtAttr:hover {
    filter: brightness(90%);
    cursor: pointer;
    }
.pvtTriangle {
    font-size: 14px !important;
    color: #ffff00 !important;
    margin-left: 8px !important;
    opacity: 1 !important;
    }
.pvtAxisContainer li {
    margin-right: 20px !important;
    }

/* pulsanti arrotondati stile bs5 (Bootstrap non definisce ".btn-pill" di suo -
   usata gia' altrove in questa pagina per il toolbar, qui definita per davvero) */
.btn-pill {
    border-radius: 50rem !important;
    }

/* pulsanti del popup filtro-valori di PivotTable.js (Seleziona/Deseleziona tutto,
   Applica/Annulla) - di suo sono semplici <button> senza classe ne' icona;
   le classi bs5/FontAwesome vengono aggiunte via JS (vedi onRefresh in pivot.js,
   l'unico modo per distinguerli e' il testo, non hanno classi proprie), qui solo
   lo stile/spaziatura comune */
.pvtFilterBox button {
    margin: 2px 3px;
    padding: 3px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    }
.pvtFilterBox button i {
    margin-right: 4px;
    }
.pvtFilterBox p {
    text-align: center;
    }
/* il "text-align:center" sopra centra anche le righe della checklist valori
   (.pvtCheckContainer p), che invece devono restare allineate a sinistra
   (altrimenti ogni riga parte da un punto diverso a seconda della lunghezza
   del testo, dando un effetto di indentazione irregolare) */
.pvtFilterBox .pvtCheckContainer p {
    text-align: left;
    }
/* il popup e' largo 300px fisso di suo (pivot.min.css) - troppo stretto per
   "Seleziona tutto"/"Deseleziona tutto" affiancati senza andare a capo */
.pvtFilterBox {
    width: 340px !important;
    }
/* "Seleziona/Deseleziona tutto" condividono lo stesso <p> del box di ricerca
   "Filtra i risultati" (la libreria li separa con un <br>, vedi pivot.min.js) -
   idem "Applica"/"Annulla" nel loro <p>. Mettere quel <p> in flex (per evitare
   che i 2 bottoni vadano a capo tra loro) romperebbe pero' l'andata a capo del
   <br> tra la ricerca e i bottoni, mettendo tutto sulla stessa riga: percio' si
   forza la ricerca a occupare l'intera riga (flex-basis 100%), cosi' i bottoni
   restano comunque spinti sulla riga sotto. */
.pvtFilterBox p:has(button) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    }
.pvtFilterBox p:has(button) input[type="text"] {
    flex: 1 1 100%;
    }
.pvtFilterBox p:has(button) br {
    display: none;
    }

/* pagina "Modifica configurazione" (pivot_cfg_edit.*): shared/css/style-bootstrap5.css
   ha una regola globale "select, textarea{width:auto!important}" (probabilmente
   pensata solo per ".nonfluid select/textarea", ma scritta senza ripetere il
   prefisso su ognuno dei tre selettori - vedi la definizione, il primo
   "input" e' scoped a ".nonfluid" ma "select"/"textarea" no) che vince su
   ".form-control" e tiene la textarea di editing della Select SQL stretta alla
   sua dimensione intrinseca invece che larga quanto il contenitore - una
   classe piu' specifica la forza comunque a tutta larghezza. */
.cfg-select-sql {
    width: 100% !important;
    font-family: monospace;
    font-size: 13px;
    }

/* style-bootstrap5.css ha "select { width:auto !important }" non scopato a
   .nonfluid: con width:auto il form-select di Bootstrap si restringe al testo
   e la freccia dropdown nativa si sovrappone al contenuto. Qui forziamo
   padding-right sufficiente per l'arrow (Bootstrap usa 2.25rem) e un
   min-width ragionevole sui select della pagina cfg. */
#fonteSelectContainer .form-select,
.cfg-section .form-select,
#pivot .form-select,
.pivot-scenario-select {
    padding-right: 2.25rem !important;
    min-width: 120px;
    }

/* pagina "Modifica configurazione": i pulsanti "Rimuovi" (Fonte/Campo/Valore/
   Filtro) risultavano poco leggibili con solo ".btn-danger.btn-pill" (testo e
   icona quasi invisibili su questa pagina) - colore rosso forzato esplicitamente */
.cfg-danger-pill,
.cfg-danger-pill i {
    color: #dc3545 !important;
    }

/* riquadro "Testa Select": la label "Data da/a" (#testDateRangeBlock), come
   ogni elemento dentro un contenitore flex, puo' restringersi sotto la sua
   dimensione naturale e andare a capo su due righe - tenuta su una riga sola
   e non ristretta dal flex, con un po' di respiro orizzontale in piu' */
#testDateRangeBlock {
    flex-wrap: nowrap;
    }
#testDateRangeBlock label {
    white-space: nowrap;
    flex: 0 0 auto;
    margin-right: 6px !important;
    }

/* righe delle tabelle "Dimensioni"/"Misure" che appartengono gia' alla Fonte
   corrente (checkbox "Attivo" spuntata) - sfondo verdino per distinguerle a
   colpo d'occhio dalle righe non attive, in un elenco altrimenti globale
   (comune a tutte le Fonti) potenzialmente lungo. ".table-striped" imposta
   gia' uno sfondo alternato sulle righe dispari - serve piu' specificita'
   (non solo la classe da sola) per vincere. */
tr.cfg-riga-attiva,
.table-striped tr.cfg-riga-attiva {
    background-color: #e6f4e6 !important;
    }

/* pulsanti "Rimuovi" solo icona (righe di Campi/Valori/Filtri) - tolto il
   cerchio/bordo rosso e lo sfondo grigio di ".btn-danger", lasciando solo
   l'icona rossa su sfondo bianco/trasparente (diverso da "Rimuovi Fonte",
   che resta un pulsante "pillola" con bordo/sfondo visibile) */
.cfg-rimuovi-campo,
.cfg-rimuovi-filtro {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    }

/* pagina "Modifica configurazione": pulsanti Salva/Torna alla Pivot ancorati in
   alto a destra della VIDEATA (non solo della pagina), cosi' restano
   raggiungibili anche scorrendo un elenco lungo di Campi/Valori/Filtri - sotto
   la navbar fissa dell'app (body ha "padding-top:55px" in style-bootstrap5.css) */
.cfg-edit-actionbar {
    position: fixed;
    top: 62px;
    right: 20px;
    z-index: 1030;
    }

/* vista "Dettaglio" (tablesorter): evidenzia le colonne della query che sono
   effettivamente usate da un campo/valore della pivot ("campiMappa" in
   pivot_cfg.json), per distinguerle dalle altre colonne della query non
   sfruttate dalla pivot */
#rTableDettaglio th.colonna-pivot,
#rTableDettaglio td.colonna-pivot {
    background-color: var(--color-gts-50, #FAFFBD);
    }

/* pagina "Modifica configurazione": ogni sezione (combo Fonte dati in cima,
   Dati Fonte, Campi, Valori, Filtri, Colonne default) era un div/table senza
   alcun bordo/sfondo proprio (il wrapper "%block" del layout traduce in
   classi bs3 ".panel.panel-default", non stilizzate in bs5) - risultava
   tutto un unico blocco piatto sullo sfondo giallo, senza confini visivi fra
   una sezione e l'altra. Ristilizzate come "card" bianche staccate dallo
   sfondo, con bordo/ombra leggera. */
#fonteSelectContainer,
.cfg-section {
    background: #fff;
    border: 1px solid #e0e0c8;
    border-radius: 10px;
    padding: 18px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }
/* discendente (non solo figlio diretto): "Dimensioni"/"Valori da
   totalizzare" sono h4 dentro <td> (le due colonne affiancate), non figli
   diretti di .cfg-section come negli altri riquadri */
.cfg-section h4 {
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    font-size: 1.26rem; /* +20% rispetto a 1.05rem */
    font-weight: 700;
    color: #0d6efd;
    }
/* titolo "Fonte dati" della combo in cima alla pagina - stesso trattamento
   (blu, +20%) dei titoli di sezione qui sopra, per coerenza visiva */
#fonteSelectContainer .col-form-label {
    font-size: 1.2rem; /* +20% rispetto a 1rem */
    color: #0d6efd;
    }

/* le righe "Label: valore" (rigaCampo() in pivot_cfg_edit.js) usano la
   griglia Bootstrap (.col-sm-3/.col-sm-9, percentuale) - ragionevole su
   schermi normali, ma su un monitor molto largo lascia un vuoto eccessivo
   fra la label (breve) e il controllo, specie nella riga "Fonte dati" da
   sola in cima alla pagina (visto dal vivo: mezzo metro di spazio vuoto fra
   "Fonte dati" e la combo). Larghezza label fissa invece che percentuale. */
#fonteSelectContainer .col-form-label,
.cfg-section .col-form-label {
    flex: 0 0 220px;
    max-width: 220px;
    }
#fonteSelectContainer .row > div:last-child,
.cfg-section .row > div:last-child {
    flex: 1 1 auto;
    max-width: none;
    }

/* dialog $$.confirm/$$.alert (libreria terza parte jquery-message-box,
   shared/messagebox.min.css) usato da "Salva/Elimina Scenario" della pivot:
   lo stile di base risultava poco leggibile/poco coerente con il resto della
   pagina (titolo enorme, pulsanti "OK"/"Annulla" dallo stesso colore acceso e
   bordo doppio) - ristilizzato in un aspetto piu' semplice e vicino ai
   pulsanti "pill" gia' usati nella toolbar della pivot. */
.messagebox {
    border-radius: 10px !important;
    /* senza overflow:hidden, gli angoli quadrati del titolo/pulsanti (che hanno
       un loro sfondo pieno) sporgono oltre il bordo arrotondato del box */
    overflow: hidden !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit !important;
    }
.messagebox_title {
    font-family: inherit !important;
    font-variant: normal !important;
    text-transform: none !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    text-align: left !important;
    padding: 14px 20px !important;
    }
.messagebox_content {
    padding: 16px 20px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    }
.messagebox_content_label {
    font-style: normal !important;
    font-weight: 600 !important;
    color: #555 !important;
    }
.messagebox_content_input {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    }
.messagebox_content_input:focus {
    border-color: #999 !important;
    box-shadow: none !important;
    }
.messagebox_buttons {
    background: #fff !important;
    border-top: 1px solid #eee !important;
    padding: 12px 20px !important;
    }
.messagebox_buttons_button {
    border-radius: 30px !important;
    padding: 6px 18px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    border: 1px solid #ccc !important;
    background: #f0f0f0 !important;
    background-image: none !important;
    color: #333 !important;
    box-shadow: none !important;
    }
.messagebox_buttons_button:hover {
    background: #e4e4e4 !important;
    }
/* primo pulsante = "OK"/azione principale (buttonsOrder di default "done fail",
   vedi $$.confirm in gvlib.js), evidenziato rispetto al secondo ("Annulla") */
.messagebox_buttons_button:first-child {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    }
.messagebox_buttons_button:first-child:hover {
    background: #0b5ed7 !important;
    }