/* -----------------------------------------------------
 * 🌙 山风主题：暗黑模式扩展 (Dark Mode System)
 * ----------------------------------------------------- */

[data-theme='dark'] {
    --sf-bg-body: #0d0d0d;
    --sf-bg-card: #1c1c1e;
    --sf-text-main: #f5f5f7;
    --sf-text-muted: #a1a1a6;
    --sf-border-color: #333336;
    --sf-accent-red: #ff453a;
}

[data-theme='dark'] body { background-color: var(--sf-bg-body); color: var(--sf-text-main); }

/* 1. 强制覆盖导航栏文字颜色 */
[data-theme='dark'] .main-navigation a {
    color: var(--sf-text-main) !important;
}

/* 2. 导航栏鼠标悬浮效果优化 */
[data-theme='dark'] .main-navigation a:hover,
[data-theme='dark'] .main-navigation .current-menu-item > a {
    background-color: #2c2c2e !important;
    color: #fff !important;
}

/* 3. 修复 Header 操作区图标颜色 (搜索按钮、暗黑切换按钮) */
[data-theme='dark'] .action-btn {
    color: var(--sf-text-main) !important;
}

/* 4. 修复左侧菜单导航颜色 */
[data-theme='dark'] .nav-menu .sf-left-menu-list a {
    color: var(--sf-text-muted) !important;
}

[data-theme='dark'] .nav-menu .sf-left-menu-list a:hover,
[data-theme='dark'] .nav-menu .sf-left-menu-list li.current-menu-item > a {
    color: var(--sf-text-main) !important;
}

/* 5. 修复 Header 背景颜色，防止变黑后看不清 */
[data-theme='dark'] .site-header {
    background-color: rgba(13, 13, 13, 0.95) !important;
}

/* 6. 其他基础组件适配 */
[data-theme='dark'] .sf-post-title a { color: var(--sf-text-main); }
[data-theme='dark'] .sf-post-excerpt { color: var(--sf-text-muted); }



/* -----------------------------------------------------
 * 🌙 全局边框与分割线暗黑模式补丁 (强制覆盖所有类型)
 * ----------------------------------------------------- */
[data-theme='dark'] {
    --sf-border-color: #333336 !important;
}

/* 覆盖所有实线、虚线边框 */
[data-theme='dark'] .sf-post-item,
[data-theme='dark'] .sf-sticky-line,
[data-theme='dark'] .sf-widget-box,
[data-theme='dark'] .site-header.is-scrolled,
[data-theme='dark'] .sf-highlight-card-box .highlight-text-wrap,
[data-theme='dark'] * {
    /* 这里不仅覆盖边框，还要确保所有边框线都使用我们的暗黑变量 */
    border-color: var(--sf-border-color) !important;
}

/* 针对某些特定的实线边框类名进行补强 */
[data-theme='dark'] .sf-post-item {
    border-bottom: 1px solid var(--sf-border-color) !important;
}

[data-theme='dark'] .sf-highlight-card-box .highlight-text-wrap {
    border-bottom: 1px solid var(--sf-border-color) !important;
}

/* -----------------------------------------------------
 * 🌙 山风主题：Bento 首页暗黑模式适配 (整理优化版)
 * ----------------------------------------------------- */
[data-theme='dark'] {
    --sf-bg-card: #1c1c1e;
    --sf-border-color: #333336;
}

/* 1. 卡片基础框架重置 */
[data-theme='dark'] .sf-bento-card {
    background-color: var(--sf-bg-card) !important;
    border-color: var(--sf-border-color) !important;
}

/* 2. 核心文本颜色统一 (利用通用选择器处理硬编码) */
[data-theme='dark'] .sf-bento-grid * {
    color: var(--sf-text-main) !important;
}

/* 3. 辅助文本层级优化 (针对性降低亮度) */
[data-theme='dark'] .sf-bento-grid .bento-text-inner p,
[data-theme='dark'] .sf-bento-grid .bento-random-card .random-text-stage p,
[data-theme='dark'] .sf-bento-grid .bento-icon-row-card .card-text-box p,
[data-theme='dark'] .bento-img-text .text-part p {
    color: var(--sf-text-muted) !important;
}

/* 4. 组件特殊适配 */
/* 日历组件：保持 Badge 白色以确保对比度，文字设为深色 */
[data-theme='dark'] .calendar-badge {
    background-color: #ffffff !important;
}
[data-theme='dark'] .calendar-badge .day {
    color: #1d1e20 !important;
}

