/* ============================================================================
   Designer dei cicli di vita — prefisso .lcd-*
   Portato dal mockup approvato: UPFCLOUD_Docs/lifecycle_designer_mockup_A_flusso_verticale.html

   STRUTTURA A DUE LIVELLI (vincolo §15.2 dell'analisi, difetto F16 sulle Automazioni):

     Livello 1 — palette di modulo --lc-*  su :root, così vale anche dentro i dialog
                 MudBlazor, che vivono nel portale fuori dall'albero di pagina.
     Livello 2 — token locali --lcd-*      su .lcd-root, con blocco di override
                 [data-bs-theme="dark"] .lcd-root.

   LE REGOLE DI STILE USANO SOLO I TOKEN DI LIVELLO 2. Per cambiare tema si toccano
   i due blocchi in testa, mai le singole regole.

   NON usare le variabili --mud-palette-*: il tema MudBlazor del prodotto ha Surface
   chiaro anche in PaletteDark, e quelle variabili esistono solo dopo l'init di
   MudThemeProvider. È esattamente ciò che ha richiesto quattro giri di correzioni
   sul designer Automazioni.

   REGOLA DI CONTRASTO (difetto corretto in F19): sopra un velo --lc-X-bg si usa
   SEMPRE --lc-X-ink, MAI --lc-X. Icona blu su velo blu era illeggibile.

   Prefisso dedicato: NON riusare i selettori .autd-* del designer Automazioni,
   per non accoppiare i due designer.
   ============================================================================ */

/* ── Livello 1: palette di modulo ─────────────────────────────────────────── */
:root {
    --lc-blue: #3c74d3;     --lc-blue-bg: #eaf1fc;   --lc-blue-ink: #2a5cb0;   --lc-blue-on: #ffffff;
    --lc-orange: #e07b39;   --lc-orange-bg: #fbeee2; --lc-orange-ink: #b25c22;
    --lc-purple: #7a5af0;   --lc-purple-bg: #efeafe; --lc-purple-ink: #5b3fc4; --lc-purple-on: #ffffff;
    --lc-green: #12a67a;    --lc-green-bg: #e4f5ef;  --lc-green-ink: #0d7a58;
    --lc-teal: #0f8fa8;     --lc-teal-bg: #e2f3f7;   --lc-teal-ink: #0b6b7e;
    --lc-amber: #e0912a;    --lc-amber-bg: #fbf0dd;  --lc-amber-ink: #8a5a0f;
    --lc-red: #c23b3b;      --lc-red-bg: #fbe6e6;    --lc-red-ink: #9c2f2f;
    --lc-grey: #6b7280;     --lc-grey-bg: #eef0f3;   --lc-grey-ink: #4b5563;

    /* Larghezza di una card del designer. È un token e non un numero ripetuto perché la stessa
       misura vive in quattro posti — card, zona di rilascio, larghezza minima della colonna di un
       ramo — e devono restare uguali: è ciò che tiene le card della stessa dimensione a ogni
       livello di annidamento invece di lasciarle comprimere dalla colonna che le contiene. */
    --lcd-node-w: 560px;
}

[data-bs-theme="dark"] {
    --lc-blue: #6f9ae8;     --lc-blue-bg: rgba(111,154,232,.16);   --lc-blue-ink: #a8c6f5;   --lc-blue-on: #14213a;
    --lc-orange: #eb9a63;   --lc-orange-bg: rgba(235,154,99,.16);  --lc-orange-ink: #f3c19b;
    --lc-purple: #a189f5;   --lc-purple-bg: rgba(161,137,245,.16); --lc-purple-ink: #c6b6fa; --lc-purple-on: #1d1436;
    --lc-green: #3fc79b;    --lc-green-bg: rgba(63,199,155,.16);   --lc-green-ink: #8ee0c4;
    --lc-teal: #3fb6cd;     --lc-teal-bg: rgba(63,182,205,.16);    --lc-teal-ink: #93d9e6;
    --lc-amber: #ecb05c;    --lc-amber-bg: rgba(236,176,92,.16);   --lc-amber-ink: #f4cf9b;
    --lc-red: #e07070;      --lc-red-bg: rgba(224,112,112,.16);    --lc-red-ink: #f0a8a8;
    --lc-grey: #9aa3af;     --lc-grey-bg: rgba(154,163,175,.16);   --lc-grey-ink: #c3cad3;
}

/* ── Livello 2: token locali della pagina ─────────────────────────────────── */
.lcd-root {
    --lcd-panel: #ffffff;
    --lcd-panel-muted: #f8fafc;
    --lcd-ink: #0f172a;
    --lcd-ink2: #64748b;
    --lcd-ink3: #94a3b8;
    --lcd-line: rgba(148,163,184,.22);
    --lcd-line2: rgba(100,116,139,.28);
    --lcd-hover: #f4f6fa;
    --lcd-canvas-bg: #f1f3f7;
    --lcd-canvas-dot: #d6dbe5;
    --lcd-dash: #cbd2de;
    --lcd-addzone-bg: rgba(255,255,255,.55);
    --lcd-note-bg: #fff2b8;
    --lcd-note-line: #f0dd7a;
    --lcd-note-ink: #7a6512;
    --lcd-shadow: 0 1px 2px rgba(15,23,42,.05);
    --lcd-shadow-sel: 0 3px 12px rgba(15,23,42,.14);
}

