/* DevExpress Theme Customization */

/* Override DevExpress Button Styles */
.dxbl-btn {
    /* Custom button styling */
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    /* Increase padding by 2px on all sides */
    padding: calc(var(--dxbl-btn-padding-y, 0.5rem) + 2px) calc(var(--dxbl-btn-padding-x, 0.75rem) + 2px) !important;
}

/* Ensure all DevExpress button variations get the increased padding */
.dxbl-btn-primary,
.dxbl-btn-secondary,
.dxbl-btn-success,
.dxbl-btn-danger,
.dxbl-btn-warning,
.dxbl-btn-info,
.dxbl-btn-light,
.dxbl-btn-dark,
.dxbl-btn-outline-primary,
.dxbl-btn-outline-secondary,
.dxbl-btn-outline-success,
.dxbl-btn-outline-danger,
.dxbl-btn-outline-warning,
.dxbl-btn-outline-info,
.dxbl-btn-outline-light,
.dxbl-btn-outline-dark {
    /* Increase padding by 2px on all sides for all button variants */
    padding: calc(var(--dxbl-btn-padding-y, 0.5rem) + 2px) calc(var(--dxbl-btn-padding-x, 0.75rem) + 2px) !important;
}

/* Monochromatic Purple Color Scheme */
.dxbl-btn-primary {
    background-color: #6f42c1 !important; /* Base purple */
    border-color: #6f42c1 !important;
}

.dxbl-btn-primary:hover {
    background-color: #5a3599 !important; /* Darker purple */
    border-color: #5a3599 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-secondary {
    background-color: #8b5fd1 !important; /* Lighter purple */
    border-color: #8b5fd1 !important;
    color: white !important;
}

.dxbl-btn-secondary:hover {
    background-color: #7c4cc7 !important; /* Slightly darker purple */
    border-color: #7c4cc7 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-success {
    background-color: #a67dd1 !important; /* Even lighter purple */
    border-color: #a67dd1 !important;
    color: white !important;
}

.dxbl-btn-success:hover {
    background-color: #9b6dd1 !important; /* Slightly darker purple */
    border-color: #9b6dd1 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-info {
    background-color: #c1a3e1 !important; /* Very light purple */
    border-color: #c1a3e1 !important;
    color: #333 !important;
}

.dxbl-btn-info:hover {
    background-color: #b894dd !important; /* Slightly darker purple */
    border-color: #b894dd !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-warning {
    background-color: #d4c1e8 !important; /* Lightest purple */
    border-color: #d4c1e8 !important;
    color: #333 !important;
}

.dxbl-btn-warning:hover {
    background-color: #cbb3e1 !important; /* Slightly darker purple */
    border-color: #cbb3e1 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-danger {
    background-color: #4a2c7a !important; /* Dark purple */
    border-color: #4a2c7a !important;
    color: white !important;
}

.dxbl-btn-danger:hover {
    background-color: #3d2465 !important; /* Darker purple */
    border-color: #3d2465 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-light {
    background-color: #e8ddf2 !important; /* Very light purple */
    border-color: #e8ddf2 !important;
    color: #333 !important;
}

.dxbl-btn-light:hover {
    background-color: #ddd0eb !important; /* Slightly darker purple */
    border-color: #ddd0eb !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-dark {
    background-color: #2d1b4e !important; /* Very dark purple */
    border-color: #2d1b4e !important;
    color: white !important;
}

.dxbl-btn-dark:hover {
    background-color: #24163f !important; /* Darker purple */
    border-color: #24163f !important;
    transform: translateY(-1px) !important;
}

/* Outline Button Variants - Monochromatic Purple */
.dxbl-btn-outline-primary {
    background-color: transparent !important;
    border-color: #6f42c1 !important;
    color: #6f42c1 !important;
}

