/* 主题样式 */
:root {
    /* 默认主题变量 */
    --color-primary: #3B82F6;
    --color-secondary: #6B7280;
    --color-background: #FFFFFF;
    --color-surface: #F9FAFB;
    --color-text: #111827;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;
    --color-accent: #10B981;
}

/* 明亮主题 */
.theme-light {
    --color-primary: #3B82F6;
    --color-secondary: #6B7280;
    --color-background: #FFFFFF;
    --color-surface: #F9FAFB;
    --color-text: #111827;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;
    --color-accent: #10B981;
}

/* 深色主题 */
.theme-dark {
    --color-primary: #60A5FA;
    --color-secondary: #9CA3AF;
    --color-background: #111827;
    --color-surface: #1F2937;
    --color-text: #FFFFFF;
    --color-text-secondary: #E5E7EB;
    --color-border: #374151;
    --color-accent: #34D399;
}

.theme-dark body {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* 深色主题根元素背景 */
.theme-dark {
    background-color: #111827 !important;
}

.theme-dark .bg-white,
.theme-dark .bg-gray-50,
.theme-dark .bg-gray-100,
.theme-dark .bg-gray-200 {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

.theme-dark .bg-gray-800,
.theme-dark .bg-gray-900 {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* 深色主题下的页面容器背景 */
.theme-dark .container,
.theme-dark .main-content,
.theme-dark .page-container,
.theme-dark .content-wrapper {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* 深色主题下的卡片和面板背景 */
.theme-dark .card,
.theme-dark .panel,
.theme-dark .modal,
.theme-dark .dialog {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
    border-color: #374151 !important;
}

.theme-dark .text-gray-900 {
    color: var(--color-text) !important;
}

.theme-dark .text-gray-600,
.theme-dark .text-gray-700 {
    color: var(--color-text-secondary) !important;
}

.theme-dark .border-gray-100,
.theme-dark .border-gray-200,
.theme-dark .border-gray-300 {
    border-color: var(--color-border) !important;
}

/* 深色主题下的输入框样式 */
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #FFFFFF !important;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: #9CA3AF !important;
}

/* 深色主题下的文字颜色 - 全面覆盖 */
.theme-dark .text-white {
    color: #FFFFFF !important;
}

.theme-dark .text-black {
    color: #FFFFFF !important;
}

.theme-dark .text-gray-50,
.theme-dark .text-gray-100,
.theme-dark .text-gray-200,
.theme-dark .text-gray-300,
.theme-dark .text-gray-400,
.theme-dark .text-gray-500,
.theme-dark .text-gray-600,
.theme-dark .text-gray-700,
.theme-dark .text-gray-800,
.theme-dark .text-gray-900 {
    color: #FFFFFF !important;
}

/* 深色主题下的基础文字颜色 */

/* 深色主题下的特殊背景颜色 */
.theme-dark .bg-yellow-50 {
    background-color: rgba(251, 191, 36, 0.1) !important;
}

.theme-dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.theme-dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.theme-dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.theme-dark .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

.theme-dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

/* 深色主题下的边框颜色 */
.theme-dark .border-yellow-200 {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.theme-dark .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.theme-dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.theme-dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.theme-dark .border-purple-200 {
    border-color: rgba(168, 85, 247, 0.3) !important;
}

.theme-dark .border-indigo-200 {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* 重新设置特殊颜色 */
.theme-dark .text-blue-600,
.theme-dark .text-blue-700,
.theme-dark .text-blue-500 {
    color: #60A5FA !important;
}

.theme-dark .text-green-600,
.theme-dark .text-green-700,
.theme-dark .text-green-500 {
    color: #34D399 !important;
}

.theme-dark .text-red-500,
.theme-dark .text-red-600,
.theme-dark .text-red-700 {
    color: #F87171 !important;
}

.theme-dark .text-yellow-500,
.theme-dark .text-yellow-600 {
    color: #FBBF24 !important;
}

.theme-dark .text-purple-500,
.theme-dark .text-purple-600 {
    color: #A78BFA !important;
}

/* 重复代码已在上面定义，这里移除 */

/* 深色主题下的按钮样式 */
.theme-dark .bg-blue-600 {
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

.theme-dark .bg-green-600 {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}

.theme-dark .bg-purple-600 {
    background-color: #8B5CF6 !important;
    color: #FFFFFF !important;
}

.theme-dark .bg-red-600 {
    background-color: #EF4444 !important;
    color: #FFFFFF !important;
}

.theme-dark .bg-yellow-600 {
    background-color: #F59E0B !important;
    color: #FFFFFF !important;
}

/* 深色主题下的按钮文字强制白色 */
.theme-dark button,
.theme-dark .btn {
    color: #FFFFFF !important;
}

/* 深色主题下的链接样式 */
.theme-dark a {
    color: var(--color-primary) !important;
}

.theme-dark a:hover {
    color: var(--color-accent) !important;
}

/* 深色主题下的标题样式 */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
    color: var(--color-text) !important;
}

/* 深色主题下的段落和文本 */
.theme-dark p,
.theme-dark span,
.theme-dark div,
.theme-dark label {
    color: inherit !important;
}

/* 深色主题下的图标颜色 */
.theme-dark .fas,
.theme-dark .far,
.theme-dark .fab,
.theme-dark i {
    color: inherit !important;
}

/* 深色主题下的Element Plus组件样式 */
.theme-dark .el-message {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.theme-dark .el-message--success {
    background-color: rgba(52, 211, 153, 0.1) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

.theme-dark .el-message--error {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #EF4444 !important;
    color: #EF4444 !important;
}

.theme-dark .el-message--warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #F59E0B !important;
    color: #F59E0B !important;
}

/* 深色主题下的表单元素 */
.theme-dark .el-input__inner,
.theme-dark .el-textarea__inner,
.theme-dark .el-select .el-input__inner {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.theme-dark .el-button {
    border-color: var(--color-border) !important;
}

.theme-dark .el-button--primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* 深色主题下的禁用状态文字 */
.theme-dark .disabled,
.theme-dark [disabled],
.theme-dark .el-button:disabled {
    color: var(--color-text-secondary) !important;
    opacity: 0.6;
}

/* 深色主题下的hover状态 */
.theme-dark .hover\:text-gray-700:hover {
    color: var(--color-text-secondary) !important;
}

.theme-dark .hover\:text-blue-700:hover {
    color: var(--color-accent) !important;
}

/* 深色主题下的focus状态 */
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* 深色主题下的选中状态 */
.theme-dark .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.theme-dark .border-purple-500 {
    border-color: #8B5CF6 !important;
}

.theme-dark .border-purple-300 {
    border-color: rgba(139, 92, 246, 0.5) !important;
}

/* 深色主题下的开关组件 */
.theme-dark .bg-gray-200 {
    background-color: var(--color-border) !important;
}

/* 深色主题下的分割线 */
.theme-dark .border-t {
    border-color: var(--color-border) !important;
}

/* 深色主题下的小文字 */
.theme-dark .text-sm {
    color: #FFFFFF !important;
}

/* 深色主题下的强制文字颜色覆盖 - 确保所有文字都清晰可见 */
.theme-dark p,
.theme-dark span,
.theme-dark div,
.theme-dark label,
.theme-dark li,
.theme-dark td,
.theme-dark th,
.theme-dark .text-xs,
.theme-dark .text-sm,
.theme-dark .text-base,
.theme-dark .text-lg,
.theme-dark .text-xl,
.theme-dark .text-2xl,
.theme-dark .text-3xl,
.theme-dark .text-4xl,
.theme-dark .text-5xl,
.theme-dark .text-6xl {
    color: #FFFFFF !important;
}

/* 深色主题下的表单标签 */
.theme-dark .form-label,
.theme-dark .el-form-item__label {
    color: #FFFFFF !important;
}

/* 深色主题下的卡片内容 */
.theme-dark .card-content,
.theme-dark .content {
    color: #FFFFFF !important;
}

/* 深色主题下的导航文字 */
.theme-dark .nav-item,
.theme-dark .menu-item {
    color: #FFFFFF !important;
}

/* 深色主题下的状态文字 */
.theme-dark .status-text,
.theme-dark .info-text {
    color: #E5E7EB !important;
}

/* 深色主题下的Vue应用根容器 */
.theme-dark #app,
.theme-dark .app,
.theme-dark .router-view {
    background-color: #111827 !important;
    color: #FFFFFF !important;
    min-height: 100vh !important;
}

/* 深色主题下的页面布局 */
.theme-dark .min-h-screen {
    background-color: #111827 !important;
}

.theme-dark .h-screen {
    background-color: #111827 !important;
}

/* 深色主题下的flex容器 */
.theme-dark .flex {
    background-color: inherit !important;
}

/* 深色主题下的网格容器 */
.theme-dark .grid {
    background-color: inherit !important;
}

/* 深色主题下的导航栏 */
.theme-dark nav {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
}

.theme-dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* 深色主题下的主要内容区域 */
.theme-dark main {
    background-color: #111827 !important;
}

.theme-dark .bg-gray-50 {
    background-color: #111827 !important;
}

/* 深色主题下的hover效果 */
.theme-dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* 极简黑色主题 - 参考现代设计 */
.theme-minimal-dark {
    --color-primary: #FFFFFF;
    --color-secondary: #A1A1AA;
    --color-background: #000000;
    --color-surface: #0A0A0A;
    --color-text: #FFFFFF;
    --color-text-secondary: #A1A1AA;
    --color-border: #1F1F1F;
    --color-accent: #3B82F6;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
}

.theme-minimal-dark body {
    background: #000000;
    color: var(--color-text);
}

.theme-minimal-dark .bg-white {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.theme-minimal-dark .text-gray-900 {
    color: var(--color-text) !important;
}

.theme-minimal-dark .text-gray-600,
.theme-minimal-dark .text-gray-700 {
    color: var(--color-text-secondary) !important;
}

/* 深蓝科技主题 */
.theme-tech-blue {
    --color-primary: #0EA5E9;
    --color-secondary: #38BDF8;
    --color-background: #0C1222;
    --color-surface: #1E293B;
    --color-text: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-border: #334155;
    --color-accent: #06B6D4;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
}

.theme-tech-blue body {
    background: linear-gradient(135deg, #0C1222 0%, #1E293B 50%, #0F172A 100%);
    color: var(--color-text);
}

.theme-tech-blue .bg-white {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 紫色渐变主题 */
.theme-purple-gradient {
    --color-primary: #8B5CF6;
    --color-secondary: #A78BFA;
    --color-background: #1A0B2E;
    --color-surface: #2D1B69;
    --color-text: #F3E8FF;
    --color-text-secondary: #C4B5FD;
    --color-border: #4C1D95;
    --color-accent: #F59E0B;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
}

.theme-purple-gradient body {
    background: linear-gradient(135deg, #1A0B2E 0%, #2D1B69 50%, #4C1D95 100%);
    color: var(--color-text);
}

.theme-purple-gradient .bg-white {
    background: rgba(45, 27, 105, 0.7) !important;
    border: 1px solid var(--color-border);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

/* 自然主题 */
.theme-nature {
    --color-primary: #059669;
    --color-secondary: #10B981;
    --color-background: #F0FDF4;
    --color-surface: #ECFDF5;
    --color-text: #064E3B;
    --color-text-secondary: #047857;
    --color-border: #BBF7D0;
    --color-accent: #F59E0B;
}

.theme-nature body {
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
}

/* 海洋主题 */
.theme-ocean {
    --color-primary: #0EA5E9;
    --color-secondary: #0284C7;
    --color-background: #F0F9FF;
    --color-surface: #E0F2FE;
    --color-text: #0C4A6E;
    --color-text-secondary: #0369A1;
    --color-border: #BAE6FD;
    --color-accent: #F97316;
}

.theme-ocean body {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
}

/* 日落主题 */
.theme-sunset {
    --color-primary: #F59E0B;
    --color-secondary: #F97316;
    --color-background: #FFF7ED;
    --color-surface: #FFEDD5;
    --color-text: #9A3412;
    --color-text-secondary: #C2410C;
    --color-border: #FED7AA;
    --color-accent: #DC2626;
}

.theme-sunset body {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}

/* 通用主题样式 */
.theme-dark nav,
.theme-minimal-dark nav,
.theme-tech-blue nav,
.theme-purple-gradient nav,
.theme-nature nav,
.theme-ocean nav,
.theme-sunset nav {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.theme-dark footer,
.theme-minimal-dark footer,
.theme-tech-blue footer,
.theme-purple-gradient footer,
.theme-nature footer,
.theme-ocean footer,
.theme-sunset footer {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

/* 按钮主题样式 */
.theme-dark .bg-blue-500,
.theme-artist .bg-blue-500,
.theme-nature .bg-green-500,
.theme-ocean .bg-blue-500,
.theme-sunset .bg-orange-500 {
    background-color: var(--color-primary) !important;
}

.theme-dark .hover\:bg-blue-600:hover,
.theme-artist .hover\:bg-blue-600:hover,
.theme-nature .hover\:bg-green-600:hover,
.theme-ocean .hover\:bg-blue-600:hover,
.theme-sunset .hover\:bg-orange-600:hover {
    background-color: var(--color-accent) !important;
}

/* 输入框主题样式 - 已在上面定义，这里移除重复 */

/* 卡片阴影效果 */
.theme-dark .shadow-lg,
.theme-artist .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* 过渡动画 */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 主题切换动画 */
body {
    transition: background 0.5s ease;
}

/* 响应式主题调整 */
@media (max-width: 768px) {
    .theme-dark .bg-white,
    .theme-artist .bg-white {
        margin: 0.5rem;
        border-radius: 0.75rem;
    }
}

/* 滚动条主题 */
.theme-dark ::-webkit-scrollbar,
.theme-artist ::-webkit-scrollbar {
    width: 8px;
}

.theme-dark ::-webkit-scrollbar-track,
.theme-artist ::-webkit-scrollbar-track {
    background: var(--color-surface);
}

.theme-dark ::-webkit-scrollbar-thumb,
.theme-artist ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover,
.theme-artist ::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* 深色主题下的文字颜色 - 黄色系 */
.theme-dark .text-yellow-800 {
    color: #FDE047 !important;
}

.theme-dark .text-blue-800 {
    color: #93C5FD !important;
}

.theme-dark .text-green-800 {
    color: #86EFAC !important;
}

.theme-dark .text-red-800 {
    color: #FCA5A5 !important;
}

.theme-dark .text-purple-800 {
    color: #C4B5FD !important;
}

.theme-dark .text-indigo-800 {
    color: #A5B4FC !important;
}

/* 深色主题下的小背景色 */
.theme-dark .bg-yellow-100 {
    background-color: rgba(251, 191, 36, 0.2) !important;
}

.theme-dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.theme-dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

.theme-dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.theme-dark .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.2) !important;
}

.theme-dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

/* 深色主题下的渐变背景 */
.theme-dark .bg-gradient-to-br {
    background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #374151 100%) !important;
}

/* 深色主题下的特殊文字颜色 */
.theme-dark .text-yellow-200 {
    color: #FEF3C7 !important;
}

.theme-dark .text-blue-200 {
    color: #DBEAFE !important;
}

.theme-dark .text-green-200 {
    color: #D1FAE5 !important;
}

.theme-dark .text-red-200 {
    color: #FECACA !important;
}

.theme-dark .text-purple-200 {
    color: #E9D5FF !important;
}

.theme-dark .text-indigo-200 {
    color: #E0E7FF !important;
}
