/* ============================================================
   Nexus Design System - shell applicativa (layer 4, tema v2)
   Telaio navy a tre colonne: rail a tile 76px col marchio in testa,
   contenuto sul foglio incassato, colonna delle azioni sul bordo
   destro. Niente topbar (2026-08-25): un solo contenitore di
   scroll, e tutta l'altezza al contenuto. Copre
   NexusMainFormTemplateComponent.razor, NexusNavRailComponent.razor
   e NexusLogo.razor.

   Come per nexus-components.css: nessun selettore .dxbl-* qui;
   dove serve piegare un componente DevExpress si passa da una
   sua variabile, dichiarata su una classe .nx-*.
   Carica DOPO nexus-components.css.
   ============================================================ */

/* ---- griglia della shell ---------------------------------- */
.nx-shell {
  --nx-content-padding: 24px;
  /* IL FONDO DELLA PAGINA E' PIU' STRETTO DEI FIANCHI (2026-08-28).
     Sotto il contenuto di una vista si sommavano tre fasce che nessuno
     usa: 24px di padding del contenitore delle schede, 16 del padding
     inferiore dello scroller XAF (.nx-page-body) e 16 del telaio navy —
     56px in cui, su una pagina che finisce con una barra di pulsanti, si
     legge solo vuoto (segnalazione dell'utente, sul wizard delle viste).
     Le prime due scendono a 8: 24px recuperati da OGNI pagina del
     portale, sopra la riga di respiro che serve davvero. Il telaio e' 16
     ai lati e, dal 2026-09-30, 6 sopra e sotto (--nx-canvas-pad-y, su
     richiesta dell'utente: piu' altezza al foglio).
     Chi calcola un'altezza sul viewport (`calc(100vh - Npx)`: hub delle
     viste, Review Center, cataloghi, chat, scheda documento) sconta queste
     fasce: quei numeri sono scesi di 24, e il 2026-09-30 di altri 20. */
  --nx-content-padding-bottom: var(--nexus-space-2);
  --nx-content-max-width: 1560px;

  display: grid;
  /* Una riga sola, tre colonne (2026-08-25: la topbar non esiste piu' e
     il contenuto si riprende i suoi 56px). La prima colonna e' `auto`:
     la colonna di navigazione si allarga da sola quando il menu passa
     all'assetto esteso (76px -> 208px), col marchio in testa che segue.
     La terza e' la colonna delle azioni (notifiche, account, assistente
     in verticale), anche lei `auto`. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  /* Il telaio navy arriva da .nx-canvas (tema v2, doc 13 par. 12), che
     carica dopo e porta anche padding e gap del telaio. */
  background: var(--nx-canvas);
  color: var(--nexus-text-primary);
  font-family: var(--nexus-font-family);
  font-size: var(--nexus-fs-body);
  line-height: var(--nexus-lh-body);
}

/* ---- colonna di navigazione --------------------------------
   Due stadi affiancati (doc 13 par. 12): il rail dei gruppi (76px,
   sempre visibile) e, quando una sezione e' aperta, il drawer con le
   sue voci. Vive nel telaio navy; il gap col foglio lo da' .nx-canvas. */
.nx-nav-col {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  position: relative;               /* riferimento della maniglia */
}

/* Maniglia comprimi/espandi (doc 13 par. 12): il SOLO chevron sul bordo
   verso il contenuto, a meta' altezza nel gap del telaio — niente fondo
   ne' bordo (revisione dell'utente sulla pillola: da bottone era troppo
   marcata). L'area cliccabile resta la pillola 18x64, invisibile. */
.nx-nav-handle {
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  z-index: 5;
  width: 18px;
  height: 64px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--nx-on-canvas-muted);
  cursor: pointer;
  opacity: .75;
}

.nx-nav-handle:hover {
  opacity: 1;
  color: var(--nx-on-canvas);
}

.nx-nav-handle:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--nx-bracket-color);
}

/* Il rail (nx-rail / nx-rail-item, nexus-v2-tokens.css): niente
   superficie propria. I tile sono le sole macro-sezioni; assistente e
   account in fondo. */
.nx-rail-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-items: center;
}

