/* ============================================================
   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;
  /* Contorno del comando SECONDARIO (.nx-cmd--quiet). Non e' un
     --nx-border-strong piu' scuro per vezzo: quel grigio sul bianco della
     barra da' 1,53:1, e WCAG 1.4.11 pretende 3:1 dal confine che DICHIARA
     un componente — il pulsante era gia' stato segnalato come "non si
     capisce che e' un pulsante" (2026-08-25). Questo vale 4,76:1. */
  --nx-cmd-outline: var(--nexus-slate-500);
  --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);

  /* I riquadri sul documento (D135, doc 34 par. 13): otto tinte
     distinguibili fra loro, leggibili sulla carta bianca del PDF e sul form
     in entrambi i temi — medie di saturazione, mai pastello. Il campo e il
     rettangolo condividono la tinta per indice; oltre l'ottavo si ricomincia.
     --nx-doc-paper e' la carta della pagina disegnata: resta bianca nei due
     temi, dentro c'e' un documento. */
  --nx-box-1: #1f6feb; --nx-box-2: #e36209; --nx-box-3: #1a7f37; --nx-box-4: #8250df;
  --nx-box-5: #0e8a8a; --nx-box-6: #bf3989; --nx-box-7: #9a6700; --nx-box-8: #cf222e;
  --nx-doc-paper: #fff;
  --nx-on-box: #fff;

  /* 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;
  /* Etichette mono, meta, header di griglia. Era #8C9BB0: sul foglio
     chiaro si fermava a 2.68:1, e nel Review Center e' il colore di
     numero task, coda e scadenza (verifica su TEST del 2026-08-13).
     #62738A tiene 4.59:1 sul foglio e resta un gradino piu' chiaro di
     --nx-text-muted. */
  --nx-text-faint: #62738A;
  --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;
  /* Il teal come TESTO su foglio bianco: #0E8F8A misurava 3.95:1 sul link
     "Torna ai task" e 3.75 sulla scheda di stato attiva — sotto AA, ed era
     uno dei tre punti dichiarati del tema chiaro (par. 35). Un gradino piu'
     giu' della stessa scala (teal-800) porta a 5.1:1 senza cambiare
     l'identita' del colore: il teal resta teal, ma si legge. Il FONDO teal
     dei pulsanti non si tocca — li' il contrasto lo fa l'inchiostro. */
  --nx-teal-ink: #0B7B77;

  /* Il blu "proposto dagli agenti" come TESTO: #2F6BFF su bianco sta a
     4.5:1 esatti, cioe' al limite — e su un fondo velato (la pastiglia di
     stato) scende sotto. --nx-blue resta quello per fondi e bordi; per il
     testo si usa questo, che e' il blu dell'hover gia' in tavolozza. */
  --nx-blue-ink: #1E4FD8;
  --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 */
  /* Margine del foglio dentro il telaio: il prototipo lo mostra su tutti e
     quattro i lati, non solo a sinistra sotto il rail. A 12px il foglio
     sembrava appoggiato al bordo destro e inferiore della finestra. */
  --nx-canvas-pad: 16px;
  /* Sopra e sotto il foglio basta un filo di telaio (2026-09-30): i 16px
     pieni toglievano altezza utile al contenuto senza dire nulla. Ai lati
     resta --nx-canvas-pad, che separa il foglio da rail e colonna azioni. */
  --nx-canvas-pad-y: 6px;
  --nx-logo-mark: 32px;          /* riquadro del marchio nel top bar */
  --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 */
  /* Editor DENTRO una cella di griglia (riga di filtro, riga in modifica):
     38px sono l'altezza di un campo di scheda, dove il controllo e' il
     protagonista. In griglia il protagonista e' la riga di dati: un editor
     alto quanto un campo di scheda gonfia la riga di filtro fino a farla
     sembrare una seconda intestazione, e in modifica sposta in basso tutte
     le righe sotto. 30px e' l'altezza a cui l'editor sta dentro la riga
     senza allargarla. */
  --nx-control-h-grid: 30px;
  /* Editor della sola RIGA DI FILTRO: non e' un campo in cui si scrive un
     valore del record, e' un criterio di ricerca. Sta un gradino sotto
     l'editor in modifica (28 contro 30) perche' la banda dei filtri non
     deve competere con l'intestazione che le sta sopra. */
  --nx-control-h-filter: 28px;
  /* Raggio dei controlli DENTRO una cella: --nx-radius-sm (8px) e' tarato
     su un campo alto 38, e su un editor alto 28 arrotonda quasi meta'
     altezza — a video diventa una pastiglia, e nove pastiglie in fila non
     sono la riga di filtro del tema quieto. */
  --nx-radius-xs: 6px;

  /* 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.
     I due inchiostri sono espliciti perche' la silhouette non dipende
     solo dal tema ma dalla SUPERFICIE su cui l'icona finisce: dentro un
     pulsante a fondo pieno (Salva) o nel telaio navy segue il testo di
     quel contenitore, non il tema (nexus-v2-dx.css, par. icone). */
  --nx-icon-ink-dark: brightness(0) saturate(100%);   /* silhouette scura */
  --nx-icon-ink-light: brightness(0) invert(1);       /* silhouette chiara */
  --nx-icon-ink-theme: var(--nx-icon-ink-dark);       /* segue il tema */
  --nx-icon-filter: var(--nx-icon-ink-theme);
  --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 */
  /* Contorno dell'editor DENTRO una cella di griglia (doc 13 par. 39).
     Nel resto del tema il campo si riconosce dal fondo, che basta finche'
     sta su una scheda bianca. In griglia no: il fondo del campo e quello
     della riga sono quasi lo stesso colore (misurato su TEST il
     2026-08-14: 1.28:1 in dark), e la riga di filtro sembrava una banda
     vuota — nessuno ci avrebbe scritto dentro. Serve un contorno, e deve
     stare sopra il 3:1 che WCAG 1.4.11 chiede ai confini dei controlli:
     al 50%/40% ci arriva su entrambe le superfici, sotto no. */
  --nx-field-outline: color-mix(in srgb, var(--nx-canvas) 50%, transparent);
  --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), variante B: il contenitore e'
     una superficie propria a tutta larghezza, piu' scura del foglio, e
     le schede sono segmenti al suo interno. L'attiva emerge per
     luminanza (superficie piena) con una velatura teal, colore di stato
     del tema v2; le inattive restano piatte sul track, cosi' le
     superfici in gioco sono due e non tre quasi identiche. */
  --nx-tab-track: #E4EBF3;
  --nx-tab-inactive: transparent;
  --nx-tab-inactive-ring: inset 0 0 0 1px color-mix(in srgb, var(--nx-canvas) 16%, transparent);
  --nx-tab-active: color-mix(in srgb, var(--nx-teal) 10%, 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;
  /* Era #6B7F97, lo stesso valore di --nexus-text-muted: i due gradini
     della scala grigia coincidevano, ed erano entrambi sotto AA sul
     foglio scuro. Ora il faint sta appena sotto il muted (#8FA3BA) e
     resta sopra 4.5:1 su foglio, superficie e campo. */
  --nx-text-faint: #8296AE;

  /* ridefinizioni v2 che in dark tornano alle semantiche chiare */
  --nx-text-muted: var(--nexus-text-muted);
  --nx-teal-ink: var(--nexus-accent-text);
  /* In dark il blu interattivo e' gia' chiaro (#5B8CFF): come testo va
     bene com'e', e scurirlo lo renderebbe illeggibile. */
  --nx-blue-ink: var(--nexus-interactive);
  --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);
  /* Il contorno del comando secondario in dark si ri-deriva, non si
     inverte: il #24425F del bordo su foglio scuro vale 1,59:1 — invisibile.
     Questo blu chiaro vale 3,7:1 sul foglio. */
  --nx-cmd-outline: #4E7CA8;

  /* griglia quieta: hairline e tinte su fondo scuro */
  --nx-line: rgb(255 255 255 / .14);
  --nx-line-soft: rgb(255 255 255 / .07);
  /* Piu' marcato della hairline delle righe: qui non separa, dichiara un
     campo scrivibile (v. nota nel blocco light). */
  --nx-field-outline: rgb(255 255 255 / .40);
  --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. Si
     ridefinisce solo l'inchiostro "di tema": --nx-icon-filter lo
     consuma per sostituzione, quindi segue da solo. */
  --nx-icon-ink-theme: var(--nx-icon-ink-light);
  --nx-icon-opacity: .8;

  /* Schede: sul foglio scuro l'ombra non stacca, quindi la scala di
     luminanza deve restare monotona — foglio #08172B < track < attiva.
     Il teal ha percentuale piu' alta che in light: su fondo scuro si
     smorza. */
  --nx-tab-track: #16304F;
  --nx-tab-inactive: transparent;
  --nx-tab-inactive-ring: inset 0 0 0 1px rgb(255 255 255 / .16);
  --nx-tab-active: color-mix(in srgb, var(--nx-teal) 24%, #27476F);
  --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-y) 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); }