/* ====================================
   PROSEAT Radzen component theming
   ===================================  = */

/* Buttons */
.rz-button.rz-primary {
    background-color: var(--ps-primary) !important;
    border-color: var(--ps-primary) !important;
    color: white !important;
}

    .rz-button.rz-primary:hover {
        background-color: var(--ps-accent-dark) !important;
    }

.rz-button.rz-secondary {
    background-color: var(--ps-secondary) !important;
    border-color: var(--ps-secondary) !important;
    color: white !important;
}
    .rz-button.rz-secondary:hover {
        background-color: var(--ps-accent-dark) !important;
    }

.rz-button.rz-light {
    background-color: var(--ps-primary-light) !important;
    border-color: var(--ps-bg-light) !important;
    color: var(--ps-accent-dark) !important;
}

/*    .rz-button.rz-light:hover {
        background-color: var(--ps-hover) !important;
        color: var(--ps-primary) !important;
    }
*/
/* Inputs */
.rz-inputtext,
.rz-dropdown,
.rz-autocomplete {
    border-color: var(--ps-primary-light) !important;
}

    .rz-inputtext:focus,
    .rz-dropdown:focus,
    .rz-autocomplete:focus {
        box-shadow: 0 0 0 2px rgba(0,47,78,0.25) !important;
        border-color: var(--ps-primary) !important;
    }

/* Checkboxes */
.rz-checkbox-box.rz-state-active {
    background-color: var(--ps-primary) !important;
    border-color: var(--ps-primary) !important;
}

/* Radios */
.rz-radiobutton-box.rz-state-active {
    border-color: var(--ps-primary) !important;
}

/* DataGrid */
.rz-datatable {
    background-color: white;
}

.rz-datatable-header,
.rz-datatable-thead > tr > th {
    background-color: var(--ps-primary-dark) !important;
    color: white !important;
}

.rz-datatable-tbody > tr:hover {
    background-color: var(--ps-hover) !important;
    color: white !important;
}

/* Tabs */
.rz-tabs-tab {
    color: var(--ps-primary) !important;
}

    .rz-tabs-tab.rz-state-active {
        border-color: var(--ps-primary) !important;
        color: var(--ps-primary) !important;
    }

/* Dialog */
.rz-dialog {
    border-top: 4px solid var(--ps-primary) !important;
}

.rz-dialog-titlebar {
    background-color: var(--ps-primary) !important;
    color: white !important;
}

/* Sidebar / Navigation */
.rz-navigation-menu {
    background-color: var(--ps-bg) !important;
}

.rz-menuitem-link {
    color: var(--ps-primary) !important;
}

/*    .rz-menuitem-link:hover {
        background-color: var(--ps-hover) !important;
        color: var(--ps-menu-text) !important;
    }*/

.nav-scrollable .rz-panel-menu {
    background: var(--ps-primary-light) !important;
    color: var(--ps-menu-text) !important;
}

.rz-panel-menu {
    background: var(--ps-primary-light) !important;
    color: var(--ps-menu-text) !important;
}

    .rz-panel-menu .rz-panel-menu-group > .rz-panel-menu-item {
        background: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
    }

    .rz-panel-menu .rz-panel-menu-item {
        background: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
    }

