/* DevExtreme Theme Overrides for Light/Dark Mode Compatibility */

/* Base Widget Styling */
.dx-widget, .dx-overlay-content {
    font-family: inherit !important;
    color: var(--text-primary) !important;
}

/* Text Editor (Input) Styling */
.dx-texteditor {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    border-radius: 0.375rem; /* Bootstrap rounded */
}

.dx-texteditor-input {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.dx-texteditor.dx-state-focused {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus ring */
}

.dx-texteditor.dx-state-hover {
    border-color: var(--text-secondary) !important;
}

/* Placeholder */
.dx-placeholder {
    color: var(--text-muted) !important;
}

/* TagBox Tags */
.dx-tag {
    background-color: var(--bg-surface-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color-subtle) !important;
    border-radius: 4px !important;
}

.dx-tag-content {
    padding-right: 25px !important; /* Space for remove button */
}

.dx-tag-remove-button {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.dx-tag-remove-button:hover {
    color: var(--danger-color) !important;
    opacity: 1;
}

/* Dropdown Button */
.dx-dropdowneditor-button {
    background-color: transparent !important;
}

.dx-dropdowneditor-icon {
    color: var(--text-secondary) !important;
}

/* Dropdown List (Popup) */
.dx-popup-content, .dx-dropdowneditor-overlay .dx-overlay-content {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dx-list {
    background-color: var(--bg-surface) !important;
}

.dx-list-item {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface) !important;
}

.dx-list-item.dx-state-hover {
    background-color: var(--bg-surface-secondary) !important;
    color: var(--text-primary) !important;
}

.dx-list-item.dx-state-focused {
    background-color: var(--bg-surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.dx-list-item.dx-list-item-selected {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Scrollbar (for Dark Mode) */
[data-theme="dark"] .dx-scrollable-scroll {
    background-color: var(--text-muted) !important;
}

/* Clear Button */
.dx-clear-button-area {
    color: var(--text-muted) !important;
}

/* Borders in Dropdown */
.dx-list-item-content {
    border-bottom: 1px solid var(--border-color-subtle) !important;
}

/* Remove default DevExtreme shadows/gradients that might clash */
.dx-texteditor-container, .dx-tag-content, .dx-list-item {
    box-shadow: none !important;
    background-image: none !important;
}
