/* Reset + fix strutturali Radzen.
   I token e il mapping del tema vivono in theme/tokens.css e theme/theme-default.css. */

*, *::before, *::after {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
}

/* `draggable="true"` e' solo un hint di presentazione in Blink, quindi il reset universale qui sopra lo
   sovrascrive e nessun elemento dell'app puo' essere trascinato. Chi dichiara il drag in modo esplicito
   deve poter vincere sul reset: senza questa riga il drag & drop HTML5 non parte mai. */
[draggable="true"] {
  -webkit-user-drag: element;
}

/* RF-29: gate globale dei segni di focus da tastiera. focusModality.js marca document.documentElement con
   l'ultima modalita' di input; quando e' "pointer" nessuna decorazione :focus-visible deve comparire, anche
   se il browser stesso la farebbe corrispondere (Chromium puo' far combaciare :focus-visible dopo un focus()
   avviato da script durante un gesto di puntatore). I campi editabili SONO coinvolti da :focus-visible lato
   browser (un input testuale/textarea a fuoco corrisponde a :focus-visible anche dopo un click, in ogni
   motore): l'esclusione esplicita qui sotto e' necessaria, non un dettaglio di :focus vs :focus-visible.
   L'anello dei campi editabili resta quindi governato solo dalle loro regole :focus/:focus-within esistenti
   (es. .rz-textbox:focus, .rz-numeric:focus-within piu' avanti in questo file). */
:root[data-di-focus-modality="pointer"] :focus-visible:not(:is(
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]),
  input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"],
    [type="reset"], [type="range"], [type="color"], [type="file"], [type="image"])
)) {
  outline: none !important;
  box-shadow: none !important;
}
:root[data-di-focus-modality="pointer"] .di-asset-action-button:has(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.di-slot-grid { display:grid; grid-template-columns:repeat(var(--di-slot-columns, 12), minmax(0, 1fr)); gap:1rem; padding:1rem; }

.di-global-search { display:flex; flex-direction:column; gap:var(--di-gap); padding:0; min-height:100%; }
.di-global-search-form { display:flex; gap:var(--di-space-2); align-items:center; }
.di-global-search-form .rz-textbox { flex:1 1 auto; }
.di-global-search-filters { display:flex; flex-wrap:wrap; gap:var(--di-gap); }
.di-global-search-grid { flex:1 1 auto; min-height:0; width:100%; }
.di-global-search-grid .rz-data-grid-data { overflow-x:auto; }
.di-global-search-error { color:var(--di-danger); }
.di-search-launcher {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.di-search-launcher .rz-textbox { width: 100%; min-width: 0; padding-inline: calc(var(--di-space-3) + 1.25rem + var(--di-space-2)) var(--di-space-3); }
.di-search-launcher > .rzi { position: absolute; inset-inline-start: var(--di-space-3); top: 50%; z-index: 1; color: var(--di-text-muted); transform: translateY(-50%); pointer-events: none; }

.rz-notification {
  --di-toast-accent: var(--di-info);
  inset-block-start: auto;
  inset-block-end: var(--di-gap);
  inset-inline-start: var(--di-gap);
  inset-inline-end: auto;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.rz-notification-item-wrapper {
  inline-size: min(28rem, calc(100vw - var(--di-gap) - var(--di-gap)));
  min-inline-size: 0;
  margin: 0;
  background: transparent;
}
.rz-notification .rz-notification-item {
  background-color: color-mix(in oklab, var(--di-surface-raised), var(--di-toast-accent) var(--di-toast-tint));
  color: var(--di-text);
  padding: var(--di-gap);
  gap: var(--di-gap);
  align-items: center;
  border-radius: var(--di-radius-md);
  box-shadow: var(--di-shadow-2);
  font-size: var(--di-type-body);
  line-height: 1.5;
}
.rz-notification-success {
  --di-toast-accent: var(--di-success);
}
.rz-notification-warn {
  --di-toast-accent: var(--di-warning);
}
.rz-notification-error {
  --di-toast-accent: var(--di-danger);
}
.rz-notification-info {
  --di-toast-accent: var(--di-info);
}
.rz-notification .rz-notification-message-wrapper {
  min-inline-size: 0;
  align-items: center;
  gap: var(--di-gap);
}
.rz-notification .rz-notification-message {
  min-inline-size: 0;
  gap: var(--di-micro-gap);
  overflow-wrap: anywhere;
}
.rz-notification .rz-notification-title {
  font-weight: 500;
}
.rz-notification .rz-notification-content {
  white-space: pre-line;
}
.rz-notification .rz-notification-title:empty,
.rz-notification .rz-notification-content:empty {
  display: none;
}
.rz-notification .rz-notification-icon {
  color: var(--di-toast-accent);
  flex-shrink: 0;
  margin: 0;
}
.rz-notification .di-undo-action,
.rz-notification .rz-notification-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: calc(var(--di-control-h) - var(--di-space-2));
  padding: var(--di-space-1) var(--di-space-2);
  border: 0;
  border-radius: var(--di-radius-sm);
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 1;
}
.rz-notification .di-undo-action {
  font: inherit;
  font-weight: 500;
  text-transform: none;
}
.rz-notification .rz-notification-close {
  inline-size: calc(var(--di-control-h) - var(--di-space-2));
  padding: var(--di-space-1);
}
.rz-notification .rz-notification-close:hover,
.rz-notification .di-undo-action:hover {
  color: inherit;
  background-color: var(--di-feedback-action-hover);
}
.rz-notification .rz-notification-close:focus-visible,
.rz-notification .di-undo-action:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
.rz-notification-item:has(.di-undo-notification) {
  padding: 0;
}
.rz-notification-item:has(.di-undo-notification) > .rz-notification-close,
.rz-notification-item:has(.di-undo-notification) .rz-notification-icon {
  display: none;
}
.rz-notification-item:has(.di-undo-notification) .rz-notification-title {
  inline-size: 100%;
  font-weight: 400;
}
.di-undo-notification {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  padding: var(--di-gap);
}
.di-undo-summary {
  flex: 1;
  min-inline-size: 0;
}

@media (max-width: 40rem) {
  .rz-notification {
    inset-inline-end: var(--di-gap);
  }
  .rz-notification-item-wrapper {
    inline-size: 100%;
  }
}

/* Navigation hub (app-launcher home): full-width category bands + borderless icon tiles.
   Superficie unica per tutta l'area: le categorie sono separate da un filetto inset e dal
   colore delle proprie icone, non da fondi alternati. Le icone occupano tutta la larghezza
   disponibile, quindi non resta il vuoto laterale di una griglia a colonne. */
.di-navigation-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--di-surface-raised);
}
.di-navigation-hub-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Misura massima della fascia: oltre, le tile si distendono su tutta la larghezza dello schermo
   e la riga diventa una corsa orizzontale. Le fasce restano ancorate a sinistra, come il launcher. */
.di-navigation-hub-band {
  padding: var(--di-space-4) var(--di-space-6) var(--di-space-6);
  max-inline-size: 88rem;
}
/* Il filetto vive dentro il padding della fascia successiva: resta rientrato come nel launcher
   di riferimento invece di tagliare l'intera larghezza della superficie. */
.di-navigation-hub-band + .di-navigation-hub-band {
  padding-block-start: 0;
}
.di-navigation-hub-band + .di-navigation-hub-band::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--di-border);
  margin-block-end: var(--di-space-6);
}
.di-navigation-hub-band[data-di-hub-color="1"] { --di-hub-icon: var(--di-series-1); }
.di-navigation-hub-band[data-di-hub-color="2"] { --di-hub-icon: var(--di-series-2); }
.di-navigation-hub-band[data-di-hub-color="3"] { --di-hub-icon: var(--di-series-3); }
.di-navigation-hub-band[data-di-hub-color="4"] { --di-hub-icon: var(--di-series-4); }
.di-navigation-hub-band[data-di-hub-color="5"] { --di-hub-icon: var(--di-series-5); }
.di-navigation-hub-band[data-di-hub-color="6"] { --di-hub-icon: var(--di-series-6); }
.di-navigation-hub-band[data-di-hub-color="7"] { --di-hub-icon: var(--di-series-7); }
.di-navigation-hub-band[data-di-hub-color="8"] { --di-hub-icon: var(--di-series-8); }
/* Intestazione "eyebrow": le tile sono l'elemento pieno della Home, il titolo di categoria le
   etichetta senza competere con loro. Alla dimensione del corpo non stabiliva alcuna gerarchia. */
.di-navigation-hub-band-header {
  display: flex;
  align-items: center;
  gap: var(--di-space-1);
  margin: 0 0 var(--di-space-3);
  font-size: var(--di-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--di-text-muted);
}
.di-navigation-hub-band-separator {
  display: inline-flex;
  color: var(--di-text-muted);
}
/* Il chevron segue il testo che separa: a 1.15rem era piu' grande del titolo. */
.di-navigation-hub-band-separator .rzi {
  font-size: 1em;
}
.di-navigation-hub-tiles {
  display: grid;
  /* auto-fill (non auto-fit) mantiene le tracce vuote: le icone conservano la posizione a
     sinistra e la larghezza residua si distribuisce in gutter uniformi, come nel launcher. */
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--di-space-3);
}
.di-navigation-hub-tile {
  appearance: none;
  border: none;
  border-radius: var(--di-radius-md);
  background: transparent;
  color: var(--di-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--di-space-2);
  padding: var(--di-space-3) var(--di-space-1);
  text-align: center;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.di-navigation-hub-tile:hover {
  background: var(--di-surface-hover);
  box-shadow: var(--di-shadow-1);
}
.di-navigation-hub-tile:focus-visible {
  outline: none;
  box-shadow: var(--di-focus-ring);
}
/* Il colore arriva dalla fascia: le icone di una categoria condividono la tinta, cosi' il
   raggruppamento resta leggibile senza fondi alternati. Fallback all'accento se la fascia
   non dichiara uno slot.
   La tinta veste il contenitore, non solo il glifo: otto hue sature a 40px erano l'elemento piu'
   pesante della schermata, e uno slot chiaro come --di-series-4 non regge il contrasto su
   --di-surface-raised. Il container soft porta la stessa codifica con molta meno area satura. */
.di-navigation-hub-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--di-radius-lg);
  background: color-mix(in oklch, var(--di-hub-icon, var(--di-accent)) 14%, transparent);
  color: var(--di-hub-icon, var(--di-accent));
}
.di-navigation-hub-tile-icon .rzi {
  font-size: 1.75rem;
}
/* Due righe al massimo: le celle di una riga della griglia si allineano gia' sulla piu' alta,
   quindi non serve riservare l'altezza anche quando ogni etichetta sta su una riga sola. */
.di-navigation-hub-tile-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--di-text-md);
  line-height: 1.25;
  color: var(--di-text);
  overflow-wrap: anywhere;
}
/* Superficie canvas, non raised: il corpo scorre sotto la barra e con lo stesso fondo l'unico
   confine era un filetto da 1px. Canvas e' piu' scuro del corpo in entrambi i temi. */
.di-navigation-hub-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  padding: var(--di-space-3) var(--di-space-6);
  border-block-start: 1px solid var(--di-border);
  background: var(--di-surface-canvas);
}
@media (max-width: 768px) {
  .di-navigation-hub-band {
    padding-inline: var(--di-space-4);
  }
  .di-navigation-hub-tiles {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  }
  .di-navigation-hub-actions {
    padding-inline: var(--di-space-4);
  }
}
.di-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--di-gap);
  padding: var(--di-space-4);
}

.di-metric-surface-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:.5rem; padding:1rem 1rem 0; }
.di-slot { min-width:0; border:1px solid var(--rz-base-300); border-radius:var(--rz-border-radius); background:var(--rz-base-background-color); padding:1rem; }
.di-kpi { display:grid; gap:var(--di-gap); font-size:var(--di-type-body); }
.di-kpi header { display:flex; align-items:center; gap:var(--di-gap); color:var(--di-text-muted); }
.di-kpi strong { font-size:2rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.di-kpi small { font-size:var(--di-type-secondary); line-height:1.5; }
.di-kpi-warning { background:var(--di-warning-soft); }
.di-kpi-critical { background:var(--di-danger-soft); }
.di-metric-error { color:var(--rz-danger); }
.di-metric-table table { width:100%; border-collapse:collapse; }
.di-metric-table th,.di-metric-table td { padding:.5rem; border-bottom:1px solid var(--rz-base-300); text-align:start; }
.di-metric-table td { text-align:end; font-variant-numeric:tabular-nums; }
.di-metric-widget-header { display:flex; align-items:center; justify-content:space-between; gap:var(--di-gap); }
.di-metric-widget-title { display:inline-flex; align-items:center; gap:var(--di-micro-gap); font-size:var(--di-type-section-title); font-weight:600; line-height:1.3; }
.di-metric-widget-actions { display:flex; align-items:center; gap:var(--di-gap); }
.di-metric-table-row { cursor:pointer; }
.di-metric-table-row:hover { background:var(--di-surface-hover); }
/* Native data tables use the same header and total surface as Radzen grids. */
.di-metric-table > table > :is(thead, tfoot) > tr > :is(th, td),
.di-metric-table > table > tbody > .di-metric-table-total > :is(th, td),
.di-files-table > thead > tr > th {
  background: var(--di-grid-header-surface);
  color: var(--di-text);
}
.di-metric-surface-notice { margin:0; padding:var(--di-gap); border-radius:var(--di-radius-md); background:var(--di-warning-soft); color:var(--di-warning-strong); font-size:var(--di-text-sm); }

/* The list metric dock uses a row for Right and a column for Bottom. RadzenLayout consumes the
   remaining flex space while the metric aside keeps the configured dock size. */
.di-entity-list-root { display:flex; width:100%; height:100%; }
.di-entity-reading-splitter { width:100%; height:100%; min-width:0; min-height:0; }
.di-entity-reading-splitter > .rz-splitter-pane { min-width:0; min-height:0; }
.di-entity-reading-splitter.rz-splitter-horizontal > .rz-splitter-bar { --di-splitter-structural-size:calc(8px + 2 * var(--di-gap)); box-sizing:content-box; padding-inline:var(--di-gap); background-clip:content-box; }
.di-entity-reading-splitter.rz-splitter-vertical > .rz-splitter-bar { --di-splitter-structural-size:calc(8px + 2 * var(--di-gap)); box-sizing:content-box; padding-block:var(--di-gap); background-clip:content-box; }
.di-entity-reading-splitter > .rz-splitter-pane:last-child { background:var(--di-surface-raised); }
.di-entity-list-master-content { display:flex; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
@media (max-width: 768px) {
  .di-entity-list-root { flex-direction:column; }
}
.di-metrics-dock-bottom { flex-direction:column; }
.di-entity-list-metrics { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--di-surface-raised); }
.di-metrics-dock-right > .di-entity-list-metrics { width:var(--di-metric-dock-width); border-inline-start:1px solid var(--di-border); }
.di-metrics-dock-right > .di-entity-list-metrics.di-entity-list-metrics-collapsed { width:auto; }
.di-metrics-dock-bottom > .di-entity-list-metrics { max-height:var(--di-metric-dock-max-height); border-block-start:1px solid var(--di-border); }
.di-entity-list-metrics-header { display:flex; align-items:center; gap:var(--di-space-2); padding:var(--di-space-1) var(--di-space-2); }
.di-metrics-dock-bottom .di-entity-list-metrics-header { flex-direction:row-reverse; }
.di-entity-list-metrics-title { font-weight:600; color:var(--di-text-muted); }
.di-entity-list-metrics-selection { margin-inline-start:auto; }
.di-metrics-dock-bottom .di-entity-list-metrics-selection { margin-inline-start:0; margin-inline-end:auto; }
.di-entity-list-metrics-selection-badge { border-radius:var(--di-radius-pill); background:var(--di-selection-container); color:var(--di-on-selection-container); padding:var(--di-space-1) var(--di-space-2); font-size:var(--di-text-sm); }
.di-entity-list-metrics-body { flex:1 1 0; min-height:0; overflow:auto; }
.di-metric-surface-selection .di-slot { background:var(--di-selection-container); border-color:var(--di-selection-indicator); }
@media (max-width: 768px) { .di-slot { grid-column:1 / -1 !important; } }

/* Cursore di base "freccia" sull'app (no I-beam ovunque); gli elementi
   cliccabili lo ridefiniscono a pointer e i loro figli lo ereditano —
   NON usare cursor:default su * (spegnerebbe l'ereditarietà sui figli). */
body { cursor: default; }

input, textarea, [contenteditable] {
  user-select: text;
  cursor: text;
}

/* Manina su tutto ciò che è cliccabile, DISCENDENTI INCLUSI (testo/icona):
   l'ereditarietà non basta perché il glifo icona può avere un cursore proprio. */
.rz-button, .rz-button *,
a[href], a[href] *,
[role="button"], [role="button"] *,
summary,
.rz-navigation-item-link, .rz-navigation-item-link *,
.rz-panelmenu-item, .rz-tabview-nav li, .rz-tabview-nav li *,
.rz-menu-item, .rz-menu-item *,
.rz-dropdown-item, .rz-listbox-item, .rz-paginator-element,
.rz-chkbox-box, .rz-radiobutton-box, .rz-switch,
.rz-selectbutton .rz-button, .rz-cell-data .rz-button,
.rz-clickable, .rz-sortable-column {
  cursor: pointer;
}
/* Mai la manina sui disabilitati: serve a spegnere il `pointer` ereditato dai cliccabili.
   Il cursore resta la freccia normale, non `not-allowed`: il simbolo di divieto è
   visivamente aggressivo e comunica un errore dove c'è solo un'azione non disponibile. */
.rz-state-disabled, .rz-state-disabled *,
.rz-button:disabled, .rz-button:disabled * {
  cursor: default;
}

/* Base e Light sono entrambe azioni neutre: Radzen le separa nella propria
   scala, ma nell'app devono condividere la stessa superficie per evitare che
   toolbar e dialog mostrino grigi diversi o fondi chiari nel tema scuro. */
.rz-button:is(.rz-base, .rz-light):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined),
.rz-splitbutton:is(.rz-base, .rz-light) > .rz-button:not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined) {
  background-color: var(--di-surface-sunken);
  color: var(--di-text);
}
.rz-button:is(.rz-base, .rz-light):not(.rz-state-disabled):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined):hover,
.rz-splitbutton:is(.rz-base, .rz-light) > .rz-button:not(.rz-state-disabled):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined):hover {
  background-color: var(--di-surface-hover);
  color: var(--di-text-strong);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--rz-text-font-family);
  font-size: var(--di-type-body);
  color: var(--di-text);
  /* Sfondo dell'app = canvas: le superfici principali possono staccarsi con gap
     e radius senza inventare wrapper decorativi nei componenti. */
  background: var(--di-surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* RadzenLayout deve riempire 100% del contenitore in cui si trova */
.rz-layout {
  height: 100% !important;
  min-height: 0 !important;
}

/* Radzen tab panels: position:absolute bypassa la catena height:100%
   che non funziona su flex-item con altezza calcolata. */
.rz-tabview {
  display: flex !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.rz-tabview-panels {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.rz-tabview-panel {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}

/* RadzenLayout body: impedisce scroll a livello contenitore (ogni Part gestisce il proprio overflow) */
.rz-body {
  overflow: hidden !important;
}

.di-shell-layout,
.di-menu-content-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  background: var(--di-surface-canvas);
}

.di-menu-content-layout {
  display: flex;
  gap: var(--di-gap);
  padding: var(--di-gap);
}

.di-shell-header {
  z-index: 1000;
  overflow: visible;
}

/* L'altezza del modello e' un minimo, non una gabbia: con un'altezza fissa il
   padding dell'header veniva assorbito dai controlli in overflow e il gap
   verticale reale collassava a meta'. Lasciando crescere la riga, il padding
   dichiarato (--di-gap) e' quello che si vede davvero. */
.di-shell-header-content {
  min-height: var(--di-shell-header-height, 48px);
  overflow: visible;
}

.di-shell-footer-content {
  height: var(--di-shell-footer-height, 32px);
  overflow: visible;
}

.di-shell-body-content {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: var(--di-gap);
  background: var(--di-surface-canvas);
}

/* Il body della shell resta canvas: la superficie raised appartiene ai contenuti
   che devono emergere (card, griglie, editor), non a un pannello unico che li
   copre tutti appiattendo la gerarchia. */
.di-shell-body-panel {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  background: transparent;
}

.di-shell-sidebar,
.di-menu-content-sidebar {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.di-shell-sidebar-start,
.di-menu-content-sidebar {
  --rz-sidebar-width: max-content;
  min-width: var(--di-sidebar-min-width, 280px);
  width: max-content;
  max-width: none;
}

.di-menu-content-sidebar {
  --di-sidebar-min-width: 260px;
  flex: 0 0 auto;
  width: max-content;
  box-sizing: border-box;
  border-inline-end: var(--rz-border-width) solid var(--di-border);
  background: var(--di-surface-sidebar);
}

.di-shell-sidebar-start {
  flex: 0 0 auto;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.di-shell-sidebar-start:not(.rz-sidebar-collapsed),
.di-shell-sidebar-start:not(.rz-sidebar-collapsed) .di-shell-sidebar-panel {
  overflow: visible;
}

.di-shell-sidebar-start.rz-sidebar-collapsed {
  min-width: 0;
  max-width: 0;
  padding: 0;
}

.di-shell-sidebar-panel {
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-inline-end: var(--rz-border-width) solid var(--di-border);
  background: var(--di-surface-sidebar);
  color: var(--di-text);
}

.di-shell-sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.di-shell-sidebar-content .di-navigation-menu {
  gap: var(--di-gap);
  padding-block-start: var(--di-gap);
}

.di-shell-sidebar-right {
  --rz-sidebar-width: var(--di-sidebar-width, 320px);
  max-width: min(var(--di-sidebar-width, 320px), 60vw);
}

.di-shell-sidebar-right.rz-sidebar-collapsed {
  max-width: 0;
}

.di-navigation-menu {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.di-navigation-search {
  flex: none;
  padding: var(--di-space-3) var(--di-space-3) 0;
  background: transparent;
}

.di-shell-sidebar-content .di-navigation-search {
  padding-block-start: 0;
}

.di-shell-sidebar-content .di-navigation-scroll {
  padding-block-start: 0;
}

.di-navigation-search-box {
  width: 100%;
}

.di-navigation-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--di-space-3);
  overflow: auto;
  background: transparent;
}

.di-navigation-panel-menu {
  width: max-content;
  min-width: 100%;
  padding: 0;
  background: transparent;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.di-navigation-panel-menu .rz-navigation-item-link,
.di-navigation-panel-menu .rz-navigation-item-text {
  white-space: nowrap;
}

.di-navigation-panel-menu .rz-navigation-item-wrapper,
.di-navigation-panel-menu .rz-navigation-item-link {
  border-radius: var(--di-radius-md);
}

.di-navigation-panel-menu > .rz-navigation-item {
  position: relative;
  margin-block-start: var(--di-space-2) !important;
  margin-inline: 0 !important;
  padding-block-start: var(--di-space-2);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.di-navigation-panel-menu > .rz-navigation-item:first-child {
  margin-block-start: 0 !important;
  padding-block-start: 0;
}

.di-navigation-panel-menu .rz-navigation-item {
  margin-inline: 0 !important;
}

.di-navigation-panel-menu > .rz-navigation-item + .rz-navigation-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--di-border);
}

.di-navigation-panel-menu .rz-navigation-item-link {
  color: var(--rz-panel-menu-item-color) !important;
  min-height: var(--di-control-h);
  height: var(--di-control-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--di-space-2);
  padding-block: 0 !important;
  padding-inline: var(--di-space-3) !important;
  overflow: visible;
}

.di-navigation-panel-menu .rz-navigation-item-text,
.di-navigation-panel-menu .rzi {
  color: inherit !important;
}

.di-navigation-panel-menu .rz-navigation-item-link > .rzi,
.di-navigation-panel-menu .rz-navigation-item-link > .rz-navigation-item-icon {
  position: static !important;
  flex: 0 0 var(--di-control-icon-size, 20px);
  width: var(--di-control-icon-size, 20px);
  min-width: var(--di-control-icon-size, 20px);
  height: var(--di-control-icon-size, 20px);
  margin: 0 !important;
  transform: none !important;
  text-align: center;
  line-height: var(--di-control-icon-size, 20px);
}

.di-navigation-panel-menu .rz-navigation-item-link > .rz-navigation-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.di-navigation-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  margin-block: 0;
  background: var(--rz-panel-menu-item-background-color);
  border: 1px solid transparent;
  transition:
    background-color var(--di-transition),
    border-color var(--di-transition),
    box-shadow var(--di-transition),
    transform var(--di-transition);
}

.di-navigation-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
  border: 0 !important;
  border-block-end: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.di-navigation-panel-menu .rz-navigation-item-link:hover,
.di-navigation-panel-menu .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  background: var(--rz-panel-menu-item-hover-background-color) !important;
  color: var(--rz-panel-menu-item-hover-color) !important;
  border-color: transparent;
}

.di-navigation-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  background: var(--rz-panel-menu-item-active-background-color) !important;
  color: var(--rz-panel-menu-item-active-color) !important;
  border-color: transparent;
}

