/* Tema di Flussario: token di colore e aspetto dei simboli/collegamenti.
   Stessa idea di SCADA (ISA-101): grigi a riposo, colore solo per stato attivo e fluido in movimento.
   Nessun colore va scritto fuori da questo file: simboli.js e canvas.js usano solo classi. */
:root, :root[data-theme="light"] {
  --bg: #c8ccd1; --panel: #dfe2e6; --panel2: #eef0f2; --line: #9aa0a8; --grid: rgba(0,0,0,.08);
  --ink: #23272c; --ink2: #5a6069; --equip: #4a5058; --pipe: #7d838c; --signal: #6a55a8; --air: #0e8a8a;
  --run: #1f7a33; --alm: #c9302c; --warn: #c77c00; --sel: #2f6fb0; --primary: #2f6fed; --primary-ink: #fff;
  --canvas: #e7eaed; --dot: #aab0b8; --badge: #b3261e; --alm-testo: #b3261e;
  /* fluidi (id come in core/stream.py FLUID_TYPES) */
  --f-steam: #b8860b; --f-chilled_water: #2e8fbf; --f-nitrogen: #9a4f9a; --f-purified_water: #2f8a86;
  --f-wfi: #1f6f9a; --f-plant_water: #3d7fb5; --f-hot_water: #c4553a; --f-generico: #3d7fb5;
  --f-clean_steam: #d1a33a; --f-air_technical: #6c8a3a; --f-air_filtered: #3f8f5f;
}
:root[data-theme="dark"] {
  --bg: #1b1e24; --panel: #14161a; --panel2: #22252c; --line: #3a3f48; --grid: rgba(255,255,255,.07);
  --ink: #e4e7ea; --ink2: #9aa2ac; --equip: #c2c8cf; --pipe: #6b727c; --signal: #a894e0; --air: #4fd1c5;
  --run: #3fae58; --alm: #e05450; --warn: #e09a2f; --sel: #5b9bd0; --primary: #2f6fed; --primary-ink: #fff;
  --canvas: #1f2329; --dot: #3a4048; --badge: #b3261e; --alm-testo: #ff8a85;
  --f-steam: #d4a017; --f-chilled_water: #4fb0dd; --f-nitrogen: #b56ab5; --f-purified_water: #4fb3ae;
  --f-wfi: #5fa8d3; --f-plant_water: #5b9bd0; --f-hot_water: #e07a5f; --f-generico: #5b9bd0;
  --f-clean_steam: #f0c75a; --f-air_technical: #9bbd5f; --f-air_filtered: #6fcf97;
}

/* ---------- canvas ---------- */
svg.tela { background: var(--canvas); display: block; width: 100%; height: 100%; user-select: none; touch-action: none; }
svg.tela.mano { cursor: grab; }
.tela-punto { fill: var(--dot); }
.tela-fondo { cursor: default; }

/* collegamenti: tubo = fluido di processo, segnale = strumentazione (tratteggio ISA) */
.collegamento .linea { fill: none; stroke-linejoin: round; pointer-events: none; }
.collegamento.tubo .linea { stroke: var(--pipe); stroke-width: 4; }
.collegamento.segnale .linea { stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 6 4; }
.collegamento.pneumatico .linea { stroke: var(--air); stroke-width: 2.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.collegamento .presa { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.collegamento.sel .linea { stroke: var(--sel); }
.collegamento.problema .linea { stroke: var(--alm); stroke-dasharray: none; animation: none; }
.collegamento.segnale.problema .linea { stroke-dasharray: 6 4; }
.collegamento.tubo.flusso .linea { stroke: var(--fluido, var(--f-generico)); stroke-dasharray: 9 5; animation: scorre 1s linear infinite; }
@keyframes scorre { to { stroke-dashoffset: -14; } }

/* simboli */
.sim { cursor: move; }
.bloccata .sim { cursor: pointer; }
.sim .corpo { fill: var(--panel2); stroke: var(--equip); stroke-width: 2; stroke-linejoin: round; }
.sim .segno { fill: none; stroke: var(--equip); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sim .tubo-simbolo { fill: none; stroke: var(--pipe); stroke-width: 4; }
.sim .lettera { fill: var(--equip); font-size: 14px; font-weight: 600; pointer-events: none; font-family: inherit; }
.sim .lettera.piccola { font-size: 9px; }
.sim .contorno { fill: none; stroke: var(--equip); stroke-width: 2; pointer-events: none; }
.sim .liquido { fill: var(--fluido, var(--f-generico)); opacity: .6; pointer-events: none;
                transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s linear; }
.sim.s-on .contorno { stroke: var(--run); }
.sim.s-on:has(.liquido) .corpo { fill: var(--panel2); }   /* serbatoio attivo: verde il contorno, il liquido resta visibile */
.sim.s-problema .contorno { stroke: var(--alm); }
.sim .alone { fill: transparent; stroke: none; }
.sim.s-sel .alone { stroke: var(--sel); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sim:focus-visible { outline: none; }
.sim:focus-visible .alone { stroke: var(--sel); stroke-width: 1.5; }
.sim.s-on .corpo { fill: var(--run); }
.sim.s-on .segno:not(.fuori) { stroke: #fff; }
.sim.s-on .lettera { fill: #fff; }
.sim.s-on .tubo-simbolo { stroke: var(--run); }
.sim.s-problema .alone { stroke: var(--alm); stroke-width: 2; stroke-dasharray: none; }
.sim.s-problema .corpo { stroke: var(--alm); }
.sim.s-ignoto .corpo { stroke: var(--warn); stroke-dasharray: 3 3; }
.s-sigla { font-size: 10px; font-weight: 600; fill: var(--ink); pointer-events: none; }
.sim .display-vetro { fill: var(--canvas); stroke: var(--line); stroke-width: 1; pointer-events: none; }
.sim .display-testo { fill: var(--run); font-size: 11px; font-weight: 600; font-family: Consolas, monospace; pointer-events: none; }
.sim .display-testo.display-doppio { font-size: 9.5px; }
.sim .display-testo2 { display: none; }
.s-begin { font-size: 12px; fill: var(--warn); }
.s-vivo { font-size: 10px; font-weight: 600; fill: var(--run); pointer-events: none; }

/* porte */
.porta { stroke-width: 1.5; cursor: crosshair; fill: var(--canvas); opacity: .9; }
.porta.stream { stroke: var(--pipe); }
.porta.signal { stroke: var(--signal); }
.porta.pneumatic { stroke: var(--air); }
.porta.collegata { opacity: .35; }
.porta:hover { opacity: 1; stroke-width: 2.5; }
.bloccata .porta { display: none; }
.porta-nome { font-size: 9px; font-weight: 600; pointer-events: none;
              paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; }
.porta-nome.stream { fill: var(--ink2); }
.porta-nome.signal { fill: var(--signal); }
.porta-nome.pneumatic { fill: var(--air); }
.porta-candidata { fill: none; stroke: var(--sel); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.porta-agganciata { fill: color-mix(in srgb, var(--sel) 25%, transparent); stroke: var(--sel); stroke-width: 2; pointer-events: none; }
.filo { stroke: var(--sel); stroke-width: 2; stroke-dasharray: 5 3; pointer-events: none; }

/* miniature (palette, libreria) */
svg.miniatura { flex: 0 0 auto; }