/* ==========================================================================
   Chrome per i dialoghi di calcolo TPC (Gauss, Pothenot, RisTri, DXF, Volumi,
   Curve di livello, Sezioni). Ispirato alla struttura dei pannelli/modali di
   ternigeo.comune.terni.it (ident-toolbar / ident-modal-content), ma con
   palette chiara e colore del brand TPC (blu, coerente con la navbar) al
   posto del tema scuro.
   ========================================================================== */

:root {
  --tpc-bg:      #ffffff;
  --tpc-bg-soft: #f4f6f9;
  --tpc-tx:      #1f2733;
  --tpc-txm:     #647085;
  --tpc-bd:      #dde2ea;
  --tpc-ac:      #6a1b9a; /* il colore dell'area del portale (sicurezza delle informazioni), come barra e piede */
  --tpc-ac-soft: rgba(106, 27, 154,.10);
  --tpc-shadow:  0 10px 34px rgba(20,30,45,.16), 0 2px 10px rgba(20,30,45,.08);
  --tpc-radius:  10px;
}

.tpc-modal-content {
  /* Bootstrap imposta "pointer-events: none" su .modal-dialog (per lasciar passare il click
     sul backdrop) e lo riattiva solo su .modal-content: senza queste due proprietà l'intero
     dialogo (non solo il drag e il pulsante di chiusura, ma qualunque click al suo interno,
     inclusi gli input) risulterebbe visibile ma non cliccabile. display/flex-direction/width
     replicano il resto delle regole di base di .modal-content per coerenza di layout. */
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--tpc-bg);
  color: var(--tpc-tx);
  border: 1px solid var(--tpc-bd);
  border-radius: var(--tpc-radius);
  box-shadow: var(--tpc-shadow);
  overflow: hidden;
}

.tpc-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--tpc-bg-soft);
  border-bottom: 1px solid var(--tpc-bd);
  cursor: move;
}
/* variante per i dialoghi non trascinabili (es. splash termini e condizioni):
   stessa barra ma senza il cursore "move", che qui sarebbe fuorviante */
.tpc-modal-toolbar-static { cursor: default; }
.tpc-modal-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--tpc-ac);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpc-modal-title i { font-size: .85rem; }
.tpc-modal-close {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  color: var(--tpc-txm); cursor: pointer; font-size: .95rem;
  transition: background .12s, color .12s;
}
.tpc-modal-close:hover { background: var(--tpc-ac-soft); color: var(--tpc-ac); }

.tpc-modal-body { padding: 18px 20px; background: var(--tpc-bg); }
.tpc-modal-body > .tpc-hint:first-child,
.tpc-modal-body > .tpc-section-title:first-child { margin-top: 0; }

.tpc-hint { display: block; color: var(--tpc-txm); font-size: .78em; margin-bottom: 10px; }

.tpc-section-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tpc-txm); margin: 16px 0 8px 0; padding-bottom: 5px;
  border-bottom: 1px solid var(--tpc-bd);
}

.tpc-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--tpc-bg-soft); border-top: 1px solid var(--tpc-bd);
}

/* DIALOGHI PIU' ALTI DELLO SCHERMO.
   Bootstrap ha "modal-dialog-scrollable" per questo: fa scorrere il solo corpo e
   tiene fermi intestazione e piede. Le sue regole però cercano .modal-content e
   .modal-body, mentre qui le classi sono tpc-*, quindi da sola quella classe non
   avrebbe alcun effetto - e infatti il pannello dei cookie veniva alto più del
   doppio della finestra, con il pulsante di conferma fuori schermo.
   Queste tre righe sono le stesse di Bootstrap, tradotte sulle nostre classi. */
.modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); }
.modal-dialog-scrollable .tpc-modal-content { max-height: calc(100vh - 1rem); overflow: hidden; }
.modal-dialog-scrollable .tpc-modal-body { overflow-y: auto; }

/* Da 576px in su Bootstrap dà al dialogo un margine di 1.75rem sopra e sotto, e
   quindi scala l'altezza massima di 3.5rem invece che di 1rem. Senza questa
   seconda regola il riquadro resta alto quanto tutta la finestra e il piede
   finisce appena sotto il bordo: il pulsante di conferma si vedeva tagliato. */
@media (min-width: 576px) {
  .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); }
  .modal-dialog-scrollable .tpc-modal-content { max-height: calc(100vh - 3.5rem); }
}

