/* ============================================================
   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) */
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) var(--bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid var(--bg); }

/* 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; }
.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); }
/* 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); }

/* ── 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); }
.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: default; transition: border-color var(--speed); }
.badge-card:hover { border-color: var(--accent); }

/* 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 interattivo (drag&drop con vincolo di livello) */
.tnode { margin-left: 0; }
.tkids { margin-left: 22px; border-left: 1px solid var(--border); padding-left: 8px; }
.trow { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px;
        cursor: grab; font-size: var(--fs-sm); }
.trow: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); }
/* 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;
  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-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; }
/* 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); }
.gcard.ghost .gkid-btn { color: #2a5fb0; border-color: rgba(42, 77, 119, .45); }
.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);
}
/* 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; }
/* 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; }

/* 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; }
.ai-treename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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;
}