/* ==========================================================================
   深色主题 · 全局补丁
   ==========================================================================
   app-ui.css 里那些修正都锁在 body.mobile 上（它是 App 布局层），
   所以桌面切到深色时不会生效，会留下一堆白块。

   这个文件补的就是这部分：**只处理颜色**，作用域是 [data-theme="dark"]，
   与屏幕宽度无关。浅色主题下整份规则不参与匹配，零开销。

   为什么需要它：平台的样式原本只面向浅色，绝大多数规则用令牌写的
   （--card / --ink-*），令牌一换就自动适配；但仍有十来处直接写了 #fff
   或含白的渐变，令牌管不到，只能点名。
   ========================================================================== */

/* body 的背景要显式指定一次：html 上有两个 --bg 定义（:root 与
   [data-theme="dark"]），特异性相同，靠加载顺序决胜 —— 显式写死更稳。 */
[data-theme="dark"] body { background: var(--bg) }

/* ---------------------------- 按钮 ---------------------------- */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-soft {
  background: var(--sf-2);
  border: 1px solid var(--bd-2);
  color: var(--ink-700);
}
[data-theme="dark"] .btn-ghost:hover:not(:disabled),
[data-theme="dark"] .btn-soft:hover:not(:disabled) {
  background: var(--sf-hi);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
[data-theme="dark"] .btn-icon:hover:not(:disabled) { background: var(--sf-hi) }
[data-theme="dark"] .btn:disabled { background: var(--sf-2); color: var(--ink-400) }

/* ---------------------------- 卡片与面板 ---------------------------- */
/* 卡片标题区在浅色下有一条白色渐变，底色改暗后它会把整条标题带衬白 */
[data-theme="dark"] .card-head {
  background: transparent;
  border-bottom: 1px solid var(--bd);
}
[data-theme="dark"] .card-head > svg { color: var(--brand-400) }
[data-theme="dark"] .card-head .icobox {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-200);
}
[data-theme="dark"] .card-head .icobox svg { color: var(--brand-400) }

/* 指标卡的装饰圆：浅色大圆压在暗卡上会让整张卡看起来是白的 */
[data-theme="dark"] .stat::after { display: none }
[data-theme="dark"] .stat { background: var(--sf-1); border: 1px solid var(--bd) }
[data-theme="dark"] .stat:hover { box-shadow: none; transform: none }

/* 实心面板类：弹窗、抽屉、消息面板需要真正的面板色，不能是半透明 */
[data-theme="dark"] .modal,
[data-theme="dark"] .drawer,
[data-theme="dark"] .bell-panel {
  background: var(--elev-1);
  border: 1px solid var(--bd-2);
  color: var(--ink-700);
}
[data-theme="dark"] .modal-head .x:hover { background: var(--sf-hi) }
[data-theme="dark"] .modal-foot { background: var(--elev-2); border-top: 1px solid var(--bd) }
[data-theme="dark"] .bp-head { background: transparent; border-bottom: 1px solid var(--bd) }
[data-theme="dark"] .bp-foot { background: var(--elev-2); border-top: 1px solid var(--bd) }
[data-theme="dark"] .bp-item.unread { background: var(--brand-50) }
[data-theme="dark"] .bp-item:hover { background: var(--sf-hi) }

/* ---------------------------- 零散的白底元素 ---------------------------- */
/* 这些都是直接写死 #fff 的，令牌改不到，逐条点名 */
[data-theme="dark"] .tag.outline,
[data-theme="dark"] .mod-card,
[data-theme="dark"] .cal-nav,
[data-theme="dark"] .cal-cell,
[data-theme="dark"] .hd-row,
[data-theme="dark"] .pf-avatar,
[data-theme="dark"] .device,
[data-theme="dark"] .mp-stage {
  background: var(--sf-1);
  border-color: var(--bd);
  color: var(--ink-700);
}
[data-theme="dark"] .cal-cell.danger { background: var(--danger-bg) }
[data-theme="dark"] .cal-cell:hover { background: var(--sf-hi) }
[data-theme="dark"] .cal-cell.on { background: var(--brand-50); border-color: var(--brand-200) }
[data-theme="dark"] .tl-item::before { background: var(--bd-2); border-color: var(--elev-1) }

/* 个人中心主卡的装饰底与卡片自身渐变撞色，暗色下去掉 */
[data-theme="dark"] .pf-hero-bg { display: none }

