/*!
 * dark.css — v3.2.10 全局暗色模式（重写）
 *
 * 使用方式（顺序很关键，必须在所有视图 CSS 之后引入）：
 *   <link rel="stylesheet" href="<?= asset('css/style.css') ?>">
 *   <link rel="stylesheet" href="<?= asset('css/mobile-first.css') ?>">
 *   <link rel="stylesheet" href="<?= asset('css/dark.css') ?>">
 *   <script src="<?= asset('js/theme.js') ?>" defer></script>
 *
 * 触发：
 *   1. 跟随系统：@media (prefers-color-scheme: dark) — 自动
 *   2. 强制暗色：:root[data-theme="dark"] — 用户点击主题切换按钮
 *   3. 强制亮色：默认 (无 data-theme) — 用户主动切回
 *
 * 与新设计 Token（v3.2.10）协同：
 *   - 所有新 view 通过 :root 变量（--color-*）控制颜色
 *   - 旧 view 仍可使用旧变量（--bg, --text, --brand 等），由下方"兼容映射"自动同步
 */

:root[data-theme="dark"] {
  /* === 新设计 Token 暗色值 === */
  --color-text: #f1f5f9;
  --color-text-muted: #cbd5e1;
  --color-text-subtle: #94a3b8;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-card: #1e293b;
  --color-card-hover: #334155;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-primary-light: #2e1065;

  /* 状态（暗色下亮度更高，便于辨识） */
  --color-success: #34d399;
  --color-success-bg: rgba(16, 185, 129, .18);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, .18);
  --color-danger: #f87171;
  --color-danger-bg: rgba(239, 68, 68, .18);
  --color-info: #60a5fa;
  --color-info-bg: rgba(59, 130, 246, .18);

  /* === 兼容映射（旧 → 新） === */
  --bg: var(--color-bg);
  --bg-2: var(--color-bg-alt);
  --bg-3: #334155;
  --surface: var(--color-card);
  --surface-2: var(--color-card-hover);
  --card: var(--color-card);
  --hover: var(--color-card-hover);
  --text: var(--color-text);
  --text-2: var(--color-text-muted);
  --text-3: var(--color-text-subtle);
  --muted: var(--color-text-subtle);
  --line: var(--color-border);
  --line-2: var(--color-border-strong);
  --brand: #a78bfa;
  --brand-dark: var(--color-primary);
  --brand2: #a78bfa;
  --brand3: #c4b5fd;
  --danger: #f87171;
  --success: #34d399;
  --info: #60a5fa;

  /* 阴影：暗色下更深 */
  --shadow: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .6);
}

/* 跟随系统（用户未主动切换） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text: #f1f5f9;
    --color-text-muted: #cbd5e1;
    --color-text-subtle: #94a3b8;
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-card: #1e293b;
    --color-card-hover: #334155;
    --color-border: #334155;
    --color-border-strong: #475569;
    --color-primary-light: #2e1065;

    --color-success: #34d399;
    --color-success-bg: rgba(16, 185, 129, .18);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, .18);
    --color-danger: #f87171;
    --color-danger-bg: rgba(239, 68, 68, .18);
    --color-info: #60a5fa;
    --color-info-bg: rgba(59, 130, 246, .18);

    /* === 兼容映射 === */
    --bg: var(--color-bg);
    --bg-2: var(--color-bg-alt);
    --bg-3: #334155;
    --surface: var(--color-card);
    --surface-2: var(--color-card-hover);
    --card: var(--color-card);
    --hover: var(--color-card-hover);
    --text: var(--color-text);
    --text-2: var(--color-text-muted);
    --text-3: var(--color-text-subtle);
    --muted: var(--color-text-subtle);
    --line: var(--color-border);
    --line-2: var(--color-border-strong);
    --brand: #a78bfa;
    --brand-dark: var(--color-primary);
    --brand2: #a78bfa;
    --brand3: #c4b5fd;
    --danger: #f87171;
    --success: #34d399;
    --info: #60a5fa;
  }
}

/* ============================================================
 * 通用页面背景（防止闪白）
 * ============================================================ */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-wrap,
:root[data-theme="dark"] .gen-wrap,
:root[data-theme="dark"] .as-wrap,
:root[data-theme="dark"] .vc-wrap,
:root[data-theme="dark"] .h5-wrap,
:root[data-theme="dark"] .dashboard,
:root[data-theme="dark"] .workspace {
  background: var(--color-bg);
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) .app-wrap,
  :root:not([data-theme="light"]) .gen-wrap {
    background: var(--color-bg);
    color: var(--color-text);
  }
}

/* ============================================================
 * 卡片 / 面板 / 输入控件（暗色下变深 + 边框变亮）
 * ============================================================ */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .surface,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .h5-body,
