/* ============================================================
   SCIA BACKOFFICE — console operativa INTERNA in famiglia WAKE.
   (vincolo-stile-esistente: UNA famiglia visiva — navy scuro,
   periwinkle, tipografia WAKE — declinata per prodotto.)
   Qui la declinazione è da CONSOLE: sidebar di navigazione,
   densità informativa alta, tabelle compatte, operatività strict.
   Si capisce che è imparentata col frontend WAKE, ma è un
   prodotto diverso (per i dipendenti scia, non per i clienti).
   RESTYLE 2.1: stessi token del design system (Inter + Barlow
   Condensed self-hosted, scala spacing 4px) in declinazione console.
   ============================================================ */

/* ── Font self-hosted (mount /static/fonts dal tenant — OFL) ── */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* design system condiviso (valori = theme.css del tenant) */
  --font-ui: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  --font-display: "Barlow Condensed", var(--font-ui);
  /* scala UNIFORME a theme.css dell'app (la densità console resta nei
     padding compatti, non nel corpo del testo) */
  --fs-caption: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px;
  --lh-heading: 1.25; --lh-body: 1.45;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --muted-text: #8aa4cf;                 /* AA per testo piccolo su navy */

  /* token WAKE (condivisi con theme.css del frontend) */
  /* sfondo pagina AZZURRO QUASI BIANCO (decisione finale PO 2026-06-12):
     contenuto = tema chiaro classico, pannelli bianchi in rilievo;
     il chrome rail/topbar resta WAKE navy scuro */
  --bg: #e4ecf6;
  --surface: #0f2742;
  --surface-2: #16345c;
  --surface-3: #0b1d31;
  --border: #2a4d77;        /* un gradino più luminoso: separazione "disegnata" */
  --text: #ffffff;
  --ink: #ffffff;
  --ink-2: #6f8fc0;
  --muted: #6f8fc0;
  --line: #2a4d77;
  --rail: #060d17;          /* sidebar/topbar: lo strato più scuro di tutti */
  --rail-ink: #9db4d8;
  --accent: #6f8fd0;        /* periwinkle WAKE (azioni primarie) */
  --accent-hover: #8aa3dd;
  --accent-ink: #ffffff;
  --primary: #6f8fd0;
  --danger: #d8323a;
  --ok: #3ec07a;
  --warn: #e08a3c;

  /* alias funzionali riusati dal markup (stati/bandelle) */
  --st-verde: #3ec07a;
  --st-giallo: #e6c14b;
  --st-arancio: #e08a3c;
  --st-rosso: #d8323a;

  --shadow: 0 8px 28px rgba(2, 8, 18, .45);
  --speed: .16s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  /* fondo pagina "OLED" come la lavagna del grafo: griglia a puntini
     scuri ANCORATA alla finestra — i pannelli bianchi le scorrono sopra */
  background-image: radial-gradient(rgba(10, 26, 46, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
  color: var(--text);
  font: var(--fs-base)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: var(--lh-heading); font-weight: 700; }

/* i controlli NATIVI non ereditano il font del body: senza questo reset
   select/input/button vanno in Segoe/Arial di sistema = "terzo font" */
button, input, select, textarea { font-family: var(--font-ui); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.muted { color: var(--muted-text); }
.uppercase { text-transform: uppercase; letter-spacing: .05em; }
.hidden { display: none !important; }
.error-text { color: var(--danger); font-size: var(--fs-sm); min-height: 16px; margin-top: 6px; }
.label { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--muted-text);
         text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }

/* Scrollbar coerente (come WAKE 2.0). Pollice AZZURRO VISIBILE ovunque:
   il vecchio tono-su-tono (--surface-2 su --bg) spariva sulle superfici
   chiare — e la regola vale anche per i menu a tendina delle <select>,
   dove la barra risultava invisibile (segnalazioni 2026-08). */
* { scrollbar-width: thin; scrollbar-color: #7f9bc4 var(--bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #5f78a3; }

/* Aree di lavoro che scorrono ANCHE in orizzontale (grafo, albero, tabelle):
   barra più GRANDE e contrastata — a zoom 100% la thin da 10px col pollice
   tono-su-tono non si percepiva (segnalazione PO sul grafo Config. ESWBS) */
.gwrap, .table-wrap, .scroll-x {
  scrollbar-width: auto;
  scrollbar-color: #4a6fa8 var(--surface-3);
}
.gwrap::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .scroll-x::-webkit-scrollbar {
  width: 14px; height: 14px;
}
.gwrap::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .scroll-x::-webkit-scrollbar-track {
  background: var(--surface-3); border-radius: 8px;
}
.gwrap::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb {
  background: #4a6fa8; border-radius: 8px; border: 3px solid var(--surface-3);
}
.gwrap::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover, .scroll-x::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Topbar console (slim, navy scuro, accento periwinkle) ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 60;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--rail); color: var(--rail-ink);
  border-bottom: 2px solid var(--accent);
  font-size: var(--fs-sm);
}
/* brand nel box bianco di famiglia WAKE (logo-box del frontend) */
.topbar .brand {
  background: #fff; color: #16335c; border-radius: 8px;
  padding: 5px 10px; font-weight: 400; font-size: var(--fs-base); letter-spacing: .02em;
  font-style: italic; display: inline-flex; align-items: center; gap: 7px;
}
.topbar .brand b { font-weight: 800; }
.topbar .brand .brand-logo { height: 22px; width: auto; display: block; }
.topbar .chip { background: var(--surface-2); color: var(--rail-ink); border: 1px solid var(--border); }
.logo-box { display: none; }

/* ── Sidebar di navigazione (gruppi con etichette di sezione) ─ */
/* ── RAIL di navigazione STATICO (PO 2026-06-12, stile "icona sopra,
      scritta sotto"): niente espansione né pin — ogni voce è un blocco
      verticale, le sezioni sono separatori sottili ── */
.tabs {
  position: fixed; top: 46px; left: 0; bottom: 0; width: 124px; z-index: 55;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 8px;
  background: var(--rail); border: none; margin: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
}
.tabs-section {
  height: 1px; flex: none; margin: 8px 12px; padding: 0;
  background: rgba(42, 77, 119, .6);
}
.tabs-section:first-child { display: none; }
.tabs-section .tab-lbl { display: none; }

.tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none;
  padding: 10px 4px; border-radius: 10px; cursor: pointer;
  color: #ffffff; font-size: 10.5px; font-weight: 600; line-height: 1.15;
  text-align: center; white-space: normal; word-break: break-word;
  transition: background var(--speed), color var(--speed);
}
.tab svg { flex: none; opacity: .8; }
.tab:hover { background: var(--surface-3); color: #fff; }
/* voce attiva = pill NAVY (il periwinkle resta solo per accenti/bordi) */
.tab.active { background: #2a4d77; box-shadow: inset 0 0 0 1px #3a5f94;
              color: #ffffff; font-weight: 700; }
.tab.active svg { opacity: 1; color: #ffffff; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Area contenuti ───────────────────────────── */
.container { margin: 46px 0 0 124px; padding: 18px 22px 60px; }

/* ── CONTENUTO IN CHIARO (PO 2026-06-12: "uniformiamo alla lavagna") ──
   I token si flippano SOLO dentro #content: pannelli, tabelle, card e
   canvas diventano chiari con inchiostro navy; il CHROME resta scuro
   (rail, topbar, modali, drawer, barra azioni = fuori da #content). */
/* MODALITÀ GIORNO (default): contenuto chiaro. In NOTTE (html.night) questo
   override è disattivato → il contenuto usa i token scuri di base = tutto scuro. */
html:not(.night) #content {
  /* TUTTO BIANCO (canvas compreso); i controlli staccano con un velo
     azzurrino, intestazioni/pozzetti un gradino più giù */
  --surface: #ffffff;       /* pannelli, card, tabelle, canvas */
  --surface-2: #eef3fa;     /* input, bottoni, hover, menu */
  --surface-3: #e3edf8;     /* intestazioni tabella, pozzetti */
  --border: #b9cce4;
  --line: #b9cce4;
  --text: #16335c;     /* inchiostro NAVY (non nero puro) */
  --ink: #16335c;
  --ink-2: #5a719b;
  --muted: #5a719b;
  --muted-text: #4d6691;
  /* REGOLA FISSA PO: su chiaro il testo usa lo scuro — stati in variante
     scura leggibile su bianco (neutro/grigio → inchiostro attenuato) */
  --st-neutro: #4d6691;
  --st-grigio: #6e7a8a;
  --st-verde: #1f9d5c;
  --st-giallo: #a8870a;
  --st-arancio: #c96f1e;
  color: var(--text);
}
/* AUDIT 2026-06-12: anche modali, dialoghi e drawer Filtri sono SUPERFICI
   DI LAVORO → tema chiaro come il contenuto; scuri restano solo rail,
   topbar, toast e barra azioni (chrome di navigazione/transitorio) */
html:not(.night) .modal, html:not(.night) #cn_drawer {
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --surface-3: #e3edf8;
  --border: #b9cce4;
  --line: #b9cce4;
  --text: #16335c;
  --ink: #16335c;
  --muted: #5a719b;
  --muted-text: #4d6691;
  --st-neutro: #4d6691;
  --st-grigio: #6e7a8a;
  --st-verde: #1f9d5c;
  --st-giallo: #a8870a;
  --st-arancio: #c96f1e;
  color: var(--text);
}
/* ── MODALITÀ NOTTE (backoffice): pagina + contenuto scuri. Gli override chiari
   (#content, .modal/#cn_drawer) sono gated su html:not(.night) → in notte il
   contenuto usa i token scuri di base; qui scuriamo pagina, griglia e lavagna grafo. */
html.night { --bg: #081320; }
html.night body { background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); }
html.night .gwrap { background: var(--surface-3); }
html.night .gwrap > .muted { color: var(--muted-text); }

/* le card del GRAFO restano NAVY sopra la lavagna chiara: re-pin dei token
   scuri (gradiente, chip, menu e testi interni tornano da tema scuro) */
.gcard:not(.ghost) {
  --surface: #0f2742;
  --surface-2: #16345c;
  --surface-3: #0b1d31;
  --border: #2a4d77;
  --text: #ffffff;
  --muted: #6f8fc0;
  --muted-text: #8aa4cf;
  /* sulle card NAVY tornano le tinte di stato VIVE (bianco-su-scuro) */
  --st-verde: #3ec07a;
  --st-giallo: #e6c14b;
  --st-arancio: #e08a3c;
  --st-neutro: #6f8fc0;
  --st-grigio: #8a94a6;
  color: var(--text);
}
.page-title { display: none; }
.toolbar { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; margin: 4px 0 10px; }
.toolbar .left { display: flex; align-items: center; gap: 10px; }
.toolbar .label { margin: 0; font-size: var(--fs-base); color: inherit; }

/* ── Controlli compatti (densità console, look WAKE) ── */
.input, select.input, textarea.input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 7px 10px; font-size: var(--fs-sm);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.input::placeholder { color: #7d92b3; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111, 143, 208, .18); }
.field { margin-bottom: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  padding: 6px 12px; font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface-2); color: var(--text);
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
}
.btn:hover { background: var(--surface); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* regola PO: gli sfondi dei bottoni usano il NAVY del tasto "indietro"
   (niente periwinkle pieno, che resta per accenti/bordi/link) */
.btn-primary { background: #2a4d77; border-color: #3a5f94; color: #ffffff; }
.btn-primary:hover { background: #34598a; border-color: #3a5f94; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(216, 50, 58, .15); }
.btn-ghost { background: transparent; color: inherit; }
.btn-sm { padding: 4px 9px; font-size: var(--fs-caption); }
.btn-block { width: 100%; }

/* chip a DIETA: outline trasparente — il riempimento è solo dello stato
   attivo; il colore si EREDITA dal contesto (bianco su scuro, ink su bianco) */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; background: transparent; border: 1px solid var(--border);
  font-size: var(--fs-caption); color: inherit;
}
.pill-toggle { cursor: pointer; }
.chip-ore-moto { background: #e0457b; border-color: #e0457b; }
/* stato della copia di bordo nel registro tenant: si legge a colpo d'occhio
   quale nave è in mare, che è la cosa che cambia il gesto successivo */
.chip-warn { color: #b06000; border-color: rgba(217, 123, 18, .55);
  background: rgba(217, 123, 18, .12); font-weight: 700; }
.chip-ok { color: var(--st-verde); border-color: rgba(62, 192, 122, .45); }

/* la nave in mare, in topbar: sta sul chrome SCURO, quindi ambra chiara su
   fondo ambrato scuro — e non urla, perché non è un errore: è un fatto che
   cambia cosa ha senso fare adesso */
.bo-bordo { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  height: 32px; padding: 0 10px; border-radius: 8px; font: inherit;
  font-size: var(--fs-caption); color: #ffdba8;
  background: rgba(217, 123, 18, .20); border: 1px solid rgba(217, 123, 18, .55); }
.bo-bordo:hover { background: rgba(217, 123, 18, .32); }
.bo-bordo b { color: #fff; font-weight: 700; }
.bo-bordo .bb-dot { width: 8px; height: 8px; border-radius: 50%; background: #e08a3c;
  flex: none; box-shadow: 0 0 0 3px rgba(224, 138, 60, .22); }
.bo-bordo .bb-n { background: rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 1px 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-caption); font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Tabelle DENSE (lavoro tutto il giorno) ───── */
.table-wrap { background: var(--surface); border: 1px solid var(--border);
              border-radius: 8px; overflow: auto; max-height: 76vh; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* Tabella MANUTENZIONI: colonne FERME. Con il layout automatico la larghezza
   dipende dal contenuto, quindi bastava che il codice skill passasse da vuoto a
   «MCMC3» perché tutte le colonne si riassestassero a ogni salvataggio. */
/* sotto i 1420px la tabella scorre invece di schiacciare tutto (il wrapper ha
   overflow:auto): meglio scorrere che avere colonne illeggibili */
table.data.mnt { table-layout: fixed; min-width: 1420px; }
table.data.mnt th, table.data.mnt td { overflow: hidden; white-space: nowrap;
  padding-left: 6px; padding-right: 6px;   /* 8px guadagnati per colonna */
  text-overflow: clip; }                   /* niente «…» nelle celle di soli controlli */
table.data.mnt th, table.data.mnt td.ell { text-overflow: ellipsis; }
/* il nome del task va a CAPO su due righe: troncarlo a metà non serviva a
   nessuno e la colonna doveva restare larghissima per essere leggibile.
   Il clamp sta su uno SPAN interno: sulla cella sfalsava la riga di 1px. */
table.data.mnt td.wrap2 { white-space: normal; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; line-height: 1.25; }
table.data.mnt td { vertical-align: middle; }
table.data.mnt .input { width: 100%; padding: 4px 6px; }
table.data.mnt .skill-chip { display: inline-block; width: 100%; text-align: center; }
/* i bottoni di riga stanno in un DIV: il flex sul <td> lo toglie dal layout
   della tabella e le celle non si allineano più tra loro */
.td-actions { display: flex; gap: 4px; align-items: center; }
/* intestazioni colonna = stesso NAVY MEDIO dei bottoni, titoli BIANCHI */
table.data thead th {
  position: sticky; top: 0; z-index: 5; background: #2a4d77; color: #ffffff;
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data tbody td { padding: 5px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* zebra che SCHIARISCE (velo periwinkle), non che scurisce: niente bande
   nere dentro contenitori già scuri */
table.data tbody tr:nth-child(even) { background: rgba(111, 143, 208, .055); }
table.data tbody tr:hover { background: var(--surface-2); }
.cell-sub { color: var(--muted); font-size: var(--fs-caption); }
/* bollino colore di stato nelle intestazioni (al posto di "→VERDE/ARANCIO"):
   anellino bianco per staccare dal navy della testata */
.hdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
        vertical-align: middle; margin-left: 4px;
        box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }

/* righe funzionali della config ESWBS */
.row-exception { background: rgba(230, 193, 75, .10) !important; }
.row-exception td:first-child { box-shadow: inset 3px 0 0 var(--st-giallo); }
.row-deleted td { text-decoration: line-through; opacity: .5; }
.band-ui { box-shadow: inset 3px 0 0 var(--st-arancio); }
.band-ei { box-shadow: inset 3px 0 0 var(--primary); }

/* ── Card / info ──────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: 8px; padding: 14px; box-shadow: var(--shadow); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info-grid .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; }
.info-grid .v { font-weight: 600; }

/* ── Modali ───────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(3, 10, 22, .7);
           display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { width: 480px; max-width: 94vw; max-height: 90vh; overflow: auto;
         background: var(--surface); border: 1px solid var(--border);
         border-radius: 10px; padding: 16px; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: center;
              margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.modal-head h3 { margin: 0; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .03em; }
.modal-head .x { cursor: pointer; color: var(--muted); font-size: var(--fs-lg); }
.modal-head .modal-sub { font-size: var(--fs-sm); color: var(--muted-text); font-weight: 400;
                         text-transform: none; letter-spacing: 0; }

/* ── SCELTA IN ELENCO (.pick): quando la scelta porta con sé dei dati ───────────
   La tendina nativa non impagina: una riga di testo per opzione, nessuna colonna,
   nessuno stato visibile, e le voci non selezionabili si distinguono a fatica. Con
   quindici modelli nave — nomi simili, proprietari diversi, conteggi diversi — la
   scelta si faceva leggendo una frase alla volta, ed è così che il 12/08/2026 è
   partita una pubblicazione sul modello sbagliato. Qui ogni voce è una RIGA con le
   sue colonne, cliccabile per intero, e dice da sé se si può scegliere.
   Regole di stile rispettate: voce scelta = navy pieno #2a4d77 (come le CTA e le
   righe attive), il periwinkle resta accento. */
.pick { border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
        max-height: 44vh; overflow-y: auto; background: var(--surface); }
.pick-h { padding: 7px 12px; font-size: var(--fs-caption); text-transform: uppercase;
          letter-spacing: .04em; color: var(--muted-text); background: var(--surface-3);
          border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.pick-r { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
          align-items: baseline; padding: 9px 12px; cursor: pointer;
          border-bottom: 1px solid var(--border); }
.pick-r:last-child { border-bottom: 0; }
.pick-r:hover { background: var(--surface-2); }
.pick-r.on, .pick-r.on:hover { background: #2a4d77; }
.pick-r.on .pick-n, .pick-r.on .pick-sub, .pick-r.on .pick-q { color: #fff; }
/* Non selezionabile: si VEDE che non lo è, e accanto c'è il motivo (mai un grigio muto). */
.pick-r.off { cursor: not-allowed; background: transparent; }
.pick-r.off:hover { background: transparent; }
.pick-r.off .pick-n { color: var(--muted-text); font-weight: 600; }
.pick-n { font-weight: 700; }
.pick-code { font-weight: 400; color: var(--muted-text); }
.pick-r.on .pick-code { color: rgba(255, 255, 255, .8); }
.pick-sub { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--muted-text); }
.pick-q { font-size: var(--fs-sm); white-space: nowrap; text-align: right; }
.pick-warn { color: var(--st-arancio); }
.pick-r.on .pick-warn { color: #ffd7a8; }
/* Il blocco dell'opzione distruttiva sta STACCATO dalla scelta: si legge come un
   passo a sé, non come una riga in più dell'elenco. */
.opt-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
           background: var(--surface-3); margin-top: 12px; }
.opt-box.danger { border-color: rgba(216, 50, 58, .45); }
.opt-box label { display: flex; gap: 8px; align-items: center; cursor: pointer; margin: 0; }

/* ── Toast e dialog condivisi (ui.js) ─────────── */
.ui-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
             display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none; }
.ui-toast { display: flex; align-items: center; gap: 10px; pointer-events: auto;
            background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
            border-radius: 8px; padding: 10px 16px; font-size: var(--fs-base); font-weight: 600;
            box-shadow: var(--shadow); opacity: 0; transform: translateY(8px);
            transition: opacity .22s, transform .22s; }
.ui-toast.show { opacity: 1; transform: translateY(0); }
.ui-toast-ok { border-color: var(--ok); }
.ui-toast-ok .ui-toast-ic { color: var(--ok); }
.ui-toast-err { border-color: var(--danger); }
.ui-toast-err .ui-toast-ic { color: var(--danger); }
.ui-toast-info .ui-toast-ic { color: var(--accent); }
@keyframes ui-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.ui-dialog { animation: ui-pop .14s ease-out; }
.ui-dialog-msg { color: var(--text); line-height: 1.5; margin-bottom: 16px; white-space: pre-line; }
.ui-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ui-dialog-actions .btn { min-width: 100px; }

/* ── Hotspot (disegni) ────────────────────────── */
.hotspot-img { position: relative; cursor: crosshair; border: 1px solid var(--border); }
.hotspot-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--danger); border: 2px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(216, 50, 58, .8); }

/* ── Workspace posizioni (pagina intera) ── */
.pos-ws { display: flex; flex-direction: column; height: calc(100vh - 62px); }
.pos-topbar { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; flex-wrap: wrap; }
.pos-title { font-family: var(--font-display); font-size: var(--fs-h5); }
.pos-pagenav { display: inline-flex; align-items: center; gap: 6px; }
.pos-counter { margin-left: auto; font-weight: 700; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px; }
.pos-split { display: grid; grid-template-columns: 1fr 340px; gap: 12px; flex: 1; min-height: 0; }
/* tela del disegno: scrollabile, il PDF è renderizzato grande */
.pos-canvas { overflow: auto; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 10px; cursor: crosshair; position: relative; }
.pos-imgwrap { position: relative; display: inline-block; line-height: 0; }
.pos-img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
/* navigazione mappa: scroll = zoom, Alt+trascina (o tasto centrale) = sposta, ⤢ = adatta */
.pos-canvas.pan-ready { cursor: grab; }
.pos-canvas.panning { cursor: grabbing; }
.pos-zoom { display: inline-flex; align-items: center; gap: 4px; }
.pos-zoom .pos-zlabel { min-width: 46px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* quadrotti macrogruppo nel pannello elementi (stessa famiglia di Config. ESWBS) */
.pos-quads { display: flex; flex-wrap: wrap; gap: 5px; }
.pos-quads .quadrotto { flex-direction: row; gap: 6px; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--border); font-size: 12px; }
.pos-quads .quadrotto.empty { opacity: .4; }
.pos-quads .quadrotto.on { background: #2a4d77; border-color: #3a5f94; color: #fff; }
.pos-dots { position: absolute; inset: 0; pointer-events: none; }
.pos-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; cursor: pointer;
  background: var(--danger); border: 2px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(216, 50, 58, .85); pointer-events: auto; }
.pos-dot.sel { width: 20px; height: 20px; background: var(--primary); z-index: 3;
  box-shadow: 0 0 0 3px rgba(111, 143, 208, .5), 0 0 8px rgba(42, 77, 119, .8); }
/* proposte AI (bacchetta magica): pallini FANTASMA da confermare */
.pos-ghost { position: absolute; width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  background: rgba(155, 111, 208, .3); border: 2px dashed #9b6fd0; transform: translate(-50%, -50%);
  pointer-events: auto; box-shadow: 0 0 8px rgba(155, 111, 208, .55); }
.pos-ghost:hover { background: rgba(155, 111, 208, .6); }
.pos-candbar { display: none; }
.pos-candbar.on { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 12px;
  background: rgba(155, 111, 208, .12); border: 1px solid #9b6fd0; border-radius: 10px; flex-wrap: wrap; }
/* pannello elementi */
.pos-side { display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; }
.pos-side-hd { padding: 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pos-list { flex: 1; overflow: auto; padding: 6px; }
.pos-list { scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.pos-list::-webkit-scrollbar { width: 12px; }
.pos-list::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
.pos-list::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.pos-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; }
.pos-row:hover { background: var(--surface-2); }
.pos-row.sel { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 1px var(--primary); }

/* ── "Sposta sotto…": elenco dei possibili padri. Scrollbar BEN VISIBILE (come
   .pos-list/.ai-rows): con quella sottile di default, in tinta col fondo del
   modale, non si capiva che la lista continuava sotto. ── */
.bm-list { max-height: 280px; overflow-y: scroll; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px;
  background: var(--surface-3);
  scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.bm-list::-webkit-scrollbar { width: 12px; }
.bm-list::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
.bm-list::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.bm-row { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent; }
.bm-row:hover { background: var(--surface-2); }
.bm-row.sel { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 1px var(--primary); }
.bm-row .bm-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* celle EDITABILI inline nella tabellare Config ESWBS (clic → input) */
.cell-edit { cursor: text; border-bottom: 1px dashed transparent; }
.cell-edit:hover { border-bottom-color: var(--primary); }

/* righe appena spostate/riagganciate: lampeggio per ritrovarle dopo il reload */
@keyframes bm-moved-flash {
  0%, 55% { outline: 2px solid var(--primary); outline-offset: -2px;
            background-color: rgba(111, 143, 208, .22); }
  100%    { outline: 2px solid transparent; outline-offset: -2px; }
}
tr.row-moved > td { animation: bm-moved-flash 2.4s ease-out; }
.gcard.row-moved, .card.row-moved { animation: bm-moved-flash 2.4s ease-out; }
.pos-row.has:not(.sel) { background: rgba(62, 192, 122, .09); }      /* confermato/posizionato */
.pos-row.cand:not(.sel):not(.has) { background: rgba(155, 111, 208, .09); }   /* proposta AI */
.pos-row-mark { flex: 0 0 16px; text-align: center; color: var(--muted-text); }
.pos-row.has .pos-row-mark { color: var(--st-verde); }
/* lampeggio del pallino/fantasma quando si seleziona la riga (sync mappa⇄lista) */
@keyframes posblink { 0%, 100% { box-shadow: 0 0 0 0 rgba(42, 77, 119, .85); } 50% { box-shadow: 0 0 0 11px rgba(42, 77, 119, 0); } }
.pos-dot.blink, .pos-ghost.blink { animation: posblink .55s ease-out 3; }
.pos-row-main { flex: 1; min-width: 0; }
.pos-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1024px) { .pos-split { grid-template-columns: 1fr; } }

/* ── Login (console interna, famiglia WAKE) ───── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
             background: var(--bg); }
.auth-box { width: 360px; background: var(--surface); border: 1px solid var(--border);
            border-radius: 10px; padding: 26px; box-shadow: var(--shadow); }
.auth-box h1 { font-size: var(--fs-lg); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .03em; }

/* colori semantici usati inline dal markup */
.st { font-weight: 700; }
.st-verde { color: var(--ok); }
.st-rosso { color: var(--danger); }

/* Stato vuoto (coerente con WAKE 2.0) */
.empty-state { text-align: center; color: var(--muted); padding: 42px 20px; }

/* ── Viste configurazione (feat-bo-viste-configurazione) ── */
/* switcher Tabella/Badge/Albero */
/* segmenti (viste, glossario, tutto/da aggiungere): pill piena = attivo.
   Riempimento = NAVY del tasto "indietro" (regola PO: niente periwinkle
   pieno sugli stati selezionati, resta solo sulle CTA primarie) */
.vsw { cursor: pointer; color: var(--muted); padding: 1px 7px; border-radius: 999px; }
.vsw:hover { color: var(--text); }
.vsw.on { background: #2a4d77; color: #ffffff; font-weight: 700; }

/* vista badge/schede */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.badge-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
              padding: 10px 12px; cursor: pointer;
              transition: border-color var(--speed), transform var(--speed); }
/* affordance: la card è apribile (doppio click) → pointer + micro-lift su hover */
.badge-card:hover { border-color: var(--accent); transform: translateY(-1px); }

/* quadrotti macrogruppo 100-900 (filtri rapidi vista albero) */
.quadrotto { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer;
             background: transparent; border: 1px solid var(--border); border-radius: 8px;
             padding: 4px 9px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
             transition: background var(--speed), border-color var(--speed); }
.quadrotto:hover { border-color: var(--accent); }
.quadrotto small { color: var(--muted); font-weight: 400; }
.quadrotto.on { background: #2a4d77; border-color: #3a5f94; color: #ffffff; }
.quadrotto.on small { color: rgba(255, 255, 255, .8); }

/* ALBERO A COLONNE (tree-table). L'indentazione NON la fanno più i contenitori
   annidati — spostava tutto ciò che sta a destra e le colonne non erano mai
   allineate (e scrivere in una cella riflowava la riga). Ora ogni riga è una
   GRIGLIA con lo stesso template (--tt-tpl) e l'indentazione vive DENTRO la
   cella LCN come padding proporzionale alla profondità (--d): le colonne
   restano incolonnate a qualsiasi livello. */
.tnode { margin-left: 0; }
.tkids { margin-left: 0; }
/* Anteprima di cosa c'è dentro un ramo CHIUSO (Config. ESWBS, Albero e Grafo):
   il codice e la denominazione standard non dicono che sotto ci sono i diesel
   generatori. A ramo aperto sparisce: i figli sono lì sotto per esteso. */
.tt-p {
  display: block; color: var(--muted-text); font-size: 11px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tnode.is-open > .trow .tt-p { display: none; }
.gcard-sub {
  color: var(--muted-text); font-size: 11px; line-height: 1.3; margin: -2px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* la tabella si adatta al contenitore: niente max-content, altrimenti i nomi
   lunghi la allargavano e ricompariva lo scorrimento orizzontale */
.tt { min-width: 0; width: 100%; }
/* La GRIGLIA a colonne vale solo dentro l'albero di Config. ESWBS, che è il
   solo a definire --tt-tpl (su #tzoom.tt). Altrove .trow resta FLEX come prima:
   senza quella variabile grid-template-columns non si applica e ogni cella
   andrebbe a capo — succedeva nella vista Analisi AI, che riusa .trow con un
   numero di celle diverso e non può condividere lo stesso template. */
.trow { display: flex; align-items: center; gap: 8px;
        column-gap: 10px; padding: 4px 10px;
        cursor: grab; font-size: var(--fs-sm);
        border-bottom: 1px solid var(--border); }
.tt .trow { display: grid; grid-template-columns: var(--tt-tpl); gap: 0;
            column-gap: 10px; }
.trow > * { min-width: 0; }
.trow:hover { background: var(--surface-2); }
.trow.alt { background: rgba(111, 143, 208, .045); }        /* zebra: righe alterne */
.trow.alt:hover { background: var(--surface-2); }
.trow.drop { outline: 2px dashed var(--accent); }
.trow .chev { width: 14px; cursor: pointer; color: var(--muted); user-select: none; }
.trow.band-ui { box-shadow: inset 3px 0 0 var(--st-arancio); }
/* CELLA A DUE RIGHE: sopra il dato secondario, sotto quello principale.
   Quattro colonne larghe invece di dieci strette — ci sta tutto a schermo. */
.tt-t, .tt-b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-t { font-size: 10.5px; color: var(--muted-text); line-height: 1.25; }
.tt-b { line-height: 1.3; }
/* numeri allineati a SINISTRA come tutto il resto: erano l'unica colonna a
   destra e sembravano appartenere alla colonna successiva (cifre tabellari
   per tenerle comunque incolonnate tra loro) */
.tt-c.num .tt-t, .tt-c.num .tt-b { text-align: left; font-variant-numeric: tabular-nums; }
/* colonna ELEMENTO: rientro del livello + filo verticale della gerarchia */
.tt-el { position: relative; padding-left: calc(var(--d, 0) * 15px + 4px); }
.tt-el::before { content: ""; position: absolute; left: calc(var(--d, 0) * 15px - 5px);
                 top: -4px; bottom: -4px; border-left: 1px solid var(--border); }
.trow[style*="--d:0"] .tt-el::before { display: none; }   /* radici: nessun filo */
.tt-nm { display: flex; align-items: center; gap: 6px; font-weight: 500; }
/* La card NON ha padding: con i 14px in cima le righe si vedevano scorrere
   SOPRA l'intestazione bloccata (la fascia libera stava sopra di essa). */
.tt-card { padding: 0; }
/* intestazione delle colonne: bloccata, PIENA e a filo del bordo superiore,
   stessa navy delle altre tabelle (table.data thead th) */
.trow.tt-head { position: sticky; top: 0; z-index: 12; cursor: default;
                background: #2a4d77; color: #fff;
                box-shadow: 0 1px 0 var(--border-strong);
                border-bottom: none; padding-top: 7px; padding-bottom: 7px;
                font-size: 11px; font-weight: 700; letter-spacing: .05em;
                text-transform: uppercase; }
.trow.tt-head:hover { background: #2a4d77; }
/* menu di scelta colonne */
.menu-cols { min-width: 190px; }
.menu-check { display: flex; align-items: center; gap: 8px; padding: 5px 10px;
              cursor: pointer; white-space: nowrap; }
.menu-check:hover { background: var(--surface-2); }
/* GRAFO: gli stessi campi dell'albero, in coppie etichetta/valore */
.gcard-fields { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 2px; }
.gcard-fields .gf { display: contents; }
.gcard-fields .gf-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
                      color: var(--muted-text); align-self: center; }
.gcard-fields .gf-v { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* coi filtri attivi gli ANTENATI dei match restano visibili come percorso */
.trow.is-path, .gcard.is-path { opacity: .6; }

/* ── Vista GRAFO (quarta vista config): card chiuse alla radice,
      espansione progressiva, connettori a gomito tra le card ── */
/* canvas del grafo = LAVAGNA CHIARA (PO 2026-06-12: bianco azzurrino con
   griglia a puntini scuri, stile blueprint/Miro) — la superficie di lavoro
   è chiara, il resto della console resta WAKE navy; le card navy ci
   galleggiano sopra con le loro ombre */
.gwrap { overflow: auto; max-height: 74vh; padding: 14px;
         background: #ffffff; border: 1px solid var(--border); border-radius: 8px; }
/* testi che poggiano DIRETTAMENTE sulla lavagna chiara: ink scuro */
.gwrap > .muted { color: #46618c; }
/* scrollbar dentro la lavagna: traccia chiara */
.gwrap { scrollbar-color: #4a6fa8 #e3edf8; }
.gwrap::-webkit-scrollbar-track { background: #e3edf8; }
.gwrap::-webkit-scrollbar-thumb { border-color: #e3edf8; }
.gnode { display: flex; align-items: flex-start; }
.gcard {
  /* elevazione condivisa: filo di luce sul bordo alto + doppia ombra
     (corta netta + lunga morbida) = effetto rilievo/3D */
  --card-elev: inset 0 1px 0 rgba(255, 255, 255, .08),
               0 1px 2px rgba(2, 8, 18, .6),
               0 10px 24px rgba(2, 8, 18, .5);
  background: var(--surface-2);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--surface-2), #ffffff 5%) 0%,
              color-mix(in srgb, var(--surface-2), #04080f 22%) 100%);
  border: 1px solid rgba(111, 143, 208, .26); border-radius: 10px;
  padding: 10px 12px; width: 270px; flex: none; margin: 6px 0;
  cursor: pointer;                 /* card apribile con doppio click */
  box-shadow: var(--card-elev);
  transition: border-color var(--speed), transform var(--speed), box-shadow var(--speed);
}
.gcard:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 0 0 1px rgba(111, 143, 208, .3),
              0 14px 30px rgba(2, 8, 18, .65);
}
.gcard.hit { outline: 2px solid var(--accent); outline-offset: 1px; }
.gcard.band-ui { box-shadow: inset 3px 0 0 var(--st-arancio), var(--card-elev); }
.gcard.band-ei { box-shadow: inset 3px 0 0 var(--primary), var(--card-elev); }
.gcard-top { display: flex; align-items: center; gap: 6px; }
.gcard-check { width: 15px; height: 15px; flex: none; cursor: pointer;
  accent-color: var(--primary); margin: 0 1px 0 0; }
/* palette di icone della barra Config ESWBS: vista · strumenti albero · azioni.
   Gruppi con bordo, bottoni-icona quadrati con tooltip (title); attivo = navy pieno. */
.tb-palette { flex-wrap: wrap; row-gap: 6px; }
.tb-group { display: inline-flex; align-items: center; gap: 1px; padding: 2px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tbi { min-width: 30px; height: 28px; padding: 0 6px; display: inline-flex;
  align-items: center; justify-content: center; background: none; border: none;
  border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.tbi:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.tbi.on { background: #2a4d77; color: #fff; }
.tbi:disabled { opacity: .35; cursor: default; }
.gcard-top .chip { margin-left: auto; flex: none; }
.gcard-name { margin: 4px 0 2px; font-weight: 600; line-height: 1.3; }
.gcard-foot { display: flex; align-items: center; justify-content: space-between;
              gap: 8px; margin-top: 7px; }
/* contatore-ramo: outline quieto, pieno solo da APERTO (dieta dell'accento) */
.gkid-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--accent); cursor: pointer; padding: 2px 10px;
  font-size: var(--fs-caption); font-weight: 700; white-space: nowrap;
  transition: background var(--speed), border-color var(--speed);
}
.gkid-btn:hover { border-color: var(--accent); }
.gkid-btn.open { background: #2a4d77; color: #ffffff; border-color: #3a5f94; }
/* connettori del flusso: stub dal padre + tronco verticale SOLO tra il
   primo e l'ultimo gomito + gomito per ogni card — niente segmenti che
   sporgono oltre i gomiti (erano quelli a formare le croci) */
.gkids { display: flex; flex-direction: column; margin-left: 34px; position: relative; }
.gkids::before { content: ""; position: absolute; left: -34px; top: 28px; width: 22px; height: 2px;
                 background: var(--border); }
.gbranch { position: relative; padding-left: 22px; }
.gbranch::before { content: ""; position: absolute; left: -12px; top: 28px; width: 34px; height: 2px;
                   background: var(--border); }
.gbranch::after { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px;
                  background: var(--border); }
.gbranch:first-child::after { top: 28px; }                /* non sale sopra il primo gomito */
.gbranch:last-child::after { bottom: auto; height: 30px; } /* si ferma all'ultimo gomito */
.gbranch:first-child:last-child::after { display: none; }  /* figlio unico: linea dritta */

/* azioni contestuali di riga (menu ⋮, delega in ui.js condiviso) */
.row-menu { position: relative; display: inline-block; }
.row-menu-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: var(--fs-lg); padding: 2px 8px; border-radius: 6px;
  min-width: 28px; min-height: 26px;
}
.row-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.row-menu .menu {
  display: none; position: absolute; right: 0; top: calc(100% + 2px); z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  min-width: 180px; box-shadow: var(--shadow); padding: 4px;
}
.row-menu.open .menu { display: block; }
/* La CARD col menu aperto deve stare SOPRA le sorelle: senza questo, la card
   sotto in hover (transform → nuovo stacking context) dipinge sopra il menu
   aperto e "buca". Alza solo la card che ha il menu aperto. */
.gcard:has(.row-menu.open),
.badge-card:has(.row-menu.open) { position: relative; z-index: 40; }
/* flip: si apre verso l'ALTO quando manca spazio sotto (vedi ui.js) */
.row-menu .menu.up { top: auto; bottom: calc(100% + 2px); }
.row-menu .menu > div {
  display: block; padding: 7px 10px; cursor: pointer;
  border-radius: 6px; color: var(--text); font-size: var(--fs-sm); white-space: nowrap;
}
.row-menu .menu > div:hover { background: var(--surface); }

/* autocomplete registry Parti */
.sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
        background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
        max-height: 220px; overflow: auto; box-shadow: var(--shadow); }
.sugg-it { padding: 7px 10px; cursor: pointer; font-size: var(--fs-sm); }
.sugg-it:hover { background: var(--surface); }

/* marker "foglia con dati compilati" (specializzata) — meeting r.95-96 */
.dot-data { color: var(--st-verde); font-size: 11px; vertical-align: middle; }

/* ── GLOSSARIO INTEGRATO: voci GHOST dentro Albero e Grafo ── */
.gl-del { opacity: .45; }
.gl-del strong, .gl-del span { text-decoration: line-through; }
.gl-check { color: var(--st-verde); font-weight: 800; width: 16px; text-align: center; }
/* tondo verde = selezione PARZIALE (un discendente è selezionato) */
.gl-partial { color: var(--st-verde); width: 16px; text-align: center; cursor: pointer;
              font-size: 13px; line-height: 1; }
/* righe/card ghost: tratteggiate e attenuate — sono il glossario, non la nave */
.trow.ghost {
  opacity: .72; border: 1px dashed var(--border); border-radius: 6px;
  background: transparent; cursor: default;
}
.trow.ghost:hover { opacity: 1; background: var(--surface-2); }
.trow.ghost.hit { outline: 2px solid var(--accent); opacity: 1; }
/* ghost sulla LAVAGNA CHIARA: "appunti a matita" — velo azzurrino,
   tratteggio e testi scuri (i reali restano card navy in rilievo) */
.gcard.ghost { opacity: .85; border-style: dashed; box-shadow: none;
               background: rgba(111, 143, 208, .08);
               border-color: rgba(42, 77, 119, .55); color: #16335c; }
.gcard.ghost .muted, .gcard.ghost .cell-sub { color: #46618c; }
.gcard.ghost .chip-ghostlbl { color: #46618c; border-color: rgba(42, 77, 119, .5); }
/* la pill "N dal glossario" sta su fondo navy (--surface ri-pinnato scuro nelle
   card del grafo) → testo BIANCO, non blu, altrimenti non si legge */
.gcard.ghost .gkid-btn { background: #2a4d77; color: #ffffff; border-color: #3a5f94; }
.gcard.ghost:hover { opacity: 1; transform: none;
                     box-shadow: none; border-color: rgba(42, 77, 119, .8); }
.gcard.ghost.hit { outline: 2px solid var(--accent); opacity: 1; }
.ghost-plus { color: var(--muted); font-weight: 600; }
/* doppia codifica esplicita: ✓ verde = in nave · "+ non in nave" = glossario */
.chip-innave { color: var(--st-verde); border-color: rgba(62, 192, 122, .5); font-weight: 700; }
.chip-ghostlbl { color: var(--muted-text); border-style: dashed; }
/* sezione ghost IN CODA nelle viste piatte (Tabella/Badge) */
tr.ghost-row td { opacity: .72; }
tr.ghost-row:hover td { opacity: 1; background: var(--surface-2); }
tr.ghost-divider td, .ghost-divider-flat {
  padding: 10px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em;
  color: var(--muted-text); text-transform: uppercase;
  border-top: 2px dashed var(--border);
}
.ghost-divider-flat { grid-column: 1 / -1; margin-top: 4px; }
.badge-card.ghost { opacity: .78; border-style: dashed; box-shadow: none; cursor: default; }
.badge-card.ghost:hover { opacity: 1; }
/* barra azione flottante UNIFICATA (azioni massive + trasporto glossario) */
.ghost-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 250;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 18px; box-shadow: var(--shadow); font-size: var(--fs-sm);
}
.ab-sep { width: 1px; align-self: stretch; background: var(--border); }

/* ── DRAWER Filtri (stesso pattern dei "Filtri avanzati" dell'app):
      overlay da destra, gruppi etichettati, applicazione live ── */
#cn_drawer .drawer-scrim {
  position: fixed; inset: 0; z-index: 240; background: rgba(2, 8, 18, .5);
}
#cn_drawer .drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 241;
  width: 330px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#cn_drawer .drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 6px;
}
#cn_drawer .drawer-head h3 { margin: 0; font-size: var(--fs-md); }
#cn_drawer .drawer-head .x { cursor: pointer; color: var(--muted-text); font-weight: 700; }
#cn_drawer .drawer-head .x:hover { color: var(--text); }
#cn_drawer .drawer-body { flex: 1; overflow: auto; padding: 4px 16px 12px; }
#cn_drawer .drawer-body .label { margin: 16px 0 6px; }
#cn_drawer .drawer-body .label:first-child { margin-top: 4px; }
.drw-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 4px;
  cursor: pointer; font-size: var(--fs-sm); border-radius: 6px;
}
.drw-row:hover { background: var(--surface-2); }
.drw-row input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.drw-row .muted { margin-left: auto; }
#cn_drawer .drawer-foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 16px 14px; border-top: 1px solid var(--border);
}

/* ── PANNELLO DI COMANDO Config. ESWBS: contesto + comando + scope in UNA
      superficie contenuta (niente bottoni "sparsi nel vuoto") ── */
.cn-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin: 0 0 14px;
}
.cn-panel .toolbar { margin: 0; }
.cn-panel #cn_head:not(:empty) {
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px;
}
.cn-panel .scopebar { margin: 10px 0 0; }
/* dentro il pannello i controlli leggono meglio su un gradino più chiaro */
.cn-panel .input, .cn-panel select.input { background: var(--surface-2); }

/* canvas dell'albero: bianco come tutto il contenuto */
#cn_view > .card.scroll-x { background: var(--surface); }

/* fascia comando: badge col numero di filtri attivi sul bottone Filtri */
.fbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
  border-radius: 8px; background: #2a4d77; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
/* fascia SCOPE: quadrotti + chip dei filtri attivi (vuota = quasi invisibile) */
.scopebar { margin: 8px 0 10px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px;
  font-size: var(--fs-caption); color: var(--text); background: rgba(111, 143, 208, .12);
}
.fchip .x { cursor: pointer; color: var(--muted-text); font-weight: 700; }
.fchip .x:hover { color: var(--danger); }
.chip .vsw b { font-weight: 800; }

/* tasto da tastiera nella legenda (stile kbd) */
.gs-kbd { color: var(--muted-text); font-size: 11px; font-weight: 700;
          border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }

/* ── Menu della toolbar (G4): bottoni-menu raggruppati ── */
.tb-menu .row-menu-btn {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 4px 11px; font-size: var(--fs-caption); font-weight: 600;
  min-width: 0; min-height: 0; cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.tb-menu .row-menu-btn:hover { background: var(--surface); border-color: var(--accent); }
.tb-menu .row-menu-btn.tb-primary { background: #2a4d77; border-color: #3a5f94; color: #fff; }
/* i menu toolbar stanno a destra: si aprono verso SINISTRA (niente overflow) */
.tb-menu .menu { left: auto; right: 0; min-width: 230px; }

/* ── Analisi documentale AI: revisione a due colonne (righe | PDF) ── */
/* analisi SALVATE (persistono nel DB): card cliccabili per riaprirle */
.ai-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ai-saved { position: relative; min-width: 0; overflow: hidden;
            background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
            padding: 8px 11px; cursor: pointer; transition: border-color var(--speed), transform var(--speed); }
.ai-saved:hover { border-color: var(--accent); transform: translateY(-1px); }
.ai-saved.applied { border-left: 3px solid var(--st-verde); }
.ai-saved.pending { opacity: .75; }
.ai-saved-head { display: flex; align-items: center; gap: 7px; padding-right: 22px; }
.ai-saved-name { font-weight: 700; margin: 4px 0 2px; line-height: 1.25;
                 word-break: break-all; }   /* nomi file lunghi vanno a capo, non sforano */
.ai-saved .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-saved-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
                display: flex; align-items: center; justify-content: center; border-radius: 6px;
                color: var(--muted); font-size: 14px; line-height: 1; }
.ai-saved-del:hover { background: rgba(216, 50, 58, .12); color: var(--danger); }
.ai-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ai-filters .chip { background: var(--surface); }
.ai-filters .vsw b { font-weight: 800; }
.ai-q { width: 240px; min-height: 0; padding: 6px 10px; font-size: var(--fs-sm); }
.ai-split { display: grid; grid-template-columns: minmax(360px, 1fr) 1.2fr; gap: 12px; align-items: start; }
/* lista scrollabile DELIMITATA: pozzetto con bordo, così si vede dove finisce */
.ai-rows {
  display: flex; flex-direction: column; gap: 6px; max-height: 74vh;
  overflow-y: auto; overflow-x: hidden; padding: 8px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
/* ricerca elementi (Disegni) e lista Allegati: scrollbar ben visibile,
   stessa ricetta delle altre liste (la regola globale la rende invisibile
   sulle superfici chiare) + gutter riservato per non coprire il testo */
#d_el_dd, .elf-list { scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
#d_el_dd::-webkit-scrollbar, .elf-list::-webkit-scrollbar { width: 12px; }
#d_el_dd::-webkit-scrollbar-track, .elf-list::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
#d_el_dd::-webkit-scrollbar-thumb, .elf-list::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
#d_el_dd::-webkit-scrollbar-thumb:hover, .elf-list::-webkit-scrollbar-thumb:hover { background: #5f78a3; }

/* scrollbar BEN VISIBILE (non in tinta col fondo) */
.ai-rows { scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.ai-rows::-webkit-scrollbar { width: 13px; }
.ai-rows::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
.ai-rows::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.ai-rows::-webkit-scrollbar-thumb:hover { background: #5f78a3; }
.ai-row { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
          padding: 8px 10px; cursor: pointer; transition: border-color var(--speed), box-shadow var(--speed); }
.ai-row:hover { border-color: var(--accent); }
.ai-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ai-row.confirmed { border-left: 3px solid var(--st-verde); }
.ai-row.rejected { opacity: .5; border-left: 3px solid var(--danger); }
.ai-row-top { display: flex; align-items: center; gap: 8px; }
.ai-code { width: 92px; min-height: 0; padding: 4px 7px; font-size: var(--fs-caption); font-weight: 700; }
.ai-conf { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ai-den { font-weight: 600; margin: 5px 0 2px; line-height: 1.25; }
.ai-pdf { position: sticky; top: 8px; background: var(--surface-3); border: 1px solid var(--border);
          border-radius: 8px; max-height: 80vh; overflow: auto; }
.ai-page-wrap { position: relative; display: inline-block; }
.ai-page { display: block; max-width: 100%; }
.ai-hl { position: absolute; background: rgba(230, 193, 75, .35);
         border: 2px solid var(--st-giallo); border-radius: 3px; pointer-events: none; }

/* ── Analisi AI: TAB delle fasi ── */
.ai-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--border); }
.ai-tab { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
          background: transparent; border: 1px solid transparent; border-bottom: none;
          border-radius: 10px 10px 0 0; cursor: pointer; margin-bottom: -2px;
          transition: background var(--speed), border-color var(--speed); }
.ai-tab:hover { background: var(--surface-2); }
.ai-tab.on { background: var(--surface); border-color: var(--border);
             border-bottom: 2px solid var(--surface); }
.ai-tab.on .ai-phase-n { background: var(--primary); }
.ai-phase-n { display: inline-flex; align-items: center; justify-content: center;
              min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px;
              background: var(--muted-text); color: #fff; font-weight: 800; font-family: var(--font-display);
              transition: background var(--speed); }
.ai-phase-t { font-weight: 700; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.ai-phase-s { font-size: var(--fs-caption); color: var(--muted-text); }

/* Fase 2/3: albero foglie | area di lavoro */
.ai2-split { display: grid; grid-template-columns: var(--ai2-treew, 320px) 12px 1fr; gap: 0; align-items: start; }
.ai2-work { min-width: 0; }
/* divisore trascinabile albero | pannello */
.ai2-divider { position: relative; cursor: col-resize; align-self: stretch; min-height: 240px; }
.ai2-divider::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px;
                       background: var(--border); border-radius: 2px; transition: background var(--speed), width var(--speed); }
.ai2-divider:hover::before, .ai2-divider.dragging::before { background: var(--primary); width: 4px; left: 4px; }
.ai2-tree { max-height: 78vh; overflow: auto; padding: 6px; min-width: 0;
            background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; }
/* scrollbar SEMPRE visibile (come la lista della Config), non solo all'hover */
.ai2-tree, .ai2-sects, .ai2-panel .ai-gcol { scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.ai2-tree::-webkit-scrollbar, .ai2-sects::-webkit-scrollbar, .ai2-panel .ai-gcol::-webkit-scrollbar { width: 12px; }
.ai2-tree::-webkit-scrollbar-track, .ai2-sects::-webkit-scrollbar-track, .ai2-panel .ai-gcol::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
.ai2-tree::-webkit-scrollbar-thumb, .ai2-sects::-webkit-scrollbar-thumb, .ai2-panel .ai-gcol::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.ai2-tree::-webkit-scrollbar-thumb:hover, .ai2-sects::-webkit-scrollbar-thumb:hover, .ai2-panel .ai-gcol::-webkit-scrollbar-thumb:hover { background: #5f78a3; }
.ai2-node { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px;
            cursor: pointer; white-space: nowrap; }
.ai2-node:hover { background: var(--surface-2); }
.ai2-node.sel { background: var(--primary); color: #fff; }
.ai2-node.sel .cell-sub, .ai2-node.sel .ai2-node-lcn { color: rgba(255, 255, 255, .85); }
.ai2-node.leaf .ai2-node-name { font-weight: 600; }
.ai2-node-lcn { font-size: var(--fs-caption); color: var(--muted-text); font-variant-numeric: tabular-nums; }
.ai2-node-name { overflow: hidden; text-overflow: ellipsis; }
/* "dove ho caricato manuali": header contatore + evidenza riga + risalita sul ramo */
.ai2-tree-hd { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: -6px -6px 4px;
               font-size: var(--fs-caption); border-bottom: 1px solid var(--border);
               position: sticky; top: -6px; background: var(--surface-3); z-index: 2; }
.ai2-tree-hd .vsw { margin-left: auto; }
.ai2-mark { display: inline-flex; width: 15px; flex: 0 0 15px; justify-content: center; font-size: 12px; }
.ai2-mandot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: .5; }
.ai2-node.has-manual { background: rgba(111, 143, 208, .14); box-shadow: inset 3px 0 0 var(--primary); }
.ai2-node.has-manual .ai2-node-name { font-weight: 700; }
.ai2-node.has-manual:hover { background: rgba(111, 143, 208, .22); }
.ai2-node.has-manual.sel { background: var(--primary); box-shadow: none; }
.ai2-b-man { background: rgba(111, 143, 208, .2); border-color: var(--primary); color: var(--primary); font-weight: 800; }
.ai2-node.sel .ai2-b-man { background: rgba(255, 255, 255, .22); color: #fff; border-color: transparent; }
.ai2-b-mut { opacity: .55; }
.ai2-node.sel .ai2-b-mut { opacity: .85; }
/* testata compatta: foglia · barra-drop sottile · dropdown analisi */
.ai2-workhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.ai2-leafhead { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ai2-leaf-name { font-weight: 700; font-family: var(--font-display); font-size: var(--fs-h6);
                 text-transform: uppercase; line-height: 1.15; }
.ai2-dropbar { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px;
               border: 1.5px dashed var(--border); border-radius: 9px; padding: 7px 12px; cursor: pointer;
               background: var(--surface); color: var(--muted-text);
               transition: border-color var(--speed), background var(--speed); }
.ai2-dropbar:hover, .ai2-dropbar.over { border-color: var(--primary); background: var(--surface-2); color: inherit; }
.ai2-dropbar-txt { white-space: nowrap; }
.ai2-savedsel { width: auto; max-width: 280px; }
/* Area lavoro 2-3, stato CARICAMENTO: nome centrato + grande drop zone + istruzioni */
.ai2-landing { max-width: 640px; margin: 26px auto; display: flex; flex-direction: column; gap: 16px; }
.ai2-landing .ai2-leaf-name { text-align: center; font-size: var(--fs-xl); }
.ai2-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                border: 2px dashed var(--border); border-radius: 16px; padding: 44px 20px; cursor: pointer;
                background: var(--surface-2); color: var(--muted-text); text-align: center;
                transition: border-color var(--speed), background var(--speed), color var(--speed); }
.ai2-dropzone:hover, .ai2-dropzone.over { border-color: var(--primary); background: rgba(111, 143, 208, .10); color: var(--ink); }
.ai2-dropzone svg { width: 44px; height: 44px; opacity: .7; }
.ai2-dz-title { font-size: var(--fs-md); font-weight: 600; }
/* stato VISUALIZZAZIONE: testata compatta sopra tabs + documento */
.ai2-viewhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── Dashboard COSTI AI (dataviz: categoriche blu/arancio VALIDATE, dark incluso) ── */
.viz-costi { --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #7b5cc9; --viz-track: rgba(111, 143, 208, .16); }
html.night .viz-costi { --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #9b83e0; --viz-track: rgba(255, 255, 255, .10); }
.costi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.costi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(22, 51, 92, .08); }
.costi-tile .t-lbl { font-size: var(--fs-caption); color: var(--muted-text); }
.costi-tile .t-val { font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.costi-tile .t-sub { font-size: var(--fs-caption); color: var(--muted-text); margin-top: 2px; }
.costi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .costi-grid { grid-template-columns: 1fr; } }
.costi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.costi-card h4 { margin: 0 0 12px; font-size: var(--fs-sm); }
.costi-legend { display: flex; gap: 14px; margin-bottom: 8px; font-size: var(--fs-caption); color: var(--muted-text); }
.costi-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hbar-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
.hbar-lbl { font-size: var(--fs-caption); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; background: var(--viz-track); border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width var(--speed); }
.hbar-val { font-size: var(--fs-caption); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 6px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; height: 100%; }
.vbar { width: 100%; max-width: 40px; background: var(--viz-s1); border-radius: 5px 5px 0 0; min-height: 2px; }
.vbar-lbl { font-size: 10px; color: var(--muted-text); white-space: nowrap; }

/* Editor passi Troubleshooting: card COMPATTE gerarchiche + modifica in popup */
.ts-ed-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ts-scards { display: flex; flex-direction: column; gap: 5px; }
.ts-scard { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; cursor: pointer;
            border: 1px solid var(--border); background: var(--surface-2); border-left: 3px solid #2a4d77;
            transition: background var(--speed); }
.ts-scard.ver { border-left-color: #1f7a4d; }
.ts-scard:hover { background: var(--surface); }
.ts-scard-k { flex: none; }
.ts-scard-t { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
.chip.ts-mini { font-size: 10px; padding: 1px 6px; }
.ts-erow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ts-erow select { width: auto; flex: 1; min-width: 0; }
/* pannello editor Troubleshooting più LARGO (dropdown collegamenti leggibili):
   il diagramma a sinistra si restringe di conseguenza */
.ts-split { grid-template-columns: minmax(0, 1fr) 460px; }
@media (max-width: 1200px) { .ts-split { grid-template-columns: minmax(0, 1fr) 400px; } }
/* modalità "collega passi": card evidenziate + hint + chip collegamenti leggibili */
.ts-scard.linkable:hover { outline: 2px solid var(--primary); outline-offset: -1px; }
.ts-scard.linksrc { outline: 2px solid var(--primary); outline-offset: -1px; background: var(--surface); }
.ts-linkhint { background: rgba(111, 143, 208, .14); border: 1px solid var(--primary); border-radius: 8px;
               padding: 6px 10px; margin: 0 0 8px; font-size: var(--fs-caption); color: var(--text); }
/* palette comandi del diagramma (icone, sopra il canvas) — riusa .tb-group/.tbi */
.ts-palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
/* pannello INFO guasto: una card per area con accento colore a sinistra */
.ts-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ts-info-card { padding: 8px 10px 10px; border-radius: 9px; background: var(--surface);
                border: 1px solid var(--border); border-left: 3px solid var(--border); }
.ts-info-card .label { margin-bottom: 4px; }
.ts-info-card.acc-symp { border-left-color: #6f8fd0; }   /* sintomo — periwinkle */
.ts-info-card.acc-cause { border-left-color: #d8923a; }  /* causa — arancio */
.ts-info-card.acc-res { border-left-color: #1f9d5c; }    /* come risolvere — verde */
.ts-info-card.acc-corr { border-left-color: #2a4d77; }   /* correttive — navy */
.ts-info-sum { font-weight: 400; color: var(--muted-text); font-size: var(--fs-caption); }
@media (max-width: 900px) { .ts-info-grid { grid-template-columns: 1fr; } }
.ts-linkhint a { color: var(--primary); cursor: pointer; text-decoration: underline; margin-left: 6px; }
.ts-echips { display: flex; flex-direction: column; gap: 4px; }
.ts-erow2 { display: flex; align-items: center; gap: 6px; }
.ts-echip { flex: 1; min-width: 0; font-size: var(--fs-caption); padding: 4px 9px; border-radius: 999px;
            background: var(--surface-2); border: 1px solid var(--border);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-eans { color: var(--primary); font-weight: 700; }
/* ricerca impianto LIVE (autocomplete) nel modale Estrai troubleshooting */
.tsx-results { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; }
.tsx-results:empty { display: none; }
.tsx-row { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.tsx-row:last-child { border-bottom: 0; }
.tsx-row:hover { background: var(--surface-2); }
.tsx-code { font-weight: 700; color: var(--primary); }
.tsx-hint { padding: 7px 10px; color: var(--muted-text); font-size: var(--fs-caption); }
/* Pannello proposte: UNA sola scrollbar (non una per sezione) */
.ai2-sects { display: flex; flex-direction: column; gap: 12px; max-height: 74vh; overflow: auto; padding-right: 4px; }
.ai2-sect { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ai2-sects .ai-rows { max-height: none; overflow: visible; background: transparent; border: none;
                      box-shadow: none; padding: 0; }
.ai2-sect-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.ai2-den { font-weight: 600; line-height: 1.25; }
/* Categorie come TAB (Componenti/Manutenzioni/Ricambi): scroll isolato per categoria */
.ai2-cats { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.ai2-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; cursor: pointer;
           border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -2px;
           font-weight: 700; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
           color: var(--muted-text); }
.ai2-cat:hover { background: var(--surface-2); }
.ai2-cat.on { background: var(--surface); border-color: var(--border); border-bottom: 2px solid var(--surface); color: inherit; }
.ai2-cat-n { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 0 7px;
             font-size: var(--fs-caption); font-weight: 800; }
.ai2-cat.on .ai2-cat-n { background: var(--primary); color: #fff; border-color: transparent; }
.ai2-cat-ok { color: var(--st-verde); font-size: var(--fs-caption); font-weight: 800; }
.ai2-cat-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 22px; }
.ai2-catlist { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow: auto; padding-right: 4px; }
.ai2-catlist { scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.ai2-catlist::-webkit-scrollbar { width: 12px; }
.ai2-catlist::-webkit-scrollbar-track { background: #d7e2f1; border-radius: 8px; }
.ai2-catlist::-webkit-scrollbar-thumb { background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.ai2-catlist::-webkit-scrollbar-thumb:hover { background: #5f78a3; }
/* Filtro foglie: pulsante top-right + popover con segmenti tri-stato */
.ai2-filterhost { margin-left: auto; position: relative; }
.ai2-fbtn { display: inline-flex; align-items: center; gap: 6px; }
.ai2-fbtn.active { border-color: var(--primary); color: var(--primary); }
.ai2-fbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
              padding: 0 4px; border-radius: 9px; background: var(--primary); color: #fff;
              font-size: 11px; font-weight: 800; }
.ai2-fpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 280px;
            background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
            box-shadow: 0 12px 30px rgba(22, 51, 92, .22), inset 0 1px 0 rgba(255, 255, 255, .7); }
.ai2-fpop[hidden] { display: none; }
.ai2-fpop-h { font-size: var(--fs-caption); color: var(--muted-text); font-weight: 700;
              text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.ai2-facet { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; }
.ai2-facet-lbl { font-weight: 600; white-space: nowrap; }
.ai2-seg3 { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.ai2-seg { padding: 4px 12px; background: transparent; border: none; border-left: 1px solid var(--border);
           cursor: pointer; font-size: var(--fs-caption); font-weight: 600; color: inherit; }
.ai2-seg:first-child { border-left: none; }
.ai2-seg:hover { background: var(--surface-2); }
.ai2-seg.on { background: var(--primary); color: #fff; }
.ai2-fpop-foot { display: flex; justify-content: flex-end; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.ai2-b { font-size: var(--fs-caption); background: var(--surface-2); border: 1px solid var(--border);
         border-radius: 6px; padding: 0 5px; margin-left: 2px; white-space: nowrap; }
.ai2-node.sel .ai2-b { background: rgba(255, 255, 255, .18); border-color: transparent; }
.ai2-nest { color: var(--muted-text); }
.ai2-panel { min-width: 0; }
.ai2-panel .ai-gcol { max-height: 74vh; overflow: auto; }
.ai-src-txt { padding: 8px 10px; font-size: var(--fs-caption); color: var(--muted-text);
              border-bottom: 1px solid var(--border); background: var(--surface); }
.chip-ei { color: #c96f1e; border-color: rgba(201, 111, 30, .5); font-weight: 700; }
.chip-ui { color: var(--st-giallo); border-color: rgba(168, 135, 10, .5); font-weight: 700; }
/* PDF collassabile (Fase 1) */
.ai-split.pdf-collapsed { grid-template-columns: 1fr; }
.ai-split.pdf-collapsed .ai-pdf { display: none; }
.ai-pdf-toggle { position: sticky; top: 8px; }

/* ── REPORT dell'analisi: l'esito del lavoro, non una riga di servizio ── */
.ai2-report { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius-md); padding: 10px 12px; margin: 8px 0 10px; }
.ai2-rep-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai2-rep-n { font-size: var(--fs-h5); font-family: var(--font-display); }
.ai2-rep-n b { font-size: var(--fs-h4); }
.ai2-rep-split { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--muted-text); }
.ai2-rep-split span { white-space: nowrap; }
.ai2-rep-meta { font-size: var(--fs-caption); color: var(--muted-text); }
.ai2-rep-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* dettaglio di COME è stato letto: chiuso di default, si apre a richiesta */
.ai2-rep-toggle { display: flex; align-items: center; gap: 8px; width: 100%;
                  margin-top: 8px; padding: 6px 0 0; background: none; border: none;
                  border-top: 1px solid var(--border); cursor: pointer;
                  color: var(--text); font: 600 var(--fs-sm)/1.3 var(--font-ui); text-align: left; }
.ai2-rep-toggle:hover { color: var(--primary); }
.ai2-rep-toggle.warn .ai2-rep-warn { color: var(--st-arancio); font-weight: 700; }
.ai2-chev { color: var(--muted-text); }
.ai2-rep-note { display: grid; gap: 4px; margin-top: 8px; }
.ai2-rep-li { font-size: var(--fs-sm); color: var(--muted-text); padding-left: 14px;
              position: relative; }
.ai2-rep-li::before { content: "—"; position: absolute; left: 0; color: var(--border); }
.ai2-rep-li.warn { color: var(--st-arancio); }
.ai2-rep-li.warn::before { content: "⚠"; color: var(--st-arancio); }

/* ── Striscia delle analisi: compatta, si apre a richiesta ── */
.ai2-strip { display: flex; align-items: center; gap: 8px; width: 100%;
             background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-md); padding: 7px 10px; cursor: pointer;
             font: 600 var(--fs-sm)/1.2 var(--font-ui); color: var(--text); text-align: left; }
.ai2-strip:hover { border-color: var(--accent); }
.ai2-strip.run { border-left: 3px solid var(--primary); }
.ai2-s-lbl { font-family: var(--font-display); text-transform: uppercase;
             letter-spacing: .03em; color: var(--muted-text); }
.ai2-s-run { color: var(--primary); }
.ai2-s-ok { color: var(--st-verde); }
.ai2-s-err { color: var(--danger); }
.ai2-s-sep { color: var(--border); }
.ai2-s-bar { display: inline-block; width: 80px; height: 5px; border-radius: 4px;
             background: var(--surface-3); overflow: hidden; border: 1px solid var(--border); }
.ai2-s-bar .ai2-bar-fill { display: block; height: 100%; }
.ai2-jobs-list { margin-top: 8px; }

/* Vassoio dei job (coda globale Fase 2/3) */
.ai2-jobs { margin: 0 0 12px; }
.ai2-jobs:empty { display: none; }
.ai2-jobs-h { font-size: var(--fs-caption); color: var(--muted-text); font-weight: 700;
              text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.ai2-jobs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ai2-job { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
           border-radius: 8px; padding: 8px 10px; }
.ai2-job.done { border-left-color: var(--st-verde); }
.ai2-job.cancelled { border-left-color: var(--muted-text); opacity: .7; }
.ai2-job.error { border-left-color: var(--danger); }
.ai2-job-top { display: flex; align-items: center; gap: 8px; }
.ai2-job-leaf { font-weight: 700; font-family: var(--font-display); text-transform: uppercase;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ai2-job-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai2-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 6px 0 3px;
           border: 1px solid var(--border); }
.ai2-bar-fill { height: 100%; width: 40%; border-radius: 4px; background: var(--primary);
                animation: ai2move 1.2s ease-in-out infinite; }
@keyframes ai2move { 0% { margin-left: -42%; } 100% { margin-left: 102%; } }
@media (prefers-reduced-motion: reduce) { .ai2-bar-fill { animation: none; width: 100%; opacity: .5; } }

/* ── Viste proposte AI: Albero (gruppi) + Grafo (colonne) ── */
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; display: inline-block; }
.ai-quads { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ai-quads .quadrotto { cursor: pointer; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
                       background: var(--surface); font-weight: 700; font-size: var(--fs-caption);
                       border-left-width: 4px; }
.ai-quads .quadrotto.empty { opacity: .4; }
.ai-quads .quadrotto.on { background: var(--primary); color: #fff; }
.ai-tgroup { margin: 0 0 8px; }
.ai-tgroup-h { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer;
               background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.ai-tgroup-h b { font-family: var(--font-display); }
.ai-tgroup-chev { margin-left: auto; transition: transform var(--speed); }
.ai-tgroup.collapsed .ai-tgroup-body { display: none; }
.ai-tgroup.collapsed .ai-tgroup-chev { transform: rotate(-90deg); }
.ai-tgroup-body { padding: 8px 0 2px 10px; }
.ai-sgroup { margin: 0 0 8px; border-left: 2px solid var(--border); padding-left: 8px; }
.ai-sgroup-h { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.ai-sgroup-body { display: flex; flex-direction: column; gap: 6px; }
/* Grafo: colonne per macrogruppo, scorrimento orizzontale */
.ai-gcols { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.ai-gcol { flex: 0 0 300px; background: var(--surface-3); border: 1px solid var(--border);
           border-radius: 10px; padding: 8px; }
.ai-gcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.ai-gcol-h b { font-family: var(--font-display); }
.ai-gcol-grp { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.ai-gcol-grp > .cell-sub { position: sticky; top: 0; }
/* pallini macrogruppo (colori ESWBS 100–900) */
.ai-macro-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 12px; }
.ai-macro-dot.m0 { background: #8aa4cf; } .ai-quads .quadrotto.m0 { border-left-color: #8aa4cf; }
.ai-macro-dot.m1 { background: #6f8fd0; } .ai-quads .quadrotto.m1 { border-left-color: #6f8fd0; }
.ai-macro-dot.m2 { background: #3ec07a; } .ai-quads .quadrotto.m2 { border-left-color: #3ec07a; }
.ai-macro-dot.m3 { background: #e0a020; } .ai-quads .quadrotto.m3 { border-left-color: #e0a020; }
.ai-macro-dot.m4 { background: #d8323a; } .ai-quads .quadrotto.m4 { border-left-color: #d8323a; }
.ai-macro-dot.m5 { background: #e0457b; } .ai-quads .quadrotto.m5 { border-left-color: #e0457b; }
.ai-macro-dot.m6 { background: #9b6fd0; } .ai-quads .quadrotto.m6 { border-left-color: #9b6fd0; }
.ai-macro-dot.m7 { background: #20b0c0; } .ai-quads .quadrotto.m7 { border-left-color: #20b0c0; }
.ai-macro-dot.m8 { background: #c96f1e; } .ai-quads .quadrotto.m8 { border-left-color: #c96f1e; }
.ai-macro-dot.m9 { background: #7f9bc4; } .ai-quads .quadrotto.m9 { border-left-color: #7f9bc4; }
/* Albero proposte (riusa .trow/.tnode/.tkids/.chev della Config) */
.ai-treewrap { overflow: auto; max-height: 74vh; padding: 6px 8px; }
.ai-treewrap .trow { gap: 8px; }
.ai-grouprow { cursor: pointer; background: var(--surface-2); border-radius: 6px; }
.ai-grouprow b, .ai-treecode { font-family: var(--font-display); }
.ai-treecode { min-width: 58px; }
/* l'ellissi richiede nowrap: senza, il testo va a capo e la riga si gonfia */
.ai-treename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.ai-leafrow { border-left: 3px solid transparent; }
.ai-leafrow.confirmed { border-left-color: var(--st-verde); }
.ai-leafrow.rejected { opacity: .5; border-left-color: var(--danger); }
.ai-leafrow.sel, .ai-pcard.sel { box-shadow: 0 0 0 2px var(--primary); border-radius: 6px; }
.ai-leafrow .ai-code { width: 84px; min-height: 0; padding: 3px 6px; font-size: var(--fs-caption); font-weight: 700; }
/* Card proposta nel Grafo (riusa .gcard/.gnode/.gkids/.gbranch/.gkid-btn) */
.ai-gcode { cursor: pointer; }
.ai-pcard.confirmed { border-left: 3px solid var(--st-verde); }
.ai-pcard.rejected { opacity: .55; border-left: 3px solid var(--danger); }

/* ── Effetto "OLED"/3D (PO 2026-06-12): le superfici GALLEGGIANO sul
   fondo — filo di luce sul bordo alto + doppia ombra, come le card del
   grafo. Hover = lift sulle badge-card (non sui ghost). */
.cn-panel, .card, .table-wrap, .badge-card:not(.ghost),
.modal, #cn_drawer .drawer, .sugg {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 1px 2px rgba(22, 51, 92, .08),
              0 10px 24px rgba(22, 51, 92, .10);
}
.badge-card:not(.ghost) {
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.badge-card:not(.ghost):hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
              0 0 0 1px rgba(111, 143, 208, .25),
              0 14px 30px rgba(22, 51, 92, .16);
}

/* ── SOPRA la griglia (PO): la texture non passa MAI attraverso controlli
   e scritte. Controlli a fondo PIENO; scritte libere con ALONE del colore
   di fondo (token --halo: trasparente dentro le superfici, dove non serve) */
.chip, .quadrotto, .btn-ghost, .gkid-btn { background: var(--surface); }
#content { --halo: var(--bg); }
.cn-panel, .card, .table-wrap, .badge-card, .gwrap, .modal,
#cn_drawer .drawer, .gcard, .sugg { --halo: transparent; }
.muted, .label, h1, h2, h3 {
  text-shadow: 0 0 4px var(--halo, transparent), 0 0 8px var(--halo, transparent),
               0 0 12px var(--halo, transparent);
}
/* l'alone serve SOLO alle scritte libere sulla pagina: controlli, tabelle,
   menu e rail non lo ereditano (niente bagliori sui testi dei bottoni) */
.btn, .chip, .quadrotto, .gkid-btn, .vsw, .fchip, .fbadge,
.tb-menu .row-menu-btn, table.data, .row-menu .menu, .tab, .drw-row,
.ghost-bar, .ui-toast {
  text-shadow: none;
}

/* ── RISCANSIONE IN CORSO ────────────────────────────────────────────
   Le riscansioni mirate sono sincrone: senza un segnale l'operatore vede
   solo un toast e poi il nulla per un minuto, e non sa NEMMENO su quali
   voci sta lavorando. Qui: una barra fissa che dice cosa sta girando e le
   righe coinvolte marcate, cosi il collegamento e visibile a colpo d'occhio. */
.ai-busy {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--rail); color: #fff; border: 1px solid #2a4d77;
  border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font-size: var(--fs-small);
}
.ai-busy .spin {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* riga/card in corso di riscansione */
.ai-rescanning {
  outline: 2px solid #6f8fd0; outline-offset: -2px;
  animation: ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse { 0%,100% { outline-color: #6f8fd0; } 50% { outline-color: rgba(111,143,208,.25); } }
@media (prefers-reduced-motion: reduce) {
  .ai-busy .spin, .ai-rescanning { animation: none; }
}

/* ── Evidenziazione della proposta SELEZIONATA in STRUTTURA ──────────
   `.ai-row.sel` copriva solo la vista a lista: nelle viste ALBERO
   (`.trow.ai-leafrow`) e GRAFO (`.gcard.ai-pcard`) la riga cliccata non
   aveva alcuno stile, quindi l'evidenziazione "spariva" cambiando vista.
   Si usa outline + offset invece del bordo: le righe dell'albero sono
   compatte e un bordo verrebbe coperto dalla riga adiacente. */
.trow.ai-leafrow.sel {
  outline: 2px solid var(--accent); outline-offset: -1px;
  background: var(--surface-2); position: relative; z-index: 1;
}
.gcard.ai-pcard.sel { outline: 2px solid var(--accent); outline-offset: 1px; }