/* M6 设计规范 v2 —— 全站设计令牌与通用样式
 *
 * 用法：index.html 在 reset.css 之后引入本文件。
 *   <link rel="stylesheet" href="/src/theme_v2.css">
 *
 * 约定（详见 docs/设计规范-v2.md）：
 *   ① 颜色/间距/圆角/阴影/字号一律走 CSS 变量（--dsh-*），组件里不写死色值；
 *   ② 语义色固定绑定：真实数据=绿、模拟数据=橙、权限=红、链接/主色=地质蓝；
 *   ③ 旧类名（.page-title / .muted / .viz-title / .lg-row …）在这里统一重排，
 *      各模块模板不必逐个改造即可获得 v2 视觉，降低回归风险；
 *   ④ 断点：≤1200px 卡片两栏，≤900px 单栏 + 侧栏收窄。
 */

:root {
  /* —— 品牌与语义色 —— */
  --dsh-primary: #0F4C81;
  --dsh-primary-weak: #EAF2FA;
  --dsh-info: #17A2B8;
  --dsh-accent: #E67E22;          /* 模拟数据 / 提示 */
  --dsh-success: #27AE60;         /* 真实数据 / 通过 */
  --dsh-danger: #C0392B;          /* 权限 / 错误 */
  --dsh-purple: #8E44AD;

  /* —— 中性色 —— */
  --dsh-ink: #1A1A2E;
  --dsh-text: #2C3446;
  --dsh-muted: #8A94A6;
  --dsh-line: #EDF0F5;
  --dsh-bg: #F5F7FA;
  --dsh-surface: #FFFFFF;

  /* —— 间距 / 圆角 / 阴影 —— */
  --dsh-gap-1: 4px;
  --dsh-gap-2: 8px;
  --dsh-gap-3: 12px;
  --dsh-gap-4: 16px;
  --dsh-gap-5: 24px;
  --dsh-radius: 8px;
  --dsh-radius-lg: 12px;
  --dsh-shadow-1: 0 1px 2px rgba(15, 76, 129, .05), 0 1px 6px rgba(15, 76, 129, .05);
  --dsh-shadow-2: 0 4px 16px rgba(15, 76, 129, .10);

  /* —— 字号 —— */
  --dsh-fs-title: 20px;
  --dsh-fs-h2: 18px;
  --dsh-fs-body: 14px;
  --dsh-fs-muted: 12px;

  /* —— 图表配色（与 viz_m3_core / viz_m32_core / viz_m41_core 保持一致） —— */
  --dsh-chart-1: #0F4C81;
  --dsh-chart-2: #17A2B8;
  --dsh-chart-3: #E67E22;
  --dsh-chart-4: #27AE60;
  --dsh-chart-5: #8E44AD;
  --dsh-chart-6: #C0392B;
}

/* ================= 页面骨架 ================= */
.dsh-page { max-width: 1560px; margin: 0 auto; }
.dsh-page-title {
  font-size: var(--dsh-fs-title);
  font-weight: 600;
  color: var(--dsh-ink);
  margin-bottom: var(--dsh-gap-4);
  display: flex;
  align-items: center;
  gap: var(--dsh-gap-2);
}
.dsh-muted, .muted { color: var(--dsh-muted); font-size: var(--dsh-fs-muted); }
.dsh-hint {
  background: var(--dsh-primary-weak);
  border-left: 3px solid var(--dsh-primary);
  padding: var(--dsh-gap-3) var(--dsh-gap-4);
  border-radius: var(--dsh-radius);
  color: var(--dsh-text);
  font-size: 13px;
  line-height: 1.7;
}

/* 旧类名统一重排（v1 → v2 平滑升级，模板不必逐个改） */
.page-title {
  font-size: var(--dsh-fs-title);
  font-weight: 600;
  color: var(--dsh-ink);
  margin-bottom: var(--dsh-gap-4);
}
.viz-title {
  font-size: var(--dsh-fs-h2);
  font-weight: 600;
  color: var(--dsh-ink);
  margin: var(--dsh-gap-1) 0 var(--dsh-gap-3);
}
.viz-page code {
  background: var(--dsh-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--dsh-fs-muted);
  color: var(--dsh-primary);
}

