/* ============================================================================
   DiOnce — Tema "default" (mapping --di-* -> --rz-*)
   ----------------------------------------------------------------------------
   UNICO file che conosce entrambi i vocabolari. Sovrascrive le variabili del
   tema Radzen "default" con i token DiOnce: la base Radzen NON viene toccata,
   l'identità si costruisce sopra via custom properties.

   Da rivedere agli upgrade major di Radzen (cfr. .docs/.../13-theming...md §9):
   se Radzen rinomina delle --rz-*, il fix è qui e solo qui.

   Caricare DOPO <RadzenTheme Theme="default" /> e DOPO tokens.css.
   ============================================================================ */

:root {
  /* ---- Tipografia --------------------------------------------------------- */
  --rz-text-font-family: var(--di-font);
  --rz-body-font-size: 0.9375rem;          /* 15px: lettura più rilassata del default 14px */
  --rz-body-line-height: 1.55;

  /* ---- Raggi -------------------------------------------------------------- */
  --rz-border-radius: var(--di-radius-md);
  --rz-card-border-radius: var(--di-radius-lg);
  --rz-panel-border-radius: var(--di-radius-lg);
  --rz-button-border-radius: var(--di-radius-md);

  /* ---- Ombre -------------------------------------------------------------- */
  --rz-shadow-1: var(--di-shadow-1);
  --rz-shadow-2: var(--di-shadow-2);
  --rz-shadow-3: var(--di-shadow-3);

  /* ---- Scala neutra tinta (tutto Radzen deriva da qui) -------------------- */
  --rz-white: #ffffff;
  --rz-black: #000000;
  --rz-base-50:  var(--di-neutral-50);
  --rz-base-100: var(--di-neutral-100);
  --rz-base-200: var(--di-neutral-200);
  --rz-base-300: var(--di-neutral-300);
  --rz-base-400: var(--di-neutral-400);
  --rz-base-500: var(--di-neutral-500);
  --rz-base-600: var(--di-neutral-600);
  --rz-base-700: var(--di-neutral-700);
  --rz-base-800: var(--di-neutral-800);
  --rz-base-900: var(--di-neutral-900);

  /* Superfici: profondità a livelli (canvas più scuro, "raised" emerge) */
  --rz-base-background-color: var(--di-surface-raised);   /* card, input, header */
  /* Area contenuti (.rz-layout) = raised: il contenuto a filo (griglia) non
     lascia intravedere strisce di canvas grigio. La profondità viene da
     sidebar scura + bordi + ombre, non dallo sfondo del body. */
  --rz-body-background-color: var(--di-surface-raised);

  /* ---- Testo -------------------------------------------------------------- */
  --rz-text-color:           var(--di-text);
  --rz-text-secondary-color: var(--di-text-muted);
  --rz-text-tertiary-color:  var(--di-text-muted);
  --rz-text-title-color:     var(--di-text-strong);
  --rz-text-disabled-color:  var(--di-neutral-500);
  --rz-text-contrast-color:  var(--di-text-on-dark);

  /* ---- Primario (accento) ------------------------------------------------- */
  --rz-primary:         var(--di-accent);
  --rz-primary-light:   oklch(0.635 0.150 var(--di-accent-h));
  --rz-primary-lighter: var(--di-accent-soft);
  --rz-primary-dark:    var(--di-accent-hover);
  --rz-primary-darker:  var(--di-accent-strong);
  --rz-on-primary:         var(--di-accent-fg);
  --rz-on-primary-light:   var(--di-accent-fg);
  --rz-on-primary-lighter: var(--di-accent);
  --rz-on-primary-dark:    var(--di-accent-fg);
  --rz-on-primary-darker:  var(--di-accent-fg);

  /* ---- Radzen secondary: variante leggera del primary, non brand secondary */
  --rz-secondary:         var(--di-primary-secondary);
  --rz-secondary-light:   color-mix(in srgb, var(--di-primary-secondary) 82%, #ffffff);
  --rz-secondary-lighter: var(--di-primary-secondary-soft);
  --rz-secondary-dark:    var(--di-accent-hover);
  --rz-secondary-darker:  var(--di-accent-strong);
  --rz-on-secondary:         var(--di-on-primary-secondary);
  --rz-on-secondary-light:   var(--di-on-primary-secondary);
  --rz-on-secondary-lighter: var(--di-accent-strong);
  --rz-on-secondary-dark:    var(--di-accent-fg);
  --rz-on-secondary-darker:  var(--di-accent-fg);

  /* ---- Semantici ---------------------------------------------------------- */
  --rz-success:         var(--di-success);
  --rz-success-light:   oklch(0.700 0.130 150);
  --rz-success-lighter: var(--di-success-soft);
  --rz-success-dark:    var(--di-success-strong);
  --rz-on-success: #ffffff;

  --rz-warning:         var(--di-warning);
  --rz-warning-light:   oklch(0.830 0.120 75);
  --rz-warning-lighter: var(--di-warning-soft);
  --rz-warning-dark:    var(--di-warning-strong);
  --rz-on-warning: var(--di-neutral-900);

  --rz-danger:         var(--di-danger);
  --rz-danger-light:   oklch(0.660 0.170 25);
  --rz-danger-lighter: var(--di-danger-soft);
  --rz-danger-dark:    var(--di-danger-strong);
  --rz-on-danger: #ffffff;

  --rz-info:         var(--di-info);
  --rz-info-light:   oklch(0.700 0.110 235);
  --rz-info-lighter: var(--di-info-soft);
  --rz-info-dark:    var(--di-info-strong);
  --rz-on-info: #ffffff;

  /* ---- Bordi e focus ------------------------------------------------------ */
  --rz-border-normal: var(--di-border);                                     /* separatori generali: misurati */
  --rz-border-hover:  var(--rz-border-width) solid var(--di-border-strong);  /* hover = invariato (no border che sparisce) */
  --rz-border-focus:  var(--rz-border-width) solid var(--di-border-strong);  /* focus = bordo invariato (l'indicatore è la sfumatura) */
  /* Bordo dei controlli (input, dropdown, datepicker...): più evidente dei separatori */
  --rz-input-border: 1px solid var(--di-border-strong);
  --rz-input-border-block-end: 1px solid var(--di-border-strong);
  --rz-outline-color: var(--di-text-muted);
  --rz-outline-width: 1px;
  --rz-outline-offset: 0;

  /* ---- Densità comfortable ------------------------------------------------ */
  --rz-input-height: var(--di-control-h);
  --rz-form-field-filled-height: var(--di-control-h);
  --rz-card-padding: var(--di-gap);         /* G: inset container, niente somma con padding DiOnce */
  --rz-panel-padding: var(--di-gap);

  /* ---- Layout: body a filo (niente padding/sfondo attorno al contenuto) --- */
  --rz-layout-body-padding: 0;
  --rz-layout-body-background-color: transparent;

  /* ---- Layout: application chrome a L. L'header condivide la superficie della
         sidebar (--di-surface-sidebar): header e rail sono la stessa infrastruttura
         applicativa e insieme incorniciano il workspace, che resta canvas. La
         separazione e' un filetto da 1px, mai un'ombra: la gerarchia viene dalla
         superficie e dai bordi, non dall'elevazione. ------------------------- */
  --rz-header-background-color: var(--di-surface-sidebar);
  --rz-header-shadow: none;
  --rz-header-border: 1px solid var(--di-border);
  --rz-footer-background-color: var(--di-surface-raised);
  --rz-footer-border: 1px solid var(--di-border);

  /* ---- Menu / context menu: superfici chiare, testo scuro leggibile ------- */
  --rz-menu-background-color: var(--di-surface-raised);
  --rz-menu-border: 1px solid var(--di-border-strong);
  --rz-menu-border-radius: var(--di-radius-md);
  --rz-menu-item-border-radius: var(--di-radius-sm);
  --rz-menu-item-color: var(--di-text);
  --rz-menu-item-icon-color: var(--di-text-muted);
  --rz-menu-item-hover-background-color: var(--di-surface-hover);
  --rz-menu-item-hover-color: var(--di-text-strong);
  --rz-menu-item-icon-hover-color: var(--di-text-strong);
  --rz-menu-item-selected-background-color: var(--di-selection-container);
  --rz-menu-item-selected-color: var(--di-on-selection-container);
  --rz-menu-top-item-background-color: var(--di-surface-raised);
  --rz-menu-top-item-color: var(--di-text);
  --rz-menu-top-item-icon-color: var(--di-text-muted);
  --rz-menu-top-item-hover-background-color: var(--di-surface-hover);
  --rz-menu-top-item-hover-color: var(--di-text-strong);
  --rz-menu-top-item-icon-hover-color: var(--di-text-strong);
  --rz-menu-top-item-selected-background-color: var(--di-selection-container);
  --rz-menu-top-item-selected-color: var(--di-on-selection-container);

  /* ---- Sidebar: superficie chiara distinta, selezione a pill d'accento ---- */
  --rz-sidebar-background-color: var(--di-surface-sidebar);
  --rz-sidebar-color: var(--di-text);
  --rz-sidebar-border-inline-end: 0;
  --rz-sidebar-shadow: var(--di-shadow-2);
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-color: var(--di-on-surface);
  --rz-panel-menu-item-hover-background-color: var(--di-primary-secondary-hover);
  --rz-panel-menu-item-hover-color: var(--di-on-surface);
  --rz-panel-menu-item-active-background-color: var(--di-selection-container);
  --rz-panel-menu-item-active-color: var(--di-on-selection-container);
  --rz-panel-menu-item-active-indicator: var(--di-selection-indicator);
  --rz-panel-menu-item-border-radius: var(--di-radius-md);
  --rz-panel-menu-item-margin-inline: var(--di-space-2);
  --rz-panel-menu-item-2nd-level-color: var(--di-on-surface-variant);
  --rz-panel-menu-item-2nd-level-background-color: transparent;
  --rz-panel-menu-item-2nd-level-hover-background-color: var(--di-primary-secondary-hover);
  --rz-panel-menu-item-2nd-level-hover-color: var(--di-on-surface);
  --rz-panel-menu-item-2nd-level-active-background-color: var(--di-selection-container);
  --rz-panel-menu-item-2nd-level-active-color: var(--di-on-selection-container);
  --rz-panel-menu-item-2nd-level-border-radius: var(--di-radius-md);
  --rz-panel-menu-item-2nd-level-margin-block: 0;
  --rz-panel-menu-item-2nd-level-margin-inline: 0;
  --rz-panel-menu-item-3rd-level-color: var(--di-on-surface-variant);
  --rz-panel-menu-item-3rd-level-background-color: transparent;
  --rz-panel-menu-item-3rd-level-hover-background-color: var(--di-primary-secondary-hover);
  --rz-panel-menu-item-3rd-level-hover-color: var(--di-on-surface);
  --rz-panel-menu-item-3rd-level-active-background-color: var(--di-selection-container);
  --rz-panel-menu-item-3rd-level-active-color: var(--di-on-selection-container);
  --rz-panel-menu-2nd-level-vertical-offset: 0;

  /* ---- Griglie: superfici a livelli, righe alternate tenui ---------------- */
  --rz-grid-cell-padding: 0.5rem 0.75rem;
  --rz-grid-header-background-color: var(--di-grid-header-surface);
  --rz-grid-header-color: var(--di-text);
  --rz-grid-header-font-size: var(--di-type-label);
  --rz-grid-header-font-weight: 600;
  --rz-grid-header-text-transform: none;
  /* Il footer e' l'altra fascia strutturale della griglia: stessa superficie incassata dell'header,
     altrimenti resta sulla base Radzen non tematizzata. */
  --rz-grid-foot-background-color: var(--di-grid-header-surface);
  --rz-grid-header-sorted-background-color: var(--di-grid-header-surface);
  --rz-grid-stripe-background-color: var(--di-surface-subtle);
  --rz-grid-stripe-odd-background-color: var(--di-surface-raised);
  --rz-grid-frozen-stripe-background-color: var(--di-surface-subtle);
  --rz-grid-frozen-stripe-odd-background-color: var(--di-surface-raised);
  --rz-grid-hover-background-color: var(--di-surface-hover);
  /* Selezione = secondary container: primary resta per azioni e focus. */
  --rz-grid-selected-background-color: var(--di-selection-container);
  --rz-grid-selected-color: var(--di-on-selection-container);
  --rz-grid-cell-focus-background-color: var(--di-accent-soft);
  --rz-grid-border: 1px solid var(--di-border);
  --rz-grid-cell-border: 1px solid var(--di-border-subtle);
  --rz-grid-header-cell-border: 1px solid var(--di-border-subtle);

  /* ---- Checkbox: spunta in accento pieno, visibile ovunque ---------------- */
  --rz-checkbox-checked-background-color: var(--di-accent);
  --rz-checkbox-checked-color: var(--di-accent-fg);
  --rz-checkbox-checked-hover-background-color: var(--di-accent-hover);

  /* ---- Datepicker: pannello staccato, "oggi" in accento ------------------- */
  --rz-datepicker-panel-border: 1px solid var(--di-border-strong);
  --rz-datepicker-panel-shadow: var(--di-shadow-3);
  --rz-datepicker-calendar-today-color: var(--di-accent);

  /* ---- Popup/lookup/dropdown: bordo + ombra (stacco dal contenuto) -------- */
  --rz-dropdown-panel-border: 1px solid var(--di-border-strong);
  --rz-dropdown-panel-shadow: var(--di-shadow-3);
  --rz-dropdown-item-hover-background-color: var(--di-surface-hover);
  --rz-dropdown-item-hover-color: var(--di-text-strong);
  --rz-dropdown-item-selected-background-color: var(--di-selection-container);
  --rz-dropdown-item-selected-color: var(--di-on-selection-container);
  --rz-dropdown-item-selected-hover-background-color: var(--di-selection-active);
  --rz-dropdown-item-selected-hover-color: var(--di-on-selection-container);

  /* ---- Serie grafici ------------------------------------------------------ */
  --rz-series-1: var(--di-series-1); --rz-series-2: var(--di-series-2);
  --rz-series-3: var(--di-series-3); --rz-series-4: var(--di-series-4);
  --rz-series-5: var(--di-series-5); --rz-series-6: var(--di-series-6);
  --rz-series-7: var(--di-series-7); --rz-series-8: var(--di-series-8);
}

/* Resolve scrollbar geometry on both the viewport and the body so Radzen's
   layout, measurement elements and body-level popups share the active token. */
:root,
body {
  --rz-scrollbar-size: var(--di-scrollbar-size);
  --rz-scrollbar-color: var(--di-neutral-400);
  --rz-scrollbar-background-color: transparent;
  --rz-scrollbar-border-radius: var(--di-radius-pill);
}