:root[data-theme="dark"] .vc-card,
:root[data-theme="dark"] .as-card,
:root[data-theme="dark"] .canvas-card,
:root[data-theme="dark"] .param-card,
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .db-card,
:root[data-theme="dark"] .db-panel {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .db-card:hover {
  background: var(--color-card-hover) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] button {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
  border-color: var(--color-primary);
}

/* ============================================================
 * 按钮（继承新 .btn-* 样式，无需重复）
 * ============================================================ */
:root[data-theme="dark"] .btn-secondary {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}
:root[data-theme="dark"] .btn-secondary:hover {
  background: var(--color-card-hover);
  border-color: var(--color-border-strong);
}

/* ============================================================
 * 链接 / 文本 / 标题
 * ============================================================ */
:root[data-theme="dark"] a { color: #a78bfa; }
:root[data-theme="dark"] a:hover { color: #c4b5fd; }

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--color-text);
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] small {
  color: var(--color-text-subtle);
}

:root[data-theme="dark"] hr {
  border-color: var(--color-border);
}

/* ============================================================
 * 顶部导航 / 工具栏 / 表单
 * ============================================================ */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] .h5-header {
  background: rgba(15, 23, 42, .82);
  border-color: var(--color-border);
}
:root[data-theme="dark"] .brand { color: #c4b5fd; }

:root[data-theme="dark"] .menu a { color: var(--color-text-muted); }
:root[data-theme="dark"] .menu a:hover,
:root[data-theme="dark"] .menu a.active {
  color: var(--color-primary);
  background: rgba(167, 139, 250, .12);
}

/* ============================================================
 * 表格 / 状态 badge / 标签
 * ============================================================ */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] table {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] table thead { background: var(--color-bg-alt); color: var(--color-text-subtle); }
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] table tbody td { border-color: var(--color-border); }
:root[data-theme="dark"] .table tbody tr:hover { background: var(--color-card-hover); }

:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .chip {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
:root[data-theme="dark"] .badge.success,
:root[data-theme="dark"] .alert-success {
  background: var(--color-success-bg) !important;
  color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}
:root[data-theme="dark"] .badge.warn,
:root[data-theme="dark"] .badge.warning,
:root[data-theme="dark"] .alert-warning {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}
:root[data-theme="dark"] .badge.danger,
:root[data-theme="dark"] .alert-danger {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
:root[data-theme="dark"] .alert-info {
  background: var(--color-info-bg) !important;
  color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}
:root[data-theme="dark"] .alert {
  border-color: var(--color-border);
}

/* ============================================================
 * 弹窗 / Drawer / Tooltip / 下拉菜单
 * ============================================================ */
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .dialog,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .dropdown,
:root[data-theme="dark"] .popup,
:root[data-theme="dark"] .user-dropdown,
:root[data-theme="dark"] .vc-modal-box {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
 * 代码块 / 滚动条 / 焦点环
 * ============================================================ */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre,
:root[data-theme="dark"] .hljs {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="dark"] ::-webkit-scrollbar { background: #1e293b; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

:root[data-theme="dark"] :focus-visible {
  outline-color: var(--color-primary);
}

/* ============================================================
 * 后台专属（admin-*）
 * ============================================================ */
:root[data-theme="dark"] .admin-sidebar,
:root[data-theme="dark"] .admin-topbar,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .user-section {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
:root[data-theme="dark"] .admin-menu a {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .admin-menu a:hover,
:root[data-theme="dark"] .admin-menu a.active {
  background: rgba(167, 139, 250, .12) !important;
  color: var(--color-primary) !important;
}
:root[data-theme="dark"] .stat-card {
  background: linear-gradient(160deg, var(--color-card), var(--color-bg-alt));
  border-color: var(--color-border);
  color: var(--color-text);
}
:root[data-theme="dark"] .stat-card-num { color: #c4b5fd; }

/* ============================================================
 * m.php / 工作台 (H5) 专属
 * ============================================================ */
:root[data-theme="dark"] .h5-body { background: var(--color-bg) !important; }
:root[data-theme="dark"] .h5-tabbar {
  background: var(--color-card) !important;
  border-top-color: var(--color-border) !important;
}
:root[data-theme="dark"] .h5-tabbar .tab-item { color: var(--color-text-subtle); }
:root[data-theme="dark"] .h5-tabbar .tab-item.active { color: var(--color-primary); }
:root[data-theme="dark"] .upload-box {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
:root[data-theme="dark"] .upload-box:active,
:root[data-theme="dark"] .upload-box.drag-over {
  background: rgba(124, 58, 237, .18);
  border-color: var(--color-primary);
}
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .empty-state p { color: var(--color-text-subtle); }

/* ============================================================
 * 主题切换按钮 (#theme-toggle)
 * ============================================================ */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}
#theme-toggle:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-strong);
  transform: scale(1.05);
}
#theme-toggle:active { transform: scale(.95); }