/**
 * 浅色主题覆盖样式
 * 所有颜色值使用CSS变量管理
 *
 * 重要说明:
 * 1. 本项目使用Tailwind CSS CDN,无法修改Tailwind源码
 * 2. 必须使用!important覆盖Tailwind的utility类(如.bg-*, .text-*等)
 * 3. 所有!important的使用都是必要的,用于确保浅色主题正确覆盖Tailwind默认样式
 * 4. CSS变量定义在theme.css中,本文件仅负责应用这些变量
 * 5. 为防止主题闪烁,主题类可能先应用到html元素,所有body.theme-light选择器也会匹配html.theme-light
 */

/* ==================== 防闪烁支持 ==================== */
/* 当主题类在html元素上时,将其样式应用到body */
html.theme-light body {
    /* 继承html元素的主题变量 */
}

/* ==================== 全局 ==================== */
body {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: var(--text-primary);
    background-attachment: fixed;
}

/* ==================== 卡片 ==================== */
.card-shadow {
    box-shadow: 0 8px 32px var(--card-shadow);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-shadow:hover {
    transform: translateY(-2px);
}
body.theme-light .card-shadow {
    backdrop-filter: var(--backdrop-blur);
}
body.theme-light .card-shadow:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ==================== 文字颜色 ==================== */
.text-white { color: var(--text-primary) !important; }
.text-gray-300 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-tertiary) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
button .text-white,
button.text-white { color: var(--text-white) !important; }

/* ==================== 背景颜色 ==================== */
.bg-gray-900 { background-color: var(--bg-solid) !important; }
.bg-gray-800 { background-color: var(--card-bg) !important; }
.bg-gray-700 { background-color: var(--card-bg-secondary) !important; }
.bg-gray-600 { background-color: var(--button-secondary-bg) !important; }

/* ==================== 边框颜色 ==================== */
.border-gray-800,
.border-gray-700,
.border-gray-600 { border-color: var(--card-border) !important; }

/* ==================== 强调色 ==================== */
.gold-text { color: var(--accent-primary) !important; }
.gold-bg { background-color: var(--accent-primary) !important; }

/* ==================== 模态框 ==================== */
.modal-backdrop {
    backdrop-filter: var(--backdrop-blur);
    background-color: var(--modal-backdrop);
}
body.theme-light .modal-content,
body.theme-light .slide-up {
    background-color: var(--modal-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--modal-border);
}

/* ==================== 浅色主题 ==================== */
body.theme-light .bg-gray-900 { background-color: var(--bg-gray-900) !important; color: var(--text-secondary) !important; }
body.theme-light .bg-gray-800 { background-color: var(--bg-gray-800) !important; color: var(--text-primary) !important; }
body.theme-light .bg-gray-700 { background-color: var(--bg-gray-700) !important; color: var(--text-secondary) !important; }
body.theme-light .bg-gray-600 { background-color: var(--bg-gray-100) !important; color: var(--text-secondary) !important; }

body.theme-light .text-white,
body.theme-light .text-lg.font-semibold { color: var(--text-primary) !important; }
body.theme-light .text-gray-300 { color: var(--text-secondary) !important; }
body.theme-light .text-gray-400,
body.theme-light .text-xs.text-gray-400 { color: var(--text-tertiary) !important; }
body.theme-light .text-gray-500,
body.theme-light .text-xs.text-gray-500 { color: var(--text-muted) !important; }

body.theme-light button .text-white,
body.theme-light button.text-white { color: var(--text-white) !important; }

body.theme-light .border-gray-600,
body.theme-light .border-gray-700,
body.theme-light .border-gray-800 { border-color: var(--border-gray-600) !important; }

body.theme-light input:not([type="checkbox"]):not([type="radio"]),
body.theme-light select,
body.theme-light textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}
body.theme-light input::placeholder,
body.theme-light select::placeholder,
body.theme-light textarea::placeholder { color: var(--input-placeholder) !important; }
body.theme-light select option { background-color: var(--card-bg-solid) !important; color: var(--text-primary) !important; }
body.theme-light label.text-gray-300 { color: var(--text-tertiary) !important; font-weight: 500; }

body.theme-light .bg-purple-600 { background-color: var(--color-purple-600) !important; color: var(--text-white) !important; }
body.theme-light .bg-purple-600:hover,
body.theme-light .hover\:bg-purple-700:hover { background-color: var(--color-purple-700) !important; }

