/* ==============================================================================
   DEVEXPRESS GLOBAL OVERRIDES (Theme-Independent)
   ==============================================================================
   These styles apply to ALL DevExpress components across the application.
   Use CSS variables for automatic theme adaptation.
   ============================================================================== */
.dx-overlay-content:not([class*="dx-toast"]) {
    border: 2px solid var(--glass-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--glass-shadow) !important;
}

    .dx-popup-normal,
    .dx-overlay-content.dx-popup-normal,
    .waterfall-window, .orbit-window, .spectrum-waterfall-window {
        background-color: var(--glass-popup-bg) !important;
        backdrop-filter: blur(4px) !important;
    }

:root.dark .dx-overlay-content:not([class*="dx-toast"]),
:root.dark .dx-popup-normal,
:root.dark .waterfall-window,
:root.dark .orbit-window,
:root.dark .spectrum-waterfall-window,
:root.dark .dx-popup-draggable,
:root.dark .dx-resizable,
:root.dark .periodic-report-popup .dx-overlay-content {
    background: var(--glass-bg-card) !important;
    background-color: var(--glass-bg-card) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--glass-shadow) !important;
}
.dx-selectbox-popup-wrapper.dx-popup-wrapper .dx-overlay-content,
.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content,
.dx-tagbox-popup-wrapper.dx-popup-wrapper .dx-overlay-content,
.dx-autocomplete-popup-wrapper.dx-popup-wrapper .dx-overlay-content,
.dx-dropdownbutton-popup-wrapper.dx-popup-wrapper .dx-overlay-content,
.dx-context-menu.dx-overlay-content,
.dx-menu-base.dx-overlay-content,
.dx-inner-overlay.dx-overlay-content {
    background-color: var(--glass-bg-card) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}
[class*="wrapper"] .dx-list,
[class*="wrapper"] .dx-list-item,
.dx-context-menu .dx-list,
.dx-menu-items-container {
    background-color: transparent !important;
    background: transparent !important;
}
.dx-popup-bottom .dx-button:not(.dx-button-default):hover {
    background-color: rgba(44, 180, 255, 0.15) !important;
    color: var(--main-accent-color) !important;
    border-radius: 6px !important;
    transform: translateY(-1px);
    transition: all 0.3s ease !important;
}
.dx-switch-handle{
    background-color: var(--main-accent-color) !important;
}
.dx-switch[aria-checked="false"] .dx-switch-container::before {
    background-color: var(--gauge-bg-color) !important;
}

.dx-checkbox-icon{
    color: var(--main-text-color) !important;
}
.dx-tag-remove-button::before{
    color: var(--gauge-bg-color) !important;
    background-color: #a8a8a8 !important;
}

.dx-list-item.dx-state-hover {
    background-color: var(--main-hover-bg-color) !important;
}

.dx-popup-title {
    border-bottom: 1px solid var(--glass-border) !important;
}

.dx-popup-bottom {
    border-top: 1px solid var(--glass-border) !important;
}

/* ==============================================================================
   Alarm Limit Point Displayer — DataGrid (same transparent style as Signal Monitor /
   Live Telemetry: SignalMonitor.razor.css .signal-monitor-grid-wrapper rules)
   ============================================================================== */
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-headers,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-headers .dx-header-row > td,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-scrollable-wrapper,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-toolbar {
    background-color: transparent !important;
    background: transparent !important;
}

:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-data-row > td,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-row:not(.dx-group-row) > td {
    background-color: transparent !important;
    background-image: none !important;
}

:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-row-alt > td {
    background-color: transparent !important;
}

:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-row.dx-group-row,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-row.dx-group-row > td,
:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-group-row .dx-group-cell {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--main-border-color) !important;
    font-size: 1rem;
    font-weight: 600;
    color: var(--main-text-color) !important;
}

:is(.alarm-limits-grid-container, #alarmLimitPointsGrid) .dx-datagrid-rowsview .dx-row.dx-group-row.dx-state-hover > td {
    background-color: transparent !important;
    background-image: none !important;
}