/* ============================================
   DEVEXPRESS MATERIALCOMPACT CUSTOM THEME
   Versione: 8.1 - Bilanciato con !important necessari

   Note: DevExpress applica molti stili inline e con alta specificità.
   Gli !important sono necessari per override efficace come da documentazione DevExpress.
   ============================================ */

/* ===========================================
   FONT-FACE: Inter e Plus Jakarta Sans caricati
   via <link> in Root.master.vb (CaricaCSS_Dinamici).
   Rubik dismesso con il rebrand XManagerPro.
   =========================================== */

/* Titoli: usano il font display del brand, il resto eredita --font-family dal body */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-display);
}

/* ===========================================
   VARIABILI GLOBALI -> _theme-variables.css
   =========================================== */

/* Reset generale - ESCLUSO DevExpress che richiede content-box */
*:not([class*="dx"]):not([class*="Dx"]) {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* DevExpress Font Override - necessario !important */
[class*="_MaterialCompact"] {
    font-family: var(--font-family) !important;
}

/* ============================================
   LAYOUT STRUCTURE
   ============================================ */
.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   HEADER COMPATTO - modificato per permettere logo sforamento
   ============================================ */
.app-header,
#HeaderPanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--header-height);
    height: auto;
    background: var(--header-gradient) !important; /* Necessario per override */
    box-shadow: var(--shadow-md);
    z-index: 1000;  /* Header sopra contenuto ma sotto popup modali (99998+) */
    display: flex;
    align-items: center;
    overflow: visible !important;
    padding: 0 0.5rem;
}

.header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-center {
    flex: 1;
    justify-content: center;
}

/* FORZA trasparenza su controlli DevExpress nell'header - !important necessario */
.app-header .dxflFormLayout,
.app-header .dxflFormLayout_MaterialCompact,
#HeaderPanel .dxflFormLayout,
#HeaderPanel .dxflFormLayout_MaterialCompact,
#LayMenu,
#LayMenu.dxflFormLayout {
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
}

    /* Rimuovi background da gruppi e items - !important necessario per DevExpress */
    .app-header .dxflGroupBox,
    .app-header .dxflGroupBoxSys,
    .app-header .dxflGroup,
    .app-header .dxflGroupCell,
    .app-header .dxflItem,
    .app-header .dxflItemSys,
    .app-header table,
    .app-header td,
    .app-header tr,
    #HeaderPanel .dxflGroupBox,
    #HeaderPanel .dxflGroupBoxSys,
    #HeaderPanel .dxflGroup,
    #HeaderPanel .dxflGroupCell,
    #HeaderPanel .dxflItem,
    #HeaderPanel .dxflItemSys,
    #HeaderPanel table,
    #HeaderPanel td,
    #HeaderPanel tr,
    #LayMenu table,
    #LayMenu td {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

/* Menu nell'header - trasparenti */
.app-header .dxmLite,
.app-header .dxmLite_MaterialCompact,
.app-header .dxm-main,
.app-header .linkMenu,
.app-header .header-menu,
#HeaderPanel .dxmLite,
#HeaderPanel .dxmLite_MaterialCompact,
#HeaderPanel .dxm-main,
#HeaderPanel .linkMenu,
#HeaderPanel .header-menu,
#ApplicationMenu,
#LeftAreaMenu,
#RightAreaMenu {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

    /* Items del menu - testo bianco */
    .app-header .dxm-item,
    .app-header .dxm-content,
    .app-header .dx-vam,
    .app-header .linkMenuItem,
    #HeaderPanel .dxm-item,
    #HeaderPanel .dxm-content,
    #HeaderPanel .dx-vam,
    #HeaderPanel .linkMenuItem,
    #ApplicationMenu .dxm-item {
        color: white !important;
        font-size: var(--font-size-base) !important;
        white-space: nowrap !important;
    }

        /* Hover effects per menu items */
        .app-header .dxm-item:hover,
        .app-header .linkMenuItem:hover,
        #HeaderPanel .dxm-item:hover,
        #HeaderPanel .linkMenuItem:hover,
        #ApplicationMenu .dxm-item:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