/* Alias per il componente condiviso AutomationFieldEditor, che il pannello di
   configurazione riusa tale e quale: le sue classi sono .autd-* e leggono i token
   --autd-*, definiti però su .autd-root, che qui non esiste. Senza questi alias le
   etichette dei campi e i segmenti ENUM restano senza colore (testo invisibile in
   tema scuro). Si dichiarano solo i token effettivamente usati da quel componente,
   e derivano dai --lcd-*, che rispondono già al tema: nessuna regola .autd-* viene
   riscritta e i due designer restano indipendenti. */
.lcd-root {
    --autd-panel: var(--lcd-panel);
    --autd-ink: var(--lcd-ink);
    --autd-ink2: var(--lcd-ink2);
    --autd-ink3: var(--lcd-ink3);
    --autd-line2: var(--lcd-line2);
    --autd-primary: var(--lc-blue);
    --autd-primary-bg: var(--lc-blue-bg);
    --autd-primary-ink: var(--lc-blue-ink);
}

/* In tema scuro il canvas è PIÙ SCURO del pannello, così le card risaltano
   invece di sparire (difetto corretto in F19). */
[data-bs-theme="dark"] .lcd-root {
    --lcd-panel: #2f3640;
    --lcd-panel-muted: #39404a;
    --lcd-ink: #e2e8f0;
    --lcd-ink2: #cbd5e1;
    --lcd-ink3: #94a3b8;
    --lcd-line: rgba(148,163,184,.18);
    --lcd-line2: rgba(148,163,184,.28);
    --lcd-hover: #39404a;
    --lcd-canvas-bg: #262b31;
    --lcd-canvas-dot: rgba(255,255,255,.07);
    --lcd-dash: rgba(255,255,255,.26);
    --lcd-addzone-bg: rgba(255,255,255,.03);
    --lcd-note-bg: #5c5426;
    --lcd-note-line: #7a6f33;
    --lcd-note-ink: #f5eec4;
    --lcd-shadow: 0 1px 2px rgba(0,0,0,.3);
    --lcd-shadow-sel: 0 3px 14px rgba(0,0,0,.45);
}

/* Altezza calcolata, MAI margini negativi di compensazione: falsano l'altezza e
   generano una scrollbar verticale parassita (difetto F17). Gli spazi del layout
   sono già annullati dalla classe topbar-only-fullbleed. */
.lcd-root {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--ct-topbar-height, 70px));
    overflow: hidden;
    background: var(--lcd-panel);
    color: var(--lcd-ink);
    font-size: 14px;
    line-height: 1.45;
}

/* ── Top bar del designer ─────────────────────────────────────────────────── */
.lcd-topbar {
    height: 60px;
    background: var(--lcd-panel);
    border-bottom: 1px solid var(--lcd-line);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    flex-shrink: 0;
}