/* ---------------------------- AI 结果卡的操作按钮 ---------------------------- */
/* 与浅色同一套语义：搬运动作中性、分析类冷色、写入类实心。
   暗底上不透明度要比浅色高一档，否则彩底会糊在背景里。 */
[data-theme="dark"] .result-acts .btn { border-radius: 999px }
[data-theme="dark"] .result-acts [data-r="copy"],
[data-theme="dark"] .result-acts [data-r="dl"] {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--ink-700);
}
[data-theme="dark"] .result-acts [data-r="copy"]:active,
[data-theme="dark"] .result-acts [data-r="dl"]:active { background: rgba(255, 255, 255, .09) }
[data-theme="dark"] .result-acts [data-r="ana"] {
  background: rgba(113, 112, 255, .16);
  border: 1px solid rgba(113, 112, 255, .36);
  color: #9AA0FF;
}
[data-theme="dark"] .result-acts [data-r="ana"]:active { background: rgba(113, 112, 255, .26) }
[data-theme="dark"] .result-acts [data-r="case"] {
  background: linear-gradient(135deg, #4A55B8 0%, #5E6AD2 50%, #7170FF 100%);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(94, 106, 210, .8);
}

/* ---------------------------- 表单控件 ---------------------------- */
/* 输入框、下拉在浅色下写死了白底，暗色里会亮成一片 */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea {
  background: var(--sf-2);
  border-color: var(--bd-2);
  color: var(--ink-900);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder { color: var(--ink-400) }
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus {
  background: var(--sf-hi);
  border-color: var(--brand-400);
}
[data-theme="dark"] .field > label { color: var(--ink-600) }
[data-theme="dark"] .field-hint { color: var(--ink-400) }

/* ---------------------------- 芯片 · 标签 · 统计 ---------------------------- */
[data-theme="dark"] .chip {
  background: var(--sf-2);
  border-color: var(--bd-2);
  color: var(--ink-600);
}
[data-theme="dark"] .chip:hover { background: var(--sf-hi); color: var(--ink-900) }
[data-theme="dark"] .chip.on {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-400);
}
[data-theme="dark"] .quick-card { background: var(--sf-1); border: 1px solid var(--bd) }
[data-theme="dark"] .quick-card:hover { background: var(--sf-hi) }
[data-theme="dark"] .cal-week,
[data-theme="dark"] .cal-grid,
[data-theme="dark"] .cal-bar,
[data-theme="dark"] .cal-legend { background: var(--sf-1) }
[data-theme="dark"] .cal-cell.today { border-color: var(--brand-200) }
[data-theme="dark"] .pf-chain-node { background: var(--sf-1); border-color: var(--bd) }
[data-theme="dark"] .pf-chain-node.self { background: var(--brand-50); border-color: var(--brand-200) }

/* ---------------------------- 表格 ---------------------------- */
[data-theme="dark"] table.tbl th { background: var(--elev-2); color: var(--ink-500) }
[data-theme="dark"] table.tbl tbody tr:hover td { background: var(--sf-hi) }

/* ---------------------------- 上传 / 附件 ---------------------------- */
[data-theme="dark"] .upload-item,
[data-theme="dark"] .att-item { background: var(--elev-2); border-color: var(--bd) }
[data-theme="dark"] .upload-item .ui-ic,
[data-theme="dark"] .att-item .ai-tag { background: var(--sf-2); color: var(--ink-500) }
[data-theme="dark"] .file-drop { background: var(--sf-1); border-color: var(--bd-2) }
[data-theme="dark"] .file-drop:hover,
[data-theme="dark"] .file-drop.dragging { background: var(--brand-50); border-color: var(--brand-200) }

/* ---------------------------- 组织树 · 时间线 ---------------------------- */
[data-theme="dark"] .tree-node:hover { background: var(--sf-hi) }
[data-theme="dark"] .tree-node.sel { background: var(--brand-50) }
[data-theme="dark"] .tl-item::before { background: var(--elev-1) }

/* ---------------------------- 启动页与骨架 ---------------------------- */
[data-theme="dark"] .boot {
  background: radial-gradient(900px 520px at 22% -10%, #1A1D24 0%, transparent 62%), #08090A;
}
[data-theme="dark"] .boot-text { color: var(--ink-400) }
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .04) 75%);
  background-size: 200% 100%;
}
[data-theme="dark"] .empty .ic { background: var(--sf-2); color: var(--ink-400) }