.di-navigation-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
  background: var(--di-selection-container) !important;
  color: var(--di-on-selection-container) !important;
}

.di-navigation-panel-menu .rz-navigation-item-link-active::before,
.di-navigation-panel-menu .rz-navigation-item-wrapper-active::before {
  display: none !important;
}

.di-navigation-panel-menu .rz-navigation-menu {
  margin: 0;
  padding-block: 0;
  padding-inline-start: var(--di-space-3);
  padding-inline-end: var(--di-space-1);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.di-navigation-panel-menu .rz-navigation-menu .rz-navigation-menu {
  padding-inline-start: var(--di-space-2);
  padding-inline-end: var(--di-space-1);
}

/* RadzenRadioButtonList: forza espansione al 100% e rimuove min-width fissi */
.rz-radiobutton-list {
  width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* LabeledField standalone (fuori da FieldLayout/FieldRow, es. PartToolbar): label sopra il controllo, stessa
   unita' concettuale quindi mu fra le due parti. */
.di-labeled-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--di-micro-gap);
}

.di-labeled-field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--di-micro-gap);
  font-size: var(--di-type-label);
  font-weight: var(--di-label-weight);
  color: var(--di-text-muted);
  line-height: 1.5;
}
.di-labeled-field:focus-within .di-labeled-field-label {
  color: var(--di-text-strong);
}
.di-labeled-field-required > .di-labeled-field-label,
.di-labeled-field-required > .di-labeled-field-label .di-labeled-field-label {
  font-weight: var(--di-label-required-weight);
}

/* Feedback and Alt reveal share underline geometry; only their semantic colors differ. */
.di-field-feedback-label,
:root[data-di-peek="navigate"] [data-di-tooltip-context-help]:not(:is(.rz-menuitem, .rz-navigation-item, .rz-button, .di-navigation-hub-tile, .di-tooltip-help-host)),
:root[data-di-peek="navigate"] [data-di-tooltip-context-help] :is(.rz-button-text, .rz-menuitem-text, .rz-navigation-item-text),
:root[data-di-peek="navigate"] .di-navigation-hub-tile[data-di-tooltip-context-help] .di-navigation-hub-tile-label,
:root[data-di-peek="navigate"] [data-di-peek-hotspot],
:root[data-di-peek="navigate"] [data-di-peek-hotspot] .di-field-input {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: var(--di-border-width);
  text-underline-offset: .2em;
}
.di-field-feedback-label {
  text-decoration-color: var(--di-label-feedback-color);
  cursor: default;
}
.di-field-feedback-label-danger { --di-label-feedback-color: var(--di-danger); }
.di-field-feedback-label-warning { --di-label-feedback-color: var(--di-warning); }
.di-field-feedback-label-info { --di-label-feedback-color: var(--di-info); }

.di-summary-list dt {
  font-size: var(--di-type-label);
  font-weight: var(--di-label-weight);
  line-height: 1.5;
}
.di-summary-list dd {
  font-size: var(--di-type-body);
  font-variant-numeric: tabular-nums;
}

:root[data-di-peek="navigate"] [data-di-tooltip-context-help]:not(:is(.rz-menuitem, .rz-navigation-item, .rz-button, .di-navigation-hub-tile, .di-tooltip-help-host)),
:root[data-di-peek="navigate"] [data-di-tooltip-context-help] :is(.rz-button-text, .rz-menuitem-text, .rz-navigation-item-text),
:root[data-di-peek="navigate"] .di-navigation-hub-tile[data-di-tooltip-context-help] .di-navigation-hub-tile-label {
  text-decoration-color: var(--di-label-feedback-color, var(--di-accent));
}

.di-tooltip-help-host {
  display: inline-flex;
}

.di-tooltip-help-host :disabled {
  pointer-events: none;
}

/* Radzen makes disabled menu entries unreachable by pointer. Only entries with presentable help regain
   hover while the component callbacks keep their Disabled guards. */
:is(.rz-menuitem, .rz-navigation-item, .rz-splitbutton, li)[aria-disabled="true"]:has([data-di-tooltip-context-help]),
:is(.rz-menuitem, .rz-navigation-item, .rz-splitbutton, li)[aria-disabled="true"][data-di-tooltip-context-help] {
  opacity: .55 !important;
  pointer-events: auto !important;
}

:is(.rz-menuitem, .rz-navigation-item, .rz-splitbutton, li)[aria-disabled="true"]:has([data-di-tooltip-context-help]) *,
:is(.rz-menuitem, .rz-navigation-item, .rz-splitbutton, li)[aria-disabled="true"][data-di-tooltip-context-help] * {
  pointer-events: auto !important;
}

.di-labeled-field-control {
  display: block;
  width: 100%;
  min-width: 0;
}

/* Il controllo Radzen figlio diretto riempie la cella, come faceva il contenuto del FormField: il consumer
   non deve aggiungere classi di larghezza per ottenere un input a piena riga. Solo i controlli di input:
   pulsanti e contenuti composti conservano la larghezza intrinseca. */
.di-labeled-field-control > :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-multiselect,
  .rz-datepicker, .rz-autocomplete, .rz-lookup, .rz-mask) {
  display: block;
  width: 100%;
  min-width: 0;
}

/* Griglia campi condivisa (FieldLayout): righe ad altezza uniforme (come una textbox)
   con contenuto centrato in verticale — così checkbox/combobox (più bassi)
   non restano allineati in alto ma al centro della riga.
   Label e controllo sono la stessa unita' concettuale ma i due assi hanno
   bisogni opposti: in orizzontale serve G per staccare il testo dal bordo
   dell'input, in verticale basta mu perche' le righe hanno gia' l'altezza del
   controllo a separarle. */
.di-field-layout {
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr);
  row-gap: var(--di-micro-gap);
  column-gap: var(--di-gap);
  grid-auto-rows: minmax(var(--di-control-h), auto);
  align-items: center;
  /* Un controllo a riga singola e' piu' basso della riga e il resto e' respiro centrato: i controlli alti
     (textarea, editor, asset) non lo ricevono e restavano piu' attaccati. Lo stesso respiro come margine li
     uguaglia, cosi' la distanza fra due campi non dipende dal tipo di editor. */
  --di-field-row-slack: calc(var(--di-space-1) / 2);
}
.di-field-layout .di-labeled-field-control {
  margin-block: var(--di-field-row-slack);
}

/* FieldRow con Columns=1 (default): nessun box proprio, la coppia label/controllo della LabeledField figlia
   diventa direttamente le due celle della griglia esterna, cosi' le label restano allineate fra righe. */
.di-field-row {
  display: contents;
}

/* FieldRow con Columns>1: span di entrambe le colonne esterne e griglia interna con altrettante coppie
   label/controllo, dimensionata dalla custom property numerica impostata dal componente — nessuna classe
   per cardinalita'. */
.di-field-row-multi {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(var(--di-field-row-columns, 1), min-content minmax(0, 1fr));
  column-gap: var(--di-gap);
  row-gap: var(--di-micro-gap);
  align-items: center;
}

/* Dentro una FieldRow la LabeledField non genera un box proprio: label e controllo diventano le celle della
   griglia (esterna o interna) ospitante. La label riprende l'allineamento a destra tipico della colonna
   min-content, diverso dal caso standalone sopra. */
.di-field-row > .di-labeled-field {
  display: contents;
}

.di-field-row > .di-labeled-field > .di-labeled-field-label {
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}

.di-edit-fields-part {
  grid-template-columns: repeat(var(--di-edit-fields-columns, 1), minmax(0, 1fr));
}

.di-edit-fields-column {
  height: auto;
}

/* Named groups own their boundary and inset; the column owns spacing between groups. */
.di-edit-fields-group {
  --rz-fieldset-padding: 0;
  --rz-fieldset-border-radius: var(--di-radius-md);
  margin: 0;
  padding: var(--di-gap);
  border: var(--di-border-width) solid var(--di-border);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-subtle);
  box-shadow: none;
}

.di-edit-fields-group .rz-fieldset-legend,
.di-part-fieldset .rz-fieldset-legend {
  color: var(--di-text-strong);
  font-size: var(--di-type-body);
  font-weight: var(--di-group-title-weight);
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  padding: 0;
}

/* The fieldset inset already separates the legend from the first field. */
.di-edit-fields-group .rz-fieldset-legend-text {
  display: inline-block;
  padding-inline: var(--di-micro-gap);
}

.di-edit-fields-group-plain,
.di-edit-fields-group .rz-fieldset-content {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  overflow: visible;
}

/* Expanded groups must not clip field affordances; collapsed content keeps Radzen's clipping. */
.di-edit-fields-group .rz-fieldset-content-wrapper,
.di-edit-fields-group .rz-expander.rz-state-expanded > .rz-expander-content {
  overflow: visible;
}
.di-part-fieldset {
  --rz-fieldset-padding: var(--di-gap);
  --rz-fieldset-border-radius: var(--di-radius-md);
  border-color: var(--di-border);
  background: var(--di-surface-subtle);
}
.di-part-fieldset,
.di-part-fieldset .rz-fieldset-content {
  overflow: visible;
}
.di-part-fieldset-fill {
  height: 100%;
}

.di-field-help-icon {
  color: var(--rz-text-secondary-color);
  cursor: help;
  font-size: 1rem;
  line-height: 1;
}

.di-field-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  /* Bottoni allineati sul bordo destro dell'input, contati per categoria: `slot` sono quelli disegnati da
     FieldFrame (opener e overflow), `extra` quelli di un controllo Radzen riportati nella stessa fila (gli
     stepper del numerico). Sommandoli in un unico passo si ottiene la posizione di ciascuno e lo spazio da
     riservare nell'input, senza aritmetica duplicata caso per caso. */
  --di-field-slot-buttons: 0;
  --di-field-extra-buttons: 0;
  --di-field-action-count: calc(var(--di-field-slot-buttons) + var(--di-field-extra-buttons));
  --di-field-action-step: calc(var(--di-field-action-size) + var(--di-field-action-gap));
  --di-field-action-reserve: calc(
    var(--di-field-action-count) * var(--di-field-action-size)
    + (var(--di-field-action-count) - 1) * var(--di-field-action-gap)
    + var(--di-field-action-inset));
}
.di-field-frame-content {
  min-width: 0;
}
.di-field-provenance-preview-value {
  display: flex;
  align-items: center;
  min-height: var(--di-control-h);
  white-space: pre-wrap;
}

/* Slot azioni dei field: un solo posto, il bordo destro interno del controllo. Vale sia per i controlli
   nativi Radzen (il cui trigger interno viene nascosto piu' sotto) sia per le textbox read-only guidate da un
   picker, cosi' la stessa affordance sta sempre nello stesso punto con la stessa dimensione.
   Centrato sull'altezza reale del frame invece che su `--di-control-h`: i controlli non hanno tutti la stessa
   altezza (header e sidebar ne usano una ridotta) e un'altezza fissa li disallineerebbe di qualche pixel. */
.di-field-frame-actions {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--di-field-action-inset);
  display: flex;
  align-items: center;
  gap: var(--di-field-action-gap);
  /* Lo slot copre l'angolo destro dell'input: senza questo, il click e il caret nell'area dei bottoni
     verrebbero intercettati dal contenitore invece che dall'input sottostante. */
  pointer-events: none;
  /* Deve stare sopra `z-index: 1`, che l'input prende su :focus per non farsi tagliare il focus ring:
     senza questo, il fondo opaco dell'input coprirebbe i bottoni proprio nel campo attivo. */
  z-index: 2;
}
.di-field-frame-actions > * {
  pointer-events: auto;
}
/* Su una textarea multi-riga il centro del frame e' a meta' del testo: lo slot resta ancorato alla prima
   riga, dove l'utente si aspetta i comandi del campo. */
.di-field-frame:has(textarea) .di-field-frame-actions {
  inset-block-end: auto;
  height: var(--di-control-h);
}
.di-field-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--di-field-action-size);
  height: var(--di-field-action-size);
  padding: 0;
  border: none;
  border-radius: var(--di-radius-sm);
  background: transparent;
  color: var(--di-text-muted);
  cursor: pointer;
  transition: color var(--di-transition), background-color var(--di-transition);
}
.di-field-action .rzi {
  font-size: 1.25rem;
  line-height: 1;
}
.di-field-action:hover:not(:disabled) {
  background: var(--di-surface-hover);
  color: var(--di-text-strong);
}
.di-field-action:disabled {
  color: var(--di-neutral-500);
  cursor: default;
}
/* L'overflow e' un tab stop reale: senza anello proprio, arrivarci da tastiera non darebbe alcun segnale. */
.di-field-action:focus-visible {
  outline: none;
  box-shadow: var(--di-focus-ring);
}

/* Numerico: gli stepper di Radzen sono due mezze frecce impilate con un chrome proprio, l'unico punto della
   form con bottoni di un'altra famiglia. Vengono riportati alla forma dei bottoni dello slot e messi in fila
   accanto ad esso, con i glifi meno/piu' al posto delle frecce. La logica di incremento (step, min/max,
   decimali) resta di Radzen: qui si cambia solo la resa, non il comportamento. */
.di-field-frame:has(.rz-numeric-button) {
  --di-field-extra-buttons: 2;
}
.di-field-frame .rz-numeric-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inset-block: 0;
  margin-block: auto;
  width: var(--di-field-action-size);
  height: var(--di-field-action-size);
  border-radius: var(--di-radius-sm);
  background: transparent;
  color: var(--di-text-muted);
  transition: color var(--di-transition), background-color var(--di-transition);
}
/* Ordine visivo meno-piu': gli stepper partono da destra dopo i bottoni dello slot. */
.di-field-frame .rz-numeric-up {
  inset-inline-end: calc(var(--di-field-action-inset) + var(--di-field-slot-buttons) * var(--di-field-action-step));
}
.di-field-frame .rz-numeric-down {
  inset-inline-end: calc(var(--di-field-action-inset) + (var(--di-field-slot-buttons) + 1) * var(--di-field-action-step));
}
/* In MeasureField il FieldFrame ospita sia il numeric sia il dropdown unità. L'opener del dropdown occupa
   uno slot sul frame esterno, ma non va sottratto alla larghezza del numeric: gli spinner si ancorano al suo bordo. */
