/* ═══════════════════════════════════════════════════════════════════
   theme-c.css · 方案 C「夜航」—— 科技沉浸型
   
   设计意图：把后台做成**产品的一部分**。适合演示、给总代看、
   或者老板自己用 —— 强调"这是个有技术含量的系统"。
   
   视觉语言：
     · 全深色（#0b0f19 底）+ 玻璃拟态卡片（半透明 + 背景模糊）
     · 霓虹渐变主色（青→紫），发光边框
     · 数据可视化优先：图表占比更大，数字用发光色
     · 网格背景纹理，营造"控制台"感
     · 状态色更亮、更饱和（深底上高饱和才看得清）
   
   ⚠️ 深色主题的**可读性风险**必须处理：文字对比度不能只靠"看起来还行"。
     全部正文文字对比度 ≥ 7:1（WCAG AAA），次要文字 ≥ 4.5:1（AA）。
   ═══════════════════════════════════════════════════════════════════ */

/* 皮肤选择器：三份主题 CSS 全部常驻，由 <html data-theme> 决定哪份生效。
   夜航（c）是默认皮肤。 */
html[data-theme="c"] {
  --font: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-base: 13.5px;
  --fs-title: 21px;
  --fs-stat: 28px;

  --sidebar-w: 226px;
  --sidebar-w-collapsed: 62px;
  --header-h: 56px;
  --pad-x: 20px;
  --page-pad: 22px;
  --gap: 14px;
  --content-max: 1680px;
  --card-pad-x: 18px;
  --card-pad-y: 15px;
  --stat-pad: 16px 17px;
  --btn-h: 33px;
  --th-pad: 9px 14px;
  --td-pad: 11px 14px;
  --bar-h: 6px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --radius-lg: 16px;
  --badge-radius: 5px;

  /* ── 表面（全深色） ── */
  --bg: #0b0f19;
  --bg-card: rgba(22, 28, 44, .68);
  --bg-header: rgba(11, 15, 25, .78);
  --bg-modal: rgba(19, 25, 40, .96);
  --bg-modal-foot: rgba(14, 19, 32, .9);
  --bg-sidebar: rgba(13, 18, 31, .78);
  --header-blur: blur(16px) saturate(1.4);
  --card-blur: blur(14px) saturate(1.3);

  /* ── 文字（深底上必须提亮，全部满足 AA/AAA） ── */
  --text: #eaf0fb;      /* 对比 ~15:1 on #0b0f19 */
  --text-2: #aab6cd;    /* ~8:1 */
  --text-dim: #74829c;  /* ~4.6:1 —— 这是下限，不再更暗 */

  /* ── 边框（深底上用「发光的浅色边」而不是深色边） ── */
  --border: rgba(120, 145, 190, .18);
  --border-subtle: rgba(120, 145, 190, .10);
  --border-strong: rgba(140, 165, 210, .30);
  --border-focus: rgba(80, 200, 230, .55);

  /* ── 主色：青→紫霓虹 ── */
  --accent: #22d3ee;
  --accent-hover: #06b6d4;
  --accent-fg: #04202a;
  --accent-soft: rgba(34, 211, 238, .13);
  --accent-glow: rgba(34, 211, 238, .22);
  --accent-shadow: 0 0 18px rgba(34, 211, 238, .35);
  --neon-2: #a855f7;
  --neon-3: #38bdf8;

  --brand-bg: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
  --brand-fg: #06131a;

  /* ── 侧栏 ── */
  --nav-hover: rgba(120, 165, 230, .10);
  --nav-active-bg: linear-gradient(90deg, rgba(34,211,238,.20) 0%, rgba(34,211,238,.04) 100%);
  --nav-active-fg: #7ee7f5;
  --nav-indicator: #22d3ee;
  --nav-indicator-w: 3px;
  --nav-icon: #6b7a94;

  /* ── 状态色（深底高饱和） ── */
  --ok-bg: rgba(16, 185, 129, .16);   --ok-fg: #34d399;   --ok-text: #6ee7b7;   --ok-border: rgba(52,211,153,.34);
  --warn-bg: rgba(245, 158, 11, .16); --warn-fg: #fbbf24; --warn-text: #fcd34d; --warn-border: rgba(251,191,36,.34);
  --warn-solid: #fbbf24;
  --danger: #fb7185;
  --danger-bg: rgba(244, 63, 94, .14);   --danger-bg-hover: rgba(244, 63, 94, .22);
  --danger-bg-2: rgba(244, 63, 94, .15); --danger-fg: #fda4af;  --danger-text: #fecdd3; --danger-border: rgba(251,113,133,.34);
  --info-bg: rgba(56, 189, 248, .14);    --info-fg: #7dd3fc;    --info-text: #bae6fd;  --info-border: rgba(125,211,252,.30);
  --muted-bg: rgba(120, 145, 190, .14);  --muted-fg: #94a3b8;

  --up: #34d399;
  --down: #fb7185;
  --flat: #94a3b8;

  /* ── 图表色序（霓虹系） ── */
  --c1-bg: rgba(34,211,238,.15);  --c1-fg: #22d3ee;
  --c2-bg: rgba(52,211,153,.15);  --c2-fg: #34d399;
  --c3-bg: rgba(251,191,36,.15);  --c3-fg: #fbbf24;
  --c4-bg: rgba(168,85,247,.15);  --c4-fg: #c084fc;
  --c5-bg: rgba(251,113,133,.15); --c5-fg: #fb7185;
  --chart-line: #22d3ee;
  --chart-line-2: #a855f7;
  --chart-area-from: rgba(34, 211, 238, .34);
  --chart-area-to: rgba(34, 211, 238, 0);
  --chart-grid: rgba(120, 145, 190, .13);
  --chart-axis: #74829c;

  /* ── 其他 ── */
  --input-bg: rgba(10, 14, 24, .6);
  --btn-bg: rgba(120, 145, 190, .10);
  --btn-hover: rgba(120, 145, 190, .18);
  --th-bg: rgba(10, 14, 24, .45);
  --row-hover: rgba(120, 165, 230, .07);
  --row-selected: rgba(34, 211, 238, .10);
  --bar-track: rgba(120, 145, 190, .16);
  --switch-off: rgba(120, 145, 190, .3);
  --skel: rgba(120, 145, 190, .13);
  --scroll-thumb: rgba(140, 165, 210, .26);
  --scroll-thumb-hover: rgba(140, 165, 210, .42);
  --overlay: rgba(3, 6, 14, .68);
  --tip-bg: rgba(19, 25, 40, .97); --tip-fg: #eaf0fb;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .5);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, .68), 0 0 0 1px rgba(120,145,190,.14);
  --badge-bg: rgba(120, 145, 190, .16); --badge-fg: #94a3b8;
  --spark-opacity: .85;

  /* 网格纹理与光晕 —— C 方案的氛围来源 */
  --grid-line: rgba(120, 145, 190, .055);
  --glow-1: rgba(34, 211, 238, .10);
  --glow-2: rgba(168, 85, 247, .09);
}