.lcd-iconbtn {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid var(--lcd-line2);
    background: var(--lcd-panel);
    color: var(--lcd-ink2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
}
.lcd-iconbtn:hover { background: var(--lcd-hover); color: var(--lcd-ink); }

.lcd-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lcd-title .lbl { font-size: 11px; color: var(--lcd-ink3); letter-spacing: .03em; text-transform: uppercase; }
.lcd-title .name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lcd-title .name i { font-size: 14px; color: var(--lcd-ink3); font-style: normal; }
.lcd-spacer { flex: 1; }

/* Tre stati: attivo / in pausa / disattivo (D13). */
.lcd-state {
    display: inline-flex;
    border: 1px solid var(--lcd-line2);
    border-radius: 9px;
    overflow: hidden;
    background: var(--lcd-panel);
}
.lcd-state button {
    border: 0;
    background: var(--lcd-panel);
    color: var(--lcd-ink2);
    font-size: 12.5px; font-weight: 600;
    padding: 8px 13px;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.lcd-state button + button { border-left: 1px solid var(--lcd-line); }
.lcd-state button:hover { background: var(--lcd-hover); }
.lcd-state button.on.active { background: var(--lc-green-bg); color: var(--lc-green-ink); }
.lcd-state button.on.paused { background: var(--lc-amber-bg); color: var(--lc-amber-ink); }
.lcd-state button.on.inactive { background: var(--lc-grey-bg); color: var(--lc-grey-ink); }
.lcd-state button:disabled { opacity: .55; cursor: not-allowed; }

.lcd-btn {
    height: 36px;
    padding: 0 15px;
    border-radius: 9px;
    border: 1px solid var(--lcd-line2);
    background: var(--lcd-panel);
    color: var(--lcd-ink);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
}
.lcd-btn:hover { background: var(--lcd-hover); }
.lcd-btn:disabled { opacity: .55; cursor: not-allowed; }
.lcd-btn.primary { background: var(--lc-blue); border-color: var(--lc-blue); color: var(--lc-blue-on); }
.lcd-btn.danger { color: var(--lc-red-ink); border-color: var(--lc-red); background: transparent; }
.lcd-btn.danger:hover { background: var(--lc-red-bg); }

.lcd-body { flex: 1; display: flex; min-height: 0; }

/* ── Palette ──────────────────────────────────────────────────────────────── */
.lcd-palette {
    width: 250px;
    background: var(--lcd-panel);
    border-right: 1px solid var(--lcd-line);
    flex-shrink: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.lcd-palette-search { padding: 14px 14px 6px; }
.lcd-palette-search input {
    width: 100%; height: 36px;
    border: 1px solid var(--lcd-line2);
    border-radius: 9px;
    padding: 0 12px;
    font-size: 13px;
    background: var(--lcd-panel);
    color: var(--lcd-ink);
}
.lcd-palette-scroll { overflow-y: auto; padding: 8px 12px 20px; }
.lcd-pgroup-h {
    font-size: 11px; font-weight: 700;
    color: var(--lcd-ink3);
    letter-spacing: .05em; text-transform: uppercase;
    padding: 14px 4px 8px;
}

/* Contenuto allineato a sinistra e bordo nel colore della sezione (difetti F16.2 / F16.3). */
.lcd-pitem {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid var(--lcd-line);
    background: var(--lcd-panel);
    margin-bottom: 7px;
    cursor: grab;
    transition: .12s;
    text-align: left;
    width: 100%;
}
.lcd-pitem:hover { background: var(--lcd-hover); transform: translateY(-1px); }
.lcd-pitem:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }
.lcd-pitem-ic {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.lcd-pitem-tx { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.lcd-pitem-n { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lcd-ink); }
.lcd-pitem-d { font-size: 11px; color: var(--lcd-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.lcd-pitem-grip { margin-left: auto; color: var(--lcd-ink3); opacity: .55; font-size: 14px; letter-spacing: -2px; }

.lcd-pitem.k-trig { border-color: var(--lc-blue); }
.lcd-pitem.k-wait { border-color: var(--lc-teal); }
.lcd-pitem.k-cond { border-color: var(--lc-purple); }
.lcd-pitem.k-act  { border-color: var(--lc-green); }
.lcd-pitem.k-end  { border-color: var(--lc-grey); }

.lcd-ic-trig  { background: var(--lc-blue-bg);   color: var(--lc-blue-ink); }
.lcd-ic-event { background: var(--lc-orange-bg); color: var(--lc-orange-ink); }
.lcd-ic-wait  { background: var(--lc-teal-bg);   color: var(--lc-teal-ink); }
.lcd-ic-cond  { background: var(--lc-purple-bg); color: var(--lc-purple-ink); }
.lcd-ic-act   { background: var(--lc-green-bg);  color: var(--lc-green-ink); }
.lcd-ic-end   { background: var(--lc-grey-bg);   color: var(--lc-grey-ink); }

/* ── Canvas ───────────────────────────────────────────────────────────────── */

/* Contenitore del solo canvas, che esiste per dare un riferimento di posizionamento ai comandi
   di zoom: `.lcd-canvas` scorre, quindi comandi posizionati dentro di lui scorrerebbero via
   insieme al grafo. Nessuna imbottitura e nessun margine — sarebbe un margine di compensazione
   travestito, e quelli generano la scrollbar verticale parassita del difetto F17. */
.lcd-canvas-wrap {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
    min-width: 0;
}

.lcd-canvas {
    flex: 1;
    overflow: auto;
    padding: 30px 32px 80px;
    background-color: var(--lcd-canvas-bg);
    background-image: radial-gradient(circle, var(--lcd-canvas-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    /* Lo sfondo si trascina per spostare il grafo (vedi `lcd-designer-canvas.js`). Il cursore è
       l'unico modo in cui l'operatore lo scopre: senza, la funzione esiste e non la trova nessuno.
       Vale solo sullo sfondo — card e zone di rilascio hanno il proprio `cursor: pointer`, che qui
       vince perché è dichiarato sull'elemento. */
    cursor: grab;
}

/* Durante il trascinamento il cursore «chiuso» va imposto anche sopra card e zone: il puntatore le
   attraversa a metà gesto, e vederlo tornare a mano aperta o a dito darebbe l'impressione di aver
   perso la presa. È il caso in cui `!important` è l'idioma corretto, non una scorciatoia: sta
   sovrascrivendo per la durata di un gesto, non correggendo una cascata sbagliata. */
.lcd-canvas.lcd-panning,
.lcd-canvas.lcd-panning * {
    cursor: grabbing !important;
}
/* Niente selezione di testo mentre si sposta il grafo: trascinare sopra un titolo lo evidenzierebbe. */
.lcd-canvas.lcd-panning {
    user-select: none;
}
/* Il contenitore del grafo si dimensiona sul **contenuto**, non sul canvas: un percorso con
   diramazioni annidate diventa più largo del canvas e si scorre, invece di comprimere le card.
   `min-width: 100%` lo tiene comunque largo quanto il canvas quando il grafo è lineare, così
   `align-items: center` continua a centrare le card come prima. */
.lcd-flow {
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}

/* ── Comandi di zoom ──────────────────────────────────────────────────────────
   Sovrapposti in alto a destra sul canvas. Agiscono SOLO sul disegno: palette, pannello di
   configurazione e barra superiore non si scalano. */
.lcd-zoom {
    position: absolute;
    top: 14px; right: 18px;
    z-index: 3;
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    border: 1px solid var(--lcd-line2);
    border-radius: 10px;
    /* Superficie del PANNELLO e non del canvas: in tema scuro il canvas è più scuro (F19), e
       comandi della stessa tinta del fondo su cui stanno sparirebbero. */
    background: var(--lcd-panel);
    box-shadow: 0 2px 8px rgba(15,23,42,.10);
}
.lcd-zoom-btn {
    min-width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--lcd-ink2);
    font-size: 15px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.lcd-zoom-btn:hover:not(:disabled) { background: var(--lcd-hover); color: var(--lcd-ink); }
.lcd-zoom-btn:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 1px; }
.lcd-zoom-btn:disabled { opacity: .38; cursor: default; }
/* «Adatta alla vista»: testo e non simbolo, perché è l'unico comando dei quattro il cui effetto
   non si indovina da un'icona. */
.lcd-zoom-fit {
    padding: 0 9px;
    font-size: 12px; font-weight: 600;
    border-left: 1px solid var(--lcd-line);
    border-radius: 0 7px 7px 0;
    margin-left: 2px;
}
/* La percentuale: larghezza fissa perché passando da 100% a 90% i pulsanti non si spostino
   sotto il puntatore — un bersaglio che scappa mentre lo si clicca ripetutamente. */
.lcd-zoom-val {
    min-width: 46px;
    text-align: center;
    font-size: 12.5px; font-weight: 700;
    color: var(--lcd-ink);
    font-variant-numeric: tabular-nums;
}

/* I connettori verticali NON sono SVG: sono div di 2x26px fra i nodi. Funzionano
   solo perché il contenitore è flex-direction:column con align-items:center. */
.lcd-connector { width: 2px; height: 26px; background: var(--lcd-line2); flex-shrink: 0; }

/* Zona di aggiunta: tratteggiata, cliccabile, evidenziata nel colore della sezione
   durante il trascinamento (difetti F18.2 / F19.1). Sta FUORI dalle card. */
.lcd-addzone {
    /* Stessa larghezza intrinseca delle card: una zona di rilascio più stretta della card che ci
       finisce dentro è un bersaglio che si restringe proprio dove serve di più. */
    width: var(--lcd-node-w); max-width: 100%;
    border: 1.5px dashed var(--lcd-dash);
    border-radius: 11px;
    min-height: 46px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--lcd-ink3);
    font-size: 13px; font-weight: 500;
    background: var(--lcd-addzone-bg);
    cursor: pointer;
}
.lcd-addzone:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }
.lcd-addzone--cond:hover, .lcd-addzone--cond.drag-over {
    border-style: solid; border-color: var(--lc-purple); color: var(--lc-purple-ink); background: var(--lc-purple-bg);
}
.lcd-addzone--act:hover, .lcd-addzone--act.drag-over {
    border-style: solid; border-color: var(--lc-green); color: var(--lc-green-ink); background: var(--lc-green-bg);
}
.lcd-addzone--trig:hover, .lcd-addzone--trig.drag-over {
    border-style: solid; border-color: var(--lc-blue); color: var(--lc-blue-ink); background: var(--lc-blue-bg);
}
.lcd-addzone--wait:hover, .lcd-addzone--wait.drag-over {
    border-style: solid; border-color: var(--lc-teal); color: var(--lc-teal-ink); background: var(--lc-teal-bg);
}
.lcd-addzone--end:hover, .lcd-addzone--end.drag-over {
    border-style: solid; border-color: var(--lc-grey); color: var(--lc-grey-ink); background: var(--lc-grey-bg);
}

/* Selettore aperto dal CLIC sulla zona di aggiunta: è il fallback senza
   trascinamento (accessibile da tastiera, perché ogni voce è un <button>). */
.lcd-picker {
    /* Stesso tetto delle card: il selettore prende il posto di una zona di rilascio, che è larga
       una card. Il valore era ripetuto a mano (560px) — è lo stesso numero, dal token. */
    width: 100%; max-width: var(--lcd-node-w);
    border: 1.5px solid var(--lc-blue);
    border-radius: 11px;
    background: var(--lcd-panel);
    box-shadow: var(--lcd-shadow-sel);
    padding: 10px;
}
.lcd-picker-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--lcd-ink3); margin-bottom: 8px;
}
.lcd-picker-h .lcd-tbtn { margin-left: auto; }
.lcd-picker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lcd-picker-it {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--lcd-line2); border-radius: 9px;
    background: var(--lcd-panel); color: var(--lcd-ink);
    font-size: 12.5px; font-weight: 600; text-align: left;
    padding: 8px 9px; cursor: pointer;
}
.lcd-picker-it:hover { background: var(--lcd-hover); }
.lcd-picker-it:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }
.lcd-picker-it .lcd-pitem-ic { width: 24px; height: 24px; font-size: 13px; }

