/* =============================================================================
   devexpress-overrides.css — Sinergica HR

   Allinea i componenti DevExpress Blazor 25.2.4 (tema blazing-berry) al
   design system definito in theme.css. Caricato per ULTIMO, dopo
   blazing-berry.bs5.min.css, theme.css e site.css.

   Strategia (P5.5 hotfix):
     1. Override delle CSS custom property a livello :root.
        Blazing-berry definisce `--bs-primary: #5f368d` (viola) e una
        serie di variabili `--dxbl-*-bg` / `--dxbl-*-color` che vengono
        ereditate dai componenti. Ridefinendole su :root col brand
        rosso le componenti seguono automaticamente la palette del
        progetto, senza dover toccare singoli selettori.
     2. Override dei selettori specifici DevExpress dove il componente
        usa colori hardcoded (`.dxbl-btn-primary`, hover di grid).
     3. Selettori corretti per DxTabs 25.2.4: il tab attivo e' un
        `.dxbl-tabs-item.dxbl-active` (NON `.dxbl-tab`) e la riga
        sottostante e' un `::after` sul tab attivo.

   Per `!important`: usato solo quando DevExpress applica style inline o
   selettori a specificita' superiore. Ogni occorrenza e' commentata.
   ============================================================================= */

/* =============================================================================
   1. Variabili Bootstrap + DevExpress sovrascritte a livello :root.
      Forza la palette brand sui componenti che ereditano dai token
      standard. NB: DxTabs ridefinisce le proprie --dxbl-tabs-tab-*
      su `.dxbl-tabs` stesso (specificita' > :root), quindi l'override
      DxTabs vive sotto in un blocco dedicato.
   ============================================================================= */
:root {
  /* --- Bootstrap primary -> brand red ---
       Sovrascrive `--bs-primary: #5f368d` (viola Blazing Berry).
       Impatta: btn-primary, link, focus ring, ecc. ereditati da BS5. */
  --bs-primary: var(--app-brand-primary);
  --bs-primary-rgb: var(--app-brand-primary-rgb);
  --bs-link-color: var(--app-brand-primary);
  --bs-link-hover-color: var(--app-brand-primary-hover);
  /* --- DxGrid: hover row -> surface-alt (background) + cursor pointer --- */
  --dxbl-grid-hover-bg: var(--app-surface-alt);
  --dxbl-grid-hover-color: var(--app-text);
  /* --- Palette "client component" DevExpress -> brand red ---
       Blazing Berry la definisce `--dxbl-client-component-palette-primary: #5f368d`
       (viola) su :root e ne alimenta vari componenti (focus frame, listbox, ecc.).
       La riallineo al brand una volta sola qui. */
  --dxbl-client-component-palette-primary: var(--app-brand-primary);
}

/* --- DxTabs: variabili locali sovrascritte su `.dxbl-tabs` (non :root)
       perche' blazing-berry le ridefinisce sullo stesso selettore
       (specificita' > :root). Manteniamo `selected-bg` come hue brand
       chiaro per dare contesto visivo al tab attivo. --- */
.dxbl-tabs {
  --dxbl-tabs-tab-selected-bg: var(--app-brand-primary-light);
  --dxbl-tabs-tab-selected-color: var(--app-brand-primary);
  --dxbl-tabs-tab-hover-color: var(--app-brand-primary-hover);
  --dxbl-tabs-tab-focus-outline-color: var(--app-brand-primary);
  --dxbl-tabs-tab-drop-indicator-color: var(--app-brand-primary);
}

/* =============================================================================
   2. DxButton — override locale per .dxbl-btn-primary.
      DevExpress definisce le `--dxbl-btn-*` su .dxbl-btn-primary stesso
      (con specificita' >= di :root), quindi servono override mirati su
      questi selettori. Due varianti coperte: default e standalone.
   ============================================================================= */
.dxbl-btn {
  border-radius: var(--app-radius-sm);
  font-weight: var(--app-fw-medium);
  transition: background var(--app-transition), border-color var(--app-transition);
}

  .dxbl-btn:focus,
  .dxbl-btn:focus-visible {
    box-shadow: var(--app-shadow-focus);
    outline: none;
  }