.di-field-frame:has(.di-measure-field .rz-numeric-button) .rz-numeric-up {
  inset-inline-end: var(--di-field-action-inset);
}
.di-field-frame:has(.di-measure-field .rz-numeric-button) .rz-numeric-down {
  inset-inline-end: calc(var(--di-field-action-inset) + var(--di-field-action-step));
}
.di-field-frame .rz-numeric-button .rzi {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: initial;
}
.di-field-frame .rz-numeric-up .rzi::before {
  content: "add";
}
.di-field-frame .rz-numeric-down .rzi::before {
  content: "remove";
}
.di-field-frame .rz-numeric-button:hover {
  background: var(--di-surface-hover);
  color: var(--di-text-strong);
}
.di-field-frame .rz-numeric.rz-state-disabled .rz-numeric-button {
  background: transparent;
  color: var(--di-neutral-500);
}
.di-field-frame:hover .rz-numeric-button,
.di-field-frame:focus-within .rz-numeric-button {
  color: var(--di-text);
}

/* Riserva nell'input lo spazio dei bottoni: il testo non deve passare sotto. Vale anche per il numerico
   senza slot, dove il padding nativo di Radzen coprirebbe una sola colonna di bottoni invece di due. */
.di-field-frame:is(.di-field-frame-has-actions, :has(.rz-numeric-button)) :is(input.rz-textbox, input.rz-inputtext, textarea.rz-textarea, .rz-dropdown-label) {
  padding-inline-end: var(--di-field-action-reserve);
}
/* Due livelli di segnale, non tre: a riposo il glifo e' discreto perche' su una form lunga N icone a
   contrasto pieno diventano rumore; diventa pieno appena il campo e' sotto il puntatore o ha il focus. */
.di-field-frame:hover .di-field-action,
.di-field-frame:focus-within .di-field-action {
  color: var(--di-text);
}

/* Se il valore si imposta solo dalle azioni (lookup, DataScope, protected, secret) il glifo e' l'unica
   affordance del campo: resta a contrasto pieno e tutto il corpo e' cliccabile. */
.di-field-frame-value-from-actions {
  cursor: pointer;
}
.di-field-frame-value-from-actions .di-field-action {
  color: var(--di-text);
}

/* Un'azione puo' portare uno stato nel proprio colore (traduzioni presenti o non salvate): resta cosi' anche a
   campo a riposo, e' l'unica indicazione e non richiede un secondo elemento. */
.di-field-frame .di-field-action.di-field-action-info:not(:disabled) {
  color: var(--di-info);
}
.di-field-frame .di-field-action.di-field-action-warning:not(:disabled) {
  color: var(--di-warning);
}

/* Nodo letto solo dagli screen reader tramite aria-errormessage: nessun testo visibile accanto al controllo. */
.di-field-error-message {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* I trigger interni di Radzen sono sostituiti dallo slot: tenerne due significherebbe inseguire il CSS
   interno di Radzen a ogni upgrade per allinearne geometria e colore. Restano nel DOM, non rimossi, perche'
   `DiOnceFields.openPicker` li clicca programmaticamente per aprire il popup nativo. */
.di-field-frame .rz-datepicker-trigger,
.di-field-frame .rz-dropdown-trigger {
  display: none;
}
.di-field-input {
  display: block;
  width: 100%;
  min-width: 0;
}
:is(input.di-field-input, .di-field-input input, textarea.di-field-input, .di-field-input textarea)::placeholder {
  color: var(--di-neutral-500);
  font: inherit;
  letter-spacing: inherit;
  opacity: 1;
}
:is(.di-field-input, .di-data-scope-picker-input, .di-part-search-box-input):focus {
  position: relative;
  z-index: 1;
}
/* Stessa ragione della regola sopra, estesa. Ogni .di-field-frame e' posizionato,
   quindi il frame successivo nel DOM dipinge il proprio fondo opaco sull'alone
   del precedente: con le righe a mu l'alone dei due field adiacenti si sovrappone
   e senza lift verrebbe coperto. La regola sopra copre solo i controlli che
   ricevono :focus in prima persona (textbox, textarea); dropdown, datepicker,
   numeric, lookup e FormField lo ricevono su un discendente. Il lift va sul
   frame, l'unico antenato comune a tutti i tipi di controllo; il secondo
   selettore copre i field che non passano da FieldFrame (asset, lookup su
   oggetto), che non essendo posizionati finiscono sotto i frame vicini. */
.di-field-frame:focus-within,
.di-field-layout .di-labeled-field-control:focus-within {
  position: relative;
  z-index: 1;
}
.di-picker-host {
  width: 100%;
  min-width: 0;
}
.di-field-input.rz-textarea {
  /* Almeno due righe reali: la textarea resta visivamente distinta da un input
     e il contenuto non si appoggia in alto. Nessuna forzatura di height:
     evita il salto 1->2 righe durante la digitazione. */
  min-height: calc(2lh + 2 * var(--di-space-2));
  /* Il grip di resize nativo e' geometria authored dall'utente su una superficie
     la cui altezza appartiene al layout: dentro una dialog rompe la catena
     content-fit/full-height, e in una part sfonda la riga o la cella. L'altezza
     resta quella dichiarata dalle righe del field; lo scroll assorbe il resto. */
  resize: none;
  overflow-y: auto;
}

/* ============================================================================
   Polish trasversale (cfr. 13-theming-design-system.md §6)
   Dettagli che alzano la qualità percepita senza appesantire il tema.
   ============================================================================ */

/* Scrollbar coerenti col tema: su un'app piena di liste/pannelli le scrollbar di
   sistema spezzano l'identità visiva. Un'unica struttura per entrambi i profili
   di input - binario trasparente, thumb a pillola inset - parametrizzata dai
   token: Touch cambia solo --di-scrollbar-size (48px, presa a dito) e
   --di-scrollbar-thumb-inset.

   La geometria vive nei pseudo-elementi ::-webkit-scrollbar: sono l'unico
   meccanismo che accetta una larghezza arbitraria. In Chromium/WebKit le
   proprietà standard scrollbar-width/scrollbar-color hanno la precedenza e
   *disattivano* i pseudo-elementi appena vengono dichiarate (era la causa della
   scrollbar Touch bloccata sul valore "thin" di sistema), quindi restano
   confinate ai browser che non li supportano - Firefox - dove sono l'unica leva.

   I selettori partono da :root[data-di-input] - attributo sempre presente, anche
   al first paint server-side - per superare in specificità le regole scrollbar
   del tema Radzen (body:not(.rz-default-scrollbars) ...) senza dipendere
   dall'ordine di caricamento dei fogli. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--di-neutral-400) transparent;
  }
  /* Qui la larghezza non e' parametrizzabile: in Touch si rinuncia a "thin" per
     avere almeno la scrollbar piena, l'unica alternativa disponibile. */
  :root[data-di-input="touch"] * {
    scrollbar-width: auto;
  }
}

:root[data-di-input]::-webkit-scrollbar,
:root[data-di-input] body::-webkit-scrollbar,
:root[data-di-input] body ::-webkit-scrollbar {
  width: var(--di-scrollbar-size);
  height: var(--di-scrollbar-size);
  background: transparent;
}

:root[data-di-input]::-webkit-scrollbar-track,
:root[data-di-input] body::-webkit-scrollbar-track,
:root[data-di-input] body ::-webkit-scrollbar-track,
:root[data-di-input]::-webkit-scrollbar-corner,
:root[data-di-input] body::-webkit-scrollbar-corner,
:root[data-di-input] body ::-webkit-scrollbar-corner {
  background: transparent;
}

:root[data-di-input]::-webkit-scrollbar-thumb,
:root[data-di-input] body::-webkit-scrollbar-thumb,
:root[data-di-input] body ::-webkit-scrollbar-thumb {
  background: var(--di-neutral-400);
  border: var(--di-scrollbar-thumb-inset) solid transparent;
  background-clip: content-box;
  border-radius: var(--di-radius-pill);
  /* Thumb mai più corto del binario: in Touch resta afferrabile anche su
     contenuti molto lunghi. */
  min-width: var(--di-scrollbar-size);
  min-height: var(--di-scrollbar-size);
}

:root[data-di-input="pointer"]::-webkit-scrollbar-thumb:hover,
:root[data-di-input="pointer"] body::-webkit-scrollbar-thumb:hover,
:root[data-di-input="pointer"] body ::-webkit-scrollbar-thumb:hover {
  background: var(--di-neutral-500);
  background-clip: content-box;
}

:root[data-di-input="touch"] :is(.rz-menuitem, .rz-menu-item, .rz-dropdown-item,
  .rz-listbox-item, .rz-paginator-element, .rz-tabview-nav li,
  .rz-tabview-nav li > .rz-tabview-title, .rz-panelmenu-item) {
  min-height: var(--di-hit-min);
}

/* Keyboard focus uses a thin neutral edge; pointer focus adds no decoration. */
.rz-button:focus-visible,
.rz-menu-item:focus-visible,
.rz-tabview-title:focus-visible,
.rz-link:focus-visible,
.rz-switch:focus-visible,
.rz-listbox-item:focus-visible,
a:focus-visible {
  outline: var(--di-focus-outline);
  outline-offset: -1px;
  box-shadow: none;
  border-radius: var(--di-radius-sm);
}

/* Card/pannelli: rilievo morbido sul canvas (gerarchia per superfici). */
.rz-card { border: 1px solid var(--di-border); }

/* Numeri tabellari: allineamento delle cifre in griglie e KPI. */
.rz-datatable td, .rz-grid-table td, .rz-numeric input {
  font-variant-numeric: tabular-nums;
}

.di-value-start { --di-value-align: start; }
.di-value-end { --di-value-align: end; }
.di-value-center { --di-value-align: center; }

:is(.di-value-start, .di-value-end, .di-value-center),
:is(.di-value-start, .di-value-end, .di-value-center) :is(.di-entity-list-cell-hit, .di-query-grid-cell-hit, .rz-cell-data),
.di-field-frame:is(.di-value-start, .di-value-end, .di-value-center) input {
  text-align: var(--di-value-align);
}

.rz-grid-table thead th:is(.di-value-start, .di-value-end, .di-value-center) .rz-column-title {
  justify-content: var(--di-value-align);
}

.di-value-numeric,
.di-value-numeric input {
  font-variant-numeric: tabular-nums;
}

.di-value-code,
.di-value-code input {
  font-family: var(--di-font-mono);
}

.di-number-with-suffix {
  display: flex;
  align-items: center;
  gap: var(--di-micro-gap);
  min-width: 0;
}

.di-number-with-suffix > .di-field-frame {
  flex: 1;
  min-width: 0;
}

.di-number-suffix { white-space: nowrap; }
.di-number-suffix-idle { visibility: hidden; }

/* Shared by lightweight collection cells and their editors. The reserve describes the
   largest action slot, so nullable values and focus never renegotiate column geometry. */
.di-editor-slots-0 { --di-editor-slot-count: 0; }
.di-editor-slots-1 { --di-editor-slot-count: 1; }
.di-editor-slots-2 { --di-editor-slot-count: 2; }
.di-editor-slots-3 { --di-editor-slot-count: 3; }
.di-editor-slots-4 { --di-editor-slot-count: 4; }
.di-editor-with-unit { --di-editor-extra-width: var(--di-field-unit-width); }
.di-editor-number { --di-editor-extra-width: var(--di-field-number-suffix-width); }

.di-field-editor {
  width: 100%;
  min-width: 0;
}

.di-grid-field-display,
.di-grid-field-editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--di-control-h);
}

.di-grid-field-editor {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

/* Blockify native inline controls to remove baseline descent space, and center
   shorter controls inside the same fixed-height slot as text and numeric inputs. */
.di-grid-field-editor .di-field-frame-content {
  display: grid;
  align-items: center;
  justify-items: var(--di-value-align, start);
  min-height: var(--di-control-h);
}

.di-grid-field-display {
  line-height: var(--di-control-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-start: var(--di-field-text-inset);
  padding-inline-end: calc(var(--di-field-text-inset) + var(--di-editor-slot-count, 0) * (var(--di-field-action-size) + var(--di-field-action-gap)) + var(--di-editor-extra-width, 0px));
}

.di-grid-field-editor textarea.rz-textarea {
  height: var(--di-control-h) !important;
  min-height: var(--di-control-h) !important;
  max-height: var(--di-control-h);
  resize: none;
}

.di-grid-field-editor:has(.di-asset-field) {
  overflow: auto;
}

.di-grid-measure-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  width: auto;
}

/* Only the glyph is sized here; button/menu hit targets retain their input-profile metrics. */
.di-part-toolbar .rzi,
.di-menu .rzi,
.di-dialog-surface-expand .rzi,
.di-dialog-actions .rzi,
.di-metric-widget-header .rzi {
  font-size: var(--di-text-xl);
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Transizioni leggere solo su elementi interattivi. */
.di-ui-experience {
  display: contents;
  --di-skeleton-animation: none;
  --di-loading-animation: none;
}

.di-ui-experience[data-ui-motion="essential"] {
  --di-transition: 0ms;
  --di-shell-fade-duration: 0ms;
}

.di-ui-experience[data-ui-motion="rich"] {
  --di-skeleton-animation: di-skeleton-shimmer 1.4s ease infinite;
  --di-loading-animation: di-loading-pulse 1.05s ease-in-out infinite;
}

.rz-button, .rz-menu-item, .rz-card, .rz-tabview-title, .rz-listbox-item {
  transition: background-color var(--di-transition), color var(--di-transition),
              border-color var(--di-transition), box-shadow var(--di-transition);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   Fix mirati sui componenti Radzen (separatori, focus, visibilità)
   Override di regole, non di variabili: quando il tema "default" non espone
   una custom property per il comportamento voluto.
   ============================================================================ */

/* A subtle cell mesh keeps wide tables readable; frozen boundaries remain explicit. */
.rz-grid-table tbody td {
  border-bottom: var(--di-border-width) solid var(--di-border-subtle);
}
.rz-grid-table tbody td:not(:last-child),
.rz-grid-table thead th:not(:last-child) {
  border-inline-end: var(--di-border-width) solid var(--di-border-subtle);
}
/* Selection stays frozen for scrolling, but uses the same divider as regular columns. */
.rz-grid-table :is(th, td).di-grid-select-column.rz-frozen-cell {
  border-inline-end: var(--di-border-width) solid var(--di-border-subtle) !important;
  box-shadow: none;
}
:is(.rz-grid-table, .rz-pivot-table) > thead > tr > :is(th, td) {
  /* Radzen's frozen-cell rule also applies to headers, including the selection checkbox. */
  --rz-grid-frozen-cell-background-color: var(--rz-grid-header-background-color);
}
.rz-grid-table thead th {
  border-bottom: var(--di-border-width) solid var(--di-border);
}
:is(.rz-grid-table, .rz-pivot-table) > tfoot > tr > :is(th, td) {
  /* Frozen totals belong to the footer band, not to the data rows. */
  --rz-grid-frozen-cell-background-color: var(--rz-grid-foot-background-color);
}
/* Cornice esterna della griglia */
.rz-datatable {
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-md);
}

/* --- Checkbox: box sempre visibile; spunta in accento pieno --------------- */
.rz-chkbox-box {
  border: 1.5px solid var(--di-border-strong) !important;
  background-color: var(--di-surface-raised);
}
.rz-chkbox-box.rz-state-active {
  border-color: var(--di-accent) !important;
  background-color: var(--di-accent) !important;
}

/* --- Pannelli flottanti: bordo + ombra coerenti (lookup, dropdown, menu) --- */
.rz-lookup-panel,
.rz-autocomplete-panel,
.rz-overlaypanel,
.rz-dropdown-panel {
  border: 1px solid var(--di-border-strong) !important;
  box-shadow: var(--di-shadow-3) !important;
  border-radius: var(--di-radius-md);
}

/* --- Voce selezionata di menu/dropdown/listbox/split-button: Radzen forza
   border-radius:0 in modo hardcoded (non è una custom property), va
   sovrascritto qui per recuperare l'arrotondamento simil-Material3. --- */
.rz-menuitem:hover,
.rz-menuitem.rz-state-highlight,
.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-highlight,
.rz-autocomplete-list-item:hover,
.rz-autocomplete-list-item.rz-state-highlight,
.rz-multiselect-item:hover,
.rz-multiselect-item.rz-state-highlight,
.rz-listbox-item:hover,
.rz-listbox-item.rz-state-highlight {
  border-radius: var(--di-radius-sm) !important;
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-hover,
.rz-listbox-item:hover,
.rz-listbox-item.rz-state-hover {
  background-color: var(--di-surface-hover) !important;
  color: var(--di-text-strong) !important;
}

.rz-dropdown-item:hover *,
.rz-dropdown-item.rz-state-hover *,
.rz-listbox-item:hover *,
.rz-listbox-item.rz-state-hover * {
  color: var(--di-text-strong) !important;
}

.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item.rz-state-selected,
.rz-listbox-item.rz-state-highlight,
.rz-listbox-item.rz-state-selected {
  background-color: var(--di-selection-container) !important;
  color: var(--di-on-selection-container) !important;
}

.rz-dropdown-item.rz-state-highlight *,
.rz-dropdown-item.rz-state-selected *,
.rz-listbox-item.rz-state-highlight *,
.rz-listbox-item.rz-state-selected * {
  color: var(--di-on-selection-container) !important;
}

/* Chip a riposo: stessa superficie dei bottoni standard di toolbar (Base/Filled), perche' la fila di chip
   companion e' una barra di comandi come le altre e non deve introdurre un terzo grigio. Solo lo stato
   selezionato porta colore, con la coppia selection della riga di griglia (regola seguente). */
.rz-chip:not(.rz-chip-selected) {
  background-color: var(--di-surface-sunken);
  color: var(--di-text);
}
.rz-chip:not(.rz-chip-selected):not(.rz-state-disabled):hover {
  background-color: var(--di-surface-hover);
  color: var(--di-text-strong);
  filter: none;
}

/* Chip selezionato: stessa coppia selection di righe di griglia e voci di lista, invece del contorno di
   default. Radzen deriva --rz-chip-selected-outline da --rz-outline-focus e riusa quell'outline anche per
   :focus-visible, quindi selezione e fuoco risultano lo stesso segno; il riempimento separa i due stati e
   lascia l'outline al solo fuoco (la regola di focus ha specificita' maggiore e continua a vincere). */
.rz-chip.rz-chip-selected {
  outline: none;
  background-color: var(--di-selection-container);
  color: var(--di-on-selection-container);
}

/* Analysis and companion selectors share both the chip component and its surrounding spacing. */
.di-chip-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--di-gap);
  flex: 0 0 auto;
}
.di-part-tabs-chip-host {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.di-part-tabs-chip-host > .di-part-tabs {
  flex: 1 1 0;
  height: auto;
}
.di-part-tabs-chip-host > .di-chip-strip > .rz-chip {
  /* Chips use border-box sizing: reserve the content height in addition to their native inset. */
  min-height: calc(var(--di-analysis-chip-content-min-height) + 2 * var(--rz-chip-padding-block) + 2 * var(--rz-chip-border-width));
}

/* Direct role selectors keep document chrome out of nested section tabs. */
:is(.di-page-tabs, .di-part-tabs) > .rz-tabview-nav {
  gap: var(--di-gap);
  padding: 0;
  border-bottom: none;
}
.di-page-tabs > .rz-tabview-nav > li {
  border: var(--di-border-width) solid transparent !important;
  border-top-width: calc(2 * var(--di-border-width)) !important;
  border-bottom: 0 !important;
  border-radius: var(--di-radius-sm) var(--di-radius-sm) 0 0;
  background-color: transparent;
}
:is(.di-page-tabs, .di-part-tabs) > .rz-tabview-nav > li .rz-tabview-title,
:is(.di-page-tabs, .di-part-tabs) > .rz-tabview-nav > li .rz-tabview-title *,
.di-page-tabs > .rz-tabview-nav > li .di-page-tab-title,
.di-page-tabs > .rz-tabview-nav > li .di-page-tab-title > span:first-child {
  color: var(--di-text) !important;
}
.di-page-tabs > .rz-tabview-nav > li.rz-tabview-selected {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--di-border-width)) !important;
  background-color: var(--di-surface-raised);
  border-color: var(--di-border) !important;
  border-top-color: var(--di-selection-indicator) !important;
}
:is(.di-page-tabs, .di-part-tabs) > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title,
:is(.di-page-tabs, .di-part-tabs) > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title *,
.di-page-tabs > .rz-tabview-nav > li.rz-tabview-selected .di-page-tab-title,
.di-page-tabs > .rz-tabview-nav > li.rz-tabview-selected .di-page-tab-title > span:first-child {
  color: var(--di-selection) !important;
}
.di-page-tabs > .rz-tabview-panels {
  border: var(--di-border-width) solid var(--di-border);
  border-radius: 0 0 var(--di-radius-sm) var(--di-radius-sm);
  background: var(--di-surface-raised);
  box-shadow: none !important;
}

