/* -------------------------------------------------------------------------
 * diagram.css — editor di diagrammi a blocchi (gest/grafici/diagram.php).
 *
 * Due colonne: a sinistra la struttura e le proprieta`, a destra il disegno.
 * Sotto i 992 px si impilano: il disegno resta comunque leggibile perche' e`
 * un SVG che si adatta alla larghezza disponibile.
 * ------------------------------------------------------------------------- */

.dg-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .5rem .6rem;
  margin-bottom: .6rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #f8f9fa;
}
.dg-barra .dg-sep { width: 1px; height: 1.6rem; background: #dee2e6; margin: 0 .3rem; }
/* I comandi che vanno insieme vanno a capo insieme: senza, la barra stretta
   spezza «Esporta SVG | dpi | Esporta PNG» a meta` e non si capisce piu` a che
   cosa si riferisca il campo dei dpi. */
.dg-barra .dg-gr { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.dg-barra label { font-size: .82rem; margin: 0 .2rem 0 0; }
.dg-barra input[type=text] { width: 10rem; }
/* Altezza, carattere e bordo dei campi: css/common/editor_svg.css (.eds-campi). */
.dg-barra input[type=number] { width: 5rem; }
.dg-barra .dg-dim { font-size: .78rem; color: #6c757d; margin-left: auto; white-space: nowrap; cursor: help; }
.dg-barra .dg-zoom-val { min-width: 4.2rem; font-variant-numeric: tabular-nums; }


.dg-griglia { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: .8rem; align-items: start; }
@media (max-width: 991.98px) { .dg-griglia { grid-template-columns: minmax(0, 1fr); } }

/* --- colonna di sinistra --- */
.dg-pannello { border: 1px solid #dee2e6; border-radius: 6px; background: #fff; }
.dg-pannello > h4 {
  font-size: .85rem; font-weight: bold; margin: 0;
  padding: .35rem .6rem; background: #eef1f4; border-bottom: 1px solid #dee2e6;
  border-radius: 6px 6px 0 0;
}
.dg-corpo { padding: .5rem .6rem; max-height: 26rem; overflow: auto; }

.dg-albero, .dg-albero ul { list-style: none; margin: 0; padding-left: .9rem; }
.dg-albero { padding-left: 0; font-size: .84rem; }
.dg-albero li { position: relative; padding: .05rem 0; }
.dg-albero ul { border-left: 1px dotted #ced4da; }
.dg-nodo {
  cursor: grab; display: inline-block; padding: .05rem .35rem;
  border-radius: 4px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.dg-nodo:hover { background: #eef1f4; }
.dg-nodo:active { cursor: grabbing; }
.dg-nodo.dg-attivo { background: #0d6efd; color: #fff; }
.dg-nodo .bi { opacity: .7; }


.dg-tit-sel { font-weight: bold; font-size: .86rem; margin: 0 0 .4rem; color: #0a58ca; }
.dg-gruppo { border: 1px solid #dee2e6; border-radius: 5px; margin: 0 0 .45rem; padding: .3rem .5rem .4rem; }
.dg-gruppo legend { width: auto; float: none; font-size: .78rem; font-weight: bold; padding: 0 .3rem; margin: 0; color: #495057; }
.dg-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .18rem 0; font-size: .8rem; }
.dg-et { min-width: 9rem; flex: 0 0 9rem; margin: 0; color: #495057; }
.dg-riga input[type=number] { width: 5rem; }
.dg-riga .dg-largo { flex: 1 1 9rem; min-width: 0; }
.dg-riga textarea { font-family: inherit; resize: vertical; }
.dg-col { width: 2.2rem; height: 1.6rem; padding: 0; cursor: pointer; }
.dg-inline { display: inline-flex; align-items: center; gap: .25rem; margin: 0; font-size: .8rem; }
.dg-nota { font-size: .76rem; color: #6c757d; margin: .2rem 0 .4rem; }
.dg-azioni { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.dg-azioni .btn { font-size: .76rem; padding: .1rem .4rem; }

/* --- colonna di destra: il disegno --- */
.dg-tela {
  border: 1px solid #dee2e6; border-radius: 6px; background: #fff;
  padding: .6rem; overflow: auto; min-height: 18rem;
}
/* La scacchiera sta SOTTO il disegno, non attorno: cosi` si vede solo dove il
   diagramma e` davvero trasparente, e non fa credere trasparente il contorno. */
.dg-tela svg {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  background-image:
    linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%),
    linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.dg-tela [data-perc] { cursor: pointer; }
.dg-tela [data-perc]:hover { filter: brightness(0.96); }

/* La comparsa la governa .eds-avviso (css/local/editor_svg.css): niente
   display, che impedirebbe la transizione. */
.dg-avvisi {
  margin-top: .5rem; padding: .4rem .6rem; font-size: .82rem;
  border: 1px solid #f5c2c7; border-radius: 5px; background: #f8d7da; color: #842029;
}

/* --- frecce --- */
.dg-tab-frecce { font-size: .78rem; margin: 0; }
.dg-tab-frecce th { font-weight: bold; white-space: nowrap; background: #eef1f4; }
.dg-tab-frecce td, .dg-tab-frecce th { padding: .15rem .3rem; vertical-align: middle; }
.dg-tab-frecce select, .dg-tab-frecce input { max-width: 100%; width: 100%; }
.dg-tab-frecce input[type=checkbox] { width: auto; }
.dg-tab-frecce .dg-centro { text-align: center; }
/* Larghezze per colonna: Da, A, Percorso, Tratto, Colore, Spessore, Punta,
   Scritta laterale (quel che resta), Escape HTML, Verso, elimina. Solo qui
   l'intestazione va a capo: su una riga sola «Escape HTML» costerebbe il
   doppio dello spazio che serve alla casella sotto. */
.dg-tab-frecce td:nth-child(1), .dg-tab-frecce td:nth-child(2) { width: 10%; }
.dg-tab-frecce td:nth-child(3), .dg-tab-frecce td:nth-child(4),
.dg-tab-frecce td:nth-child(7), .dg-tab-frecce td:nth-child(10) { width: 11%; }
.dg-tab-frecce td:nth-child(5) { width: 3rem; }
.dg-tab-frecce td:nth-child(6) { width: 4.2rem; }
.dg-tab-frecce td:nth-child(9) { width: 3.4rem; }
.dg-tab-frecce th:nth-child(9) { white-space: normal; width: 3.4rem; }
.dg-tab-frecce td:last-child { width: 2.4rem; }
.dg-tab-frecce .dg-col { width: 2.2rem; }
.dg-tab-frecce .dg-mini { width: 3.6rem; }
.dg-tab-frecce .btn { font-size: .74rem; padding: .05rem .3rem; }
.dg-vuoto { color: #6c757d; font-style: italic; text-align: center; }

/* --- editor JSON --- */
.dg-json { margin-top: .8rem; }
.dg-json > summary { cursor: pointer; font-weight: bold; font-size: .86rem; padding: .2rem 0; }
#dg_ace { width: 100%; height: 20rem; border: 1px solid #dee2e6; border-radius: 5px; }

/* --- filtro dell'elenco e selezione secondaria --- */
.dg-filtro { display: block; width: calc(100% - 1.2rem); margin: .4rem .6rem 0; }
/* Il selezionato PRINCIPALE è pieno, gli altri della selezione multipla
   sono tenui: si vede a quale si riferiscono i campi del pannello. */
.dg-nodo.dg-scelto { background: #cfe2ff; color: #084298; }

/* L'identificatore del nodo selezionato, accanto al suo nome: e` il nome con cui
   lo chiamano le frecce, e va visto senza aprire il JSON. */
.dg-tit-sel .dg-id {
  font-size: .76rem; font-weight: normal; color: #495057;
  background: #f1f3f5; border: 1px solid #dee2e6; border-radius: 3px; padding: 0 .3rem;
}