body.theme-light .bg-gray-800.px-2\.5 {
    background-color: var(--bg-gray-100) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-gray-600);
}

body.theme-light .text-gray-500.cursor-not-allowed { color: var(--text-disabled) !important; }
body.theme-light .text-gray-400.hover\:text-white:hover,
body.theme-light .text-gray-400.hover\:text-gray-300:hover { color: var(--text-secondary) !important; }

/* ==================== 组件样式 ==================== */
body.theme-light .bg-gray-800.rounded-xl,
body.theme-light .bg-gray-700\/50,
body.theme-light .bg-gray-700\/30,
body.theme-light .bg-gray-700\/30.rounded-lg,
body.theme-light .bg-gray-800.rounded-xl.p-2\.5,
body.theme-light .bg-gray-800.rounded-xl.p-2 {
    background-color: var(--card-bg-secondary) !important;
    border: 1px solid var(--border-gray-600);
}
body.theme-light .bg-gradient-to-br,
body.theme-light .bg-gradient-to-r { color: var(--text-white) !important; }

body.theme-light .bg-green-500\/20 {
    background-color: var(--color-success-bg) !important;
    border-color: var(--color-success-border) !important;
    color: var(--color-success-text) !important;
}
body.theme-light .bg-red-500\/20 {
    background-color: var(--color-error-bg) !important;
    border-color: var(--color-error-border) !important;
    color: var(--color-error-text) !important;
}

body.theme-light .text-green-400,
body.theme-light .text-green-500 { color: var(--color-green-500) !important; }
body.theme-light .text-red-400,
body.theme-light .text-red-500,
body.theme-light .text-red-300 { color: var(--color-warning) !important; }
body.theme-light .text-blue-400,
body.theme-light .text-purple-400 { color: var(--accent-secondary) !important; }
body.theme-light .border-purple-500 { border-color: var(--color-purple-600) !important; }

body.theme-light button.bg-gray-700 {
    background-color: var(--bg-gray-100) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-gray-600);
}
body.theme-light button.bg-gray-700:hover { background-color: var(--border-gray-600) !important; }

body.theme-light header.bg-gray-900 {
    background-color: var(--bg-gray-800) !important;
    border-bottom-color: var(--border-gray-600) !important;
    backdrop-filter: blur(10px);
}

body.theme-light input:disabled,
body.theme-light select:disabled,
body.theme-light textarea:disabled {
    background-color: var(--input-bg-disabled) !important;
    color: var(--text-disabled) !important;
}
body.theme-light .placeholder-white\/50::placeholder { color: var(--input-placeholder) !important; }

/* ==================== 首页 ==================== */
body.theme-light .skeleton { background: var(--gradient-skeleton); background-size: 200% 100%; }
body.theme-light .grid.grid-cols-3 > div {
    background-color: var(--card-bg-secondary) !important;
    border: 1px solid var(--border-gray-600);
}

body.theme-light .text-blue-300 { color: var(--color-info) !important; }
body.theme-light .text-cyan-300 { color: var(--color-cyan-300) !important; }
body.theme-light .text-cyan-400 { color: var(--color-cyan-400) !important; }

body.theme-light .bg-gradient-to-r.from-purple-900\/50.to-blue-900\/50 {
    background: var(--gradient-purple-blue) !important;
    border-color: var(--gradient-purple-blue-border) !important;
}
body.theme-light .bg-gradient-to-r.from-purple-900\/50 .text-sm.font-bold,
body.theme-light .bg-gradient-to-r.from-purple-900\/50 #greetingText { color: var(--text-primary) !important; }
body.theme-light .bg-gradient-to-r.from-purple-900\/50 .text-xs.text-gray-400,
body.theme-light .bg-gradient-to-r.from-purple-900\/50 #usageDays,
body.theme-light .bg-gradient-to-r.from-purple-900\/50 #monthlySpending { color: var(--text-tertiary) !important; }
body.theme-light .bg-gradient-to-r.from-purple-900\/50 .gold-text,
body.theme-light .bg-gradient-to-r.from-purple-900\/50 #greetingUserName {
    color: var(--color-warning-text) !important;
    font-weight: 700;
}

body.theme-light button[onclick*="showRepayModal"] { background-color: var(--color-red-600) !important; }
body.theme-light button[onclick*="showRepayModal"]:hover { background-color: var(--color-red-700) !important; }
body.theme-light button[onclick*="showAdjustDebtModal"] { background-color: var(--color-warning-text) !important; }
body.theme-light button[onclick*="showAdjustDebtModal"]:hover { background-color: var(--color-orange-700) !important; }

