/* Impaginazione della GUI (struttura portata da Processino; colori dai token di tema.css). */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

#app { display: flex; flex-direction: column; height: 100vh; }

#topbar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
#brand { font-weight: 700; font-size: 18px; color: var(--sel); margin-right: 4px; text-decoration: none; }

/* barra delle pagine secondarie (js/barra.js) */
.barra-pagina { position: sticky; top: 0; z-index: 10; }
.barra-nav a { color: var(--ink2); text-decoration: none; font-size: 13px; font-weight: 600;
               padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; }
.barra-nav a:hover { color: var(--ink); border-color: var(--line); }
.barra-nav a.qui { color: var(--ink); background: var(--panel2); border-color: var(--line); }
.barra-nav { flex-wrap: wrap; min-width: 0; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group label { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 4px; }
.toolbar-group input[type="number"] { width: 70px; }
.toolbar-group .registra input[type="number"] { width: 52px; }
.registra-stato { font-size: 12px; color: var(--run); white-space: nowrap; }
.registra-stato.errore { color: var(--alm); white-space: normal; }
.toolbar-end { margin-left: auto; }
.toolbar-end a { color: var(--sel); font-size: 13px; text-decoration: none; }
.toolbar-end a:hover { text-decoration: underline; }

button {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 10px; cursor: pointer; font-size: 13px; font-family: inherit;
}
button:hover { border-color: var(--ink2); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }

input, select, textarea {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; font-family: inherit;
}

#main { flex: 1; display: flex; min-height: 0; }

#palette {
  flex: 0 1 270px; min-width: 170px; background: var(--panel); border-right: 1px solid var(--line);
  padding: 12px; overflow-y: auto;
}
#palette h3, #results h3 {
  margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sel);
}
#palette-tree { margin-bottom: 20px; }
.tree-category { margin-bottom: 14px; }
.tree-category-header { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); margin-bottom: 6px; }
.tree-category-items { display: flex; flex-direction: column; gap: 4px; }
.tree-item { display: flex; gap: 4px; }
.tree-item button.tree-item-place {
  flex: 1; text-align: left; display: flex; align-items: center; gap: 8px; padding: 3px 8px;
}
.tree-item button.tree-item-place[draggable="true"] { cursor: grab; }
.tree-item button.tree-item-edit { flex: 0 0 auto; padding: 6px 8px; }
#btn-new-component { margin-top: 6px; width: 100%; text-align: left; border-style: dashed; color: var(--sel); }

.param-row { margin-bottom: 10px; }
.param-row label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 3px; }
.param-row input, .param-row select { width: 100%; }
.param-row-bool input { width: auto; }
.param-row .unit { color: var(--ink2); font-size: 11px; }
.hint { color: var(--ink2); font-size: 12px; }
#params-panel .node-label { font-weight: 600; margin-bottom: 8px; font-size: 12px; color: var(--ink); }

.begin-section { margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.begin-section label { color: var(--ink); }
.connections-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.connections-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--sel); }

/* scambio con il PLC durante il RUN: stato ben visibile, rosso quando scrive */
.plc-barra { display: inline-flex; align-items: center; gap: 6px; }
.plc-barra[hidden] { display: none; }
.plc-stato { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line);
             color: var(--ink2); white-space: nowrap; }
.plc-stato.lettura { color: var(--run); border-color: var(--run); }
.plc-stato.armato { color: var(--primary-ink); background: var(--alm); border-color: var(--alm); }
.plc-stato.persa, .plc-stato.collegamento { color: var(--warn); border-color: var(--warn); }
#btn-plc-arma.armato { border-color: var(--alm); color: var(--alm); }

