/* =========================================================
   AutoPMS 深色主题（全局统一视觉体系）
   ---------------------------------------------------------
   色板与首页一致：深空底 #070B14 + 电光青 #2AE7FF + 深空蓝 #2F6BFF
   生效范围：[data-theme="dark"]
     - 对外页面（landing 布局）固定深色
     - 登录后产品界面由用户在顶栏切换，默认深色
   浅色模式：本文件所有规则都不命中，与改造前完全一致

   两层机制：
     1) 本文件：覆写 CSS 变量 + 直接覆写已写死 white/#f8f9fb 的组件类
     2) theme-dark-inline.css：把视图里 2000+ 处内联硬编码浅色集体映射
        （自动生成，见 scripts/dev/gen_dark_inline_map.mjs）
   ========================================================= */

[data-theme="dark"] {
  /* ---------- 深色基底（本主题自有 token） ---------- */
  --dk-base: #070B14;
  --dk-surface: #0B111C;
  --dk-card: #0E1522;
  --dk-card-2: #131C2C;
  --dk-border: #1E2A3D;
  --dk-border-strong: #2A3A52;
  --dk-text: #E6EDF7;
  --dk-text-2: #A9BACD;
  --dk-text-3: #7C90A6;
  --dk-cyan: #2AE7FF;
  --dk-blue: #2F6BFF;

  /* ---------- 语义 token 覆写（原 :root 全套） ---------- */
  --bg-page: #070B14;
  --bg-primary: #0E1522;
  --bg-secondary: #0B111C;
  --card-bg: #0E1522;
  --card-border: #1E2A3D;
  --border-color: #1E2A3D;
  --border-light: #1A2434;
  --border-medium: #2A3A52;
  --text-primary: #E6EDF7;
  --text-secondary: #A9BACD;
  --text-muted: #7C90A6;
  --white: #0E1522;

  /* 另一套别名（--color-*），视图与组件里同样大量使用 */
  --color-background-primary: #0E1522;
  --color-background-secondary: #0B111C;
  --color-background-tertiary: #131C2C;
  --color-bg-primary: #0E1522;
  --color-bg-secondary: #0B111C;
  --color-bg-tertiary: #131C2C;
  --color-border-primary: #1E2A3D;
  --color-border-secondary: #2A3A52;
  --color-border-tertiary: #1A2434;
  --color-text-primary: #E6EDF7;
  --color-text-secondary: #A9BACD;
  --color-text-tertiary: #7C90A6;
  --color-blue-600: #4D93FF;
  --color-blue-700: #6FB8FF;
  --color-green-600: #34D399;
  --color-gray-400: #7C90A6;
  --color-gray-500: #8FA6BD;
  --color-accent: #2AE7FF;

  /* ---------- 灰阶反转：浅色下 gray-50 是底、gray-900 是字 ---------- */
  --gray-30: #0B111C;
  --gray-50: #101826;
  --gray-100: #1A2434;
  --gray-150: #223047;
  --gray-200: #C3D2E4;
  --gray-300: #9CAFC7;
  --gray-400: #8496AD;
  --gray-500: #8FA6BD;
  --gray-600: #B6C6D9;
  --gray-700: #D5E0EE;
  --gray-800: #E6EDF7;
  --gray-900: #F2F6FC;

  /* ---------- 品牌蓝：作为底色保持饱和，作为文字提亮 ---------- */
  --blue-50: rgba(47, 107, 255, 0.14);
  --blue-100: rgba(47, 107, 255, 0.22);
  --blue-200: #1E3A6B;
  --blue-300: #7CC4F5;
  --blue-400: #60A5FA;
  --blue-500: #4D93FF;
  /* blue-600/700 在浅色下是「深蓝文字」，深色底上必须提亮才看得清
     （#2F6BFF 在 #0E1522 上只有 3.1:1，标签和小字吃力） */
  --blue-600: #4D93FF;
  --blue-700: #6FB8FF;

  /* ---------- 语义色：浓底改半透明，文字提亮 ---------- */
  --green-50: rgba(16, 185, 129, 0.14);
  --green-200: rgba(16, 185, 129, 0.34);
  --green-500: #34D399;
  --green-600: #34D399;
  --green-700: #6EE7B7;

  --red-50: rgba(239, 68, 68, 0.14);
  --red-100: rgba(239, 68, 68, 0.18);
  --red-200: rgba(239, 68, 68, 0.30);
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #F87171;
  --red-600: #F87171;
  --red-700: #FCA5A5;

  --amber-50: rgba(245, 158, 11, 0.14);
  --amber-100: rgba(245, 158, 11, 0.18);
  --amber-300: #FCD34D;
  --amber-600: #FBBF24;
  --amber-700: #FBBF24;

  --teal-50: rgba(16, 185, 129, 0.14);
  --teal-100: rgba(16, 185, 129, 0.18);
  --teal-200: rgba(16, 185, 129, 0.30);
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #34D399;
  --teal-600: #34D399;
  --teal-700: #6EE7B7;

  --purple-100: rgba(47, 107, 255, 0.18);
  --purple-300: #9CC3EA;
  --purple-500: #6FB8FF;
  --purple-600: #7CC4F5;
  --purple-700: #8FD4FF;

  /* ---------- 玻璃 / 渐变 / 阴影 ---------- */
  --glass-bg: rgba(10, 15, 26, 0.72);
  --glass-bg-strong: rgba(8, 12, 22, 0.86);
  --gradient-sidebar: linear-gradient(180deg, #060A12 0%, #0A101C 62%, #0C1422 100%);
  --gradient-brand: linear-gradient(135deg, #1B4FBF 0%, #2F6BFF 52%, #2AE7FF 145%);
  --gradient-brand-hover: linear-gradient(135deg, #2660D8 0%, #3D7BFF 52%, #2AE7FF 150%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(47, 107, 255, 0.16) 0%, rgba(42, 231, 255, 0.08) 100%);
  --gradient-card-accent: linear-gradient(135deg, rgba(42, 231, 255, 0.08), rgba(47, 107, 255, 0.03));
  --gradient-hero: radial-gradient(1100px 420px at 18% -8%, rgba(47, 107, 255, 0.18), transparent 60%),
                   radial-gradient(900px 380px at 85% -12%, rgba(42, 231, 255, 0.10), transparent 55%),
                   linear-gradient(180deg, #070B14 0%, #05070E 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 36px -10px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.8);
  --shadow-blue: 0 8px 24px -6px rgba(47, 107, 255, 0.45), 0 2px 6px -2px rgba(47, 107, 255, 0.3);
  --glow-blue: 0 0 0 3px rgba(42, 231, 255, 0.18);
  --ring-focus: 0 0 0 3px rgba(42, 231, 255, 0.24);
}

/* =========================================================
   1. 画布与基础排版
   ========================================================= */
[data-theme="dark"] body,
[data-theme="dark"] body.landing-layout {
  background: var(--dk-base);
  color: var(--dk-text);
}

/* 一层极淡的科技感打光：只做氛围，不铺满，避免密集表格发灰 */
[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 12% -6%, rgba(42, 231, 255, 0.05), transparent 62%),
    radial-gradient(680px 400px at 88% -10%, rgba(47, 107, 255, 0.06), transparent 64%);
}

/* 上层内容要压住打光层 */
[data-theme="dark"] .main-content,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .landing-nav,
[data-theme="dark"] main,
[data-theme="dark"] footer {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] ::selection {
  background: rgba(42, 231, 255, 0.28);
  color: #FFFFFF;
}

/* 滚动条：浅色下是系统默认，深色下跟着走 */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0A0F1A; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #1E2A3D;
  border-radius: 6px;
  border: 2px solid #0A0F1A;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #2A3A52; }

/* 没有设过颜色、也没写 class 的裸链接/按钮：浏览器默认色是深蓝(#0000EE)
   和纯黑，落在深色底上几乎看不见。只挑「没有任何 class 且没有内联颜色」的，
   不会碰到 .nav-link / .btn 这类已配色元素 */
[data-theme="dark"] a:not([class]):not([style*="color"]) { color: #7CC4F5; }
[data-theme="dark"] button:not([class]):not([style*="color"]) { color: var(--dk-text); }

/* =========================================================
   2. 应用外壳：侧边栏 / 顶栏 / 内容区
   ========================================================= */
[data-theme="dark"] .topbar {
  border-bottom: 1px solid var(--dk-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

[data-theme="dark"] .topbar-title { color: var(--dk-text); }

[data-theme="dark"] .sidebar {
  border-right: 1px solid var(--dk-border);
}

/* =========================================================
   3. 卡片与容器（含 app.css 里写死 white 的几个）
   ========================================================= */
[data-theme="dark"] .card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .dashboard-preview,
[data-theme="dark"] .nav-collapse,
[data-theme="dark"] .modal {
  background: var(--dk-card);
  border: 1px solid var(--dk-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -14px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .kpi-card:hover {
  border-color: var(--dk-border-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 32px -16px rgba(0, 0, 0, 0.9);
}

/* 首页已经自带深色体系，这里不动它 */
[data-theme="dark"] body.landing-layout .price-card.featured {
  border-color: rgba(42, 231, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(42, 231, 255, 0.25) inset, 0 18px 48px -22px rgba(42, 231, 255, 0.5);
}

/* =========================================================
   4. 表单控件：UA 默认白底必须显式覆盖，否则深色下一片白
   ========================================================= */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--dk-card-2);
  color: var(--dk-text);
  border-color: var(--dk-border-strong);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #5F748C;
}

[data-theme="dark"] select option,
[data-theme="dark"] datalist option {
  background: var(--dk-card-2);
  color: var(--dk-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: rgba(42, 231, 255, 0.55);
  box-shadow: var(--ring-focus);
  outline: none;
}

/* 日期选择器的日历图标在深色下是黑的，反色处理 */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
  opacity: 0.7;
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: #2AE7FF;
}

/* =========================================================
   5. 表格：没有内联底色的表头默认是透明的，给一层底让表头立起来
   （内联样式优先级更高，有内联色的表格仍按内联走，不会被这层盖掉）
   ========================================================= */
[data-theme="dark"] table { color: var(--dk-text); }
[data-theme="dark"] thead th {
  background: var(--dk-card-2);
  color: var(--dk-text-2);
  border-color: var(--dk-border);
}
[data-theme="dark"] tbody tr { border-color: var(--dk-border); }
[data-theme="dark"] tbody tr:hover { background: rgba(42, 231, 255, 0.04); }

/* =========================================================
   6. 状态色组件（app.css 里写死浅底的几个）
   ========================================================= */
[data-theme="dark"] .severity-严重,
[data-theme="dark"] .kpi-danger,
[data-theme="dark"] .priority-high,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .dp-status.issue {
  background: rgba(239, 68, 68, 0.14);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.32);
}

[data-theme="dark"] .severity-一般,
[data-theme="dark"] .kpi-warn,
[data-theme="dark"] .priority-med,
[data-theme="dark"] .alert-warn,
[data-theme="dark"] .dp-status.warn,
[data-theme="dark"] .price-badge.soon {
  background: rgba(245, 158, 11, 0.14);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.32);
}

[data-theme="dark"] .severity-轻微 {
  background: rgba(16, 185, 129, 0.14);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.32);
}

[data-theme="dark"] .priority-low {
  background: rgba(47, 107, 255, 0.14);
  color: #7CC4F5;
}

[data-theme="dark"] .badge-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #F87171;
}

[data-theme="dark"] .badge-warn {
  background: rgba(245, 158, 11, 0.16);
  color: #FBBF24;
}

[data-theme="dark"] .kpi-value-danger { color: #F87171; }
[data-theme="dark"] .dp-metric-sub.up { color: #34D399; }
[data-theme="dark"] .dp-metric-sub.warn { color: #FBBF24; }
[data-theme="dark"] .dp-metric-sub.down { color: #F87171; }

/* =========================================================
   7. 对外页面（landing）—— 固定深色，与首页同一套语言
   ========================================================= */
[data-theme="dark"] .landing-layout {
  background: var(--dk-base);
}

[data-theme="dark"] .landing-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .landing-nav a,
[data-theme="dark"] .landing-nav .nav-link {
  color: var(--dk-text-2);
}

[data-theme="dark"] .landing-nav .nav-link:hover,
[data-theme="dark"] .landing-nav .nav-link.active {
  color: #FFFFFF;
}

[data-theme="dark"] .enterprise-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(47, 107, 255, 0.10));
  border: 1px solid rgba(245, 158, 11, 0.28);
}

/* 首页自带 .hx-* 深色体系，下面这些规则是为了让「其它 landing 页」
   在没写 hx 类的情况下也能拿到同样的玻璃卡质感 */
[data-theme="dark"] .section-title,
[data-theme="dark"] .hero-title {
  color: var(--dk-text);
}

[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .hero-subtitle {
  color: var(--dk-text-2);
}

/* 内联的「品牌蓝渐变」大横幅（岗位总览、岗位详解的 hero）：
   浅色下是 #0F4280→#2E7FC4 的实心蓝，落到深色底上会变成一块突兀的高饱和蓝板。
   改成「深空底 + 蓝→青薄雾」，与首页 hero 同一套语言。 */
[data-theme="dark"] [style*="linear-gradient" i][style*="#0F4280" i],
[data-theme="dark"] [style*="linear-gradient" i][style*="#1456A0" i] {
  background-image:
    radial-gradient(620px 320px at 82% -20%, rgba(42, 231, 255, 0.20), transparent 62%),
    radial-gradient(520px 280px at 10% 120%, rgba(47, 107, 255, 0.26), transparent 66%),
    linear-gradient(135deg, #0B1220 0%, #0C1A30 52%, #0B1220 100%) !important;
  border: 1px solid rgba(42, 231, 255, 0.20);
  box-shadow: 0 24px 60px -30px rgba(42, 231, 255, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* =========================================================
   8. 引导教程弹层（tutorial.js 运行时注入 <style>，写死白底）
   注入的样式比本文件晚，但本文件选择器多一个 [data-theme] 属性，
   特异性更高，仍然能压住
   ========================================================= */
[data-theme="dark"] .tutorial-tooltip {
  background: var(--dk-card-2);
  border: 1px solid var(--dk-border-strong);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.92);
}

[data-theme="dark"] .tt-step { color: #7CC4F5; }
[data-theme="dark"] .tt-title { color: var(--dk-text); }
[data-theme="dark"] .tt-content { color: var(--dk-text-2); }

[data-theme="dark"] .tt-skip,
[data-theme="dark"] .tt-prev {
  background: #1A2434;
  color: var(--dk-text-2);
}

[data-theme="dark"] .tt-skip:hover,
[data-theme="dark"] .tt-prev:hover { background: #223047; }

[data-theme="dark"] .tt-next {
  background: var(--gradient-brand);
  color: #FFFFFF;
}

[data-theme="dark"] .tt-next:hover { filter: brightness(1.12); }

/* =========================================================
   9. 弹窗 / 遮罩 / 提示
   ========================================================= */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .modal-backdrop {
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(6px);
}

[data-theme="dark"] .tooltip,
[data-theme="dark"] #glossary-tooltip {
  background: #131C2C;
  color: var(--dk-text);
  border: 1px solid var(--dk-border);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.9);
}

/* 打印时一律走浅色，避免深色底打印成一片黑 */
@media print {
  [data-theme="dark"] body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}