/* ============================================================================
   DiOnce Design Tokens  (--di-*)
   ----------------------------------------------------------------------------
   UNICO posto delle decisioni visive. I componenti DiOnce consumano solo questi
   token; il file theme-default.css li traduce verso le variabili Radzen (--rz-*).

   Riferimento: .docs/framework/extensions/13-theming-design-system.md

   Identità: light, neutri freddi LEGGERMENTE tinti dell'hue d'accento (non
   "piatti"), gerarchia per superfici + ombre morbide, accento indigo-violetto
   distintivo, densità comfortable. Un solo hue governa accento e tinta dei
   grigi: cambiare --di-accent-h ritematizza l'intera app in modo coerente.
   ============================================================================ */

:root {
  /* ---- Hue d'accento: l'unica leva per cambiare "colore" all'app ---------- */
  --di-accent-h: 264;                 /* indigo-violetto; 152 = verde, 232 = blu, 25 = corallo */

  /* ---- Accento (derivazione OKLCH dall'hue) ------------------------------- */
  --di-accent:         oklch(0.555 0.165 var(--di-accent-h));
  --di-accent-hover:   oklch(0.500 0.170 var(--di-accent-h));
  --di-accent-strong:  oklch(0.430 0.155 var(--di-accent-h));
  --di-accent-soft:    oklch(0.555 0.165 var(--di-accent-h) / 0.12);  /* hover/selezione/badge */
  /* Focus stays inside the control without a halo or a layout change. */
  --di-focus-ring:     inset 0 0 0 1px oklch(0.555 0.165 var(--di-accent-h) / 0.30);
  --di-focus-outline:  1px solid var(--di-text-muted);
  --di-accent-fg:      #ffffff;
  --di-progress:       var(--di-accent);

  /* ---- Secondary / selection: secondo colore brand, solo selezione corrente.
     Gli stati non selezionati e ButtonStyle.Secondary usano primary derivato. */
  --di-secondary-h: calc(var(--di-accent-h) + 34);
  --di-secondary:                oklch(0.560 0.130 var(--di-secondary-h));
  --di-on-secondary:             #ffffff;
  --di-secondary-container:      oklch(0.915 0.055 var(--di-secondary-h));
  --di-on-secondary-container:   oklch(0.235 0.030 var(--di-secondary-h));
  --di-secondary-strong:         var(--di-on-secondary-container);
  --di-secondary-soft:           var(--di-secondary-container);
  --di-primary-secondary:        oklch(0.660 0.120 var(--di-accent-h));
  --di-on-primary-secondary:     #ffffff;
  --di-primary-secondary-soft:   var(--di-accent-soft);
  --di-primary-secondary-hover:  color-mix(in srgb, var(--di-primary-secondary-soft) 72%, transparent);
  --di-selection:                var(--di-secondary);
  --di-on-selection:             var(--di-on-secondary);
  --di-selection-container:      var(--di-secondary-container);
  --di-on-selection-container:   var(--di-on-secondary-container);
  --di-selection-active:         var(--di-selection-container);
  --di-selection-indicator:      var(--di-selection);
  --di-accent-selected:          var(--di-selection-container);       /* alias legacy: le selezioni sono governate dal secondary */

  /* ---- Neutri tinti: la scala completa light->dark -----------------------
     Le superfici chiare (50-300) e i toni scuri di testo/sidebar (700-900)
     condividono lo stesso hue: è ciò che rende l'interfaccia "disegnata". */
  --di-neutral-50:  oklch(0.992 0.004 var(--di-accent-h));
  --di-neutral-100: oklch(0.967 0.008 var(--di-accent-h));   /* canvas app */
  --di-neutral-200: oklch(0.935 0.011 var(--di-accent-h));   /* header griglia, celle frozen */
  --di-neutral-300: oklch(0.895 0.014 var(--di-accent-h));   /* bordi, header ordinato */
  --di-neutral-400: oklch(0.800 0.018 var(--di-accent-h));
  --di-neutral-500: oklch(0.660 0.022 var(--di-accent-h));   /* placeholder, disabilitato */
  --di-neutral-600: oklch(0.545 0.028 var(--di-accent-h));   /* testo terziario */
  --di-neutral-700: oklch(0.430 0.032 var(--di-accent-h));   /* testo secondario */
  --di-neutral-800: oklch(0.330 0.034 var(--di-accent-h));   /* testo corpo, sfondo sidebar */
  --di-neutral-900: oklch(0.235 0.030 var(--di-accent-h));   /* titoli, voce menu attiva */

  /* ---- Superfici (gerarchia per livelli, non per bordi) ------------------- */
  --di-surface-raised:  oklch(0.995 0.0035 var(--di-accent-h)); /* card, input, popup: emergono sul canvas */
  --di-surface-canvas:  var(--di-neutral-100);                  /* workspace/body, leggermente più scuro */
  --di-surface-sunken:  var(--di-neutral-200);                  /* incassi, header griglia */
  --di-surface-hover:   oklch(0.955 0.010 var(--di-accent-h));  /* righe/voci in hover */
  --di-surface-sidebar: var(--di-surface-sunken);               /* application chrome: header + rail laterale */
  --di-control-hover:   var(--di-surface-raised);               /* controllo in hover sopra una riga evidenziata */

  --di-border:        oklch(0.870 0.013 var(--di-accent-h));   /* separatori evidenti ma non pesanti */
  --di-border-strong: oklch(0.785 0.017 var(--di-accent-h));   /* bordo controlli, hover, focus ring */
  --di-border-width:  1px;

  /* Opaque blends keep dense data surfaces quiet in both light and dark themes. */
  --di-surface-subtle: color-mix(in srgb, var(--di-surface-raised) 80%, var(--di-surface-sunken));
  --di-border-subtle: color-mix(in srgb, var(--di-border) 55%, var(--di-surface-raised));
  --di-grid-header-surface: color-mix(in srgb, var(--di-surface-raised) 45%, var(--di-surface-sunken));

  /* ---- Testo -------------------------------------------------------------- */
  --di-text:        var(--di-neutral-800);
  --di-text-strong: var(--di-neutral-900);
  --di-text-muted:  var(--di-neutral-600);
  --di-text-on-dark:#ffffff;

  /* ---- Semantici (stessa pipeline OKLCH, hue fissi) ----------------------- */
  --di-success:        oklch(0.620 0.140 150);
  --di-success-strong: oklch(0.540 0.140 150);
  --di-success-soft:   oklch(0.620 0.140 150 / 0.14);
  --di-warning:        oklch(0.760 0.140 75);
  --di-warning-strong: oklch(0.680 0.140 70);
  --di-warning-soft:   oklch(0.760 0.140 75 / 0.16);
  --di-danger:         oklch(0.585 0.190 25);
  --di-danger-strong:  oklch(0.520 0.190 25);
  --di-danger-soft:    oklch(0.585 0.190 25 / 0.14);
  --di-info:           oklch(0.620 0.120 235);
  --di-info-strong:    oklch(0.550 0.120 235);
  --di-info-soft:      oklch(0.620 0.120 235 / 0.14);

  /* Intermediate semantic fills, mixed with an opaque surface to preserve the theme's text contrast. */
  --di-toast-tint: 35%;
  --di-feedback-action-hover: color-mix(in srgb, var(--di-text) 10%, transparent);

  /* ---- Superficie "codice": blocchi console/JSON/log, sempre scuri -------
     Unico bisogno non coperto dal vocabolario cromatico: aree monospazio a
     contrasto alto (log runtime, JSON grezzo dei wizard), scure anche in light. */
  --di-code-surface:    oklch(0.205 0.028 var(--di-accent-h));
  --di-code-text:       oklch(0.925 0.014 var(--di-accent-h));

  /* ---- Palette grafici (armonizzata, alternanza fredda/calda) ------------- */
  --di-series-1: oklch(0.555 0.165 264);
  --di-series-2: var(--di-primary-secondary);
  --di-series-3: oklch(0.620 0.140 150);
  --di-series-4: oklch(0.760 0.140 75);
  --di-series-5: oklch(0.585 0.190 25);
  --di-series-6: oklch(0.600 0.150 320);
  --di-series-7: oklch(0.640 0.130 235);
  --di-series-8: oklch(0.660 0.120 125);

  /* ---- Spazi: scala 4px --------------------------------------------------- */
  --di-space-1: 4px;  --di-space-2: 8px;  --di-space-3: 12px;
  --di-space-4: 16px; --di-space-6: 24px; --di-space-8: 32px;
  /* Grammatica G + μ: G governa ogni relazione strutturale fra aggregati e ogni
     inset di container (part, pane, splitter, menu, toolbar, field); μ governa
     solo le parti interne di una singola unità concettuale. Control height, row
     height, action size e cell padding restano metriche indipendenti. */
  --di-gap: var(--di-space-3);              /* G: unità strutturale unica */
  --di-micro-gap: var(--di-space-1);        /* μ: relazioni atomiche interne a una unità */
  --di-focus-guard: var(--di-space-1);      /* misura tecnica anti-clipping, non un inset strutturale */

  --di-metric-dock-width: 340px;
  --di-metric-dock-max-height: 45%;

  /* ---- Forma e profondità ------------------------------------------------- */
  --di-radius-sm: 6px; --di-radius-md: 8px; --di-radius-lg: 12px; --di-radius-pill: 999px;
  --di-shadow-1: 0 1px 2px rgba(22, 24, 46, 0.05), 0 1px 3px rgba(22, 24, 46, 0.08);
  --di-shadow-2: 0 2px 4px rgba(22, 24, 46, 0.05), 0 6px 16px rgba(22, 24, 46, 0.08);
  --di-shadow-3: 0 4px 8px rgba(22, 24, 46, 0.06), 0 14px 36px rgba(22, 24, 46, 0.14);

  /* ---- Tipografia --------------------------------------------------------- */
  --di-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
             "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --di-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
                  monospace;
  --di-text-xs: 11px; --di-text-sm: 12.5px; --di-text-md: 15px; --di-text-lg: 17px; --di-text-xl: 22px;
  --di-type-page-title: var(--di-text-xl);
  --di-type-section-title: var(--di-text-lg);
  --di-type-body: var(--di-text-md);
  --di-type-label: var(--di-text-sm);
  --di-label-weight: 400;
  --di-label-required-weight: 600;
  --di-group-title-weight: 600;
  --di-type-secondary: var(--di-text-sm);
  /* Glifo dentro il cerchio identita' entity (EntityPart/ContextPart): dimensione condivisa, indipendente
     dalla dimensione del cerchio (--di-control-h * 1.5), cosi' le due intestazioni restano allineate. */
  --di-entity-avatar-glyph: 30px;

  /* ---- Densità (comfortable: estetica > compattezza gestionale) ----------- */
  --di-hit-min: 0px;
  --di-control-h: 40px;
  --di-grid-row-h: 44px;
  /* Section tabs follow control density; nested selectors keep a smaller visual footprint. */
  --di-tab-indicator-size: calc(2 * var(--di-border-width));
  --di-tab-nested-height: max(calc(var(--di-control-h) - 2 * var(--di-space-1)), var(--di-hit-min));
  --di-tab-inline-padding: var(--di-space-3);
  --di-tab-track-padding: var(--di-space-1);
  --di-tab-selected-surface: color-mix(in oklch, var(--di-selection-container) 45%, transparent);
  --di-tab-scrollbar-size: 10px;
  --di-tab-scrollbar-thumb-inset: 2px;
  --di-analysis-chip-content-min-height: 1.25rem;
  /* Geometria scrollbar: --di-scrollbar-size e' la larghezza del binario (l'area
     di presa), --di-scrollbar-thumb-inset lo spazio trasparente fra binario e
     thumb. Fra Pointer e Touch cambiano solo i valori: la struttura (binario
     trasparente + thumb a pillola) e' la stessa. */
  --di-scrollbar-size: 10px;
  --di-scrollbar-thumb-inset: 2px;

  /* ---- Slot azioni dei field ---------------------------------------------- */
  /* Unica geometria per i bottoni interni ai field: la usano sia i controlli nativi Radzen sia quelli
     costruiti a mano, cosi' non esistono due dimensioni di trigger nella stessa form. */
  --di-field-action-size: 28px;
  --di-field-action-gap: 2px;
  --di-field-action-inset: var(--di-space-1);
  --di-field-text-inset: var(--di-space-3);
  --di-field-unit-width: 8rem;
  --di-field-number-suffix-width: 4ch;

  /* ---- Movimento ---------------------------------------------------------- */
  --di-transition: 80ms ease-out;
  --di-menu-motion-duration: 60ms;
  --di-motion-press-duration: 120ms;
  --di-motion-enter-duration: 180ms;
  --di-motion-feedback-duration: 220ms;
  --di-motion-confirm-duration: 360ms;
  --di-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-di-theme="dark"] {
  --di-toast-tint: 30%;
  --di-accent:         oklch(0.690 0.135 var(--di-accent-h));
  --di-accent-hover:   oklch(0.745 0.130 var(--di-accent-h));
  --di-accent-strong:  oklch(0.805 0.110 var(--di-accent-h));
  --di-accent-soft:    oklch(0.690 0.135 var(--di-accent-h) / 0.20);
  --di-focus-ring:     inset 0 0 0 1px oklch(0.690 0.135 var(--di-accent-h) / 0.34);
  --di-accent-fg:      oklch(0.165 0.026 var(--di-accent-h));

  --di-secondary:                oklch(0.720 0.110 var(--di-secondary-h));
  --di-on-secondary:             oklch(0.170 0.024 var(--di-secondary-h));
  --di-secondary-container:      oklch(0.320 0.055 var(--di-secondary-h));
  --di-on-secondary-container:   oklch(0.910 0.030 var(--di-secondary-h));
  --di-secondary-strong:         oklch(0.830 0.080 var(--di-secondary-h));
  --di-secondary-soft:           oklch(0.720 0.110 var(--di-secondary-h) / 0.18);
  --di-primary-secondary:        oklch(0.710 0.105 var(--di-accent-h));
  --di-on-primary-secondary:     oklch(0.170 0.024 var(--di-accent-h));
  --di-primary-secondary-soft:   oklch(0.710 0.105 var(--di-accent-h) / 0.18);
  --di-primary-secondary-hover:  oklch(0.710 0.105 var(--di-accent-h) / 0.24);
  --di-selection:                var(--di-secondary);
  --di-on-selection:             var(--di-on-secondary);
  --di-selection-container:      var(--di-secondary-container);
  --di-on-selection-container:   var(--di-on-secondary-container);
  --di-selection-active:         var(--di-selection-container);
  --di-selection-indicator:      var(--di-secondary);
  --di-accent-selected:          var(--di-selection-container);

  --di-neutral-50:  oklch(0.300 0.020 var(--di-accent-h));
  --di-neutral-100: oklch(0.245 0.020 var(--di-accent-h));
  --di-neutral-200: oklch(0.205 0.022 var(--di-accent-h));
  --di-neutral-300: oklch(0.350 0.020 var(--di-accent-h));
  --di-neutral-400: oklch(0.470 0.018 var(--di-accent-h));
  --di-neutral-500: oklch(0.610 0.018 var(--di-accent-h));
  --di-neutral-600: oklch(0.730 0.014 var(--di-accent-h));
  --di-neutral-700: oklch(0.830 0.010 var(--di-accent-h));
  --di-neutral-800: oklch(0.900 0.008 var(--di-accent-h));
  --di-neutral-900: oklch(0.965 0.006 var(--di-accent-h));

  --di-surface-canvas:  oklch(0.205 0.022 var(--di-accent-h));
  --di-surface-raised:  oklch(0.245 0.020 var(--di-accent-h));
  --di-surface-sunken:  oklch(0.170 0.024 var(--di-accent-h));
  --di-surface-hover:   oklch(0.300 0.020 var(--di-accent-h));
  --di-surface-sidebar: oklch(0.165 0.026 var(--di-accent-h));
  --di-border:        oklch(0.355 0.018 var(--di-accent-h));
  --di-border-strong: oklch(0.470 0.018 var(--di-accent-h));

  --di-text:        var(--di-neutral-800);
  --di-text-strong: var(--di-neutral-900);
  --di-text-muted:  var(--di-neutral-600);
  --di-text-on-dark:var(--di-neutral-900);

  --di-success:        oklch(0.720 0.120 150);
  --di-success-strong: oklch(0.820 0.095 150);
  --di-success-soft:   oklch(0.720 0.120 150 / 0.18);
  --di-warning:        oklch(0.820 0.115 75);
  --di-warning-strong: oklch(0.900 0.090 75);
  --di-warning-soft:   oklch(0.820 0.115 75 / 0.18);
  --di-danger:         oklch(0.700 0.160 25);
  --di-danger-strong:  oklch(0.805 0.125 25);
  --di-danger-soft:    oklch(0.700 0.160 25 / 0.18);
  --di-info:           oklch(0.730 0.105 235);
  --di-info-strong:    oklch(0.830 0.080 235);
  --di-info-soft:      oklch(0.730 0.105 235 / 0.18);

  --di-code-surface:    oklch(0.145 0.025 var(--di-accent-h));
  --di-code-text:       oklch(0.925 0.014 var(--di-accent-h));

  --di-series-1: var(--di-accent);
  --di-series-2: var(--di-primary-secondary);
  --di-series-3: var(--di-success);
  --di-series-4: var(--di-warning);
  --di-series-5: var(--di-danger);
  --di-series-6: oklch(0.730 0.125 320);
  --di-series-7: var(--di-info);
  --di-series-8: oklch(0.760 0.105 125);

  --di-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.20);
  --di-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.26);
  --di-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.28), 0 18px 42px rgba(0, 0, 0, 0.34);
}

:root[data-di-density="compact"] {
  --di-control-h: 32px;
  --di-grid-row-h: 36px;
  --di-field-action-size: 24px;
  --di-gap: var(--di-space-2);              /* G in Compact: 8px */
  --rz-body-font-size: 0.875rem;
  --rz-card-padding: var(--di-gap);
  --rz-panel-padding: var(--di-gap);
  --rz-grid-cell-padding: 0.375rem 0.5rem;
}

:root[data-di-input="touch"] {
  --di-hit-min: 44px;
  --di-control-h: 48px;
  --di-grid-row-h: 52px;
  --di-field-action-size: 36px;
  --di-scrollbar-size: 48px;
  --di-scrollbar-thumb-inset: 10px;
}