/* ==========================================================================
   Chrome per i dialoghi di lavoro tbw (unita' immobiliari, vani, variabili,
   riparti, lavori, cookie, ruoli, contatti, termini, xml, guida). 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.
   Copiato da tpcad.data-set.it\apps\css\tpc-dialoghi.css, spogliato delle
   sezioni specifiche di tpcad non pertinenti a tbw (galleria monografie
   .mono-*, separatore toolbar rilievo .tpc-sep-toolbar/.tpc-bt-grafica).
   Aggiunti qui (27/09/2026): l'ordine dei pulsanti nel piede e il si'/no.
   Le pagine collegano questo foglio con una versione nell'indirizzo
   (?v=aaaammgg): cambiandolo, va cambiata anche quella.
   ========================================================================== */

: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; flex-wrap: wrap; gap: 12px;
  padding: 10px 16px; background: var(--tpc-bg-soft); border-top: 1px solid var(--tpc-bd);
}

/* IL PIEDE: A SINISTRA LE AZIONI, IN FONDO A DESTRA "CHIUDI".
   Le azioni (Memorizza, Stampa, Ricalcola, Duplica, Elimina...) stanno insieme
   all'inizio del piede, in un gruppo .tpc-modal-azioni, la principale per prima.
   Il pulsante che chiude senza fare niente e' sempre l'ultimo, da solo all'altro
   capo: lontani cosi', si capisce a colpo d'occhio che cosa fa ciascuno. Il
   margine automatico lo tiene a destra anche quando nel piede c'e' soltanto lui.
   Un'uscita che non e' un pulsante di chiusura (il "Non accetto" dei termini, che
   porta fuori dall'applicazione) prende la classe .tpc-modal-chiudi. */
.tpc-modal-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpc-modal-footer > [data-dismiss="modal"],
.tpc-modal-footer > .tpc-modal-chiudi { margin-left: auto; }

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

/* I DIALOGHI GRANDI SUGLI SCHERMI MEDI. Sotto i 992px di finestra Bootstrap
   riporta modal-lg e modal-xl alla larghezza normale di 500px: la finestra
   dell'unita', con la tabella dei vani, e quelle con molti campi diventavano
   strette proprio quando lo spazio c'era. Qui prendono tutta la finestra, meno
   un margine. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100% - 2rem); }
}

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

/* IL SI'/NO: un interruttore con la risposta scritta dentro. Spento e' grigio con
   "No" a destra, acceso prende il blu dei dialoghi con "Sì" a sinistra, e il
   pomello corre dall'altra parte. Sotto c'e' una casella vera (nascosta alla
   vista, non alla tastiera): il modulo la invia come sempre, lo spazio la cambia.
     <label class="tpc-sino"><input type="checkbox" .../><span class="tpc-sino-leva"></span></label>
   Dentro un .tpc-scelta, che e' gia' un <label>, l'involucro e' uno <span>: cosi'
   tutta la riga, testo compreso, accende e spegne. */
.tpc-sino { position: relative; display: inline-block; flex-shrink: 0; margin: 0; cursor: pointer; }
.tpc-sino input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.tpc-sino-leva {
  position: relative; display: block; width: 56px; height: 26px;
  border-radius: 13px; background: #d3d9e2;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.tpc-sino-leva::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,30,45,.35);
  transition: transform .15s ease;
}
.tpc-sino-leva::after {
  content: "No"; position: absolute; top: 0; right: 9px; line-height: 26px;
  font-size: .72rem; font-weight: 700; color: #5f6b7d;
}
.tpc-sino input:checked + .tpc-sino-leva { background: var(--tpc-ac); }
.tpc-sino input:checked + .tpc-sino-leva::before { transform: translateX(30px); }
.tpc-sino input:checked + .tpc-sino-leva::after { content: "Sì"; left: 11px; right: auto; color: #fff; }
.tpc-sino input:focus-visible + .tpc-sino-leva { box-shadow: 0 0 0 3px var(--tpc-ac-soft), 0 0 0 1px var(--tpc-ac); }
.tpc-sino input:disabled + .tpc-sino-leva { opacity: .5; }

/* Un elenco di scelte si'/no: una riga per scelta, il testo a sinistra e
   l'interruttore a destra; la riga intera e' cliccabile. */
.tpc-etichetta {
  display: block; margin-bottom: 4px;
  text-transform: uppercase; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: var(--tpc-txm);
}
.tpc-scelte { border: 1px solid var(--tpc-bd); border-radius: 8px; overflow: hidden; }
.tpc-scelta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 7px 12px; cursor: pointer;
  font-size: .88rem; color: var(--tpc-tx); background: var(--tpc-bg);
  transition: background-color .12s;
}
.tpc-scelta + .tpc-scelta { border-top: 1px solid var(--tpc-bd); }
.tpc-scelta:hover { background: var(--tpc-bg-soft); }

/* --- Attesa: la finestrella che compare durante le letture lunghe (#mySearch).
   Prima era la sola gif appoggiata sopra al velo scuro, dove il grigio dei
   puntini si perdeva. La gif resta quella (e' la stessa in tutta la famiglia
   di applicazioni), ma dentro la stessa scatola dei dialoghi qui sopra -
   stesso fondo, bordo, raggio e ombra - cosi' si presenta come una finestra
   della stessa famiglia e non come un'immagine estranea sopra la pagina. */
.tpc-attesa {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tpc-attesa-riquadro {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 28px;
  background: var(--tpc-bg);
  border: 1px solid var(--tpc-bd);
  border-radius: var(--tpc-radius);
  box-shadow: var(--tpc-shadow);
}
.tpc-attesa-riquadro img { width: 44px; height: 44px; display: block; }
.tpc-attesa-testo {
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tpc-txm);
}

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

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