.nx-rail-col__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;            /* il rail non mostra scrollbar */
}

/* Marchio in testa alla colonna di navigazione (2026-08-25: la topbar non
   esiste piu'). L'altezza e' fissa e uguale nei due assetti, cosi' i tile
   non saltano quando il menu si allarga e il lockup prende il posto
   dell'icona. Sul compatto e' centrato come i tile; align-self: stretch
   perche' .nx-rail-col centra i figli e qui la larghezza serve intera. */
.nx-rail-brand {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}

/* Nell'esteso il marchio si INCOLONNA con le icone delle righe (richiesta
   dell'utente 2026-08-25 sera): bordo sinistro del lockup sul bordo
   sinistro delle icone — 8px di padding di .nx-rail--wide + 10px della
   riga. */
.nx-rail-brand--wide {
  justify-content: flex-start;
  padding-left: 18px;
}

/* In testa alla colonna il marchio e' l'insegna, non una voce: un filo
   piu' grande della misura storica da topbar (--nx-logo-mark, 32px). */
.nx-rail-brand .nx-logo { height: 36px; }
.nx-rail-brand .nx-logo--icon { width: 36px; }

/* Ricerca nel menu (doc 13 par. 62): solo nell'esteso, ferma tra marchio
   e voci. Larga quanto le righe (208px - 2x8px di padding del rail),
   inchiostri on-canvas: e' parte della colonna scura, non un campo del
   foglio. La lente si incolonna con le icone delle righe. */
.nx-rail-search {
  flex: 0 0 auto;
  position: relative;
  width: 192px;
  margin: 2px 8px 6px;
}

.nx-rail-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--nx-on-canvas-muted);
  pointer-events: none;
}

.nx-rail-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px 7px 32px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--nx-canvas-hover);
  color: var(--nx-on-canvas);
  font-family: inherit;
  font-size: var(--nexus-fs-body-sm);
  outline: none;
}

.nx-rail-search__input::placeholder { color: var(--nx-on-canvas-muted); }

.nx-rail-search__input:focus {
  border-color: var(--nx-bracket-color);
}

.nx-rail-search__empty {
  padding: 10px;
  color: var(--nx-on-canvas-muted);
  font-size: var(--nexus-fs-body-sm);
}

/* Nei risultati l'intestazione e' il gruppo, non un blocco: si allinea
   al testo delle voci radice (38px come i blocchi) e non serve l'aria
   sopra il primo. */
.nx-rail-section--search:first-child { padding-top: 2px; }

/* L'account sta nella colonna delle azioni sul bordo destro (dal
   2026-08-25; dal 2026-08-09 al 2026-08-25 era in topbar). Il menu si
   ancora al bottone: serve un riferimento posizionato, ed e' .nx-account. */
.nx-account { position: relative; }

/* Bottone-icona della colonna delle azioni (account, notifiche,
   assistente — in quest'ordine, dall'alto in basso): sola icona, tondo,
   con gli inchiostri on-canvas del rail. */
.nx-topbtn {
  position: relative;                /* ancora del badge dei non letti */
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nx-on-canvas-muted);
  cursor: pointer;
  transition: background-color var(--nexus-transition-fast),
              color var(--nexus-transition-fast);
}

.nx-topbtn:hover {
  background: var(--nx-canvas-hover);
  color: var(--nx-on-canvas);
}

.nx-topbtn.nx-active {
  background: var(--nx-canvas-active);
  color: var(--nx-on-canvas);
}

.nx-topbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nx-bracket-color);
}

/* La chat di contesto (Progettista, Configurazione guidata) compare solo
   sulle schede che ne hanno una: l'icona e' nel teal della suite in ogni
   stato, cosi' si nota quando c'e' (richiesta utente 2026-09-29). Il tondo
   di hover e attivo resta quello comune. */
.nx-topbtn.nx-topbtn--context,
.nx-topbtn.nx-topbtn--context:hover,
.nx-topbtn.nx-topbtn--context.nx-active {
  color: var(--nx-teal);
}

/* Badge dei non letti sulla campanella: in alto a destra del tondo (qui
   non c'e' la parentesi teal che nel vecchio rail reclamava
   quell'angolo). */