/* Reserve the indicator in every state so selecting a section never moves its content. */
.di-part-tabs.rz-tabview > .rz-tabview-nav {
  /* The strip supports touch panning; its scrollbar need not use the full touch track height. */
  --di-scrollbar-size: var(--di-tab-scrollbar-size);
  --di-scrollbar-thumb-inset: var(--di-tab-scrollbar-thumb-inset);
  flex-shrink: 0;
  min-width: 0;
}
.di-part-tabs.rz-tabview-top > .rz-tabview-nav,
.di-part-tabs.rz-tabview-bottom > .rz-tabview-nav {
  overflow-x: auto;
}
.di-part-tabs.rz-tabview-top > .rz-tabview-nav {
  border-bottom: var(--di-border-width) solid var(--di-border);
}
.di-part-tabs.rz-tabview-bottom > .rz-tabview-nav {
  border-top: var(--di-border-width) solid var(--di-border);
}
.di-part-tabs.rz-tabview-left > .rz-tabview-nav {
  border-right: var(--di-border-width) solid var(--di-border);
}
.di-part-tabs.rz-tabview-right > .rz-tabview-nav {
  border-left: var(--di-border-width) solid var(--di-border);
}
.di-part-tabs.rz-tabview > .rz-tabview-nav > li {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: var(--di-tab-indicator-size) solid transparent !important;
  border-radius: var(--di-radius-sm);
  background-color: transparent;
}
.di-part-tabs.rz-tabview > .rz-tabview-nav > li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
  background-color: var(--di-surface-hover);
}
.di-part-tabs.rz-tabview > .rz-tabview-nav > li.rz-tabview-selected {
  background-color: var(--di-tab-selected-surface);
}
.di-part-tabs.rz-tabview > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title,
.di-part-tabs.rz-tabview > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title * {
  color: var(--di-selection) !important;
}
.di-part-tabs.rz-tabview-top > .rz-tabview-nav > li {
  border-radius: var(--di-radius-sm) var(--di-radius-sm) 0 0;
}
.di-part-tabs.rz-tabview-bottom > .rz-tabview-nav > li {
  border-radius: 0 0 var(--di-radius-sm) var(--di-radius-sm);
}
.di-part-tabs.rz-tabview-left > .rz-tabview-nav > li {
  border-radius: var(--di-radius-sm) 0 0 var(--di-radius-sm);
}
.di-part-tabs.rz-tabview-right > .rz-tabview-nav > li {
  border-radius: 0 var(--di-radius-sm) var(--di-radius-sm) 0;
}
.di-part-tabs.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected {
  border-bottom-color: var(--di-selection-indicator) !important;
}
.di-part-tabs.rz-tabview-bottom > .rz-tabview-nav > li.rz-tabview-selected {
  border-top-color: var(--di-selection-indicator) !important;
}
.di-part-tabs.rz-tabview-left > .rz-tabview-nav > li.rz-tabview-selected {
  border-right-color: var(--di-selection-indicator) !important;
}
.di-part-tabs.rz-tabview-right > .rz-tabview-nav > li.rz-tabview-selected {
  border-left-color: var(--di-selection-indicator) !important;
}
.di-part-tabs.rz-tabview > .rz-tabview-panels {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

/* Nested sections keep their grouped strip; Analysis opts into real chips at the component boundary. */
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav {
  align-self: flex-start;
  max-width: 100%;
  gap: 0;
  padding: var(--di-tab-track-padding);
  border: 0;
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-sunken);
}
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav > li {
  border-radius: var(--di-radius-sm);
}
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav > li > button[role="tab"] {
  min-height: calc(var(--di-tab-nested-height) - 2 * var(--di-tab-indicator-size));
  padding-block: 0;
  padding-inline: var(--di-tab-inline-padding);
}
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav > li.rz-tabview-selected {
  background: var(--di-surface-raised);
}
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title,
.di-part-tabs.di-part-tabs-nested > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title * {
  color: var(--di-selection) !important;
}
.di-part-tabs-single {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  height: 100%;
  min-height: 0;
}
.di-part-tabs-single > .di-part-fill {
  flex: 1 1 0;
}
.di-part-tabs-caption {
  flex: 0 0 auto;
  color: var(--di-text-strong);
  font-size: var(--di-type-label);
  font-weight: var(--di-group-title-weight);
}

/* The document owns the outer inset; sections only separate their strip from the content. */
.rz-tabview-panel {
  padding: var(--di-gap) !important;
}
.di-part-tabs > .rz-tabview-panels > .rz-tabview-panel {
  padding: 0 !important;
}
.di-part-tabs.rz-tabview-top > .rz-tabview-panels > .rz-tabview-panel {
  padding-top: var(--di-gap) !important;
}
.di-part-tabs.rz-tabview-bottom > .rz-tabview-panels > .rz-tabview-panel {
  padding-bottom: var(--di-gap) !important;
}
.di-part-tabs.rz-tabview-left > .rz-tabview-panels > .rz-tabview-panel {
  padding-left: var(--di-gap) !important;
}
.di-part-tabs.rz-tabview-right > .rz-tabview-panels > .rz-tabview-panel {
  padding-right: var(--di-gap) !important;
}

/* Companion chips own this selector. Only its own chrome disappears, never descendant tabs. */
.di-part-tabs.di-part-tabs-content-only > .rz-tabview-nav {
  display: none;
}
.di-part-tabs.di-part-tabs-content-only > .rz-tabview-panels > .rz-tabview-panel {
  padding: 0 !important;
}

/* Layout comune delle Part: i token distinguono contesti diversi invece di
   forzare lo stesso spazio tra regioni, toolbar, field e splitter. */
.di-part-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  overflow: visible;
}
.di-part-layout-stack {
  gap: 0;
  background: transparent;
}
.di-part-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent !important;
  overflow: visible !important;
}
.di-part-layout > .rz-header,
.di-part-layout > .rz-footer {
  position: static !important;
  flex: 0 0 auto;
  height: auto !important;
  min-height: var(--di-control-h);
  padding: 0 !important;
  background: transparent !important;
  border: none;
  overflow: visible !important;
}
.di-part-layout > .rz-body {
  position: static !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible !important;
  background: transparent !important;
}
.di-part-layout > .rz-header > .di-part-toolbar {
  margin-bottom: var(--di-gap);
  padding-top: 0;
  padding-bottom: 0;
  padding-inline: 0;
}
.di-part-layout > .rz-footer > .di-part-toolbar {
  margin-top: var(--di-gap);
  padding-block: var(--di-focus-guard);
  padding-inline: 0;
}
.di-part-layout > .rz-body > .rz-splitter,
.di-part-layout > .rz-body .rz-splitter-pane {
  background: transparent;
}
.di-part-toolbar {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  width: 100%;
  min-width: 0;
  flex: none;
  padding-block: var(--di-focus-guard);
  overflow: visible;
}

/* Compact Pointer is a density change, not a reduced Touch target: toolbar padding must not turn a 32px
   control into a 40px footer. Wrapping remains free to grow beyond the floor when commands need a new row. */
:root[data-di-density="compact"][data-di-input="pointer"] .di-part-toolbar {
  min-height: var(--di-control-h);
  padding-block: 0;
}

/* Altezza uniforme dei controlli in toolbar: bottoni Radzen e la label
   upload custom condividono la stessa altezza dei field (--di-control-h). */
.di-part-toolbar .rz-button {
  height: var(--di-control-h);
  box-sizing: border-box;
}
/* Secondary commands share the input surface; color remains reserved for action intent. */
.di-part-toolbar .rz-button:is(.rz-base, .rz-light):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined) {
  border: var(--di-border-width) solid var(--di-border);
  background-color: var(--di-surface-raised);
  color: var(--di-text);
}
.di-part-toolbar .rz-button:is(.rz-base, .rz-light):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-variant-outlined):not(.rz-state-disabled):not(:disabled):hover {
  border-color: var(--di-border-strong);
  background-color: var(--di-surface-hover);
  color: var(--di-text-strong);
}
.di-control-icon-button {
  flex: 0 0 var(--di-control-h);
  width: var(--di-control-h);
  min-width: var(--di-control-h);
  padding-inline: 0;
}
.di-toolbar-separator {
  align-self: stretch;
  width: 1px;
  margin-block: var(--di-micro-gap);
  margin-inline: var(--di-micro-gap);
  background: var(--di-border);
}
.di-part-layout-stack > .di-part-toolbar:first-child {
  margin-bottom: var(--di-gap);
  padding: 0;
}
.di-part-layout-stack > .di-part-body + .di-part-toolbar,
.di-part-layout-stack > .di-part-toolbar:last-child:not(:first-child) {
  margin-top: var(--di-gap);
  padding-block: var(--di-focus-guard);
}
.di-part-layout-stack > .di-part-body {
  background: transparent;
}
.di-part-toolbar-wrap {
  flex-wrap: wrap;
}
.di-part-toolbar-end {
  justify-content: flex-end;
}
.di-part-toolbar-space {
  justify-content: space-between;
}
.di-part-toolbar-fill {
  flex: 1 1 160px;
  min-width: 160px;
  overflow: visible;
}
.di-part-toolbar-fill > * {
  width: 100%;
}
.di-part-search-box {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.di-part-search-box-toolbar {
  flex: 0 1 calc(var(--di-control-h) * 7.5);
  width: min(100%, calc(var(--di-control-h) * 7.5));
}
.di-part-search-box-input.rz-textbox {
  width: 100%;
  padding-inline-start: var(--di-control-h);
}
.di-part-search-box:has(> .di-part-search-box-clear) > .di-part-search-box-input.rz-textbox {
  padding-inline-end: calc(var(--di-control-h) + var(--di-space-1));
}
.di-part-search-box-icon {
  position: absolute;
  /* The focused input is raised to level 1; keep the icon above its opaque background. */
  z-index: 2;
  inset-inline-start: 0;
  inset-block: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--di-control-h);
  color: var(--di-text-muted);
  pointer-events: none;
}
.di-part-search-box-icon .rz-icon {
  font-size: var(--di-text-xl);
}
.di-part-search-box-clear {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--di-space-1);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--di-control-h) - var(--di-space-2));
  min-width: calc(var(--di-control-h) - var(--di-space-2));
  height: calc(var(--di-control-h) - var(--di-space-2));
  border: 0;
  border-radius: var(--di-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--di-text);
  cursor: pointer;
  transform: translateY(-50%);
}
.di-part-search-box-clear:hover,
.di-part-search-box-clear:focus-visible {
  background: var(--di-accent-soft);
  color: var(--di-accent-strong);
}
.di-part-search-box-clear .rz-icon {
  font-size: var(--di-text-xl);
}
.di-entity-list-search-filter {
  display: flex;
  align-items: center;
  gap: var(--di-space-2);
  width: 100%;
  min-width: 0;
}
.di-entity-list-search-box {
  flex: 1 1 auto;
  min-width: 160px;
}
.di-entity-list-filter-button-active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--di-selection-indicator) 35%, transparent);
}
.di-inline-error-banner {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--di-gap);
  padding: var(--di-space-2) var(--di-space-3);
  border: var(--di-border-width) solid var(--di-danger);
  border-radius: var(--di-radius-md);
  background: var(--di-danger-soft);
  color: var(--di-danger-strong);
  font-size: var(--di-text-sm);
}
.di-inline-error-banner > span {
  flex: 1 1 auto;
  min-width: 0;
}
.di-part-search-box-applied .di-part-search-box-input.rz-textbox,
.di-part-search-box-applied .di-part-search-box-input.rz-textbox:hover,
.di-part-search-box-applied .di-part-search-box-input.rz-textbox:focus {
  border-color: var(--di-selection-indicator) !important;
  background-color: var(--di-selection-container) !important;
  color: var(--di-on-selection-container) !important;
  caret-color: var(--di-selection-indicator);
}
.di-part-search-box-applied .di-part-search-box-clear,
.di-part-search-box-applied .di-part-search-box-icon {
  color: var(--di-on-selection-container);
}
.di-part-search-box-applied .di-part-search-box-clear:hover,
.di-part-search-box-applied .di-part-search-box-clear:focus-visible {
  background: var(--di-selection-active);
  color: var(--di-on-selection-container);
}
/* Etichetta informativa in toolbar (es. percorso corrente in FilesPart). */
.di-part-toolbar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--di-text-muted);
}
.di-toolbar-menu-button {
  --di-toolbar-menu-bg: var(--di-surface-raised);
  --di-toolbar-menu-hover-bg: var(--di-surface-hover);
  --di-toolbar-menu-fg: var(--di-text);
  --di-toolbar-menu-border: var(--di-border);
  display: inline-flex;
  flex: none;
}
.di-toolbar-menu-button-primary {
  --di-toolbar-menu-bg: var(--di-accent);
  --di-toolbar-menu-hover-bg: var(--di-accent-hover);
  --di-toolbar-menu-fg: var(--di-accent-fg);
  --di-toolbar-menu-border: var(--di-accent);
}
.di-toolbar-menu-button-base,
.di-toolbar-menu-button-light {
  --di-toolbar-menu-bg: var(--di-surface-raised);
  --di-toolbar-menu-fg: var(--di-text);
  --di-toolbar-menu-border: var(--di-border);
}
/* Current Radzen menus place the trigger link inside a wrapper, separate from popup items. */
.di-toolbar-menu-button > .rz-navigation-item > .rz-navigation-item-wrapper {
  border: var(--di-border-width) solid var(--di-toolbar-menu-border);
  border-radius: var(--di-radius-md);
  background: var(--di-toolbar-menu-bg) !important;
}
.di-toolbar-menu-button > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  min-height: calc(var(--di-control-h) - 2 * var(--di-border-width));
  padding-block: 0;
  padding-inline: var(--di-space-3);
  color: var(--di-toolbar-menu-fg) !important;
}
.di-toolbar-menu-button > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rzi {
  color: var(--di-toolbar-menu-fg) !important;
}
.di-toolbar-menu-button > .rz-navigation-item:not(.rz-state-disabled) > .rz-navigation-item-wrapper:hover {
  background: var(--di-toolbar-menu-hover-bg) !important;
}
.di-toolbar-menu-button > .rz-navigation-menu,
.di-toolbar-menu-button.rz-navigation-menu,
.di-toolbar-menu-button > ul {
  margin: 0;
  padding: 0;
  background: transparent;
}
.di-toolbar-menu-button > .rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-link,
.di-toolbar-menu-button.rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-link,
.di-toolbar-menu-button > .rz-navigation-item > .rz-navigation-item-link,
.di-toolbar-menu-button > .rz-menu-item > .rz-menu-item-link,
.di-toolbar-menu-button > .rz-menu-item > .rz-menu-toggle,
.di-toolbar-menu-button > .rz-menuitem > .rz-menu-toggle {
  min-height: var(--di-control-h);
  padding-block: 0;
  padding-inline: var(--di-space-3);
  border: 1px solid var(--di-toolbar-menu-border);
  border-radius: var(--di-radius-md);
  background: var(--di-toolbar-menu-bg) !important;
  color: var(--di-toolbar-menu-fg) !important;
}
.di-toolbar-menu-button > .rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-link .rzi,
.di-toolbar-menu-button.rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-link .rzi,
.di-toolbar-menu-button > .rz-navigation-item > .rz-navigation-item-link .rzi,
.di-toolbar-menu-button > .rz-menu-item > .rz-menu-item-link .rzi,
.di-toolbar-menu-button > .rz-menu-item > .rz-menu-toggle .rzi,
.di-toolbar-menu-button > .rz-menuitem > .rz-menu-toggle .rzi {
  color: var(--di-toolbar-menu-fg) !important;
}
.di-popup-split-button {
  display: inline-flex;
  align-items: stretch;
}
.di-popup-split-button > .rz-button:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.di-popup-split-button > .rz-button:last-child {
  min-width: auto;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.di-popup-split-button > .rz-button + .rz-button {
  margin-inline-start: 1px;
}
.di-menu-separator {
  height: 1px;
  margin: var(--di-space-1) var(--di-space-2);
  background: var(--di-border);
}
/* Shared menu vocabulary: preserve Radzen geometry and use the application's selection tokens. */
/* Radzen focuses the popup for keyboard navigation even when opened by pointer.
   Keep that focus without a container ring or a preselected-looking command. */
.di-menu.rz-menu:not(.rz-profile-menu):focus-visible,
.di-menu.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper {
  outline: none;
  box-shadow: none;
}
.di-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper .rz-navigation-item-text {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* An expanded group is not a selected option. Explicit selection and current links keep their colors. */
.di-menu.rz-menu:not(.rz-profile-menu) .rz-navigation-item:not(.di-menu-item-selected) > .rz-navigation-item-wrapper-active:not(:has(> .active)) {
  background-color: var(--di-surface-hover);
}
.di-menu.rz-menu:not(.rz-profile-menu) .rz-navigation-item:not(.di-menu-item-selected) > .rz-navigation-item-wrapper-active:not(:has(> .active)) > .rz-navigation-item-link,
.di-menu.rz-menu:not(.rz-profile-menu) .rz-navigation-item:not(.di-menu-item-selected) > .rz-navigation-item-wrapper-active:not(:has(> .active)) > .rz-navigation-item-link > .rzi {
  color: var(--di-text-strong);
}
/* Radzen completes submenu closure on animationend, so retain a short animation. */
.di-menu .rz-navigation-menu:is(.rz-open, .rz-close) {
  animation-duration: var(--di-menu-motion-duration);
}
.di-popup-menu:not(:has(.rz-navigation-menu)) {
  max-block-size: calc(100dvh - 2 * var(--di-gap));
  overflow-y: auto;
}
.di-menu-section {
  list-style: none;
  padding: var(--di-space-2) var(--di-space-3);
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
  font-weight: 600;
}
.di-menu-section:not(:first-child) {
  border-top: var(--di-border-width) solid var(--di-border);
}
.di-menu-separator + .di-menu-section {
  border-top: none;
}
/* Hint shortcut separato dalla caption (RF-22/AC-12): coda visuale allineata a destra nella stessa riga
   flex del link, mai concatenato al testo della voce. aria-hidden sullo span: il chord e' gia' esposto via
   aria-keyshortcuts sulla voce. */
.rz-navigation-item-link > .di-menu-item-shortcut {
  margin-inline-start: auto;
  padding-inline-start: var(--di-gap);
  color: var(--di-text-muted);
  white-space: nowrap;
}
.di-menu-item-selected > .rz-navigation-item-wrapper,
.di-menu-item-selected > .rz-navigation-item-wrapper:hover {
  position: relative;
  background: var(--di-selection-container) !important;
  font-weight: 600;
}
.di-menu-item-selected > .rz-navigation-item-wrapper::before {
  display: none !important;
}
.di-menu-item-selected > .rz-navigation-item-wrapper > .rz-navigation-item-link,
.di-menu-item-selected > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rzi {
  color: var(--di-on-selection-container) !important;
}
.di-part-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.di-content-host {
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.di-part-fill {
  width: 100%;
  height: 100%;
  min-height: 0;
}
/* Contenitori focusabili (tabindex=-1) solo per tenere il focus nello scope del router shortcut dopo un
   click su un'area vuota, o come punto d'ingresso tastiera (EntityList, B03): non sono un controllo,
   quindi nessun indicatore di focus. */
.di-page-tab-entry:focus,
.di-part-dialog-root:focus,
.di-part-data-grid-host:focus {
  outline: none;
}
.di-part-dialog-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--di-gap);
}
.di-part-dialog-frame {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rz-dialog-content:has(.di-part-dialog-root) {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body:has(.di-spreadsheet-edit-host) .rz-context-menu:has(.rz-spreadsheet-cell-menu) {
  display: none;
}
.di-spreadsheet-surface .rz-spreadsheet {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.di-spreadsheet-surface .rz-virtual-grid {
  flex: 1 1 auto;
  min-height: 0;
  isolation: isolate;
}
.di-spreadsheet-surface .rz-spreadsheet-column-header,
.di-spreadsheet-surface .rz-spreadsheet-corner-header {
  z-index: 2;
  background: var(--di-surface-sunken);
}
.di-spreadsheet-surface .rz-spreadsheet-column-header.rz-spreadsheet-header-active {
  background: var(--di-surface-hover);
}
.di-spreadsheet-surface .rz-spreadsheet-cell {
  border-inline-end: 1px solid var(--di-border);
  border-bottom: 1px solid var(--di-border);
  padding: var(--di-space-1) var(--di-space-2);
  font-size: var(--di-text-sm);
}
.di-spreadsheet-surface .rz-spreadsheet-selection-range {
  background: color-mix(in srgb, var(--di-selection) 18%, transparent);
}
.di-spreadsheet-surface .rz-spreadsheet-selection-cell {
  background: color-mix(in srgb, var(--di-selection) 12%, transparent);
}
.di-spreadsheet-surface .rz-spreadsheet-cell-menu {
  display: none;
}
.di-part-scroll {
  overflow: auto;
}
.di-part-data-grid-host {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
  .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable)) {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
  .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-data-grid-data, .rz-datatable-data) {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: auto !important;
}

:root[data-di-input="touch"]
  :is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
      .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-grid-table, .rz-datatable) tbody tr {
  height: var(--di-grid-row-h);
}

:root[data-di-input="touch"] :is(.di-control-icon-button, .di-field-action, .di-segment,
  .rz-tabview-nav li, .rz-paginator-element) {
  min-width: var(--di-hit-min);
  min-height: var(--di-hit-min);
}

/* La selezione riga usa la cella come area di tocco: in Touch cresce soltanto la
   colonna - quadrata, lato pari all'altezza della riga - mentre il checkbox resta
   il glifo Pointer (vedi l'esclusione nel floor tattile qui sotto).

   La larghezza reale della colonna vive sul <col> del colgroup, dove Radzen la
   scrive inline, e la tabella e' a layout fisso: per questo servono `!important`
   e il triplo bersaglio col/th/td. `:has(td.di-grid-select-column)` limita la
   regola alle griglie che hanno davvero la colonna di selezione, che per
   costruzione e' la prima e non e' riordinabile. */
:root[data-di-input="touch"]
  :is(.rz-grid-table, .rz-datatable):has(td.di-grid-select-column) > colgroup > col:first-child,
:root[data-di-input="touch"] :is(th, td).di-grid-select-column {
  width: var(--di-grid-row-h) !important;
  min-width: var(--di-grid-row-h) !important;
}

:root[data-di-input="touch"] .di-grid-select-cell {
  min-height: var(--di-grid-row-h);
}

:root[data-di-input="touch"] .di-grid-select-cell-hit {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

:root[data-di-input="touch"] .di-grid-select-cell-glyph {
  position: relative;
  z-index: 1;
}

/* Touch affordances use the element Radzen actually listens to. The interactive box grows to the
   target while a pseudo-element keeps the checkbox/radio glyph at its Pointer size; negative margins
   return the borrowed hit area to the surrounding layout. */
:root[data-di-input="touch"] .rz-dialog-titlebar-close {
  min-width: var(--di-hit-min);
  min-height: var(--di-hit-min);
}

:root[data-di-input="touch"] .rz-chkbox:not(.di-grid-select-column *) {
  width: var(--di-hit-min);
  min-width: var(--di-hit-min);
  height: var(--di-hit-min);
  margin: calc((var(--rz-checkbox-height) - var(--di-hit-min)) * .5);
}

:root[data-di-input="touch"] .rz-chkbox:not(.di-grid-select-column *) .rz-chkbox-box {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-di-input="touch"] .rz-chkbox:not(.di-grid-select-column *) .rz-chkbox-box::before,
:root[data-di-input="touch"] .rz-radiobutton .rz-radiobutton-box::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--rz-checkbox-width);
  height: var(--rz-checkbox-height);
  content: "";
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--di-border-strong);
  border-radius: var(--rz-checkbox-border-radius);
  background: var(--di-surface-raised);
}

