/* ======================
   Radzen Theme Overrides
   ====================== */

/* Theme Variables */
:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-layout-body-margin: 0;
    --rz-panel-menu-item-2nd-level-padding-block: 0.25rem;
    --rz-light: var(--rz-base-600);
    /* Buttons */
    --rz-button-border-radius: 6px;
    /* Border */
    --rz-fieldset-border: 1px solid var(--rz-base-300);
    --rz-border-normal: 1px solid var(--rz-base-300);
    /* Base colors - using your gray scale */
    --rz-base: #EAECF0;
    /* Pearl Gray */
    --rz-base-50: #F8F9FA;
    --rz-base-100: #F5F6F8;
    --rz-base-200: #EAECF0;
    /* Pearl Gray */
    --rz-base-300: #E0E2E7;
    --rz-base-400: #D5D8DF;
    --rz-base-500: #CBCFD7;
    --rz-base-600: #989CA5;
    /* Lead Gray */
    --rz-base-700: #656971;
    /* Granite Gray */
    --rz-base-800: #45494F;
    --rz-base-900: #29303A;
    /* Anthracite */
    /* Primary colors - using Anthracite as primary */
    --rz-primary: #29303A;
    /* Anthracite */
    --rz-primary-light: #4D5361;
    --rz-primary-lighter: rgba(41, 48, 58, 0.15);
    --rz-primary-dark: #1E232A;
    --rz-primary-darker: #14171D;
    /* Secondary colors - using Lead Gray */
    --rz-secondary: #989CA5;
    /* Lead Gray */
    --rz-secondary-light: #BFC2C8;
    --rz-secondary-lighter: rgba(152, 156, 165, 0.13);
    --rz-secondary-dark: #7A7E87;
    --rz-secondary-darker: #656971;
    /* Granite Gray */
    /* Shadow Overrides */
    --rz-shadow-1: 0px 1px 1px rgba(152, 156, 165, 0.15), 0px 1px 2px 0px rgba(152, 156, 165, 0.1);
    --rz-shadow-2: 0px 1px 2px rgba(152, 156, 165, 0.18), 0px 2px 3px 0px rgba(152, 156, 165, 0.12);
    /* Card Overrides */
    --rz-card-background-color: rgba(215, 219, 224, 0.07);
    /* Datagrid Overrides */
    --rz-grid-hover-background-color: var(--rz-base-200);
    --rz-grid-header-font-size: 0.9rem;
    --rz-grid-header-font-weight: 600;
    /* Grid Header Background Override */
    --rz-grid-header-background-color: white;
    --rz-grid-foot-background-color: white;
    /* Input Overrides */
    --rz-input-background-color: white;
    .rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker {
        background-color: white;
    }

    /*dropdown overrides*/
    .rz-html-editor-dropdown-items,
        .rz-splitbutton-menu,
        .rz-autocomplete-panel,
        .rz-multiselect-panel,
        .rz-dropdown-panel {
            background-color: white;
        }


}

/* Dialog Overrides */
.rz-dialog {
    background-color: var(--rz-white);
}

.rz-dialog-side {
    background-color: var(--rz-white) !important;
}

/* Dialog Overrides */
.rz-dialog-side.rz-dialog-side-position-right {
    background-color: var(--rz-white) !important;
}

.rz-dialog-titlebar, 
.rz-dialog-side-titlebar {
    background-color: var(--rz-white);
    border-bottom: none;
}

.rz-switch {
    transform: scale(0.8);
}

.rz-listbox {
    background-color: white;
    height: auto !important;
    max-height: 250px;
}

    .rz-listbox:focus, .rz-listbox:focus-within {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    background-color: var(--rz-primary);
    color: white;
}

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter {
    background-color: var(--rz-secondary-light);
    color: var(--rz-secondary-darker);
}

/* Override disabled dropdown border to use input border */
.rz-dropdown:disabled,
.rz-state-disabled.rz-dropdown,
.rz-form-field-content > .rz-dropdown:disabled,
.rz-form-field-content > .rz-state-disabled.rz-dropdown {
    border: var(--rz-input-border) !important;
}

/* Global clickable row style for DataGrids */
.clickable-row:hover {
    cursor: pointer; /* or grab */
    background-color: #f1f3f9;
    transition: background 0.2s;
}

/* Global DataGrid row hover background color */
.rz-datatable-data tr:hover,
.rz-data-table-table tr:hover,
.rz-grid-table .rz-data-row:hover {
    background-color: #f6f8fc !important;
    transition: background 0.2s;
}