/* ============================================================
   Nexus Design System - Tema v2 "Inset Canvas": override DevExpress
   Collegato in _Host.cshtml dopo nexus-v2-tokens.css (passo v2.4).
   Attivi: griglia quieta (v2.4), editor senza bordo e pulsanti
   (v2.5), tab a segmented pill (v2.6).

   Selettori VERIFICATI su DevExpress 26.1.3 (core.min.css del
   bundle Fluent installato) - non sono quelli del prototipo:
   - gli editor (DxTextBox, DxComboBox, DxDateEdit, DxSpinEdit,
     DxTagBox) rendono tutti .dxbl-text-edit; .dxbl-combobox,
     .dxbl-date-edit e .dxbl-spin-edit NON esistono;
   - la tabella della griglia e' .dxbl-grid .dxbl-grid-table,
     l'header e' thead .dxbl-grid-header-row > th;
   - la selezione e' tr.dxbl-grid-selected-row; le ListView XAF
     usano anche la focused row (.dxbl-grid-focused-row);
   - hover e tinte passano dalle variabili di componente dichiarate
     su .dxbl-grid (doc 13 par. 2: dichiarazione sullo stesso
     elemento, vince per ordine di cascata).

   Regola dell'handoff: se un controllo non regge lo stile senza
   bordo, si rimuove la sua regola qui e torna al look v1.
   ============================================================ */

/* ---------------------------------------------------------------
   GRIGLIA QUIETA - via le righe verticali, header in mono (v2.4)
   --------------------------------------------------------------- */
.dxbl-grid {
  border: none;
  background: transparent;
  --dxbl-grid-header-bg: transparent;
  --dxbl-grid-hover-bg: var(--nx-field);
  --dxbl-grid-selection-bg: var(--nx-row-selected);
  --dxbl-grid-focus-bg: var(--nx-row-selected);
  --dxbl-grid-v-line-color: transparent;
  --dxbl-grid-h-line-color: var(--nx-line-soft);
}

.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th {
  border-bottom: 1px solid var(--nx-line);
  font-family: var(--nx-font-mono);
  font-size: 9px;
  font-weight: var(--nexus-fw-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nx-text-faint);
}

/* Superficie tinta + anello teal sulla riga attiva: vale per la
   selezione e per la focused row (quella che usa la ListView XAF).
   L'anello e' composto per direzione (top/bottom su tutte le celle,
   left/right solo agli estremi): un inset uniforme per cella
   reintrodurrebbe righe verticali dentro la riga. */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td {
  box-shadow: inset 0 1px 0 var(--nx-row-ring), inset 0 -1px 0 var(--nx-row-ring);
}
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:first-child,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:first-child {
  box-shadow: inset 1px 0 0 var(--nx-row-ring), inset 0 1px 0 var(--nx-row-ring), inset 0 -1px 0 var(--nx-row-ring);
}
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:last-child,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:last-child {
  box-shadow: inset -1px 0 0 var(--nx-row-ring), inset 0 1px 0 var(--nx-row-ring), inset 0 -1px 0 var(--nx-row-ring);
}

/* Parentesi di stato sull'ultima cella della riga attiva: stesso
   motivo di .nx-bracket (nexus-v2-tokens.css), qui via pseudo-elemento
   perche' le righe le rende DevExpress. */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:last-child,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:last-child {
  position: relative;
}
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:last-child::after,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:last-child::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;
}

/* ---------------------------------------------------------------
   EDITOR SENZA BORDO - inset box-shadow: nessun salto di 1px
   tra riposo e fuoco, le DetailView non "ballano" (v2.5)
   --------------------------------------------------------------- */
.dxbl-text-edit,
.dxbl-memo-edit {
  background: var(--nx-field);
  border: none;
  border-radius: var(--nx-radius);
  box-shadow: inset 0 0 0 1px transparent;
  min-height: var(--nx-control-h);
  /* Fluent disegna anche una sottolineatura propria (doc 13 par. 5):
     senza queste resterebbe visibile sotto l'editor senza bordo. Servono
     tutti e quattro gli stati: azzerando solo rest e focused, la riga
     ricompariva scura al passaggio del mouse (hovered #0F172A) e mentre si
     teneva premuto (active #050E1A), sopra l'anello teal. */
  --dxbl-text-edit-underline-color: transparent;
  --dxbl-text-edit-underline-focused-color: transparent;
  --dxbl-text-edit-underline-hovered-color: transparent;
  --dxbl-text-edit-underline-active-color: transparent;
  /* Pulsanti interni degli editor (dropdown di DxDateEdit e DxComboBox,
     spin di DxSpinEdit, clear): di serie il loro gruppo ha superficie
     propria (`--dxbl-text-edit-btn-bg: var(--dxbl-text-edit-bg)`, cioe' il
     bianco del tema) e i bordi laterali del text edit. Essendo un figlio
     opaco copriva l'anello teal sul proprio lato - l'inset box-shadow si
     dipinge sotto i figli - e il fuoco sembrava un contorno aperto a
     destra, con una riga verticale grigia al confine. Trasparenti, il
     pulsante sta sulla superficie dell'editor e l'anello chiude il
     perimetro; il feedback di hover resta il colore del glifo. */
  --dxbl-text-edit-btn-bg: transparent;
  --dxbl-text-edit-btn-hovered-bg: transparent;
  --dxbl-text-edit-border-color: transparent;
  --dxbl-text-edit-btn-color: var(--nx-text-muted);
  --dxbl-text-edit-btn-hover-color: var(--nx-teal-ink);
}
.dxbl-text-edit:hover,
.dxbl-memo-edit:hover { background: var(--nx-field-hover); }
.dxbl-text-edit:focus-within,
.dxbl-memo-edit:focus-within {
  background: var(--nx-field);
  /* spessore dal token (nexus-v2-tokens.css): 1px, era 2px (utente 2026-10-30, doc 13 par. 63.2) */
  box-shadow: inset 0 0 0 var(--nx-field-ring) var(--nx-teal);
}

