/* Lo schema di un workflow n8n nel costruttore di automazioni (D181, doc 58
   par. 6). Solo token semantici, mai un colore letterale: il tema scuro si
   ri-deriva da solo (doc 13 par. 16).
   ============================================================ */

.nx-n8nd {
    overflow: auto;
    max-width: 100%;
    border: var(--nexus-border-width) solid var(--nexus-border);
    border-radius: var(--nexus-radius-md);
    background: var(--nexus-surface-alt);
}
.nx-n8nd__empty { color: var(--nexus-text-muted); font-size: var(--nexus-fs-body-sm); padding: 12px; }
.nx-n8nd__zoomer { position: relative; margin: 0 auto; }
.nx-n8nd__canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ---- i comandi: schermo intero e zoom ---- */
.nx-n8nd__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 8px; }
.nx-n8nd__toolbar > .nx-n8nd__tool { margin-left: auto; flex: none; }
.nx-n8nd__tool {
    padding: 3px 10px; min-width: 32px;
    border: var(--nexus-border-width) solid var(--nexus-border);
    border-radius: var(--nexus-radius-sm);
    background: var(--nexus-surface); color: var(--nexus-text-primary);
    font-size: var(--nexus-fs-body-sm); cursor: pointer;
}
.nx-n8nd__tool:hover { background: var(--nexus-hover-surface); }
.nx-n8nd__tool--close { border-color: var(--nexus-accent); color: var(--nexus-accent-text); }
.nx-n8nd__zoom { min-width: 48px; text-align: center; font-size: var(--nexus-fs-body-sm); color: var(--nexus-text-secondary); }

/* ---- a tutta finestra ---- */
.nx-n8nd__overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; flex-direction: column;
    background: var(--nexus-surface-alt);
    outline: none;
}
.nx-n8nd__overlay-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px;
    border-bottom: var(--nexus-border-width) solid var(--nexus-border);
    background: var(--nexus-surface);
}
.nx-n8nd__overlay-title { font-weight: var(--nexus-fw-semibold); color: var(--nexus-text-primary); }
.nx-n8nd__overlay-tools { display: inline-flex; align-items: center; gap: 6px; }
.nx-n8nd__overlay-body { flex: 1; overflow: auto; padding: 16px; }
.nx-n8nd__edges { position: absolute; left: 0; top: 0; overflow: visible; }
.nx-n8nd__edge { fill: none; stroke-width: 2; }
/* Il colore dei rami (D181, richiesta dell'utente del 2026-09-26): ogni uscita
   di un nodo che si divide prende un colore, e il ramo lo tiene fino a dove i
   rami si riuniscono. Solo token del tema: il tema scuro li ri-deriva. */
