/* ============================================================
   Nexus Design System - Tema v2 "Inset Canvas": token e classi opt-in
   Fonte: docs/design_handoff_nexus_suite/brand/nexus-tokens-v2.css
   (riscritto per questo host, non copiato: vedi doc 13 par. 12).

   Carica DOPO nexus-shell.css e PRIMA di site.css.
   Questo file e' inerte finche' le classi .nx-canvas / .nx-sheet /
   .nx-bracket / .nx-segmented / .nx-rail / .nx-card / .nx-btn-* non
   vengono applicate nel markup: contiene solo variabili e classi
   opt-in, nessun selettore .dxbl-*.
   Gli override dei componenti DevExpress stanno in nexus-v2-dx.css,
   che si collega ai passi v2.4/v2.5.
   ============================================================ */

/* ---- alias: token --nx-* (handoff nexus_suite) -> --nexus-* ----
   Il tema installato usa i --nexus-* del primo handoff; il pacchetto
   v2 ragiona in --nx-*. Gli alias mappano sui token SEMANTICI, cosi'
   i --nx-* seguono gratis il blocco dark di nexus-tokens.css.
   Dove un equivalente --nexus-* non esiste, il valore viene
   dall'handoff (in un foglio di token il valore proprio e' lecito). */
:root {
  /* brand */
  --nx-navy: var(--nexus-navy-700);
  --nx-navy-deep: var(--nexus-navy-800);
  --nx-teal: var(--nexus-accent);
  --nx-teal-hover: var(--nexus-accent-hover);
  --nx-teal-ink: var(--nexus-accent-text);
  --nx-blue: var(--nexus-interactive);      /* solo contenuti proposti dagli agenti */
  --nx-blue-hover: #1E4FD8;

  /* superfici */
  --nx-bg: var(--nexus-background);
  --nx-surface: var(--nexus-surface);
  --nx-surface-alt: var(--nexus-surface-alt);
  --nx-border: var(--nexus-border);
  --nx-border-strong: #C3D3E3;
  --nx-nav-divider: #1C3453;
  --nx-nav-muted: #93A7BD;
  --nx-nav-label: #4A6486;

  /* testo */
  --nx-text: var(--nexus-text-primary);
  --nx-text-muted: var(--nexus-text-muted);

  /* stati */
  --nx-success: var(--nexus-success);
  --nx-success-ink: var(--nexus-success-text);
  --nx-success-bg: var(--nexus-success-subtle);
  --nx-warning: var(--nexus-warning);
  --nx-warning-ink: var(--nexus-warning-text);
  --nx-warning-bg: var(--nexus-warning-subtle);
  --nx-error: var(--nexus-error);
  --nx-error-ink: var(--nexus-error-text);
  --nx-error-bg: var(--nexus-error-subtle);
  --nx-info: var(--nexus-info);
  --nx-agent-bg: color-mix(in srgb, var(--nexus-interactive) 6%, transparent);

  /* forma (scala v1 dell'handoff; la v2 la ridefinisce sotto) */
  --nx-radius-sm: 6px;
  --nx-radius: 8px;
  --nx-radius-card: 10px;
  --nx-radius-overlay: 12px;
  --nx-pill: var(--nexus-radius-pill);

  /* elevazione e focus */
  --nx-shadow-card: var(--nexus-shadow-sm);
  --nx-shadow-overlay: 0 12px 28px -12px rgb(11 31 58 / .22);
  --nx-focus: 0 0 0 3px rgb(28 207 201 / .18);

  /* tipografia */
  --nx-font: var(--nexus-font-family);
  --nx-font-mono: var(--nexus-font-mono);
}