.nx-topbtn__badge {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--nx-bracket-color, #14b8a6);
  color: #06202a;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* I tile sono <button>: si azzera la veste nativa, il resto viene
   da .nx-rail-item (nexus-v2-tokens.css). */
.nx-rail-item {
  border: 0;
  background: none;
  font-family: inherit;
  text-align: center;
}

.nx-rail-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nx-bracket-color);
}

/* Icona monocroma on-canvas: XafImage (verificato a runtime su 26.1.3)
   rende un div con mask-image + background-color: currentColor, quindi
   l'icona segue da sola il colore del tile (muted inattivo, bianco
   sull'attivo, da .nx-rail-item). Nessun filtro necessario. */
.nx-rail-item__icon { display: grid; place-items: center; height: 20px; }

/* Anche sul tile compatto l'etichetta si legge INTERA, su piu' righe: era
   troncata coi puntini e di due voci simili restava lo stesso moncone
   (richiesta utente 2026-08-20). Il tile cresce in altezza quanto serve. */
.nx-rail-item__label {
  max-width: calc(var(--nx-nav-tile-w) - 8px);
  white-space: normal;
  /* Prima la sillabazione della lingua della pagina (<html lang>), e solo
     se non basta la rottura in un punto qualunque: «Consultazi / one» e
     «Amministr / azione» si leggevano male (collaudo 13/10/2026, KO-01-4). */
  hyphens: auto;
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: center;
}

/* ---- fisarmonica della navigazione (doc 13 par. 12) ---------
   Le voci della sezione aperta si estendono SOTTO la sua categoria,
   nella stessa colonna scura: nessun pannello separato. Con una
   sezione aperta la colonna passa all'assetto esteso (.nx-rail--wide,
   righe icona + caption); richiudendola torna al rail compatto. */
/* .nx-rail.nx-rail--wide: la doppia classe serve perche' .nx-rail
   (nexus-v2-tokens.css) carica DOPO questo foglio e a pari specificita'
   vincerebbe lui, tenendo la colonna a 76px. */
.nx-rail.nx-rail--wide {
  width: 208px;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px;
}

.nx-rail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--nx-on-canvas-muted);
  font-family: inherit;
  font-size: var(--nexus-fs-body-sm);
  text-align: left;
  cursor: pointer;
  position: relative;
}

.nx-rail-row:hover { background: var(--nx-canvas-hover); }

.nx-rail-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nx-bracket-color);
}

/* Categoria che contiene la vista corrente: si accende il testo, la
   parentesi resta alla voce esatta. */
.nx-rail-row.nx-active {
  color: var(--nx-on-canvas);
  font-weight: var(--nexus-fw-semibold);
}

/* Voce della sezione aperta: rientrata sotto la categoria. */
.nx-rail-row--leaf { padding-left: 38px; }

.nx-rail-row--leaf.nx-active {
  background: var(--nx-canvas-active);
  color: var(--nx-on-canvas);
  font-weight: var(--nexus-fw-semibold);
}

/* Intestazione di un blocco dentro la sezione (doc 13 par. 61, D218; dal
   2026-10-30 apre e chiude il blocco, sotto), allineata al testo della sezione che la contiene
   (38px), un gradino sopra le voci rientrate, nel registro delle
   etichette di gruppo della galleria delle viste: maiuscoletto piccolo,
   colore attenuato, un po' d'aria sopra. */
.nx-rail-section {
  padding: 10px 10px 2px 38px;
  color: var(--nx-on-canvas-muted);
  font-size: var(--nexus-fs-caption, 11px);
  font-weight: var(--nexus-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  user-select: none;
}

/* Dal 2026-10-30 l'intestazione del blocco e' un pulsante che apre e chiude
   le sue voci (doc 13 par. 61.1): stesso registro di etichetta, piu' il
   chevron nella colonna di quello della sezione (stesso margine destro, 14px).
   Niente fondo al passaggio: l'etichetta si accende e basta, come un titolo. */
.nx-rail-section--toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.nx-rail-section--toggle:hover,
.nx-rail-section--toggle.nx-active {
  color: var(--nx-on-canvas);
  opacity: 1;
}

.nx-rail-section--toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nx-bracket-color);
}