.dxbl-btn-primary:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-standalone.dxbl-btn-primary {
  --dxbl-btn-bg: var(--app-brand-primary);
  --dxbl-btn-border-color: var(--app-brand-primary);
  --dxbl-btn-color: var(--app-brand-primary-fg);
  --dxbl-btn-hover-bg: var(--app-brand-primary-hover);
  --dxbl-btn-hover-border-color: var(--app-brand-primary-hover);
  --dxbl-btn-hover-color: var(--app-brand-primary-fg);
  --dxbl-btn-active-bg: var(--app-brand-primary-hover);
  --dxbl-btn-active-border-color: var(--app-brand-primary-hover);
  --dxbl-btn-active-color: var(--app-brand-primary-fg);
  --dxbl-btn-focus-bg: var(--app-brand-primary);
  --dxbl-btn-focus-color: var(--app-brand-primary-fg);
  --dxbl-btn-focus-border-bg: var(--app-brand-primary);
  --dxbl-btn-focus-outline-color: var(--app-brand-primary);
  --dxbl-btn-focus-shadow-color: rgba(var(--app-brand-primary-rgb), 0.5);
}

/* DxButton Danger -> --app-danger #7A1024 (distinto dal brand). */
.dxbl-btn-danger:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-standalone.dxbl-btn-danger {
  --dxbl-btn-bg: var(--app-danger);
  --dxbl-btn-border-color: var(--app-danger);
  --dxbl-btn-color: var(--app-danger-fg);
  --dxbl-btn-hover-bg: var(--app-danger-hover);
  --dxbl-btn-hover-border-color: var(--app-danger-hover);
  --dxbl-btn-hover-color: var(--app-danger-fg);
  --dxbl-btn-active-bg: var(--app-danger-hover);
  --dxbl-btn-active-border-color: var(--app-danger-hover);
  --dxbl-btn-active-color: var(--app-danger-fg);
}

/* DxButton Link (es. "Modifica" nelle griglie). Hover e focus outline erano viola
   Blazing Berry (`--dxbl-btn-link-hover-color` #5f368d, `--dxbl-btn-focus-outline-color`
   #6F42C1, definiti su `.dxbl-btn-link` / `.dxbl-btn-standalone.dxbl-btn-link`): override
   alla stessa specificità (questo file è caricato dopo). Il colore a riposo resta quello
   del link brand (`--bs-link-color`, già su :root). */
.dxbl-btn-link:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-standalone.dxbl-btn-link {
  --dxbl-btn-link-hover-color: var(--app-brand-primary-hover);
  --dxbl-btn-focus-outline-color: var(--app-brand-primary);
}

/* =============================================================================
   3. DxTextBox / DxComboBox / DxTagBox / DxSpinEdit (.dxbl-edit)
   ============================================================================= */
.dxbl-edit {
  border-radius: var(--app-radius-sm);
}

.dxbl-text-edit {
  --dxbl-text-edit-focus-border-color: var(--app-brand-primary-light);
}

.dxbl-edit:focus-within,
.dxbl-edit.dxbl-state-focused {
  box-shadow: var(--app-shadow-focus);
  border-color: var(--app-brand-primary);
}
/* =============================================================================
   4. DxFormLayout — caption text default (no uppercase brand)
   ============================================================================= */
.dxbl-flgr-cap,
.dxbl-form-layout-group-caption {
  font-size: var(--app-fs-body-sm);
  font-weight: var(--app-fw-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--app-text);
}
/* =============================================================================
   5. DxGrid — header + hover + cursor pointer
      Selettori reali in 25.2.4 (verificati su blazing-berry.bs5.min.css):
        - Header row:     .dxbl-grid-header / .dxbl-grid-headers / .dxbl-grid-header-row
        - Data row:       .dxbl-grid-table > tbody > tr (NON .dxbl-grid-data-row)
        - Hover variabili: --dxbl-grid-hover-bg / --dxbl-grid-hover-color
          (gia' sovrascritti su :root).
      Promuovo cursor: pointer per default su tutti i DxGrid con
      .app-grid (i grid del progetto hanno RowClick).
   ============================================================================= */