/* 卡片与工具栏：v2 统一圆角/阴影/内边距 */
.ant-card {
  border-radius: var(--dsh-radius) !important;
  border-color: var(--dsh-line) !important;
}
.ant-card > .ant-card-head {
  border-bottom-color: var(--dsh-line);
  font-weight: 600;
}
.ant-card > .ant-card-head .ant-card-head-title {
  font-size: var(--dsh-fs-body);
  color: var(--dsh-ink);
}
.viz-toolbar { background: #FBFCFE; border-color: var(--dsh-line); }
.viz-toolbar .ant-checkbox-wrapper { margin-right: var(--dsh-gap-4); }

/* KPI 统计卡：数字统一主色、标题弱化 */
.dsh-kpi .ant-statistic-title { font-size: var(--dsh-fs-muted); color: var(--dsh-muted); }
.dsh-kpi .ant-statistic-content { font-size: 26px; font-weight: 700; color: var(--dsh-primary); }

/* ================= 语义标签（数据性质 / 角色 / 状态） ================= */
.dsh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--dsh-fs-muted);
  line-height: 18px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dsh-chip-real { color: #14683C; background: #E8F7EE; border-color: #B7E4C7; }
.dsh-chip-sim { color: #92500F; background: #FDF2E3; border-color: #F5D3A6; }
.dsh-chip-info { color: #0B5C68; background: #E6F6F8; border-color: #B6E3E8; }
.dsh-chip-danger { color: #8E2B20; background: #FDECEA; border-color: #F5C2BC; }
.dsh-chip-plain { color: var(--dsh-text); background: var(--dsh-bg); border-color: var(--dsh-line); }

/* 数据来源条（首页/可视化页共用）：把「哪些是真实数据、哪些是模拟」一次说清 */
.dsh-source-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dsh-gap-2);
  padding: var(--dsh-gap-3) var(--dsh-gap-4);
  background: var(--dsh-surface);
  border: 1px solid var(--dsh-line);
  border-radius: var(--dsh-radius);
  box-shadow: var(--dsh-shadow-1);
  font-size: var(--dsh-fs-muted);
  color: var(--dsh-text);
}
.dsh-source-bar b { color: var(--dsh-ink); }

/* ================= 图例 / 列表（沿用 v1 名称，统一到 v2 令牌） ================= */
.viz-legend-card .ant-card-body { max-height: 300px; overflow: auto; padding: var(--dsh-gap-2) var(--dsh-gap-3); }
.lg-row { display: flex; align-items: center; gap: var(--dsh-gap-2); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.lg-row:hover { background: var(--dsh-bg); }
.lg-row.active { background: var(--dsh-primary-weak); box-shadow: inset 0 0 0 1px var(--dsh-primary); }
.lg-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg-name { flex: 1 1 auto; font-size: 13px; color: var(--dsh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-num { flex: 0 0 auto; font-size: var(--dsh-fs-muted); color: var(--dsh-muted); }

/* ================= 状态：空态 / 骨架 / 页脚 ================= */
.dsh-empty {
  padding: var(--dsh-gap-5);
  text-align: center;
  color: var(--dsh-muted);
  font-size: 13px;
}
.dsh-skel {
  border-radius: var(--dsh-radius);
  background: linear-gradient(90deg, #EEF2F7 25%, #F7FAFC 37%, #EEF2F7 63%);
  background-size: 400% 100%;
  animation: dsh-skel 1.2s ease infinite;
  height: 14px;
}
@keyframes dsh-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.dsh-footer {
  margin-top: var(--dsh-gap-5);
  padding: var(--dsh-gap-4) 0;
  border-top: 1px solid var(--dsh-line);
  color: var(--dsh-muted);
  font-size: var(--dsh-fs-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsh-gap-3);
  align-items: center;
}

/* ================= 响应式 ================= */
@media (max-width: 1200px) {
  .dsh-page { max-width: 100%; }
  .ant-col-4, .ant-col-5, .ant-col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .ant-col-10, .ant-col-14, .ant-col-17, .ant-col-18 { flex: 0 0 100% !important; max-width: 100% !important; }
}
@media (max-width: 900px) {
  .ant-col { flex: 0 0 100% !important; max-width: 100% !important; }
  .ant-layout-sider { flex: 0 0 160px !important; max-width: 160px !important; min-width: 160px !important; width: 160px !important; }
  .brand { font-size: 15px; }
}