.nx-rail-section__label { flex: 1 1 auto; min-width: 0; }

.nx-rail-section__chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.nx-rail-row--leaf.nx-active::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: var(--nx-bracket-size);
  height: var(--nx-bracket-size);
  border-top: var(--nx-bracket-w) solid var(--nx-bracket-color);
  border-right: var(--nx-bracket-w) solid var(--nx-bracket-color);
}

.nx-rail-row__icon { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; }

/* L'etichetta va a capo: i titoli delle voci sono contenuto del tenant
   (le viste pubblicate, doc 32) e "Righe ordine cliente" non sta su una
   riga sola. Troncare con i puntini nascondeva proprio la parte che
   distingue due voci simili — richiesta dell'utente 2026-08-20, e vale per
   TUTTE le voci del rail, non solo per le viste. */
.nx-rail-row__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* Il chevron dice che la riga apre/chiude la categoria. */
.nx-rail-row__chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  opacity: .7;
}

/* ---- colonna principale ----------------------------------- */
.nx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* Nessun gap: il respiro attorno al foglio lo da' il gap della
     griglia di .nx-canvas. */
}

/* Palcoscenico: i FOGLI affiancati nel telaio - quello della vista e,
   quando e' aperto, quello del pannello dell'assistente (doc 13 par. 25).
   Il pannello e' una colonna vera e non un overlay: il contenuto si
   stringe, non ci finisce sotto. Il gap e' quello del telaio, cosi' il
   canale navy fra i due fogli e' identico a quello sui bordi.
   Quando il pannello e' chiuso il componente non rende nulla: qui resta
   una riga flex con un figlio solo, cioe' il layout di prima. */
.nx-stage {
  position: relative;                /* ancora dei pannelli in sorvolo */
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  gap: var(--nx-canvas-pad);
}

.nx-stage > .nx-content { flex: 1 1 auto; min-width: 0; }

/* Colonna delle azioni sul bordo destro (2026-08-25: al posto della
   topbar). Vive nel telaio navy come il rail: fondo trasparente, testo
   chiaro con i token on-canvas, indipendenti dal tema. In alto le tre
   icone della shell, sotto le Action di sistema XAF (di norma vuote). */
.nx-actrail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nexus-space-2);
  min-height: 0;
  /* Nessun padding sopra (richiesta dell'utente 2026-08-25 sera): le
     icone partono dal bordo superiore del telaio, come il foglio del
     contenuto — non piu' centrate sull'altezza del marchio. */
  color: var(--nx-on-canvas);
  /* La colonna sta SOPRA gli strati del palcoscenico (scala z: vedi
     .nx-account__menu qui sotto): e' la scaffalatura della shell, e i
     suoi bottoni devono restare cliccabili anche col pannello
     dell'assistente in sorvolo — col sipario di quello (35) davanti, il
     primo clic sull'account lo mangiava il sipario e il bottone sembrava
     morto. Il contesto di stacking che nasce qui non e' un effetto
     collaterale: tiene insieme bottoni, siparii e popup della colonna. */
  position: relative;
  z-index: 45;
}

.nx-actrail__system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nexus-space-2);
}

/* Striscia della vista nel ramo non-TabbedMDI (oggi dormiente): senza
   topbar, Indietro e titolo stanno sopra il foglio, nel telaio navy. */
.nx-viewbar {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  flex: 0 0 auto;
  padding: 0 var(--nexus-space-2) var(--nexus-space-2);
  color: var(--nx-on-canvas);
}

.nx-breadcrumb {
  font-size: var(--nexus-fs-label);
  line-height: var(--nexus-lh-label);
  font-weight: var(--nexus-fw-medium);
  color: var(--nx-on-canvas);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gli icon button della shell dentro la colonna navy: colori on-canvas
   al posto di quelli da superficie chiara. */
.nx-actrail .nx-icon-btn { color: var(--nx-on-canvas-muted); }
.nx-actrail .nx-icon-btn:hover { background: var(--nx-canvas-hover); color: var(--nx-on-canvas); }
.nx-actrail .nx-icon-btn:focus-visible { color: var(--nx-on-canvas); }

/* Il pannello del menu account (.account-main.dropdown-menu) e' figlio
   DOM della colonna delle azioni ma e' una superficie chiara: il testo
   non deve ereditare il colore on-canvas. I pulsanti dentro sono
   ripristinati in nexus-v2-dx.css. */
.nx-actrail .dropdown-menu { color: var(--nx-text); }

/* ---- contenuto: unico scroll verticale della pagina -------- */
.nx-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--nexus-background);
}