/* Il gruppo pulsanti dichiara la superficie direttamente (non solo via
   variabile) in alcune combinazioni del tema: si azzera anche qui, cosi'
   l'anello resta continuo qualunque sia il layout dell'editor. */
.dxbl-text-edit > .dxbl-btn-group,
.dxbl-text-edit > .dxbl-btn-group-vertical { background-color: transparent; }

/* LA TENDINA SI DEVE RICONOSCERE (2026-09-30, doc 13 par. 63).
   Senza bordo e con il pulsante trasparente, un DxComboBox era identico a
   un campo di testo: stesso fondo, e a destra una freccia sottile in
   --nx-text-muted, piu' leggera della X che svuota. L'utente non capiva
   che si potesse aprire. La freccia diventa un SEGMENTO: fondo proprio un
   gradino sopra il campo, separatore sottile a sinistra, glifo a pieno
   contrasto. Il fondo si fa mescolando il TESTO al campo (8%): piu' scuro
   in chiaro, piu' chiaro in scuro. --nx-field-hover da solo era quasi
   invisibile (#E9EEF5 su #F0F4F9, misurato nel posto di prova).
   La X resta tenue: e' la freccia a dire "si sceglie".
   Vale anche per DxDateEdit (stesso pulsante): anche li' si apre un
   pannello. In griglia non arriva: le regole in cella di DevExpress hanno
   specificita' molto piu' alta e la griglia resta quieta (par. 39).
   IL SEGMENTO ARRIVA AI BORDI (utente 2026-09-30, par. 63.1). La prima
   versione lasciava 2px sopra, sotto e a destra per non coprire l'anello
   del fuoco, e un raggio proprio (--nx-radius - 2px): a video era un
   tasto appoggiato dentro il campo, staccato dal bordo, con gli angoli
   che non seguivano quelli dell'editor - peggio dove l'editor ha un
   raggio diverso (.nx-rclist__field, --nx-radius-sm) o un contorno
   proprio (.ns-field--boxed, outline 2px). Ora il segmento non ha
   margine ne' raggio: lo RITAGLIA l'editor (overflow hidden, solo su
   quelli che hanno il pulsante a tendina), cosi' gli angoli sono sempre
   quelli del contenitore, qualunque raggio o bordo abbia. L'anello del
   fuoco, che si dipinge sotto i figli, il segmento lo ridisegna su di se'
   (sopra, destra, sotto); gli outline delle schede task (evidenza,
   errore, rilavorazione) si dipingono sopra i figli e restano interi. */
.dxbl-text-edit:has(> .dxbl-btn-group > .dxbl-btn.dxbl-edit-btn-dropdown),
.dxbl-text-edit:has(> .dxbl-btn.dxbl-edit-btn-dropdown) {
  overflow: hidden;
}
.dxbl-text-edit > .dxbl-btn-group:has(> .dxbl-btn.dxbl-edit-btn-dropdown) {
  align-self: stretch;
  margin: 0;
}
.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-dropdown {
  align-self: stretch;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--nx-text) 8%, var(--nx-field));
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--nx-text) 18%, transparent);
  color: var(--nx-text);
}
/* In cella il fuoco e' la cornice della CELLA (par. 39, sotto): l'editor
   non ha anello e il segmento non deve disegnarsene uno da solo, per
   questo la regola esclude gli editor dentro il contenitore in cella
   (resta il solo separatore). Una regola a parte che lo spegne in griglia
   ripeterebbe il selettore che GridFilterRowTests vieta. */
.dxbl-text-edit:not(.dxbl-grid-editor-inplace-container *):focus-within > .dxbl-btn-group > .dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-text-edit:not(.dxbl-grid-editor-inplace-container *):focus-within > .dxbl-btn.dxbl-edit-btn-dropdown {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--nx-text) 18%, transparent),
    inset 0 var(--nx-field-ring) 0 var(--nx-teal),
    inset calc(-1 * var(--nx-field-ring)) 0 0 var(--nx-teal),
    inset 0 calc(-1 * var(--nx-field-ring)) 0 var(--nx-teal);
}
.dxbl-text-edit:hover > .dxbl-btn-group > .dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-text-edit:hover > .dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-edit-btn-dropdown:hover,
.dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-dropdown:hover {
  background-color: color-mix(in srgb, var(--nx-teal) 18%, var(--nx-field));
  color: var(--nx-teal-ink);
}

/* ---------------------------------------------------------------
   EDITOR DENTRO LA GRIGLIA (doc 13 par. 39)
   Riga di filtro e riga in modifica: DevExpress marca entrambe con
   .dxbl-grid-editor-inplace-container (verificato sul DOM di TEST il
   2026-08-14).

   Due cose vanno cambiate rispetto all'editor di scheda, e nessuna
   delle due e' estetica:

   1. l'ALTEZZA. 38px sono l'altezza di un campo di scheda; dentro una
      cella la riga di filtro saliva a 40px contro i 34 dell'header, e
      sembrava una seconda intestazione.
   2. il CONTORNO. Qui il fondo del campo (--nx-field) e quello della
      riga sono quasi lo stesso colore: misurato su TEST, 1.28:1 in
      dark. A video la riga di filtro era una banda vuota — gli editor
      c'erano, larghi quanto la colonna, e non si vedevano. Il contorno
      li dichiara e sta sopra il 3:1 di WCAG 1.4.11.
   --------------------------------------------------------------- */
