/* ═══════════════════════════════════════════════════════════════════
   theme-a.css · 方案 A「磐石」—— 专业紧凑型控制台
   
   设计意图：给**每天要盯后台几小时的运营**用。
   信息密度优先，视觉噪音降到最低，不需要"好看"，需要"一眼看全"。
   
   视觉语言：
     · 深色侧栏 + 浅色内容区（经典企业控制台，久看不累）
     · 方正小圆角（4px）—— 传递严谨、稳定
     · 高信息密度：行高更紧、字号更小、留白更少
     · 主色深蓝 #2563eb，克制使用；状态色是信息主力
     · 阴影极轻 —— 靠边框分层而不是投影，更"工程"
   ═══════════════════════════════════════════════════════════════════ */

/* 皮肤选择器：三份主题 CSS 全部常驻，由 <html data-theme> 决定哪一份生效。
   原型阶段是「构建期三选一内联」，正式版改为「运行时切换」，故加属性选择器。 */
html[data-theme="a"] {
  /* 字体：中文优先思源/苹方，数字用等宽便于对齐 */
  --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-base: 13px;
  --fs-title: 19px;
  --fs-stat: 25px;

  /* 尺寸：紧凑 */
  --sidebar-w: 208px;
  --sidebar-w-collapsed: 54px;
  --header-h: 48px;
  --pad-x: 16px;
  --page-pad: 18px;
  --gap: 12px;
  --content-max: 1680px;
  --card-pad-x: 14px;
  --card-pad-y: 12px;
  --stat-pad: 13px 14px;
  --btn-h: 30px;
  --th-pad: 8px 12px;
  --td-pad: 9px 12px;
  --bar-h: 5px;

  /* 圆角：方正 */
  --radius: 5px;
  --radius-sm: 4px;
  --radius-xs: 3px;
  --radius-lg: 7px;
  --badge-radius: 3px;

  /* ── 表面 ── */
  --bg: #f4f6f9;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --bg-modal: #ffffff;
  --bg-modal-foot: #fafbfc;
  --bg-sidebar: #1b2230;          /* 深色侧栏：A 方案的标志 */
  --header-blur: none;
  --card-blur: none;

  /* ── 文字 ── */
  --text: #141a24;
  --text-2: #3d4859;
  --text-dim: #788397;

  /* ── 边框 ── */
  --border: #e2e6ed;
  --border-subtle: #eef1f5;
  --border-strong: #ccd3de;
  --border-focus: #9db4d8;

  /* ── 主色 ── */
  --accent: #2563eb;
  --accent-hover: #1d4fd7;
  --accent-fg: #ffffff;
  --accent-soft: #eaf0fe;
  --accent-glow: rgba(37, 99, 235, .16);
  --accent-shadow: 0 1px 2px rgba(37, 99, 235, .28);

  /* ── 品牌标 ── */
  --brand-bg: #2563eb;
  --brand-fg: #ffffff;

  /* ── 侧栏交互（深底专用） ── */
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-active-bg: rgba(37, 99, 235, .22);
  --nav-active-fg: #ffffff;
  --nav-indicator: #4d8dff;
  --nav-indicator-w: 3px;
  --nav-icon: #8d99ad;

  /* ── 状态色（中国股市约定：涨=红 跌=绿 不适用于此处；
       这里是业务状态色，用国际惯例 绿=健康 红=危险） ── */
  --ok-bg: #e6f6ec;   --ok-fg: #0f7b3f;   --ok-text: #0b6231;   --ok-border: #b9e5c9;
  --warn-bg: #fdf3e0; --warn-fg: #9a6208; --warn-text: #7d4e05; --warn-border: #f5ddb0;
  --warn-solid: #e0972a;
  --danger: #d93a3a;
  --danger-bg: #fdeeee;      --danger-bg-hover: #fbdcdc;
  --danger-bg-2: #fdeced;    --danger-fg: #b32222;  --danger-text: #93201f; --danger-border: #f3c4c6;
  --info-bg: #eaf2fd;        --info-fg: #1d5db8;    --info-text: #1a4f9c;  --info-border: #bfd6f5;
  --muted-bg: #eef1f5;       --muted-fg: #64708a;

  --up: #0f9d58;      /* 同比上涨 */
  --down: #d93a3a;    /* 同比下降 */
  --flat: #788397;

  /* ── 图表色序 ── */
  --c1-bg: #e8effd; --c1-fg: #2563eb;
  --c2-bg: #e6f6ec; --c2-fg: #0f7b3f;
  --c3-bg: #fdf3e0; --c3-fg: #b57612;
  --c4-bg: #f0eafc; --c4-fg: #6d3fd1;
  --c5-bg: #fdeeee; --c5-fg: #c93535;
  --chart-line: #2563eb;
  --chart-line-2: #0f9d58;
  --chart-area-from: rgba(37, 99, 235, .22);
  --chart-area-to: rgba(37, 99, 235, 0);
  --chart-grid: #e8ecf2;
  --chart-axis: #98a2b3;

  /* ── 其他 ── */
  --input-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-hover: #f6f8fb;
  --th-bg: #fafbfc;
  --row-hover: #f7f9fc;
  --row-selected: #eef4fe;
  --bar-track: #e8ecf2;
  --switch-off: #cbd3df;
  --skel: #e9edf3;
  --scroll-thumb: #ccd4e0;
  --scroll-thumb-hover: #aab5c6;
  --overlay: rgba(20, 26, 36, .45);
  --tip-bg: #1b2230; --tip-fg: #f2f5f9;
  --shadow-1: 0 1px 2px rgba(20, 26, 36, .05);
  --shadow-2: 0 4px 14px rgba(20, 26, 36, .14);
  --shadow-modal: 0 16px 44px rgba(20, 26, 36, .22);
  --badge-bg: #eef1f5; --badge-fg: #64708a;
  --spark-opacity: .5;
}

/* A 方案的侧栏在深底上，导航文字要提亮 */
.app-a .nav-item { color: #aab4c4; }
.app-a .nav-item:hover { color: #ffffff; }
.app-a .nav-item.active { color: #ffffff; }
.app-a .nav-group-label { color: #5f6b7f; }
.app-a .brand-name { color: #ffffff; }
.app-a .brand-sub { color: #7b8798; }
.app-a .sidebar-foot { color: #6b7688; }
.app-a .sidebar { border-right-color: #0f1620; }
.app-a .brand { border-bottom-color: rgba(255,255,255,.07); }
.app-a .nav-badge { background: rgba(255,255,255,.13); color: #d5dce6; }
.app-a .nav-badge.warn { background: rgba(224,151,42,.24); color: #f2c477; }

/* A 方案的滚动条在深色侧栏里 */
.app-a .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); background-clip: content-box; }