.nx-content__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* TabbedMDI: la striscia di tab resta in alto, il contenuto della
   scheda scorre al suo interno (lo scroll e' della singola scheda). */
.nx-content__tabs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--nexus-space-3) var(--nx-content-padding) var(--nx-content-padding-bottom);
}

.nx-content__tabs > * { min-height: 0; }

.nx-content__inner {
  max-width: var(--nx-content-max-width);
  margin: 0 auto;
  padding: var(--nx-content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--nexus-space-4);
}

/* ---- page header delle schede TabbedMDI (task 5) -----------
   Vive nel NexusDetailFormTemplateComponent, sopra .main-content:
   resta fermo mentre il contenuto della scheda scorre. */
.nx-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nexus-space-4);
  flex: 0 0 auto;
  padding: var(--nexus-space-3) 0 var(--nexus-space-3);
}

/* In TabbedMDI l'identita' della pagina e' la scheda selezionata: qui
   restano solo le Action (doc 13 par. 19). Il DxToolbar dimensiona i
   pulsanti sullo spazio del contenitore: senza larghezza collasserebbe
   tutto nell'overflow "...". */
.nx-page-header__actions { flex: 1 1 auto; min-width: 0; }

/* Il corpo della scheda: lo scroller e' .main-content (aggancio XAF), che
   porta un padding suo (8 sopra, 16 sotto). Quei 16 sono l'ULTIMO pezzo
   della fascia vuota sotto il contenuto: si riducono qui, dove la fascia si
   governa tutta (vedi --nx-content-padding-bottom). */
.nx-page-body { min-height: 0; }

/* Il padding lo scrive XAF sulla sua `.main-content`, e non con una riga
   sola: c'e' `.main-content.xaf-flex-auto` (0.5rem) e sopra di lei
   `.dxbl-theme-fluent .main-content.xaf-flex-auto` (1rem), che e' quella che
   vale davvero sul tema in uso. Misurato su TEST, in due giri: la regola
   scritta come `.nx-page-body { … }` non ha avuto NESSUN effetto, e nemmeno
   `.main-content.nx-page-body` — restava 16px. Per stare sopra la riga del
   tema serve la stessa forma, col `body` davanti a scanso di pareggi. */
body.dxbl-theme-fluent .main-content.nx-page-body {
  padding-bottom: var(--nexus-space-2);
}

/* La toolbar della vista resta agganciata in alto mentre il
   contenuto scorre (ramo non-TabbedMDI; in TabbedMDI c'e' il
   page header qui sopra). */
.nx-view-toolbar {
  position: sticky;
  top: calc(-1 * var(--nx-content-padding));
  z-index: 2;
  margin: calc(-1 * var(--nx-content-padding)) calc(-1 * var(--nx-content-padding)) 0;
  padding: var(--nexus-space-3) var(--nx-content-padding);
  background: var(--nx-sheet);      /* copre lo scroll sul foglio v2 */
}

.nx-view-toolbar:empty { display: none; }

/* ---- menu dell'account (colonna delle azioni, bordo destro) ----
   Superficie chiara sul telaio navy: e' un pannello, non parte della
   colonna. Si ancora AL FIANCO del bottone e si apre verso sinistra
   (2026-08-25: le icone sono in verticale sul bordo destro, sotto il
   bottone non c'e' piu' spazio suo).

   SCALA z DELLA SHELL (2026-08-25 sera, difetto visto dall'utente: col
   pannello dell'assistente aperto il menu dell'account gli finiva
   DIETRO). I popup della colonna delle azioni stanno SOPRA ogni strato
   del palcoscenico: il foglio dell'assistente arriva a 40 — in sorvolo,
   e anche affiancato sotto i 900px, dove diventa un overlay a tutta
   pagina (chat.css) — mentre il menu stava a 30. Da qui:
     20/30/35/40  fogli e siparii del palcoscenico (Smart Panel);
     45           la colonna delle azioni per intero (.nx-actrail);
     48           siparii dei popup della colonna, dentro quel contesto;
     50           i popup stessi (account, notifiche).
   Sopra resta solo la chat a schermo intero (900), che copre anche la
   colonna delle azioni e quindi non compete con questi. */
