/* ==========================================================================
   GDNote 暗色模式主题样式 (dark.css)
   --------------------------------------------------------------------------
   用法：在 <body> 上添加 .dark-mode 类即会启用这些规则（配合 base.html
   中的主题切换逻辑）。本文件取代原先散落在 base.html 内联 <style> 中
   的暗色样式，改用分层的暗色调色板，不再把彩色背景粗暴拍平成单一灰色。

   设计原则：
   1. 使用 CSS 变量定义统一的暗色调色板，便于维护。
   2. 背景采用分层（层级 0-4），使卡片/模态框/下拉等元素有清晰层级。
   3. 彩色实色背景（.bg-primary/.bg-success 等）保留其颜色，不做拍平，
      因为大量页面依赖颜色传递语义（badge、状态条、信息卡片）。
   4. 亮色的半透明信息卡（.bg-*-opacity-10）在暗色下转为深色 subtle 变体。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 调色板变量
---------------------------------------------------------------------------- */
body.dark-mode {
  /* 页面底色 */
  --dark-bg-body:        #181a1b;
  --dark-bg-raised:      #1f2223;   /* 卡片、navbar、表单等常用面 */
  --dark-bg-overlay:     #23272b;   /* 模态框/下拉等悬浮层 */
  --dark-bg-inset:       #151718;   /* 输入框、插入内容（更深的"凹"面） */

  /* 文字颜色 */
  --dark-text:           #e8e6e3;
  --dark-text-muted:     #b8b8b8;
  --dark-text-secondary: #c0c0c0;

  /* 边框颜色 */
  --dark-border:         #3a3d3f;
  --dark-border-strong:  #4a4e51;

  /* 语义色（保留并通过 subtle 强调） */
  --dark-primary:        #6ea8fe;
  --dark-success:        #75b798;
  --dark-danger:         #ea868f;
  --dark-warning:        #ffda6a;
  --dark-info:           #6edff6;
  --dark-secondary:      #8b959e;
  --dark-light:          #c3c6c9;

  /* 警告/黄色系在暗色下的"背景"用柔和的暗黄，避免 #ffda6a 整片背景刺眼；
     前景文字/图标仍用较亮的 --dark-warning 保证可读。 */
  --dark-warning-bg:     #7a6a2a;

  /* 与 bootstrap 用 --bs-* 对齐的部分变量（尽量复用而非硬编码） */
  --bs-body-bg: var(--dark-bg-body);
  --bs-body-color: var(--dark-text);
  --bs-secondary-color: var(--dark-text-secondary);
}

/* ---------------------------------------------------------------------------
   1. 页面基础
---------------------------------------------------------------------------- */
body.dark-mode,
body.dark-mode .bg-body {
  background-color: var(--dark-bg-body) !important;
  color: var(--dark-text) !important;
  color-scheme: dark;
}

/* 更深的整体背景与强调文字 */
body.dark-mode {
  --bs-body-bg: var(--dark-bg-body);
}

/* ---------------------------------------------------------------------------
   2. 中性"面"背景：卡片、公共容器、导航栏等统一使用浮起色
   （只处理中性灰底；彩色 .bg-* 见第 4 节，不做拍平）
---------------------------------------------------------------------------- */
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .navbar,
body.dark-mode .bg-light,
body.dark-mode .bg-secondary,
body.dark-mode .bg-dark,
body.dark-mode .alert,
body.dark-mode .list-group,
body.dark-mode .list-group-item,
body.dark-mode .navbar-light,
body.dark-mode .bg-light.bg-opacity-10 ~ * {
  /* 占位：见下方按组件细化的规则 */
}

