/* ============================================================
   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 due resterebbe visibile sotto l'editor senza bordo. */
  --dxbl-text-edit-underline-color: transparent;
  --dxbl-text-edit-underline-focused-color: transparent;
}
.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);
  box-shadow: inset 0 0 0 2px var(--nx-teal);
}

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

/* 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. */
.nx-topbar img[src*="IImageService"] { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------
   PULSANTI DEVEXPRESS NEL TELAIO NAVY (topbar)
   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-topbar .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 topbar ma e' una
   superficie chiara: i pulsanti (My Details, Log Off) tornano ai
   colori da superficie, altrimenti sarebbero bianco su bianco. */
.nx-topbar .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-topbar .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: staccato del margine del telaio (doc 13 par. 12). */
  right: var(--nx-canvas-pad);
  margin-top: var(--nexus-space-1);
}

.nx-topbar .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-topbar .account-main .logo-container.text-white,
.nx-topbar .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-topbar .account-main .user-info-container { align-items: center; }
.nx-topbar .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-topbar .account-main .log-off,
.nx-topbar .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);
}

/* Il contenitore resta trasparente: su una tinta propria (--nx-field) si
   confondeva col foglio in light (#F0F4F9 contro #F7F9FC) e in dark
   ribaltava l'idioma, perche' la scheda attiva su --nx-surface (#0B1F3A)
   risultava PIU' SCURA del contenitore (#122A47). Le pillole stanno
   direttamente sul foglio, distanziate dal gap. */
.nx-tabs.dxbl-tabs > .dxbl-tabs-tablist {
  background: transparent;
  border-radius: var(--nx-pill);
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  border-bottom: 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). Cosi' ogni scheda si legge
   come pillola anche da inattiva. */
.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);
}

.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);
}