/* Label utente - testo bianco e compatto */
.app-header label,
.app-header .dxeBase,
.app-header .dxeLabel,
.app-header .dxeLabelSys,
#HeaderPanel label,
#HeaderPanel .dxeBase,
#HeaderPanel .dxeLabel,
#HeaderPanel .dxeLabelSys
 {
    color: white !important;
    font-size: var(--font-size-base) !important;
}

/* Toggle buttons styling - più compatti */
.app-header .toggle-item,
#HeaderPanel .toggle-item,
#LeftAreaMenu .toggle-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .app-header .toggle-item:hover,
    #HeaderPanel .toggle-item:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05);
    }

/* Icone nell'header */
.app-header img:not([alt="Logo"]):not(.account-background img),
#HeaderPanel img:not([alt="Logo"]):not(.account-background img),
#LeftAreaMenu img,
#RightAreaMenu img:not(.account-background img) {
    width: 16px !important;
    height: 16px !important;
}

/* Logo ingrandito con effetto sforamento */
#HeaderPanel img[alt="Logo"] {
    background: white;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    height: 38px !important;          /* Compatto per header 44px */
    width: auto !important;
    max-width: 200px !important;
    position: relative;
    /* top: 6px; */                   /* RIMOSSO - logo non deve sforare */
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Disabilita effetto hover scale sul logo */
#HeaderPanel img[alt="Logo"]:hover {
    transform: none !important;       /* DISABILITA espansione al mouse hover */
}

/* Icona account con colore primario */
#RightAreaMenu .account-background,
#RightAreaMenu .empty-image {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--navy-accent) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

    #RightAreaMenu .account-background img,
    #RightAreaMenu .empty-image img {
        width: 20px !important;
        height: 20px !important;
        filter: brightness(0) invert(1);
    }

/* Help button */
.header-help-btn,
#btnApriTicket {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    position: relative !important;
    color: white !important;
    font-size: 14px !important;
    outline: none !important;
}

    .header-help-btn:hover,
    #btnApriTicket:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.05) !important;
        text-decoration: none !important;
        color: white !important;
    }

/* Hamburger Menu - Icona bianca */
#LeftAreaMenu img[src*="menu.svg"],
#LeftAreaMenu .toggle-item img,
.app-header img[src*="menu.svg"] {
    filter: brightness(0) invert(1) !important;
}

/* ============================================
   SIDEBARS - INIZIALMENTE CHIUSI
   ============================================ */
.left-sidebar,
.right-sidebar,
#LeftPanel,
#RightPanel {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    background: white;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Left Sidebar - NASCOSTO di default */
.left-sidebar,
#LeftPanel {
    left: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%) !important;
    border-right: 1px solid var(--border-color);
    z-index: 999;
}

    .left-sidebar.open,
    #LeftPanel.open {
        transform: translateX(0) !important;
    }

/* Right Sidebar */
.right-sidebar,
#RightPanel {
    right: 0;
    width: var(--right-panel-width);
    transform: translateX(100%) !important;
    border-left: 1px solid var(--border-color);
    z-index: 999 !important;
}

    .right-sidebar.open,
    #RightPanel.open {
        transform: translateX(0) !important;
    }

.sidebar-content {
    padding: 1rem;
}

/* ============================================
   NAVBAR SIDEBAR - MATERIAL MODERN
   ============================================ */

/* Reset completo bordi NavBar */
.left-sidebar .dxnbLite_MaterialCompact,
#LeftPanel .dxnbLite_MaterialCompact,
#ApplicationMenuLat {
    background: transparent !important;
    border: none !important;
}

.left-sidebar .dxnb-content,
#LeftPanel .dxnb-content,
#ApplicationMenuLat .dxnb-content {
    border: none !important;
}