body.theme-light .text-blue-200 { color: #1e40af !important; }
body.theme-light .text-blue-400 { color: var(--color-blue-600) !important; }
body.theme-light .text-red-200,
body.theme-light .text-red-400,
body.theme-light .text-red-400.number-animate { color: var(--color-red-600) !important; }
body.theme-light .text-orange-400.number-animate { color: var(--color-orange-600) !important; }

body.theme-light .border-blue-400\/40 { border-color: var(--color-info-border) !important; }
body.theme-light .border-red-400\/40 { border-color: var(--color-red-border) !important; }
body.theme-light .border-purple-700\/50 { border-color: var(--gradient-purple-blue-border) !important; }

/* ==================== 表单和按钮 ==================== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}
input::placeholder,
select::placeholder,
textarea::placeholder { color: var(--input-placeholder) !important; }
input:focus,
select:focus,
textarea:focus { border-color: var(--input-focus-border) !important; }

/* 浅色主题 - 金色文字优化 */
body.theme-light .text-yellow-400,
body.theme-light .gold-text {
    color: var(--accent-primary) !important;
}

/* 浅色主题 - 蓝色提示文字优化 */
body.theme-light .text-blue-200 {
    color: #1e40af !important; /* 深蓝色 */
}

/* 浅色主题 - 垫付选择框选中状态优化 */
body.theme-light label:has(input[type="radio"]:checked) {
    border-color: var(--accent-primary) !important;
    background-color: rgba(184, 134, 11, 0.15) !important;
}

body.theme-light label:has(input[type="radio"]:not(:checked)) {
    border-color: #cbd5e0 !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
}

body.theme-light label:has(input[type="radio"]):hover {
    background-color: rgba(184, 134, 11, 0.08) !important;
}

/* 浅色主题 - 记账按钮未选中状态优化 */
body.theme-light button.text-gray-400 {
    color: #4a5568 !important;
}

/* 浅色主题 - 橙色按钮优化 */
body.theme-light .bg-orange-500 {
    background-color: #ea580c !important;
}
body.theme-light .border-orange-500 {
    border-color: #ea580c !important;
}

/* 浅色主题 - 琥珀色文字优化（记账标签） */
body.theme-light .text-amber-300 {
    color: #d97706 !important; /* 深琥珀色 */
}

/* 浅色主题 - 黄色提示文字优化（转账模态框提示） */
body.theme-light .text-yellow-300 {
    color: #ca8a04 !important; /* 深黄色 */
}

/* 浅色主题 - 绿色文字优化（补货记录） */
body.theme-light .text-green-300 {
    color: #15803d !important; /* 深绿色 */
}

/* ==================== 欠款提醒优化 ==================== */
/* 浅色主题 - 欠款提醒背景优化 */
body.theme-light .bg-yellow-900\/50 {
    background-color: var(--color-debt-warning-bg) !important;
    border-color: var(--color-debt-warning-border) !important;
}

/* 浅色主题 - 欠款提醒文字优化 */
body.theme-light #debtWarning .text-yellow-400 {
    color: var(--color-debt-warning-title) !important;
    font-weight: 600;
}

body.theme-light #debtWarning .text-yellow-200 {
    color: var(--color-debt-warning-text) !important;
}

/* 浅色主题 - 欠款提醒图标优化 */
body.theme-light #debtWarning svg {
    color: var(--color-debt-warning-icon) !important;
}

/* ==================== 库存预警优化 ==================== */
/* 浅色主题 - 库存预警标题文字强制白色（排除按钮） */
body.theme-light #stockWarning .text-white:not(button):not(button *) {
    color: #ffffff !important;
}

body.theme-light #stockWarning .text-base:not(button):not(button *) {
    color: #ffffff !important;
}

/* 浅色主题 - 库存预警详情文字 */
body.theme-light #stockWarning #stockWarningText,
body.theme-light #stockWarning .text-red-50 {
    color: #fef2f2 !important;
}

/* 浅色主题 - 库存预警按钮样式 */
body.theme-light #stockWarning button {
    background-color: #ffffff !important;
}

body.theme-light #stockWarning button,
body.theme-light #stockWarning button * {
    color: #dc2626 !important;
}

body.theme-light #stockWarning button:hover {
    background-color: #fef2f2 !important;
}

body.theme-light #stockWarning button:active {
    background-color: #fee2e2 !important;
}