:root[data-di-input="touch"] .rz-chkbox:not(.di-grid-select-column *) .rz-chkbox-box.rz-state-active::before {
  border-color: var(--di-accent);
  background: var(--di-accent);
}

:root[data-di-input="touch"] .rz-chkbox:not(.di-grid-select-column *) .rz-chkbox-box .rzi,
:root[data-di-input="touch"] .rz-radiobutton .rz-radiobutton-box .rzi {
  position: relative;
  z-index: 1;
}

:root[data-di-input="touch"] .rz-radiobutton {
  width: var(--di-hit-min);
  min-width: var(--di-hit-min);
  height: var(--di-hit-min);
  margin: calc((var(--rz-radio-height) - var(--di-hit-min)) * .5);
}

:root[data-di-input="touch"] .rz-radiobutton .rz-radiobutton-box {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-di-input="touch"] .rz-radiobutton .rz-radiobutton-box::before {
  width: var(--rz-radio-width);
  height: var(--rz-radio-height);
  border-radius: var(--rz-radio-border-radius);
}

:root[data-di-input="touch"] .rz-radiobutton .rz-radiobutton-box.rz-state-active::before {
  border-color: var(--rz-radio-checked-background-color);
  background: var(--rz-radio-checked-background-color);
}

:root[data-di-input="touch"] .rz-switch {
  height: var(--di-hit-min);
  min-height: var(--di-hit-min);
  margin-block: calc((1.8rem - var(--di-hit-min)) * .5);
}

:root[data-di-input="touch"] .rz-switch .rz-switch-circle {
  background: transparent;
}

:root[data-di-input="touch"] .rz-switch .rz-switch-circle::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  z-index: 0;
  height: 1.8rem;
  content: "";
  transform: translateY(-50%);
  border-radius: calc(5 * var(--rz-border-radius));
  background: var(--rz-switch-background-color);
}

:root[data-di-input="touch"] .rz-switch.rz-switch-checked .rz-switch-circle::after {
  background: var(--rz-switch-checked-background-color);
}

:root[data-di-input="touch"] .rz-switch .rz-switch-circle::before {
  z-index: 1;
}

/* Calendar days and navigation own their handlers in Radzen. Give those exact nodes the floor instead of
   enlarging the calendar container, while leaving their text and icons at the framework dimensions. */
:root[data-di-input="touch"] :is(.rz-calendar-prev, .rz-calendar-next),
:root[data-di-input="touch"] .rz-calendar-view td .rz-state-default {
  min-width: var(--di-hit-min);
  min-height: var(--di-hit-min);
}

:root[data-di-input="touch"] .rz-calendar-view td .rz-state-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:root[data-di-input="touch"] .rz-dialog:not(.di-touch-keyboard-dialog) {
  max-inline-size: calc(100vw - 2 * var(--di-gap));
  max-block-size: calc(100vh - 2 * var(--di-gap));
}

:root[data-di-input="touch"] .rz-dialog:not(.di-touch-keyboard-dialog) > .rz-dialog-content {
  min-height: 0;
  overflow: auto;
}

/* The splitter bar itself receives Radzen's drag listeners. Its border is transparent hit area and its
   negative margin preserves the original flex allocation, so Touch does not widen the structural divider. */
:root[data-di-input="touch"] .rz-splitter-horizontal > .rz-splitter-bar {
  --di-splitter-structural-size: 8px;
  box-sizing: border-box;
  width: var(--di-hit-min);
  margin-inline: calc((var(--di-splitter-structural-size) - var(--di-hit-min)) * .5);
  padding: 0 !important;
  border-inline: calc((var(--di-hit-min) - 8px) * .5) solid transparent;
  background-clip: content-box;
}

:root[data-di-input="touch"] .rz-splitter-vertical > .rz-splitter-bar {
  --di-splitter-structural-size: 8px;
  box-sizing: border-box;
  height: var(--di-hit-min);
  margin-block: calc((var(--di-splitter-structural-size) - var(--di-hit-min)) * .5);
  padding: 0 !important;
  border-block: calc((var(--di-hit-min) - 8px) * .5) solid transparent;
  background-clip: content-box;
}

/* Component splitters reserve their visual spacing in Pointer. Keep that same reservation in Touch while
   the interactive bar expands around the unchanged 8px glyph. */
:root[data-di-input="touch"] :is(.di-entity-reading-splitter.rz-splitter-horizontal,
  .di-entity-list-companion-splitter-host > .rz-splitter.rz-splitter-horizontal,
  .di-edit-collection-companion-splitter-host > .rz-splitter.rz-splitter-horizontal)
  > .rz-splitter-bar {
  --di-splitter-structural-size: calc(8px + 2 * var(--di-gap));
}

:root[data-di-input="touch"] :is(.di-entity-reading-splitter.rz-splitter-vertical,
  .di-entity-list-companion-splitter-host > .rz-splitter.rz-splitter-vertical,
  .di-edit-collection-companion-splitter-host > .rz-splitter.rz-splitter-vertical)
  > .rz-splitter-bar {
  --di-splitter-structural-size: calc(8px + 2 * var(--di-gap));
}

:root[data-di-input="touch"]
  :is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
      .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-grid-table thead th .rz-column-resizer, .rz-datatable thead th .rz-column-resizer) {
  position: relative;
}

:root[data-di-input="touch"]
  :is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
      .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-grid-table thead th .rz-column-resizer, .rz-datatable thead th .rz-column-resizer)::before {
  position: absolute;
  inset-block: calc((var(--di-hit-min) - 1px) / -2);
  inset-inline: calc((var(--di-hit-min) - 1px) / -2);
  content: "";
  pointer-events: auto;
}

:root[data-di-input="touch"]
  :is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
      .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-cell-data > .rz-button:not(.di-field-frame .rz-button)) {
  min-width: var(--di-hit-min);
  min-height: var(--di-hit-min);
}

:root[data-di-input="touch"]
  :is(.di-part-data-grid-host:is(.rz-data-grid, .rz-datatable),
      .di-part-data-grid-host > :is(.rz-data-grid, .rz-datatable))
  :is(.rz-column-drag, .rz-column-draggable) {
  min-width: 0;
  min-height: 0;
}

/* Page-tab close is intentionally hover-revealed for Pointer, but remains
   discoverable and reachable in Touch without changing tab semantics.
   In Touch e' un comando icon-only del chrome come i bottoni di toolbar (indietro/avanti): stessa misura
   (--di-control-h) invece del solo pavimento tattile, cosi' i due leggono come una famiglia sola. Il floor
   --di-hit-min resta come garanzia minima se la densita' dovesse abbassare l'altezza del controllo. */
:root[data-di-input="touch"] .di-page-tab-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--di-control-h);
  height: var(--di-control-h);
  min-width: var(--di-hit-min);
  min-height: var(--di-hit-min);
  padding: 0;
  line-height: 1;
}
/* Eccezione voluta alla regola "cresce la hit area, non il glifo": qui il glifo e' l'affordance, perche' in
   Touch la X e' sempre visibile al posto dell'indicatore di stato e non c'e' hover a segnalarla. Il size xs di
   Radzen la ridurrebbe a 0.8 icone; questa la riporta all'icona standard, la stessa dei bottoni di toolbar.
   Le quattro proprieta' servono tutte: la regola xs fissa anche width/height del glifo. */
:root[data-di-input="touch"] .di-page-tab-close-button .rzi {
  font-size: var(--rz-icon-size);
  line-height: var(--rz-icon-size);
  width: var(--rz-icon-size);
  height: var(--rz-icon-size);
}

:root[data-di-input="touch"] .di-page-tab-title-content {
  align-items: center;
}
:root[data-di-input="touch"] .di-page-tab-close-editable .di-page-tab-edit-state {
  display: none;
}

.di-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.di-files-table {
  width: 100%;
  border-collapse: collapse;
}
.di-files-row {
  border-bottom: 1px solid var(--di-neutral-200);
}
.di-files-header-row {
  border-bottom-color: var(--di-border);
}
.di-files-cell {
  padding: var(--di-space-2);
  text-align: left;
}
.di-files-name-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-files-size-cell {
  width: 120px;
  text-align: right;
}
.di-files-modified-cell {
  width: 180px;
  text-align: left;
}
.di-files-actions-cell {
  width: 120px;
}
td.di-files-actions-cell {
  display: flex;
  justify-content: flex-end;
  gap: var(--di-space-2);
}

/* Commit grid: una riga per commit, doppio click apre il viewer storico (AuditCommitViewerDialog). */
.di-audit-commit-grid .rz-data-row {
  cursor: pointer;
}

/* Griglia aggregata storica (AuditHistoricalCollectionGrid): stesso host/chrome della normale DataGrid,
   solo le celle cambiate/le righe aggiunte-eliminate portano un accento in piu'. */
.di-audit-historical-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-grid-cell-info {
  background: var(--di-info-soft);
  border: 1px solid var(--di-info);
  border-radius: var(--di-radius-sm);
  padding-inline: var(--di-space-2);
  font-weight: 400;
}
tr.di-audit-historical-row-deleted {
  background: var(--di-danger-soft);
  opacity: .82;
}

/* Viewer puro del commit: host `di-part-dialog-root` come le altre part in dialog, l'EntityPart riempie il
   corpo e gestisce il proprio scroll; il footer resta quello di ogni dialog custom (di-dialog-actions). */
.di-audit-commit-viewer-body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.di-audit-commit-viewer-body > .di-part-root {
  flex: 1 1 0;
  min-height: 0;
}
.di-audit-commit-viewer-footer {
  flex: none;
}

.di-dialog-stack {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.di-confirmation-dialog-message {
  margin: 0;
  color: var(--di-text);
  white-space: pre-line;
}
.di-field-editor-description {
  margin: 0;
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
/* Tastiera virtuale touch: pointerdown/preventDefault sul contenitore conserva focus e selection del vero editor
   anche quando il dito tocca lo sfondo fra i tasti. Il renderer disegna soltanto cio' che il profilo dichiara
   (toolbar + griglia a dodici colonne); questo blocco e' quindi l'unico proprietario del chrome dei tasti, e ogni
   selettore parte da `.di-onscreen-keyboard` — mai da `.di-touch-keyboard-dialog`, che resta solo superficie della
   dialog che la ospita. Il chrome del keycap e' quello dei bottoni standard DiOnce: superficie raised/sunken,
   nessun bordo e nessun rilievo tridimensionale. */
.di-onscreen-keyboard {
  /* Altezza minima del keycap: il massimo fra la densita' corrente e il bersaglio minimo touch, cosi' il profilo
     Compact non puo' mai restringere un tasto sotto la soglia raggiungibile col dito. */
  --di-keyboard-key-h: max(var(--di-control-h), var(--di-hit-min));
  --di-keyboard-key-size: max(var(--di-control-h), var(--di-hit-min));
  --di-keyboard-label-size: 19px;
  --di-keyboard-key-pad: var(--di-space-2);
  --di-keyboard-pad-key-size: max(var(--di-control-h), var(--di-hit-min));
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.di-keyboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--di-gap);
}
/* Spinge i comandi (Seleziona tutto, Blocca maiuscole, a capo) sul lato destro senza un contenitore segmentato
   che li raggruppi: e' spazio vuoto, non un bordo. */
.di-keyboard-toolbar-spacer {
  flex: 1 1 auto;
}
.di-keyboard-key-wrapper {
  display: flex;
}
/* I tasti di toolbar e del selettore layout non si dividono la larghezza disponibile come i caratteri di griglia:
   restano larghi quanto il proprio contenuto, con un minimo quadrato per restare un bersaglio valido. */
.di-onscreen-keyboard .di-keyboard-toolbar .di-keyboard-key.rz-button {
  width: auto;
  min-width: var(--di-keyboard-key-h);
  padding-inline: var(--di-space-3);
}
.di-keyboard-grid {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
/* Dodici colonne fisse: la griglia la disegna il modello (ColumnSpan per Backspace/Spazio), il renderer si limita
   a proiettarla. Il gap e' lo stesso valore usato in verticale fra le righe: un solo token per le due direzioni. */
.di-keyboard-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(var(--di-keyboard-key-size), 1fr));
  gap: var(--di-gap);
}
.di-keyboard-cell-span-2 {
  grid-column: span 2;
}
.di-keyboard-cell-span-4 {
  grid-column: span 4;
}
/* Numeric pads use the compact four-column geometry of a physical keypad; telephone pads retain their dial row
   because their ten-digit row is intentionally wider. */
.di-keyboard-grid-pad {
  width: max-content;
  max-width: 100%;
  align-self: center;
}
.di-keyboard-grid-pad .di-keyboard-row {
  display: grid;
  grid-template-columns: repeat(4, var(--di-keyboard-pad-key-size));
}
.di-keyboard-grid-pad .di-keyboard-key-slot {
  max-width: none;
}
.di-keyboard-grid .di-keyboard-key.rz-button {
  width: 100%;
  height: var(--di-keyboard-key-size);
  min-height: var(--di-keyboard-key-size);
}
.di-keyboard-grid-telephone .di-keyboard-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--di-gap);
}
.di-keyboard-grid-telephone .di-keyboard-key-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 5.5rem;
}
.di-keyboard-key-slot {
  position: relative;
  display: flex;
  min-width: 0;
}
/* La larghezza e' del profilo `TransientEditor` (`fit-content` in `UiDialogPolicyResolver`), che segue la
   tastiera invece di imporle un cap compatto: qui resta solo il vincolo verticale, con scroll interno di riserva
   se il contenuto (descrizione, bozza, tastiera, footer) superasse comunque la viewport a griglia e keycap gia'
   ridotti dal breakpoint sotto. */