/* Rimuovi separatori tra gruppi */
.left-sidebar .dxnb-group,
.left-sidebar .dxnb-groupContainer,
#LeftPanel .dxnb-group,
#LeftPanel .dxnb-groupContainer,
#ApplicationMenuLat .dxnb-group,
#ApplicationMenuLat .dxnb-groupContainer {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header gruppo - Material style pulito */
.left-sidebar .dxnb-header,
#LeftPanel .dxnb-header,
#ApplicationMenuLat .dxnb-header {
    background: var(--header-gradient) !important;
    border: none !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
}

.left-sidebar .dxnb-header:hover,
#LeftPanel .dxnb-header:hover,
#ApplicationMenuLat .dxnb-header:hover {
    background: var(--header-gradient-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Icone header gruppo - brand XManagerPro (icone IOSLINE via MenuGroups.IconUrl).
   Forzate a bianco via filter: i file sorgente sono colorati Blu Elettrico
   (per l'uso su sfondo chiaro delle voci menu), ma qui lo sfondo e' scuro. */
.left-sidebar .dxnb-header img,
#LeftPanel .dxnb-header img,
#ApplicationMenuLat .dxnb-header img,
.left-sidebar .dxnb-header .dxnb-ghicc,
#LeftPanel .dxnb-header .dxnb-ghicc,
#ApplicationMenuLat .dxnb-header .dxnb-ghicc {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    filter: brightness(0) invert(1) !important;
}

/* Icona placeholder gruppo - brand XManagerPro */
.left-sidebar .dxnb-groupHeaderImage,
#LeftPanel .dxnb-groupHeaderImage,
#ApplicationMenuLat .dxnb-groupHeaderImage,
.left-sidebar .dxnb-ghic,
#LeftPanel .dxnb-ghic,
#ApplicationMenuLat .dxnb-ghic {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
}

/* Testo header centrato */
.left-sidebar .dxnb-header .dxnb-ghText,
#LeftPanel .dxnb-header .dxnb-ghText,
#ApplicationMenuLat .dxnb-header .dxnb-ghText {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Items del menu - Material modern */
.left-sidebar .dxnb-item,
#LeftPanel .dxnb-item,
#ApplicationMenuLat .dxnb-item {
    border: none !important;
    margin: 3px 8px !important;
    padding: 8px 12px !important;
    font-size: var(--font-size-md) !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* Effetto hover */
.left-sidebar .dxnb-item:hover,
#LeftPanel .dxnb-item:hover,
#ApplicationMenuLat .dxnb-item:hover {
    background: var(--bg-hover) !important;
    color: var(--primary-color) !important;
}

/* Item selezionato */
.left-sidebar .dxnb-item.dxnb-selected,
#LeftPanel .dxnb-item.dxnb-selected,
#ApplicationMenuLat .dxnb-item.dxnb-selected {
    background: var(--bg-selected) !important;
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--primary-color) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Icone negli items - brand XManagerPro: il colore cambia per scambio file
   (Image.Url grigio riposo / Image.UrlSelected-UrlHottracked blu attivo),
   non serve piu' smorzare con opacity. */
.left-sidebar .dxnb-item img,
#LeftPanel .dxnb-item img,
#ApplicationMenuLat .dxnb-item img {
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Pulsante espandi/comprimi gruppo */
.left-sidebar .dxnb-eb,
#LeftPanel .dxnb-eb,
#ApplicationMenuLat .dxnb-eb {
    background: transparent !important;
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    opacity: 0.5 !important;
}

.left-sidebar .dxnb-eb:hover,
#LeftPanel .dxnb-eb:hover,
#ApplicationMenuLat .dxnb-eb:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    opacity: 1 !important;
}

/* Scrollbar moderna per sidebar */
.left-sidebar::-webkit-scrollbar,
#LeftPanel::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar::-webkit-scrollbar-track,
#LeftPanel::-webkit-scrollbar-track {
    background: transparent;
}