.nx-n8nd__edge.nx-n8nd__edge--plain { stroke: var(--nexus-text-muted); stroke-width: 1.5; }
.nx-n8nd__edge.nx-n8nd__edge--c0 { stroke: var(--nexus-success-text); }
.nx-n8nd__edge.nx-n8nd__edge--c1 { stroke: var(--nexus-error-text); }
.nx-n8nd__edge.nx-n8nd__edge--c2 { stroke: var(--nexus-info); }
.nx-n8nd__edge.nx-n8nd__edge--c3 { stroke: var(--nexus-warning-text); }
.nx-n8nd__edge.nx-n8nd__edge--c4 { stroke: var(--nexus-accent); }
.nx-n8nd__edge.nx-n8nd__edge--c5 { stroke: var(--nexus-primary); }
.nx-n8nd__arrowhead.nx-n8nd__edge--plain { fill: var(--nexus-text-muted); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c0, .nx-n8nd__edge-label.nx-n8nd__edge--c0 { fill: var(--nexus-success-text); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c1, .nx-n8nd__edge-label.nx-n8nd__edge--c1 { fill: var(--nexus-error-text); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c2, .nx-n8nd__edge-label.nx-n8nd__edge--c2 { fill: var(--nexus-info); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c3, .nx-n8nd__edge-label.nx-n8nd__edge--c3 { fill: var(--nexus-warning-text); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c4, .nx-n8nd__edge-label.nx-n8nd__edge--c4 { fill: var(--nexus-accent); }
.nx-n8nd__arrowhead.nx-n8nd__edge--c5, .nx-n8nd__edge-label.nx-n8nd__edge--c5 { fill: var(--nexus-primary); }
.nx-n8nd__edge-label {
    fill: var(--nexus-text-secondary); font-size: 11px; font-weight: var(--nexus-fw-semibold);
    paint-order: stroke; stroke: var(--nexus-surface-alt); stroke-width: 4px;
}

.nx-n8nd__node {
    position: absolute;
    width: 184px; height: 92px;
    box-sizing: border-box;
    /* Contenuto in ALTO, non centrato (richiesta utente 2026-09-29): con
       meno righe (passo manuale senza codice) l'etichetta scendeva, e i
       riquadri affiancati non si leggevano piu' alla stessa altezza. */
    display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
    padding: 8px 10px 6px 12px;
    border: var(--nexus-border-width) solid var(--nexus-border);
    border-left: 4px solid var(--nexus-border);
    border-radius: var(--nexus-radius-sm);
    background: var(--nexus-surface);
    overflow: hidden;
}
.nx-n8nd__name {
    font-weight: var(--nexus-fw-semibold); font-size: var(--nexus-fs-body-sm);
    color: var(--nexus-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-n8nd__kind {
    font-family: var(--nexus-font-mono); font-size: var(--nexus-fs-table-head);
    color: var(--nexus-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-n8nd__status { font-size: var(--nexus-fs-table-head); color: var(--nexus-text-secondary); white-space: nowrap; }

/* Il clic porta al dettaglio sotto lo schema (richiesta utente 2026-09-29). */
.nx-n8nd__node--link { cursor: pointer; }
.nx-n8nd__node--link:hover { box-shadow: var(--nexus-shadow-sm); border-color: var(--nexus-accent); }

/* ---- il tipo, scritto sul riquadro (richiesta utente 2026-09-29) ----
   Prende il posto della legenda: un'etichetta nel colore del bordo, cosi'
   il colore si impara leggendo e non va decifrato. */
.nx-n8nd__tags { display: flex; gap: 4px; min-width: 0; min-height: 18px; flex: none; }
.nx-n8nd__badge, .nx-n8nd__flag {
    display: inline-block; max-width: 100%;
    padding: 0 6px; line-height: 16px;
    border: 1px solid currentColor; border-radius: 999px;
    font-size: 10px; font-weight: var(--nexus-fw-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--nexus-text-muted); background: var(--nexus-surface);
}
.nx-n8nd__flag { border-style: dashed; flex: none; }
.nx-n8nd__badge--trigger, .nx-n8nd__badge--usecase { color: var(--nexus-info-text); }
.nx-n8nd__badge--brick, .nx-n8nd__badge--doctype, .nx-n8nd__badge--knowledge { color: var(--nexus-accent-text); }
.nx-n8nd__badge--frontier { color: var(--nexus-warning-text); }
.nx-n8nd__badge--code, .nx-n8nd__badge--sentinel, .nx-n8nd__badge--operation { color: var(--nexus-error-text); }
.nx-n8nd__badge--tool { color: var(--nexus-success-text); }
.nx-n8nd__badge--agent, .nx-n8nd__badge--dashboard { color: var(--nexus-primary); }
.nx-n8nd__badge--flow { color: var(--nexus-text-primary); }
.nx-n8nd__badge--queue, .nx-n8nd__badge--routing { color: var(--nexus-info-text); }

/* ---- che cosa e' il nodo ---- */
.nx-n8nd__node--trigger { border-left-color: var(--nexus-info); }
.nx-n8nd__node--brick { border-left-color: var(--nexus-accent); background: var(--nexus-accent-subtle); }
.nx-n8nd__node--frontier { border-left-color: var(--nexus-warning-text); }
.nx-n8nd__node--code { border-left-color: var(--nexus-error-text); }
.nx-n8nd__node--changed { outline: 2px dashed var(--nexus-accent); outline-offset: 2px; }
/* Le voci del piano del Progettista (D182). */
.nx-n8nd__node--usecase { border-left-color: var(--nexus-info); }
.nx-n8nd__node--tool { border-left-color: var(--nexus-success-text); }
.nx-n8nd__node--agent { border-left-color: var(--nexus-primary); }
.nx-n8nd__node--sentinel { border-left-color: var(--nexus-error-text); }
.nx-n8nd__node--manual { border-left-style: dashed; border-left-color: var(--nexus-text-muted); }
.nx-n8nd__node--flow { border-left-color: var(--nexus-text-primary); }
.nx-n8nd__node--queue { border-left-color: var(--nexus-info-text); border-left-style: double; }
.nx-n8nd__node--doctype { border-left-color: var(--nexus-accent); border-left-style: dotted; }
.nx-n8nd__node--knowledge { border-left-color: var(--nexus-accent); border-left-style: double; }
.nx-n8nd__node--routing { border-left-color: var(--nexus-info-text); border-left-style: dashed; }
.nx-n8nd__node--dashboard { border-left-color: var(--nexus-primary); border-left-style: dotted; }
/* L'operazione (D190): la scrittura verso un sistema esterno, col tono dell'errore tratteggiato — si nota. */
.nx-n8nd__node--operation { border-left-color: var(--nexus-error-text); border-left-style: dashed; }
.nx-n8nd__node--reused { opacity: .75; }


/* ---- com'e' andata la prova ---- */
.nx-n8nd__node--run-ok { background: var(--nexus-success-subtle); }
.nx-n8nd__node--run-ok .nx-n8nd__status { color: var(--nexus-success-text); }
.nx-n8nd__node--run-simulated .nx-n8nd__status { color: var(--nexus-info-text); }
.nx-n8nd__node--run-error { background: var(--nexus-error-subtle); border-color: var(--nexus-error-text); }
.nx-n8nd__node--run-error .nx-n8nd__status { color: var(--nexus-error-text); font-weight: var(--nexus-fw-semibold); }
.nx-n8nd__node--run-idle { opacity: .6; }
/* D404 (doc 59 par. 35.3): la voce del Progettista che aspetta un'altra - ne' errore ne' successo. */
.nx-n8nd__node--run-waiting { background: var(--nexus-info-subtle); border-style: dashed; border-color: var(--nexus-info-text); }
.nx-n8nd__node--run-waiting .nx-n8nd__status { color: var(--nexus-info-text); }
/* Il Progettista: un'operazione costruita ma ancora da approvare (2026-09-30). */
.nx-n8nd__node--run-warning { background: var(--nexus-warning-subtle); }
.nx-n8nd__node--run-warning .nx-n8nd__status { color: var(--nexus-warning-text); font-weight: var(--nexus-fw-semibold); }
/* Il Progettista: la voce su cui il costruttore lavora adesso (2026-10-07), con la rotellina della sua scheda. */
.nx-n8nd__node--run-working { background: var(--nexus-info-subtle); box-shadow: 0 0 0 2px var(--nexus-accent); }
.nx-n8nd__node--run-working .nx-n8nd__status { color: var(--nexus-info-text); display: inline-flex; align-items: center; gap: 5px; }
.nx-n8nd__node--run-working .nx-n8nd__status::before { content: ""; width: 9px; height: 9px; border: 2px solid var(--nexus-border); border-top-color: var(--nexus-accent); border-radius: 50%; animation: nx-pwiz-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .nx-n8nd__node--run-working .nx-n8nd__status::before { animation-duration: 2.4s; } }