/* ========================================
   深色主题修复 - 确保所有元素使用深色背景
   ======================================== */

/* 强制应用深色背景到所有可能的白色元素 */

/* 输入框强制深色 */
input,
textarea,
select,
.input,
.textarea {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.textarea:focus {
    background: var(--surface-4) !important;
    border-color: var(--accent-primary) !important;
}

/* 修复可能的白色背景 */
.card,
.modal,
.dropdown-menu,
.panel {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* 按钮确保不是白色 */
.btn {
    background: var(--surface-3);
    color: var(--text-primary);
}

.btn:hover {
    background: var(--surface-4);
}

.btn-primary {
    background: var(--accent-primary) !important;
    color: #000000 !important;
}

.btn-primary:hover {
    background: var(--accent-primary-hover) !important;
}

.btn-secondary {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 修复创作面板 */
.create-panel .card,
.result-panel .card {
    background: var(--surface-2) !important;
}

/* 修复选择框 */
select option {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* 修复模态框 */
.modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
}

.modal {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修复音乐生成输入框 */
#musicPrompt,
#musicTitle,
#musicLyrics {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修复下拉选择 */
#musicStyle,
#musicMood,
#musicDuration,
#musicTempo {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修复标签和示例按钮 */
.tag {
    background: var(--surface-3) !important;
    color: var(--text-secondary) !important;
}

.tag:hover {
    background: var(--accent-primary) !important;
    color: #000000 !important;
}

/* 修复所有可能的白色面板 */
.panel,
.section,
.container {
    background: transparent !important;
}

/* 确保文本可读 */
.input-label,
.card-title,
.section-title,
label {
    color: var(--text-primary) !important;
}

/* 修复placeholder颜色 */
input::placeholder,
textarea::placeholder,
.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* 修复可能的默认浏览器样式 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    -webkit-appearance: none;
    appearance: none;
}

/* 修复自动填充的白色背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-color: var(--surface-3) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 修复音乐卡片 */
.music-card {
    background: var(--surface-2) !important;
}

.music-card-content {
    background: var(--surface-2) !important;
}

/* 修复探索区域 */
.explore-section,
.library-section,
.create-section {
    background: transparent !important;
}

/* 修复结果面板 */
.result-card,
.music-result {
    background: var(--surface-2) !important;
}

/* 修复加载状态 */
.loading-state,
.empty-state {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* 修复进度条背景 */
.progress-bar,
.progress-container {
    background: var(--surface-3) !important;
}

/* 修复播放列表面板 */
.playlist-panel {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修复提示历史下拉框 */
.prompt-history-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 修复高级选项面板 */
.advanced-panel {
    background: transparent !important;
}

/* 修复复选框和单选框标签 */
.checkbox-label,
.radio-label {
    color: var(--text-secondary) !important;
}

/* 修复表单组 */
.form-group,
.input-group {
    background: transparent !important;
}

/* 修复所有可能的白色div */
div[class*="white"],
div[style*="background: white"],
div[style*="background-color: white"],
div[style*="background:#fff"],
div[style*="background-color:#fff"] {
    background: var(--surface-2) !important;
}

/* 修复状态消息 */
.status-message,
.info-message,
.warning-message,
.error-message {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* 确保所有文本元素可见 */
p, span, div, label, h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

/* 修复可能的默认白色背景 */
* {
    scrollbar-color: var(--surface-4) var(--surface-2);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--surface-2);
}

*::-webkit-scrollbar-thumb {
    background: var(--surface-4);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* 修复表格（如果有的话） */
table {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

th, td {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 修复可能的iframe */
iframe {
    background: var(--surface-2) !important;
}

/* 确保所有按钮文本可见 */
button,
.btn,
input[type="button"],
input[type="submit"] {
    color: var(--text-primary);
}

/* 修复禁用状态 */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
.btn:disabled {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}