.left-sidebar::-webkit-scrollbar-thumb,
#LeftPanel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.left-sidebar::-webkit-scrollbar-thumb:hover,
#LeftPanel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-container,
#mainContainer {
    flex: 1;
    margin-top: var(--header-height);
    transition: margin var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    position: relative;
    z-index: auto !important;
}

    .main-container.left-sidebar-open,
    #mainContainer.left-sidebar-open {
        margin-left: var(--sidebar-width);
    }

    .main-container.right-sidebar-open,
    #mainContainer.right-sidebar-open {
        margin-right: var(--right-panel-width);
    }

/* Page Toolbar */
.page-toolbar,
#PageToolbarPanel {
    background: white;
    border-bottom: 1px solid var(--border-color);
    padding: 0.4rem 0.75rem;
    box-shadow: var(--shadow-sm);
}

/* Content Area */
.page-content,
#pageContent {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-color);
}

/* ============================================
   FOOTER
   ============================================ */
.app-footer,
#footerWrapper {
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 0.4rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ============================================
   OVERLAY
   ============================================ */
.sidebar-overlay,
#sidebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 998;
}

    .sidebar-overlay.show,
    #sidebarOverlay.show {
        opacity: 1;
        visibility: visible;
    }

/* ============================================
   DEVEXPRESS CONTROLS - Solo colori, padding, margini, font
   ============================================ */

/* Popup Header */
.dxpcHeader_MaterialCompact {
    background: var(--navy-accent) !important;
    color: white !important;
    padding: 7px 12px !important;
    font-size: var(--font-size-md) !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Loading Panel */
.dxlpLoadingPanel_MaterialCompact,
#loadingPanel {
    padding: 20px !important;
    background: white !important;
}

/* Menu Popup - scopato al solo menu principale di navigazione (linkMenu / header-sub-menu)
   per non colpire popup DevExpress generici (ComboBox RichEdit, AutoComplete, ecc.) */
.linkMenu .dxm-popup,
.header-sub-menu {
    background: var(--navy-accent) !important;
    border: 1px solid var(--border-color) !important;
}

    .linkMenu .dxm-popup .dxm-item,
    .header-sub-menu .dxm-item {
        color: white !important;
        background: transparent !important;
    }

        .linkMenu .dxm-popup .dxm-item:hover,
        .header-sub-menu .dxm-item:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

