/* -------------------------------------------------------------------------
 * fluxdiag.css — editor di diagrammi di flusso (gest/grafici/fluxdiag.php).
 *
 * Impaginazione a due colonne come l'editor dei diagrammi a blocchi: a
 * sinistra i blocchi e le proprietà, a destra il disegno, sotto la tabella dei
 * collegamenti. Le parti comuni agli editor SVG (barra di ripescaggio,
 * tavolozza) stanno in css/local/editor_svg.css.
 * ------------------------------------------------------------------------- */

.fx-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;
}
.fx-barra .fx-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 metà. */
.fx-barra .fx-gr { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.fx-barra label { font-size: .82rem; margin: 0 .2rem 0 0; }
.fx-barra input[type=text] { width: 10rem; }
/* Altezza, carattere e bordo dei campi: css/common/editor_svg.css (.eds-campi). */
.fx-barra input[type=number] { width: 5rem; }
.fx-barra .fx-dim { font-size: .78rem; color: #6c757d; margin-left: auto; white-space: nowrap; cursor: help; }
.fx-barra .fx-zoom-val { min-width: 4.2rem; font-variant-numeric: tabular-nums; }

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

.fx-pannello { border: 1px solid #dee2e6; border-radius: 6px; background: #fff; }
.fx-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;
}
.fx-corpo { padding: .5rem .6rem; max-height: 26rem; overflow: auto; }

/* --- elenco dei blocchi, raggruppato per livello --- */
.fx-liv {
  font-size: .72rem; font-weight: bold; color: #6c757d; text-transform: uppercase;
  letter-spacing: .04em; margin: .45rem 0 .1rem; border-bottom: 1px solid #eceff1;
}
.fx-liv:first-child { margin-top: 0; }
.fx-elenco { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.fx-elenco li { padding: .05rem 0; }
.fx-nodo {
  cursor: pointer; display: inline-block; padding: .05rem .35rem; border-radius: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.fx-nodo:hover { background: #eef1f4; }
.fx-nodo.fx-attivo { background: #0d6efd; color: #fff; }
.fx-nodo .bi { opacity: .7; }
.fx-pin { color: #b26a00; opacity: 1 !important; }
.fx-nodo.fx-attivo .fx-pin { color: #ffe08a; }

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

/* --- il disegno --- */
.fx-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: si vede solo dove il
   diagramma è davvero trasparente. */
.fx-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;
}
.fx-tela [data-id] { cursor: pointer; }
.fx-tela [data-id]:hover { filter: brightness(0.96); }

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

/* --- collegamenti --- */
.fx-tab-archi { font-size: .78rem; margin: 0; }
.fx-tab-archi th { font-weight: bold; white-space: nowrap; background: #eef1f4; }
.fx-tab-archi td, .fx-tab-archi th { padding: .15rem .3rem; vertical-align: middle; }
.fx-tab-archi select, .fx-tab-archi input { max-width: 100%; width: 100%; }
.fx-tab-archi input[type=checkbox] { width: auto; }
.fx-tab-archi .fx-centro { text-align: center; }
/* Colonne: Da, A, Etichetta (quel che resta), Escape HTML, Tratto, Colore,
   Spessore, Punta, Ritorno, elimina. */
.fx-tab-archi td:nth-child(1), .fx-tab-archi td:nth-child(2) { width: 11%; }
.fx-tab-archi td:nth-child(4) { width: 3.4rem; }
.fx-tab-archi th:nth-child(4) { white-space: normal; width: 3.4rem; }
.fx-tab-archi td:nth-child(5), .fx-tab-archi td:nth-child(8),
.fx-tab-archi td:nth-child(9) { width: 11%; }
.fx-tab-archi td:nth-child(6) { width: 3rem; }
.fx-tab-archi td:nth-child(7) { width: 4.2rem; }
.fx-tab-archi td:last-child { width: 2.4rem; }
.fx-tab-archi .fx-mini { width: 3.6rem; }
/* I ritorni — gli archi che chiudono un ciclo — si riconoscono a colpo
   d'occhio: sono gli unici per cui la colonna «Ritorno» ha un comando. */
.fx-tab-archi tr.fx-ritorno { background: #fff8e1; }
.fx-vuoto { color: #6c757d; font-style: italic; text-align: center; }

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

/* --- filtro dell'elenco e selezione secondaria --- */
.fx-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. */
.fx-nodo.fx-scelto { background: #cfe2ff; color: #084298; }