.dxbl-grid .dxbl-grid-editor-inplace-container .dxbl-text-edit,
.dxbl-grid .dxbl-grid-editor-inplace-container .dxbl-memo-edit {
  min-height: var(--nx-control-h-grid);
  border-radius: var(--nx-radius-sm);
  box-shadow: inset 0 0 0 1px var(--nx-field-outline);
}
/* Il fuoco in cella NON si disegna sull'editor: DevExpress azzera il suo
   box-shadow appena prende il fuoco (regola a sette classi in core.min:
   inutile combatterla) e lo sposta sulla CELLA, come cornice. Si cambia
   quindi il colore della cornice, non il modo di disegnarla — e il colore
   e' il teal del resto del tema, o il fuoco in griglia parlerebbe un'altra
   lingua. La variabile va ridefinita sulla cella in modifica, perche' li'
   DevExpress la riscrive con un token proprio. */
.dxbl-grid .dxbl-grid-editor-inplace-container {
  --dxbl-grid-focus-frame-color: var(--nx-teal);
}
/* Nella riga in MODIFICA non basta l'eredita': DevExpress riscrive la
   variabile sulla singola cella in modifica, e li' vince lei. */
.dxbl-grid .dxbl-grid-table > tbody > tr > td[data-edit-cell] {
  --dxbl-grid-focus-frame-color: var(--nx-teal);
}
/* La cella di serie ha il padding delle celle di dati (6px): con un
   editor dentro diventa margine sprecato in una riga che deve restare
   sottile. */
.dxbl-grid .dxbl-grid-editor-inplace-container > td { padding: 3px 4px; }

/* ---------------------------------------------------------------
   RIGA DI FILTRO: il campo si dichiara UNA volta sola (2026-08-21)

   La regola sopra vale per ogni editor in cella e resta la base; qui si
   separa il caso della sola riga di filtro, che DevExpress marca
   `tr.dxbl-grid-filter-row` dentro il `thead` (le due classi convivono:
   la riga di filtro e' anche un editor-inplace-container).

   Il difetto era di RIDONDANZA, non di contrasto. L'editor dichiarava
   se stesso tre volte insieme — fondo azzurro (--nx-field), contorno da
   1px e raggio da 8px su 30px di altezza — e nove editor in fila
   diventavano nove pastiglie piene, l'elemento piu' rumoroso di una
   pagina il cui tema si regge su superfici quiete e hairline. Il
   contorno NON si tocca (e' quello che tiene il 3:1 di WCAG 1.4.11,
   doc 13 par. 39): si toglie il fondo, che a quel punto e' la seconda
   dichiarazione della stessa cosa. Il fondo torna dove serve davvero,
   cioe' come feedback: al passaggio del mouse e sotto il fuoco.

   Il fuoco resta quello della cella (cornice teal, regola sopra): qui
   si aggiunge solo la superficie, perche' il campo attivo si legga come
   attivo anche a colpo d'occhio.
   --------------------------------------------------------------- */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit {
  background: transparent;
  min-height: var(--nx-control-h-filter);
  border-radius: var(--nx-radius-xs);
  box-shadow: inset 0 0 0 1px var(--nx-field-outline);
  /* Il criterio e' meta-informazione, come le etichette dell'header:
     un gradino sotto il testo dei dati. */
  font-size: 12px;
}
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit:hover,
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit:focus-within {
  background: var(--nx-field);
}
/* IL FUOCO TORNA SUL BORDO DEL CAMPO. Finche' l'editor riempiva la cella
   (margine negativo, regola qui sotto), la cornice che DevExpress disegna
   sulla CELLA — `outline: .15rem solid var(--dxbl-grid-focus-frame-color)`
   con offset negativo — cadeva esattamente sul perimetro del campo, e
   bastava cambiarle colore (correzione del 14 agosto). Dato al campo il
   suo respiro, cella e campo non coincidono piu': la cornice si accendeva
   intorno all'ARIA, a qualche pixel dal campo, e sembrava che a prendere
   il fuoco fosse la cella e non l'editor.

   Quindi: cornice della cella spenta (solo qui, nella riga in modifica
   resta il rimedio del 14 agosto) e anello sull'editor.

   L'anello si disegna con `outline`, NON con box-shadow: DevExpress
   azzera il box-shadow dell'editor in-place focalizzato con una regola a
   sette classi (par. 39: la correzione muta), mentre l'outline non lo
   tocca nessuno. `outline-offset: -2px` lo porta dentro il perimetro, al
   posto del contorno di riposo: il campo cambia colore al bordo e non
   cresce di un pixel. */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td {
  --dxbl-grid-focus-frame-color: transparent;
  padding: 5px 6px;
}
/* Spenta anche per via diretta, non solo scolorata: un outline trasparente
   resta un outline, e sui bordi in mezzo pixel il browser lo compone
   comunque con il fondo (a 2x sul banco si vedeva una cornice grigina
   intorno alla cella). La catena ricalca quella di DevExpress. */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row.dxbl-grid-editor-inplace-container
  > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell):focus-within {
  outline: none;
}
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit:focus-within,
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-memo-edit:focus-within {
  outline: 2px solid var(--nx-teal);
  outline-offset: -2px;
}

