/* Un solo font in tutta l'app: quello di default del body di Bootstrap (--bs-font-sans-serif). Anche il
   monospace di Bootstrap (code/pre/kbd) viene riportato allo stesso font; niente font dedicati per titoli
   o codici. */
:root{
  --bs-font-monospace:var(--bs-font-sans-serif);
}
html{scroll-behavior:smooth;}
body{background:#f7f8fa;}
/* Colonne a larghezza fissa in px (non % o auto) cosi' restano identiche fra un gruppo e l'altro
   dell'accordion, invece di adattarsi al contenuto della singola tabella (ogni gruppo ha la sua). */
.parametri-tabella{table-layout:fixed;}
.brand-title{font-size:22px;}
/* Controlli di modifica di piani e parametri: solo per il supervisore (body.puo-configurare, vedi
   inizializzaUtenteCorrente in js/app.js). !important: vince anche sui toggle d-none fatti da JS. */
body:not(.puo-configurare) .solo-supervisore{display:none !important;}
/* Codici, lotti e numeri: stesso font del resto, solo cifre a larghezza fissa per tenerle allineate in
   colonna. */
.font-mono{font-variant-numeric:tabular-nums;}
/* Menu fra le pagine (#nav nella navbar di index.html): replica lo stile delle schede nav-tabs dell'applicativo
   logistic (MDB UI Kit 6.4.0, che qui non e' caricato) - maiuscolo, niente bordi, sottolineatura blu
   sulla scheda attiva. Limitato a .menu-pagine: le schede interne alle pagine (es. Bozza/Completato/
   Chiuso) restano quelle standard di Bootstrap. */
.menu-pagine{border-bottom:0;}
.menu-pagine .nav-link{margin-bottom:0;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  text-transform:uppercase;line-height:1;font-weight:500;font-size:12px;color:rgba(0,0,0,.55);padding:17px 29px 16px;}
.menu-pagine .nav-link:hover{background-color:#f7f7f7;border-color:transparent;color:rgba(0,0,0,.55);}
.menu-pagine .nav-link:focus{border-color:transparent;}
.menu-pagine .nav-link.active{color:#3b71ca;border-color:#3b71ca;background-color:#fff;}
.placeholder-text{color:#6c757d;font-style:italic;}
@media (min-width: 992px){
  .note-panel{border-left:1px solid #dee2e6;padding-left:1.5rem;}
}
/* modal-xl di Bootstrap e' fissa a 1140px: per la griglia parametri, che ha 5 colonne piu' la colonna
   note, serve piu' respiro. Vincolata comunque da un max-width per non arrivare a bordo schermo sui
   monitor piu' larghi. */
#modal-verbale .modal-dialog{max-width:1900px;width:97vw;}
/* modal-dialog-scrollable vincola modal-content a un max-height (l'altezza della dialog), ma senza
   un'altezza esplicita il modal-content si dimensiona sul contenuto: con pochi parametri la modale si
   apre piu' bassa e "salta" di dimensione aprendo un gruppo. Height:100% la forza sempre al massimo
   disponibile fin dall'apertura. */
#modal-verbale .modal-content{height:100%;}
.verbale-header{align-items:flex-start;}
.verbale-header-info{min-width:0;}
#verbale-titolo{font-size:1.35rem;font-weight:600;}
.verbale-stato-badge{font-size:1.15rem;padding:.55em 1em;}
/* La modale usa modal-dialog-scrollable, quindi modal-content e' gia' vincolata all'altezza della
   viewport: le righe/colonne qui sotto devono SOLO riempire lo spazio disponibile (flex-grow-1) e
   restringersi di conseguenza (min-height:0, altrimenti un figlio flex non si restringe mai sotto la
   dimensione del suo contenuto), non avere un'altezza fissa in vh - altrimenti su schermi piu' bassi
   la modale torna piu' alta della viewport e si scrolla sia dentro che la pagina intera.
   Niente .row/.col-lg-* di Bootstrap qui: sono flex-wrap:wrap, e con flex-wrap:wrap lo stretch verticale
   delle colonne diventa inaffidabile quando l'altezza del contenitore deriva a sua volta da flex-grow su
   piu' livelli annidati (il nostro caso) - le colonne finiscono per dimensionarsi sul contenuto invece
   che restringersi, e lo scroll "risale" tutto su modal-body invece di restare nella colonna giusta.
   Riga flex semplice (nowrap, una sola linea) invece: qui lo stretch verticale e' affidabile. */
.verbale-righe{display:flex;flex-wrap:nowrap;gap:1.5rem;min-height:0;}
.verbale-colonna{display:flex;flex-direction:column;min-height:0;}
/* La colonna note tiene la larghezza che aveva con la modale a min(1500px, 94vw) (un terzo dello spazio
   interno, tolti padding di modal-body 2x1rem e gap 1.5rem): lo spazio in piu' della modale allargata va
   tutto ai parametri. */
.verbale-colonna-parametri{flex:1 1 0;min-width:0;}
.verbale-colonna.note-panel{flex:0 0 calc((min(1500px, 94vw) - 3.5rem) / 3);}
.verbale-scroll{min-height:0;}
@media (max-width: 991.98px){
  .verbale-righe{flex-direction:column;}
  .verbale-colonna-parametri, .verbale-colonna.note-panel{flex:0 0 auto;max-height:50vh;}
}
/* I parametri della modale verbale sono in pannelli accordion per macro-gruppo (chiusi di default, vedi
   pannelloGruppo/pannelloExtra in app.js): ogni pannello ha la sua tabella, con l'intestazione ripetuta
   prima di ogni parametro (vedi INTESTAZIONE_PARAMETRO_VERBALE), niente header fisso condiviso fra i gruppi. table-layout:fixed qui serve solo a tenere le colonne allineate
   fra i pannelli (stesso <colgroup> ovunque). */
.verbale-tabella{table-layout:fixed;width:100%;}
.verbale-accordion .accordion-button{gap:.5rem;}
/* Contorno azzurro (stesso colore della testata aperta) attorno al pannello aperto, per legare le righe
   dei parametri al loro gruppo e non al successivo. Outline e non border: fra accordion-item adiacenti
   Bootstrap toglie il border-top, quindi un bordo non chiuderebbe il contorno in alto. */
.verbale-accordion .accordion-item:has(>.accordion-collapse.show){position:relative;z-index:1;outline:2px solid var(--bs-primary-border-subtle);outline-offset:-2px;}
/* Registrazioni segnate da eliminare al prossimo Salva: vedi
   bottoneEliminaRegistrazione/rigaRegistrazioni in app.js. Si barra solo il valore, non la colonna col bottone
   "Annulla" (text-decoration si propaga ai figli e non si puo' togliere da li'). */
.registrazione-da-eliminare>td:not(:last-child){text-decoration:line-through;opacity:.6;}
/* Ogni parametro e' un blocco intestazione (intestazione-parametro) + testata (riga-parametro) + elenco
   registrazioni (registrazioni-dettaglio, vedi rigaValore in app.js): niente bordo fra le righe del blocco,
   separatore marcato fra un parametro e il successivo (sopra la sua intestazione). */
.verbale-tabella>tbody>tr.intestazione-parametro:not(:first-child)>th{border-top:2px solid #adb5bd;}
.verbale-tabella>tbody>tr.riga-parametro:has(+ tr.registrazioni-dettaglio)>td{border-bottom:0;}
.verbale-tabella>tbody>tr.registrazioni-dettaglio>td{padding-top:0;}
/* Limite atteso come scala di fasce colorate in ordine di valore (vedi rangeHint/fasceLimite in app.js). */
.limite-scala{display:flex;flex-wrap:wrap;gap:2px;margin-top:.25rem;}
.limite-scala .badge{font-weight:500;}
.registrazioni-tabella td,.registrazioni-tabella th{padding:.1rem .25rem;background:transparent;}
/* Intestazione piccola e discreta dell'elenco registrazioni (vedi rigaRegistrazioni in app.js). */
.registrazioni-tabella>thead>tr>th{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--bs-secondary-color);border-bottom:1px solid var(--bs-border-color);}
/* Box "nuova nota": un form-control che contiene il riferimento alla registrazione (se c'e', vedi
   impostaRiferimentoNota in app.js) e il campo di testo senza bordo, come l'allegato nelle chat. Il focus del
   campo accende il bordo di tutto il box. */
.nota-composer{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;}
.nota-composer:focus-within{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);}
.nota-composer>input{flex:1 1 8rem;min-width:0;border:0;outline:0;padding:0;background:transparent;}
/* Riferimento di una nota (registrazione o, per le note piu' vecchie, parametro): nel box di scrittura (con la x per toglierlo) e nell'elenco note. */
.nota-riferimento{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.05rem .4rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-tertiary-bg);font-size:.75rem;color:var(--bs-emphasis-color);}
.nota-riferimento>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nota-riferimento .btn-close{font-size:.5rem;}
/* Bottone "nota" sulla riga di una registrazione (vedi bottoneNotaRegistrazione in app.js): discreto. */
.bottone-nota-parametro{font-size:.9rem;opacity:.6;}
.bottone-nota-parametro:hover,.bottone-nota-parametro:focus{opacity:1;}
/* Icona delle annotazioni del parametro nella modale verbale, con il testo in un tooltip (vedi iconaNoteParametro
   in app.js): a capo come scritto nella modale del parametro, allineato a sinistra. */
.icona-nota-parametro{color:var(--bs-info-text-emphasis);cursor:help;}
.tooltip-nota-parametro .tooltip-inner{white-space:pre-line;text-align:left;max-width:360px;}
/* Sfondo di una modale aperta sopra un'altra (vedi il listener show.bs.modal in app.js): piu' scuro, cosi' la modale
   sottostante passa chiaramente in secondo piano. */
.modal-backdrop.modal-backdrop-sovrapposta.show{opacity:.65;}
/* Tag del tipo (di verbale, piano o parametro) nel titolo delle tre modali, stessa dimensione ovunque (vedi
   apriDettaglioVerbale, mostraIntestazione e tagTipoParametro in app.js). */
.verbale-tipo-badge{font-size:1rem;padding:.45em .8em;vertical-align:middle;}

/* Modale piano di campionamento: le voci sono in pannelli accordion per macro-gruppo, stesso pattern di
   modal-verbale sopra (vedi pannelloGruppoPiano/pannelloExtraPiano in app.js), dentro un contenitore
   flex-column con min-height:0. Qui pero' modal-body e' dentro un <form> (necessario per il submit
   "Salva"), quindi il form stesso deve partecipare alla catena flex/min-height:0 — altrimenti il
   contenuto interno non si restringe e la modale torna piu' alta della viewport. */
/* Piu' larga di #modal-verbale: la griglia voci ha 9 colonne e accanto c'e' la colonna storico revisioni. */
#modal-piano .modal-dialog{max-width:1900px;width:97vw;}
/* Storico revisioni: stessa colonna di destra delle note verbale (.verbale-colonna.note-panel), ma a larghezza
   fissa, cosi' tutto lo spazio in piu' va alla griglia voci. Sotto i 992px torna in colonna come le note. */
@media (min-width: 992px){
  .verbale-colonna.piano-colonna-storico{flex:0 0 320px;}
}
/* Sempre a tutta altezza fin dall'apertura, come #modal-verbale .modal-content sopra (stesso motivo). */
#modal-piano .modal-content{height:100%;}
#modal-piano form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
/* Header con numero/titolo/sottotitolo in sola lettura su piu' righe (vedi apriForm in app.js): flex-start
   invece del default centrato, stesse regole di .verbale-header/.verbale-header-info/#verbale-titolo
   sopra, per un aspetto identico fra le due modali (i badge stato/tipo nel footer usano direttamente
   .verbale-stato-badge). */
#modal-piano .modal-header{align-items:flex-start;}
.piano-header-info{min-width:0;}
#form-piano-titolo{font-size:1.35rem;font-weight:600;}
.piano-scroll{min-height:0;}
.piano-tabella{table-layout:fixed;width:100%;}
.piano-accordion .accordion-button{gap:.5rem;}

/* Layout a tutta altezza della finestra: la pagina non scrolla mai nel suo insieme, navbar e contenuto
   si dividono la viewport (stessa catena flex + min-height:0 di modal-verbale sopra, qui partendo dal
   body). #app scrolla da solo solo per le pagine che non sono liste (es. Analisi lotti), le cui card
   non si restringono. */
html,body{height:100%;}
body{display:flex;flex-direction:column;}
body>.navbar{flex:none;}
.contenuto-pagina{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
#app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;}
/* Pagine con una lista (verbali Monitoraggio/Verifica/Fornitore, parametri, piani): la card si restringe
   allo spazio rimasto e passa lo spazio giu' fino al pannello della lista (.elenco-verbali-scroll /
   .lista-scroll), l'unico che scrolla - titolo, bottoni, schede, filtri e intestazioni restano fissi. */
.card-lista{min-height:0;}
.card-lista>.card-body{display:flex;flex-direction:column;min-height:0;}
.card-lista .tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.card-lista .tab-content>.tab-pane.active{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.elenco-verbali-scroll,.lista-scroll{flex:0 1 auto;min-height:0;overflow-y:auto;}

/* Elenco verbali (Monitoraggio/Verifica/Fornitore) e piani: header tabella fisso separato dal corpo scrollabile
   (.elenco-verbali-scroll sopra), stesso pattern di modal-verbale/modal-piano. */
.elenco-verbali-tabella{table-layout:fixed;width:100%;}

/* Righe della lista verbali: l'intera riga apre la modale di dettaglio (vedi data-action="apri-verbale"
   sul <tr> in rigaElencoVerbale()), non c'e' piu' un bottone dedicato. */
.riga-cliccabile{cursor:pointer;}

/* Grafo di tracciabilita' lotti (vedi renderAnalisiLotti in app.js): unica pagina a tutta larghezza
   (body.pagina-larga, impostata da route), tre colonne a tutta altezza. Il canvas di vis-network ha bisogno
   di un contenitore con dimensioni esplicite: #analisi-lotti-diagram e' posizionato in assoluto dentro
   .analisi-lotti-centro, che prende tutto lo spazio rimasto (flex + min-height:0, stessa catena del resto
   della pagina). Scorrono solo le colonne laterali, mai la pagina. I colori della legenda sono quelli dei
   nodi (STILE_CLASSE_LOTTI/STILE_TIPO_NODO_LOTTI in app.js). */
body.pagina-larga .contenuto-pagina{max-width:none;padding:.75rem 1rem !important;}
body.pagina-larga #app{overflow:hidden;}
.analisi-lotti{flex:1 1 auto;min-height:0;display:flex;gap:.75rem;}
.analisi-lotti-laterale{flex:0 0 250px;min-height:0;overflow-y:auto;}
.analisi-lotti-dettaglio{flex-basis:330px;}
.analisi-lotti-centro{flex:1 1 auto;min-width:0;min-height:0;position:relative;overflow:hidden;}
#analisi-lotti-diagram{position:absolute;inset:0;background:#fff;}
.analisi-lotti-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;padding:1rem;}
#analisi-lotti-caricamento{background:rgba(255,255,255,.7);pointer-events:auto;}
@media (max-width: 991.98px){
  body.pagina-larga #app{overflow-y:auto;}
  .analisi-lotti{flex-direction:column;flex:none;}
  .analisi-lotti-laterale{flex:none;overflow:visible;}
  .analisi-lotti-centro{flex:none;height:70vh;}
}
.legenda-grafo-lotti .badge{font-weight:500;border:1px solid transparent;}
.legenda-pf{background:#4A6FA5;color:#fff;}
.legenda-semi{background:#9eeaf9;color:#212529;}
.legenda-mp{background:#dee2e6;color:#212529;}
.legenda-virtuale{background:#fff;color:#212529;border:1px dashed #495057 !important;}
.legenda-ordine{background:#fff3cd;color:#212529;border-color:#b58100 !important;}
.legenda-vendite{background:#d1e7dd;color:#212529;border-color:#198754 !important;}
.legenda-giacenza{background:#e2d9f3;color:#212529;border-color:#6f42c1 !important;}
.legenda-acquisto{background:#ffe5d0;color:#212529;border-color:#fd7e14 !important;}

/* Piani di campionamento collegati nella modale del parametro (vedi apriForm in collegaEventiParametri):
   scroll interno con intestazione fissa, per non allungare la modale con i parametri usati in molti piani. */
.parametro-piani-scroll{max-height:50vh;overflow-y:auto;}
/* Modale del parametro piu' larga di modal-xl: form e piani collegati affiancati a meta'. Header con titolo e
   sottotitolo come #modal-piano/#modal-verbale sopra. */
#modal-parametro .modal-dialog{max-width:1500px;width:95vw;}
#modal-parametro .modal-header{align-items:flex-start;}
.parametro-header-info{min-width:0;}
#form-parametro-titolo{font-size:1.35rem;font-weight:600;}
.parametro-piani-scroll thead th{background:var(--bs-body-bg);}