.nx-account__menu {
  position: absolute;
  right: calc(100% + var(--nexus-space-2));
  top: 0;
  z-index: 50;
  width: 240px;
  padding: var(--nexus-space-2);
  border-radius: var(--nx-radius-card);
  background: var(--nx-surface);
  color: var(--nx-text);
  box-shadow: var(--nx-shadow-float);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

/* Il sipario prende tutta la finestra e sta SOTTO il menu ma SOPRA il
   palcoscenico: un clic fuori chiude, senza listener globali ne' interop
   — e "fuori" comprende il foglio dell'assistente, che col vecchio 20 si
   prendeva il clic per se' lasciando il menu aperto. */
.nx-account__scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: transparent;
}

.nx-account__user {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  padding: var(--nexus-space-2);
  border-bottom: 1px solid var(--nx-line-soft);
  margin-bottom: var(--nexus-space-1);
}

.nx-account__user-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nx-teal) 14%, transparent);
  color: var(--nx-teal-ink);
}

/* La foto del profilo (D259, doc 13 par. 64): un cerchio pieno al posto
   dell'icona, nel bottone della topbar e nella testata del menu. La foto
   salvata e' gia' quadrata; object-fit resta come rete se non lo fosse. In
   testata il cerchio cresce a 40px: a 32 una faccia non si riconosce. */
.nx-avatar {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.nx-topbtn .nx-avatar {
  width: 28px;
  height: 28px;
}

.nx-account__user-mark--photo {
  width: 40px;
  height: 40px;
  background: none;
}

.nx-account__user-mark--photo .nx-avatar {
  width: 40px;
  height: 40px;
}

.nx-account__user-name {
  min-width: 0;
  font-size: var(--nexus-fs-body-sm);
  font-weight: var(--nexus-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Credito personale del mese nel menu account (D68): un dato, non un
   comando — nessun hover, nessun cursore a mano. Il numero grande e' il
   RESIDUO, che e' la domanda vera ("posso ancora usarlo?"); la barra dice
   quanto se n'e' andato. */
/* Compatto (richiesta utente 2026-08-23): percentuale, etichetta e data di
   azzeramento su UNA riga, barra sottile sotto. Il menu dell'account e' un
   elenco di comandi, e un riquadro alto quanto tre voci si prendeva
   un'attenzione che non gli spetta. */
.nx-account__credit {
  display: grid;
  gap: 3px;
  padding: 6px var(--nexus-space-3) 7px;
  border-radius: var(--nexus-radius-md);
  background: var(--nexus-hover-surface);
  cursor: default;
}

.nx-account__credit-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.nx-account__credit-value {
  font-size: 0.9375rem;
  font-weight: var(--nexus-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.nx-account__credit-label {
  font-size: 0.72rem;
  color: var(--nx-text-muted);
  white-space: nowrap;
}

/* La data su una riga sua, sotto: sulla stessa riga dell'etichetta bastava
   uno schermo stretto perche' "credito rimanente" andasse a capo e la data
   restasse appesa in alto, disallineata. */
.nx-account__credit-reset {
  display: block;
  font-size: 0.68rem;
  color: var(--nx-text-muted);
  white-space: nowrap;
}

.nx-account__credit-bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--nx-text-muted) 25%, transparent);
  overflow: hidden;
}

.nx-account__credit-bar > span {
  display: block;
  height: 100%;
  background: var(--nx-teal);
}

.nx-account__credit--warn .nx-account__credit-bar > span { background: var(--nx-warning-ink, var(--nx-teal)); }
.nx-account__credit--warn .nx-account__credit-value { color: var(--nx-warning-ink, inherit); }
.nx-account__credit--bad .nx-account__credit-bar > span { background: var(--nx-danger-ink); }
.nx-account__credit--bad .nx-account__credit-value { color: var(--nx-danger-ink); }

.nx-account__item {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  width: 100%;
  padding: var(--nexus-space-2);
  border: 0;
  border-radius: var(--nexus-radius-md);
  background: transparent;
  color: var(--nx-text);
  font-family: inherit;
  font-size: var(--nexus-fs-body-sm);
  /* Difesa per una voce che fosse un <a> invece di un <button>: senza, si
     presenterebbe sottolineata in mezzo ai pulsanti. */
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--nexus-transition-fast);
}

.nx-account__item:hover { background: var(--nexus-hover-surface); }
.nx-account__item:focus-visible { outline: none; box-shadow: var(--nexus-focus-ring); }
.nx-account__item-icon { display: grid; place-items: center; color: var(--nx-text-muted); }
.nx-account__item--quit { color: var(--nx-danger-ink); }
.nx-account__item--quit .nx-account__item-icon { color: inherit; }

.nx-account__sep {
  height: 1px;
  margin: var(--nexus-space-1) 0;
  background: var(--nx-line-soft);
}

/* Il numero del rilascio in fondo al menu account: si legge quando serve,
   non compete con le voci cliccabili (nessun hover, testo attenuato). */
.nx-account__version {
  padding: var(--nexus-space-1) var(--nexus-space-3);
  font-size: 0.75rem;
  color: var(--nx-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* ---- icon button della shell ------------------------------ */
.nx-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--nexus-radius-md);
  background: transparent;
  color: var(--nexus-text-secondary);
  cursor: pointer;
  transition: background-color var(--nexus-transition-fast),
              color var(--nexus-transition-fast);
}

.nx-icon-btn:hover { background: var(--nexus-hover-surface); color: var(--nexus-text-primary); }
.nx-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--nexus-focus-ring);
  color: var(--nexus-text-primary);
}