/* Frecce di riordino: restano visibili ma disabilitate quando lo scambio non è
   possibile, così la posizione dei pulsanti non salta da un nodo all'altro. */
.lcd-tbtn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Nodi ─────────────────────────────────────────────────────────────────── */
.lcd-node {
    /* Larghezza **intrinseca**, non percentuale: è ciò che rende la card uguale a ogni livello di
       annidamento. Con `width: 100%` la card seguiva la colonna del ramo, e la colonna si dimezzava
       a ogni diramazione — al terzo livello le card misuravano 92px ed erano illeggibili.
       `max-width: 100%` resta per i contenitori più stretti della card (pannelli, anteprime). */
    width: var(--lcd-node-w); max-width: 100%;
    background: var(--lcd-panel);
    border: 1.5px solid var(--lcd-line);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    box-shadow: var(--lcd-shadow);
    cursor: pointer;
    text-align: left;
}
.lcd-node.b-blue   { border-color: var(--lc-blue); }
.lcd-node.b-orange { border-color: var(--lc-orange); }
.lcd-node.b-purple { border-color: var(--lc-purple); }
.lcd-node.b-green  { border-color: var(--lc-green); }
.lcd-node.b-teal   { border-color: var(--lc-teal); }
.lcd-node.b-grey   { border-color: var(--lc-grey); }
.lcd-node.sel { border-width: 2px; box-shadow: var(--lcd-shadow-sel); }
.lcd-node:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }

.lcd-node-head { display: flex; align-items: center; gap: 11px; }
.lcd-nic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.lcd-nic.trig  { background: var(--lc-blue-bg);   color: var(--lc-blue-ink); }
.lcd-nic.event { background: var(--lc-orange-bg); color: var(--lc-orange-ink); }
.lcd-nic.wait  { background: var(--lc-teal-bg);   color: var(--lc-teal-ink); }
.lcd-nic.cond  { background: var(--lc-purple-bg); color: var(--lc-purple-ink); }
.lcd-nic.act   { background: var(--lc-green-bg);  color: var(--lc-green-ink); }
.lcd-nic.end   { background: var(--lc-grey-bg);   color: var(--lc-grey-ink); }