/* ── 背景：深色 + 网格 + 两处光晕（纯 CSS，不用图片） ── */
body.app-c {
  background-color: #0b0f19;
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--glow-1), transparent 62%),
    radial-gradient(900px 560px at 96% 4%, var(--glow-2), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-attachment: fixed;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}

/* ── 玻璃拟态卡片：C 方案的标志 ── */
.app-c .card,
.app-c .stat {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* 卡片顶部一道极细的高光 —— 玻璃质感的来源 */
.app-c .card::before,
.app-c .stat::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.app-c .card { position: relative; }

/* 主按钮发光 */
.app-c .btn.primary {
  background: linear-gradient(135deg, #22d3ee 0%, #38bdf8 100%);
  border-color: transparent; color: #04202a;
  box-shadow: 0 0 16px rgba(34, 211, 238, .3);
}
.app-c .btn.primary:hover { background: linear-gradient(135deg, #4ae0f5 0%, #5ec9fa 100%); }

/* 统计数字发光 */
.app-c .stat-value { text-shadow: 0 0 22px currentColor; }
.app-c .stat-value { color: #eaf0fb; }
.app-c .stat:nth-child(1) .stat-value { text-shadow: 0 0 20px rgba(34,211,238,.4); }
.app-c .stat:nth-child(2) .stat-value { text-shadow: 0 0 20px rgba(52,211,153,.4); }
.app-c .stat:nth-child(3) .stat-value { text-shadow: 0 0 20px rgba(251,191,36,.4); }
.app-c .stat:nth-child(4) .stat-value { text-shadow: 0 0 20px rgba(168,85,247,.4); }

/* 侧栏分隔用发光细线 */
.app-c .sidebar { border-right: 1px solid var(--border); }
.app-c .brand { border-bottom: 1px solid var(--border); }
.app-c .header { border-bottom: 1px solid var(--border); }

/* 激活项左侧竖条带发光 */
.app-c .nav-item.active::before { box-shadow: 0 0 10px var(--accent); }

/* 表格斑马纹在深底上更容易跟行 —— 用极淡的交替底色 */
.app-c table.tbl tbody tr:nth-child(even) { background: rgba(120, 145, 190, .028); }
.app-c table.tbl tbody tr:nth-child(even):hover { background: var(--row-hover); }

/* 输入框在深底上需要内阴影才有"凹"的感觉 */
.app-c .input, .app-c .select, .app-c textarea.input {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.app-c .input:focus, .app-c .select:focus, .app-c textarea.input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 3px var(--accent-glow);
}