.dxbl-grid-header,
.dxbl-grid-header-row,
.dxbl-grid-headers {
  background: var(--app-bg);
  font-size: var(--app-fs-body-sm);
  font-weight: var(--app-fw-semibold);
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Frame della cella a fuoco (navigazione tastiera/click): era viola Blazing Berry
   (`--dxbl-grid-focus-frame-color` #5f368d, definito su `.dxbl-grid`, non :root) →
   override sullo stesso selettore.
   `--dxbl-grid-border-color` era #d2d2d2, più scuro dell'intero design system:
   riallineato a --app-border (#dee2e6). Alimenta il contorno esterno del grid,
   il separatore sotto l'header, il footer e il pager. */
.dxbl-grid {
  --dxbl-grid-focus-frame-color: var(--app-brand-primary);
  --dxbl-grid-border-color: var(--app-border);
}

/* Griglia "pulita" — nessuna riga verticale, separatore di riga chiarissimo.
   Blazing-berry disegna il reticolo con `border-top-width` + `border-left-width`
   1px su ogni td/th (`.dxbl-grid .dxbl-grid-table > tbody > tr > td`): stessa
   specificità dei selettori qui sotto, vince l'ordine di caricamento.
   I `border-left` sono le righe verticali → azzerati. Il separatore fra righe
   dati passa a --app-divider (#f0f0f2), come `.app-week-table`; restano a
   --app-border le linee strutturali (sotto l'header, sopra il footer). */
.dxbl-grid .dxbl-grid-table > thead > tr > th,
.dxbl-grid .dxbl-grid-table > thead > tr > td,
.dxbl-grid .dxbl-grid-table > tbody > tr > th,
.dxbl-grid .dxbl-grid-table > tbody > tr > td,
.dxbl-grid .dxbl-grid-table > tfoot > tr > th,
.dxbl-grid .dxbl-grid-table > tfoot > tr > td {
  border-left-width: 0;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td {
  border-top-color: var(--app-divider);
}
/* Cursor pointer su righe dati di .app-grid (rinforza il var override).
   Selettore esplicito sui <tr> della tabella interna; il :not garantisce
   che group-row, edit-row e new-item-row siano esclusi. */
.app-grid .dxbl-grid-table > tbody > tr,
.app-grid .dxbl-grid-table > tbody > tr > td {
  cursor: pointer;
}
  /* Hover row esplicito — fallback al caso in cui il grid non abbia
   .dxbl-grid-row-hover-enabled (di default e' attivo, ma il var override
   da solo non basta su alcune versioni). */
  .app-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-edit-new-item-row):hover > td {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
  }
/* =============================================================================
   6. DxTabs — selettori reali 25.2.4
      Il tab e' `.dxbl-tabs-item` (NON .dxbl-tab). Lo stato attivo e'
      `.dxbl-active`. La sottolineatura del tab attivo e' un `::after`
      con `background-color: #5f368d` HARDCODED (NON legge la variabile
      `--dxbl-tabs-tab-selected-bg`), quindi va sovrascritto sul
      pseudo-elemento direttamente.
   ============================================================================= */
.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled) {
  color: var(--app-text-muted);
  transition: color var(--app-transition);
}

  .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled):hover {
    color: var(--app-brand-primary-hover);
  }

.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled) {
  /* Arrotondamento top dei tab: gli angoli inferiori restano dritti per
     integrarsi con la linea/card sottostante. Il custom element
     <dxbl-tab-item> di default ha display inline-flex con altezza/padding
     gestiti via JS; forziamo inline-block per garantire che border-radius
     sia rispettato e overflow:hidden per tagliare il bg light. */
  display: inline-block;
  overflow: hidden;
  border-radius: var(--app-radius) var(--app-radius) 0 0 !important;
  transition: background-color var(--app-transition), color var(--app-transition);
}

/* Specificita' alta (custom element + classe) per battere eventuali regole
   DevExpress sul tab attivo. */
dxbl-tab-item.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
  /* In 25.2 la variabile --dxbl-tabs-tab-selected-bg non viene consumata
     dal custom element <dxbl-tab-item>; applichiamo il bg direttamente
     cosi' il border-radius "linguetta" diventa visibile. */
  background-color: var(--app-brand-primary-light);
  color: var(--app-brand-primary);
  font-weight: var(--app-fw-semibold);
}
/* Sottolineatura del tab attivo — bg hardcoded in Blazing Berry,
   forziamo brand red. La selettorialita' replica esattamente quella
   del CSS DevExpress per matchare la specificita' (cinque selettori
   in OR, uno per ognuna delle strutture DOM possibili del tabs-tablist:
   con/senza scroll-viewer-content, con/senza tabs-container, ul a vari
   livelli di annidamento). */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-tabs-container > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-tabs-container > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
  background-color: var(--app-brand-primary);
}
/* =============================================================================
   7. DxPopup
   ============================================================================= */
.dxbl-popup-content {
  border-radius: var(--app-radius-lg);
}

.dxbl-popup-header {
  padding: var(--app-space-3) var(--app-space-5);
  font-size: var(--app-fs-h4);
  font-weight: var(--app-fw-medium);
  border-bottom: 1px solid var(--app-divider);
}

.dxbl-popup-body {
  padding: var(--app-space-5);
}
/* =============================================================================
   8. DxCheckBox + DxRadioGroup + DxSwitch — accent brand
      In DevExpress 25.2 i tre componenti condividono la stessa base
      `.dxbl-checkbox` e usano le `--dxbl-checkbox-*` per i colori.
      Le variabili sono definite su `.dxbl-checkbox` (specificita' > :root)
      con valore viola Blazing Berry, quindi l'override va sullo stesso
      selettore.

      Stessa logica gia' applicata a `.dxbl-tabs`.
   ============================================================================= */