/* MODAL-XL, LARGO DAVVERO. Le finestre con una griglia di colonne (elenco prezzi, EPC,
   quadri, prezziari, analisi su codifiche) usano tutte modal-xl, ma Bootstrap gli applica il
   suo max-width di 1140px solo da 1200px di schermo in su: sotto quella soglia ricade su
   modal-lg (800px, dai 992px) o sulla larghezza di default di un dialogo qualunque (500px,
   sotto i 992px) - una finestra pensata per una tabella restava stretta come un avviso di
   conferma su un portatile con la finestra non massimizzata. Qui usa lo schermo davvero
   disponibile a ogni larghezza, non solo sopra i 1200px; ".modal-dialog.modal-xl" ha la
   stessa specificita' della regola di Bootstrap ma viene dopo nel foglio, quindi vince senza
   bisogno di !important. */
.modal-dialog.modal-xl {
  width: calc(100% - 1.75rem);
  max-width: 1400px;
}
@media (max-width: 575.98px) {
  .modal-dialog.modal-xl { width: calc(100% - 1rem); margin: .5rem auto; }
}

/* Campi del form all'interno dei dialoghi TPC: bordi/raggio/focus coerenti col brand */
.tpc-modal-body .form-control-sm,
.tpc-modal-body select.form-control-sm,
.tpc-modal-body textarea.form-control-sm {
  border-color: var(--tpc-bd);
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.tpc-modal-body .form-control-sm:focus {
  border-color: var(--tpc-ac);
  box-shadow: 0 0 0 3px var(--tpc-ac-soft);
}
/* Allinea i campi al bordo del dialogo indipendentemente dalla griglia usata: .row ha
   margini -15px, .form-row -5px, per cui i campi finivano a distanze diverse dal bordo
   (24px con form-row, 14px con row, 6px dove le colonne hanno px-0). Le griglie dentro
   .card-body (gli accordion) restano invariate: li' il rientro lo da' gia' la card. */
.tpc-modal-body .row { margin-left: -5px; margin-right: -5px; }
.tpc-modal-body .card-body .row { margin-left: -15px; margin-right: -15px; }

.tpc-modal-body .form-group label {
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tpc-txm);
}

.tpc-modal-body .nav-tabs .nav-link { font-size: .78rem; color: var(--tpc-txm); border-color: transparent; }
.tpc-modal-body .nav-tabs .nav-link.active { color: var(--tpc-ac); border-color: var(--tpc-bd) var(--tpc-bd) var(--tpc-bg); }

.tpc-modal-footer .btn { border-radius: 6px; }

/* --- Galleria monografie (apertura/chiusura a terra) --- */
.mono-galleria { display: flex; flex-wrap: wrap; gap: 10px; }
.mono-item {
  position: relative;
  width: 116px;
  border: 1px solid var(--tpc-bd);
  border-radius: 8px;
  background: var(--tpc-bg);
  overflow: hidden;
}
.mono-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 86px; background: var(--tpc-bg-soft);
  text-decoration: none; overflow: hidden;
}
.mono-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.mono-noprev { flex-direction: column; gap: 3px; color: var(--tpc-txm); }
.mono-noprev i { font-size: 1.5rem; }
.mono-noprev span { font-size: .6rem; font-weight: 700; letter-spacing: .06em; }
.mono-cap {
  padding: 4px 6px; font-size: .62rem; color: var(--tpc-txm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--tpc-bd);
}
.mono-del {
  position: absolute; top: 4px; right: 4px;
  padding: 1px 5px; font-size: .62rem; line-height: 1.4; border-radius: 5px; opacity: .85;
}
.mono-del:hover { opacity: 1; }

/* Separatore fra i gruppi di icone nella toolbar del rilievo (tpc.aspx) */
.tpc-sep-toolbar { display: inline-block; width: 1px; height: 26px; margin: 0 10px; vertical-align: middle; background: var(--tpc-bd); }
.tpc-bt-grafica { color: var(--tpc-ac); }

/* I COLLEGAMENTI NON SI SOTTOLINEANO AL PASSAGGIO DEL MOUSE (dal 2026-10-06, in tutta
   la famiglia e nel sito madre). Bootstrap sottolinea ogni <a> su :hover; qui si toglie
   per tutte le pagine, non solo per i dialoghi: la regola sta in questo foglio perche'
   e' l'unico che ogni pagina dei portali carica, e sempre dopo Bootstrap. Il colore al
   passaggio resta quello di Bootstrap, ed e' quello a dire che il collegamento e' vivo. */
a:hover, a:focus { text-decoration: none; }