/* 图标组件背景色优化 */
[data-theme='dark'] .bento-icon-row-card .card-icon-box {
    background-color: #333 !important;
}

/* 强制重置可能存在的异常背景卡片 */
[data-theme='dark'] .bento-text-only,
[data-theme='dark'] .bento-split-x,
[data-theme='dark'] .bento-random-card {
    background-color: var(--sf-bg-card) !important;
}

/* 🌙 强制修复：日历卡片背景在暗黑模式下不再是灰白色 */
[data-theme='dark'] .sf-bento-grid .bento-side-col:first-child .bento-calendar-box {
    background-color: var(--sf-bg-card) !important;
}

/* 🌙 强制修复：其他可能会残留灰白背景的子容器 */
[data-theme='dark'] .sf-bento-grid .bento-side-col:first-child .bento-calendar-box .text-part {
    background-color: transparent !important;
}

/* -----------------------------------------------------
 * 🌙 山风主题：文章页 (Single) 暗黑模式深度适配
 * ----------------------------------------------------- */

[data-theme='dark'] body.single {
    background-color: var(--sf-bg-body) !important;
}

/* 1. 修复文章侧边栏背景 */
[data-theme='dark'] .sf-single-sidebar {
    background-color: var(--sf-bg-card) !important;
}

/* 2. 修复单页文章标题区背景 (Hero部分) */
[data-theme='dark'] .sf-single-header-sspai.has-hero .sf-single-title-box {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
}