.dxbl-checkbox {
  /* Checkbox check (V) */
  --dxbl-checkbox-check-element-checked-bg: var(--app-brand-primary);
  --dxbl-checkbox-check-element-checked-hover-bg: var(--app-brand-primary-hover);
  /* Switch toggle */
  --dxbl-checkbox-switch-checked-bg: var(--app-brand-primary);
  --dxbl-checkbox-switch-checked-hover-bg: var(--app-brand-primary-hover);
  /* Radio button: bordo del cerchio + puntino interno selezionato */
  --dxbl-checkbox-radio-checked-border-color: var(--app-brand-primary);
  --dxbl-checkbox-radio-check-bg: var(--app-brand-primary);
  --dxbl-checkbox-radio-checked-hover-bg: var(--app-brand-primary-hover);
  --dxbl-checkbox-radio-checked-hover-border-color: var(--app-brand-primary-hover);
  /* Focus ring brand (sostituisce rgba(95, 54, 141, 0.5) viola) */
  --dxbl-checkbox-checked-focus-shadow-color: rgba(var(--app-brand-primary-rgb), 0.5);
  --dxbl-checkbox-unchecked-focus-shadow-color: rgba(var(--app-brand-primary-rgb), 0.5);
}
/* =============================================================================
   9. DxCalendar / DxDateEdit popup — colori viola residui di Blazing Berry.
      Le variabili --dxbl-calendar-* sono definite su `.dxbl-calendar` stesso
      (specificita' > :root), come per tabs e checkbox: override sullo
      stesso selettore.
   ============================================================================= */
.dxbl-calendar {
  --dxbl-calendar-today-border-color: var(--app-brand-primary);
  --dxbl-calendar-selected-bg: var(--app-brand-primary);
  --dxbl-calendar-selected-color: var(--app-brand-primary-fg);
  --dxbl-calendar-selected-hover-bg: var(--app-brand-primary-hover);
  --dxbl-calendar-selected-hover-color: var(--app-brand-primary-fg);
  --dxbl-calendar-selected-border-color: var(--app-brand-primary);
  --dxbl-calendar-focus-outline-color: var(--app-brand-primary);
}

  .dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item::before {
    background-color: var(--app-brand-primary);
  }
/* =============================================================================
   10. DxEdit dropdown button (la freccia di DxComboBox / DxDateEdit /
       DxSpinEdit / DxTagBox). Focus outline brand al posto del viola.
   ============================================================================= */
.dxbl-edit-dropdown {
  --dxbl-edit-dropdown-btn-focus-outline-color: var(--app-brand-primary);
  --dxbl-edit-dropdown-btn-focus-color: var(--app-brand-primary);
  --dxbl-edit-dropdown-btn-hover-color: var(--app-brand-primary-hover);
}
/* =============================================================================
   11. DxFormLayout tab groups — colore del tab attivo (se mai useremo
       i tab nei FormLayout group).
   ============================================================================= */
.dxbl-fl {
  --dxbl-fl-tab-group-tab-selected-color: var(--app-brand-primary);
  --dxbl-fl-tab-group-tab-hover-color: var(--app-brand-primary-hover);
}
/* =============================================================================
   12. DxListBox — dropdown di DxComboBox / DxTagBox (DevExpress 25.2.4).
      ATTENZIONE: le classi REALI a runtime sono `dxbl-list-box-*` (con trattini),
      NON `dxbl-listbox-*`. Il viola Blazing Berry nel dropdown arriva da:
        - `--dxbl-list-box-focus-frame-color` e
          `--dxbl-list-box-item-drop-indicator-color`: letterali #5f368d
          definiti su `.dxbl-list-box`;
        - lo sfondo dell'item SELEZIONATO, dipinto su uno pseudo-elemento
          `li.dxbl-list-box-item-selected::before` con `background-color:#5f368d`
          HARDCODED (non legge variabili).
      La palette `--dxbl-client-component-palette-primary` (#5f368d su :root) e'
      gia' riallineata al brand nel blocco :root in cima. Lo sfondo selezionato
      va forzato sul ::before con !important: la regola DevExpress ha specificita'
      alta ed e' iniettata a runtime dopo questo file.
   ============================================================================= */
.dxbl-list-box,
.dxbl-list-box-render-container {
  --dxbl-list-box-focus-frame-color: var(--app-brand-primary);
  --dxbl-list-box-item-drop-indicator-color: var(--app-brand-primary);
}

/* Sfondo dell'item selezionato (pseudo ::before che copre la riga) -> brand. */
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before,
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before {
  background-color: var(--app-brand-primary) !important;
}

/* Testo dell'item selezionato leggibile sul fondo brand. */
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled),
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled) {
  color: var(--app-brand-primary-fg) !important;
}