/* ==========================================
   夜间模式样式 - 支持动态暗度调节、主题色调、颜色暗度、主题颜色
   ==========================================
   CSS变量定义（由 dark-mode.js 动态设置）：
   --dark-bg: 基础背景色（根据主题颜色动态调整）
   --dark-card-bg: 卡片/内容背景色（根据主题颜色动态调整）
   --dark-text: 主要文字色
   --dark-text-secondary: 次要文字色
   --dark-text-active: 激活文字色
   --dark-border: 边框色
   --dark-input-bg: 输入框背景色
   --dark-color-brightness: 彩色元素亮度 (0.3-1.0)
   --dark-color-saturation: 彩色元素饱和度 (0.5-1.0)
   --dark-theme-hue: 主题色调旋转角度 (deg)
   --dark-theme-color-r: 主题颜色RGB值
   --dark-theme-color-g: 主题颜色RGB值
   --dark-theme-color-b: 主题颜色RGB值

   主题颜色选项：
   - yellow: 暗黄色背景（适合温暖氛围）
   - brown: 暗褐色背景（适合复古风格）
   - chocolate: 暗棕色背景（适合沉稳风格）
   - black: 纯黑色背景（最深的背景）
   - gray: 暗灰色背景（默认，最平衡）
   ========================================== */

/* ==========================================
   1. 基础灰度暗度（由滑块控制）
   ========================================== */

