/* ============================================================
   Nexus Design System - shell applicativa (layer 4, tema v2)
   Telaio navy con rail a tile 76px sempre visibile - top bar 56px
   nel telaio - contenuto sul foglio incassato; un solo contenitore
   di scroll. 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-topbar-height: 56px;
  --nx-content-padding: 24px;
  --nx-content-max-width: 1560px;

  display: grid;
  grid-template-columns: var(--nx-nav-rail-w) 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 del rail --------------------------------------
   Il rail (nx-rail / nx-rail-item, nexus-v2-tokens.css) vive nel
   telaio navy: niente superficie propria. La colonna scorre se le
   voci superano l'altezza; il tile Impostazioni resta 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 */
}

.nx-rail-col__foot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: var(--nexus-space-2) 0;
}

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

/* Etichetta a una riga: caption lunghe troncate (tooltip sul tile). */
.nx-rail-item__label {
  max-width: calc(var(--nx-nav-tile-w) - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hairline tra i blocchi (gruppi del modello di navigazione). */
.nx-rail__sep {
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--nx-nav-divider);
  margin: var(--nexus-space-1) auto;
}

/* ---- colonna principale ----------------------------------- */
.nx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--nx-canvas-pad);        /* respiro tra topbar e foglio */
}

/* Tema v2: la topbar vive nel telaio navy, non e' una barra che taglia
   il foglio. Fondo trasparente (si vede il telaio), testo chiaro con i
   token on-canvas, indipendenti dal tema come la nav del design. */
.nx-topbar {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-4);
  height: var(--nx-topbar-height);
  flex: 0 0 auto;
  padding: 0 var(--nexus-space-5);
  background: transparent;
  color: var(--nx-on-canvas);
}

.nx-topbar__left {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  min-width: 0;
  overflow: hidden;
}

.nx-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--nexus-space-2);
  margin-left: auto;
  flex: 0 0 auto;
}

.nx-topbar__sep {
  width: 1px;
  height: 22px;
  background: var(--nx-nav-divider);
}

.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 topbar navy: colori on-canvas
   al posto di quelli da superficie chiara. */
.nx-topbar .nx-icon-btn { color: var(--nx-on-canvas-muted); }
.nx-topbar .nx-icon-btn:hover { background: var(--nx-canvas-hover); color: var(--nx-on-canvas); }
.nx-topbar .nx-icon-btn:focus-visible { color: var(--nx-on-canvas); }

/* Il pannello del menu account (.account-main.dropdown-menu) e' figlio
   DOM della topbar 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-topbar .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);
}

.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). */
.nx-page-body { min-height: 0; }

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

/* ---- 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 ---------------------------------------------- */
.nx-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  user-select: none;
}

.nx-logo__mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.nx-logo__corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 0 solid var(--nexus-primary);
}

.nx-logo__corner--tl { top: 0; left: 0;  border-top-width: 2px; border-left-width: 2px; }
.nx-logo__corner--bl { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.nx-logo__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
/* L'angolo in alto a destra e' sempre teal: regola di brand. */
.nx-logo__corner--tr {
  top: 0; right: 0;
  border-top-width: 2px; border-right-width: 2px;
  border-color: var(--nexus-accent);
}

.nx-logo__letter {
  font-family: var(--nexus-font-heading);
  font-weight: var(--nexus-fw-bold);
  font-size: 15px;
  line-height: 1;
  color: var(--nexus-primary);
}

.nx-logo__word { display: flex; flex-direction: column; min-width: 0; }

.nx-logo__word-main {
  font-family: var(--nexus-font-heading);
  font-weight: var(--nexus-fw-bold);
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.2em;
  color: var(--nexus-primary);
}

.nx-logo__word-sub {
  font-family: var(--nexus-font-heading);
  font-weight: var(--nexus-fw-semibold);
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 0.34em;
  color: var(--nexus-accent-text);
}

/* Variante on-canvas: nel top bar navy il lockup passa a bianco + teal
   (come nel prototipo v2), indipendente dal tema. */
.nx-topbar .nx-logo__corner { border-color: var(--nx-on-canvas); }
.nx-topbar .nx-logo__corner--tr { border-color: var(--nx-bracket-color); }
.nx-topbar .nx-logo__letter,
.nx-topbar .nx-logo__word-main { color: var(--nx-on-canvas); }
.nx-topbar .nx-logo__word-sub { color: var(--nx-teal); }

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

@media (max-width: 1024px) {
  .nx-topbar { padding-inline: var(--nexus-space-3); }
}