.di-touch-keyboard-dialog {
  max-width: calc(100vw - 3rem);
}
.di-touch-keyboard-dialog .rz-dialog-content {
  width: fit-content;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
/* A 800x600 lo spazio verticale non basta per il padding pieno della superficie: si riduce prima il padding a
   --di-gap, poi, se ancora insufficiente, il keycap fino al minimo touch di 44px (mai sotto). La soglia (650px)
   sta sotto 768px, cosi' la geometria a 1024x768 non cambia. */
@media (max-height: 650px) {
  .di-touch-keyboard-dialog .rz-dialog-content {
    padding: var(--di-gap);
  }
  .di-touch-keyboard-dialog .di-onscreen-keyboard {
    --di-keyboard-key-h: max(44px, var(--di-hit-min));
  }
}
.di-onscreen-keyboard .di-keyboard-key.rz-button {
  width: 100%;
  min-width: 0;
  min-height: var(--di-keyboard-key-h);
  padding: var(--di-keyboard-key-pad);
  box-shadow: none;
  font-size: var(--di-keyboard-label-size);
  font-weight: 600;
  opacity: 1;
  touch-action: manipulation;
  user-select: none;
}
.di-onscreen-keyboard .di-keyboard-key.rz-button .rz-button-text {
  color: inherit;
}
/* Legenda dello shift: sopravvive solo sugli script dove lo shift produce un'altra lettera (thai, arabo,
   persiano, devanagari), che e' l'unico caso in cui quel carattere non sarebbe altrimenti raggiungibile. */
.di-onscreen-keyboard .di-keyboard-key-shift-hint {
  position: absolute;
  inset-block-start: var(--di-space-2);
  inset-inline-start: var(--di-space-3);
  color: var(--di-text-muted);
  font-size: var(--di-text-xs);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
/* Anteprima del tasto premuto: il dito copre il keycap, quindi l'unico feedback visibile deve stare sopra di
   esso. Non intercetta il pointer, altrimenti comparendo sotto il dito ruberebbe il pointerup al tasto. */
.di-onscreen-keyboard .di-keyboard-key-preview {
  position: absolute;
  inset-block-end: calc(100% - var(--di-space-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 2.5rem;
  padding: var(--di-space-1) var(--di-space-2);
  border: 1px solid var(--di-border-strong);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
  color: var(--di-text-strong);
  box-shadow: var(--di-shadow-2);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
/* Feedback di pressione discreto: un cambio di superficie, mai un rilievo tridimensionale o uno spostamento. */
.di-onscreen-keyboard .di-keyboard-key.rz-button:hover,
.di-onscreen-keyboard .di-keyboard-key.rz-button:active {
  background-color: var(--di-control-hover);
}
.di-onscreen-keyboard .di-keyboard-key.rz-button .rzi {
  font-size: 1.35rem;
}
/* I comandi di sistema hanno una superficie distinta dai caratteri ma neutra, non una tinta di ruolo: piu'
   marcata del fondo dei tasti carattere (--di-surface-sunken), cosi' la distinzione segue il tema attivo
   invece di un grigio fisso. Il valore sta fra due gradini della rampa perche' 300 non stacca abbastanza e
   400 pesa troppo: resta comunque una funzione della rampa, non un colore scritto a mano, e si sposta
   cambiando la proporzione del mix. Sulla tastiera il colore resta riservato allo stato (toggle e
   Backspace), non alla categoria del tasto. */
.di-onscreen-keyboard .di-keyboard-key-system.rz-button {
  background-color: color-mix(in oklch, var(--di-neutral-300), var(--di-neutral-400)) !important;
  color: var(--di-text) !important;
}
.di-onscreen-keyboard .di-keyboard-key-backspace.rz-button {
  background-color: var(--di-danger-soft) !important;
  color: var(--di-danger) !important;
}
.di-onscreen-keyboard .di-keyboard-key-system.rz-button:hover,
.di-onscreen-keyboard .di-keyboard-key-system.rz-button:active {
  background-color: var(--di-neutral-400) !important;
}
.di-onscreen-keyboard .di-keyboard-key-backspace.rz-button:hover,
.di-onscreen-keyboard .di-keyboard-key-backspace.rz-button:active {
  background-color: var(--di-danger-soft) !important;
}
/* Stato attivo dei tasti toggle, ovunque vivano: pagina corrente e Blocca maiuscole in toolbar, Shift armato
   nella griglia. Lo stato si dichiara una volta sola su `aria-pressed`, che entrambi i percorsi di render gia'
   emettono, invece che con classi separate per toolbar e griglia: erano due meccanismi con specificita' diverse
   e uno solo dei due sopravviveva all'hover. Le varianti :hover/:active esistono per questo: il tasto sotto il
   dito deve continuare a dire se e' attivo, altrimenti il feedback di pressione nasconde lo stato. */
.di-onscreen-keyboard .di-keyboard-key.rz-button[aria-pressed="true"],
.di-onscreen-keyboard .di-keyboard-key.rz-button[aria-pressed="true"]:hover,
.di-onscreen-keyboard .di-keyboard-key.rz-button[aria-pressed="true"]:active {
  background-color: var(--di-selection-container) !important;
  box-shadow: var(--di-shadow-1);
  color: var(--di-on-selection-container) !important;
}
/* Pagina interna di scelta del layout: griglia che si adatta alla larghezza del popup invece di una lista lunga,
   con scroll proprio cosi' la toolbar (e il tasto che richiude il selettore) resta sempre raggiungibile. */
.di-keyboard-layout-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--di-gap);
  max-height: 60vh;
  overflow-y: auto;
}
.di-keyboard-layout-choice-dialog .di-keyboard-layout-choice.rz-button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  font-size: var(--di-text-sm);
}
.di-keyboard-layout-choice-dialog .di-keyboard-layout-choice.rz-button .rz-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-touch-keyboard-description {
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
/* La bozza e' un input nudo (nessun markup Radzen: serve l'ElementReference per il modulo DOM), quindi il suo
   chrome va scritto qui invece di ereditarlo da `.rz-textbox`. Stessi token del field DiOnce, cosi' resta
   indistinguibile da un editor di campo normale nonostante non lo sia. */
.di-keyboard-draft-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--di-control-h);
  padding: 0 var(--di-space-3);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-raised);
  color: var(--di-text-strong);
  font: inherit;
  font-size: var(--di-text-md);
}
textarea.di-keyboard-draft-input {
  height: auto;
  min-height: calc(3lh + 2 * var(--di-space-2));
  padding-block: var(--di-space-2);
  resize: none;
}
.di-keyboard-draft-input:focus {
  outline: none;
  box-shadow: var(--di-focus-ring);
}
.di-intent-gate-checking {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--di-space-3);
}
.di-intent-gate-spinner {
  flex: 0 0 auto;
}
.di-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--di-gap);
}
.di-dialog-surface-layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--di-gap);
  gap: var(--di-gap);
}
.di-dialog-surface-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.di-dialog-surface-actions {
  flex: 0 0 auto;
}
/* I profili content-fit (height:auto in UiDialogPolicyResolver) non devono stirare il contenuto a riempire
   la dialog: solo i profili con block-size assegnato (workspace/viewer) conservano il fill verticale. */
.di-dialog-surface--decision .di-dialog-surface-layout,
.di-dialog-surface--blocking-decision .di-dialog-surface-layout,
.di-dialog-surface--compact-editor .di-dialog-surface-layout,
.di-dialog-surface--selection-picker .di-dialog-surface-layout,
.di-dialog-surface--transient-editor .di-dialog-surface-layout {
  flex-grow: 0;
}
.di-dialog-surface--decision .di-dialog-surface-content,
.di-dialog-surface--blocking-decision .di-dialog-surface-content,
.di-dialog-surface--compact-editor .di-dialog-surface-content,
.di-dialog-surface--selection-picker .di-dialog-surface-content,
.di-dialog-surface--transient-editor .di-dialog-surface-content {
  flex-grow: 0;
}
.di-dialog-surface .rz-dialog-content {
  min-width: 0;
  min-height: 0;
  padding: 0;
}
/* Le messagebox condivise non usano lo slot layout perche' la loro action bar e' parte della primitive:
   anche qui l'inset esterno e la distanza messaggio/azioni devono seguire la stessa metrica G. */
.di-dialog-surface--decision:not(:has(.di-dialog-surface-layout)) .rz-dialog-content,
.di-dialog-surface--blocking-decision:not(:has(.di-dialog-surface-layout)) .rz-dialog-content {
  padding: var(--di-gap) !important;
}
/* Le dialog con layout semantico hanno un solo proprietario dell'inset: il layout stesso. Alcune
   superfici storiche dichiarano ancora padding sul wrapper Radzen; il selettore :has resta limitato
   alle dialog gia' migrate e impedisce di alterare le dialog che non usano gli slot Content/Actions. */
.di-dialog-surface:has(.di-dialog-surface-layout) .rz-dialog-content {
  padding: 0 !important;
}
.di-dialog-surface {
  max-inline-size: calc(100vw - 2 * var(--di-gap));
  max-block-size: calc(100dvh - 2 * var(--di-gap));
  border: var(--rz-border-width) solid var(--di-border);
  box-shadow: var(--di-shadow-2);
}
.di-dialog-surface .rz-dialog-title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: var(--di-micro-gap);
}
.di-dialog-surface-title {
  font-size: var(--di-type-section-title);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-dialog-surface-expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--di-control-h);
  min-height: var(--di-control-h);
  border: 0;
  border-radius: var(--di-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.di-dialog-surface-expand:hover {
  background: var(--di-surface-hover);
}
.di-dialog-surface-expand:focus-visible {
  outline: none;
  box-shadow: var(--di-focus-ring);
}
.di-dialog-actions .rz-button,
.di-wizard-actions .rz-button {
  height: var(--di-control-h);
  box-sizing: border-box;
}
/* The shared dialog-footer sizing must not change the keyboard dialog's own
   keycap/footer geometry. Keycaps keep their dedicated keyboard rules above. */
.di-touch-keyboard-dialog .di-dialog-actions .rz-button {
  height: auto;
  min-height: var(--di-hit-min);
}
.di-keyboard-layout-choice-dialog .di-keyboard-layout-choice.rz-button[aria-selected="true"] {
  background-color: var(--di-selection-container) !important;
  color: var(--di-on-selection-container) !important;
}
.di-dialog-picker {
  min-width: 360px;
  max-width: 520px;
}
.di-dialog-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  max-height: 420px;
  overflow-y: auto;
}
.di-dialog-picker-row {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--di-gap);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: transparent;
  cursor: pointer;
}
.di-dialog-picker-row:hover {
  background: var(--di-surface-hover);
}
.di-dialog-picker-row-label {
  font-weight: 600;
}
.di-dialog-field-sm {
  min-width: 320px;
}
.di-dialog-field-md {
  min-width: 360px;
}
.di-change-password-dialog {
  min-width: 320px;
}
.di-dialog-grid-clickable {
  cursor: pointer;
}
.di-asset-message {
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
.di-asset-field {
  width: 100%;
  min-width: 0;
}
.di-asset-content {
  display: flex;
  align-items: stretch;
  gap: var(--di-gap);
  min-height: 96px;
  padding: var(--di-gap);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
}
.di-asset-preview-frame {
  flex: 0 0 112px;
  width: 112px;
  min-height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--di-border-width) solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-sunken);
  overflow: hidden;
  position: relative;
}
.di-asset-preview-clickable {
  cursor: pointer;
}
.di-asset-preview-clickable:hover {
  background: var(--di-surface-hover);
}
button.di-asset-preview-frame {
  font: inherit;
}
.di-asset-preview {
  width: 96px;
  height: 72px;
  object-fit: contain;
}
.di-asset-media-frame {
  width: min(100%, 32rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--di-space-2);
  align-items: center;
  padding-inline: var(--di-space-2);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-sunken);
  overflow: hidden;
}
.di-asset-media-icon {
  color: var(--di-text-muted);
  font-size: 28px;
}
.di-asset-media-frame audio,
.di-asset-media-frame video {
  width: 100%;
  max-height: 20rem;
}
.di-asset-preview-placeholder {
  color: var(--di-text-muted);
  font-size: 32px;
}
.di-asset-preview-placeholder.di-asset-icon-loaded,
.di-asset-media-icon.di-asset-icon-loaded {
  color: var(--di-accent);
}
.di-asset-details {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--di-space-2);
  justify-content: center;
}
.di-asset-name {
  font-size: var(--di-text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.di-asset-status {
  font-size: var(--di-text-sm);
  color: var(--di-text-muted);
}
.di-asset-upload-progress {
  display: grid;
  gap: var(--di-space-1);
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
.di-asset-actions {
  display: flex;
  align-items: center;
  gap: var(--di-space-2);
  flex-wrap: wrap;
}
.di-asset-actions .rz-button,
.di-asset-action-button {
  width: calc(var(--di-control-h) - var(--di-space-1));
  height: calc(var(--di-control-h) - var(--di-space-1));
  min-width: calc(var(--di-control-h) - var(--di-space-1));
  padding: 0;
}
.di-asset-actions .rz-button {
  min-height: calc(var(--di-control-h) - var(--di-space-1));
}
.di-asset-action-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--di-radius-sm);
  background: var(--di-accent);
  color: var(--di-accent-fg);
  cursor: pointer;
  overflow: hidden;
  line-height: 1;
}
.di-asset-action-button .rzi {
  font-size: 20px;
  line-height: 1;
}
.di-asset-action-button:has(:focus-visible) {
  outline: var(--di-focus-outline);
  outline-offset: -1px;
  box-shadow: none;
}
.di-asset-action-button.di-disabled {
  background: var(--di-surface-sunken);
  color: var(--di-text-muted);
  cursor: default;
}
.di-asset-preview-dialog-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.di-asset-preview-dialog-content {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--di-surface-sunken);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  overflow: hidden;
}
.di-asset-preview-dialog-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.di-asset-preview-dialog-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--di-code-surface);
}
.di-asset-preview-dialog-pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--di-surface-raised);
}
@media (max-width: 520px) {
  .di-asset-content {
    flex-direction: column;
  }
  .di-asset-preview-frame {
    width: 100%;
  }
}
.di-dialog-surface--fill {
  display: flex;
  flex-direction: column;
}
.di-dialog-surface--fill .rz-dialog-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.di-wizard-root {
  height: 100%;
}
.di-wizard-content {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  gap: var(--di-gap);
}
.di-wizard-header {
  display: flex;
  gap: var(--di-gap);
  align-items: flex-start;
  flex: none;
}
.di-wizard-step-icon {
  font-size: 28px;
}
.di-wizard-title {
  margin: 0;
}
.di-wizard-description,
.di-wizard-progress-message,
.di-wizard-file-hint {
  opacity: .75;
}
.di-wizard-body {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  min-height: 0;
  overflow: auto;
  padding-block: var(--di-focus-guard);
}
.di-wizard-message {
  color: var(--di-text);
  line-height: 1.45;
}
.di-wizard-message-warning {
  color: var(--di-warning);
}
.di-wizard-message-info {
  color: var(--di-text-muted);
}
.di-wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
}
.di-wizard-log {
  background: var(--di-code-surface);
  color: var(--di-code-text);
  border-radius: var(--di-radius-sm);
  padding: var(--di-space-3);
  max-height: 220px;
  overflow: auto;
  font-family: var(--di-font-mono);
  font-size: var(--di-text-sm);
}
.di-wizard-log-info {
  color: var(--di-code-text);
}
.di-wizard-log-warning {
  color: var(--di-warning);
}
.di-wizard-log-error {
  color: var(--di-danger);
}
.di-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--di-gap);
  flex: none;
  /* L'inset e la distanza dal contenuto appartengono a DialogSurfaceLayout:
     la riga ospita soltanto i due gruppi di comandi. */
  overflow: visible;
}
.di-wizard-actions-left,
.di-wizard-actions-right {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
}
.di-wizard-actions-right {
  margin-left: auto;
}
.di-wizard-action-button {
  min-width: 96px;
}
.di-wizard-file-root {
  height: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
}
.di-wizard-file-dropzone {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--di-gap);
  border: 2px dashed var(--di-border-strong);
  border-radius: var(--di-radius-md);
  padding: var(--di-space-6);
  text-align: center;
  cursor: pointer;
  background: var(--di-neutral-50);
  overflow: auto;
}
.di-wizard-file-input {
  z-index: 1;
}
.di-wizard-file-icon,
.di-wizard-file-text {
  pointer-events: none;
  z-index: 2;
}
.di-wizard-file-icon {
  font-size: 42px;
}
.di-wizard-file-list {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  pointer-events: auto;
  z-index: 3;
}
.di-wizard-file-progress {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  pointer-events: none;
  z-index: 3;
}
.di-wizard-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--di-gap);
  align-items: center;
  background: var(--di-surface-raised);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  padding: var(--di-gap);
  text-align: left;
}
.di-wizard-file-main {
  min-width: 0;
}
.di-wizard-file-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-wizard-file-meta {
  opacity: .7;
  font-size: var(--di-text-sm);
}
.di-join-picker-root {
  padding: var(--di-gap);
  width: 100%;
}
.di-join-picker-header {
  display: flex;
  gap: var(--di-gap);
  font-weight: 600;
}
.di-join-picker-header-side {
  flex: 1;
}
.di-join-picker-header-spacer {
  width: 80px;
}
.di-localization-label {
  font-weight: 600;
}
.di-column-chooser-dialog .rz-dialog-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
/* Il regime content-fit di CompactEditor lascia la dialog seguire il contenuto e non fa crescere
   layout/content oltre la loro dimensione naturale: qui invece la lista deve poter usare tutto lo spazio
   fino al cap condiviso (max-block-size) e restringersi quando eccede, cosi' lo scroll vive sulla lista
   e non taglia toolbar/azioni. Override scoped al solo chooser, non alla regola generale del profilo. */