.lcd-nbody { flex: 1; min-width: 0; }
.lcd-node-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-ink3); margin-bottom: 1px; }
/* Titolo in grassetto, per distinguerlo dalla riga di descrizione (difetto F18.3). */
.lcd-node-ttl { font-size: 15px; font-weight: 700; color: var(--lcd-ink); }
.lcd-node-sub { font-size: 12.5px; color: var(--lcd-ink2); margin-top: 1px; }
.lcd-node-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.lcd-stat { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.lcd-stat.ok   { background: var(--lc-green-bg); color: var(--lc-green-ink); }
.lcd-stat.warn { background: var(--lc-amber-bg); color: var(--lc-amber-ink); }

.lcd-tbtn {
    width: 26px; height: 26px;
    border-radius: 7px;
    color: var(--lcd-ink3);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: 0;
}
.lcd-tbtn:hover { background: var(--lcd-hover); color: var(--lcd-ink); }
.lcd-tbtn .bdg {
    position: absolute; top: -3px; right: -3px;
    background: var(--lc-amber); color: #fff;
    font-size: 9px; font-weight: 700;
    min-width: 14px; height: 14px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}

.lcd-node-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-left: 49px; }
.lcd-chip { font-size: 12px; padding: 3px 9px; border-radius: 7px; background: var(--lcd-panel-muted); color: var(--lcd-ink2); display: flex; align-items: center; gap: 5px; }
.lcd-chip b { font-weight: 700; color: var(--lcd-ink); }
.lcd-chip.empty { background: var(--lc-amber-bg); color: var(--lc-amber-ink); }
.lcd-chip.empty b { color: var(--lc-amber-ink); }
.lcd-chip.esito { font-weight: 600; }
.lcd-chip.esito.ok { background: var(--lc-green-bg); color: var(--lc-green-ink); }
.lcd-chip.esito.ok b { color: var(--lc-green-ink); }
.lcd-chip.esito.ko { background: var(--lc-red-bg); color: var(--lc-red-ink); }
.lcd-chip.esito.ko b { color: var(--lc-red-ink); }

