/* ==========================================================================
   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); }
}

/* 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); }