.di-column-chooser-dialog .di-dialog-surface-layout {
  flex-grow: 1;
}
.di-column-chooser-dialog .di-dialog-surface-content {
  flex-grow: 1;
  min-height: 0;
  gap: var(--di-gap);
}
.di-column-chooser-toolbar {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--di-gap);
  min-width: 0;
  overflow: visible;
}
.di-column-chooser-filter {
  min-width: min(100%, 12rem);
  flex: 1 1 16rem;
}
.di-column-chooser-button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  height: var(--di-control-h);
  box-sizing: border-box;
}
.di-column-chooser-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
}
.di-protected-field-reason-error {
  color: var(--di-danger);
  font-size: var(--di-text-sm);
  margin: 0;
}
.di-column-chooser-actions {
  overflow: visible;
}
.di-column-chooser-group,
.di-column-chooser-row {
  display: flex;
  align-items: center;
  user-select: none;
  border-bottom: 1px solid var(--di-neutral-200);
  padding-right: var(--di-gap);
  padding-left: calc(var(--di-gap) + var(--di-column-level, 0) * 20px);
  min-height: var(--di-control-h);
}
.di-column-chooser-group {
  gap: var(--di-gap);
  padding-block: var(--di-gap);
  background: var(--di-surface-sunken);
  cursor: pointer;
}
.di-column-chooser-row {
  gap: var(--di-gap);
  padding-block: var(--di-gap);
}
.di-column-chooser-row:hover {
  background: var(--di-surface-hover);
}
.di-column-chooser-row-disabled {
  opacity: .5;
}
.di-column-chooser-toggle {
  font-size: var(--di-text-xs);
  min-width: 10px;
  opacity: .6;
}
.di-column-chooser-group-label {
  font-weight: 600;
  font-size: var(--di-text-sm);
}
.di-column-chooser-entity,
.di-column-chooser-visual {
  font-size: var(--di-text-xs);
  opacity: .4;
}
.di-column-chooser-label {
  flex: 1;
  font-size: var(--di-text-sm);
  min-width: 0;
}
.di-column-chooser-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--di-gap);
}
.di-column-chooser-bulk-actions,
.di-column-chooser-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--di-gap);
  flex: 0 0 auto;
}
.di-column-chooser-summary {
  justify-content: space-between;
  font-size: var(--di-text-sm);
}
.di-column-chooser-hint {
  flex: 0 0 auto;
  margin: 0;
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
.di-column-chooser-surface .di-column-chooser-group {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--di-border);
  padding: var(--di-micro-gap) var(--di-gap);
  color: var(--di-text);
  text-align: start;
  font: inherit;
  gap: var(--di-micro-gap);
}
.di-column-chooser-surface .di-column-chooser-group:hover {
  background: var(--di-surface-hover);
}
.di-column-chooser-surface .di-column-chooser-group:focus-visible,
.di-column-chooser-surface .di-column-chooser-label:focus-visible {
  outline: 2px solid var(--di-accent);
  outline-offset: -2px;
}
.di-column-chooser-surface .di-column-chooser-group-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.di-column-chooser-surface .di-column-chooser-toggle,
.di-column-chooser-kind {
  flex: 0 0 auto;
  font-size: var(--di-text-lg);
  color: var(--di-text-muted);
  opacity: 1;
}
.di-column-chooser-children {
  margin-inline-start: calc(var(--di-control-h) / 2);
  border-inline-start: 1px solid var(--di-border);
}
.di-column-chooser-surface .di-column-chooser-row {
  gap: var(--di-micro-gap);
  padding: var(--di-micro-gap) var(--di-gap);
  border-color: var(--di-border);
}
.di-column-chooser-surface .di-column-chooser-row-selected {
  background: var(--di-accent-soft);
}
.di-column-chooser-surface .di-column-chooser-row-disabled {
  color: var(--di-text-muted);
  opacity: 1;
}
.di-column-chooser-surface .di-column-chooser-label {
  display: flex;
  flex-direction: column;
  gap: var(--di-micro-gap);
  align-self: stretch;
  justify-content: center;
  border: 0;
  padding: var(--di-micro-gap);
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
  font-size: var(--di-text-sm);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.di-column-chooser-surface .di-column-chooser-label:disabled {
  cursor: default;
}
.di-column-chooser-reason,
.di-column-chooser-surface .di-column-chooser-entity,
.di-column-chooser-surface .di-column-chooser-visual {
  color: var(--di-text-muted);
  font-size: var(--di-text-xs);
  opacity: 1;
}
.di-column-chooser-count {
  flex: 0 0 auto;
  padding: var(--di-micro-gap) var(--di-gap);
  border-radius: var(--di-radius-sm);
  background: var(--di-accent-soft);
  color: var(--di-accent-strong);
  font-size: var(--di-text-xs);
}
@media (max-width: 40rem) {
  .di-column-chooser-surface .di-column-chooser-group {
    flex-wrap: wrap;
  }
  .di-column-chooser-surface .di-column-chooser-entity {
    display: none;
  }
}
.di-advanced-filter {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.di-advanced-filter .di-dialog-surface-content {
  overflow: hidden;
}
.di-advanced-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  overflow: auto;
}
.di-advanced-filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  overflow: visible;
}
.di-advanced-filter-section-top {
  flex: 0 0 auto;
}
.di-advanced-filter-section-fill {
  flex: 1 0 auto;
  border-top: 1px solid var(--di-border);
}
.di-advanced-filter-section-header,
.di-advanced-filter-collection-header {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  min-width: 0;
  flex-wrap: wrap;
}
.di-advanced-filter-section-header h3 {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--di-text-md);
  font-weight: 600;
  color: var(--di-text-strong);
}
.di-advanced-filter-row,
.di-advanced-filter-collection {
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
}
.di-advanced-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--di-gap);
  padding: var(--di-gap);
}
.di-advanced-filter-collection {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  padding: var(--di-gap);
  overflow: visible;
}
.di-advanced-filter-field {
  flex: 2 1 240px;
  min-width: 200px;
}
.di-advanced-filter-field-display {
  flex: 2 1 240px;
  min-width: min(100%, 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--di-micro-gap);
  min-height: var(--di-control-h);
  padding: var(--di-gap);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-sunken);
}
.di-advanced-filter-field-label {
  overflow-wrap: anywhere;
  color: var(--di-text-strong);
  font-size: var(--di-text-sm);
  font-weight: 600;
}
.di-advanced-filter-field-context {
  color: var(--di-text-muted);
  font-size: var(--di-text-xs);
}
.di-advanced-filter-operator {
  flex: 1 1 13rem;
  min-width: min(100%, 13rem);
}
.di-advanced-filter-casing {
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
}
.di-advanced-filter-value {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
}
.di-advanced-filter-reference-value {
  flex-basis: 240px;
  min-width: 220px;
}
.di-advanced-filter-reference-value .di-field-frame {
  width: 100%;
}
.di-advanced-filter-measure-value {
  flex: 1 1 240px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  flex-wrap: wrap;
}
.di-advanced-filter-measure-input {
  flex: 1 1 auto;
  min-width: 0;
}
.di-advanced-filter-qualifier {
  flex: 0 1 auto;
  width: 140px;
  min-width: 140px;
  margin-left: auto;
}
.di-advanced-filter-button {
  flex-shrink: 0;
  min-width: 112px;
  max-width: 100%;
  min-height: var(--di-control-h);
  height: auto;
  box-sizing: border-box;
}
.di-advanced-filter-actions {
  overflow: visible;
}
.di-advanced-filter-picker {
  width: 100%;
  overflow: hidden;
}
.di-advanced-filter-picker .di-dialog-surface-content {
  gap: var(--di-gap);
  overflow: hidden;
}
.di-advanced-filter-picker-search {
  flex: 0 0 auto;
  width: 100%;
}
.di-advanced-filter-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 55dvh;
  overflow: auto;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
}
.di-advanced-filter-picker-group,
.di-advanced-filter-picker-row {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  user-select: none;
  border-bottom: 1px solid var(--di-neutral-200);
  padding-block: var(--di-gap);
  padding-right: var(--di-gap);
  padding-left: calc(var(--di-gap) + var(--di-column-level, 0) * 20px);
  min-height: var(--di-control-h);
}
.di-advanced-filter-picker-group {
  background: var(--di-surface-sunken);
  cursor: pointer;
}
.di-advanced-filter-picker-row {
  cursor: pointer;
}
.di-advanced-filter-picker-selectable {
  cursor: pointer;
}
.di-advanced-filter-picker-row:hover,
.di-advanced-filter-picker-group:hover {
  background: var(--di-surface-hover);
}
.di-advanced-filter-picker-toggle {
  font-size: var(--di-text-xs);
  min-width: 10px;
  opacity: .6;
}
.di-advanced-filter-picker-toggle[role="button"] {
  cursor: pointer;
}
.di-advanced-filter-picker-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--di-text-strong);
  font-size: var(--di-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.di-advanced-filter-picker-actions {
  padding-block: var(--di-focus-guard);
  overflow: visible;
}
.di-permission-page {
  height: 100%;
  overflow: auto;
  padding: var(--di-gap);
  background: var(--di-surface-canvas);
}
.di-permission-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--di-space-3);
  flex-wrap: wrap;
}
.di-permission-badges {
  display: flex;
  gap: var(--di-space-2);
  flex-wrap: wrap;
}
.di-wizard-step-stack {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  min-width: 0;
  overflow: visible;
}
.di-wizard-step-stack-sm {
  gap: var(--di-gap);
}
.di-wizard-step-centered {
  align-items: center;
}
.di-wizard-help {
  opacity: .7;
  font-size: var(--di-text-sm);
}
.di-wizard-muted {
  opacity: .75;
}
.di-wizard-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--di-gap);
}
.di-wizard-check-row {
  display: flex;
  align-items: center;
  gap: var(--di-micro-gap);
}
.di-wizard-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: var(--di-gap);
  min-width: 0;
  overflow: visible;
}
.di-wizard-control {
  width: 100%;
}
.di-wizard-listbox {
  width: 100%;
  min-height: 220px;
  max-height: 360px;
}
.di-wizard-grid-fill {
  height: 100%;
}
.di-wizard-fill-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--di-gap);
  overflow: visible;
}
.di-wizard-lookup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--di-gap);
  min-height: 0;
  overflow: visible;
}
.di-wizard-stack-fill {
  min-height: 0;
}
.di-wizard-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--di-gap);
}
.di-wizard-warning-list {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  color: var(--di-warning);
}
.di-wizard-pre-line {
  white-space: pre-line;
}
.di-wizard-pre-wrap {
  white-space: pre-wrap;
}
.di-wizard-grid-preview {
  height: 280px;
}
.di-wizard-grid-result {
  height: 260px;
}
.di-wizard-section-title {
  display: flex;
  align-items: center;
  gap: var(--di-micro-gap);
}
.di-text-center {
  text-align: center;
}
.di-totp-qr {
  width: 200px;
  height: 200px;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-md);
}
.di-totp-secret-block {
  width: 100%;
}
.di-totp-secret {
  font-family: var(--di-font-mono);
  word-break: break-all;
  background: var(--di-surface-sunken);
  padding: var(--di-space-2);
  border-radius: var(--di-radius-sm);
}
.di-download-link {
  text-decoration: none;
}
.di-entity-list-visual {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-sunken);
}
.di-entity-list-visual-frame {
  height: calc(var(--di-visual-height, 72) * 1px);
  display: flex;
  align-items: center;
}
.di-page-tabs-host {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.di-page-tab-title-content {
  display: flex;
  align-items: center;
  gap: var(--di-space-1);
}
.di-page-tab-close,
.di-page-tab-close-editable,
.di-page-tab-editable-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
.di-page-tab-close-editable > .di-page-tab-close-button {
  display: none !important;
}
.di-page-tab-close-editable:hover > .di-page-tab-edit-state {
  display: none;
}
.di-page-tab-close-editable:hover > .di-page-tab-close-button {
  display: inline-flex !important;
}
:root[data-di-input="touch"] .di-page-tabs > .rz-tabview-nav > li {
  display: flex;
  align-items: center;
}
:root[data-di-input="touch"] .di-page-tab-close-editable .di-page-tab-edit-state {
  display: none;
}
:root[data-di-input="touch"] .di-page-tab-close-editable > .di-page-tab-close-button {
  display: inline-flex !important;
}
.di-page-tab-edit-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  cursor: default;
}
/* Contenuto della tab: navbar Back/Forward fissa in alto, le entry keep-alive sotto
   occupano lo spazio restante cosi' ogni Part (es. EntityListPart) riceve un'altezza
   definita per il proprio overflow interno invece di espandersi senza limiti. */
.di-page-tab-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.di-page-tab-toolbar {
  flex: 0 0 auto;
  margin-bottom: var(--di-gap);
}
.di-page-tab-toolbar > .di-part-toolbar {
  margin-bottom: 0;
  padding-block: 0;
}
.di-page-tab-entries:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* L'attributo HTML [hidden] impone display:none di default, ma una regola di classe con la
   stessa specificita' successiva nella cascata lo sovrascrive: qualunque proprieta' display va
   applicata solo alle entry NON nascoste, altrimenti l'entry nascosta resta comunque nel layout
   (flex la spezza a meta' con quella visibile) e il suo Part resta attivo sotto quella corrente. */
.di-page-tab-entry:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.di-field-missing {
  color: var(--di-danger);
}

.di-app-loading {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--di-surface-canvas);
}

.di-app-shell-root {
  height: 100vh;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.di-app-blocker-content {
  height: 100%;
  min-height: 0;
  transition: opacity var(--di-shell-fade-duration, 120ms) ease;
}

.di-app-shell-blocking,
.di-app-shell-blocking * {
  cursor: progress !important;
}

.di-app-shell-dimmed .di-app-blocker-content {
  opacity: .55;
}

.di-app-blocker {
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  background: transparent;
  pointer-events: auto;
  cursor: progress;
}

.di-app-loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--di-space-2);
}

.di-app-loading-indicator span {
  width: 9px;
  height: 9px;
  border-radius: var(--di-radius-pill);
  background: var(--di-accent);
  opacity: 0.35;
  animation: var(--di-loading-animation, none);
}

.di-app-loading-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.di-app-loading-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

.di-app-loading-caption {
  margin-top: var(--di-space-3);
  color: var(--di-text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

@keyframes di-loading-pulse {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: scale(0.82);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.di-login-page {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--di-space-4);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--di-accent) 16%, transparent), transparent 32%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--di-info) 12%, transparent), transparent 34%),
    var(--di-surface-canvas);
  overflow: auto;
}

.di-login-shell {
  width: min(100%, 900px);
  overflow: hidden;
  border: 1px solid var(--di-border);
  background: var(--di-surface-raised);
}

.di-login-shell > .rz-col {
  min-width: 0;
}

.di-login-info-card,
.di-login-form-card {
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
}

.di-login-info-card {
  position: relative;
  padding: var(--di-space-8);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--di-warning) 22%, transparent), transparent 30%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--di-info) 24%, transparent), transparent 34%),
    linear-gradient(145deg, var(--di-accent-strong), color-mix(in srgb, var(--di-accent) 52%, var(--di-surface-sidebar)));
  color: var(--di-text-on-dark);
  overflow: hidden;
}

.di-login-info-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -26% 28%;
  height: 56%;
  border-radius: var(--di-radius-pill);
  background: color-mix(in srgb, var(--di-accent-fg) 10%, transparent);
  transform: rotate(-14deg);
}

.di-login-info-content {
  position: relative;
  z-index: 1;
  min-height: 420px;
  justify-content: center;
}

.di-login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--di-radius-lg);
  background: color-mix(in srgb, var(--di-accent-fg) 16%, transparent);
  color: var(--di-text-on-dark);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--di-accent-fg) 24%, transparent);
}

.di-login-mark .rzi {
  font-size: 28px;
}

.di-login-app-title {
  margin: 0;
  color: var(--di-text-on-dark);
  overflow-wrap: anywhere;
}

.di-login-info-content .di-render-mode-badge {
  align-self: flex-start;
}

.di-login-app-title:focus,
.di-login-app-title:focus-visible {
  outline: none;
  box-shadow: none;
}

.di-login-info-description {
  max-width: 32rem;
  color: color-mix(in srgb, var(--di-text-on-dark) 78%, transparent);
  line-height: 1.6;
}

.di-login-help-list {
  margin-top: var(--di-space-2);
}

.di-login-help-item {
  gap: var(--di-space-3);
  padding: var(--di-space-3);
  border: 1px solid color-mix(in srgb, var(--di-accent-fg) 16%, transparent);
  border-radius: var(--di-radius-md);
  background: color-mix(in srgb, var(--di-accent-fg) 10%, transparent);
  backdrop-filter: blur(10px);
}

.di-login-help-text {
  color: color-mix(in srgb, var(--di-text-on-dark) 86%, transparent);
  line-height: 1.45;
}

.di-login-help-icon {
  flex: none;
  color: color-mix(in srgb, var(--di-warning) 72%, var(--di-text-on-dark));
  font-size: 20px;
  margin-top: 1px;
}

.di-login-language {
  margin-top: var(--di-space-2);
}

.di-login-form-card {
  padding: var(--di-space-8);
  background: var(--di-surface-raised);
}

.di-login-form-title {
  margin: 0 0 var(--di-space-2);
  color: var(--di-text-strong);
}

.di-login-description {
  color: var(--di-text-muted);
  margin-bottom: var(--di-space-1);
}

@media (max-width: 767px) {
  .di-login-page {
    align-items: flex-start;
    padding: var(--di-space-3);
  }

  .di-login-info-card,
  .di-login-form-card {
    padding: var(--di-space-6);
  }

  .di-login-info-content {
    min-height: auto;
  }
}

.di-part-grid {
  display: grid;
  gap: var(--di-gap);
  min-height: 0;
}
.di-part-tabs-host,
.di-part-tabs,
.di-part-stack,
.di-part-uniform-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.di-part-tabs-host-scroll {
  overflow: auto;
}
.di-part-stack {
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  overflow: visible;
}
.di-part-stack-horizontal {
  flex-direction: row;
}
.di-part-stack-item {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.di-part-stack:not(.di-part-stack-horizontal) > .di-part-stack-item {
  width: 100%;
}
.di-part-stack-horizontal > .di-part-stack-item {
  height: 100%;
}
.di-part-stack-fill {
  flex: 1 1 0;
}
.di-part-uniform-grid {
  display: grid;
  gap: var(--di-gap);
}
.di-part-columns {
  align-items: start;
}
.di-part-card {
  min-height: 0;
  padding: var(--di-gap);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
  overflow: visible;
}
/* Variante a filo: per card che contengono tabelle/liste che devono
   arrivare al bordo (il padding lo dà il contenuto: celle, righe). */
.di-part-card-flush {
  padding: 0;
}
.di-part-empty {
  padding: var(--di-gap);
  color: var(--di-text-muted);
}
/* Variante ricca (PartEmptyState): icona + titolo + azione primaria centrati. */
.di-part-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--di-gap);
  text-align: center;
  padding: var(--di-space-8) var(--di-gap);
}
.di-part-empty-state > .rzi {
  font-size: 40px;
  opacity: .5;
}
.di-part-empty-state-title {
  font-weight: 600;
  color: var(--di-text);
}
.di-part-empty-state-hint {
  font-size: var(--di-text-sm);
}
.di-data-grid .rz-data-grid-data:has(.rz-datatable-emptymessage) {
  container-type: inline-size;
}
.di-data-grid .rz-datatable-emptymessage {
  padding: 0;
  white-space: normal;
}
.di-data-grid .rz-datatable-emptymessage .di-part-empty-state {
  position: sticky;
  left: 0;
  width: 100cqw;
  max-width: 100%;
  box-sizing: border-box;
}

/* Skeleton di caricamento griglie: shimmer su neutri, invariante al tema. */
.di-skeleton-grid {
  display: flex;
  flex-direction: column;
  gap: var(--di-space-3);
  padding: var(--di-space-3);
}
.di-skeleton-row {
  display: flex;
  gap: var(--di-space-3);
}
.di-skeleton-cell {
  height: 14px;
  border-radius: var(--di-radius-sm);
  background: linear-gradient(90deg,
    var(--di-neutral-200) 25%,
    var(--di-neutral-100) 37%,
    var(--di-neutral-200) 63%);
  background-size: 400% 100%;
  animation: var(--di-skeleton-animation, none);
}
.di-skeleton-grid .di-skeleton-cell:nth-child(1) { flex: 0 0 18%; }
.di-skeleton-grid .di-skeleton-cell:nth-child(2) { flex: 0 0 30%; }
.di-skeleton-grid .di-skeleton-cell:nth-child(3) { flex: 0 0 22%; }
.di-skeleton-grid .di-skeleton-cell:nth-child(4) { flex: 1 1 auto; }
.di-virtual-gap-skeleton-host {
  position: relative;
}
.di-virtual-gap-skeleton {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.di-virtual-gap-skeleton-row {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--di-border);
  background: var(--di-surface-raised);
}
.di-virtual-gap-skeleton-cell {
  min-width: 0;
  padding-inline: var(--di-space-2);
}
.di-virtual-gap-skeleton-bar {
  width: 100%;
}
@keyframes di-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .di-skeleton-cell, .di-app-loading-indicator span { animation: none; }
}
.di-part-visibility-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.di-part-centered {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.di-part-busy-indicator {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.di-part-busy-host {
  position: relative;
}
.di-part-busy-overlay {
  opacity: 0;
  animation: di-busy-reveal 0s forwards;
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--di-micro-gap);
  background: color-mix(in srgb, var(--di-surface) 72%, transparent);
  pointer-events: auto;
  cursor: wait;
}
@keyframes di-busy-reveal {
  to { opacity: 1; }
}
.di-part-busy-overlay-message {
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
}
.di-part-child-pane {
  height: 100%;
  min-height: 0;
  padding-top: var(--di-gap);
}
.di-entity-list-master-pane {
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--di-gap);
}
.di-part-check-row {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  margin: 0;
}
.di-part-check-row .rz-chkbox {
  margin: 0;
}
.di-part-check-label {
  cursor: pointer;
}
.di-menu-content-body {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: visible;
  border-radius: var(--di-radius-lg);
  background: var(--di-surface-raised);
  box-shadow: var(--di-shadow-1);
}
.di-data-scope-picker {
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  width: 100%;
  min-width: 0;
}
.di-data-scope-picker-control {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.di-data-scope-picker-input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
}
.di-upload-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--di-space-2);
  height: var(--di-control-h);
  box-sizing: border-box;
  line-height: 1;
  padding: 0 var(--di-space-3);
  border-radius: var(--di-radius-sm);
  background: var(--di-accent);
  color: var(--di-accent-fg);
  cursor: pointer;
  overflow: hidden;
}
.di-upload-label.di-disabled {
  background: var(--di-surface-sunken);
  color: var(--di-text-muted);
  cursor: default;
}