/* 卡片及其内部结构 */
body.dark-mode .card {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .card-header.bg-light,
body.dark-mode .card-header.bg-secondary {
  background-color: var(--dark-bg-overlay) !important;
}

/* 导航栏：navbar-dark.bg-dark 本身就是深色（Bootstrap 默认 #212529）。
   为符合"navbar 本来就是黑的、不应在暗色下变色"的预期，暗色模式下不改变
   navbar 的背景（锁为 #212529），彻底避免切换时出现"变白再渐变/突变"，
   也避免因过渡属性作用于 body 而令 fixed 导航栏产生错误颜色动画。 */
body.dark-mode .navbar,
body.dark-mode .navbar.bg-dark,
body.dark-mode .navbar-dark {
  background-color: #212529 !important;
  color: var(--dark-text) !important;
}
body.dark-mode .navbar .navbar-brand {
  color: var(--dark-text) !important;
}
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .nav-link.active,
body.dark-mode .navbar .navbar-toggler-icon {
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .nav-link:focus,
body.dark-mode .navbar .nav-link.active {
  color: var(--dark-text) !important;
}
body.dark-mode .navbar .btn-outline-light {
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border-strong) !important;
}
body.dark-mode .navbar .btn-outline-light:hover {
  color: var(--dark-bg-raised) !important;
  background-color: var(--dark-text) !important;
  border-color: var(--dark-text) !important;
}

/* 通用 .bg-light / .bg-secondary（非彩色、纯中性用途） -> 浮起色 */
body.dark-mode .bg-light:not(.card-header):not(.card-footer):not(.navbar):not(.alert) {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .bg-secondary:not(.card-header):not(.card-footer):not(.navbar):not(.badge):not(.btn):not(.progress-bar) {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text) !important;
}
/* 保留明确的深色背景 */
body.dark-mode .bg-dark {
  background-color: var(--dark-bg-body) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .bg-transparent {
  background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   3. 文字颜色：提高暗色下的可读性
---------------------------------------------------------------------------- */
body.dark-mode .text-muted {
  color: var(--dark-text-muted) !important;
}
body.dark-mode .text-secondary {
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .form-text,
body.dark-mode small:not(.text-danger):not(.text-success):not(.text-warning),
body.dark-mode .small,
body.dark-mode .text-body-secondary {
  color: var(--dark-text-muted) !important;
}
/* 彩色文字：暗色下用更亮的语义色保证对比度 */
body.dark-mode .text-primary { color: var(--dark-primary) !important; }
body.dark-mode .text-success { color: var(--dark-success) !important; }
body.dark-mode .text-danger  { color: var(--dark-danger) !important; }
body.dark-mode .text-warning { color: var(--dark-warning) !important; }
body.dark-mode .text-info    { color: var(--dark-info) !important; }
body.dark-mode .text-light   { color: var(--dark-light) !important; }
/* text-dark 在暗色下会看不清，提亮处理；但叠加在彩色 bg 上时保留原色 */
/* 注意：需同时排除"自身是 .badge / .alert"（如 badge bg-warning text-dark），
   否则会把 badge 内文字误提亮成浅色，导致图标/文字发白。 */
body.dark-mode .text-dark:not(.badge *):not(.alert *):not(.badge):not(.alert) {
  color: var(--dark-text) !important;
}
/* 在 warning 底上仍需要深色文字保证可读（badge bg-warning text-dark 等） */
body.dark-mode .badge.bg-warning,
body.dark-mode .bg-warning .text-dark {
  color: #352600 !important;
}

/* FontAwesome 图标适配（FontAwesome 4 的 .fa 继承父级颜色，不设默认色）：
   暗色下把明显"白色/浅色"的图标降为中性可读色，避免刺眼；
   带语义色 text-primary/success/... 的图标由上面 text-* 规则保留彩色。 */
body.dark-mode i.text-white[class*="fa"],
body.dark-mode i.text-light[class*="fa"],
body.dark-mode span.text-white[class*="fa"],
body.dark-mode span.text-light[class*="fa"],
body.dark-mode font.text-white[class*="fa"],
body.dark-mode font.text-light[class*="fa"],
body.dark-mode [class*="fa "].text-white,
body.dark-mode [class*="fa "].text-light {
  color: var(--dark-text-muted, #b8b8b8) !important;
}
/* 在深色实色背景（如 bg-primary 卡片）上的白色图标保持浅色，保证可读 */
body.dark-mode .bg-primary .text-white[class*="fa"],
body.dark-mode .bg-success .text-white[class*="fa"],
body.dark-mode .bg-danger .text-white[class*="fa"],
body.dark-mode .bg-info .text-white[class*="fa"],
body.dark-mode .bg-secondary .text-white[class*="fa"] {
  color: #f5f5f5 !important;
}
/* 深色卡片/正文里的图标默认跟随暗色文字（继承本就正确，这里兜底） */
body.dark-mode .card .fa,
body.dark-mode .card-body .fa,
body.dark-mode .markdown-body .fa {
  color: inherit !important;
}

/* ---------------------------------------------------------------------------
   4. 彩色背景：保留语义颜色（转成柔和的深色 subtle 变体）
   说明：几乎不加 !important 的彩色 .bg-* 会被第 2 节规则覆盖，
   因此这里显式恢复它们。色彩转成暗色 subtle，传递信息但不刺眼。
---------------------------------------------------------------------------- */
body.dark-mode .bg-primary { background-color: var(--dark-primary) !important; }
body.dark-mode .bg-success { background-color: var(--dark-success) !important; }
body.dark-mode .bg-danger  { background-color: var(--dark-danger) !important; }
/* 警告背景用柔和的暗黄，文字用深色保证可读，避免亮黄刺眼 */
body.dark-mode .bg-warning { background-color: var(--dark-warning-bg) !important; }
body.dark-mode .bg-info    { background-color: var(--dark-info) !important; }

/* 彩色背景上的文字颜色修正（原先往往是 text-white，暗色下需要深色文字） */
body.dark-mode .bg-primary .text-white,
body.dark-mode .bg-success .text-white,
body.dark-mode .bg-danger .text-white,
body.dark-mode .bg-warning .text-white,
body.dark-mode .bg-info .text-white {
  color: #101314 !important;
}
body.dark-mode .bg-primary,
body.dark-mode .bg-success,
body.dark-mode .bg-danger,
body.dark-mode .bg-warning,
body.dark-mode .bg-info {
  color: #101314 !important;
}

/* 半透明信息卡：亮色下的 .bg-*-opacity-10 / subtle 在暗色下转为深色半透明 */
body.dark-mode .bg-primary.bg-opacity-10,
body.dark-mode .bg-success.bg-opacity-10,
body.dark-mode .bg-danger.bg-opacity-10,
body.dark-mode .bg-warning.bg-opacity-10,
body.dark-mode .bg-info.bg-opacity-10,
body.dark-mode .bg-dark.bg-opacity-10,
body.dark-mode .bg-light.bg-opacity-10 {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .bg-primary-subtle { background-color: rgba(110, 168, 254, 0.15) !important; color: var(--dark-primary) !important; }
body.dark-mode .bg-success-subtle { background-color: rgba(117, 183, 152, 0.15) !important; color: var(--dark-success) !important; }
body.dark-mode .bg-danger-subtle  { background-color: rgba(234, 134, 143, 0.15) !important; color: var(--dark-danger) !important; }
body.dark-mode .bg-warning-subtle { background-color: rgba(255, 218, 106, 0.15) !important; color: #ffd98f !important; }
body.dark-mode .bg-info-subtle    { background-color: rgba(110, 223, 246, 0.15) !important; color: var(--dark-info) !important; }

/* ---------------------------------------------------------------------------
   5. 边框颜色（彩色边框在暗色下转亮，保证可见）
---------------------------------------------------------------------------- */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
  border-color: var(--dark-border) !important;
}
body.dark-mode .border-primary { border-color: var(--dark-primary) !important; }
body.dark-mode .border-success { border-color: var(--dark-success) !important; }
body.dark-mode .border-danger  { border-color: var(--dark-danger) !important; }
body.dark-mode .border-warning { border-color: var(--dark-warning) !important; }
body.dark-mode .border-info    { border-color: var(--dark-info) !important; }
body.dark-mode hr {
  border-color: var(--dark-border) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   6. 按钮
---------------------------------------------------------------------------- */
/* 实色按钮：保持原有品牌色，让按钮在暗色下依然醒目 */
body.dark-mode .btn-primary {
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
}
body.dark-mode .btn-success {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
}
body.dark-mode .btn-danger {
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
}
body.dark-mode .btn-warning {
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-color: #101314;
}
body.dark-mode .btn-info {
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-color: #101314;
}
body.dark-mode .btn-light {
  --bs-btn-bg: #adb5bd;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-color: #101314;
}
body.dark-mode .btn-dark {
  --bs-btn-bg: #181a1b;
  --bs-btn-border-color: #3a3d3f;
  --bs-btn-color: #e8e6e3;
}
body.dark-mode .btn-secondary {
  --bs-btn-bg: #3a3d3f;
  --bs-btn-border-color: #3a3d3f;
  --bs-btn-color: #e8e6e3;
}

/* 描边按钮：改暗色边框与文字，保持可感知的层次 */
body.dark-mode .btn-outline-primary   { --bs-btn-color: var(--dark-primary);   --bs-btn-border-color: var(--dark-primary);   --bs-btn-hover-bg: rgba(110,168,254,.15); }
body.dark-mode .btn-outline-success   { --bs-btn-color: var(--dark-success);   --bs-btn-border-color: var(--dark-success);   --bs-btn-hover-bg: rgba(117,183,152,.15); }
body.dark-mode .btn-outline-danger    { --bs-btn-color: var(--dark-danger);    --bs-btn-border-color: var(--dark-danger);    --bs-btn-hover-bg: rgba(234,134,143,.15); }
body.dark-mode .btn-outline-warning   { --bs-btn-color: var(--dark-warning);   --bs-btn-border-color: var(--dark-warning);   --bs-btn-hover-bg: rgba(255,218,106,.15); }
body.dark-mode .btn-outline-info      { --bs-btn-color: var(--dark-info);      --bs-btn-border-color: var(--dark-info);      --bs-btn-hover-bg: rgba(110,223,246,.15); }
body.dark-mode .btn-outline-secondary { --bs-btn-color: var(--dark-text-secondary); --bs-btn-border-color: var(--dark-border-strong); --bs-btn-hover-bg: rgba(255,255,255,.06); }
body.dark-mode .btn-outline-light     { --bs-btn-color: var(--dark-text-secondary); --bs-btn-border-color: var(--dark-border-strong); --bs-btn-hover-bg: var(--dark-text); --bs-btn-hover-color: #181a1b; }
body.dark-mode .btn-outline-dark      { --bs-btn-color: var(--dark-text);      --bs-btn-border-color: var(--dark-border-strong); --bs-btn-hover-bg: var(--dark-text); --bs-btn-hover-color: #181a1b; }

/* 链接型按钮与自定义复制按钮 */
body.dark-mode .btn-link {
  --bs-btn-color: var(--dark-primary);
  --bs-btn-hover-color: #9ec5fe;
}
body.dark-mode .btn-outline-copy,
body.dark-mode .btn-copy {
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border-strong) !important;
}
body.dark-mode .btn-outline-copy:hover,
body.dark-mode .btn-copy:hover,
body.dark-mode .btn-outline-copy:focus,
body.dark-mode .btn-copy:focus {
  color: var(--dark-text) !important;
  border-color: var(--dark-info) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .disabled,
body.dark-mode .btn:disabled {
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   7. 表单控件
---------------------------------------------------------------------------- */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .form-range,
body.dark-mode .form-check-input {
  background-color: var(--dark-bg-inset) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--dark-bg-inset) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-info) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 223, 246, 0.2) !important;
}
body.dark-mode .form-control::placeholder {
  color: var(--dark-text-muted) !important;
  opacity: 0.7;
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--dark-text-muted) !important;
}
body.dark-mode .form-label {
  color: var(--dark-text) !important;
}
body.dark-mode .form-check-label {
  color: var(--dark-text) !important;
}
body.dark-mode .form-check-input:checked {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
}
body.dark-mode .form-check-input:focus {
  border-color: var(--dark-info) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 223, 246, 0.2) !important;
}
body.dark-mode .input-group-text {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .form-range::-webkit-slider-runnable-track,
body.dark-mode .form-range::-moz-range-track {
  background-color: var(--dark-bg-overlay) !important;
}
body.dark-mode .form-range::-webkit-slider-thumb,
body.dark-mode .form-range::-moz-range-thumb {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
}

/* ---------------------------------------------------------------------------
   8. 弹窗 / 下拉 / 悬浮层
---------------------------------------------------------------------------- */
body.dark-mode .modal-content {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-strong) !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--dark-border) !important;
}
body.dark-mode .modal-title {
  color: var(--dark-text) !important;
}
body.dark-mode .modal-backdrop.show {
  opacity: 0.75;
}
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* 下拉菜单 */
body.dark-mode .dropdown-menu {
  background-color: var(--dark-bg-overlay) !important;
  border-color: var(--dark-border-strong) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .dropdown-item {
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item:active {
  background-color: rgba(110, 168, 254, 0.2) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .dropdown-divider {
  border-color: var(--dark-border) !important;
}

/* 悬浮提示 / toast */
body.dark-mode .toast {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-strong) !important;
}
body.dark-mode .toast-header {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .popover {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-strong) !important;
}
body.dark-mode .popover-header {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
}
/* 通知/提示条（基线上方浮出的 alert） */
body.dark-mode .alert {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .alert-info,
body.dark-mode .alert-secondary {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .alert-primary { background-color: rgba(110,168,254,.15) !important; color: var(--dark-primary) !important; border-color: rgba(110,168,254,.3) !important; }
body.dark-mode .alert-success { background-color: rgba(117,183,152,.15) !important; color: var(--dark-success) !important; border-color: rgba(117,183,152,.3) !important; }
body.dark-mode .alert-danger  { background-color: rgba(234,134,143,.15) !important; color: var(--dark-danger) !important; border-color: rgba(234,134,143,.3) !important; }
body.dark-mode .alert-warning { background-color: rgba(255,218,106,.15) !important; color: #d7b05a !important; border-color: rgba(255,218,106,.3) !important; }

/* ---------------------------------------------------------------------------
   9. 列表组
---------------------------------------------------------------------------- */
body.dark-mode .list-group-item {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .list-group-item.active {
  background-color: rgba(110, 168, 254, 0.2) !important;
  border-color: rgba(110, 168, 254, 0.3) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .list-group-item.active .text-danger,
body.dark-mode .list-group-item.active .bg-danger {
  color: var(--dark-danger) !important;
}
body.dark-mode .list-group-item.bg-danger,
body.dark-mode .list-group-item.text-danger {
  background-color: rgba(234, 134, 143, 0.15) !important;
  color: var(--dark-danger) !important;
  border-color: var(--dark-border) !important;
}

/* ---------------------------------------------------------------------------
   10. 表格
---------------------------------------------------------------------------- */
body.dark-mode .table {
  --bs-table-color: var(--dark-text);
  --bs-table-bg: var(--dark-bg-body);
  --bs-table-border-color: var(--dark-border);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .table thead th,
body.dark-mode .table th {
  color: var(--dark-text) !important;
  border-color: var(--dark-border-strong) !important;
  background-color: var(--dark-bg-raised) !important;
}
body.dark-mode .table td {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ---------------------------------------------------------------------------
   11. 标签页 / 导航 / 面包屑 / 分页
---------------------------------------------------------------------------- */
body.dark-mode .nav-tabs {
  border-bottom-color: var(--dark-border) !important;
}
body.dark-mode .nav-tabs .nav-link {
  color: var(--dark-text-secondary) !important;
  border-color: transparent !important;
}
body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .nav-tabs .nav-link:focus {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  border-bottom-color: var(--dark-bg-raised) !important;
}
body.dark-mode .nav-pills .nav-link {
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .nav-pills .nav-link.active,
body.dark-mode .nav-pills .show > .nav-link {
  background-color: rgba(110, 168, 254, 0.25) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .nav-link {
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link:focus {
  color: var(--dark-text) !important;
}
body.dark-mode .breadcrumb-item a {
  color: var(--dark-primary) !important;
}
body.dark-mode .breadcrumb-item.active {
  color: var(--dark-text-secondary) !important;
}

/* 分页 */
body.dark-mode .page-link {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .page-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .page-item.active .page-link {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
  color: #101314 !important;
}
body.dark-mode .page-item.disabled .page-link {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text-muted) !important;
  border-color: var(--dark-border) !important;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   12. 徽章（保留彩色语义，暗色下微调对比度）
---------------------------------------------------------------------------- */
body.dark-mode .badge.bg-light,
body.dark-mode .badge.bg-secondary {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text-secondary) !important;
}
body.dark-mode .badge.bg-primary,
body.dark-mode .badge.bg-success,
body.dark-mode .badge.bg-danger,
body.dark-mode .badge.bg-info {
  color: #101314 !important;
}
body.dark-mode .badge.bg-warning {
  color: #352600 !important;
}

/* ---------------------------------------------------------------------------
   13. 进度条 / 手风琴 / 折叠 / 其他
---------------------------------------------------------------------------- */
body.dark-mode .progress {
  background-color: var(--dark-bg-overlay) !important;
}
body.dark-mode .progress-bar {
  color: #101314 !important;
}
body.dark-mode .accordion-item {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark-mode .accordion-button {
  background-color: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .accordion-button:not(.collapsed) {
  background-color: rgba(110, 168, 254, 0.15) !important;
  color: var(--dark-primary) !important;
}
body.dark-mode .accordion-button::after {
  filter: invert(1);
}
body.dark-mode .offcanvas {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text) !important;
}
body.dark-mode .offcanvas-header {
  border-color: var(--dark-border) !important;
}
body.dark-mode .spinner-border {
  color: var(--dark-primary) !important;
}

/* ---------------------------------------------------------------------------
   14. 自定义站点组件
---------------------------------------------------------------------------- */
/* 首页/管理页的 jumbotron 横幅 */
body.dark-mode .jumbotron-main {
  background: var(--dark-bg-raised) !important;
  color: var(--dark-text) !important;
  border: 1.5px solid var(--dark-border-strong) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}

/* 主题渐变文字（原有处理保留同款） */
body.dark-mode .theme-gradient {
  background: none !important;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--dark-warning);
  background-clip: initial;
  color: var(--dark-warning);
}

/* 仅暗色显示的内联元素 */
.d-dark-inline { display: none; }
body.dark-mode .d-dark-inline { display: inline !important; }

/* 终端/聊天等本身就是深色的页面，避免被额外调整（保证其内部对比） */
body.dark-mode .bg-dark.text-light * {
  color: inherit;
}

/* 加载蒙版在暗色下更贴合 */
body.dark-mode .loader-overlay {
  background: rgba(24, 26, 27, 0.55);
}

/* 下拉/模态框打开时的滚动条与小工具在暗色下更协调 */
body.dark-mode {
  scrollbar-color: var(--dark-border-strong) var(--dark-bg-body);
}

/* ==========================================================================
   说明
   --------------------------------------------------------------------------
   - 本文件假定 <body class="dark-mode">。theme 切换逻辑在 base.html 中。
   - 若某组件的变量与 Bootstrap 冲突，优先以本文件的 !important 覆盖生效。
   - 如需调试单个组件，可在浏览器 DevTools 中临时移除某条规则进行对比。
   ========================================================================== */
