/* 深色模式全局覆盖（最小侵入实现）
   目标：为未成对定义的浅色类提供暗色等价，以保证切换时整体一致性。
   注意：尽量保持选择器简洁，并使用 !important 保证覆盖 Tailwind 实用类。 */

/* 基础：使用主题变量统一页面前景/背景（浅色变量在 :root，深色在 .dark 中覆盖） */
html, body {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

/* 常见容器/卡片默认浅色背景在暗色下统一变更 */
.dark .bg-white { background-color: rgb(30 41 59) !important; } /* slate-800 近似 */
.dark .bg-slate-50 { background-color: rgb(30 41 59) !important; }
.dark .bg-slate-100 { background-color: rgb(30 41 59) !important; }

/* 边界统一暗化 */
.dark .border-slate-200 { border-color: rgb(71 85 105) !important; }  /* slate-600 */
.dark .border-slate-300 { border-color: rgb(71 85 105) !important; }

/* 文本在深色背景下保持可读性 */
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700 { color: rgb(248 250 252) !important; } /* slate-50 */

/* 输入占位符在深色模式下更柔和 */
.dark .placeholder\:text-slate-400::placeholder { color: rgb(148 163 184) !important; } /* slate-400 */

/* 图表容器底色（如存在） */
.dark .chart-container { background-color: rgb(30 41 59) !important; }
/* 实际使用的图表容器类（修正）：在暗色模式下统一为深色，并弱化边框 */
.dark .chart-container-echarts { 
  background-color: rgb(30 41 59) !important; /* slate-800 */
  border-color: rgb(71 85 105) !important;     /* slate-600 */
}

/* 细节：内阴影在暗色更明显 */
.dark .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.45) !important; }

/* 结果容器在深色下强制为暗色玻璃态，避免父级仍为纯白 */
.dark .result-section { background: var(--glass-bg) !important; color: var(--text-primary) !important; }

/* 调试面板卡片与内容（修复未随暗色切换的问题） */
.dark .debug-card {
  background-color: var(--bg-surface-secondary) !important; /* slate-800 */
  border-color: var(--border-primary) !important;           /* slate-600 */
  color: var(--text-primary) !important;                    /* slate-50 */
}
.dark .card-header {
  background: linear-gradient(135deg, rgb(51 65 85) 0%, rgb(30 41 59) 100%) !important; /* slate-700 → slate-800 */
  border-bottom-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
.dark .card-content {
  background-color: var(--bg-surface) !important; /* slate-900 */
}

/* 调试表格与容器（暗色配色） */
.dark .verification-table-responsive { border-color: var(--border-primary) !important; }
.dark .debug-table-improved { background-color: var(--bg-surface-secondary) !important; color: var(--text-primary) !important; }
.dark .debug-table-improved th {
  background: linear-gradient(135deg, rgb(71 85 105) 0%, rgb(51 65 85) 100%) !important; /* slate-600 → slate-700 */
  color: rgb(248 250 252) !important; /* slate-50 */
}
.dark .debug-table-improved td { border-bottom-color: rgb(51 65 85) !important; }
.dark .debug-table-improved tbody tr:hover { background-color: rgb(51 65 85) !important; }
.dark .formula-cell {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: rgb(248 250 252) !important;         /* slate-50 */
}

/* -----------------------------------
   彩色信息块/提示块在深色模式的柔化处理
   说明：页面中大量使用 *-50 背景 + *-400 边框 + *-700 文字的提示卡片，
         在深色主题下会显得过亮、对比失衡。这里给出统一的深色替代。
         仅在 .dark 下生效，尽量不影响浅色模式视觉。
------------------------------------ */
/* Blue 系 */
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12) !important; }
.dark .text-blue-600 { color: rgb(147, 197, 253) !important; }
.dark .text-blue-700,
.dark .text-blue-800 { color: rgb(147, 197, 253) !important; }
.dark .border-blue-200,
.dark .border-blue-300,
.dark .border-blue-400 { border-color: rgb(59, 130, 246) !important; }

/* Orange/Amber 系（项目中多用 orange） */
.dark .bg-orange-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .bg-orange-100 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .text-orange-700,
.dark .text-orange-800 { color: rgb(253, 186, 116) !important; }
.dark .border-orange-200,
.dark .border-orange-300,
.dark .border-orange-400 { border-color: rgb(245, 158, 11) !important; }

/* Amber 专用 */
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .border-amber-200,
.dark .border-amber-300,
.dark .border-amber-400 { border-color: rgb(245, 158, 11) !important; }
.dark .text-amber-700,
.dark .text-amber-800 { color: rgb(253, 230, 138) !important; }

/* Yellow 系 */
.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; }
.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.12) !important; }
.dark .text-yellow-700,
.dark .text-yellow-800 { color: rgb(253, 224, 71) !important; }
.dark .border-yellow-200,
.dark .border-yellow-300,
.dark .border-yellow-400 { border-color: rgb(234, 179, 8) !important; }