/* ---- token v2 (override della scala v1) -------------------- */
:root {
  --nx-canvas: #0A1526;          /* sfondo app: il telaio della tela */
  --nx-sheet: #F7F9FC;           /* foglio del contenuto, incassato nel telaio */
  --nx-field: #F0F4F9;           /* fondo editor a riposo (sostituisce il bordo) */
  --nx-field-hover: #E9EEF5;
  --nx-text-faint: #8C9BB0;      /* etichette mono, meta, header di griglia */
  --nx-danger: #FF5A5A;          /* rosso piu' caldo del #EF4444 della v1 */
  --nx-danger-ink: #C22B2B;

  /* ritocchi v2 ai valori v1 */
  --nx-navy-deep: #0A1526;
  --nx-text-muted: #5A6B82;
  --nx-teal-ink: #0E8F8A;
  --nx-success-ink: #147A45;
  --nx-warning-ink: #9A6100;

  /* forma: raggi piu' generosi solo sui contenitori */
  --nx-radius-sheet: 18px;
  --nx-radius-card: 16px;
  --nx-radius: 10px;
  --nx-radius-sm: 8px;

  /* elevazione: ombre tinte navy al posto dei bordi da 1px */
  --nx-shadow-card: 0 1px 2px rgb(10 21 38 / .06);
  --nx-shadow-lift: 0 1px 2px rgb(10 21 38 / .08), 0 10px 20px -16px rgb(10 21 38 / .40);
  --nx-shadow-float: 0 1px 2px rgb(10 21 38 / .06), 0 12px 24px -18px rgb(10 21 38 / .25);
  --nx-shadow-canvas: 0 24px 60px -30px rgb(10 21 38 / .60);
  --nx-shadow-cta: 0 6px 16px -8px rgb(28 207 201 / .90);

  /* parentesi di stato attivo (motivo del marchio) */
  --nx-bracket-w: 2px;
  --nx-bracket-size: 9px;
  --nx-bracket-color: var(--nx-teal);

  /* misure v2 */
  --nx-canvas-pad: 12px;         /* margine del foglio dentro il telaio */
  --nx-nav-tile-w: 60px;         /* nav a tile icona + etichetta */
  --nx-nav-rail-w: 76px;
  --nx-control-h: 38px;          /* era 36px: compensa la perdita del bordo */

  /* iconografia monocromatica (doc 13 par. 16): le icone XAF arrivano
     come <img> da IImageService (SVG multicolore), quindi currentColor
     non le raggiunge; il filtro le riduce a silhouette del colore del
     testo. brightness(0) azzera il colore mantenendo l'alpha. */
  --nx-icon-filter: brightness(0) saturate(100%);
  --nx-icon-opacity: .78;

  /* dentro il telaio navy (indipendenti dal tema, come la nav del design) */
  --nx-on-canvas: #FFFFFF;
  --nx-on-canvas-muted: #A8B8CC;
  --nx-canvas-hover: rgb(255 255 255 / .06);
  --nx-canvas-active: rgb(255 255 255 / .10);

  /* derivati per la griglia quieta (consumati da nexus-v2-dx.css) */
  --nx-line: color-mix(in srgb, var(--nx-canvas) 8%, transparent);       /* bordo header */
  --nx-line-soft: color-mix(in srgb, var(--nx-canvas) 5%, transparent);  /* righe */
  --nx-row-selected: color-mix(in srgb, var(--nx-teal) 5%, var(--nx-surface));
  --nx-row-ring: color-mix(in srgb, var(--nx-teal) 35%, transparent);

  /* Striscia TabbedMDI (doc 13 par. 19): ogni scheda e' una pillola
     riconoscibile anche da inattiva (superficie tenue sul foglio),
     l'attiva si distingue per TINTA, non solo per luminosita' — il teal
     e' il colore di stato del tema v2. */
  --nx-tab-inactive: var(--nx-field);
  --nx-tab-active: color-mix(in srgb, var(--nx-teal) 14%, var(--nx-surface));
  --nx-tab-active-ring: inset 0 0 0 1px color-mix(in srgb, var(--nx-teal) 30%, transparent);
}

/* ---- derivazione dark dei token v2 (task 7) --------------------
   Gli alias della sezione precedente si ri-derivano da soli dal
   blocco dark di nexus-tokens.css; qui si ridefiniscono SOLO i token
   v2 con valori propri. Regola dell'handoff: dark is re-derived,
   not inverted. Le due meta' (DevExpress + data-nexus-theme) si
   muovono insieme: NexusThemeSyncController + _Host.cshtml. */
[data-nexus-theme="dark"] {
  --nx-canvas: #050E1A;              /* il telaio scende sotto il foglio */
  --nx-sheet: #08172B;               /* foglio tra telaio e superfici card */
  --nx-field: #122A47;
  --nx-field-hover: #1B3455;
  --nx-text-faint: #6B7F97;

  /* ridefinizioni v2 che in dark tornano alle semantiche chiare */
  --nx-text-muted: var(--nexus-text-muted);
  --nx-teal-ink: var(--nexus-accent-text);
  --nx-success-ink: var(--nexus-success-text);
  --nx-warning-ink: var(--nexus-warning-text);
  --nx-danger-ink: var(--nexus-error-text);
  --nx-border-strong: var(--nexus-border);

  /* griglia quieta: hairline e tinte su fondo scuro */
  --nx-line: rgb(255 255 255 / .14);
  --nx-line-soft: rgb(255 255 255 / .07);
  --nx-row-selected: color-mix(in srgb, var(--nx-teal) 14%, var(--nx-sheet));
  --nx-row-ring: color-mix(in srgb, var(--nx-teal) 45%, transparent);

  /* icone: su fondo scuro la silhouette va invertita a bianco */
  --nx-icon-filter: brightness(0) invert(1);
  --nx-icon-opacity: .8;

  /* Schede: sul foglio scuro l'ombra non stacca, quindi la pillola
     inattiva si legge dalla superficie e l'attiva dalla tinta teal
     (percentuale piu' alta che in light: su fondo scuro il teal si
     smorza). */
  --nx-tab-inactive: var(--nx-field);
  --nx-tab-active: color-mix(in srgb, var(--nx-teal) 22%, var(--nx-field));
  --nx-tab-active-ring: inset 0 0 0 1px color-mix(in srgb, var(--nx-teal) 45%, transparent);

  /* elevazione: sul dark il lavoro lo fanno le superfici, ombre nere */
  --nx-shadow-card: 0 1px 2px rgb(0 0 0 / .35);
  --nx-shadow-lift: 0 1px 2px rgb(0 0 0 / .40), 0 10px 20px -16px rgb(0 0 0 / .70);
  --nx-shadow-float: 0 1px 2px rgb(0 0 0 / .35), 0 12px 24px -18px rgb(0 0 0 / .55);
  --nx-shadow-canvas: 0 24px 60px -30px rgb(0 0 0 / .80);
}

