/* ========================================
   DARK MODE OVERRIDES FOR ANT DESIGN
   Using html selector for global reach
   ======================================== */

/* Modal Components */
html[data-theme='dark'] .ant-modal-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

html[data-theme='dark'] .ant-modal-header {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .ant-modal-body {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] .ant-modal-footer {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-top-color: #334155 !important;
}

html[data-theme='dark'] .ant-modal-title {
    color: #f8fafc !important;
}

html[data-theme='dark'] .ant-modal-close {
    color: #cbd5e1 !important;
}

html[data-theme='dark'] .ant-modal-close:hover {
    color: #f8fafc !important;
}

/* Drawer Components */
html[data-theme='dark'] .ant-drawer-content {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

html[data-theme='dark'] .ant-drawer-header {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .ant-drawer-body {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] .ant-drawer-title {
    color: #f8fafc !important;
}

html[data-theme='dark'] .ant-drawer-close {
    color: #cbd5e1 !important;
}

/* Input Fields */
html[data-theme='dark'] input[type="text"],
html[data-theme='dark'] input[type="date"],
html[data-theme='dark'] input[type="number"],
html[data-theme='dark'] textarea {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
    color: #64748b !important;
}

/* Labels */
html[data-theme='dark'] label {
    color: #cbd5e1 !important;
}

/* Headings */
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
    color: #f8fafc !important;
}

/* Base heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
}
/* Sound Mixer Modal Styling */
.ant-modal {
    border-radius: 12px !important;
}

.ant-modal-content {
    border-radius: 12px !important;
}

.ant-modal-header {
    border-radius: 12px 12px 0 0 !important;
}

/* Button Styles in Dark Mode */
html[data-theme='dark'] .ag-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] .ag-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

html[data-theme='dark'] .ag-btn-primary {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

html[data-theme='dark'] .ag-btn-primary:hover {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* Ant Design Input in Dark Mode */
html[data-theme='dark'] .ant-input {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] .ant-input:hover,
html[data-theme='dark'] .ant-input:focus {
    border-color: #6366f1 !important;
    background: #0f172a !important;
}

html[data-theme='dark'] .ant-input::placeholder {
    color: #64748b !important;
}

/* ==========================================
   SOUND MIXER MODAL - ALWAYS DARK MODE
   Force dark theme regardless of app theme
   ========================================== */

/* Target Sound Mixer Modal specifically */
.ant-modal:has(.ag-sound-mixer-content) .ant-modal-content,
.ant-modal:has(.ag-sound-mixer-content) .ant-modal-header,
.ant-modal:has(.ag-sound-mixer-content) .ant-modal-body {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-modal-header {
    border-bottom-color: #334155 !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-modal-title,
.ant-modal:has(.ag-sound-mixer-content) h1,
.ant-modal:has(.ag-sound-mixer-content) h2,
.ant-modal:has(.ag-sound-mixer-content) h3 {
    color: #f8fafc !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-modal-close {
    color: #cbd5e1 !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-modal-close:hover {
    color: #f8fafc !important;
}

/* Buttons in Sound Mixer - Always Dark */
.ant-modal:has(.ag-sound-mixer-content) .ag-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ag-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ag-btn-primary {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ag-btn-primary:hover {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* Input fields in Sound Mixer - Always Dark */
.ant-modal:has(.ag-sound-mixer-content) .ant-input {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-input:hover,
.ant-modal:has(.ag-sound-mixer-content) .ant-input:focus {
    border-color: #6366f1 !important;
    background: #0f172a !important;
}

.ant-modal:has(.ag-sound-mixer-content) .ant-input::placeholder {
    color: #64748b !important;
}