/* 夜间模式下文字变亮灰色 */
html.dark body {
    color: var(--dark-text, #d0d0d0) !important;
}

/* 夜间模式下背景色 - 白色变为深灰色 */
html.dark body,
html.dark .bg-white {
    background-color: var(--dark-bg, #1a1a1a) !important;
}

/* 夜间模式下背景色 - 白色变成深灰色 */
html.dark .bg-white,
html.dark [style*="background:#ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"] {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* 夜间模式下背景色 - 灰色变成更深的灰色 */
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--dark-bg, #0f0f0f) !important;
}

html.dark .bg-gray-200 {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

html.dark .bg-gray-300 {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
}

/* ==========================================
   2. 主题色调 + 颜色暗度（动态滤镜）
   使用 CSS 变量让色调旋转和亮度/饱和度跟随用户设置动态变化
   ========================================== */

/* 所有彩色元素 - 主题色调（hue-rotate）+ 颜色暗度（brightness/saturation） */
html.dark [class*="bg-"]:not(.bg-white):not(.bg-gray-50):not(.bg-gray-100):not(.bg-gray-200):not(.bg-gray-300):not(.bg-transparent):not(.bg-black),
html.dark [class*="text-"]:not(.text-white):not(.text-gray-50):not(.text-gray-100):not(.text-gray-200):not(.text-gray-300):not(.text-black),
html.dark [class*="border-"]:not(.border-white):not(.border-gray-50):not(.border-gray-100):not(.border-gray-200):not(.border-transparent),
html.dark [style*="color:"]:not([style*="color: white"]):not([style*="color:white"]):not([style*="color: black"]):not([style*="color:black"]),
html.dark [style*="background-color:"]:not([style*="background-color: #fff"]):not([style*="background-color:#fff"]):not([style*="background-color: white"]):not([style*="background-color:white"]):not([style*="background-color: black"]):not([style*="background-color:black"]) {
    filter: hue-rotate(var(--dark-theme-hue, 0deg)) brightness(var(--dark-color-brightness, 0.6)) saturate(var(--dark-color-saturation, 0.7)) !important;
}

/* 主要品牌色 primary 蓝色保持色调但变暗 */
html.dark .bg-primary {
    background-color: #1e3a5f !important;
}
html.dark .text-primary {
    color: #6a8aaf !important;
}

/* 工具栏按钮 - 保持色调但变暗 */
html.dark .tool-btn {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
    color: var(--dark-text, #d0d0d0) !important;
}
html.dark .tool-btn:hover {
    background-color: var(--dark-bg, #1a1a1a) !important;
}

/* 选中 / 激活状态：变黑色 */
html.dark .tool-btn.active,
html.dark .color-btn.active,
html.dark .active,
html.dark [class*="-active"] {
    background-color: var(--dark-bg, #0f0f0f) !important;
    color: var(--dark-text-active, #e0e0e0) !important;
    border-color: var(--dark-border, #4a4a4a) !important;
}
html.dark .color-btn.active {
    border-color: var(--dark-border, #4a4a4a) !important;
}
html.dark .color-btn.active[data-color] {
    background-color: var(--dark-bg, #0f0f0f) !important;
}
/* 白色色块按钮：文字变灰 */
html.dark .color-btn[data-color="#ffffff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"] {
    color: #303030 !important;
    background-color: var(--dark-card-bg, #2a2a2a) !important;
}
html.dark .color-btn.active[data-color="#ffffff"] {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
    border-color: var(--dark-border, #4a4a4a) !important;
}

/* 浅色背景统一变暗（继承上面的动态滤镜） */

/* 浅灰色背景统一变暗 */
html.dark [style*="background:#f0f0f0"],
html.dark [style*="background-color:#f0f0f0"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background-color:#e5e7eb"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background-color:#f3f4f6"] {
    color: var(--dark-text, #d0d0d0) !important;
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* 额外暗化：所有浅色系的 Tailwind 背景类 */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* Tailwind 蓝色系 - 保持色调变暗（动态滤镜会自动应用） */

/* PDF 区域在 dark mode 下使用更暗的背景 */
html.dark #pdf-container,
html.dark .bg-white.shadow-lg,
html.dark .shadow-lg.bg-white {
    background-color: var(--dark-bg, #0f0f0f) !important;
}

/* 夜间模式下所有导航栏变成深灰色 */
html.dark header,
html.dark nav,
html.dark .navbar,
html.dark .nav-container,
html.dark [class*="nav-"],
html.dark .mobile-nav {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
    border-bottom: 1px solid var(--dark-border, #2a2a2a) !important;
}

/* Logo 图标 */
html.dark img[src*="Logo.PNG"],
html.dark img[src*="logo.png"],
html.dark .logo {
    opacity: 0.9 !important;
}

/* 通用图标：降低亮度（避免双重滤镜） */
html.dark img[src*=".gif"],
html.dark img[src*=".png"],
html.dark img[src*=".svg"] {
    opacity: 0.85 !important;
}

/* Font Awesome 图标：使用亮灰色（白色背景色会被动态滤镜捕获） */
html.dark .icon,
html.dark [class*="icon-"],
html.dark i[class^="fa-"],
html.dark i.fa,
html.dark .fa {
    color: var(--dark-text, #d0d0d0) !important;
    opacity: 0.9 !important;
}

/* 卡片内的图标 */
html.dark .bg-blue-50 .fa,
html.dark .bg-green-50 .fa,
html.dark .bg-red-50 .fa,
html.dark .bg-yellow-50 .fa,
html.dark .bg-purple-50 .fa,
html.dark .bg-pink-50 .fa,
html.dark .bg-indigo-50 .fa,
html.dark .bg-cyan-50 .fa,
html.dark .bg-teal-50 .fa,
html.dark .bg-orange-50 .fa {
    color: var(--dark-text, #d0d0d0) !important;
    opacity: 1 !important;
}

/* 按钮边框：深色模式下使用深灰边框 */
html.dark button,
html.dark a.button,
html.dark .btn,
html.dark [class*="btn-"],
html.dark [class*="-btn"],
html.dark .tool-btn,
html.dark .rounded-md,
html.dark .rounded-lg,
html.dark .rounded {
    border: 1px solid var(--dark-border, #3a3a3a) !important;
}

/* 浅色边框的元素 */
html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #f0f0f0"],
html.dark [style*="border:1px solid #f0f0f0"],
html.dark [style*="border: 1px solid #d1d5db"],
html.dark [style*="border:1px solid #d1d5db"],
html.dark [style*="border: 1px solid #d0d8ff"],
html.dark [style*="border:1px solid #d0d8ff"] {
    border-color: var(--dark-border, #3a3a3a) !important;
}

/* 通用 input/textarea */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--dark-input-bg, #1a1a1a) !important;
    color: var(--dark-text, #d0d0d0) !important;
    border-color: var(--dark-border, #3a3a3a) !important;
}