/* ---- marchio (v2, doc 13 par. 18) --------------------------
   Il lockup e' un SVG (Templates/NexusLogo.razor) e non piu' una
   costruzione a bordi: la variante inversa porta gia' bianco e teal, quindi
   non serve nessun override per il telaio navy - e nessun filtro, che qui
   ucciderebbe l'unico accento teal ammesso.
   L'altezza segue --nx-logo-mark: nel file l'icona e' un quadrato e occupa
   tutta l'altezza del lockup, quindi vincolarla vincola l'icona. */
.nx-logo {
  display: block;
  flex: 0 0 auto;
  height: var(--nx-logo-mark);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sola icona (senza parola): resta quadrata. */
.nx-logo--icon { width: var(--nx-logo-mark); }

/* ---- responsive (desktop-first: 1920 -> 1440 -> tablet) ----
   Il rail da 76px resta visibile a ogni larghezza (decisione doc 13
   par. 12): niente drawer, niente hamburger, nessuno stato di shell. */
@media (max-width: 1280px) {
  .nx-shell { --nx-content-padding: 20px; }
}


/* ============================================================
   Smart Panel (doc 13 par. 28) — replicato dal Portal Platform.
   Le icone della shell (notifiche - account - assistente, .nx-topbtn)
   stanno nella colonna delle azioni sul bordo destro (2026-08-25; dal
   2026-08-09 al 2026-08-25 erano in topbar) e nello
   Smart Panel resta il solo dock dell'assistente, dentro .nx-stage:
   pinned = foglio AFFIANCATO alla vista (il contenuto si stringe);
   sorvolo = pannello assoluto sopra il foglio, col sipario che chiude
   al clic fuori. Il vestito dell'intestazione e' il telaio comune
   NexusSmartPanelShell.
   ============================================================ */

/* ---- popup delle notifiche (colonna delle azioni) ----------
   Un pannello come il menu account, non un widget: si apre AL FIANCO
   della campanella, verso sinistra (2026-08-25), si chiude col clic
   fuori (sipario trasparente) o aprendo una notifica. */
.nx-notifmenu { position: relative; }

.nx-notifmenu__scrim {
  position: fixed;
  inset: 0;
  z-index: 48;                       /* scala z della shell: vedi .nx-account__menu */
  background: transparent;
}

.nx-notifmenu__pop {
  position: absolute;
  right: calc(100% + var(--nexus-space-2));
  top: 0;
  z-index: 50;                       /* sopra il foglio dell'assistente (40) */
  width: min(420px, calc(100vw - 2 * var(--nx-canvas-pad)));
  max-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--nx-radius-card);
  background: var(--nx-surface);
  color: var(--nx-text);
  box-shadow: var(--nx-shadow-float);
  overflow: hidden;
}

