/* ==========================================================================
   grafica.aspx (tbw): cinque viste sui dati del lavoro corrente -
   B1 confronto coefficienti fra i piani (griglia SVG), B2 pianta schematica
   dell'edificio (griglia a div, basata solo su UI.H_piano/UI.Scala), B3
   pianta reale con la geometria dei vani (mappa OpenLayers su un piano
   locale in metri, nessun sistema di riferimento geografico - i vani non
   hanno coordinate reali, solo una geometria disegnata dall'utente), piani
   affiancati (tutti i piani in griglia, SVG, un coefficiente alla volta),
   elenco dei vani (tabella filtrabile e correggibile, in fondo al file).
   Riprende, per nome, le classi di tpcad (gr-bt, gr-pannello) come
   convenzione di stile per toolbar/pannelli, senza includere il file CSS di
   tpcad: qui le variabili sono proprie di tbw (palette #0277bd, la stessa
   dell'header/footer di tbw.aspx). Il file /apps/css/ol.css (OpenLayers) e'
   incluso a parte, copiato da tpcad, per lo stile dei controlli della mappa.
   ========================================================================== */

:root {
  --gr-ac: #0277bd;
  --gr-ac-soft: rgba(2, 119, 189, .10);
  --gr-bd: #dee2e6;
  --gr-bg-soft: #f4f6f8;
  --gr-tx: #333333;
  --gr-txm: #6c757d;
  --gr-verde: #43a047;
  --gr-verde-soft: rgba(67, 160, 71, .16);
  --gr-giallo: #f9a825;
  --gr-giallo-soft: rgba(249, 168, 37, .20);
  --gr-rosso: #c62828;
  --gr-rosso-soft: rgba(198, 40, 40, .18);
}

html, body { height: 100%; margin: 0; }
body.gr-body { background: var(--gr-bg-soft); overflow-x: hidden; }

#area-grafica { min-height: 100vh; display: flex; flex-direction: column; }

/* --- barra superiore --- */
.gr-barra-alta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--gr-bd);
  padding: 6px 10px; position: sticky; top: 0; z-index: 30;
}
.gr-logo { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--gr-ac); text-decoration: none; flex-shrink: 0; }
.gr-logo:hover { background: var(--gr-ac-soft); }
.gr-titolo { font-weight: 700; color: var(--gr-ac); letter-spacing: .02em; white-space: nowrap; }
.gr-lavoro { font-size: .78rem; color: var(--gr-txm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.gr-spazio { flex: 1; }
.gr-sep { width: 1px; height: 22px; background: var(--gr-bd); margin: 0 4px; flex-shrink: 0; }

.gr-bt {
  height: 32px; padding: 0 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--gr-txm); cursor: pointer; font-size: .8rem; white-space: nowrap;
  transition: background .12s, color .12s;
}
.gr-bt:hover { background: var(--gr-ac-soft); color: var(--gr-ac); }
.gr-bt-attivo { background: var(--gr-ac-soft); color: var(--gr-ac); border-color: var(--gr-ac); }
.gr-bt.gr-bt-quadro { width: 32px; padding: 0; }
.gr-bt[disabled] { opacity: .45; cursor: default; pointer-events: none; }
/* strumento che adesso non serve: resta cliccabile, e il clic spiega che cosa manca */
.gr-bt.gr-bt-spento { opacity: .42; }
.gr-bt.gr-bt-spento:hover { opacity: .7; }

/* pulsanti piccoli nelle testate dei pannelli (nuova UI, nuovo vano, dati UI) */
.gr-bt-mini {
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--gr-txm); font-size: .72rem; cursor: pointer;
}
.gr-bt-mini:hover { background: var(--gr-ac-soft); color: var(--gr-ac); border-color: var(--gr-ac-soft); }
.gr-bt-mini.gr-bt-mini-attivo { background: var(--gr-ac-soft); color: var(--gr-ac); border-color: var(--gr-ac); }
.gr-bt-mini.gr-bt-mini-rosso:hover { background: var(--gr-rosso-soft); color: var(--gr-rosso); border-color: var(--gr-rosso-soft); }
.gr-bt-mini:disabled { opacity: .35; cursor: default; background: transparent; border-color: transparent; color: var(--gr-txm); }

