/*
 * 暗黑模式补丁 CSS
 * 在现有HTML文件中引入此文件，快速实现暗黑模式
 * 使用方法：在 common-styles.css 之后添加 <link rel="stylesheet" href="dark-mode-patch.css">
 */

/* 强制覆盖白色背景 */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.container {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.header,
.main-content,
.content {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* 强制修复所有白色背景元素的文字颜色 */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color:#ffffff"],
[style*="background:#ffffff"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* 特定类名的白色背景修复 */
.tool-card,
.control-group,
.preview-panel,
.setting-group,
.stat-item,
.image-item,
.gift-card,
.history-item,
.custom-food-item,
.round-result,
.result-item,
.info-card,
.example-code,
.font-card,
.category-card,
.preview-text,
.modal-content,
.category-btn,
.option-btn,
.choice-btn,
.filter-btn {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 修复所有带-btn后缀的按钮类 */
[class*="-btn"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.start-btn):not(.calculate-btn) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[class*="-btn"].active {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* 卡片和容器 */
.calculator,
.calculator-section,
.input-group,
.result-section,
.history-section,
.tips-section,
.comparison-section,
.options-section,
.payment-schedule,
.chart-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* 次级背景 */
.input-field,
.result-card,
.stat-card,
.detail-item,
.comparison-item,
.tip-item,
.option-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* 输入框 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* 按钮 - 保留渐变的转为紫色 */
.btn,
.calculate-btn,
.action-btn,
button[type="button"],
button[type="submit"] {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
}

.btn:hover,
.calculate-btn:hover,
.action-btn:hover {
    background: var(--accent-light) !important;
}

.btn-secondary,
.quick-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover,
.quick-btn:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--accent) !important;
}

/* 文字颜色 */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary) !important;
}

p,
span,
div,
li {
    color: var(--text-primary);
}

label,
.field-label,
.input-title,
.options-title,
.history-title,
.tips-title,
.comparison-title,
.chart-title,
.result-title {
    color: var(--text-secondary) !important;
}

.subtitle,
.page-desc,
.description,
.hint,
.detail-label,
.stat-label,
.result-label,
.comparison-desc {
    color: var(--text-secondary) !important;
}

.text-muted,
.history-item {
    color: var(--text-muted) !important;
}

/* 结果值 */
.result-value,
.stat-number,
.detail-value,
.comparison-value,
.result-main {
    color: var(--accent) !important;
}

/* 表格 */
table {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

th {
    background: var(--accent) !important;
    color: white !important;
}

td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

tr:hover {
    background: var(--bg-card-hover) !important;
}

/* 标签页 */
.calculator-tabs,
.tabs,
.tab-buttons {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.tab-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.tab-btn.active {
    background: var(--accent) !important;
    color: white !important;
}

.tab-btn:hover:not(.active) {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* 语言切换按钮 */
.lang-switch {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.lang-switch:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--accent) !important;
}

/* 特殊信息框 */
.today-info,
.info-box {
    background: var(--accent) !important;
    color: white !important;
}

/* 边框 */
.payment-option,
.option-card {
    border-color: var(--border-color) !important;
}

.payment-option.active,
.option-card.active {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

/* 移除所有阴影 */
* {
    box-shadow: none !important;
}

/* 保留特殊组件的样式 */
.display,
canvas,
.game-canvas,
.preview-area {
    /* 这些组件保持原样 */
    background: inherit;
    color: inherit;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* 额外的白色背景修复 - 针对特定页面 */
.card[style*="background: white"],
.card[style*="background:#fff"] {
    background: var(--bg-card) !important;
}

/* 确保所有文本元素在暗色背景上可见 */
.container *,
.card *,
.tool-card *,
.control-group *,
.setting-group * {
    color: var(--text-primary);
}

/* 标题和标签保持次要颜色 */
.container label,
.container .label,
.container .control-label,
.card label {
    color: var(--text-secondary) !important;
}

/* 输入框内的文字 */
.container input,
.container textarea,
.container select,
.card input,
.card textarea,
.card select {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

/* 按钮文字 */
.container button,
.card button {
    color: white !important;
}

/* Canvas和特殊元素保持白色背景但确保周围文字可见 */
canvas {
    background: white !important;
}

.canvas-wrapper,
.canvas-container {
    background: var(--bg-secondary) !important;
    padding: 16px;
    border-radius: 12px;
}

/* 工具栏和控制面板 */
.toolbar,
.control-panel,
.tools-panel {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 确保链接可见 */
a {
    color: var(--accent-light);
}

a:hover {
    color: var(--accent);
}

/* 修复汉字笔画动画页面的示例字符 */
.sample-char {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.sample-char:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--accent) !important;
}

/* 修复字符显示区域 */
.char-display {
    background: #f8f9fa !important;
    color: #000 !important;
}

/* 修复笔画信息区域 */
.stroke-info {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.stroke-count {
    color: var(--text-primary) !important;
}

.current-stroke {
    color: var(--accent) !important;
}

/* 修复输入框 */
.char-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.char-input:focus {
    border-color: var(--accent) !important;
}

/* 修复错误消息 */
.error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--error) !important;
    border: 1px solid var(--error) !important;
}

/* 修复数学练习页面的按钮 */
.operation-btn,
.difficulty-btn {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.operation-btn:hover,
.difficulty-btn:hover {
    border-color: var(--accent) !important;
    background: var(--bg-card-hover) !important;
}

.operation-btn.active {
    border-color: var(--accent) !important;
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
}

.difficulty-btn.active {
    border-color: var(--success) !important;
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--success) !important;
}

/* 修复设置组标题 */
.setting-group h4 {
    color: var(--text-primary) !important;
}

/* 修复范围标签 */
.range-label {
    color: var(--text-secondary) !important;
}

/* 修复输入字段 */
.input-field {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.input-field:focus {
    border-color: var(--accent) !important;
}