/* ==================== 统计页面标题优化 ==================== */
/* 浅色主题 - 数据汇总标题 */
body.theme-light #summary h4,
body.theme-light #summary #monthlySummaryTitle {
    color: #1e40af !important; /* 深蓝色 */
}

body.theme-light #summary .text-blue-400 {
    color: #1e40af !important; /* 深蓝色 */
}

/* 浅色主题 - 本月账单标题 */
body.theme-light #monthlyBill h4,
body.theme-light #monthlyBill .text-green-400 {
    color: #15803d !important; /* 深绿色 */
}

.bg-purple-600 { background-color: var(--button-primary-bg) !important; }
.hover\:bg-purple-700:hover { background-color: var(--button-primary-hover) !important; }
.bg-gray-600:hover,
.hover\:bg-gray-700:hover { background-color: var(--button-secondary-hover) !important; }

header,
.bottom-nav {
    background-color: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
}
body.theme-light header,
body.theme-light .bottom-nav { backdrop-filter: var(--backdrop-blur); }

body.theme-light .action-btn,
body.theme-light .btn-primary {
    background: var(--button-primary-bg);
}
body.theme-light .action-btn:hover,
body.theme-light .btn-primary:hover {
    background: var(--button-primary-hover);
}

/* ==================== 表格和滚动条 ==================== */
table { color: var(--text-primary); }
thead { background-color: var(--card-bg-secondary); color: var(--text-primary); }
tbody tr { border-color: var(--card-border); }
tbody tr:hover { background-color: var(--card-bg-hover); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--card-bg); }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==================== 页面特定样式 ==================== */

/* 库存页面 */
body.theme-light #content-inventory .bg-purple-900\/30 {
    background-color: var(--color-purple-100) !important;
    border-color: var(--color-purple-400) !important;
}

body.theme-light #content-inventory .text-purple-300,
body.theme-light #content-inventory .text-purple-400 {
    color: var(--color-purple-600) !important;
}

body.theme-light #content-inventory .bg-gray-800 {
    background-color: var(--card-bg-solid) !important;
    border: 1px solid var(--border-gray-200) !important;
}

body.theme-light #content-inventory thead tr {
    background-color: var(--bg-gray-50) !important;
}

body.theme-light #content-inventory thead th {
    color: var(--color-gray-700) !important;
    font-weight: 600 !important;
}

body.theme-light #content-inventory tbody tr {
    background-color: var(--card-bg-solid) !important;
    border-bottom: 1px solid var(--border-gray-100) !important;
}

body.theme-light #content-inventory tbody tr:hover {
    background-color: var(--bg-gray-50) !important;
}

body.theme-light #content-inventory tbody td {
    color: var(--color-gray-800) !important;
}

body.theme-light #content-inventory .bg-purple-600 {
    background-color: var(--color-purple-500) !important;
    color: var(--text-white) !important;
}

body.theme-light button[onclick*="showInventoryModal"] {
    color: var(--color-purple-600) !important;
}

body.theme-light button[onclick*="showInventoryModal"]:hover {
    color: var(--color-purple-700) !important;
}

/* 记录页面 */
body.theme-light #content-records button.bg-gray-700 {
    background-color: var(--bg-gray-100) !important;
    color: var(--color-gray-600) !important;
    border: 1px solid var(--border-gray-200) !important;
}

body.theme-light #content-records button.bg-gray-700:hover {
    background-color: var(--border-gray-200) !important;
    color: var(--color-gray-800) !important;
}

/* 确认按钮 - 统一使用金色 */
body.theme-light button.gold-bg {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

body.theme-light button.gold-bg:hover {
    background-color: var(--accent-secondary) !important;
}

/* 统计页面 */
body.theme-light #summary,
body.theme-light #monthlyBill {
    background: var(--card-bg-solid) !important;
    border-color: var(--border-gray-200) !important;
}

body.theme-light #summary .bg-gray-800\/50,
body.theme-light #summary .bg-gray-800,
body.theme-light #take,
body.theme-light #transfer,
body.theme-light #income,
body.theme-light #more,
body.theme-light .stats-scrollbar > div.bg-gray-700 {
    background-color: var(--card-bg-solid) !important;
    border: 1px solid var(--border-gray-200) !important;
}