/* --- corpo: vista + pannello laterale --- */
.gr-corpo { position: relative; flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; }
.gr-vista { display: block; }
.gr-vista.hide { display: none; }
/* la vista B1/B2 (coefficienti/pianta) resta a dimensione naturale (la
   pagina puo' scorrere se il contenuto e' alto); solo D1 (pianta reale,
   sotto) riempie tutto lo spazio residuo del corpo - vedi .gr-vista-reale */

.gr-toolbar-vista { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gr-toolbar-vista label { font-size: .72rem; color: var(--gr-txm); margin: 0 4px 0 0; }
.gr-toolbar-vista select { font-size: .78rem; padding: 2px 6px; border: 1px solid var(--gr-bd); border-radius: 4px; }

.gr-legenda { display: flex; align-items: center; gap: 14px; font-size: .72rem; color: var(--gr-txm); flex-wrap: wrap; }
.gr-legenda-voce { display: inline-flex; align-items: center; gap: 5px; }
.gr-legenda-pallino { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.gr-box-svg { background: #fff; border: 1px solid var(--gr-bd); border-radius: 6px; padding: 10px; overflow: auto; }
.gr-box-svg svg { display: block; }
.gr-cella-coef { cursor: pointer; }
.gr-cella-coef > rect:first-of-type { stroke-width: 1.2; }
.gr-cella-coef:hover { opacity: .82; }
.gr-cella-coef .gr-barra { pointer-events: none; }
.gr-cella-testo { font-size: 10.5px; fill: var(--gr-tx); pointer-events: none; }
.gr-cella-conta { font-size: 10px; font-weight: 700; pointer-events: none; }
.gr-cella-conta-rossa { fill: var(--gr-rosso); }
.gr-cella-conta-gialla { fill: #a86b00; }
.gr-cella-intestazione { font-size: 11px; font-weight: 700; fill: var(--gr-tx); }
.gr-cella-etichetta { font-size: 11px; fill: var(--gr-tx); }
.gr-cella-sotto { font-size: 9.5px; fill: var(--gr-txm); }
.gr-sep-scala { stroke: var(--gr-bd); stroke-width: 1; stroke-dasharray: 4 3; }

/* testo che spiega come leggere una vista o un pannello */
.gr-spiega { font-size: .76rem; color: var(--gr-txm); line-height: 1.5; margin: 0 0 10px; max-width: 1000px; }

/* --- vuoto / caricamento --- */
.gr-vuoto { color: var(--gr-txm); font-size: .8rem; font-style: italic; padding: 10px 2px; }

/* --- B2: griglia di piani/unita a div --- */
.gr-piano-blocco { margin-bottom: 14px; }
.gr-piano-blocco-scala { font-size: .74rem; font-weight: 700; color: var(--gr-ac); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
.gr-piano-riga { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gr-piano-etichetta { width: 90px; flex-shrink: 0; font-size: .72rem; color: var(--gr-txm); text-align: right; padding-right: 4px; }
.gr-piano-unita { display: flex; flex-wrap: wrap; gap: 4px; }
.gr-cella-ui {
  width: 54px; height: 44px; border-radius: 5px; border: 1px solid var(--gr-bd);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .68rem; line-height: 1.05; cursor: pointer; color: var(--gr-tx);
  transition: transform .08s, box-shadow .08s;
}
.gr-cella-ui:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.18); }

/* --- D1: editor della pianta reale a tre pannelli, sul modello di
   apps\admin\toponomastica.aspx di prgsellano (sinistra: unita' immobiliari
   e i loro vani; centro: mappa; destra: scheda del vano) --- */
.gr-vista-reale { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gr-reale-tre {
  flex: 1; min-height: 420px; display: grid;
  grid-template-columns: 268px 1fr 300px; gap: 10px;
  /* la riga resta alta quanto lo spazio che c'e': una scheda del vano piu' lunga
     scorre dentro il suo pannello invece di allungare la pagina (e portare fuori
     vista i pulsanti in fondo) */
  grid-template-rows: minmax(0, 1fr);
}
/* con la pianta reale aperta la pagina e' alta esattamente quanto la finestra:
   senza un'altezza definita la catena di flex:1 cresce con il contenuto */
@media (min-width: 1101px) {
  body.gr-reale-attiva { overflow: hidden; }
  body.gr-reale-attiva #area-grafica { height: 100vh; min-height: 0; }
}
.gr-reale-pannello {
  background: #fff; border: 1px solid var(--gr-bd); border-radius: 6px;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.gr-reale-pannello-testa {
  padding: 8px 12px; border-bottom: 1px solid var(--gr-bd);
  font-weight: 700; font-size: .78rem; display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.gr-reale-pannello-testa i { color: var(--gr-ac); }
.gr-reale-pannello-testa .badge { margin-left: auto; }
.gr-reale-pannello-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px; }
.gr-reale-pannello-fisso { flex: 0 0 auto; }

.gr-reale-centro { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.gr-reale-centro > .gr-toolbar-vista { margin-bottom: 0; gap: 6px; }
.gr-reale-mappa-guscio { position: relative; flex: 1; min-height: 0; border: 1px solid var(--gr-bd); border-radius: 6px 6px 6px 0; overflow: hidden; }

/* i piani del disegno: le schede in fondo alla mappa, come i fogli di un foglio di
   calcolo. Salgono sul bordo inferiore della mappa (il contenitore ha 8px di spazio
   fra un elemento e l'altro): la scheda aperta, bianca e senza bordo in alto, sembra
   il prolungamento della mappa; le altre restano dietro, grigie */
.gr-piani-schede { display: flex; align-items: flex-start; gap: 3px; flex: 0 0 auto; margin-top: -9px; position: relative; z-index: 3; min-width: 0; }
.gr-piani-elenco { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; min-width: 0; flex: 0 1 auto; scrollbar-width: thin; }
.gr-piano-scheda, .gr-piani-bt {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--gr-bd); border-radius: 0 0 6px 6px;
  background: var(--gr-bg-soft); color: var(--gr-txm);
  font-size: .76rem; line-height: 1.3; padding: 4px 12px 5px; cursor: pointer; white-space: nowrap;
}
.gr-piano-scheda:hover, .gr-piani-bt:hover { color: var(--gr-ac); background: #fff; }
.gr-piano-scheda.attiva { background: #fff; color: var(--gr-ac); font-weight: 700; border-top-color: #fff; box-shadow: 0 2px 0 var(--gr-ac) inset, 0 1px 3px rgba(0,0,0,.06); padding-bottom: 6px; }
.gr-piano-scheda-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gr-piano-conta { background: var(--gr-txm); color: #fff; border-radius: 8px; font-size: .64rem; font-weight: 700; padding: 0 5px; line-height: 1.45; }
.gr-piano-scheda.attiva .gr-piano-conta { background: var(--gr-ac); }
.gr-piani-bt { padding: 4px 8px 5px; font-size: .7rem; }

/* la finestra dei piani */
.gr-piano-riga { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--gr-bd); }
.gr-piano-riga-aperto .gr-piano-nome { border-color: var(--gr-ac); }
.gr-piano-riga .gr-piano-nome { flex: 1 1 auto; min-width: 0; }
.gr-piano-riga .gr-piano-indice { flex: 0 0 64px; }
.gr-piano-conte { flex: 0 0 auto; min-width: 104px; font-size: .7rem; color: var(--gr-txm); white-space: nowrap; text-align: right; }
.gr-piani-nuovo { display: flex; gap: 6px; margin-top: 10px; }
.gr-piani-nuovo #piano-nuovo-nome { flex: 1 1 auto; min-width: 0; }
.gr-piani-nuovo #piano-nuovo-indice { flex: 0 0 64px; }
.gr-piani-nuovo .btn { white-space: nowrap; }

/* nel pannello degli sfondi: di quale piano sono */
.gr-sfondi-piano { font-size: .72rem; color: var(--gr-tx); background: var(--gr-ac-soft); border-radius: 4px; padding: 3px 8px; margin: 2px 0 6px; }
.gr-mappa { width: 100%; height: 100%; background: #fff; }

/* barra di stato sulla mappa: che cosa fa lo strumento scelto, e gli avvisi */
.gr-mappa-stato {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  background: rgba(255,255,255,.94); border: 1px solid var(--gr-bd); border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 4px 10px;
  font-size: .74rem; color: var(--gr-tx); line-height: 1.4; pointer-events: none;
}
.gr-mappa-stato:empty { display: none; }
.gr-mappa-stato-avviso { background: #fff4d6; border-color: var(--gr-giallo); color: #6b4a00; }

/* pianta chiave: tutto l'ingombro e le unita' del piano, con quella scelta in
   evidenza e la zona inquadrata; in alto a destra, lontano dalla barra di stato */
.gr-pianta-chiave {
  position: absolute; top: 8px; right: 8px; width: 220px; z-index: 2;
  background: rgba(255,255,255,.96); border: 1px solid var(--gr-bd); border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,.14); overflow: hidden;
}
.gr-pianta-chiave-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 2px 8px; background: var(--gr-bg-soft); border-bottom: 1px solid var(--gr-bd);
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gr-txm);
}
.gr-pianta-chiave-testa span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-pianta-chiave-testa button { border: none; background: transparent; color: var(--gr-txm); cursor: pointer; border-radius: 4px; padding: 1px 6px; font-size: .7rem; }
.gr-pianta-chiave-testa button:hover { background: var(--gr-ac-soft); color: var(--gr-ac); }
#pianta-chiave-mappa { width: 100%; height: 150px; cursor: pointer; background: #fff; }
.gr-pianta-chiave-apri {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--gr-bd); border-radius: 6px;
  background: rgba(255,255,255,.96); color: var(--gr-txm); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.gr-pianta-chiave-apri:hover { color: var(--gr-ac); border-color: var(--gr-ac); }

/* elenco unita' immobiliari */
.gr-reale-ui-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border-radius: 5px; cursor: pointer; font-size: .78rem;
  border: 1px solid transparent;
}
.gr-reale-ui-riga:hover { background: var(--gr-ac-soft); }
.gr-reale-ui-riga.scelta { border-color: var(--gr-ac); background: var(--gr-ac-soft); }
.gr-reale-ui-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-reale-ui-conta { font-size: .68rem; color: var(--gr-txm); white-space: nowrap; flex-shrink: 0; }
.gr-reale-ui-conta-avviso { color: var(--gr-giallo); font-weight: 700; }
/* un'unita' disegnata su piu' piani */
.gr-reale-ui-piani { font-size: .64rem; color: var(--gr-ac); white-space: nowrap; flex-shrink: 0; margin-left: auto; }
.gr-reale-ui-piani i { margin-right: 2px; }

/* vani della UI scelta, sotto l'elenco unita' */
.gr-reale-vani-ui { border-top: 1px solid var(--gr-bd); max-height: 48%; display: flex; flex-direction: column; }
.gr-reale-vani-ui-testa { display: flex; align-items: center; gap: 2px; padding: 5px 8px 5px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gr-txm); }
.gr-reale-vani-ui-titolo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-reale-vani-ui-titolo span { color: var(--gr-tx); text-transform: none; letter-spacing: 0; }
#elenco-vani-reale { overflow-y: auto; padding: 0 6px 6px; }
.gr-reale-vani-totale { flex: 0 0 auto; font-size: .68rem; color: var(--gr-txm); line-height: 1.45; padding: 6px 12px 8px; border-top: 1px dashed var(--gr-bd); }

.gr-reale-voce {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 8px; border-radius: 5px; cursor: pointer; font-size: .78rem;
  border: 1px solid transparent;
}
.gr-reale-voce:hover { background: var(--gr-ac-soft); }
.gr-reale-voce-attiva { border-color: var(--gr-ac); background: var(--gr-ac-soft); }
.gr-reale-voce-vuota { color: var(--gr-txm); font-style: italic; }
.gr-reale-voce-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-reale-voce-stato { font-size: .68rem; color: var(--gr-txm); white-space: nowrap; }
/* disegnato su un altro piano: il nome di quel piano, e il vano un po' piu' tenue */
.gr-reale-voce-altrove { opacity: .8; }
.gr-reale-voce-piano { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; color: var(--gr-txm); background: var(--gr-bg-soft); border: 1px solid var(--gr-bd); border-radius: 8px; padding: 0 6px; }
/* superficie dal disegno; in ambra quando non torna con la consistenza scritta */
.gr-reale-voce-area { font-size: .7rem; color: var(--gr-txm); white-space: nowrap; flex-shrink: 0; }
.gr-reale-voce-area.gr-fuori { color: #a86b00; font-weight: 700; }

/* la scheda del vano (_vano.inc) iniettata nel pannello di destra: e' pensata
   per stare dentro un .modal-dialog fluttuante, qui vive in un flusso normale
   - le tolgo margine/ombra propri e le do' un bordo leggero, coerente con gli
   altri pannelli invece che con una finestra */
#corpo-scheda-vano .modal-dialog { margin: 0; max-width: none; }
/* overflow visibile: con l'hidden di tpc-dialoghi.css il piede non potrebbe
   restare attaccato al fondo del pannello mentre la scheda scorre */
#corpo-scheda-vano .tpc-modal-content { box-shadow: none; border: 1px solid var(--gr-bd); overflow: visible; }
/* la barra del titolo della finestra qui non serve: il titolo e' gia' nella
   testata del pannello, e da trascinare non c'e' niente */
#corpo-scheda-vano .tpc-modal-toolbar { display: none; }
#corpo-scheda-vano .tpc-modal-body { padding: 12px 12px 4px; }
/* _vano.inc e' pensato per una finestra larga (modal-xl), con piu' campi
   affiancati per riga: nel pannello stretto (300px) quelle colonne
   diventano troppo piccole e si accavallano - un campo per riga */
#corpo-scheda-vano .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
#corpo-scheda-vano .form-group { margin-bottom: .6rem; }

/* i pulsanti in fondo alla scheda: Memorizza a tutta larghezza, sotto le
   azioni secondarie in parti uguali; restano visibili mentre la scheda scorre */
#corpo-scheda-vano .tpc-modal-footer.gr-scheda-piede {
  flex-direction: column; align-items: stretch; gap: 6px;
  position: sticky; bottom: -6px; z-index: 2;
  padding: 10px 12px; border-radius: 0 0 8px 8px;
}
.gr-scheda-piede-azioni { display: flex; gap: 6px; }
.gr-scheda-piede-azioni .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-scheda-piede-azioni .btn i, .gr-scheda-piede .btn-block i { margin-right: 3px; }

/* superficie dal disegno contro consistenza scritta, dentro la scheda */
.gr-scheda-superficie {
  border: 1px solid var(--gr-bd); border-left: 3px solid var(--gr-verde); border-radius: 5px;
  background: #fff; padding: 8px 10px; margin: 2px 0 12px; font-size: .75rem; color: var(--gr-tx);
}
.gr-scheda-superficie.gr-fuori { border-left-color: var(--gr-giallo); background: #fffaf0; }
.gr-sup-riga { display: flex; justify-content: space-between; gap: 8px; line-height: 1.6; }
.gr-sup-riga b { white-space: nowrap; }
.gr-sup-nota { font-size: .7rem; color: var(--gr-txm); margin-top: 2px; }
/* il piano del disegno del vano, per spostarlo */
.gr-sup-piano { align-items: center; margin-top: 8px; }
.gr-sup-piano select { width: auto; max-width: 60%; height: auto; padding: 1px 4px; font-size: .74rem; }
.gr-scheda-superficie .btn { font-size: .74rem; padding: 3px 6px; white-space: nowrap; }
.gr-scheda-superficie.gr-fuori .gr-sup-nota { color: #8a5a00; }

/* --- pannello laterale a scomparsa (stesso pattern di tpcad: gr-pannello) --- */
.gr-pannello {
  position: fixed; top: 0; right: 0; width: 300px; height: 100%;
  background: #fff; border-left: 1px solid var(--gr-bd);
  box-shadow: -2px 0 10px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; z-index: 1050;
}
.gr-pannello-aperto { transform: translateX(0); }
.gr-pannello-testa {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--gr-bg-soft); border-bottom: 1px solid var(--gr-bd);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gr-txm);
}
.gr-pannello-testa span { flex: 1; }
.gr-pannello-chiudi { border: none; background: transparent; color: var(--gr-txm); cursor: pointer; border-radius: 4px; }
.gr-pannello-chiudi:hover { background: var(--gr-ac-soft); color: var(--gr-ac); }
.gr-pannello-corpo { flex: 1; overflow-y: auto; padding: 10px 12px; }

.gr-pannello-largo { width: 380px; }

/* pannello del confronto dei coefficienti: sezioni, valori a pastiglie, vani */
.gr-pannello-sezione { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gr-txm); margin: 14px 0 6px; }
.gr-sezione-rossa { color: var(--gr-rosso); }
.gr-sezione-gialla { color: #a86b00; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.gr-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--gr-bd); border-radius: 12px; padding: 1px 8px 1px 4px; font-size: .72rem; background: #fff; }
.gr-chip b { font-weight: 700; }
.gr-chip-pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.gr-chip-mancante { border-style: dashed; color: var(--gr-txm); padding-left: 8px; }
.gr-confronto-riga { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; }
.gr-confronto-piano { font-size: .7rem; color: var(--gr-txm); width: 62px; flex-shrink: 0; padding-top: 3px; }
.gr-avviso-ok { background: var(--gr-verde-soft); border: 1px solid var(--gr-verde); border-radius: 4px; padding: 6px 8px; font-size: .74rem; margin-bottom: 10px; }

.gr-anomalia { border: 1px solid var(--gr-bd); border-left: 3px solid var(--gr-rosso); border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; font-size: .76rem; }
.gr-anomalia-gialla { border-left-color: var(--gr-giallo); }
.gr-anomalia-ui { color: var(--gr-txm); font-size: .7rem; }
.gr-anomalia-motivo { font-size: .72rem; margin: 2px 0 5px; color: var(--gr-tx); }
.gr-anomalia-azioni { display: flex; gap: 4px; flex-wrap: wrap; }

/* --- D2/D3: pannello del riferimento esterno (DXF e shapefile) --- */
.aiuto-xrif { font-size: .72rem; color: var(--gr-txm); line-height: 1.5; margin-bottom: 10px; }
#pan-xrif hr { margin: 12px 0; border-color: var(--gr-bd); }
.gr-pannello-sottotitolo { font-size: .74rem; font-weight: 700; color: var(--gr-ac); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

/* ingombro dell'edificio: strumenti di disegno e livelli DXF da copiare */
.gr-ingombro-strumenti { display: flex; gap: 4px; }
.gr-ingombro-strumenti .btn { flex: 1 1 0; min-width: 0; font-size: .74rem; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-ingombro-strumenti .btn.gr-bt-attivo { background: var(--gr-ac); border-color: var(--gr-ac); color: #fff; }
.gr-ingombro-strumenti #bt-str-ingombro-elimina.gr-bt-attivo { background: var(--gr-rosso); border-color: var(--gr-rosso); color: #fff; }
.gr-livelli { max-height: 150px; overflow-y: auto; border: 1px solid var(--gr-bd); border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; }
.gr-livelli .custom-control-label { font-size: .76rem; word-break: break-all; }

/* --- piani affiancati: tutti i piani del disegno in griglia, tinti secondo un
   coefficiente (colori delle variabili, piu' intensi dove il peso e' piu' alto) --- */
.gr-aff-spunta { display: flex; align-items: center; min-height: 0; }
.gr-aff-spunta .custom-control-label { font-size: .76rem; color: var(--gr-tx); margin: 0; }
.gr-aff-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 12px; }
.gr-aff-legenda-titolo { font-size: .74rem; font-weight: 700; color: var(--gr-ac); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.gr-aff-legenda-verso { font-size: .68rem; color: var(--gr-txm); font-style: italic; }
.gr-aff-voce {
  display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; line-height: 1.2;
  padding: 2px 8px 2px 3px; border: 1px solid var(--gr-bd); border-radius: 12px; background: #fff;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.gr-aff-voce:hover { border-color: var(--gr-ac); }
.gr-aff-voce b { font-weight: 700; }
.gr-aff-voce.gr-aff-voce-zero { opacity: .5; }
.gr-aff-voce.gr-aff-voce-attiva { border-color: var(--gr-ac); box-shadow: 0 0 0 2px var(--gr-ac-soft); background: var(--gr-ac-soft); }
.gr-aff-voce.gr-aff-voce-ignota { border-style: dashed; }
.gr-aff-peso { color: var(--gr-txm); font-variant-numeric: tabular-nums; }
.gr-aff-campione { width: 18px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); display: inline-block; flex-shrink: 0; }
.gr-aff-campione-vuoto { background: #fff; border: 1px dashed #888; }
.gr-aff-campione-ignoto { background: #9e9e9e; border: 1px dashed #444; }
.gr-aff-campione-segnalato { background: #fff; border: 2px solid var(--gr-rosso); }

.gr-aff-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
.gr-aff-cella { background: #fff; border: 1px solid var(--gr-bd); border-radius: 6px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gr-aff-testa { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--gr-tx); }
.gr-aff-sotto { font-size: .7rem; color: var(--gr-txm); }
.gr-aff-info { margin-left: auto; font-size: .7rem; color: var(--gr-txm); }
.gr-aff-barra { display: flex; height: 9px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,.14); background: #fff; }
.gr-aff-barra > span { display: block; height: 100%; }
.gr-aff-barra > span + span { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.gr-aff-barra-vuota { background: repeating-linear-gradient(45deg, #fff 0 3px, #d9d9d9 3px 5px); }
.gr-aff-mappa { display: block; width: 100%; height: auto; background: #fbfcfd; border: 1px solid #eef0f2; border-radius: 4px; }
.gr-aff-ingombro { fill: none; stroke: #9aa3ad; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.gr-aff-vano { stroke: #4a4a4a; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.gr-aff-vano:hover { stroke: var(--gr-ac); stroke-width: 2.5; }
.gr-aff-vano-vuoto { stroke: #888; stroke-dasharray: 4 3; }
.gr-aff-vano-ignoto { stroke: #333; stroke-dasharray: 2 2; }
.gr-aff-vano-segnalato, .gr-aff-vano-segnalato:hover { stroke: var(--gr-rosso); stroke-width: 3; }
.gr-aff-etichetta { fill: #1f1f1f; stroke: rgba(255,255,255,.9); paint-order: stroke; text-anchor: middle; dominant-baseline: middle; font-family: 'Segoe UI', Calibri, sans-serif; pointer-events: none; }
.gr-aff-spento { opacity: .14; }
.gr-aff-tessere { display: flex; flex-direction: column; gap: 4px; }
.gr-aff-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.gr-aff-ui-nome { font-size: .68rem; color: var(--gr-txm); min-width: 52px; }
.gr-aff-tessera { font-size: .68rem; line-height: 1; padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(0,0,0,.22); cursor: pointer; white-space: nowrap; }
.gr-aff-tessera:hover { box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.gr-aff-tessera-vuota { background: #fff; color: #555; border: 1px dashed #888; }
.gr-aff-tessera-ignota { border: 1px dashed #333; }
.gr-aff-tessera-segnalata { border: 2px solid var(--gr-rosso); padding: 3px 5px; }
.gr-aff-nota { font-size: .7rem; color: var(--gr-txm); font-style: italic; }

/* --- elenco dei vani: tutti i vani, filtrabili e correggibili sul posto o a gruppi
   (Vani_Elenco, Vani_Correggi). Sopra la tabella, i valori di ogni coefficiente
   nei vani filtrati; la barra blu compare quando si sceglie qualche vano --- */
.gr-ev-cerca { font-size: .78rem; padding: 3px 8px; border: 1px solid var(--gr-bd); border-radius: 6px; width: 240px; max-width: 60vw; }
.gr-ev-conta { font-size: .76rem; color: var(--gr-txm); }
.gr-ev-avviso { font-size: .74rem; color: #7a5200; max-width: 46vw; }
.gr-bt.gr-ev-da-ricalcolare { border-color: var(--gr-giallo); background: var(--gr-giallo-soft); color: #7a5200; }

.gr-ev-valori { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; }
.gr-ev-riga-valori { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .74rem; }
.gr-ev-nome-coef { width: 96px; font-weight: 700; color: var(--gr-tx); }
.gr-ev-stato { font-size: .68rem; color: var(--gr-verde); min-width: 74px; }
.gr-ev-misto .gr-ev-stato { color: #b26a00; }
.gr-ev-valore {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  border: 1px solid var(--gr-bd); border-radius: 12px; background: #fff;
  font-size: .72rem; color: var(--gr-tx); cursor: pointer;
}
.gr-ev-valore:hover { border-color: var(--gr-ac); }
.gr-ev-valore b { font-weight: 700; color: var(--gr-txm); }
.gr-ev-valore-attivo { border-color: var(--gr-ac); background: var(--gr-ac-soft); box-shadow: inset 0 0 0 1px var(--gr-ac); }
.gr-ev-campione { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); flex-shrink: 0; vertical-align: -1px; margin-right: 5px; }
.gr-ev-valore .gr-ev-campione { margin-right: 0; }

.gr-ev-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; margin: 0 0 8px; background: var(--gr-ac-soft); border: 1px solid var(--gr-ac); border-radius: 8px; font-size: .78rem; }
.gr-ev-gruppo.hide, .gr-ev-gruppo .hide { display: none; }
.gr-ev-gruppo-conta { font-weight: 700; color: var(--gr-ac); }
.gr-ev-gruppo label { margin: 0; color: var(--gr-txm); }
.gr-ev-gruppo select, .gr-ev-gruppo input[type=text] { font-size: .78rem; padding: 2px 6px; border: 1px solid var(--gr-bd); border-radius: 4px; background: #fff; }

.gr-ev-box { overflow: auto; max-height: calc(100vh - 250px); background: #fff; border: 1px solid var(--gr-bd); border-radius: 8px; }
.gr-ev-tabella { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.gr-ev-tabella th, .gr-ev-tabella td { padding: 4px 6px; border-bottom: 1px solid #edf0f3; white-space: nowrap; }
/* le due righe dell'intestazione restano ferme mentre l'elenco scorre (la seconda
   si mette sotto la prima: la sua distanza dall'alto la calcola GR_evPrepara) */
.gr-ev-tabella thead th { position: sticky; top: 0; z-index: 2; background: #f7f9fb; }
/* le intestazioni vanno a capo ("Piano del / disegno"): la larghezza la decidono i dati */
.gr-ev-titoli th { white-space: normal; line-height: 1.2; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gr-txm); cursor: pointer; user-select: none; vertical-align: bottom; }
.gr-ev-titoli th:hover { color: var(--gr-ac); }
.gr-ev-filtri th { font-weight: 400; border-bottom: 1px solid var(--gr-bd); }
.gr-ev-verso { color: var(--gr-ac); }
.gr-ev-filtro { width: 100%; min-width: 48px; font-size: .72rem; padding: 1px 2px; border: 1px solid var(--gr-bd); border-radius: 4px; background: #fff; }
input.gr-ev-filtro { min-width: 90px; }
.gr-ev-tabella tbody tr:hover td { background: #f5f9fc; }
.gr-ev-tabella tbody tr.gr-ev-scelto td { background: var(--gr-ac-soft); }
.gr-ev-num { text-align: right; }
.gr-ev-casella { width: 28px; text-align: center; }
.gr-ev-rif { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.gr-ev-nullo { color: #b8c0c8; }
.gr-ev-modificabile { cursor: pointer; }
.gr-ev-modificabile:hover { box-shadow: inset 0 0 0 1px var(--gr-ac); border-radius: 3px; }
.gr-ev-ignoto { color: #7d7d7d; font-style: italic; }
.gr-ev-edita { font-size: .76rem; padding: 1px 4px; border: 1px solid var(--gr-ac); border-radius: 4px; max-width: 180px; }
.gr-ev-azioni { width: 30px; text-align: center; }
.gr-ev-apri { border: none; background: transparent; color: var(--gr-txm); padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.gr-ev-apri:hover { background: var(--gr-ac-soft); color: var(--gr-ac); }

@media (max-width: 1100px) {
  /* sotto i tre pannelli affiancati non c'e' piu' spazio: tornano a
     dimensione naturale, impilati, e scorre la pagina intera invece del
     riempimento a tutta altezza pensato per schermi larghi */
  .gr-vista-reale { flex: 0 0 auto; }
  .gr-reale-tre { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 260px; flex: 0 0 auto; min-height: auto; }
  .gr-reale-tre > .gr-reale-pannello:last-child { grid-row: span 2; }
  /* la mappa qui e' bassa: la pianta chiave si fa piu' piccola */
  .gr-pianta-chiave { width: 150px; }
  #pianta-chiave-mappa { height: 90px; }
}
/* sotto questa larghezza la barra degli strumenti della mappa non ci sta su una
   riga: si toglie la scritta "Colora per" (resta come suggerimento sul menu) */
@media (max-width: 1400px) {
  .gr-reale-centro > .gr-toolbar-vista > label { display: none; }
  .gr-reale-centro > .gr-toolbar-vista .gr-sep { margin: 0 1px; }
}
@media (max-width: 576px) {
  .gr-pannello, .gr-pannello-largo { width: 90vw; }
  .gr-lavoro { max-width: 40vw; }
}