/*        .rz-panel-menu .rz-panel-menu-item:hover,
        .rz-panel-menu .rz-panel-menu-item.rz-state-active {
            background: var(--ps-hover) !important;
        }
*/
    .rz-panel-menu .rz-panel-menu-item-group {
        background-color: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
    }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item {
        background-color: var(--ps-primary-light) !important;
        border-bottom: 1px solid var(--ps-bg-light) !important;
        color: var(--ps-menu-text) !important;
    }

        .rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child {
            border-bottom: none !important;
            color: var(--ps-menu-text) !important;
        }

 /*       .rz-panel-menu .rz-navigation-menu .rz-navigation-item:hover {
            background: var(--ps-hover) !important;
        }*/

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
        background-color: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
        margin-inline: 0px !important;
        padding-inline: var(--rz-panel-menu-item-padding-inline);
    }
        .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
            background-color: var(--ps-hover) !important;
            margin-inline: 0px !important;
            padding-inline: var(--rz-panel-menu-item-padding-inline);
        }

    .rz-panel-menu .rz-navigation-item {
        background-color: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
    }
    .rz-panel-menu .rz-navigation-item:hover {
        background-color: var(--ps-hover) !important;
    }

    .rz-panel-menu .rz-navigation-menu {
        background-color: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
    }

    .rz-panel-menu .rz-panel-menu-item-group .rz-navigation-item {
        border-bottom: 1px solid var(--ps-bg-light) !important;
        color: var(--ps-menu-text) !important;
    }

        .rz-panel-menu .rz-panel-menu-item-group .rz-navigation-item:hover {
            background-color: var(--ps-hover) !important;
        }

        .rz-panel-menu .rz-panel-menu-item-group .rz-navigation-item:last-child {
            border-bottom: none !important;
            color: var(--ps-menu-text) !important;
        }


    .rz-panel-menu .rz-panel-menu-item > .rz-panel-menu-link {
        background-color: var(--ps-primary-light) !important;
        color: var(--ps-menu-text) !important;
        border-bottom: 1px solid var(--ps-bg-light);
    }

        .rz-panel-menu .rz-panel-menu-item > .rz-panel-menu-link:hover {
            background-color: var(--ps-hover) !important;
            color: var(--ps-menu-text) !important;
        }

/*    .rz-panel-menu .rz-panel-menu-item.rz-state-active > .rz-panel-menu-link {
        background-color: var(--ps-hover) !important;
    }
*/

        .rz-panel-menu .rz-navigation-item-wrapper:hover i {
            color: var(--ps-hover-icon) !important;
        }


    .rz-panel-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--ps-hover) !important;
        background: var(--ps-hover) !important;
    }

    .rz-panel-menu .rz-navigation-item-wrapper-active {
        background-color: var(--ps-menu-active-background) !important;
        color: var(--ps-menu-active-text) !important;
    }

        .rz-panel-menu .rz-navigation-item-wrapper-active i {
            color: var(--ps-accent-dark) !important;
        }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--ps-hover) !important;
    }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
        background-color: var(--ps-menu-active-background) !important;
        color: var(--ps-menu-active-text) !important;
    }
        .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active i {
            color: var(--ps-accent-dark) !important;
        }


/* Radzen SplitButton - Secondary Default */
.rz-splitbutton.rz-secondary .rz-button {
    background-color: var(--ps-secondary) !important;
    border-color: var(--ps-secondary) !important;
    color: white !important;
}

/* Radzen SplitButton - Secondary Hover */
.rz-splitbutton.rz-secondary:not(.rz-state-disabled) .rz-button:hover {
    background-color: var(--ps-hover) !important;
    border-color: var(--ps-hover) !important;
    color: var(--ps-secondary) !important; /* You might want secondary text color on hover */
}

/* Optional: Keep the dropdown button consistent with the main button's style */
.rz-splitbutton.rz-secondary .rz-splitbutton-menubutton {
    background-color: var(--ps-secondary) !important;
    border-color: var(--ps-secondary) !important;
    color: white !important;
}

.rz-splitbutton.rz-secondary:not(.rz-state-disabled) .rz-splitbutton-menubutton:hover {
    background-color: var(--ps-hover) !important;
    border-color: var(--ps-hover) !important;
    color: var(--ps-secondary) !important;
}

.rz-splitbutton .rz-button {
    background-color: var(--ps-primary-light) !important;
    border-color: var(--ps-primary-light) !important;
    color: var(--ps-menu-text) !important;
}

    .rz-splitbutton .rz-button:hover {
        background-color: var(--ps-primary-dark) !important;
        border-color: var(--ps-hover) !important;
        color: var(--ps-primary) !important;
    }