/* ARIA INTORNO AL CAMPO. Di serie l'editor in cella NON sta dentro il
   padding della cella: DevExpress gli da' un margine NEGATIVO pari al
   padding (`margin: calc(padding-y * -1) calc(padding-x * -1)`) piu'
   `width: unset`, cosi' l'editor arriva fino ai bordi della cella. In
   modifica e' giusto — la cella diventa il campo. In una riga di FILTRO
   no: il contorno finisce appoggiato alla linea dell'intestazione sopra,
   a quella della prima riga sotto e al contorno del campo accanto, e i
   filtri si leggono come una gabbia continua invece che come nove
   caselle.

   Si azzera il margine e si restituisce la larghezza (`width: 100%`, il
   valore che l'editor ha ovunque tranne che in cella): il padding della
   cella torna a fare il suo mestiere e diventa il respiro intorno al
   campo. Verticale 5px e orizzontale 6px: fra due filtri accanto fanno
   12px, quanto basta a separarli senza aprire un corridoio.

   La catena e' lunga per FORZA, non per gusto: la regola di DevExpress
   che scrive quel margine negativo porta tre `:not()` di classe, e una
   catena piu' corta perde in specificita' e non fa niente (prima prova
   sul banco: margine azzerato a video identico). Si ricalca la sua
   catena e si aggiunge un gradino. */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row.dxbl-grid-editor-inplace-container
  > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell):not(.dxbl-grid-indent-cell)
  > .dxbl-text-edit,
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row.dxbl-grid-editor-inplace-container
  > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell):not(.dxbl-grid-indent-cell)
  > .dxbl-memo-edit {
  margin: 0;
  width: 100%;
}

/* Frecce su/giu' dei filtri numerici: in una riga di filtro non servono
   — nessuno cerca "priorita' 3" salendo di uno alla volta — e si
   prendevano un terzo della larghezza della colonna (misurato sulla
   lista dei task: N. task, Priorita', SLA, Refresh count). Si nasconde
   il GRUPPO, non i due pulsanti: restando, il gruppo vuoto terrebbe il
   suo spazio. Nella riga in MODIFICA gli spin restano: li' si scrive un
   valore, e l'incremento e' il gesto giusto. */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit > .dxbl-btn-group-vertical {
  display: none;
}

/* Calendario e "pulisci" restano (aprono qualcosa che serve), ma con il
   peso di un glifo di contorno: 14px e inchiostro tenue, teal a hover.
   Di serie sono grandi quanto quelli di una scheda e scuri quanto il
   testo dei dati. */
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn {
  --dxbl-image-width: 14px;
  --dxbl-image-height: 14px;
  color: var(--nx-text-faint);
}
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:hover {
  color: var(--nx-teal-ink);
}