/* ── Gruppo di avvio: più trigger, un solo punto di partenza (D10) ────────── */
.lcd-startgroup {
    width: 100%; max-width: 560px;
    border: 1.5px solid var(--lc-blue);
    border-radius: 14px;
    padding: 12px;
    background: var(--lc-blue-bg);
}
.lcd-sg-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.lcd-sg-lab { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lc-blue-ink); }
.lcd-andor { display: inline-flex; border: 1px solid var(--lc-blue); border-radius: 8px; overflow: hidden; }
.lcd-andor button { border: 0; background: var(--lcd-panel); color: var(--lc-blue-ink); font-size: 12px; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.lcd-andor button.on { background: var(--lc-blue); color: var(--lc-blue-on); }
/* Il gruppo dei trigger è un contenitore proprio: le sue card riempiono il gruppo invece di
   portare la larghezza intrinseca delle card del percorso. */
.lcd-startgroup .lcd-node { width: 100%; max-width: none; }
.lcd-sg-or { display: flex; align-items: center; justify-content: center; padding: 7px 0; font-size: 11px; font-weight: 700; color: var(--lc-blue-ink); letter-spacing: .08em; }

/* ── Bivio: diramazione in due colonne affiancate (D4 binario, D6 etichette) ──
   24.3% è il centro reale di ciascuna colonna dato il gap centrale di 26px:
   nel mockup era 23% e le linee non cadevano sul centro delle colonne. */
.lcd-split { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
/* Rientro delle linee esterne = centro della colonna esterna, per QUALUNQUE larghezza.
   Con n colonne uguali e gap g, il centro della prima è (W - (n-1)g) / 2n, cioè
   `100%/2n - (n-1)g/2n`: una percentuale **più** una costante in pixel, non una percentuale sola.
   Sostituisce il 24,3% fisso, che era il valore giusto per una larghezza sola — quella di due card
   affiancate (W = 1146) su cui era stato tarato. Appena le colonne crescono (rami annidati, che con
   `min-width: max-content` propagano la larghezza verso l'alto) la percentuale fissa smette di
   cadere sul centro: misurato su un percorso a tre livelli, 25px di errore al primo bivio contro
   1px al terzo. Con la formula l'errore è 0 a ogni livello. */
.lcd-fork {
    width: 100%; height: 30px; position: relative;
    --lcd-fork-inset: calc(25% - 6.5px);          /* due rami:  W/4 - g/4  */
}
/* Tre rami (bivio in attesa, con il ramo «Scaduto»): tre colonne e due gap, quindi il centro della
   colonna esterna è un altro punto. Qui il 24,3% sbagliava a **qualunque** larghezza, non solo sui
   percorsi annidati: puntava dentro la colonna sbagliata. */
.lcd-fork--three {
    --lcd-fork-inset: calc(16.6667% - 8.6667px);  /* tre rami:  W/6 - g/3  */
}
.lcd-fork::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 14px; background: var(--lcd-line2); }
.lcd-fork::after { content: ""; position: absolute; top: 14px; left: var(--lcd-fork-inset); right: var(--lcd-fork-inset); height: 2px; background: var(--lcd-line2); }
.lcd-fork .drops { position: absolute; top: 14px; left: var(--lcd-fork-inset); right: var(--lcd-fork-inset); height: 16px; }
.lcd-fork .drops span { position: absolute; top: 0; width: 2px; height: 16px; background: var(--lcd-line2); }
.lcd-fork .drops span.l { left: 0; }
.lcd-fork .drops span.r { right: 0; }
/* Il ramo centrale resta al 50% della barra: essendo i due rientri uguali, la metà della barra è
   anche la metà della riga dei rami, cioè il centro della colonna di mezzo. Era già corretto. */
.lcd-fork .drops span.c { left: 50%; }

/* Le colonne di un bivio non si comprimono sotto la larghezza di una card: è il contenitore a
   crescere e il canvas a scorrere. `min-width: max-content` sulla riga dei rami propaga la
   larghezza dal livello più profondo verso l'alto, così ogni annidamento allarga il grafo invece
   di dimezzare lo spazio disponibile.

   Le due colonne restano di **larghezza uguale** (stesso `flex-basis`, stesso `flex-grow`): le
   linee di diramazione sono ancorate al 24,3%, che è il centro reale di ciascuna colonna dato il
   gap di 26px — con colonne diverse quella percentuale non cadrebbe più sul centro. */
.lcd-branches {
    /* Griglia e non flex, e la differenza conta. Con `flex-basis` fisso il contributo intrinseco di
       una colonna resta il basis: il contenitore non si accorgeva dei rami annidati più larghi, che
       sbordavano **a sinistra** — e ciò che sborda a sinistra di un contenitore che scorre non è
       raggiungibile in nessun modo. Con `grid-auto-columns: 1fr` sotto un vincolo di max-content
       tutte le tracce diventano larghe quanto la più larga: le colonne restano **uguali** e il
       contenitore cresce verso destra, dove lo scorrimento arriva. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 26px;
    width: 100%;
    min-width: max-content;
    align-items: start;
}
.lcd-branch {
    min-width: var(--lcd-node-w);
    display: flex; flex-direction: column; align-items: center;
}

/* L'etichetta è larga come una CARD, non come la colonna — esattamente come `.lcd-node` e
   `.lcd-addzone`. Con `width: 100%` seguiva la colonna, che su un percorso a più livelli è molto
   più larga di una card (`.lcd-branches` usa `grid-auto-columns: 1fr` sotto `min-width: max-content`,
   quindi una colonna che contiene rami annidati cresce con loro): la barra del primo bivio arrivava
   a occupare tutta la pagina, una fascia colorata lunghissima con tre parole in mezzo.

   Resta CENTRATA sulla propria colonna perché `.lcd-branch` ha `align-items: center`, come le card:
   la distanza fra le due etichette di un bivio continua quindi a rispecchiare le colonne. */
.lcd-blabel {
    width: var(--lcd-node-w); max-width: 100%;
    display: flex; align-items: center; gap: 8px;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px; font-weight: 700;
    margin-bottom: 14px;
    border: 1.5px solid;
}
/* Etichetta riscritta dall'operatore: può essere più lunga della barra. Va a capo dentro la barra
   invece di sbordare — `min-width: 0` perché un figlio flex non scende sotto la propria larghezza
   di contenuto senza questo, e `overflow-wrap: anywhere` per spezzare anche una parola unica lunga
   (un incollato senza spazi sborderebbe comunque). */
.lcd-blabel .txt { min-width: 0; overflow-wrap: anywhere; }
.lcd-blabel .pin { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--lcd-panel); }
.lcd-blabel .edit { margin-left: auto; font-style: normal; opacity: .6; cursor: pointer; background: transparent; border: 0; color: inherit; }
.lcd-blabel .edit:hover { opacity: 1; }
.lcd-blabel.yes { border-color: var(--lc-green); background: var(--lc-green-bg); color: var(--lc-green-ink); }
.lcd-blabel.yes .pin { color: var(--lc-green-ink); }
.lcd-blabel.no { border-color: var(--lc-red); background: var(--lc-red-bg); color: var(--lc-red-ink); }
.lcd-blabel.no .pin { color: var(--lc-red-ink); }
.lcd-blabel.timeout { border-color: var(--lc-amber); background: var(--lc-amber-bg); color: var(--lc-amber-ink); }
.lcd-blabel.timeout .pin { color: var(--lc-amber-ink); }

/* ── Post-it: annotazioni di progettazione, senza effetto sull'esecuzione ─── */
.lcd-postit {
    position: absolute;
    width: 190px;
    background: var(--lcd-note-bg);
    border: 1px solid var(--lcd-note-line);
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 12px;
    color: var(--lcd-note-ink);
    line-height: 1.4;
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
    z-index: 2;
}
.lcd-postit .nh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-weight: 700; }
.lcd-postit .nh i { font-size: 12px; opacity: .65; font-style: normal; }
.lcd-postit::before {
    content: "";
    position: absolute; top: 16px; left: -7px;
    width: 12px; height: 12px;
    background: var(--lcd-note-bg);
    border-left: 1px solid var(--lcd-note-line);
    border-bottom: 1px solid var(--lcd-note-line);
    transform: rotate(45deg);
}

/* ── Pannello di configurazione ───────────────────────────────────────────── */
.lcd-config {
    width: 352px;
    background: var(--lcd-panel);
    border-left: 1px solid var(--lcd-line);
    flex-shrink: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.lcd-cfg-head { padding: 16px 18px; border-bottom: 1px solid var(--lcd-line); display: flex; align-items: flex-start; gap: 12px; }
.lcd-cfg-ic {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--lc-purple-bg); color: var(--lc-purple-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
}
.lcd-cfg-kd { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-ink3); }
.lcd-cfg-nm { font-size: 15px; font-weight: 700; }
.lcd-cfg-ds { font-size: 12px; color: var(--lcd-ink2); margin-top: 2px; }
.lcd-cfg-body { flex: 1; overflow-y: auto; padding: 18px; }
.lcd-cfg-empty { padding: 40px 24px; text-align: center; color: var(--lcd-ink3); font-size: 13px; }

