.btn-grid-icon {
    padding-top: var(--tblr-spacer-1) !important;
    padding-bottom: var(--tblr-spacer-1) !important;
    min-height: 1rem !important;
    min-width: 1.8rem !important;
}
.nav-link-icon .ti {
    font-size:20px;
}
.navbar-brand-image {
    height: 4rem;
    width: auto;
}

.logo {
    max-height: 4rem;
}

.occhio {
    padding-left: 1rem !important;
}

.btn i.ti {
    margin-right: 0.5rem;
}
.btn-sm i.ti {
    margin-right: 0.3rem;
}
.ti::before {
    font-size: 16px;
}
.dx-datagrid {
    max-width: none !important;
}

.btn-action {
    padding: 0.1rem 0.2rem;
    min-width: calc(var(--tblr-btn-line-height) * 1 + 0.2rem * 2 + var(--tblr-btn-border-width) * 2);
    min-height: calc(var(--tblr-btn-line-height) 1.25rem * 1 + 0.2rem * 2 + var(--tblr-btn-border-width) * 2);
}
.dx-datagrid .dx-link {

    --tblr-border-color: transparent;
    color: var(--tblr-secondary)!important;
    border-radius: var(--tblr-border-radius);
    background: 0 0;
    box-shadow: none;
}

/* NOTA: il theming light/dark dei widget DevExtreme NON è più gestito qui.
   Ora si usano i temi nativi DevExtreme (generic.light / generic.dark), selezionati
   a runtime in _DevExtremeLayout.cshtml in base a data-bs-theme di Tabler.
   Qui restano solo i tweak strutturali (non di colore). */