/* ---------------------------------------------------------------
   IMBUTO E ORDINAMENTO NELL'INTESTAZIONE (2026-08-21)

   L'imbuto c'e' su OGNI colonna, sempre acceso e nel colore del testo
   dei dati: contro un'etichetta mono da 9px in --nx-text-faint era il
   pezzo piu' scuro dell'intestazione, e su nove colonne diventava una
   fila di glifi che rubava anche la larghezza al titolo (Priorita' si
   leggeva "PRIORI...").

   Si attenua a riposo e torna pieno quando la colonna e' sotto il mouse
   o ha il fuoco da tastiera. Attenuato, NON nascosto: DevExpress per il
   suo `visible-on-hover` usa display:none e la colonna filtrabile
   sparisce a chi guarda la pagina da fermo. Con l'opacita' il glifo si
   intravede, resta cliccabile e resta nel tab order.

   Due eccezioni, e sono di sostanza:
   * touch (html.dxTouchUI): senza mouse l'hover non esiste, quindi
     opacita' piena — la stessa guardia che usa DevExpress;
   * colonna GIA' filtrata (-active / -filled): il filtro attivo e' uno
     stato, e gli stati nel tema v2 si dicono in teal. Pieno, sempre.
   L'ordinamento e' anch'esso uno stato attivo (compare solo sulla
   colonna ordinata) e prende lo stesso teal.
   --------------------------------------------------------------- */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-btn.dxbl-grid-filter-menu-funnel-btn {
  --dxbl-btn-color: var(--nx-text-faint);
  --dxbl-btn-hover-color: var(--nx-teal-ink);
  --dxbl-btn-hover-bg: transparent;
  --dxbl-btn-hover-background: none;
  --dxbl-image-width: 14px;
  --dxbl-image-height: 14px;
  color: var(--nx-text-faint);
  opacity: .4;
  transition: opacity .12s ease-out;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:hover .dxbl-btn.dxbl-grid-filter-menu-funnel-btn,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:focus-within .dxbl-btn.dxbl-grid-filter-menu-funnel-btn {
  opacity: 1;
}
html.dxTouchUI .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-btn.dxbl-grid-filter-menu-funnel-btn {
  opacity: 1;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-active,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled {
  --dxbl-btn-color: var(--nx-teal-ink);
  --dxbl-btn-hover-color: var(--nx-teal-ink);
  color: var(--nx-teal-ink);
  opacity: 1;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-grid-sort-asc,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th .dxbl-grid-sort-desc {
  --dxbl-image-width: 12px;
  --dxbl-image-height: 12px;
  color: var(--nx-teal-ink);
}

/* Stati semantici: mantengono il colore senza reintrodurre il bordo.
   Si applicano dall'esterno (renderer metadata-driven, validazione). */
.nx-field-required { box-shadow: inset 0 0 0 2px var(--nx-danger) !important; }
.nx-field-proposed { background: var(--nx-agent-bg) !important; box-shadow: inset 0 0 0 2px var(--nx-blue) !important; }

/* ---------------------------------------------------------------
   PULSANTI (v2.5)
   Le esclusioni sono obbligatorie: .dxbl-btn copre anche i pulsanti
   interni degli editor (dropdown, spin), i pulsanti-icona e i tool
   button (es. la X di chiusura dei tab, .dxbl-btn-tool);
   min-height 38px li deformerebbe (verificato: senza l'esclusione
   la striscia TabbedMDI saliva a 72px).
   --------------------------------------------------------------- */
.dxbl-btn:not(.dxbl-btn-icon):not(.dxbl-btn-tool):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec):not(.dxbl-btn-link):not(.dxbl-btn-text-link):not(.dxbl-btn-outline-link) {
  border: none;
  border-radius: var(--nx-radius);
  min-height: var(--nx-control-h);
  font-weight: var(--nexus-fw-semibold);
}

/* ---------------------------------------------------------------
   ICONE MONOCROMATICHE (doc 13 par. 16)
   Le icone di Action, viste e schede arrivano come <img> servite da
   IImageService: sono SVG multicolore (arancio/blu/verde del set
   DevExpress) e non seguono currentColor. Il filtro le porta a
   silhouette monocroma coerente col tema, come chiede il design
   (handoff par. 15: famiglia a tratto singolo monocromatica).
   Le icone gia' rese con mask (.xaf-image: account, rail, toggle)
   seguono currentColor da sole e non sono toccate.
   --------------------------------------------------------------- */
img[src*="IImageService"] {
  filter: var(--nx-icon-filter);
  opacity: var(--nx-icon-opacity);
}

/* Sull'elemento attivo/hover l'icona torna piena, come l'etichetta. */
.dxbl-btn:hover img[src*="IImageService"],
.dxbl-tabs-item.dxbl-active img[src*="IImageService"] { opacity: 1; }

/* Superfici PIENE: la silhouette segue il testo del contenitore, non il
   tema. Senza questa regola l'icona restava scura anche sopra il navy:
   sul pulsante Salva (dxbl-btn-primary, fondo #0B1F3A) il floppy nero al
   78% misurava 1.22:1 contro l'etichetta bianca a 14.8:1 - visibile
   appena, il difetto segnalato. Si ridefiniscono i token e non il
   `filter`, cosi' la regola img sopra resta l'unico punto che dipinge.
   Le varianti elencate sono quelle con testo chiaro in ENTRAMBI i temi
   (misurate a runtime su DevExpress 26.1.3): warning ha fondo ambra con
   testo scuro e tiene la silhouette scura. L'opacita' va a 1: la
   velatura .78 e' tarata sulle superfici quiete, su fondo pieno toglie
   contrasto e basta. */
.dxbl-btn-primary,
.dxbl-btn-success,
.dxbl-btn-danger,
.dxbl-btn-info,
.dxbl-btn-dark {
  --nx-icon-filter: var(--nx-icon-ink-light);
  --nx-icon-opacity: 1;
}

.dxbl-btn-warning {
  --nx-icon-filter: var(--nx-icon-ink-dark);
  --nx-icon-opacity: 1;
}

/* IL PULSANTE PIENO ROSSO NEL TEMA CHIARO (Scarta e ogni .dxbl-btn-danger)
   DevExpress ci scrive sopra il bianco fisso, e sul rosso di serie
   (#EF4444) la coppia misura 3.68:1 — sotto AA. Era il secondo dei tre
   punti dichiarati del tema chiaro (doc 13 par. 35), chiuso il 2026-08-13.

   Si scurisce il FONDO di un gradino (--nexus-error-strong, #DC2626 ->
   4.83:1) invece di scurire l'inchiostro: il testo scuro su rosso acceso,
   che in dark e' la medicina giusta, su fondo chiaro si legge come un
   errore di stile. Hover e active seguono il fondo nuovo, o al primo
   passaggio del mouse si tornerebbe al rosso di serie.

   Solo :not(.dxbl-disabled): il pulsante spento ha il proprio grigio, e
   forzargli un fondo rosso lo farebbe sembrare acceso. */
[data-nexus-theme="light"] .dxbl-btn-danger:not(.dxbl-disabled),
html:not([data-nexus-theme="dark"]) .dxbl-btn-danger:not(.dxbl-disabled) {
  --dxbl-btn-bg: var(--nexus-error-strong);
  --dxbl-btn-border-color: var(--nexus-error-strong);
  --dxbl-btn-hover-bg: color-mix(in srgb, black 10%, var(--nexus-error-strong));
  --dxbl-btn-hover-border-color: color-mix(in srgb, black 10%, var(--nexus-error-strong));
  --dxbl-btn-active-bg: color-mix(in srgb, black 18%, var(--nexus-error-strong));
}

/* AZIONE PRIMARIA NEL TEMA SCURO (Salva e ogni .dxbl-btn-primary)
   Il FONDO arriva gia' dal token: in dark --nexus-primary e' il teal di
   brand (nexus-tokens.css, blocco dark; doc 13 par. 27). Quello che il
   token non puo' dare e' l'INCHIOSTRO: DevExpress prende il testo dei
   pulsanti pieni da content-onprimary, che e' bianco fisso in entrambi i
   modi, e bianco su teal misura 1.9:1 - illeggibile. Qui il testo torna
   navy (14:1 sul teal), e con lui la silhouette dell'icona, che segue il
   colore del contenitore e non il tema (par. icone qui sopra): senza,
   il floppy bianco su teal spariva.
   Si scrivono le variabili del componente e non background/color, cosi'
   hover, active, focus e disabled restano quelli di DevExpress. L'ombra
   teal del CTA non si porta dietro: in dark l'elevazione la fanno le
   superfici, le ombre sono nere (doc 13 par. 12).
   L'esclusione di .dxbl-disabled non e' cosmetica: il pulsante spento non
   ha il fondo teal ma il grigio-navy dei disabilitati (#16304C), e li'
   l'inchiostro scuro rende il floppy invisibile - misurato, non supposto
   (verifica del 2026-08-02). Spento, l'icona torna chiara come il testo. */
[data-nexus-theme="dark"] .dxbl-btn-primary:not(.dxbl-disabled) {
  --dxbl-btn-color: var(--nx-navy-deep);
  --dxbl-btn-hover-color: var(--nx-navy-deep);
  --dxbl-btn-active-color: var(--nx-navy-deep);
  --nx-icon-filter: var(--nx-icon-ink-dark);
}

/* Stessa medicina per le ALTRE varianti piene. In dark i token di stato
   sono tinte CHIARE (--nexus-error #F87171, --nexus-success #22C55E,
   --nexus-info #38BDF8, riga "re-derived, not inverted" di
   nexus-tokens.css) e il bianco fisso di DevExpress ci scende sotto la
   soglia: il pulsante Scarta degli esiti misurava 2.76:1 nel pannello di
   lavorazione (verifica su TEST del 2026-08-13). Warning e' gia' escluso
   perche' il suo inchiostro di serie e' scuro. */
[data-nexus-theme="dark"] .dxbl-btn-danger:not(.dxbl-disabled),
[data-nexus-theme="dark"] .dxbl-btn-success:not(.dxbl-disabled),
[data-nexus-theme="dark"] .dxbl-btn-info:not(.dxbl-disabled) {
  --dxbl-btn-color: var(--nx-navy-deep);
  --dxbl-btn-hover-color: var(--nx-navy-deep);
  --dxbl-btn-active-color: var(--nx-navy-deep);
  --nx-icon-filter: var(--nx-icon-ink-dark);
}

/* Con l'inchiostro scuro va girato anche il verso dell'hover: di serie
   DevExpress SCURISCE il fondo (Scarta passava a #CE3F3C, e il navy
   sopra tornava a 3.4:1). Su un tema scuro l'hover schiarisce, e cosi'
   la coppia regge in tutti e tre gli stati. Una regola per variante:
   ogni fondo si schiarisce a partire dal PROPRIO token. */
[data-nexus-theme="dark"] .dxbl-btn-danger:not(.dxbl-disabled) {
  --dxbl-btn-hover-bg: color-mix(in srgb, var(--nx-on-canvas) 14%, var(--nexus-error));
  --dxbl-btn-active-bg: color-mix(in srgb, var(--nx-on-canvas) 24%, var(--nexus-error));
}
[data-nexus-theme="dark"] .dxbl-btn-success:not(.dxbl-disabled) {
  --dxbl-btn-hover-bg: color-mix(in srgb, var(--nx-on-canvas) 14%, var(--nexus-success));
  --dxbl-btn-active-bg: color-mix(in srgb, var(--nx-on-canvas) 24%, var(--nexus-success));
}
[data-nexus-theme="dark"] .dxbl-btn-info:not(.dxbl-disabled) {
  --dxbl-btn-hover-bg: color-mix(in srgb, var(--nx-on-canvas) 14%, var(--nexus-info));
  --dxbl-btn-active-bg: color-mix(in srgb, var(--nx-on-canvas) 24%, var(--nexus-info));
}

/* Nel telaio navy la silhouette e' sempre chiara, anche in tema light
   (stessa regola dei testi on-canvas): vale per le Action della
   HeaderToolbar quando ci saranno. Il pannello del menu account e'
   figlio DOM della colonna delle azioni ma superficie chiara, quindi
   torna all'inchiostro del tema - stessa eccezione dei pulsanti piu'
   sotto. */
.nx-actrail { --nx-icon-filter: var(--nx-icon-ink-light); }
.nx-actrail .dropdown-menu { --nx-icon-filter: var(--nx-icon-ink-theme); }

/* ---------------------------------------------------------------
   PULSANTI DEVEXPRESS NEL TELAIO NAVY (colonna delle azioni)
   Il tema light in hover imposta --dxbl-btn-hover-color al testo
   scuro: l'icona account (mask su currentColor) diventava navy su
   navy e spariva. Nel contesto on-canvas hover e active restano
   chiari con velatura bianca. Copre anche i pulsanti futuri della
   HeaderToolbar (QuickAccess / Notifications / Diagnostic).
   --------------------------------------------------------------- */
.nx-actrail .dxbl-btn {
  --dxbl-btn-color: var(--nx-on-canvas);
  --dxbl-btn-bg: transparent;
  --dxbl-btn-border-color: transparent;
  --dxbl-btn-hover-color: var(--nx-on-canvas);
  --dxbl-btn-hover-bg: var(--nx-canvas-hover);
  --dxbl-btn-border-hover-color: transparent;
  --dxbl-btn-active-color: var(--nx-on-canvas);
  --dxbl-btn-active-bg: var(--nx-canvas-active);
  --dxbl-btn-active-border-color: transparent;
}

/* Il pannello del menu account e' figlio DOM della colonna delle azioni
   ma e' una superficie chiara: i pulsanti (My Details, Log Off) tornano
   ai colori da superficie, altrimenti sarebbero bianco su bianco. */
.nx-actrail .dropdown-menu .dxbl-btn {
  --dxbl-btn-color: var(--nx-text);
  --dxbl-btn-hover-color: var(--nx-text);
  --dxbl-btn-hover-bg: var(--nx-field);
  --dxbl-btn-active-color: var(--nx-text);
  --dxbl-btn-active-bg: var(--nx-field-hover);
}

/* Il pannello e' un overlay del tema v2: niente bordo da 1px, raggio da
   card, ombra tinta navy. Di serie arriva squadrato e con bordo. */
.nx-actrail .account-main {
  border: none;
  border-radius: var(--nx-radius-card);
  box-shadow: var(--nx-shadow-float);
  background: var(--nx-surface);
  overflow: hidden;
  padding: var(--nexus-space-1);
  min-width: 240px;
  /* Di serie e' allineato a right: 0 e finisce incollato al bordo della
     finestra: con le icone in colonna sul bordo destro (2026-08-25) lo
     si stacca di quanto e' larga la colonna piu' un passo, cosi' non
     copre l'icona che lo apre. */
  right: calc(var(--nx-canvas-pad) + var(--nexus-space-6));
  margin-top: var(--nexus-space-2);
}

.nx-actrail .account-main .account-main-inner { padding: var(--nexus-space-2); }

/* Avatar: pastiglia teal con glifo scuro (regola di brand del design),
   al posto del disco grigio pieno. Il glifo e' una mask su currentColor,
   quindi basta il colore del contenitore; .text-white va neutralizzata. */
.nx-actrail .account-main .logo-container.text-white,
.nx-actrail .account-main .logo-container {
  background: color-mix(in srgb, var(--nx-teal) 18%, var(--nx-surface));
  color: var(--nx-teal-ink);
}

/* Nome utente in evidenza, azione secondaria in teal leggibile. */
.nx-actrail .account-main .user-info-container { align-items: center; }
.nx-actrail .account-main .dxbl-btn.dxbl-btn-outline-link {
  --dxbl-btn-color: var(--nx-teal-ink);
  --dxbl-btn-hover-color: var(--nx-teal-hover);
  padding-inline: 0;
}

/* Separatore prima di Esci: hairline coerente col resto del tema. */
.nx-actrail .account-main .log-off,
.nx-actrail .account-main > .account-main-inner + * {
  border-top: 1px solid var(--nx-line);
}

/* ---------------------------------------------------------------
   TAB A SEGMENTED PILL (v2.6)
   Scope .nx-tabs (la striscia TabbedMDI, CssClass nel template):
   .dxbl-tabs generico coprirebbe anche i tab interni dei calendari
   dei date editor. Stato attivo: .dxbl-active (verificato 26.1.3);
   l'underline e' un ::after su .dxbl-tabs-item, spenta qui sotto.
   --------------------------------------------------------------- */
.nx-tabs.dxbl-tabs {
  --dxbl-tabs-tab-border-thickness: 0px;
  --dxbl-tabs-tab-padding-y: 5px;      /* pill compatta: icona 24 + 10 */
  --dxbl-tabs-tab-bg: var(--nx-tab-inactive);
  --dxbl-tabs-tab-hover-bg: var(--nx-field-hover);
  --dxbl-tabs-tab-hover-color: var(--nx-text);
  --dxbl-tabs-tab-active-bg: var(--nx-tab-active);
  --dxbl-tabs-tab-active-color: var(--nx-text);
  --dxbl-tabs-tab-active-hover-bg: var(--nx-tab-active);
  --dxbl-tabs-tab-active-hover-color: var(--nx-text);
  --dxbl-tabs-tab-active-font-weight: var(--nexus-fw-semibold);
}

/* Variante B: il contenitore ha una tinta propria (--nx-tab-track) e
   corre per tutta la larghezza del foglio, cosi' si legge come blocco
   delle schede aperte. Le tinte sono scelte perche' la scala di
   luminanza resti monotona in entrambi i temi (foglio < track <
   attiva): il difetto precedente era il track a un soffio dal foglio in
   light e piu' chiaro della scheda attiva in dark. */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist {
  background: var(--nx-tab-track);
  border-radius: var(--nx-pill);
  padding: 3px;
  width: 100%;
  border-bottom: none;
}

/* Nessuna scheda aperta: il contenitore non si disegna. Senza questa
   regola restava una barra grigia vuota in testa al foglio, che non
   dice nulla (2026-09-30). Si guarda l'item e non il li perche' il
   tema puo' lasciare nodi di servizio nella lista. */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist:not(:has(.dxbl-tabs-item)) {
  display: none;
}

/* Aria tra l'icona della vista e il suo nome dentro la pillola. */
.nx-tabs.dxbl-tabs .dxbl-tabs-item img,
.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-image {
  margin-inline-end: 6px;
}

/* Spazio tra le pillole: la gap sul tablist non arriva agli item, che
   stanno dentro un ul > li; si distanzia la voce di lista. */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li {
  margin-inline-end: 6px;
}

/* Le catene ricalcano quelle del tema (che ha specificita' piu' alta
   di una classe semplice): con .nx-tabs davanti vincono sempre. */
/* Il fondo si dichiara qui e non tramite --dxbl-tabs-tab-bg: quella
   variabile non viene consumata dall'item (verificato a runtime, la
   background computata restava trasparente). In variante B le inattive
   sono piatte sul track e prendono superficie solo all'hover. */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item {
  border-radius: var(--nx-pill);
  background: var(--nx-tab-inactive);
  /* Contorno hairline: la scheda si legge come pillola anche senza
     superficie propria. E' un inset shadow e non un border, cosi' non
     entra nel box model e la densita' resta quella misurata. */
  box-shadow: var(--nx-tab-inactive-ring);
}

.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:hover,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item:hover,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:hover {
  background: var(--nx-field-hover);
}

.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item::after,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item::after,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item::after {
  content: none;
}

.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item.dxbl-active,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item.dxbl-active,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item.dxbl-active {
  background: var(--nx-tab-active);
  box-shadow: var(--nx-tab-active-ring), 0 1px 2px color-mix(in srgb, var(--nx-canvas) 10%, transparent);
}

/* Scheda dal nome lungo (utente 2026-10-07): il titolo di un task porta
   il nome del file allegato e una scheda sola occupava tutta la
   striscia, spingendo le altre fuori vista. La pillola ha un tetto di
   larghezza; dentro, il contenitore del testo e il testo possono
   restringersi (min-width 0, senza il quale un figlio flex non scende
   sotto la lunghezza del suo contenuto) e il nome finisce coi puntini.
   Icona e X di chiusura restano sempre intere. Il nome completo e'
   nel tooltip della scheda (NexusMainFormTemplate). */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item,
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item {
  max-width: var(--nx-tab-max-width, 22rem);
}

/* Catena dentro la pillola, letta dal DOM di XAF 26.1.5: .dxbl-text >
   div > .xaf-tab-header-template (icona, span flex col testo, X). Ogni
   anello deve poter scendere sotto la lunghezza del testo, altrimenti
   il tetto taglia di netto e la X finisce fuori dalla pillola. I
   puntini li mette gia' il tema su .dxbl-tabs-text-overflow. */
.nx-tabs.dxbl-tabs .dxbl-tabs-item > .dxbl-tabs-text-container,
.nx-tabs.dxbl-tabs .dxbl-tabs-item .dxbl-text,
.nx-tabs.dxbl-tabs .dxbl-tabs-item .dxbl-text > div,
.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-tab-header-template {
  min-width: 0;
  max-width: 100%;
}

.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-tab-header-template {
  display: flex;
  align-items: center;
}

.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-tab-header-template > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.nx-tabs.dxbl-tabs .dxbl-tabs-item .dxbl-tabs-text-overflow {
  min-width: 0;
}

.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-tab-header-template > img,
.nx-tabs.dxbl-tabs .dxbl-tabs-item .xaf-tab-header-template > .dxbl-tabs-close-button {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   SPLIT LAYOUT - la divisione si chiude tutta (2026-08-12)
   --------------------------------------------------------------- */
/* XAF dichiara 300px di minimo su ciascuna meta' dello split
   (.xaf-masterdetail-view in _content/DevExpress.ExpressApp.Blazor/
   styles.css): trascinando la divisione fino in fondo restava sempre
   una colonna di lista, e il documento del task non arrivava mai a
   prendersi la pagina. Con il minimo a zero il trascinamento e'
   libero; il comando "Nascondi elenco" (ListPaneCollapseController)
   la chiude del tutto, come il rail del menu. */
.xaf-masterdetail-container.direction-horizontal > .xaf-masterdetail-view {
  min-width: 0;
}

/* Due selettori per la stessa meta': la classe -listview puo' stare
   sull'elemento flex o su un suo figlio a seconda di come XAF compone
   il contenitore. Regola marcata !important perche' la percentuale
   della divisione XAF la scrive inline. */
body.nx-listpane-collapsed .xaf-masterdetail-container > .xaf-masterdetail-listview,
body.nx-listpane-collapsed .xaf-masterdetail-container > .xaf-masterdetail-view:has(> .xaf-masterdetail-listview) {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* Senza lista non c'e' niente da trascinare, e i 16px di margine per
   lato della maniglia resterebbero come una fascia vuota. */
body.nx-listpane-collapsed .xaf-masterdetail-container > .xaf-masterdetail-splitter {
  display: none;
}

/* ---------------------------------------------------------------
   AVVISI A SCHERMO (ShowMessage) - un avviso non copre la pagina
   ---------------------------------------------------------------
   In Blazor XAF non usa un toast DevExpress ma un proprio alert
   (.xaf-alert dentro .xaf-alerts-stack). Due comportamenti del
   framework, verificati in main.js 26.1.3, si sommavano in un
   difetto vistoso (utente 2026-08-24):

   - l'altezza dell'alert la decide il testo, e la pila e' alta
     quanto la finestra: un messaggio lungo (l'elenco degli errori
     di validazione) diventava un muro rosso da mezzo schermo;
   - `initAlertHandlers` FERMA il timer di chiusura su mouseenter e
     lo fa ripartire solo su mouseleave. Un muro che copre la pagina
     sta sempre sotto il puntatore: il timer non riparte mai e
     l'avviso "non si chiude piu' da solo".

   Qui si taglia la causa: l'alert non supera un terzo della finestra
   e il testo in eccesso scorre dentro di lui. La cura vera sta a
   monte (i messaggi si troncano prima di mandarli a schermo: doc 14
   par. 12), questa e' la rete. */
.xaf-alert {
  max-height: 33vh;
}

.xaf-alert .xaf-alert-text-container {
  max-height: 33vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------
   IL "..." STA ACCANTO AI COMANDI, NON IN FONDO ALLA RIGA
   ---------------------------------------------------------------
   Richiesta dell'utente 2026-09-15: il menu di troppo pieno (D157)
   nasceva come ULTIMO item della DxToolbar, quindi finiva dopo il
   blocco allineato a destra (frecce, Aggiorna, Salva e nuovo,
   Salva) - lontano dai comandi da cui erano uscite le voci che
   contiene, e attaccato al pulsante piu' pericoloso della fascia.
   Va messo dove chi legge lo cerca: subito dopo l'ultimo comando
   della fila di sinistra.

   La fila e' un flex e i pezzi stanno nel DOM in quest'ordine:
   gruppi di sinistra, `.dxbl-toolbar-placeholder` (lo spazio
   elastico che spinge a destra il resto), gruppi di destra, e per
   ultimo `.dxbl-toolbar-btn-ellipsis`. Non si puo' dare `order`
   negativo al "..." (finirebbe in testa a tutto): si spinge in
   avanti il placeholder E TUTTO CIO' CHE LO SEGUE, lasciando a 0
   il "...", che fra gli elementi a `order: 0` e' l'ultimo del DOM
   e quindi si posa esattamente in coda alla fila di sinistra.

   La colonna delle azioni sul bordo destro (`.nx-actrail__toolbar`)
   resta fuori: e' verticale, il concetto di "fondo della riga" non
   esiste. */
.dxbl-toolbar:not(.nx-actrail__toolbar) > .dxbl-btn-toolbar > .dxbl-toolbar-placeholder,
.dxbl-toolbar:not(.nx-actrail__toolbar) > .dxbl-btn-toolbar > .dxbl-toolbar-placeholder ~ * {
  order: 1;
}

.dxbl-toolbar:not(.nx-actrail__toolbar) > .dxbl-btn-toolbar > .dxbl-toolbar-btn-ellipsis {
  order: 0;
}