body.theme-light #summary .bg-gray-700\/50,
body.theme-light #summary .bg-gray-700,
body.theme-light #monthlyBill .bg-gray-700\/50,
body.theme-light #monthlyBill .bg-gray-700 {
    background-color: var(--bg-gray-50) !important;
    border-color: var(--border-gray-200) !important;
}

body.theme-light #summary .bg-gray-600,
body.theme-light #monthlyBill .bg-gray-600 {
    background-color: var(--bg-gray-100) !important;
}

body.theme-light #summary .bg-orange-900\/30 {
    background-color: var(--color-warning-bg) !important;
    border-color: var(--color-warning-border) !important;
}

body.theme-light #monthlyBill .bg-yellow-900\/30 {
    background-color: var(--color-yellow-50) !important;
    border-color: var(--color-yellow-300) !important;
}

body.theme-light #monthlyBill .bg-green-900\/30 {
    background-color: var(--color-green-50) !important;
    border-color: var(--color-green-300) !important;
}

body.theme-light #summary .text-gray-400,
body.theme-light #monthlyBill .text-gray-400,
body.theme-light #summary .text-gray-500,
body.theme-light #monthlyBill .text-gray-500 {
    color: var(--color-gray-500) !important;
}

body.theme-light #summary .text-gray-300,
body.theme-light #monthlyBill .text-gray-300 {
    color: var(--color-gray-700) !important;
}

body.theme-light #summary .border-gray-700,
body.theme-light #summary .border-gray-600,
body.theme-light #monthlyBill .border-gray-700,
body.theme-light #monthlyBill .border-gray-600 {
    border-color: var(--border-gray-200) !important;
}

body.theme-light #summary .bg-yellow-900\/30 {
    background-color: var(--color-yellow-100) !important;
    color: var(--color-warning-text) !important;
}

body.theme-light #summary .text-yellow-400 {
    color: var(--color-warning-text) !important;
}

body.theme-light #summary .bg-gradient-to-r.from-blue-900\/50.to-purple-900\/50 {
    background: var(--gradient-blue-indigo) !important;
    border: 1px solid var(--color-info-border) !important;
}

body.theme-light #summary .bg-gradient-to-r .text-gray-300 {
    color: var(--color-gray-800) !important;
}

body.theme-light #summary .bg-gradient-to-r .text-gray-400 {
    color: var(--color-gray-600) !important;
}

/* 模态框按钮 */
body.theme-light #adjustDebtModal button.bg-gray-600 {
    background-color: var(--border-gray-200) !important;
    color: var(--color-gray-700) !important;
}

body.theme-light #adjustDebtModal button.bg-gray-600:hover {
    background-color: var(--bg-gray-200) !important;
}

/* 底部导航栏 */
body.theme-light .bottom-nav {
    background-color: var(--card-bg-solid) !important;
    border-top-color: var(--border-gray-200) !important;
}

body.theme-light .bottom-nav button.text-red-400 {
    color: var(--color-red-600) !important;
}

body.theme-light .bottom-nav button.text-red-400:hover {
    color: var(--color-red-700) !important;
}

body.theme-light .bottom-nav button.text-orange-400 {
    color: var(--color-orange-600) !important;
}

body.theme-light .bottom-nav button.text-orange-400:hover {
    color: var(--color-orange-700) !important;
}

body.theme-light .bottom-nav button.text-blue-400 {
    color: var(--color-blue-600) !important;
}

body.theme-light .bottom-nav button.text-blue-400:hover {
    color: var(--color-blue-700) !important;
}

body.theme-light .bottom-nav button.text-yellow-400 {
    color: var(--color-yellow-600) !important;
}

body.theme-light .bottom-nav button.text-yellow-400:hover {
    color: var(--color-yellow-700) !important;
}

/* 彩色按钮文字强制白色 */
body.theme-light .header-btn.bg-purple-600,
body.theme-light .header-btn.bg-blue-600,
body.theme-light .header-btn.bg-red-600,
body.theme-light button.bg-red-600.text-white,
body.theme-light button.bg-yellow-600.text-white,
body.theme-light button.bg-green-600.text-white,
body.theme-light button.bg-blue-600.text-white,
body.theme-light button.bg-purple-600.text-white,
body.theme-light button[class*="bg-gradient"].text-white,
body.theme-light button[onclick*="Repay"],
body.theme-light button[onclick*="Debt"] {
    color: var(--text-white) !important;
}

/* ==================== 响应式调整 ==================== */
@media (max-width: 640px) {
    body.theme-light .card-shadow {
        box-shadow: var(--shadow-md);
    }
}