/* ═══════════════════════════════════════════════════════════════════
   theme-b.css · 方案 B「简白」—— 现代 SaaS 留白型
   
   设计意图：给**不需要天天盯、但希望一眼看懂**的用户（含总代老板、
   偶尔登录的运营）。低信息密度、强视觉引导、移动端友好。
   
   视觉语言：
     · 全浅色，侧栏也是白的 —— 去掉深色块，整体更轻
     · 大圆角（10px）+ 明显柔和阴影 —— 卡片"浮"在背景上
     · 大留白、大字号：牺牲密度换可读性
     · 主色靛蓝 #4f46e5，配柔和渐变点缀
     · 卡片分组更明确：同类信息一定包在同一个卡里
   ═══════════════════════════════════════════════════════════════════ */

/* 皮肤选择器：三份主题 CSS 全部常驻，由 <html data-theme> 决定哪份生效。 */
html[data-theme="b"] {
  --font: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "Inter", -apple-system, "SF Pro Text", "PingFang SC", sans-serif;
  --fs-base: 14px;
  --fs-title: 24px;
  --fs-stat: 30px;

  /* 尺寸：宽松 */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 68px;
  --header-h: 60px;
  --pad-x: 24px;
  --page-pad: 28px;
  --gap: 16px;
  --content-max: 1520px;
  --card-pad-x: 20px;
  --card-pad-y: 18px;
  --stat-pad: 20px;
  --btn-h: 36px;
  --th-pad: 11px 16px;
  --td-pad: 14px 16px;
  --bar-h: 7px;

  /* 圆角：大而圆润 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-lg: 16px;
  --badge-radius: 99px;

  /* ── 表面（全浅色） ── */
  --bg: #f7f8fc;
  --bg-card: #ffffff;
  --bg-header: rgba(255, 255, 255, .88);
  --bg-modal: #ffffff;
  --bg-modal-foot: #fafbff;
  --bg-sidebar: #ffffff;
  --header-blur: blur(12px);
  --card-blur: none;

  /* ── 文字（对比更柔） ── */
  --text: #111827;
  --text-2: #4b5563;
  --text-dim: #9ca3af;

  /* ── 边框（更浅，让卡片靠阴影分层） ── */
  --border: #eef0f6;
  --border-subtle: #f5f6fa;
  --border-strong: #dfe3ec;
  --border-focus: #b4b9e8;

  /* ── 主色：靛蓝 ── */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-fg: #ffffff;
  --accent-soft: #eef2ff;
  --accent-glow: rgba(79, 70, 229, .14);
  --accent-shadow: 0 4px 12px rgba(79, 70, 229, .26);

  --brand-bg: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --brand-fg: #ffffff;

  /* ── 侧栏（浅色，靠浅灰底区分） ── */
  --nav-hover: #f4f5fb;
  --nav-active-bg: #eef2ff;
  --nav-active-fg: #4f46e5;
  --nav-indicator: #4f46e5;
  --nav-indicator-w: 0px;   /* B 方案不用左侧竖条，用整体底色高亮 */
  --nav-icon: #9ca3af;

  /* ── 状态色 ── */
  --ok-bg: #ecfdf5;   --ok-fg: #047857;   --ok-text: #065f46;   --ok-border: #a7f3d0;
  --warn-bg: #fffbeb; --warn-fg: #b45309; --warn-text: #92400e; --warn-border: #fde68a;
  --warn-solid: #f59e0b;
  --danger: #e11d48;
  --danger-bg: #fff1f4;      --danger-bg-hover: #ffe4e9;
  --danger-bg-2: #fff1f4;    --danger-fg: #be123c;  --danger-text: #9f1239; --danger-border: #fecdd3;
  --info-bg: #eff6ff;        --info-fg: #1d4ed8;    --info-text: #1e40af;  --info-border: #bfdbfe;
  --muted-bg: #f4f5fa;       --muted-fg: #6b7280;

  --up: #059669;
  --down: #e11d48;
  --flat: #9ca3af;

  /* ── 图表色序（更饱和、更"现代"） ── */
  --c1-bg: #eef2ff; --c1-fg: #4f46e5;
  --c2-bg: #ecfdf5; --c2-fg: #059669;
  --c3-bg: #fff7ed; --c3-fg: #ea580c;
  --c4-bg: #f5f3ff; --c4-fg: #7c3aed;
  --c5-bg: #fdf2f8; --c5-fg: #db2777;
  --chart-line: #6366f1;
  --chart-line-2: #10b981;
  --chart-area-from: rgba(99, 102, 241, .20);
  --chart-area-to: rgba(99, 102, 241, 0);
  --chart-grid: #f0f1f7;
  --chart-axis: #b6bcc9;

  /* ── 其他 ── */
  --input-bg: #f7f8fc;
  --btn-bg: #ffffff;
  --btn-hover: #f8f9fd;
  --th-bg: #fafbff;
  --row-hover: #fafbff;
  --row-selected: #f3f4ff;
  --bar-track: #eef0f6;
  --switch-off: #d4d8e3;
  --skel: #f0f1f7;
  --scroll-thumb: #dbdfe9;
  --scroll-thumb-hover: #c3c9d8;
  --overlay: rgba(17, 24, 39, .38);
  --tip-bg: #111827; --tip-fg: #f9fafb;
  /* 阴影是 B 方案的灵魂：比 A 明显得多 */
  --shadow-1: 0 1px 3px rgba(17, 24, 39, .04), 0 6px 16px -6px rgba(17, 24, 39, .07);
  --shadow-2: 0 4px 18px rgba(17, 24, 39, .10);
  --shadow-modal: 0 24px 64px -12px rgba(17, 24, 39, .24);
  --badge-bg: #f4f5fa; --badge-fg: #6b7280;
  --spark-opacity: .42;
}

/* B 方案：内容区用柔和背景，卡片浮起来 */
.app-b .sidebar { border-right-color: var(--border); }
.app-b .stat { transition: transform .16s, box-shadow .16s; }
.app-b .stat:hover { transform: translateY(-2px); box-shadow: 0 4px 20px -4px rgba(17,24,39,.12); }
.app-b .card { transition: box-shadow .16s; }
.app-b .btn { font-weight: 600; }
.app-b .btn.primary { box-shadow: var(--accent-shadow); }
/* 顶栏与侧栏都是浅色，需要一个细分隔 */
.app-b .header { border-bottom-color: var(--border); }