.nx-notifmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nexus-space-2);
  padding: var(--nexus-space-2) var(--nexus-space-3);
  border-bottom: 1px solid var(--nx-line-soft);
}

.nx-notifmenu__title {
  font-size: var(--nexus-fs-body-sm);
  font-weight: var(--nexus-fw-semibold);
}

.nx-notifmenu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--nexus-space-2) var(--nexus-space-3) var(--nexus-space-3);
}

/* ---- telaio comune dei pannelli (NexusSmartPanelShell) ----- */

.nx-smart-panel { min-height: 0; }

/* Pinned: il pannello e' un normale figlio flex di .nx-stage, affiancato
   al foglio della vista — e' il comportamento storico del dock. */
.nx-smart-panel--pinned { position: relative; }

/* Sorvolo: il pannello esce dal flusso e copre il foglio dal bordo
   destro del palcoscenico; sotto c'e' il sipario che chiude al clic. */
.nx-smart-panel--overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  box-shadow: var(--nx-shadow-float);
}

.nx-smart__scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: transparent;
}

.nx-smart-panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  padding: var(--nexus-space-3) var(--nexus-space-3) var(--nexus-space-2);
  border-bottom: 1px solid var(--nx-line-soft);
}

.nx-smart-panel__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--nexus-radius-sm);
  background: color-mix(in srgb, var(--nx-teal) 14%, transparent);
  color: var(--nx-teal-ink);
}

.nx-smart-panel__title {
  margin: 0;
  font-size: var(--nexus-fs-label);
  line-height: var(--nexus-lh-label, 1.4);
  font-weight: var(--nexus-fw-semibold);
  color: var(--nx-text);
}

.nx-smart-panel__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Il pin acceso resta visibile anche a riposo: e' uno stato, non un hover. */
.nx-smart-panel__pin.nx-active {
  background: color-mix(in srgb, var(--nx-teal) 16%, transparent);
  color: var(--nx-teal-ink);
}

/* Chiudere non e' un'azione come le altre: un filo di stacco dalla fila. */
.nx-smart-panel__close { margin-left: var(--nexus-space-2); }

/* ---- elenco delle notifiche (nel popup della campanella) --- */

.nx-notif__markall {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--nexus-fs-caption);
  color: var(--nx-text-muted);
  cursor: pointer;
  text-decoration: underline;
}

.nx-notif__empty { margin: var(--nexus-space-2) 0; font-size: var(--nexus-fs-body-sm); color: var(--nx-text-muted); }

.nx-notif__item { list-style: none; }

.nx-notif__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Le righe respirano: attaccate erano un muro di testo (utente 2026-08-12) */
  gap: var(--nexus-space-2);
}

.nx-notif__open {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--nexus-space-2);
  border: 0;
  border-radius: var(--nexus-radius-md);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--nx-text);
}

.nx-notif__open:hover { background: var(--nexus-hover-surface); }

.nx-notif__item--unread .nx-notif__item-title { font-weight: var(--nexus-fw-semibold); }

.nx-notif__item--unread .nx-notif__open {
  box-shadow: inset var(--nx-bracket-w, 3px) 0 0 var(--nx-bracket-color, #14b8a6);
}

.nx-notif__item-title { font-size: var(--nexus-fs-body-sm); line-height: 1.35; }
.nx-notif__item-body { font-size: var(--nexus-fs-caption); line-height: 1.45; color: var(--nx-text-muted); white-space: pre-wrap; }
.nx-notif__item-when { margin-top: 2px; font-size: var(--nexus-fs-caption); color: var(--nx-text-muted); }