/* Green 系 */
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.12) !important; }
.dark .text-green-700,
.dark .text-green-800 { color: rgb(134, 239, 172) !important; }
.dark .border-green-200,
.dark .border-green-300,
.dark .border-green-400 { border-color: rgb(34, 197, 94) !important; }

/* Emerald（用于 from/to-emerald-50 的卡片） */
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .border-emerald-200,
.dark .border-emerald-300,
.dark .border-emerald-400 { border-color: rgb(16, 185, 129) !important; }

/* Red 系 */
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .text-red-700,
.dark .text-red-800 { color: rgb(252, 165, 165) !important; }
.dark .border-red-200,
.dark .border-red-300,
.dark .border-red-400 { border-color: rgb(239, 68, 68) !important; }

/* Indigo 系 */
.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.12) !important; }
.dark .text-indigo-700,
.dark .text-indigo-800 { color: rgb(199, 210, 254) !important; }
.dark .border-indigo-200,
.dark .border-indigo-300,
.dark .border-indigo-400 { border-color: rgb(99, 102, 241) !important; }

/* Purple 系 */
.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; }
.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.12) !important; }
.dark .text-purple-700,
.dark .text-purple-800 { color: rgb(216, 180, 254) !important; }
.dark .border-purple-200,
.dark .border-purple-300,
.dark .border-purple-400 { border-color: rgb(168, 85, 247) !important; }

/* 提示卡片内部的浅色白底二级容器在深色下统一暗化 */
.dark .strategy-guidance-section .bg-white { background-color: rgb(30 41 59) !important; }
.dark .strategy-guidance-section .border-slate-200 { border-color: rgb(71 85 105) !important; }

/* 策略引导区域外层容器在暗色模式下的背景与边框（修复“外圈不随主题切换”问题） */
.dark .strategy-guidance-section {
  background-color: rgb(30 41 59) !important;
  border-color: rgb(71 85 105) !important;
  color: rgb(248 250 252) !important;
}

/* 策略引导组件（用户反馈最突兀部分）定向强化覆盖 */
.dark .strategy-guidance-section .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .strategy-guidance-section .border-blue-400 { border-color: rgb(59, 130, 246) !important; }
.dark .strategy-guidance-section .text-blue-700,
.dark .strategy-guidance-section .text-blue-600 { color: rgb(147, 197, 253) !important; }
.dark .strategy-guidance-section .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .strategy-guidance-section .border-amber-200 { border-color: rgb(245, 158, 11) !important; }
.dark .strategy-guidance-section .text-amber-800,
.dark .strategy-guidance-section .text-amber-700 { color: rgb(253, 230, 138) !important; }

/* -----------------------------------
   渐变色 from-/to- 类在深色模式的覆盖
   Tailwind 渐变通过 --tw-gradient-from / --tw-gradient-to 控制，
   这里在 .dark 下用半透明暗色替代，保证视觉平衡。
------------------------------------ */
/* Blue */
.dark .from-blue-50 { --tw-gradient-from: rgba(59, 130, 246, 0.15) !important; --tw-gradient-to: rgba(59, 130, 246, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-blue-100 { --tw-gradient-to: rgba(59, 130, 246, 0.12) !important; }
/* Red */
.dark .from-red-50 { --tw-gradient-from: rgba(239, 68, 68, 0.15) !important; --tw-gradient-to: rgba(239, 68, 68, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-red-100 { --tw-gradient-to: rgba(239, 68, 68, 0.12) !important; }
/* Green & Emerald */
.dark .from-green-50 { --tw-gradient-from: rgba(34, 197, 94, 0.15) !important; --tw-gradient-to: rgba(34, 197, 94, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-green-100 { --tw-gradient-to: rgba(34, 197, 94, 0.12) !important; }
.dark .to-emerald-50 { --tw-gradient-to: rgba(16, 185, 129, 0.12) !important; }
/* Purple */
.dark .from-purple-50 { --tw-gradient-from: rgba(168, 85, 247, 0.15) !important; --tw-gradient-to: rgba(168, 85, 247, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-purple-100 { --tw-gradient-to: rgba(168, 85, 247, 0.12) !important; }
/* Yellow */
.dark .from-yellow-50 { --tw-gradient-from: rgba(234, 179, 8, 0.15) !important; --tw-gradient-to: rgba(234, 179, 8, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-yellow-100 { --tw-gradient-to: rgba(234, 179, 8, 0.12) !important; }
/* Orange & Amber */
.dark .from-orange-50, .dark .from-amber-50 { --tw-gradient-from: rgba(245, 158, 11, 0.15) !important; --tw-gradient-to: rgba(245, 158, 11, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-orange-100, .dark .to-amber-100 { --tw-gradient-to: rgba(245, 158, 11, 0.12) !important; }