.lcd-field { margin-bottom: 20px; }
.lcd-flab { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.lcd-fhint { font-size: 11.5px; color: var(--lcd-ink3); margin-bottom: 9px; }
.lcd-sect { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lcd-ink3); margin: 4px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--lcd-line); }

.lcd-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lcd-segopt {
    border: 1px solid var(--lcd-line2);
    border-radius: 9px;
    padding: 9px 8px;
    text-align: center;
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    color: var(--lcd-ink2);
    background: var(--lcd-panel);
}
.lcd-segopt.on { border-color: var(--lc-blue); background: var(--lc-blue-bg); color: var(--lc-blue-ink); }

.lcd-txt {
    width: 100%; height: 38px;
    border: 1px solid var(--lcd-line2);
    border-radius: 9px;
    padding: 0 12px;
    font-size: 13.5px;
    outline: none;
    background: var(--lcd-panel);
    color: var(--lcd-ink);
}
.lcd-txt:focus { border-color: var(--lc-blue); }

.lcd-branch-edit { border: 1px solid var(--lcd-line); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; }
.lcd-be-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; color: var(--lcd-ink2); }
.lcd-dot { width: 9px; height: 9px; border-radius: 50%; }
.lcd-dot.yes { background: var(--lc-green); }
.lcd-dot.no { background: var(--lc-red); }
.lcd-dot.timeout { background: var(--lc-amber); }

.lcd-info { font-size: 11px; color: var(--lcd-ink3); margin-top: 6px; display: flex; gap: 5px; align-items: flex-start; }
.lcd-summary { background: var(--lc-green-bg); border: 1px solid var(--lc-green); border-radius: 10px; padding: 11px 12px; font-size: 12.5px; color: var(--lc-green-ink); display: flex; gap: 9px; align-items: flex-start; }
.lcd-summary b { color: var(--lc-green-ink); }
/* Riquadro degli errori di validazione: stessa forma del riepilogo, colore di avviso. */
.lcd-errors { background: var(--lc-amber-bg); border: 1px solid var(--lc-amber); border-radius: 10px; padding: 11px 12px; font-size: 12.5px; color: var(--lc-amber-ink); }
.lcd-errors ul { margin: 6px 0 0; padding-left: 18px; }
.lcd-errors li { margin-bottom: 4px; }

.lcd-cfg-foot { padding: 14px 18px; border-top: 1px solid var(--lcd-line); display: flex; gap: 10px; }
.lcd-cfg-foot .lcd-btn { flex: 1; justify-content: center; }

.lcd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--lcd-line); border-radius: 10px; }
.lcd-switch-row .t { font-size: 13px; font-weight: 600; }
.lcd-switch-row .h { font-size: 11.5px; color: var(--lcd-ink3); }
.lcd-sw { width: 38px; height: 22px; border-radius: 20px; background: var(--lc-green); position: relative; flex-shrink: 0; cursor: pointer; border: 0; }
.lcd-sw::after { content: ""; position: absolute; top: 2px; left: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.lcd-sw.off { background: var(--lcd-line2); }
.lcd-sw.off::after { left: 2px; }

/* ── Elenco condizioni del bivio (estensione oltre il mockup, §6) ─────────── */
.lcd-condlist { display: flex; flex-direction: column; gap: 8px; }
.lcd-condrow { border: 1px solid var(--lcd-line); border-radius: 10px; padding: 10px 11px; }
.lcd-condrow-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lcd-condrow-h .nm { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; }
.lcd-neg { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--lcd-line2); background: var(--lcd-panel); color: var(--lcd-ink2); cursor: pointer; }
.lcd-neg.on { border-color: var(--lc-red); background: var(--lc-red-bg); color: var(--lc-red-ink); }

/* ════════════════════════════════════════════════════════════════════════════
   Controlli MudBlazor dentro il pannello di configurazione

   Il pannello riusa AutomationFieldEditor, che rende i campi con MudBlazor
   (MudNumericField, MudSelect, MudTextField, MudSwitch). Quei controlli prendono
   il colore del testo da --mud-palette-text-primary: il tema del prodotto ha
   Surface CHIARO anche in PaletteDark, quindi in tema scuro il testo arriva
   grigio scuro (rgb(66,66,66)) su pannello scuro — praticamente invisibile.
   È la stessa causa del difetto F16, qui vista sui controlli e non sulle card.

   Si riportano ai token del modulo, con selettori confinati a .lcd-root per non
   toccare il resto del prodotto.
   ════════════════════════════════════════════════════════════════════════════ */

.lcd-root .mud-input-slot,
.lcd-root .mud-input-root,
.lcd-root .mud-input input,
.lcd-root .mud-input textarea {
    color: var(--lcd-ink);
}

.lcd-root .mud-input-slot::placeholder,
.lcd-root .mud-input textarea::placeholder {
    color: var(--lcd-ink3);
}

.lcd-root .mud-input-outlined-border {
    border-color: var(--lcd-line2);
}

.lcd-root .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--lc-blue);
}

.lcd-root .mud-input-adornment .mud-icon-root,
.lcd-root .mud-input-adornment-end .mud-icon-root,
.lcd-root .mud-input-adornment-start .mud-icon-root {
    color: var(--lcd-ink2);
}

.lcd-root .mud-input-label,
.lcd-root .mud-input-helper-text {
    color: var(--lcd-ink3);
}

