/* ==========================================================================
   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:      #0277bd; /* stesso blu della navbar/page-footer TPC */
  --tpc-ac-soft: rgba(2,119,189,.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); }