/* --- Bottoni Today/Now del datepicker: resi visibili (outline + accento) --- */
.rz-datepicker-footer .rz-button,
.rz-datetime-footer .rz-button {
  background-color: var(--di-surface-sunken);
  color: var(--di-accent);
  border: 1px solid var(--di-border-strong);
  border-radius: var(--di-radius-sm);
}
.rz-datepicker-footer .rz-button:hover,
.rz-datetime-footer .rz-button:hover {
  background-color: var(--di-accent-soft);
  border-color: var(--di-accent);
}

/* Input focus is a thin inset edge, with no halo or change to the control's geometry.
   !important preserves it over Radzen hover styles. */
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-dropdown,
.rz-datepicker,
.rz-lookup,
.rz-selectbutton {
  transition: border-color var(--di-transition);
}
.rz-textbox:focus,
.rz-textarea:focus,
.rz-numeric:focus-within,
.rz-dropdown.rz-state-focused,
.rz-datepicker:focus-within,
.rz-lookup:focus-within,
.rz-selectbutton:focus-within {
  box-shadow: var(--di-focus-ring) !important;
}

/* Stato readonly condiviso: cambia soltanto il trattamento visivo e le affordance dei controlli,
   lasciando invariati bordo, padding e geometria. La classe di superficie e l'indicatore sono riusabili
   da qualunque form che esponga lo stesso stato globale. */
.di-readonly-indicator {
  display: inline-flex;
  height: 22px;
  padding: 0 var(--di-space-2);
  align-items: center;
  gap: var(--di-space-1);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-pill);
  background: var(--di-accent-soft);
  color: var(--di-accent-strong);
  font-size: var(--di-text-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.di-readonly-indicator .rzi {
  font-size: var(--di-text-md);
}
.di-field-readonly :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown,
                       .rz-dropdown-label, .rz-datepicker, .rz-multiselect, .rz-lookup) {
  background: transparent !important;
}
.di-readonly-surface :is(.di-field-input, .di-field-input:hover, .di-field-input:focus),
.di-field-readonly :is(.di-field-input, .di-field-input:hover, .di-field-input:focus) {
  border-color: var(--di-border) !important;
  background: var(--di-surface-sunken) !important;
  box-shadow: none !important;
  color: var(--di-text) !important;
  opacity: 1;
  cursor: default;
}
.di-readonly-surface .di-field-input :is(input, textarea, .rz-dropdown-label),
.di-field-readonly .di-field-input :is(input, textarea, .rz-dropdown-label) {
  border-color: var(--di-border) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--di-text) !important;
  opacity: 1;
}
.di-readonly-surface :is(input.di-field-input, textarea.di-field-input),
.di-readonly-surface .di-field-input :is(input, textarea),
.di-field-readonly :is(input.di-field-input, textarea.di-field-input),
.di-field-readonly .di-field-input :is(input, textarea) {
  caret-color: transparent;
  cursor: default;
}
.di-field-readonly :is(.rz-chkbox, .rz-checkbox) {
  cursor: default;
}
.di-readonly-surface :is(.di-field-input:focus-within, .di-field-input.rz-state-focused),
.di-field-readonly :is(.di-field-input:focus-within, .di-field-input.rz-state-focused) {
  border-color: var(--di-border) !important;
  box-shadow: none !important;
}
input.di-field-input.di-field-navigation-link {
  color: var(--di-accent-strong) !important;
  cursor: pointer !important;
  text-decoration: underline;
}
input.di-field-input.di-field-navigation-link:hover {
  color: var(--di-accent) !important;
  cursor: pointer !important;
}
input.di-field-input.di-field-navigation-link:focus-visible {
  box-shadow: var(--di-focus-ring) !important;
}

/* ============================================================================
   Appearance rules (AppearanceStateResolver): enfasi theme-safe su field e intent.
   Le stesse quattro classi sono l'unico contenuto della whitelist
   CssClass in schema, cosi' l'authoring non puo' produrre stili fuori da qui.
   ============================================================================ */
.di-appearance-tone-info,
.di-appearance-tone-success,
.di-appearance-tone-warning,
.di-appearance-tone-danger {
  color: var(--di-text-strong);
}
/* ============================================================================
   Header applicativo (AppHeaderPart): brand · azioni · DataScope · ingranaggio
   Impostazioni · profilo. Niente toggle sidebar: il menu resta sempre visibile.
   ============================================================================ */
.di-app-header {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--di-gap);
  padding: var(--di-gap);
}

/* Application chrome: l'header condivide la superficie della sidebar (il fondo
   arriva da --rz-header-background-color su .rz-header). I menu Radzen ospitati
   nell'header portano di default il fondo raised del top item: sul chrome
   diventerebbero rettangoli quasi bianchi, quindi la sola barra dei top item resta
   trasparente. I flyout annidati (.rz-navigation-menu) restano raised: devono
   emergere sopra il chrome. */
.di-app-header .rz-menu:not(.rz-profile-menu) {
  background-color: transparent;
}

/* La banda dell'header e' alta almeno --di-control-h in entrambe le modalita'.
   Senza questo minimo l'altezza dipenderebbe da cosa c'e' dentro: in Sidebar i
   controlli (36px), in Top i link di navigazione (che hanno gia' min-height
   --di-control-h), e l'header cambierebbe altezza al cambio di modalita'. */
.di-app-header-main {
  width: 100%;
  min-width: 0;
  min-height: var(--di-control-h);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--di-gap);
}

.di-app-header:not(.di-app-header-top-navigation) .di-app-header-main {
  height: 100%;
  align-items: center;
}

/* Stesso padding della modalita' Sidebar: la navigation in alto non e' un motivo
   per azzerare il gap verticale del chrome. */
.di-app-header-top-navigation {
  flex-direction: row;
  gap: var(--di-gap);
}

.di-app-header-top-navigation .di-app-header-main {
  height: 100%;
}

.di-app-header-top-navigation .di-brand {
  flex: 0 1 auto;
}

.di-app-header-top-navigation .di-header-navigation-group {
  flex: 0 1 auto;
  min-width: 0;
}

.di-app-header-top-navigation .di-header-actions {
  flex: 1 1 0;
  min-width: 0;
}

.di-header-navigation-group {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--di-gap);
}

.di-header-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
}

.di-header-navigation-separator {
  flex: none;
  width: 1px;
  height: calc(var(--di-control-h) - var(--di-space-4));
  background-color: var(--di-border-strong);
}

.di-top-navigation-menu {
  width: max-content;
  max-width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.di-top-navigation-menu:focus:not(:focus-visible) {
  outline: none;
}

.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active,
.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper {
  background-color: transparent !important;
}

.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper > .rz-navigation-item-link,
.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rzi {
  color: var(--di-text) !important;
}

.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper:hover {
  background-color: var(--di-surface-hover) !important;
}

.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper:hover > .rz-navigation-item-link,
.di-top-navigation-menu .rz-navigation-item.rz-navigation-item-wrapper-active > .rz-navigation-item-wrapper:hover > .rz-navigation-item-link > .rzi {
  color: var(--di-text-strong) !important;
}

.di-top-navigation-menu .rz-navigation-item.di-menu-item-selected > .rz-navigation-item-wrapper,
.di-top-navigation-menu .rz-navigation-item.di-menu-item-selected > .rz-navigation-item-wrapper:hover {
  background: var(--di-selection-container) !important;
}

.di-top-navigation-menu .rz-navigation-item.di-menu-item-selected > .rz-navigation-item-wrapper > .rz-navigation-item-link,
.di-top-navigation-menu .rz-navigation-item.di-menu-item-selected > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rzi {
  color: var(--di-on-selection-container) !important;
}

.di-top-navigation-menu .rz-navigation-item.di-menu-item-selected > .rz-navigation-item-wrapper::before {
  display: none !important;
}

/* height, non min-height: con un minimo il padding interno di Radzen puo' spingere
   il link oltre --di-control-h (succede in densita' Compatta) e la banda dell'header
   risulterebbe piu' alta in modalita' Top che in Sidebar. Il link e' gia' un flex
   centrato con testo su una riga sola, quindi l'altezza fissa non taglia nulla. */
.di-top-navigation-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  height: var(--di-control-h);
  border-radius: var(--di-radius-md);
}

.di-top-navigation-menu .rz-navigation-item-text {
  white-space: nowrap;
}

.di-header-actions {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--di-gap);
  margin-left: auto;
  min-width: 0;
}

.di-header-actions > .di-application-mode-picker {
  flex: 0 1 auto;
  width: max-content;
  max-width: 16rem;
  height: var(--di-control-h);
  border: 1px solid var(--di-border-strong);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-raised);
  color: var(--di-text);
  padding: 0 var(--di-space-2);
  font: inherit;
}

.di-header-actions > .di-data-scope-picker {
  flex: 0 1 auto;
  width: max-content;
  min-width: 0;
  max-width: 100%;
}

.di-header-actions > .di-data-scope-picker > .di-data-scope-picker-control {
  flex: 0 1 auto;
  width: max-content;
  min-width: 0;
  max-width: 100%;
}

.di-header-actions > .di-data-scope-picker .di-field-frame {
  width: max-content;
  max-width: 100%;
}

.di-header-actions > .di-data-scope-picker .di-data-scope-picker-input {
  width: max-content;
  min-width: calc(var(--di-control-h) * 5);
  max-width: 24rem;
  field-sizing: content;
}

.di-brand { display: flex; align-items: center; gap: var(--di-gap); min-width: 0; }
.di-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--di-radius-md);
  background: var(--di-accent); color: var(--di-accent-fg);
}
.di-brand-mark .rzi { font-size: 19px; }
.di-brand-name {
  font-size: var(--di-text-lg); font-weight: 600; color: var(--di-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Il badge e' un chip che deve staccarsi dal fondo che lo ospita, e il fondo e'
   il chrome dell'header: sunken e chrome sono lo stesso neutro in light, quindi
   il riempimento sparirebbe lasciando solo il contorno. Raised e' la superficie
   che gia' usano gli altri controlli dell'header. */
.di-render-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  max-width: 160px;
  height: 22px;
  padding: 0 var(--di-space-2);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-pill);
  background: var(--di-surface-raised);
  color: var(--di-text-muted);
  font-size: var(--di-text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-render-mode-badge-on-dark {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: var(--di-text-on-dark);
}

/* Bottoni-icona dell'header e dei pannelli laterali. */
.di-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border: none; background: transparent;
  border-radius: var(--di-radius-md);
  color: var(--di-text-muted); cursor: pointer;
  transition: background-color var(--di-transition), color var(--di-transition);
}
.di-iconbtn:hover { background: var(--di-accent-soft); color: var(--di-accent-strong); }
.di-iconbtn.di-active { background: var(--di-accent-soft); color: var(--di-accent-strong); }
.di-iconbtn .rzi { font-size: 21px; }

.di-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: var(--di-radius-pill);
  background: var(--di-accent); color: var(--di-accent-fg);
  font-size: var(--di-text-sm); font-weight: 600; cursor: pointer;
}
.di-avatar .rzi { font-size: 22px; }

.di-profile {
  flex: none;
  overflow: visible;
}

/* Il wrapper del profilo non porta inset propri: l'unica misura che conta e'
   l'avatar, altrimenti il suo padding-block gonfia la riga dell'header. */
.di-profile > .rz-profile-menu {
  padding-inline: 0;
  padding-block: 0;
  border-inline-start: 0;
  background-color: transparent;
}

.di-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.di-settings-overlay.di-open {
  pointer-events: auto;
}

.di-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity var(--di-transition);
}

.di-settings-overlay.di-open .di-settings-backdrop {
  opacity: 1;
}

.di-settings-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, 90vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--di-border);
  background: var(--di-surface-raised);
  color: var(--di-text);
  box-shadow: var(--di-shadow-3);
  transform: translateX(100%);
  transition: transform var(--di-transition);
}

.di-settings-overlay.di-open .di-settings-drawer {
  transform: translateX(0);
}

.di-settings-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--di-space-2);
  justify-content: space-between;
  min-height: var(--di-shell-header-height, 48px);
  padding: var(--di-space-3);
  border-bottom: 1px solid var(--di-border);
  background: var(--di-surface-sunken);
}

.di-settings-title {
  min-width: 0;
  color: var(--di-text-strong);
  font-size: var(--di-text-lg);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--di-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--di-space-4);
  overflow: auto;
}

.di-settings-section { display: flex; flex-direction: column; gap: var(--di-space-2); }
.di-settings-label { font-size: var(--di-text-sm); color: var(--di-text-muted); }
.di-settings-color-group-label {
  margin-top: var(--di-space-2);
  color: var(--di-text-muted);
  font-size: var(--di-text-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.di-settings-hint { font-size: var(--di-text-sm); color: var(--di-text-muted); line-height: 1.5; }

.di-settings-collapsible {
  border-top: 1px solid var(--di-border);
  padding-top: var(--di-space-2);
}
.di-settings-collapsible > summary {
  cursor: pointer;
  font-size: var(--di-text-sm);
  color: var(--di-text-muted);
  list-style: none;
}
.di-settings-collapsible > summary::-webkit-details-marker { display: none; }
.di-settings-collapsible > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: var(--di-space-1);
  transition: transform var(--di-transition);
}
.di-settings-collapsible[open] > summary::before { transform: rotate( 90deg ); }
.di-settings-collapsible > div { margin-top: var(--di-space-2); display: flex; flex-direction: column; gap: var(--di-space-2); }

.di-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--di-space-1);
  padding: var(--di-space-1);
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-sunken);
}

.di-segment {
  min-width: 0;
  min-height: 30px;
  padding: 0 var(--di-space-2);
  border: none;
  border-radius: var(--di-radius-sm);
  background: transparent;
  color: var(--di-text-muted);
  font-size: var(--di-text-sm);
  font-weight: 600;
  cursor: pointer;
}

.di-segment:hover {
  background: var(--di-surface-hover);
  color: var(--di-text-strong);
}

.di-segment.di-selected {
  background: var(--di-surface-raised);
  color: var(--di-text-strong);
  box-shadow: var(--di-shadow-1);
}

.di-color-row {
  display: flex;
  flex-direction: column;
  gap: var(--di-space-2);
}

.di-color-row-label {
  color: var(--di-text-strong);
  font-size: var(--di-text-sm);
  font-weight: 600;
}

.di-color-picker-row {
  display: grid;
  grid-template-columns: auto minmax(82px, 1fr) auto;
  align-items: center;
  gap: var(--di-space-2);
}

.di-color-value {
  min-width: 0;
  padding: 4px 6px;
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-sunken);
  color: var(--di-text-muted);
  font-family: var(--di-font-mono);
  font-size: var(--di-text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-font-select {
  grid-column: 1 / span 2;
  min-width: 0;
  height: var(--di-control-h);
  border: 1px solid var(--di-border-strong);
  border-radius: var(--di-radius-md);
  background: var(--di-surface-raised);
  color: var(--di-text);
  padding: 0 var(--di-space-2);
  font: inherit;
}

.di-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-3); }
.di-swatch {
  width: 28px; height: 28px; padding: 0;
  border: none; border-radius: var(--di-radius-pill); cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color var(--di-transition);
}
.di-swatch.di-selected { outline-color: var(--di-text-strong); }

.di-swatch-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--di-surface-sunken);
  color: var(--di-text-muted);
  border: 1px solid var(--di-border);
}

.di-swatch-reset .rzi {
  font-size: 17px;
}

.di-one-time-result-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--di-space-4);
}

.di-one-time-result-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--di-space-2);
}

.di-one-time-result-value {
  width: 100%;
  font-family: var(--di-font-mono);
}

:root[data-di-peek="navigate"] [data-di-peek-hotspot] {
  cursor: pointer;
}

:root[data-di-peek="navigate"] [data-di-peek-hotspot] .di-field-input {
  cursor: pointer;
}
.di-field-input-casing-upper {
  text-transform: uppercase;
}

.di-field-input-casing-lower {
  text-transform: lowercase;
}

/* Validation has one uniform border owner: the standalone control.
   Numeric inputs are transparent inside that chrome to avoid nested borders. */
.di-field-frame-invalid :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  border-color: var(--di-danger) !important;
  box-shadow: none !important;
}
.di-field-frame-warning :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  border-color: var(--di-warning) !important;
  box-shadow: none !important;
}
.di-field-frame-invalid-strong:not(.di-field-frame-labeled) :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  border-color: var(--di-danger) !important;
  background: var(--di-danger-soft) !important;
}
/* Historical changes retain a filled surface and a uniform info border, separate from validation. */
.di-field-frame-info:not(.di-field-frame-labeled) :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  border-color: var(--di-info) !important;
  background: var(--di-info-soft) !important;
  box-shadow: none !important;
}
/* Labeled editors expose feedback on the label; their border stays uniform while editing. */
.di-field-frame-labeled.di-field-frame-info { --di-field-feedback-color: var(--di-info); }
.di-field-frame-labeled.di-field-frame-warning { --di-field-feedback-color: var(--di-warning); }
.di-field-frame-labeled.di-field-frame-invalid { --di-field-feedback-color: var(--di-danger); }
.di-field-frame-labeled:is(.di-field-frame-invalid, .di-field-frame-warning, .di-field-frame-info) :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  border-color: var(--di-field-feedback-color) !important;
  box-shadow: none !important;
}
.di-field-frame-invalid .rz-numeric .rz-numeric-input {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Invalid fields keep the same inset focus geometry, tinted with their validation state. */
.di-field-frame-invalid:focus-within :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--di-danger) 30%, transparent) !important;
}
.di-field-frame-invalid:focus-within .rz-numeric-input {
  box-shadow: none !important;
}
.di-field-frame-warning:focus-within :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--di-warning) 30%, transparent) !important;
}
.di-field-frame-warning:focus-within .rz-numeric-input {
  box-shadow: none !important;
}
.di-field-frame-labeled:focus-within:is(.di-field-frame-invalid, .di-field-frame-warning, .di-field-frame-info) :is(input.rz-textbox, input.rz-inputtext:not(.rz-numeric-input), textarea.rz-textarea, .rz-dropdown, .rz-numeric) {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--di-field-feedback-color) 30%, transparent) !important;
}