/* Interruttore dei campi booleani del catalogo (es. «blocca l'accesso»). */
.lcd-root .mud-switch-label {
    color: var(--lcd-ink);
}

/* ════════════════════════════════════════════════════════════════════════════
   Elenco dei cicli di vita — prefisso .lcl-*

   Prefisso separato da quello del designer (.lcd-*): l'elenco vive dentro
   SettingsLayout e non ha il contenitore .lcd-root, quindi non può leggere i
   token --lcd-*. Si usano le variabili di prodotto di core/variables.css, che
   rispondono già a [data-bs-theme].
   ════════════════════════════════════════════════════════════════════════════ */

.lcl-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.lcl-name-main { font-weight: 600; }

/* Descrizione come riga secondaria: una riga sola, troncata, per non allargare la griglia. */
.lcl-name-sub {
    font-size: 0.78rem;
    color: var(--upf-text-muted);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Elenco compatto di badge (trigger di avvio, sedi). */
.lcl-triggers { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Voce del menu di cambio stato: titolo più spiegazione, perché la differenza fra
   «in pausa» e «disattivo» non è indovinabile. */
.lcl-menu-item { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.lcl-menu-title { font-weight: 600; font-size: 0.85rem; }
.lcl-menu-hint { font-size: 0.74rem; color: var(--upf-text-muted); max-width: 260px; white-space: normal; }

/* ════════════════════════════════════════════════════════════════════════════
   Diagnostica dei cicli di vita — prefisso .lcg-*

   La pagina tiene due viste (log di esecuzione e cronologia dei passaggi): il
   selettore in testa deve rendere evidente quale delle due si sta guardando,
   perché rispondono a domande diverse.
   ════════════════════════════════════════════════════════════════════════════ */

.lcg-viewswitch {
    display: inline-flex;
    border: 1px solid var(--upf-color-border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--upf-color-surface);
}

.lcg-viewbtn {
    border: 0;
    background: transparent;
    color: var(--upf-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
}

.lcg-viewbtn + .lcg-viewbtn { border-left: 1px solid var(--upf-color-border); }

.lcg-viewbtn:hover { background: rgba(15, 23, 42, 0.04); color: var(--upf-text-primary); }

.lcg-viewbtn.on {
    background: var(--lc-blue-bg);
    color: var(--lc-blue-ink);
}

.lcg-viewhint {
    font-size: 0.78rem;
    color: var(--upf-text-muted);
    margin-top: 6px;
}

/* Nome del passo più il ramo imboccato, sulla stessa riga. */
.lcg-step { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Il dettaglio non va troncato: è il motivo per cui la pagina esiste. Va a capo
   e resta leggibile per intero, con una larghezza massima che tiene la griglia
   dentro lo schermo. */
.lcg-detail {
    display: block;
    max-width: 460px;
    white-space: normal;
    line-height: 1.35;
    font-size: 0.82rem;
}

/* Aiuto sotto un campo del dialog della testata: i significati non ovvi (reentry_days
   vuoto = «mai», differenza fra in pausa e disattivo) stanno scritti dove serve. */
.lcl-field-hint {
    font-size: 0.74rem;
    color: var(--upf-text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

.lcl-field-warn { color: var(--lc-amber-ink); }

/* ════════════════════════════════════════════════════════════════════════════
   Avvio manuale di un ciclo — prefisso .lcs-*

   L'elenco mostra anche i cicli NON avviabili, disabilitati e con il motivo:
   un elenco che si accorcia in silenzio fa sospettare un guasto.
   ════════════════════════════════════════════════════════════════════════════ */

.lcs-list { display: flex; flex-direction: column; gap: 8px; }

.lcs-item {
    display: flex;
    align-items: flex-start;
    /* flex-start esplicito: il contenitore del dialog centra il contenuto, e le voci
       con descrizione corta finivano centrate mentre le altre restavano a sinistra. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--upf-color-border);
    border-radius: 10px;
    background: var(--upf-color-surface);
    color: var(--upf-text-primary);
    padding: 10px 12px;
    cursor: pointer;
}

.lcs-item:hover:not(:disabled) { border-color: var(--lc-blue); }

.lcs-item.sel { border-color: var(--lc-blue); background: var(--lc-blue-bg); }

.lcs-item.blocked { cursor: not-allowed; opacity: 0.85; background: transparent; }

.lcs-item:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }

.lcs-radio { font-size: 1.05rem; line-height: 1.2; color: var(--lc-blue-ink); flex-shrink: 0; }

.lcs-item.blocked .lcs-radio { color: var(--upf-text-muted); }

.lcs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.lcs-name { font-weight: 600; font-size: 0.9rem; }

.lcs-desc { font-size: 0.78rem; color: var(--upf-text-muted); }

/* Il motivo dell'impedimento: è l'informazione che l'operatore prima non aveva. */
.lcs-reason {
    font-size: 0.78rem;
    color: var(--lc-amber-ink);
    margin-top: 2px;
    line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════════════════════
   Pannello «Cicli di vita» sulla scheda del cliente — prefisso .lci-*
   ════════════════════════════════════════════════════════════════════════════ */

.lci-step { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lci-step-name { font-weight: 600; }

/* Cosa sta aspettando l'istanza: la domanda numero uno di chi apre una scheda. */
.lci-waiting {
    font-size: 0.76rem;
    color: var(--lc-teal-ink);
    line-height: 1.3;
}

/* Un'istanza attiva su un ciclo in pausa non avanza: va detto, o sembra bloccata senza motivo. */
.lci-paused {
    font-size: 0.76rem;
    color: var(--lc-amber-ink);
    line-height: 1.3;
}

.lci-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }