/* =====================================================
   Radzen overrides
   ===================================================== */

/* Dialog typography */
.rz-dialog.rz-dialog-confirm,
.rz-dialog.rz-dialog-alert,
.rz-dialog.rz-dialog-confirm .rz-dialog-content,
.rz-dialog.rz-dialog-alert .rz-dialog-content,
.rz-dialog .rz-dialog-title,
.rz-dialog .rz-button
{
    font-family: 'Source Sans Pro', 'Roboto', 'Segoe UI', sans-serif !important;
}

.rz-autocomplete
{
    border: none;
    background-color: inherit;
}
    .rz-autocomplete:hover
    {
        border: none;
        background-color: inherit;
    }

    .rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search-input-container input:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover
    {
        border: none;
        background-color: inherit;
    }

/* Generic field/input reset */
.rz-form-field-content,
.rz-numeric
{
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: none !important;
    border-block-end: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rz-body
{
    margin: 0 !important;
    padding: 0 !important;
}

/* Calendar/event overflow */
.rz-event,
.rz-event-list-btn
{
    overflow: hidden;
}

/* Sidebar */
.rz-sidebar,
.rz-sidebar-toggle
{
    border-inline-end: none !important;
}

/* Buttons */
.rz-button
{
    background-color: transparent !important;
    border: none !important;
}

    .rz-button.rz-primary.rz-shade-default,
    .rz-button.rz-primary.rz-shade-default:hover,
    .rz-button.rz-primary.rz-shade-default:focus,
    .rz-button.rz-primary.rz-shade-default:active
    {
        background-color: var(--background-light) !important;
    }

body.dark-theme .rz-button
{
    background-color: transparent !important;
    border: none !important;
}

    body.dark-theme .rz-button.rz-primary.rz-shade-default,
    body.dark-theme .rz-button.rz-primary.rz-shade-default:hover,
    body.dark-theme .rz-button.rz-primary.rz-shade-default:focus,
    body.dark-theme .rz-button.rz-primary.rz-shade-default:active
    {
        background-color: var(--background-dark) !important;
        border: 1px solid var(--text-dark) !important;
    }

/* Dialogs */
.rz-dialog,
.rz-dialog .rz-dialog-title,
.rz-dialog .rz-dialog-titlebar
{
    background-color: var(--background-dark) !important;
    color: var(--text-dark) !important;
}

/* Pager / expanded rows */
.rz-pager,
.rz-expanded-row-template
{
    background-color: transparent !important;
}

.rz-expanded-row-template
{
    margin: 1em;
}

/* HTML editor content */
.sade-html-editor .rz-html-editor-content,
.sade-html-editor .rz-html-editor-content *
{
    color: black !important;
    background-color: white !important;
}

/* Tooltip */
.rz-tooltip-content
{
    background-color: var(--background-light);
}

body.dark-theme .rz-tooltip-content
{
    background-color: var(--background-dark);
}

/* Tabs */
.rz-tabview-panels,
.rz-tabview-panel
{
    box-shadow: none;
    color: var(--text-dark);
    background-color: transparent;
}

.rz-tabview-nav li
{
    box-shadow: none;
    color: var(--text-dark);
    border: 1px solid gray;
    background-color: transparent;
}

    .rz-tabview-nav li a,
    .rz-tabview-selected a
    {
        border: 1px solid gray;
        background-color: transparent;
    }

.rz-tabview.has-background .rz-tabview-panels,
.rz-tabview.has-background .rz-tabview-panel[aria-hidden="false"]
{
    background-color: var(--card-dark) !important;
}

.rz-tabview-top > .rz-tabview-nav li,
.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected
{
    border-top-color: gray;
    border-bottom-color: gray;
    margin-bottom: 0px;
    border: 1px solid gray;
}

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected
{
    background-color: var(--background-dark);
}

.rz-group-header
{
    display: none !important;
}

.show-group-header .rz-group-header
{
    display: inherit !important;
}

/* DataGrid simple filter popup */
.rz-filter-popup,
.rz-column-filter,
.rz-grid-filter,
.rz-popup:has(.rz-filter-popup),
.rz-popup:has(.rz-column-filter),
.rz-popup:has(.rz-grid-filter)
{
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24) !important;
}

.rz-filter-popup .rz-button,
.rz-column-filter .rz-button,
.rz-grid-filter .rz-button
{
    color: var(--text-light) !important;
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
}

.rz-filter-popup .rz-button.rz-primary,
.rz-column-filter .rz-button.rz-primary,
.rz-grid-filter .rz-button.rz-primary
{
    background-color: var(--buttonPrimaryBg) !important;
    color: var(--buttonPrimaryText) !important;
    border: var(--buttonPrimaryBorder) !important;
}

.rz-filter-popup .rz-dropdown,
.rz-filter-popup .rz-datepicker,
.rz-filter-popup .rz-inputtext,
.rz-column-filter .rz-dropdown,
.rz-column-filter .rz-datepicker,
.rz-column-filter .rz-inputtext,
.rz-grid-filter .rz-dropdown,
.rz-grid-filter .rz-datepicker,
.rz-grid-filter .rz-inputtext
{
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    border-color: var(--border-color) !important;
}

.rz-dropdown-panel,
.rz-datepicker-calendar,
.rz-datepicker-popup,
.rz-calendar
{
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    border-color: var(--border-color) !important;
}

.rz-dropdown-item,
.rz-listbox-item,
.rz-calendar .rz-cell,
.rz-datepicker-calendar td,
.rz-datepicker-calendar th
{
    background-color: transparent !important;
    color: var(--text-light) !important;
}

.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item.rz-state-selected,
.rz-listbox-item.rz-state-highlight,
.rz-listbox-item.rz-state-selected,
.rz-calendar .rz-state-highlight,
.rz-calendar .rz-state-selected,
.rz-datepicker-calendar .rz-state-highlight,
.rz-datepicker-calendar .rz-state-selected
{
    background-color: var(--buttonPrimaryBg) !important;
    color: var(--buttonPrimaryText) !important;
}

.rz-datepicker-header,
.rz-datepicker-calendar .rz-datepicker-header
{
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .rz-filter-popup,
body.dark-theme .rz-column-filter,
body.dark-theme .rz-grid-filter,
body.dark-theme .rz-popup:has(.rz-filter-popup),
body.dark-theme .rz-popup:has(.rz-column-filter),
body.dark-theme .rz-popup:has(.rz-grid-filter)
{
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}

body.dark-theme .rz-filter-popup .rz-button,
body.dark-theme .rz-column-filter .rz-button,
body.dark-theme .rz-grid-filter .rz-button
{
    color: var(--text-dark) !important;
    border: 1px solid rgba(249, 250, 251, 0.22) !important;
}

body.dark-theme .rz-filter-popup .rz-button.rz-primary,
body.dark-theme .rz-column-filter .rz-button.rz-primary,
body.dark-theme .rz-grid-filter .rz-button.rz-primary
{
    background-color: var(--background-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid rgba(249, 250, 251, 0.35) !important;
}

body.dark-theme .rz-filter-popup .rz-dropdown,
body.dark-theme .rz-filter-popup .rz-datepicker,
body.dark-theme .rz-filter-popup .rz-inputtext,
body.dark-theme .rz-column-filter .rz-dropdown,
body.dark-theme .rz-column-filter .rz-datepicker,
body.dark-theme .rz-column-filter .rz-inputtext,
body.dark-theme .rz-grid-filter .rz-dropdown,
body.dark-theme .rz-grid-filter .rz-datepicker,
body.dark-theme .rz-grid-filter .rz-inputtext
{
    background-color: var(--input-dark) !important;
    color: var(--text-dark) !important;
    border-color: rgba(249, 250, 251, 0.22) !important;
}

body.dark-theme .rz-dropdown-panel,
body.dark-theme .rz-datepicker-calendar,
body.dark-theme .rz-datepicker-popup,
body.dark-theme .rz-calendar
{
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .rz-dropdown-item,
body.dark-theme .rz-listbox-item,
body.dark-theme .rz-calendar .rz-cell,
body.dark-theme .rz-datepicker-calendar td,
body.dark-theme .rz-datepicker-calendar th
{
    background-color: transparent !important;
    color: var(--text-dark) !important;
}

body.dark-theme .rz-dropdown-item:hover,
body.dark-theme .rz-listbox-item:hover,
body.dark-theme .rz-calendar .rz-cell:hover,
body.dark-theme .rz-datepicker-calendar td:hover
{
    background-color: var(--card-listactive-active) !important;
    color: var(--text-dark) !important;
}

body.dark-theme .rz-dropdown-item.rz-state-highlight,
body.dark-theme .rz-dropdown-item.rz-state-selected,
body.dark-theme .rz-listbox-item.rz-state-highlight,
body.dark-theme .rz-listbox-item.rz-state-selected,
body.dark-theme .rz-calendar .rz-state-highlight,
body.dark-theme .rz-calendar .rz-state-selected,
body.dark-theme .rz-datepicker-calendar .rz-state-highlight,
body.dark-theme .rz-datepicker-calendar .rz-state-selected
{
    background-color: var(--background-dark) !important;
    color: var(--text-dark) !important;
    border-color: rgba(249, 250, 251, 0.35) !important;
}

body.dark-theme .rz-datepicker-header,
body.dark-theme .rz-datepicker-calendar .rz-datepicker-header
{
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-color) !important;
}