/* ComboBox Dropdown */
.dxeListBox_MaterialCompact,
.dxeListBoxPopupControl_MaterialCompact,
.dxeButtonEditDropDown_MaterialCompact,
.dxeListBoxPopupControl,
[class*="dxeListBox"],
[class*="dxeButtonEditDropDown"] {
    border: 1px solid var(--border-color) !important;
    background: white !important;
    color: var(--text-primary, #1e293b) !important;
}

    /* Items nella dropdown */
    .dxeListBox_MaterialCompact .dxeListBoxItem,
    .dxeListBoxItem_MaterialCompact,
    [class*="dxeListBox"] [class*="dxeListBoxItem"],
    [class*="dxeListBoxItem"] {
        padding: 6px 12px !important;
        font-size: var(--font-size-base) !important;
        color: var(--text-primary, #1e293b) !important;
    }

        .dxeListBox_MaterialCompact .dxeListBoxItem:hover,
        .dxeListBoxItemHover_MaterialCompact,
        [class*="dxeListBoxItemHover"] {
            background: var(--bg-hover) !important;
        }

    .dxeListBox_MaterialCompact .dxeListBoxItemSelected,
    .dxeListBoxItemSelected_MaterialCompact,
    [class*="dxeListBoxItemSelected"] {
        background: var(--primary-light) !important;
        color: var(--primary-color) !important;
    }




/* ============================================
   ASPXGRIDVIEW - Solo colori, padding, margini, font
   ============================================ */
.dxgvControl_MaterialCompact {
    border: 1px solid var(--dx-border-color) !important;
    background: white !important;
}

.dxgvTable_MaterialCompact {
    border: none !important;
    background: white !important;
}

/* Header GridView */
.dxgvHeader_MaterialCompact {
    background: var(--navy-light) !important;
    border: none !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: white !important;
    padding: 8px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

    .dxgvHeader_MaterialCompact:last-child {
        border-right: none !important;
    }

    .dxgvHeader_MaterialCompact a {
        color: white !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }

/* Filter Row */
.dxgvFilterRow_MaterialCompact {
    height: 32px !important;
    background: var(--bg-lighter) !important;
    border-bottom: 2px solid var(--dx-border-color) !important;
}

    .dxgvFilterRow_MaterialCompact td {
        padding: 3px 5px !important;
        border: none !important;
        vertical-align: middle !important;
    }

    .dxgvFilterRow_MaterialCompact input[type="text"],
    .dxgvFilterRow_MaterialCompact .dxeEditArea {
        height: 24px !important;
        line-height: 24px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        border: 1px solid var(--gray-200) !important;
        border-radius: 3px !important;
        background: white !important;
        width: 100% !important;
    }

/* Data Rows */
.dxgvDataRow_MaterialCompact {
    background: white !important;
    border-bottom: 1px solid var(--border-light) !important;
}

    .dxgvDataRow_MaterialCompact:hover {
        background: var(--bg-hover) !important;
    }

    .dxgvDataRow_MaterialCompact td {
        padding: 4px 8px !important;
        font-size: var(--font-size-base) !important;
        color: var(--dx-text-primary) !important;
    }

/* Riga selezionata - !important necessario per override DevExpress */
.dxgvSelectedRow_MaterialCompact,
.dxgvFocusedRow_MaterialCompact {
    background: var(--navy-accent) !important;
    background-color: var(--navy-accent) !important;
}

    .dxgvSelectedRow_MaterialCompact td,
    .dxgvFocusedRow_MaterialCompact td {
        color: white !important;
        background: transparent !important;
    }

        /* Tutti i testi nella riga selezionata - ESCLUSI gli editor */
        .dxgvSelectedRow_MaterialCompact td > span,
        .dxgvFocusedRow_MaterialCompact td > span {
            color: white !important;
        }

        /* Link nella riga selezionata - ESCLUSI quelli negli editor */
        .dxgvSelectedRow_MaterialCompact td > a,
        .dxgvFocusedRow_MaterialCompact td > a {
            color: white !important;
            text-decoration: underline !important;
        }

        /* Editor nelle celle: testo SCURO visibile */
        .dxgvSelectedRow_MaterialCompact td input,
        .dxgvSelectedRow_MaterialCompact td .dxeEditArea,
        .dxgvSelectedRow_MaterialCompact td [class*="dxeEditArea"],
        .dxgvSelectedRow_MaterialCompact td [class*="dxeButtonEdit"],
        .dxgvSelectedRow_MaterialCompact td [class*="dxeButtonEdit"] *,
        .dxgvFocusedRow_MaterialCompact td input,
        .dxgvFocusedRow_MaterialCompact td .dxeEditArea,
        .dxgvFocusedRow_MaterialCompact td [class*="dxeEditArea"],
        .dxgvFocusedRow_MaterialCompact td [class*="dxeButtonEdit"],
        .dxgvFocusedRow_MaterialCompact td [class*="dxeButtonEdit"] *,
        .dxgvEditingCell input,
        .dxgvEditingCell .dxeEditArea,
        .dxgvEditingCell [class*="dxeButtonEdit"],
        .dxgvEditingCell [class*="dxeButtonEdit"] *,
        .dxgvBatchEditModifiedCell input,
        .dxgvBatchEditModifiedCell .dxeEditArea,
        .dxgvBatchEditModifiedCell [class*="dxeButtonEdit"],
        .dxgvBatchEditModifiedCell [class*="dxeButtonEdit"] * {
            color: var(--text-primary) !important;
        }

        .dxgvSelectedRow_MaterialCompact td input,
        .dxgvSelectedRow_MaterialCompact td .dxeEditArea,
        .dxgvFocusedRow_MaterialCompact td input,
        .dxgvFocusedRow_MaterialCompact td .dxeEditArea,
        .dxgvEditingCell input,
        .dxgvEditingCell .dxeEditArea,
        .dxgvBatchEditModifiedCell input,
        .dxgvBatchEditModifiedCell .dxeEditArea {
            background-color: var(--bg-white) !important;
        }

    /* Hover sulla riga selezionata */
    .dxgvSelectedRow_MaterialCompact:hover,
    .dxgvFocusedRow_MaterialCompact:hover {
        background: var(--primary-dark) !important;
    }

/* Righe alternate */
.dxgvAlternatingRow_MaterialCompact {
    background: var(--bg-alternate) !important;
}

    .dxgvAlternatingRow_MaterialCompact:hover {
        background: var(--bg-hover) !important;
    }

/* Group Row */
.dxgvGroupRow_MaterialCompact {
    /*background: #f0f4f7 !important;*/
    font-weight: 600 !important;
    border-bottom: 2px solid var(--dx-border-color) !important;
}

/* Footer */
.dxgvFooter_MaterialCompact {
    background: var(--bg-lighter) !important;
    border-top: 2px solid var(--dx-border-color) !important;
    font-weight: 600 !important;
    padding: 10px !important;
}

/* Pager */
.dxgvPager_MaterialCompact {
    background: white !important;
    border-top: 1px solid var(--dx-border-color) !important;
    padding: 8px !important;
}

/* Empty Data Row */
.dxgvEmptyDataRow_MaterialCompact {
    background: white !important;
    color: var(--dx-text-secondary) !important;
    font-style: italic !important;
    padding: 20px !important;
    text-align: center !important;
}

/* ============================================
   BUTTONS - Solo colori, padding, margini, font
   ============================================ */
.dxbButton_MaterialCompact,
.dxbButtonSys {
    padding: 4px 10px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    border: 1px solid var(--dx-border-color) !important;
    border-radius: 8px !important;
    /*    background: white !important;
    color: var(--dx-text-primary) !important;*/
    background: var(--navy-accent) !important;
    color: var(--dx-color-main-bg) !important;
    margin: 0 4px !important;
}

    .dxbButton_MaterialCompact:hover {
        background: var(--bg-hover) !important;
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

/* Bottoni primari */
.dxbButton_MaterialCompact.btn-primary,
.btn-primary {
    background: var(--navy-accent) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

    .dxbButton_MaterialCompact.btn-primary:hover,
    .btn-primary:hover {
        background: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: white !important;
    }

/* Bottoni success */
.dxbButton_MaterialCompact.btn-success,
.btn-success,
#btnConcludi {
    background: var(--success) !important;
    color: white !important;
    border-color: var(--success) !important;
}

    .dxbButton_MaterialCompact.btn-success:hover,
    .btn-success:hover,
    #btnConcludi:hover {
        background: var(--success-dark) !important;
        border-color: var(--success-dark) !important;
        color: white !important;
    }

/* Bottoni secondary */
.dxbButton_MaterialCompact.btn-secondary,
.btn-secondary {
    background: var(--text-secondary) !important;
    color: white !important;
    border-color: var(--text-secondary) !important;
}

    .dxbButton_MaterialCompact.btn-secondary:hover,
    .btn-secondary:hover {
        opacity: 0.85;
        color: white !important;
    }

/* Bottoni danger */
.dxbButton_MaterialCompact.btn-danger,
.btn-danger {
    background: var(--danger) !important;
    color: white !important;
    border-color: var(--danger) !important;
}

    .dxbButton_MaterialCompact.btn-danger:hover,
    .btn-danger:hover {
        background: var(--danger-dark) !important;
        border-color: var(--danger-dark) !important;
        color: white !important;
    }

/* Bottoni outline */
.dxbButton_MaterialCompact.btn-outline,
.btn-outline {
    background: var(--bg-white) !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

    .dxbButton_MaterialCompact.btn-outline:hover,
    .btn-outline:hover {
        background: var(--navy-accent) !important;
        color: white !important;
    }

/* Checkbox/radio nativi (usati dai controlli DevExpress basati su input reale
   sotto lo skin, es. griglia con ShowSelectCheckbox e vari editor custom):
   il colore "spuntato" segue lo stesso fondo pieno del resto dei controlli. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--navy-accent);
}

/* Bottoni nell'header - stile trasparente */
.app-header .dxbButton_MaterialCompact,
#HeaderPanel .dxbButton_MaterialCompact {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    color: white !important;
}

    .app-header .dxbButton_MaterialCompact:hover,
    #HeaderPanel .dxbButton_MaterialCompact:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: none !important;
        color: white !important;
    }

/* ============================================
   TEXTBOX & EDIT CONTROLS
   ============================================ */
.dxeTextBox_MaterialCompact,
.dxeEditArea_MaterialCompact,
input.dxeEditArea_MaterialCompact {
    border-radius: var(--radius-sm) !important;
    /* border rimosso da qui - verrà applicato solo dove serve */
    padding: 0 8px !important;
    font-size: var(--font-size-base) !important;
    line-height: 26px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    height: 28px !important;
    color: var(--dx-text-primary) !important;
    box-sizing: border-box !important;
}

/* Uniforma box-sizing per tutti gli editor DevExpress */
.dxeButtonEdit_MaterialCompact,
.dxeButtonEdit_MaterialCompact *,
.dxeTextBox_MaterialCompact,
.dxeTextBox_MaterialCompact * {
    box-sizing: border-box !important;
}

    /* Bordo SOLO per textbox standalone (non dentro ButtonEdit/Combo/Date) */
    .dxeTextBox_MaterialCompact:not(.dxeButtonEdit_MaterialCompact *),
    input.dxeEditArea_MaterialCompact:not(.dxeButtonEdit_MaterialCompact *) {
        border: 1px solid var(--dx-border-color) !important;
    }
/* Nessun bordo per input dentro ButtonEdit */
.dxeButtonEdit_MaterialCompact .dxeEditArea_MaterialCompact,
.dxeButtonEdit_MaterialCompact input.dxeEditArea_MaterialCompact {
    border: none !important;
}
    .dxeTextBox_MaterialCompact:focus,
    .dxeEditArea_MaterialCompact:focus {
        border-color: var(--primary-color) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px var(--dx-primary-light) !important;
    }

/* ============================================
   COMBOBOX & DROPDOWNS - Solo colori, padding, margini, font
   ============================================ */
.dxeButtonEdit_MaterialCompact {
    border: 1px solid var(--dx-border-color) !important;
    background: white !important;
    margin: 0 4px !important;
    height: 24px !important;
    min-height: 24px !important;
}

    /* Tabella interna combo - altezza piena */
    .dxeButtonEdit_MaterialCompact > table,
    .dxeButtonEdit_MaterialCompact table.dxeButtonEditSys {
        height: 100% !important;
        min-height: 22px !important;
    }

    .dxeButtonEdit_MaterialCompact td.dxic {
        height: 22px !important;
        vertical-align: middle !important;
    }

    /* Input field dentro la combo - altezza uniformata con textbox */
    .dxeButtonEdit_MaterialCompact input,
    .dxeButtonEdit_MaterialCompact .dxeEditArea {
        border: none !important;
        background: transparent !important;
        padding: 0 8px !important;
        font-size: var(--font-size-base) !important;
        min-height: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
    }

    .dxeButtonEdit_MaterialCompact:hover {
        border-color: var(--primary-color) !important;
    }

    /* Pulsanti dentro le combo */
    .dxeButtonEdit_MaterialCompact .dxeButton {
        border: none !important;
        border-left: 1px solid var(--dx-border-color) !important;
        background: transparent !important;
        height: 22px !important;
        min-width: 22px !important;
        vertical-align: middle !important;
    }

        .dxeButtonEdit_MaterialCompact .dxeButton:hover {
            background: var(--bg-hover) !important;
        }

/* ============================================
   TOOLBAR SPECIFICA
   ============================================ */
.toolbar-container {
    display: block !important;
    padding: 10px 12px !important;
    background: var(--bg-lighter) !important;
    border: 1px solid var(--dx-border-color) !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

    .toolbar-container > *,
    .toolbar-container .toolbar-section {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 8px !important;
    }

    .toolbar-container .toolbar-divider {
        display: inline-block !important;
        width: 1px !important;
        height: 20px !important;
        background: var(--dx-border-color) !important;
        margin: 0 10px !important;
        vertical-align: middle !important;
    }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
    border: 2px solid var(--gray-100);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root {
        --header-height: 44px;
    }

    .left-sidebar,
    .right-sidebar,
    #LeftPanel,
    #RightPanel {
        width: 85%;
        max-width: 320px;
    }

    .main-container.left-sidebar-open,
    .main-container.right-sidebar-open,
    #mainContainer.left-sidebar-open,
    #mainContainer.right-sidebar-open {
        margin-left: 0;
        margin-right: 0;
    }

    .header-center {
        display: none;
    }

    .app-footer,
    #footerWrapper {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

/* Rimuovi outline di focus */
.dx-state-focused,
[class*="_MaterialCompact"]:focus {
    outline: none !important;
}

/* Transizioni smooth */
[class*="_MaterialCompact"] input,
[class*="_MaterialCompact"] button,
[class*="_MaterialCompact"] a {
    transition: all 0.2s ease !important;
}

/* Fix stato iniziale pannelli */
body:not(.panels-initialized) #LeftPanel,
body:not(.panels-initialized) .left-sidebar {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
}

body:not(.panels-initialized) #RightPanel,
body:not(.panels-initialized) .right-sidebar {
    transform: translateX(100%) !important;
    visibility: hidden !important;
}

body.panels-initialized #LeftPanel,
body.panels-initialized .left-sidebar,
body.panels-initialized #RightPanel,
body.panels-initialized .right-sidebar {
    visibility: visible !important;
}

/* ============================================
   OVERRIDE SPECIFICI DEVEXPRESS
   Sezione finale con !important necessari
   ============================================ */

/* Command Column Links - testo BIANCO sui bottoni-comando (New/Edit/Delete/CustomButtons).
   Lo skin MaterialCompact li rende "pieni" con l'accent navy: il testo deve essere bianco
   per contrasto (prima era --text-primary scuro -> testo nero illeggibile su navy). */
.dxgvHeader_MaterialCompact a.dxgvCommandColumnItem_MaterialCompact,
.dxgvCommandColumn_MaterialCompact a {
    color: white !important;
    /* Sfondo scuro esplicito abbinato al testo bianco: la regola e' autosufficiente
       e non dipende piu' dall'assunzione implicita che lo sfondo navy arrivi dal tema
       MaterialCompact globale. Stessa variabile usata da .dxbButton_MaterialCompact. */
    background: var(--navy-accent) !important;
}

/* Stato DISABILITATO: lo skin usa uno sfondo piu' chiaro/smorzato, quindi si
   mantiene un testo scuro leggibile (comportamento originario invariato). La
   maggiore specificita' (+.dxbDisabled) fa vincere questa regola sul bianco sopra. */
.dxgvHeader_MaterialCompact a.dxgvCommandColumnItem_MaterialCompact.dxbDisabled_MaterialCompact,
.dxgvCommandColumn_MaterialCompact a.dxgvCommandColumnItem_MaterialCompact.dxbDisabled_MaterialCompact {
    color: var(--text-primary) !important;
}

/* ============================================
   WEBDOCUMENTVIEWER - Icona email anteprima stampa
   ============================================ */
.email {
    background-image: url('Icone/mail.png');
    background-size: 24px;
    background-repeat: no-repeat;
}

/* === POPUP CONTROL HEADER === */
/* Override del colore header dei popup DevExpress per centralizzazione branding */
.dxpc-header {
    background: var(--header-gradient) !important;
}

.dxpc-headerContent {
    color: var(--text-white, #ffffff) !important;
}