/* schede della colonna di sinistra: Componenti / Logica */
.schede-palette { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.schede-palette button { border-radius: 4px 4px 0 0; border-bottom: none; background: transparent; font-size: 12px;
                         font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.schede-palette button.attiva { background: var(--panel2); border-color: var(--line); color: var(--sel); }
.palette-nota { font-size: 12px; color: var(--ink2); margin: 0 0 10px; }

/* schede della colonna di destra: Risultati / Claude (come quelle della palette) */
.schede-risultati { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--line); clear: both; }
.schede-risultati button { border-radius: 4px 4px 0 0; border-bottom: none; background: transparent; font-size: 12px;
                           font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.schede-risultati button.attiva { background: var(--panel2); border-color: var(--line); color: var(--sel); }
.ai-badge { display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 5px; border-radius: 8px; background: var(--badge);
            color: #fff; font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0; }
.ai-badge[hidden] { display: none; }

/* scheda Claude: collegamento con un'AI tramite il server MCP (js/ai.js) */
#ai-panel[hidden] { display: none; }
.ai-stato { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.ai-pallino { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink2); opacity: .6; }
.ai-pallino.attivo { background: var(--run); opacity: 1; }
.ai-pallino.attesa { background: var(--warn); opacity: 1; }
.ai-interruttore { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ai-come { margin: 6px 0 10px; font-size: 12px; }
.ai-come summary { cursor: pointer; color: var(--sel); }
.ai-comando-riga { display: flex; gap: 6px; align-items: flex-start; }
#ai-comando { flex: 1; word-break: break-all; font-size: 11px; background: var(--panel2); padding: 4px 6px; border-radius: 4px;
              border: 1px solid var(--line); user-select: all; }
.ai-proposta { border: 1px solid var(--sel); border-left-width: 4px; border-radius: 6px; padding: 8px 10px; margin: 8px 0;
               background: var(--panel2); font-size: 12px; }
.ai-proposta.applicata { border-color: var(--run); }
.ai-proposta.rifiutata { border-color: var(--line); opacity: .75; }
.ai-proposta-testa { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ai-badge-stato { font-size: 10px; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.ai-proposta-spiega { margin: 6px 0; color: var(--ink2); overflow-wrap: anywhere; }
.ai-proposta-righe { margin: 6px 0; padding-left: 18px; }
.ai-proposta-righe li { overflow-wrap: anywhere; margin-bottom: 2px; }
.ai-proposta-avviso { color: var(--warn); margin: 3px 0; overflow-wrap: anywhere; }
.ai-proposta-errore { color: var(--alm); margin: 4px 0; overflow-wrap: anywhere; }
.ai-proposta-azioni { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ai-messaggi { max-height: 280px; min-height: 80px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px;
               background: var(--canvas); display: flex; flex-direction: column; gap: 6px; }
.ai-msg { max-width: 92%; padding: 6px 8px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-msg.utente { align-self: flex-end; background: var(--primary); color: var(--primary-ink); }
.ai-msg.claude { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); }
.ai-msg.sistema { align-self: center; font-size: 11px; color: var(--ink2); text-align: center; background: transparent; }
.ai-msg-chi, .ai-msg-nota { font-size: 10px; }
.ai-msg.utente .ai-msg-chi, .ai-msg.utente .ai-msg-nota { color: rgba(255,255,255,.9); }
.ai-msg.claude .ai-msg-chi, .ai-msg.claude .ai-msg-nota { color: var(--ink2); }
.ai-backup { overflow-wrap: anywhere; }
.ai-proposta-errore { color: var(--alm-testo); }
.ai-msg-chi { margin-bottom: 2px; }
.ai-msg-nota { margin-top: 2px; }
.ai-scrivi { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.ai-scrivi textarea { flex: 1; resize: vertical; font: inherit; font-size: 12px; }
.ai-piede { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; }
.ai-piede a { color: var(--sel); }

/* colonne retrattili (palette a sinistra, risultati a destra): chiuse restano una striscia
   con il pulsante e il nome in verticale, e il canvas prende lo spazio */
.ritira { display: flex; align-items: center; gap: 6px; float: right; margin: -4px -4px 4px 8px; padding: 2px 8px;
          font-size: 14px; line-height: 1; color: var(--ink2); }
#results .ritira { float: left; margin: -4px 8px 4px -4px; }
#palette.ritirata, #results.ritirata { flex: 0 0 34px; min-width: 34px; padding: 6px 3px; overflow: hidden; }
.ritirata > :not(.ritira):not(.ritira-titoli) { display: none !important; }
.ritira-titoli { display: none; }
.ritirata .ritira-titoli { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ritira-titoli button { writing-mode: vertical-rl; padding: 10px 2px; font-size: 12px; font-weight: 600;
                        text-transform: uppercase; letter-spacing: .08em; color: var(--sel); background: transparent;
                        border-color: transparent; }
.ritira-titoli button:hover { background: var(--panel2); border-color: var(--line); }
#results .ritira-titoli button { transform: rotate(180deg); }
.ritirata .ritira, #results.ritirata .ritira { float: none; margin: 0 0 6px; width: 100%; justify-content: center;
                    padding: 6px 0; border-color: transparent; background: transparent; }
.ritirata .ritira:hover { background: var(--panel2); border-color: var(--line); }


#canvas-wrap { flex: 1 1 auto; min-width: 320px; position: relative; }
.banner-bozza { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 5; display: flex; gap: 8px; align-items: center;
                flex-wrap: wrap; padding: 8px 12px; background: var(--panel); border: 1px solid var(--sel);
                border-left: 4px solid var(--sel); border-radius: 6px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.banner-bozza[hidden] { display: none; }
.banner-bozza span { flex: 1 1 260px; }
#graph-canvas { position: absolute; inset: 0; }
#canvas-hint {
  position: absolute; top: 6px; left: 8px; right: 8px; font-size: 11px; color: var(--ink2);
  pointer-events: none; opacity: .85;
}
#status-bar {
  position: absolute; bottom: 8px; left: 8px; right: 8px; font-size: 12px; color: var(--alm);
  min-height: 16px; pointer-events: none;
}
#status-bar.ok { color: var(--run); }

#results {
  flex: 0 1 340px; min-width: 220px; background: var(--panel); border-left: 1px solid var(--line);
  padding: 12px; overflow-y: auto;
}
#results-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#results-controls label { font-size: 12px; color: var(--ink2); display: flex; flex-direction: column; gap: 3px; }
#chart-canvas { max-width: 100%; }
#results-table { margin-top: 12px; font-size: 12px; }
#results-table table { width: 100%; border-collapse: collapse; }
#results-table td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
#results-table td:first-child { color: var(--ink2); word-break: break-all; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px;
  width: min(760px, 92vw); max-height: 92vh; overflow-y: auto;
}
.modal-panel h3 { margin: 0 0 14px; color: var(--sel); }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.modal-actions-spacer { flex: 1; }
#editor-btn-delete { color: var(--alm); border-color: var(--alm); }
.graphs-panel { width: min(520px, 92vw); }
.graphs-folder { margin-bottom: 12px; word-break: break-all; }
.graphs-folder code { color: var(--ink); }
.graphs-list { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow-y: auto; margin-bottom: 8px; }
.graphs-list button { display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.graphs-list button span:last-child { color: var(--ink2); font-size: 11px; }
.editor-symbol-hint { margin-bottom: 8px; font-size: 11px; color: var(--ink2); }
.editor-warning { color: var(--warn); font-size: 12px; margin-bottom: 8px; border-left: 3px solid var(--warn); padding-left: 8px; }
.editor-symbol-hint a { color: var(--sel); }
#editor-codemirror-host { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#editor-codemirror-host .CodeMirror { height: 360px; font-size: 13px; }
.editor-error { color: var(--alm); font-size: 12px; margin-top: 8px; white-space: pre-wrap; }

.node-context-menu {
  position: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 4px;
  z-index: 2000; display: flex; flex-direction: column; min-width: 160px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.node-context-menu-item { text-align: left; background: transparent; border: none; padding: 6px 10px; border-radius: 3px; }
.node-context-menu-item:hover { background: var(--panel2); }

/* ---------- libreria simboli ---------- */
.libreria { padding: 16px; max-width: 1200px; margin: 0 auto; }
.libreria h1 { font-size: 20px; color: var(--sel); margin: 0 0 4px; }
.libreria p { color: var(--ink2); font-size: 13px; }
.libreria-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 16px; }
.libreria-voce { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: flex; gap: 10px; }
.libreria-legenda { display: flex; gap: 18px; flex-wrap: wrap; }
.libreria-legenda svg { vertical-align: middle; }
.libreria-sezione { font-size: 15px; color: var(--ink); margin: 24px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.libreria-voce svg { background: var(--canvas); border-radius: 4px; flex: none; }
.libreria-voce h2 { font-size: 13px; margin: 0 0 2px; }
.libreria-voce code { font-size: 12px; color: var(--sel); }
.libreria-voce ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 11px; color: var(--ink2); }
.libreria-porta { font-family: Consolas, monospace; font-size: 9px; fill: var(--ink2); }
.libreria-porta.signal { fill: var(--signal); }
.libreria-porta.pneumatic { fill: var(--air); }

/* riproduzione di un RUN registrato (js/riproduzione.js) */
.riproduzione { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6; padding: 8px 10px; border-radius: 6px;
  background: var(--panel, #20242a); border: 1px solid var(--run, #3b82f6); font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.riproduzione[hidden] { display: none; }
.rip-testo { font-weight: 600; }
.rip-comandi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rip-pista { position: relative; flex: 1 1 260px; min-width: 200px; height: 22px; }
.rip-pista input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; margin: 0; }
.rip-marcatori { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; }
.rip-marca { position: absolute; bottom: 0; width: 2px; height: 6px; background: #9aa2ac; }
.rip-marca-par { background: #f59e0b; }
.rip-marca-avv { background: #ef4444; }
.rip-tempo { font-variant-numeric: tabular-nums; min-width: 130px; }
.rip-evento { color: var(--ink2, #9aa2ac); }
.rip-esci { margin-left: auto; }
body.riproduzione-attiva #params-panel, body.riproduzione-attiva #palette-tree, body.riproduzione-attiva #palette-logica
  { pointer-events: none; opacity: .65; }
body.riproduzione-attiva #canvas-hint { display: none; }

/* accesso, moduli e limite di componenti (webapp/accesso.py) */
.barra-utente { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.barra-utente .avviso-accesso { color: var(--warn, #f59e0b); }
.contatore-componenti { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.contatore-componenti.limite-raggiunto { color: #ef4444; font-weight: 600; }
.modulo-off { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
a.modulo-off { text-decoration: line-through; }
button.modulo-off { text-decoration: none; }

/* angolo in alto a destra: contatore dei componenti e utente (lo spazio si riserva da js/main.js con il padding della barra) */
.angolo-utente { position: absolute; top: 8px; right: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; z-index: 5; }
.angolo-riga { display: flex; gap: 12px; align-items: center; min-height: 28px; }
.angolo-utente .toolbar-end { margin-left: 0; flex-wrap: nowrap; white-space: nowrap; }
/* i gruppi di strumenti vanno a capo dentro lo spazio che l'angolo lascia, invece di scivolarci sotto */
#topbar > .toolbar-group { flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* schermo stretto: l'angolo non si sovrappone, torna in fila con la barra */
@media (max-width: 900px) {
  .angolo-utente { position: static; align-items: flex-start; order: 1; }
  .angolo-utente .toolbar-end { flex-wrap: wrap; white-space: normal; }
}