/* FINESTRE CENTRATE (termini e pannello dei cookie, dal 2026-10-06). Quelle due finestre
   non stanno direttamente nel .modal ma dentro un contenitore (#box-termini, #box-cookie)
   in cui la pagina scrive l'HTML arrivato dal server. Senza un'altezza quel contenitore e'
   alto quanto il suo contenuto, e "modal-dialog-centered" non ha niente rispetto a cui
   centrare: una finestra piu' bassa della pagina restava attaccata in alto. */
/* pointer-events: il contenitore ora copre tutta la pagina; i clic fuori dalla finestra devono
   continuare ad arrivare al fondo, come prima (la finestra li riprende per conto suo). */
#box-termini, #box-cookie { height: 100%; pointer-events: none; }

/* L'ACCENTO DEL PORTALE. Pulsanti, collegamenti, campi attivi e spunte di Bootstrap nascono
   azzurri: qui prendono il colore dell'area del portale (sicurezza delle informazioni), lo stesso della sua scheda
   su data-set.it, della testata della home e della barra in alto. Per cambiarlo basta --tpc-ac
   (in cima a questo foglio) con le due variabili qui sotto. */
:root { --tpc-ac-scuro: #4a148c; --tpc-ac-anello: rgba(106, 27, 154, .3); }
a { color: var(--tpc-ac); }
a:hover { color: var(--tpc-ac-scuro); }
.btn-primary, .btn-info, .btn-primary.disabled, .btn-primary:disabled, .btn-info.disabled, .btn-info:disabled { color: #fff; background-color: var(--tpc-ac); border-color: var(--tpc-ac); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle,
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: var(--tpc-ac-scuro); border-color: var(--tpc-ac-scuro); }
.btn-outline-primary { color: var(--tpc-ac); border-color: var(--tpc-ac); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: var(--tpc-ac); border-color: var(--tpc-ac); }
.btn-primary:focus, .btn-info:focus, .btn-outline-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem var(--tpc-ac-anello); }
.form-control:focus, .custom-select:focus { border-color: var(--tpc-ac); box-shadow: 0 0 0 .2rem var(--tpc-ac-anello); }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--tpc-ac); background-color: var(--tpc-ac); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--tpc-ac-anello); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--tpc-ac); }
.page-link { color: var(--tpc-ac); }
.page-item.active .page-link { background-color: var(--tpc-ac); border-color: var(--tpc-ac); }

/* IL PIEDE DELLE FINESTRE: "CHIUDI" DA SOLO A DESTRA, GLI ALTRI COMANDI A SINISTRA.
   Regola della famiglia (dal 2026-10-10): il pulsante che chiude senza fare niente sta
   sempre in fondo a destra, da solo; Memorizza, Elimina, Stampa e gli altri comandi stanno
   insieme a sinistra. Lontani cosi', non capita di usare Memorizza come uscita quando non
   c'e' niente da memorizzare.
   La regola vale per come il piede si VEDE, comunque sia scritto: i contenitori che
   raggruppano i pulsanti si sciolgono (display: contents), il pulsante di chiusura va per
   ultimo (order) e il margine automatico lo porta all'altro capo. Riguarda i piedi che
   hanno un pulsante di chiusura (data-dismiss="modal"); gli altri (il consenso ai cookie,
   l'accesso) restano come sono. Dove il browser non conosce :has() il piede resta com'era. */
.tpc-modal-footer:has([data-dismiss="modal"]),
.modal-footer:has([data-dismiss="modal"]) { justify-content: flex-start !important; flex-wrap: wrap; gap: 6px; }
/* i segnaposto vuoti, che servivano a spingere i pulsanti a destra, non occupano posto */
.tpc-modal-footer:has([data-dismiss="modal"]) > :empty,
.modal-footer:has([data-dismiss="modal"]) > :empty { display: none; }
.tpc-modal-footer:has([data-dismiss="modal"]) > div:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group),
.tpc-modal-footer:has([data-dismiss="modal"]) > span:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group),
.tpc-modal-footer:has([data-dismiss="modal"]) > form:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group),
.modal-footer:has([data-dismiss="modal"]) > div:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group),
.modal-footer:has([data-dismiss="modal"]) > span:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group),
.modal-footer:has([data-dismiss="modal"]) > form:has(.btn):not(.btn-group):not(.dropdown):not(.dropup):not(.input-group) { display: contents; }
.tpc-modal-footer:has([data-dismiss="modal"]) .btn,
.modal-footer:has([data-dismiss="modal"]) .btn { margin-top: 0; margin-bottom: 0; }
.tpc-modal-footer [data-dismiss="modal"],
.modal-footer [data-dismiss="modal"] { order: 99; margin-left: auto !important; margin-right: 0 !important; }