.card {
    --tblr-card-bg: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Armonizzazione tema DARK: avvicina le superfici di DevExtreme (generic.dark,
   grigio-caldo #2a2a2a) al navy del dark di Tabler (#111827 / #1f2937).
   Si ritintano SOLO background e bordi dominanti, usando le variabili --tblr-*;
   testo, accenti, hover di stato e icone restano del tema nativo DevExtreme.
   Tutto scoped a [data-bs-theme=dark] -> in light non cambia nulla.
   ─────────────────────────────────────────────────────────────────────────── */

/* Superfici base / contenitori (sfondo più profondo) */
[data-bs-theme=dark] .dx-widget,
[data-bs-theme=dark] .dx-datagrid,
[data-bs-theme=dark] .dx-datagrid-rowsview,
[data-bs-theme=dark] .dx-datagrid-content {
    background-color: var(--tblr-body-bg) !important;
}

/* Superfici "card" (come .dropdown-menu / .card di Tabler): header griglia, celle filter row,
   popup, liste, toolbar, pager. */
[data-bs-theme=dark] .dx-datagrid-headers,
[data-bs-theme=dark] .dx-datagrid-filter-row,
[data-bs-theme=dark] .dx-datagrid-filter-row > td,
[data-bs-theme=dark] .dx-overlay-content,
[data-bs-theme=dark] .dx-list,
[data-bs-theme=dark] .dx-list-item,
[data-bs-theme=dark] .dx-toolbar,
[data-bs-theme=dark] .dx-pager {
    background-color: var(--tblr-secondary-bg) !important;
}

/* Editor (textbox/selectbox/datebox + input interno, anche nella filter row): stesso sfondo
   dei form-control NATIVI di Tabler (--tblr-bg-forms = #111827), così DevExtreme e <select>/<input>
   risultano coerenti. */
[data-bs-theme=dark] .dx-texteditor,
[data-bs-theme=dark] .dx-texteditor-input,
[data-bs-theme=dark] .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor {
    background-color: var(--tblr-bg-forms) !important;
}

/* Trasparenza SOLO sulle righe dati (non header/filter), così la superficie navy traspare */
[data-bs-theme=dark] .dx-datagrid-table .dx-data-row > td,
[data-bs-theme=dark] .dx-datagrid-table .dx-data-row {
    background-color: transparent !important;
}

/* Riga alternata (zebra): striscia leggermente più chiara sul navy */
[data-bs-theme=dark] .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

/* Hover di riga coerente col navy (vince su zebra) */
[data-bs-theme=dark] .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
    background-color: var(--tblr-tertiary-bg) !important;
}

/* Bordi coerenti col navy di Tabler */
[data-bs-theme=dark] .dx-datagrid,
[data-bs-theme=dark] .dx-datagrid .dx-row > td,
[data-bs-theme=dark] .dx-datagrid-headers,
[data-bs-theme=dark] .dx-texteditor,
[data-bs-theme=dark] .dx-overlay-content {
    border-color: var(--tblr-border-color) !important;
}

/* PivotGrid: aree (sfondo profondo) e tile dei campi (superficie "card"). */
[data-bs-theme=dark] .dx-pivotgrid,
[data-bs-theme=dark] .dx-pivotgrid-background,
[data-bs-theme=dark] .dx-pivotgrid-fields-area,
[data-bs-theme=dark] .dx-pivotgrid-fields-container,
[data-bs-theme=dark] .dx-pivotgrid-horizontal-headers,
[data-bs-theme=dark] .dx-pivotgrid-vertical-headers,
[data-bs-theme=dark] .dx-pivotgrid-area-data,
[data-bs-theme=dark] .dx-pivotgrid .dx-area-fields {
    background-color: var(--tblr-body-bg) !important;
}

/* Tile/pulsanti dei campi del pivot ("Costo", "Progetto", "Drop Filter Fields Here", ...) */
[data-bs-theme=dark] .dx-pivotgrid .dx-area-box,
[data-bs-theme=dark] .dx-pivotgrid .dx-area-field,
[data-bs-theme=dark] .dx-pivotgrid .dx-area-field-content,
[data-bs-theme=dark] .dx-pivotgrid-fields-area-head {
    background-color: var(--tblr-secondary-bg) !important;
}

/* Bordi del pivot */
[data-bs-theme=dark] .dx-pivotgrid .dx-pivotgrid-border,
[data-bs-theme=dark] .dx-pivotgrid td,
[data-bs-theme=dark] .dx-pivotgrid .dx-area-box {
    border-color: var(--tblr-border-color) !important;
}

/* Righe/celle di totale e subtotale: il tema nativo le dipinge di grigio-caldo
   (.dx-total = #303030), che stona sul navy. Le ritintiamo con un leggero overlay
   chiaro sul navy: restano distinte dalle righe dati ma in tinta col tema. */
[data-bs-theme=dark] .dx-pivotgrid td.dx-total,
[data-bs-theme=dark] .dx-pivotgrid tr.dx-row-total > td {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Menu a tendina del pulsante "Esporta" del datagrid (dx-context-menu) e liste in
   overlay: il tema nativo usa un hover/sfondo chiaro che sul navy diventa illeggibile
   (testo scuro su sfondo chiaro o viceversa). Allineiamo voce, hover e focus al tema. */
[data-bs-theme=dark] .dx-context-menu,
[data-bs-theme=dark] .dx-context-menu .dx-submenu {
    background-color: var(--tblr-secondary-bg) !important;
}

[data-bs-theme=dark] .dx-context-menu .dx-menu-item,
[data-bs-theme=dark] .dx-context-menu .dx-menu-item .dx-menu-item-content,
[data-bs-theme=dark] .dx-context-menu .dx-menu-item .dx-menu-item-text {
    color: var(--tblr-body-color) !important;
    background-color: transparent !important;
}

[data-bs-theme=dark] .dx-context-menu .dx-menu-item.dx-state-hover,
[data-bs-theme=dark] .dx-context-menu .dx-menu-item.dx-state-focused,
[data-bs-theme=dark] .dx-list-item.dx-state-hover,
[data-bs-theme=dark] .dx-list-item.dx-state-focused {
    background-color: var(--tblr-tertiary-bg) !important;
    color: var(--tblr-body-color) !important;
}

/* Report "Ore effettive e preventivate": celle della misura "Diff Prev Eff"
   con valore negativo (ore effettive che sforano le preventivate). Totali inclusi. */
td.pivot-neg-cell {
    background-color: #fce8e8 !important;
    color: #d63939 !important;
    font-weight: 600;
}

[data-bs-theme=dark] td.pivot-neg-cell {
    background-color: rgba(214, 57, 57, 0.22) !important;
    color: #ff9b9b !important;
}