/* 3. 修复文章内容区域文字颜色 */
[data-theme='dark'] .sf-single-content {
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-single-content blockquote {
    background-color: #1c1c1e !important;
    color: var(--sf-text-muted) !important;
}

/* 4. 修复版权提示框背景 */
[data-theme='dark'] .sf-copyright-notice {
    background: #1c1c1e !important;
}

/* 5. 修复评论区背景 */
[data-theme='dark'] .sf-comment-list > li.comment,
[data-theme='dark'] .sf-must-login-box {
    background-color: var(--sf-bg-card) !important;
    border-color: var(--sf-border-color) !important;
}

[data-theme='dark'] .comment-respond textarea,
[data-theme='dark'] .comment-respond input[type="text"] {
    background: #2c2c2e !important;
    color: var(--sf-text-main) !important;
}

/* 6. 修复底部导航栏 */
[data-theme='dark'] .sf-post-navigation-v2 {
    border-bottom-color: var(--sf-border-color) !important;
}

[data-theme='dark'] .sf-explore-more {
    background: #1c1c1e !important;
}

/* 🌙 修复文章页 Header 暗黑适配 */
[data-theme='dark'] body.single .site-header {
    background-color: rgba(13, 13, 13, 0.95) !important;
    border-bottom: 1px solid var(--sf-border-color) !important;
}

[data-theme='dark'] body.single .site-header.is-scrolled {
    background-color: rgba(13, 13, 13, 0.95) !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

/* 🌙 修复文章页底部 Footer 暗黑适配 */
[data-theme='dark'] .sf-inner-page-footer {
    background-color: var(--sf-bg-body) !important;
    border-top: 1px solid var(--sf-border-color) !important;
}

[data-theme='dark'] .footer-nav-links a,
[data-theme='dark'] .sf-bottom-meta-box {
    color: var(--sf-text-muted) !important;
}

[data-theme='dark'] .footer-nav-links a:hover {
    color: var(--sf-accent-red) !important;
}

/* -----------------------------------------------------
 * 🌙 文章页大标题与左侧动作栏暗黑模式适配
 * ----------------------------------------------------- */

/* 1. 修复文章大标题 (包括 Hero 模式和普通模式) */
[data-theme='dark'] .sf-single-header-sspai.no-hero .sf-single-title,
[data-theme='dark'] .sf-single-header-sspai.has-hero .sf-single-title {
    color: #f5f5f7 !important; /* 使用纯白确保在暗黑模式下极其清晰 */
}

/* 2. 修复作者名称和元数据颜色 */
[data-theme='dark'] .meta-info-text .author-name {
    color: var(--sf-text-main) !important;
}

/* 3. 修复左侧动作栏 (点赞、收藏按钮) */
[data-theme='dark'] .sf-single-left-actions .action-item {
    color: var(--sf-text-muted) !important;
}

[data-theme='dark'] .sf-single-left-actions .icon-wrap {
    background-color: #2c2c2e !important; /* 背景变深 */
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-single-left-actions .action-item:hover {
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-single-left-actions .action-item:hover .icon-wrap {
    background-color: #3a3a3c !important;
    color: #fff !important;
}

/* -----------------------------------------------------
 * 🌙 修复：图文推荐卡片文字颜色 (Widget Highlight Card)
 * ----------------------------------------------------- */

[data-theme='dark'] .sf-highlight-card-box .highlight-main-title {
    color: var(--sf-text-main) !important; /* 标题设为亮白色 */
}

[data-theme='dark'] .sf-highlight-card-box .highlight-sub-title {
    color: var(--sf-text-muted) !important; /* 副标题设为灰色 */
}

/* -----------------------------------------------------
 * 🌙 列表标题纯净变色适配 (无动效)
 * ----------------------------------------------------- */

/* 1. 列表标题正常状态颜色 */
[data-theme='dark'] .sf-post-title a,
[data-theme='dark'] .sf-widget-title,
[data-theme='dark'] .sf-widget-hot-posts .hot-post-title,
[data-theme='dark'] .sf-widget-links-list li a span,
[data-theme='dark'] .highlight-main-title {
    transition: color 0.3s ease !important;
}

/* 2. 鼠标悬停仅变色，无位移 */
[data-theme='dark'] .sf-post-title a:hover,
[data-theme='dark'] .sf-widget-hot-posts .hot-post-title:hover,
[data-theme='dark'] .sf-widget-links-list li a:hover span,
[data-theme='dark'] .highlight-text-wrap:hover .highlight-main-title {
    color: var(--sf-accent-red) !important;
}

/* 侧边栏标题悬停变色 */
[data-theme='dark'] .sf-widget-box:hover .widget-title {
    color: var(--sf-accent-red) !important;
}

/* -----------------------------------------------------
 * 🌙 返回顶部按钮暗黑适配
 * ----------------------------------------------------- */

[data-theme='dark'] #sf-back-to-top {
    background-color: var(--sf-bg-card) !important; /* 改为深色背景 */
    color: var(--sf-text-main) !important;          /* 箭头变为白色 */
    border: 1px solid var(--sf-border-color) !important; /* 加上细边框更有质感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; /* 暗黑模式下的阴影应更深 */
}

[data-theme='dark'] #sf-back-to-top:hover {
    background-color: #3a3a3c !important; /* 悬停时变为稍亮的深灰色 */
    color: var(--sf-accent-red) !important; /* 悬停时图标变为红色，呼应整站风格 */
}

/* -----------------------------------------------------
 * 🌙 修复：侧边栏底部社交与链接卡片 (Widget_Social_Footer)
 * ----------------------------------------------------- */


/* 社交图标本身颜色 */
[data-theme='dark'] .sf-social-icons a {
    color: var(--sf-text-muted) !important;
    transition: color 0.3s ease !important;
}

/* 社交图标鼠标悬停变红 */
[data-theme='dark'] .sf-social-icons a:hover {
    color: var(--sf-accent-red) !important;
}

/* 底部菜单链接颜色 */
[data-theme='dark'] .sf-footer-links a {
    color: var(--sf-text-muted) !important;
    transition: color 0.3s ease !important;
}

/* 底部菜单链接悬停变红 */
[data-theme='dark'] .sf-footer-links a:hover {
    color: var(--sf-accent-red) !important;
}

/* -----------------------------------------------------
 * 🌙 修复：分页导航 (Pagination) 暗黑适配
 * ----------------------------------------------------- */

/* 1. 分页容器整体背景与文字 */
[data-theme='dark'] .nav-links .page-numbers {
    background-color: var(--sf-bg-card) !important;
    color: var(--sf-text-muted) !important;
    border: 1px solid var(--sf-border-color) !important;
}

/* 2. 当前选中页码的颜色 */
[data-theme='dark'] .nav-links .page-numbers.current {
    background-color: var(--sf-accent-red) !important;
    color: #ffffff !important;
    border-color: var(--sf-accent-red) !important;
}

/* 3. 鼠标悬停时的颜色变化 */
[data-theme='dark'] .nav-links .page-numbers:hover:not(.current) {
    background-color: #2c2c2e !important;
    color: var(--sf-text-main) !important;
}

/* 4. 针对省略号的适配 */
[data-theme='dark'] .nav-links .page-numbers.dots {
    background-color: transparent !important;
    border: none !important;
    color: var(--sf-text-muted) !important;
}

/* -----------------------------------------------------
 * 🌙 Logo 自动切换逻辑
 * ----------------------------------------------------- */

/* 默认状态：显示亮色 Logo，隐藏暗黑 Logo */
.sf-logo-dark { display: none; }
.sf-logo-light { display: block; }

/* 暗黑模式下：隐藏亮色 Logo，显示暗黑 Logo */
[data-theme='dark'] .sf-logo-dark {
    display: block !important;
}
[data-theme='dark'] .sf-logo-light {
    display: none !important;
}

/* 如果你没上传暗黑Logo，亮色 Logo 应该常驻显示 */
[data-theme='dark'] .sf-logo-link .sf-logo-light:only-child {
    display: block !important;
}

/* -----------------------------------------------------
 * 🌙 搜索模态窗口：深度暗黑覆盖 (针对 base.css)
 * ----------------------------------------------------- */

/* 模态框面板背景 */
[data-theme='dark'] .sf-search-panel-inner {
    background-color: var(--sf-bg-card) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3) !important;
}

/* 搜索输入框 */
[data-theme='dark'] .sf-search-input {
    background-color: #2c2c2e !important;
    color: var(--sf-text-main) !important;
    border-color: var(--sf-border-color) !important;
}

/* 标题文字 */
[data-theme='dark'] .sf-search-title {
    color: var(--sf-text-main) !important;
}

/* 提示文字 */
[data-theme='dark'] .sf-search-tips {
    color: var(--sf-text-muted) !important;
}

/* 关闭按钮 */
[data-theme='dark'] .sf-search-close-btn {
    background-color: #333336 !important;
    color: var(--sf-text-muted) !important;
}
[data-theme='dark'] .sf-search-close-btn:hover {
    background-color: #444447 !important;
    color: var(--sf-text-main) !important;
}

/* 搜索结果页 (如果通过 get_search_query 跳转) */
[data-theme='dark'] .sf-search-result-header {
    background-color: var(--sf-bg-card) !important;
    border-color: var(--sf-border-color) !important;
}
[data-theme='dark'] .sf-search-result-title {
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] .sf-empty-search {
    background-color: var(--sf-bg-card) !important;
}

/* -----------------------------------------------------
 * 🌙 用户中心弹窗与菜单：暗黑模式强力覆盖
 * ----------------------------------------------------- */

/* 1. 模态框面板背景 */
[data-theme='dark'] .sf-modal-panel {
    background: var(--sf-bg-card) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important;
}

/* 2. 登录/注册表单头部文字 */
[data-theme='dark'] .sf-login-header h3 { color: var(--sf-text-main) !important; }
[data-theme='dark'] .sf-login-header p { color: var(--sf-text-muted) !important; }

/* 3. 输入框背景与文字 */
[data-theme='dark'] .sf-modal-state input[type="text"], 
[data-theme='dark'] .sf-modal-state input[type="password"], 
[data-theme='dark'] .sf-modal-state input[type="email"] {
    background: #2c2c2e !important;
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] .sf-modal-state input[type="text"]:focus, 
[data-theme='dark'] .sf-modal-state input[type="password"]:focus, 
[data-theme='dark'] .sf-modal-state input[type="email"]:focus {
    background: #3a3a3c !important;
}

/* 4. 下拉菜单背景与文字 */
[data-theme='dark'] .sf-user-dropdown-menu {
    background: var(--sf-bg-card) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
[data-theme='dark'] .sf-user-name { color: var(--sf-text-main) !important; }
[data-theme='dark'] .sf-dropdown-list li a { color: var(--sf-text-muted) !important; }
[data-theme='dark'] .sf-dropdown-list li a:hover { background: #2c2c2e !important; color: var(--sf-text-main) !important; }
[data-theme='dark'] .sf-dropdown-header { border-bottom-color: var(--sf-border-color) !important; }

/* 5. 密码重置页面的特殊适配 */
[data-theme='dark'] #sf-resetpassform .input {
    background: #2c2c2e !important;
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] #sf-resetpassform .button-primary {
    background: #fff !important;
    color: #000 !important;
}

/* -----------------------------------------------------
 * 🌙 酷站页面 (Coolsite) 暗黑模式适配
 * ----------------------------------------------------- */

/* 1. 全局背景颜色 */
[data-theme='dark'] .sf-coolsite-wrapper {
    background-color: var(--sf-bg-body) !important;
}

/* 2. 标题与说明文字颜色 */
[data-theme='dark'] .coolsite-header h1 {
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] .coolsite-desc {
    color: var(--sf-text-muted) !important;
}
[data-theme='dark'] .coolsite-cat-title {
    color: var(--sf-text-main) !important;
}

/* 3. 酷站卡片适配 (核心) */
[data-theme='dark'] .coolsite-card {
    background-color: #1c1c1e !important; /* 使用暗黑模式下的卡片色 */
    border: 1px solid var(--sf-border-color) !important;
}

[data-theme='dark'] .coolsite-card:hover {
    background-color: #2c2c2e !important; /* 悬停时稍微变亮 */
    border-color: #444 !important;
}

/* 4. 卡片内文字 */
[data-theme='dark'] .site-name {
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] .site-desc {
    color: var(--sf-text-muted) !important;
}

/* 5. 评论区 (如果有的话) */
[data-theme='dark'] .sf-comments-area {
    border-top: 1px solid var(--sf-border-color) !important;
}

/* -----------------------------------------------------
 * 🌙 页面 Hero 区域与图片适配 (sf-page.css)
 * ----------------------------------------------------- */

/* 1. Hero 区域背景：将米色背景改为暗色 */
[data-theme='dark'] .sf-page-hero-full {
    background-color: #1c1c1e !important; /* 调整为与卡片一致的深灰色 */
}

/* 2. 标题与副标题颜色适配 */
[data-theme='dark'] .sf-page-hero-title {
    color: var(--sf-text-main) !important;
}
[data-theme='dark'] .sf-page-hero-subtitle {
    color: var(--sf-text-muted) !important;
}

/* 3. 分散图片 (Scattered Images) 的边框适配 */
/* 苹果风格的暗黑模式下，白色粗边框需要变更为深色背景下的衬托效果 */
[data-theme='dark'] .scatter-img {
    border-color: #2c2c2e !important; /* 边框从白色改为深灰色 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important; /* 加深阴影 */
}

/* 4. 图片 hover 状态：保持视觉平衡 */
[data-theme='dark'] .scatter-img:hover {
    box-shadow: 0 25px 50px rgba(0,0,0,0.6) !important;
}

/* 5. 修复阅读容器的默认背景 (如果使用了) */
[data-theme='dark'] .sf-reading-container-no-sidebar {
    background-color: transparent !important;
}

/* -----------------------------------------------------
 * 🌙 山风主题：版权、导航与探索模块对比度优化
 * ----------------------------------------------------- */

/* 1. 版权公告区域 (sf-copyright-notice) */
[data-theme='dark'] .sf-copyright-notice {
    background-color: var(--sf-bg-surface) !important;
    border: 1px solid var(--sf-border) !important;
    color: var(--sf-text-muted) !important; /* 调整文字为暗灰 */
}

[data-theme='dark'] .sf-copyright-notice strong {
    color: var(--sf-text-main) !important; /* 调整加粗标签为明亮白，保证清晰 */
}

[data-theme='dark'] .sf-copyright-notice a {
    color: #4da3ff !important; /* 版权链接使用柔和的蓝色，避免刺眼 */
}

/* 2. 上一篇、下一篇导航 (sf-post-navigation-v2) */
[data-theme='dark'] .sf-post-navigation-v2 .nav-link {
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-post-navigation-v2 .nav-label {
    color: var(--sf-text-muted) !important; /* “上一篇”标签文字较浅 */
}

[data-theme='dark'] .sf-post-navigation-v2 .nav-title {
    color: #ffffff !important; /* 标题文字要更亮，确保阅读舒适 */
}

/* 3. 探索更多模块 (sf-explore-more) */
[data-theme='dark'] .sf-explore-more .explore-title {
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-explore-more .explore-post-title {
    color: var(--sf-text-main) !important;
}

[data-theme='dark'] .sf-explore-more .explore-card {
    background-color: var(--sf-bg-surface) !important;
    border: 1px solid var(--sf-border) !important;
}

/* 4. 通用：文章内容区的链接文字 (以防文章内链接看不清) */
[data-theme='dark'] .sf-single-content a {
    color: #4da3ff !important;
}

/* 只要 body 有 data-theme='dark' 属性，所有使用变量的地方会自动变色 */
body[data-theme='dark'] {
    --sf-text-main: #d1d1d6; /* 👈 暗黑模式下，自动把文字变成这个浅灰色 */
}