/* ============================================================================
   PCS - DEVEXPRESS THEME INTEGRATION
   Override DevExpress CSS Variables to match PCS Design System
   ============================================================================ */

/* ============================================================================
   DEVEXPRESS FORM CONTROLS THEME
   ============================================================================ */

/* Map PCS variables to DevExpress naming */
:root {
    /* Colors */
    --dx-color-primary: var(--pcs-primary);
    --dx-color-primary-hover: var(--pcs-primary-hover);
    --dx-color-primary-light: var(--pcs-primary-light);
    
    /* Surface */
    --dx-background: var(--pcs-surface);
    --dx-background-alt: var(--pcs-surface-secondary);
    
    /* Text */
    --dx-color-text: var(--pcs-text-primary);
    --dx-color-text-secondary: var(--pcs-text-secondary);
    
    /* Border */
    --dx-color-border: var(--pcs-border);
    
    /* Status */
    --dx-color-success: var(--pcs-status-normal);
    --dx-color-warning: var(--pcs-status-inspection);
    --dx-color-error: var(--pcs-status-failure);
    --dx-color-info: var(--pcs-info);
    
    /* Spacing */
    --dx-spacing-sm: var(--pcs-space-sm);
    --dx-spacing-md: var(--pcs-space-md);
    --dx-spacing-lg: var(--pcs-space-lg);
    
    /* Border Radius */
    --dx-border-radius: var(--pcs-radius-sm);
    --dx-border-radius-lg: var(--pcs-radius-md);
    
    /* Shadows */
    --dx-shadow-sm: var(--pcs-shadow-sm);
    --dx-shadow-md: var(--pcs-shadow-md);
    
    /* Transitions */
    --dx-transition: var(--pcs-transition-fast);
}

[data-bs-theme="dark"] {
    --dx-color-primary: var(--pcs-primary);
    --dx-color-primary-hover: var(--pcs-primary-hover);
    --dx-background: var(--pcs-surface);
    --dx-background-alt: var(--pcs-surface-secondary);
    --dx-color-text: var(--pcs-text-primary);
    --dx-color-border: var(--pcs-border);
}

/* ============================================================================
   DxTextBox, DxComboBox, DxDateEdit - Form Controls
   ============================================================================ */

/* Text Input */
.dx-textbox,
.dx-texteditor {
    border-radius: var(--pcs-radius-sm);
    transition: all var(--pcs-transition-fast);
}

.dx-textbox:hover,
.dx-texteditor:hover {
    border-color: var(--pcs-primary);
}

.dx-textbox:focus-within,
.dx-texteditor:focus-within {
    border-color: var(--pcs-primary);
    box-shadow: 0 0 0 3px var(--pcs-primary-light);
}

/* ComboBox / Select */
.dx-dropdowneditor-button {
    border-radius: 0 var(--pcs-radius-sm) var(--pcs-radius-sm) 0;
}

/* DateEdit */
.dx-calendar {
    border-radius: var(--pcs-radius-md);
    box-shadow: var(--pcs-shadow-lg);
}

/* ============================================================================
   DxPopup - Modals/Dialogs
   ============================================================================ */

.dx-popup-wrapper {
    backdrop-filter: blur(4px);
}

.dx-popup-content {
    border-radius: var(--pcs-radius-lg);
    box-shadow: var(--pcs-shadow-xl);
}

.dx-popup-title {
    font-weight: var(--pcs-weight-semibold);
    font-size: var(--pcs-font-lg);
    color: var(--pcs-text-primary);
    padding: var(--pcs-space-lg);
    border-bottom: 1px solid var(--pcs-border);
}

/* ============================================================================
   DxButton - If used in future
   ============================================================================ */

.dx-button {
    border-radius: var(--pcs-radius-sm);
    font-weight: var(--pcs-weight-medium);
    transition: all var(--pcs-transition-fast);
}

.dx-button:hover {
    transform: translateY(-1px);
}

.dx-button:active {
    transform: translateY(0);
}

/* ============================================================================
   DxDataGrid - Tables
   ============================================================================ */

.dx-datagrid {
    border-radius: var(--pcs-radius-md);
    overflow: hidden;
    box-shadow: var(--pcs-shadow-sm);
}

.dx-datagrid-headers {
    background: var(--pcs-surface-secondary);
    font-weight: var(--pcs-weight-semibold);
    color: var(--pcs-text-primary);
}

.dx-datagrid-rowsview .dx-row:hover {
    background: var(--pcs-surface-secondary);
}

/* ============================================================================
   DxDropDown - Complex Dropdowns
   ============================================================================ */

.dx-dropdowneditor-overlay {
    border-radius: var(--pcs-radius-md);
    box-shadow: var(--pcs-shadow-lg);
    border: 1px solid var(--pcs-border);
}

/* ============================================================================
   DxToast - Notifications
   ============================================================================ */

.dx-toast {
    border-radius: var(--pcs-radius-md);
    box-shadow: var(--pcs-shadow-lg);
}

.dx-toast-success {
    background: var(--pcs-status-normal);
}

.dx-toast-warning {
    background: var(--pcs-status-inspection);
}

.dx-toast-error {
    background: var(--pcs-status-failure);
}

.dx-toast-info {
    background: var(--pcs-info);
}

/* ============================================================================
   DARK MODE OVERRIDES
   ============================================================================ */

[data-bs-theme="dark"] .dx-textbox,
[data-bs-theme="dark"] .dx-texteditor {
    background: var(--pcs-surface);
    border-color: var(--pcs-border);
    color: var(--pcs-text-primary);
}

[data-bs-theme="dark"] .dx-textbox:focus-within,
[data-bs-theme="dark"] .dx-texteditor:focus-within {
    box-shadow: 0 0 0 3px var(--pcs-primary-light);
}

[data-bs-theme="dark"] .dx-popup-content {
    background: var(--pcs-surface);
}

[data-bs-theme="dark"] .dx-datagrid {
    background: var(--pcs-surface);
}

[data-bs-theme="dark"] .dx-datagrid-headers {
    background: var(--pcs-surface-secondary);
}