.dxbl-btn-outline-primary:hover {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-secondary {
    background-color: transparent !important;
    border-color: #8b5fd1 !important;
    color: #8b5fd1 !important;
}

.dxbl-btn-outline-secondary:hover {
    background-color: #8b5fd1 !important;
    border-color: #8b5fd1 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-success {
    background-color: transparent !important;
    border-color: #a67dd1 !important;
    color: #a67dd1 !important;
}

.dxbl-btn-outline-success:hover {
    background-color: #a67dd1 !important;
    border-color: #a67dd1 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-info {
    background-color: transparent !important;
    border-color: #c1a3e1 !important;
    color: #c1a3e1 !important;
}

.dxbl-btn-outline-info:hover {
    background-color: #c1a3e1 !important;
    border-color: #c1a3e1 !important;
    color: #333 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-warning {
    background-color: transparent !important;
    border-color: #d4c1e8 !important;
    color: #d4c1e8 !important;
}

.dxbl-btn-outline-warning:hover {
    background-color: #d4c1e8 !important;
    border-color: #d4c1e8 !important;
    color: #333 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-danger {
    background-color: transparent !important;
    border-color: #4a2c7a !important;
    color: #4a2c7a !important;
}

.dxbl-btn-outline-danger:hover {
    background-color: #4a2c7a !important;
    border-color: #4a2c7a !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-light {
    background-color: transparent !important;
    border-color: #e8ddf2 !important;
    color: #e8ddf2 !important;
}

.dxbl-btn-outline-light:hover {
    background-color: #e8ddf2 !important;
    border-color: #e8ddf2 !important;
    color: #333 !important;
    transform: translateY(-1px) !important;
}

.dxbl-btn-outline-dark {
    background-color: transparent !important;
    border-color: #2d1b4e !important;
    color: #2d1b4e !important;
}

.dxbl-btn-outline-dark:hover {
    background-color: #2d1b4e !important;
    border-color: #2d1b4e !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Override DevExpress TextBox Styles */
.dxbl-textbox {
    border-radius: 8px !important;
    border: 1px solid #333 !important;
    background-color: #1a1a1a !important;
    color: white !important;
    /* Increase padding by 1px on all sides */
    padding: calc(var(--dxbl-textbox-padding-y, 0.375rem) + 1px) calc(var(--dxbl-textbox-padding-x, 0.75rem) + 1px) !important;
}

.dxbl-textbox:focus {
    border-color: #ed1b24 !important;
    box-shadow: 0 0 0 2px rgba(237, 27, 36, 0.2) !important;
}

/* Ensure all DevExpress text input components get the increased padding */
.dxbl-textbox,
.dxbl-textarea,
.dxbl-combobox,
.dxbl-combobox-input,
.dxbl-dateedit,
.dxbl-dateedit-input,
.dxbl-numeric-edit,
.dxbl-numeric-edit-input,
.dxbl-masked-input,
.dxbl-masked-input-input,
.dxbl-spin-edit,
.dxbl-spin-edit-input,
.dxbl-tag-box,
.dxbl-tag-box-input,
.dxbl-token-box,
.dxbl-token-box-input,
.dxbl-autocomplete,
.dxbl-autocomplete-input,
.dxbl-drop-down,
.dxbl-drop-down-input,
.dxbl-lookup,
.dxbl-lookup-input,
.dxbl-select-box,
.dxbl-select-box-input,
.dxbl-multiselect,
.dxbl-multiselect-input,
.dxbl-checkbox,
.dxbl-radio-button,
.dxbl-switch,
.dxbl-toggle-switch {
    /* Increase padding by 1px on all sides for all text input components */
    padding: calc(var(--dxbl-input-padding-y, 0.375rem) + 1px) calc(var(--dxbl-input-padding-x, 0.75rem) + 1px) !important;
}

/* Specific overrides for components that might have different padding variables */
.dxbl-combobox .dxbl-combobox-input,
.dxbl-dateedit .dxbl-dateedit-input,
.dxbl-numeric-edit .dxbl-numeric-edit-input,
.dxbl-masked-input .dxbl-masked-input-input,
.dxbl-spin-edit .dxbl-spin-edit-input,
.dxbl-tag-box .dxbl-tag-box-input,
.dxbl-token-box .dxbl-token-box-input,
.dxbl-autocomplete .dxbl-autocomplete-input,
.dxbl-drop-down .dxbl-drop-down-input,
.dxbl-lookup .dxbl-lookup-input,
.dxbl-select-box .dxbl-select-box-input,
.dxbl-multiselect .dxbl-multiselect-input {
    /* Ensure nested input elements also get the increased padding */
    padding: calc(var(--dxbl-input-padding-y, 0.375rem) + 1px) calc(var(--dxbl-input-padding-x, 0.75rem) + 1px) !important;
}

/* Additional DevExpress text input components */
.dxbl-text-edit,
.dxbl-text-edit-input,
.dxbl-password-box,
.dxbl-password-box-input,
.dxbl-email-box,
.dxbl-email-box-input,
.dxbl-url-box,
.dxbl-url-box-input,
.dxbl-phone-number-box,
.dxbl-phone-number-box-input,
.dxbl-color-edit,
.dxbl-color-edit-input,
.dxbl-file-upload,
.dxbl-file-upload-input,
.dxbl-search-box,
.dxbl-search-box-input,
.dxbl-filter-box,
.dxbl-filter-box-input {
    /* Increase padding by 1px on all sides for additional text input components */
    padding: calc(var(--dxbl-input-padding-y, 0.375rem) + 1px) calc(var(--dxbl-input-padding-x, 0.75rem) + 1px) !important;
}

/* Ensure all input elements within DevExpress components get the increased padding */
.dxbl-form-control,
.dxbl-form-control input,
.dxbl-form-control textarea,
.dxbl-form-control select {
    padding: calc(var(--dxbl-input-padding-y, 0.375rem) + 1px) calc(var(--dxbl-input-padding-x, 0.75rem) + 1px) !important;
}

/* Override DevExpress Panel Styles */
.dxbl-panel {
    border-radius: 12px !important;
    border: 1px solid #333 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dxbl-panel-header {
    background-color: #4a2c7a !important; /* Dark purple from monochromatic scheme */
    color: white !important;
    border-bottom: 1px solid #333 !important;
}

/* Override DevExpress Popup Styles */
.dxbl-popup {
    border-radius: 12px !important;
    border: 1px solid #333 !important;
    background-color: #1a1a1a !important;
}

.dxbl-popup-header {
    background-color: #4a2c7a !important; /* Dark purple from monochromatic scheme */
    color: white !important;
    border-bottom: 1px solid #333 !important;
}

/* Override DevExpress Layout Styles */
.dxbl-layout {
    background-color: transparent !important;
}

.dxbl-layout-item {
    padding: 0.5rem !important;
}

/* Custom DevExpress Component Classes - Monochromatic Purple */
.dxbl-custom-primary {
    --dxbl-btn-bg: #6f42c1 !important; /* Base purple */
    --dxbl-btn-border-color: #6f42c1 !important;
    --dxbl-btn-color: white !important;
}

.dxbl-custom-secondary {
    --dxbl-btn-bg: #8b5fd1 !important; /* Lighter purple */
    --dxbl-btn-border-color: #8b5fd1 !important;
    --dxbl-btn-color: white !important;
}

/* DevExpress CSS Variables Override - Monochromatic Purple Theme */
:root {
    --dxbl-color-primary: #6f42c1; /* Base purple */
    --dxbl-color-secondary: #8b5fd1; /* Lighter purple */
    --dxbl-color-success: #a67dd1; /* Even lighter purple */
    --dxbl-color-danger: #4a2c7a; /* Dark purple */
    --dxbl-color-warning: #d4c1e8; /* Lightest purple */
    --dxbl-color-info: #c1a3e1; /* Very light purple */
    --dxbl-color-light: #e8ddf2; /* Very light purple */
    --dxbl-color-dark: #2d1b4e; /* Very dark purple */
    
    /* Background colors */
    --dxbl-bg-primary: #1a1a1a;
    --dxbl-bg-secondary: #2a2a2a;
    --dxbl-bg-tertiary: #333;
    
    /* Text colors */
    --dxbl-text-primary: white;
    --dxbl-text-secondary: #ccc;
    --dxbl-text-muted: #999;
    
    /* Border colors */
    --dxbl-border-color: #333;
    --dxbl-border-color-light: #555;
    
    /* Spacing */
    --dxbl-spacing-xs: 0.25rem;
    --dxbl-spacing-sm: 0.5rem;
    --dxbl-spacing-md: 1rem;
    --dxbl-spacing-lg: 1.5rem;
    --dxbl-spacing-xl: 2rem;
    
    /* Border radius */
    --dxbl-border-radius-sm: 4px;
    --dxbl-border-radius-md: 8px;
    --dxbl-border-radius-lg: 12px;
    
    /* Shadows */
    --dxbl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --dxbl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --dxbl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Dark theme overrides */
[data-theme="dark"] {
    --dxbl-bg-primary: #1a1a1a;
    --dxbl-bg-secondary: #2a2a2a;
    --dxbl-text-primary: white;
    --dxbl-text-secondary: #ccc;
    --dxbl-border-color: #333;
}

/* Light theme overrides */
[data-theme="light"] {
    --dxbl-bg-primary: #ffffff;
    --dxbl-bg-secondary: #f8f9fa;
    --dxbl-text-primary: #212529;
    --dxbl-text-secondary: #6c757d;
    --dxbl-border-color: #dee2e6;
}

/* Responsive DevExpress overrides */
@media (max-width: 768px) {
    .dxbl-btn {
        font-size: 0.9rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .dxbl-textbox {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

@media (max-width: 480px) {
    .dxbl-btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
}