/* ---------------------------------------------------------------
   TELA INCASSATA - wrapper nel layout, zero controlli toccati.
   Adattamenti rispetto al prototipo:
   - height 100% e non min-height 100vh: la shell e' una grid a piena
     altezza dentro <app> (nexus-shell.css);
   - nessun display: nel nostro layout .nx-canvas convive con la grid
     di .nx-shell (questo foglio carica dopo nexus-shell.css e un
     display flex la sovrascriverebbe). La classe da' solo il telaio:
     sfondo, padding, gap tra le colonne;
   - overflow clip e non auto: lo scroller unico resta
     .nx-content__scroll (vincolo doc 13 par. 8 per la
     virtualizzazione della griglia); qui serve solo il clipping
     degli angoli a 18px.
   --------------------------------------------------------------- */
/* Il secondo selettore vince su ".dxbl-theme-fluent .app" di styles.css
   XAF (0,2,0), che in light metterebbe il fondo bianco sulla radice. */
.nx-canvas,
.dxbl-theme-fluent .app.nx-canvas {
  background: var(--nx-canvas);
  padding: var(--nx-canvas-pad);
  height: 100%;
  gap: var(--nx-canvas-pad);
}
.nx-sheet {
  background: var(--nx-sheet);
  border-radius: var(--nx-radius-sheet);
  flex: 1;
  min-height: 0;
  overflow: clip;
}

/* ---------------------------------------------------------------
   PARENTESI DI STATO - un solo segnale per "attivo/selezionato"
   --------------------------------------------------------------- */
.nx-bracket { position: relative; }
.nx-bracket::after {
  content: "";
  position: absolute;
  top: 6px; 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);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   PULSANTI (classi opt-in; il reset di .dxbl-btn sta in
   nexus-v2-dx.css e arriva al passo v2.5)
   --------------------------------------------------------------- */
.nx-btn-primary   { background: var(--nx-teal); color: var(--nx-navy-deep); box-shadow: var(--nx-shadow-cta); }
.nx-btn-primary:hover { background: var(--nx-teal-hover); }
.nx-btn-secondary { background: var(--nx-surface); color: var(--nx-text); box-shadow: 0 1px 2px rgb(10 21 38 / .10); }
.nx-btn-secondary:hover { box-shadow: 0 2px 8px rgb(10 21 38 / .16); }

/* ---------------------------------------------------------------
   SEGMENTED PILL - al posto dei tab con underline (passo v2.6)
   --------------------------------------------------------------- */
.nx-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--nx-pill);
  background: var(--nx-field);
  width: fit-content;
}
.nx-segmented > * {
  padding: 6px 13px;
  border-radius: var(--nx-pill);
  font-size: 12px;
  color: var(--nx-text-muted);
  cursor: pointer;
}
.nx-segmented > .nx-active {
  background: var(--nx-surface);
  color: var(--nx-text);
  font-weight: var(--nexus-fw-semibold);
  box-shadow: 0 1px 2px rgb(10 21 38 / .10);
}

/* ---------------------------------------------------------------
   NAV A TILE - icona + etichetta, dentro il telaio navy (passo v2.3)
   --------------------------------------------------------------- */
.nx-rail {
  width: var(--nx-nav-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.nx-rail-item {
  position: relative;
  width: var(--nx-nav-tile-w);
  padding: 11px 0 9px;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--nx-on-canvas-muted);
  cursor: pointer;
}
.nx-rail-item:hover { background: var(--nx-canvas-hover); }
.nx-rail-item.nx-active { background: var(--nx-canvas-active); color: var(--nx-on-canvas); font-weight: var(--nexus-fw-semibold); }
.nx-rail-item.nx-active::after {
  content: "";
  position: absolute; top: 6px; right: 7px;
  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);
}

/* ---------------------------------------------------------------
   CARD
   --------------------------------------------------------------- */
.nx-card       { background: var(--nx-surface); border: none; border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-card); }
.nx-card-lift  { background: var(--nx-surface); border: none; border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-lift); }
.nx-card-dark  { background: var(--nx-canvas); color: #FFFFFF; border-radius: var(--nx-radius-card); }