/* ============================================================
   notea 主题 · 深色模式样式（独立文件）
   ------------------------------------------------------------
   用法：header.php 引入 <link rel="stylesheet" href="assets/css/dark.css">
   生效：<html data-theme="dark"> 时覆盖 :root 变量与各组件配色
   联动：header.php 防闪烁脚本先按 手动记忆 > 系统偏好 设置
         data-theme；js/ios-tabbar.js 负责切换、记忆与跟随系统
   原理：主题基础样式全部走 CSS 变量，深色只需重设变量；
         少量需要额外处理的组件（毛玻璃/搜索框/滚动条）单独覆盖。
   ============================================================ */

/* ---------- 变量重设：全局深色配色 ---------- */
html[data-theme="dark"] {
  --bg: #101418;
  --panel: #171C22;
  --border: #262D36;
  --text: #E8EDF2;
  --text-secondary: #8B98A7;
  --hover: #1F2730;
  --active: #26303B;

  /* 盒子模式（pc-style.css ③）深色化 */
  --box-bg: #0B0E11;
  --box-border: rgba(255, 255, 255, 0.06);
  --box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] body {
  background: var(--panel);
}
/* 页面背景与文字过渡（防闪烁/刺眼） */
html[data-theme="dark"] body,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-right,
html[data-theme="dark"] .note-list {
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* 主内容卡片：pc-style.css ③硬编码 background:white，深色下重设 */
html[data-theme="dark"] .note-list {
  background: var(--panel) !important;
}

/* 各种浮层的容器底色（style.css 硬编码 #fff / #f8f9fa） */
html[data-theme="dark"] .modal-container,
html[data-theme="dark"] .modal-input-field,
html[data-theme="dark"] .user-summary {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .modal-input-field,
html[data-theme="dark"] .comment-textarea {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .modal-input-readonly {
  background: var(--hover) !important;
  color: var(--text-secondary);
}
html[data-theme="dark"] .reply-hint {
  background: rgba(10, 132, 255, 0.14);
  color: #5eb2ff;
}

/* 友链卡片（style.css 硬编码 #fff / #e0e0e0 边框） */
html[data-theme="dark"] .weui-friend-item {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

/* ---------- 组件级深色覆盖 ---------- */

/* 顶部搜索框（style.css 硬编码 #fafafa / rgba 边框） */
html[data-theme="dark"] .topbar .search input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

/* 分割线/描边（style.css 硬编码浅色） */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .note-list-header {
  border-color: var(--border) !important;
}

/* 交互按钮阴影弱化 */
html[data-theme="dark"] .back-btn-app {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .back-btn-app:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* 右侧栏小图标底（pc-style.css 硬编码 rgba 黑底） */
html[data-theme="dark"] .sr-ico,
html[data-theme="dark"] .sidebar .item .count {
  background: var(--active);
  color: var(--text-secondary);
}

/* 深色下 iOS tab 栏胶囊：深色毛玻璃 */
html[data-theme="dark"] .ios-tabbar.is-on {
  background: rgba(24, 30, 38, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .ios-tabbar .tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
html[data-theme="dark"] .ios-tabbar .tab.active {
  color: #0A84FF;
  background: rgba(10, 132, 255, 0.18);
}
html[data-theme="dark"] .ios-tabbar .tabbar-sep {
  background: rgba(255, 255, 255, 0.12);
}
/* 深色模式显示月亮图标 */
html[data-theme="dark"] .ios-tabbar .tab .theme-ico-moon { display: block; }
html[data-theme="dark"] .ios-tabbar .tab .theme-ico-sun { display: none; }

/* 搜索弹窗深色化 */
html[data-theme="dark"] .search-modal {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .search-modal .sm-box {
  background: var(--panel);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] .search-modal .sm-head input { color: var(--text); }
html[data-theme="dark"] .search-modal .sm-close {
  background: var(--hover);
  color: var(--text-secondary);
}
html[data-theme="dark"] .search-modal .sm-item:hover { background: var(--hover); }
html[data-theme="dark"] .search-modal .sm-ico {
  background: var(--active);
  color: var(--text-secondary);
}

/* 滚动条深色化（WebKit） */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333D49;
  border-radius: 6px;
  border: 2px solid var(--panel);
}
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* 代码块/引用在深色下更协调 */
html[data-theme="dark"] .post-content pre,
html[data-theme="dark"] .post-content code {
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- 左右侧边栏深色优化 ---------- */

/* 左侧栏图标底衬（pc-style.css ⑧ 硬编码 rgba 黑底） */
html[data-theme="dark"] .sidebar-inner .item .icon {
  background: var(--active);
  color: var(--text);
}

/* 左侧栏分组标题分隔线 */
html[data-theme="dark"] .sidebar-inner .section-title {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

/* 左侧栏计数徽章（pc-style.css ⑧ hover 底） */
html[data-theme="dark"] .sidebar-inner .item .count {
  color: var(--text-secondary);
  background: var(--active);
}

/* 右侧栏标签云（pc-style.css 硬编码 #555 / rgba 黑底） */
html[data-theme="dark"] .sidebar-right .sr-tag {
  color: var(--text-secondary);
  background: var(--active);
}
html[data-theme="dark"] .sidebar-right .sr-tag:hover {
  background: var(--hover);
  color: var(--text);
}

/* 右侧栏博客信息块（pc-style.css 硬编码 rgba 黑底） */
html[data-theme="dark"] .sidebar-right .sr-info-item {
  background: var(--active);
  color: var(--text-secondary);
}
html[data-theme="dark"] .sidebar-right .sr-info-item b {
  color: var(--text);
}

/* 右侧栏头像阴影弱化随深色 */
html[data-theme="dark"] .sidebar-right .sr-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 右侧栏最新评论条目 hover / 分隔 */
html[data-theme="dark"] .sidebar-right .sr-link:hover {
  background: var(--hover);
}

/* 右侧栏空态提示 */
html[data-theme="dark"] .sidebar-right .sr-empty {
  color: var(--text-secondary);
}

/* ---------- 评论模块深色适配 ---------- */

/* 评论主容器与文字（style.css 硬编码 #111/#222/#727272/#bbb） */
html[data-theme="dark"] .comments {
  color: var(--text);
}
html[data-theme="dark"] .comments h4 {
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .comment-user {
  color: var(--text);
}
html[data-theme="dark"] .comment-text {
  color: var(--text);
}
html[data-theme="dark"] .comment-text a {
  color: var(--text-secondary);
}
html[data-theme="dark"] .comment-act a {
  color: var(--text-secondary);
}
html[data-theme="dark"] .comment-act a:hover {
  color: var(--text);
}
html[data-theme="dark"] .comment-date {
  color: var(--text-secondary);
}
html[data-theme="dark"] .comment-badge {
  background: var(--active);
  color: var(--text);
}

/* 评论表单旧样式（style.css 硬编码 #ddd 边框） */
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .comment-fields input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

/* 富文本评论编辑器（style.css 硬编码 #fff 白底） */
html[data-theme="dark"] .comment-rich-editor {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .comment-rich-editor:focus {
  border-color: #0A84FF;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.22);
}
html[data-theme="dark"] .comment-rich-editor:empty::before {
  color: var(--text-secondary);
}

/* 编辑器工具栏 / 表情按钮 */
html[data-theme="dark"] .emoji-toggle-btn {
  color: var(--text-secondary);
}
html[data-theme="dark"] .emoji-toggle-btn:hover {
  background: var(--hover);
  color: var(--text);
}

/* 表情面板（style.css 硬编码 #fff 白底 #eee 分隔） */
html[data-theme="dark"] .emoji-panel {
  background: var(--panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .emoji-panel-header {
  background: var(--panel);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .emoji-panel-title {
  color: var(--text);
}
html[data-theme="dark"] .emoji-panel-close {
  color: var(--text-secondary);
}
html[data-theme="dark"] .emoji-panel-close:hover {
  background: var(--active);
  color: var(--text);
}
html[data-theme="dark"] .emoji-item:hover {
  background: var(--hover);
}
html[data-theme="dark"] .emoji-grid::-webkit-scrollbar-track {
  background: var(--hover);
}
html[data-theme="dark"] .emoji-grid::-webkit-scrollbar-thumb {
  background: #333D49;
}

/* 评论弹窗配套（用户名/邮箱/编辑按钮/私密选项） */
html[data-theme="dark"] .user-email {
  color: var(--text-secondary);
}
html[data-theme="dark"] .user-edit-btn {
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .private-checkbox {
  color: var(--text-secondary);
}
html[data-theme="dark"] .private-checkbox small {
  color: var(--text-secondary);
}
html[data-theme="dark"] .btn-cancel {
  background: var(--active);
  color: var(--text);
}
html[data-theme="dark"] .modal-close {
  color: var(--text-secondary);
}

/* 私密评论块 / 好友 / @ 标签（style.css 硬编码浅底） */
html[data-theme="dark"] .SecretComments {
  background: var(--hover);
  color: var(--text-secondary);
}
html[data-theme="dark"] .private-wrap .private-badge {
  background: rgba(198, 40, 40, 0.15);
  border-color: rgba(198, 40, 40, 0.65);
}
html[data-theme="dark"] .my-friend-tag {
  background: rgba(64, 158, 255, 0.14);
  border-color: rgba(64, 158, 255, 0.5);
}
html[data-theme="dark"] .my-custom-at-tag {
  background: rgba(91, 124, 250, 0.14);
  border-color: rgba(91, 124, 250, 0.5);
}

/* 底部浮点评论按钮徽章（style.css 硬编码 #fff 描边） */
html[data-theme="dark"] .bottom-float-bar .float-btn-badge {
  box-shadow: 0 0 0 2px var(--panel);
}

/* 无限滚动指示器（style.css 硬编码浅色） */
html[data-theme="dark"] .scroll-loading,
html[data-theme="dark"] .scroll-end {
  color: var(--text-secondary);
}
html[data-theme="dark"] .scroll-dot {
  background: var(--text-secondary);
}
html[data-theme="dark"] .scroll-load-btn {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme="dark"] .scroll-load-btn:hover {
  border-color: #409eff;
  color: #409eff;
}
html[data-theme="dark"] .scroll-end-line {
  background: var(--border);
}

/* 无评论 / 评论关闭占位 */
html[data-theme="dark"] .no-comment-tip {
  color: var(--text-secondary);
}
html[data-theme="dark"] .comment-closed {
  color: var(--text-secondary);
  border-color: var(--border);
}

/* 评论分页导航（style.css 用系统级 prefers-color-scheme，
   主题手动深色不触发，需按 data-theme 覆盖） */
html[data-theme="dark"] ol.page-navigator li a {
  color: var(--text-secondary);
}
html[data-theme="dark"] ol.page-navigator li a:hover {
  background: var(--hover);
  color: var(--text);
}
html[data-theme="dark"] ol.page-navigator li.current a {
  background: var(--text);
  color: var(--bg) !important;
  border-color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] ol.page-navigator li span {
  color: var(--text-secondary);
}