/* ZBOSS Shared Styles v2.3
 * 职责：全部样式定义
 * 约束：builder 和 ui.js 中禁止内联 style="..."
 * 动态值通过 data-* 属性 + 属性选择器渲染
 */

:root {
  /* Background */
  --bg-page: #f0f2f5;
  --bg-card: #ffffff;
  --bg-hover: #f8f9fa;

  /* Text */
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;

  /* Brand */
  --primary: #2563eb;
  --primary-light: #eff6ff;

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Board semantic colors */
  --plan: #2563eb;
  --plan-light: #dbeafe;
  --info-board: #8b5cf6;
  --info-board-light: #ede9fe;

  /* Border & Shadow */
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== Navigation ===== */
.top-nav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  height: 56px;
  gap: var(--space-xl);
}

.brand-link {
  text-decoration: none;
  color: inherit;
}
.brand-link:hover {
  opacity: 0.8;
}

.brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-link {
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-link.active {
  background: var(--primary);
  color: #fff;
}

/* ===== Header ===== */
.page-header {
  margin-bottom: var(--space-lg);
}

.page-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.page-header .subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: var(--space-xs);
}

/* ===== Section ===== */
.section {
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-left: 12px;
  border-left: 3px solid var(--primary);
}

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
  border: 1px solid var(--border);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* ===== KPI / 统计卡片（统一组件，双模式兼容） ===== */

/* KPI 模式网格 */
.kpi-grid,
.kpi-grid[data-mode="kpi"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.kpi-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.kpi-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kpi-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.kpi-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.kpi-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* 筛选模式网格 */
.filter-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* 统一卡片基础 */
.stat-card,
.kpi-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
  border: 1px solid var(--border);
}

.stat-card:hover,
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
}

/* KPI 模式 — 顶部边框色 */
.stat-card[data-mode="kpi"],
.kpi-card {
  border-top: 3px solid transparent;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-card[data-mode="kpi"][data-color="primary"],
.kpi-card[data-color="primary"] { border-top-color: var(--primary); }
.stat-card[data-mode="kpi"][data-color="success"],
.kpi-card[data-color="success"]  { border-top-color: var(--success); }
.stat-card[data-mode="kpi"][data-color="warning"],
.kpi-card[data-color="warning"]  { border-top-color: var(--warning); }
.stat-card[data-mode="kpi"][data-color="danger"],
.kpi-card[data-color="danger"]   { border-top-color: var(--danger); }
.stat-card[data-mode="kpi"][data-color="info"],
.kpi-card[data-color="info"]     { border-top-color: var(--info); }

/* 筛选模式 — 激活态 */
.stat-card[data-mode="filter"].active,
.stat-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 头部布局（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-header,
.kpi-card .kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

/* 标签 */
.stat-card .stat-label,
.kpi-card .kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 趋势标记 */
.stat-card .stat-trend,
.kpi-card .kpi-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.stat-card .stat-trend.trend-up,
.kpi-card .kpi-badge.trend-up { color: var(--success); }
.stat-card .stat-trend.trend-down,
.kpi-card .kpi-badge.trend-down { color: var(--danger); }

/* 数值 */
.stat-card .stat-value,
.kpi-card .kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-card .stat-value .unit,
.kpi-card .kpi-value .unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* 副标题（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-sub,
.kpi-card .kpi-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* 进度条（KPI 模式） */
.stat-card[data-mode="kpi"] .stat-progress,
.kpi-card .kpi-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.stat-card[data-mode="kpi"] .stat-progress-fill,
.kpi-card .kpi-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* 进度条 — data-progress 属性选择器 0-100（KPI 模式） */
.stat-progress-fill[data-progress="0"],
.kpi-bar-fill[data-progress="0"]  { width: 0%; }
.stat-progress-fill[data-progress="1"],
.kpi-bar-fill[data-progress="1"]  { width: 1%; }
.stat-progress-fill[data-progress="2"],
.kpi-bar-fill[data-progress="2"]  { width: 2%; }
.stat-progress-fill[data-progress="3"],
.kpi-bar-fill[data-progress="3"]  { width: 3%; }
.stat-progress-fill[data-progress="4"],
.kpi-bar-fill[data-progress="4"]  { width: 4%; }
.stat-progress-fill[data-progress="5"],
.kpi-bar-fill[data-progress="5"]  { width: 5%; }
.stat-progress-fill[data-progress="6"],
.kpi-bar-fill[data-progress="6"]  { width: 6%; }
.stat-progress-fill[data-progress="7"],
.kpi-bar-fill[data-progress="7"]  { width: 7%; }
.stat-progress-fill[data-progress="8"],
.kpi-bar-fill[data-progress="8"]  { width: 8%; }
.stat-progress-fill[data-progress="9"],
.kpi-bar-fill[data-progress="9"]  { width: 9%; }
.stat-progress-fill[data-progress="10"],
.kpi-bar-fill[data-progress="10"] { width: 10%; }
.stat-progress-fill[data-progress="11"],
.kpi-bar-fill[data-progress="11"] { width: 11%; }
.stat-progress-fill[data-progress="12"],
.kpi-bar-fill[data-progress="12"] { width: 12%; }
.stat-progress-fill[data-progress="13"],
.kpi-bar-fill[data-progress="13"] { width: 13%; }
.stat-progress-fill[data-progress="14"],
.kpi-bar-fill[data-progress="14"] { width: 14%; }
.stat-progress-fill[data-progress="15"],
.kpi-bar-fill[data-progress="15"] { width: 15%; }
.stat-progress-fill[data-progress="16"],
.kpi-bar-fill[data-progress="16"] { width: 16%; }
.stat-progress-fill[data-progress="17"],
.kpi-bar-fill[data-progress="17"] { width: 17%; }
.stat-progress-fill[data-progress="18"],
.kpi-bar-fill[data-progress="18"] { width: 18%; }
.stat-progress-fill[data-progress="19"],
.kpi-bar-fill[data-progress="19"] { width: 19%; }
.stat-progress-fill[data-progress="20"],
.kpi-bar-fill[data-progress="20"] { width: 20%; }
.stat-progress-fill[data-progress="21"],
.kpi-bar-fill[data-progress="21"] { width: 21%; }
.stat-progress-fill[data-progress="22"],
.kpi-bar-fill[data-progress="22"] { width: 22%; }
.stat-progress-fill[data-progress="23"],
.kpi-bar-fill[data-progress="23"] { width: 23%; }
.stat-progress-fill[data-progress="24"],
.kpi-bar-fill[data-progress="24"] { width: 24%; }
.stat-progress-fill[data-progress="25"],
.kpi-bar-fill[data-progress="25"] { width: 25%; }
.stat-progress-fill[data-progress="26"],
.kpi-bar-fill[data-progress="26"] { width: 26%; }
.stat-progress-fill[data-progress="27"],
.kpi-bar-fill[data-progress="27"] { width: 27%; }
.stat-progress-fill[data-progress="28"],
.kpi-bar-fill[data-progress="28"] { width: 28%; }
.stat-progress-fill[data-progress="29"],
.kpi-bar-fill[data-progress="29"] { width: 29%; }
.stat-progress-fill[data-progress="30"],
.kpi-bar-fill[data-progress="30"] { width: 30%; }
.stat-progress-fill[data-progress="31"],
.kpi-bar-fill[data-progress="31"] { width: 31%; }
.stat-progress-fill[data-progress="32"],
.kpi-bar-fill[data-progress="32"] { width: 32%; }
.stat-progress-fill[data-progress="33"],
.kpi-bar-fill[data-progress="33"] { width: 33%; }
.stat-progress-fill[data-progress="34"],
.kpi-bar-fill[data-progress="34"] { width: 34%; }
.stat-progress-fill[data-progress="35"],
.kpi-bar-fill[data-progress="35"] { width: 35%; }
.stat-progress-fill[data-progress="36"],
.kpi-bar-fill[data-progress="36"] { width: 36%; }
.stat-progress-fill[data-progress="37"],
.kpi-bar-fill[data-progress="37"] { width: 37%; }
.stat-progress-fill[data-progress="38"],
.kpi-bar-fill[data-progress="38"] { width: 38%; }
.stat-progress-fill[data-progress="39"],
.kpi-bar-fill[data-progress="39"] { width: 39%; }
.stat-progress-fill[data-progress="40"],
.kpi-bar-fill[data-progress="40"] { width: 40%; }
.stat-progress-fill[data-progress="41"],
.kpi-bar-fill[data-progress="41"] { width: 41%; }
.stat-progress-fill[data-progress="42"],
.kpi-bar-fill[data-progress="42"] { width: 42%; }
.stat-progress-fill[data-progress="43"],
.kpi-bar-fill[data-progress="43"] { width: 43%; }
.stat-progress-fill[data-progress="44"],
.kpi-bar-fill[data-progress="44"] { width: 44%; }
.stat-progress-fill[data-progress="45"],
.kpi-bar-fill[data-progress="45"] { width: 45%; }
.stat-progress-fill[data-progress="46"],
.kpi-bar-fill[data-progress="46"] { width: 46%; }
.stat-progress-fill[data-progress="47"],
.kpi-bar-fill[data-progress="47"] { width: 47%; }
.stat-progress-fill[data-progress="48"],
.kpi-bar-fill[data-progress="48"] { width: 48%; }
.stat-progress-fill[data-progress="49"],
.kpi-bar-fill[data-progress="49"] { width: 49%; }
.stat-progress-fill[data-progress="50"],
.kpi-bar-fill[data-progress="50"] { width: 50%; }
.stat-progress-fill[data-progress="51"],
.kpi-bar-fill[data-progress="51"] { width: 51%; }
.stat-progress-fill[data-progress="52"],
.kpi-bar-fill[data-progress="52"] { width: 52%; }
.stat-progress-fill[data-progress="53"],
.kpi-bar-fill[data-progress="53"] { width: 53%; }
.stat-progress-fill[data-progress="54"],
.kpi-bar-fill[data-progress="54"] { width: 54%; }
.stat-progress-fill[data-progress="55"],
.kpi-bar-fill[data-progress="55"] { width: 55%; }
.stat-progress-fill[data-progress="56"],
.kpi-bar-fill[data-progress="56"] { width: 56%; }
.stat-progress-fill[data-progress="57"],
.kpi-bar-fill[data-progress="57"] { width: 57%; }
.stat-progress-fill[data-progress="58"],
.kpi-bar-fill[data-progress="58"] { width: 58%; }
.stat-progress-fill[data-progress="59"],
.kpi-bar-fill[data-progress="59"] { width: 59%; }
.stat-progress-fill[data-progress="60"],
.kpi-bar-fill[data-progress="60"] { width: 60%; }
.stat-progress-fill[data-progress="61"],
.kpi-bar-fill[data-progress="61"] { width: 61%; }
.stat-progress-fill[data-progress="62"],
.kpi-bar-fill[data-progress="62"] { width: 62%; }
.stat-progress-fill[data-progress="63"],
.kpi-bar-fill[data-progress="63"] { width: 63%; }
.stat-progress-fill[data-progress="64"],
.kpi-bar-fill[data-progress="64"] { width: 64%; }
.stat-progress-fill[data-progress="65"],
.kpi-bar-fill[data-progress="65"] { width: 65%; }
.stat-progress-fill[data-progress="66"],
.kpi-bar-fill[data-progress="66"] { width: 66%; }
.stat-progress-fill[data-progress="67"],
.kpi-bar-fill[data-progress="67"] { width: 67%; }
.stat-progress-fill[data-progress="68"],
.kpi-bar-fill[data-progress="68"] { width: 68%; }
.stat-progress-fill[data-progress="69"],
.kpi-bar-fill[data-progress="69"] { width: 69%; }
.stat-progress-fill[data-progress="70"],
.kpi-bar-fill[data-progress="70"] { width: 70%; }
.stat-progress-fill[data-progress="71"],
.kpi-bar-fill[data-progress="71"] { width: 71%; }
.stat-progress-fill[data-progress="72"],
.kpi-bar-fill[data-progress="72"] { width: 72%; }
.stat-progress-fill[data-progress="73"],
.kpi-bar-fill[data-progress="73"] { width: 73%; }
.stat-progress-fill[data-progress="74"],
.kpi-bar-fill[data-progress="74"] { width: 74%; }
.stat-progress-fill[data-progress="75"],
.kpi-bar-fill[data-progress="75"] { width: 75%; }
.stat-progress-fill[data-progress="76"],
.kpi-bar-fill[data-progress="76"] { width: 76%; }
.stat-progress-fill[data-progress="77"],
.kpi-bar-fill[data-progress="77"] { width: 77%; }
.stat-progress-fill[data-progress="78"],
.kpi-bar-fill[data-progress="78"] { width: 78%; }
.stat-progress-fill[data-progress="79"],
.kpi-bar-fill[data-progress="79"] { width: 79%; }
.stat-progress-fill[data-progress="80"],
.kpi-bar-fill[data-progress="80"] { width: 80%; }
.stat-progress-fill[data-progress="81"],
.kpi-bar-fill[data-progress="81"] { width: 81%; }
.stat-progress-fill[data-progress="82"],
.kpi-bar-fill[data-progress="82"] { width: 82%; }
.stat-progress-fill[data-progress="83"],
.kpi-bar-fill[data-progress="83"] { width: 83%; }
.stat-progress-fill[data-progress="84"],
.kpi-bar-fill[data-progress="84"] { width: 84%; }
.stat-progress-fill[data-progress="85"],
.kpi-bar-fill[data-progress="85"] { width: 85%; }
.stat-progress-fill[data-progress="86"],
.kpi-bar-fill[data-progress="86"] { width: 86%; }
.stat-progress-fill[data-progress="87"],
.kpi-bar-fill[data-progress="87"] { width: 87%; }
.stat-progress-fill[data-progress="88"],
.kpi-bar-fill[data-progress="88"] { width: 88%; }
.stat-progress-fill[data-progress="89"],
.kpi-bar-fill[data-progress="89"] { width: 89%; }
.stat-progress-fill[data-progress="90"],
.kpi-bar-fill[data-progress="90"] { width: 90%; }
.stat-progress-fill[data-progress="91"],
.kpi-bar-fill[data-progress="91"] { width: 91%; }
.stat-progress-fill[data-progress="92"],
.kpi-bar-fill[data-progress="92"] { width: 92%; }
.stat-progress-fill[data-progress="93"],
.kpi-bar-fill[data-progress="93"] { width: 93%; }
.stat-progress-fill[data-progress="94"],
.kpi-bar-fill[data-progress="94"] { width: 94%; }
.stat-progress-fill[data-progress="95"],
.kpi-bar-fill[data-progress="95"] { width: 95%; }
.stat-progress-fill[data-progress="96"],
.kpi-bar-fill[data-progress="96"] { width: 96%; }
.stat-progress-fill[data-progress="97"],
.kpi-bar-fill[data-progress="97"] { width: 97%; }
.stat-progress-fill[data-progress="98"],
.kpi-bar-fill[data-progress="98"] { width: 98%; }
.stat-progress-fill[data-progress="99"],
.kpi-bar-fill[data-progress="99"] { width: 99%; }
.stat-progress-fill[data-progress="100"],
.kpi-bar-fill[data-progress="100"] { width: 100%; }

.fill-success { background: var(--success); }
.fill-warning { background: var(--warning); }
.fill-danger { background: var(--danger); }

/* 筛选模式 — 金额 */
.stat-card[data-mode="filter"] .stat-amt,
.stat-card .stat-amt {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
}
.stat-amt .money-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.stat-amt .unit {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* 进度百分比文字 */
.progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  text-align: right;
}

/* ===== Status Tags ===== */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 合同状态标签 */
.tag-dev { background: #fef3c7; color: #d97706; }
.tag-com { background: var(--primary-light); color: var(--primary); }
.tag-sig { background: #d1fae5; color: #059669; }
.tag-term { background: #fee2e2; color: #dc2626; }

/* 项目状态标签 — data-status */
.tag[data-status="开拓"] { background: #fef3c7; color: #d97706; border: 1px solid rgba(217,119,6,0.25); }
.tag[data-status="已定"] { background: var(--primary-light); color: var(--primary); border: 1px solid rgba(37,99,235,0.25); }
.tag[data-status="已签"] { background: #d1fae5; color: #059669; border: 1px solid rgba(5,150,105,0.25); }
.tag[data-status="意向"] { background: #eff6ff; color: #1d4ed8; border: 1px solid rgba(29,78,216,0.25); }
.tag[data-status="商机"] { background: #f9fafb; color: #4b5563; border: 1px solid rgba(75,85,99,0.25); }

/* 状态指示条（存量管理表格第一列） */
.status-indicator {
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.status-indicator[data-status="已签"] { background: var(--success); }
.status-indicator[data-status="已定"] { background: var(--primary); }
.status-indicator[data-status="开拓"] { background: var(--warning); }
.status-indicator[data-status="—"] { background: var(--text-tertiary); }

/* 旧 left-bar 样式保留兼容，新行使用背景色 */
.left-bar { display: none; }
.left-bar.yellow { background:#f59e0b; }
.left-bar.red { background:#ef4444; }
.left-bar.both { background:linear-gradient(180deg,#f59e0b 50%,#ef4444 50%); }

/* ===== Tabs ===== */
.board-tabs, .period-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--bg-card);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.filter-bar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  min-width: 140px;
  background: #fff;
  transition: border-color 0.2s;
}

.filter-bar select:hover,
.filter-bar select:focus {
  border-color: var(--primary);
  outline: none;
}

/* ===== Table ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  word-wrap: break-word;
}

.data-table th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: break-word;
}

.data-table tr:hover {
  background: var(--bg-hover);
}

/* ===== Table Wrap ===== */
.table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ===== Number Alignment ===== */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* th.num 需与 td.num 对齐 */
.data-table th.num { text-align: right; }

/* th.num 需与 td.num 对齐 */
.data-table th.num { text-align: right; }

/* ===== 经营总览 KPI 子元素 ===== */
.kpi-title { font-size:14px; color:var(--text-secondary); margin-bottom:12px; }
.kpi-values { margin-bottom:12px; }
.kpi-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.kpi-actual { font-size:20px; font-weight:700; color:var(--text-primary); }
.kpi-progress { margin-top:8px; }
.progress-text { font-size:12px; color:var(--text-secondary); margin-top:6px; text-align:right; }

/* ===== 人员管理组件 ===== */
.person-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.person-card { background:var(--bg-card); border-radius:10px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); }
.person-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.person-avatar { width:40px; height:40px; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; }
.person-info { flex:1; }
.person-name { font-weight:600; font-size:15px; }
.person-role { font-size:12px; color:var(--text-tertiary); }
.person-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat-item { text-align:center; }
.stat-val { font-size:16px; font-weight:700; color:var(--text-primary); }
.stat-lbl { font-size:11px; color:var(--text-tertiary); margin-top:2px; }

/* ===== 项目追踪统计卡片 ===== */
.stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:16px; }
.stat-card { background:var(--bg-card); border-radius:10px; padding:20px; box-shadow:var(--shadow); text-align:center; cursor:pointer; transition:box-shadow .2s; border:1px solid var(--border); }
.stat-card:hover { box-shadow:var(--shadow-lg); }
.stat-card.active { border-color:var(--primary); background:var(--primary-light); }
.stat-num { font-size:28px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.stat-amt { font-size:13px; color:var(--text-secondary); margin-top:6px; font-weight:500; }

/* ===== 趋势图组件 ===== */
.trend-chart { background:var(--bg-card); border-radius:10px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); }
.trend-svg { width:100%; height:300px; }
.trend-legend { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }

/* ===== 排名表 ===== */
.rank-table { width:100%; border-collapse:collapse; font-size:13px; }
.rank-table th { background:#f8fafc; padding:10px 12px; text-align:left; font-weight:600; color:var(--text-secondary); border-bottom:2px solid var(--border); white-space:nowrap; }
.rank-table td { padding:10px 12px; border-bottom:1px solid var(--border); }
.rank-table tr:hover { background:#f8fafc; }
.rank-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.rank-table .rank { font-weight:700; color:var(--primary); width:40px; }
.rank-table .name { font-weight:600; }

/* ===== 经营总览周卡片 ===== */
.week-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
.week-card { background:var(--bg-card); border-radius:10px; padding:24px; box-shadow:var(--shadow); border-left:4px solid transparent; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); }
.week-card[data-border="primary"] { border-left-color: var(--primary); }
.week-card[data-border="success"] { border-left-color: var(--success); }
.week-card[data-border="warning"] { border-left-color: var(--warning); }
.week-card[data-border="danger"] { border-left-color: var(--danger); }
.week-card[data-border="info"] { border-left-color: var(--info); }
.week-title { font-size:14px; color:var(--text-secondary); }
.week-value { font-size:28px; font-weight:700; color:var(--text-primary); }
.week-unit { font-size:14px; color:var(--text-secondary); margin-left:4px; }

/* ===== 变化卡片 ===== */
.change-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px; }
.change-card { background:var(--bg-card); border-radius:8px; padding:16px; box-shadow:var(--shadow); text-align:center; border:1px solid var(--border); }
.change-num { font-size:24px; font-weight:700; color:var(--primary); }
.change-lbl { font-size:12px; color:var(--text-secondary); margin-top:4px; }

/* ===== 项目追踪 / 存量管理 变化标签 ===== */
.change-tag {
  font-size: 10px;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  margin-top: 2px;
}
.change-tag + .change-tag { margin-left: 3px; margin-top: 2px; }
.change-tag.status-change { color: #92400e; background: #fef3c7; font-weight: 600; }
.change-tag.budget-change { color: #166534; background: #f0fdf4; font-weight: 600; }
.change-tag.remark-change { color: #1d4ed8; background: #eff6ff; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 存量管理周变化列：无变化显示灰色短线 */
.week-col .no-change { color: var(--text-tertiary); font-size: 13px; }

/* 周变化列垂直对齐 top，避免多标签推高整行 */
.week-col { vertical-align: top; white-space: normal; }
tr .week-col { padding-top: 10px; }

/* 项目名称 / 客户名单行截断 */
.data-table td.ellip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 金额列：数字和单位分字号 */
.data-table td.num .money-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.data-table td.num .unit,
.data-table td.num .suffix {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* 异常行背景色（替代 left-bar） */
tr.stagnant { background: #fffbeb; }
tr.budget-jump { background: #fef2f2; }
tr.stagnant.budget-jump { background: linear-gradient(180deg, #fffbeb 50%, #fef2f2 50%); }

/* ===== 项目追踪特有 ===== */
.week-label { font-size:13px; font-weight:600; color:var(--text-primary); }
.type-tag { font-size:11px; padding:2px 6px; border-radius:4px; font-weight:500; white-space:nowrap; }
.type-tag.type-重点项目 { background:#fef3c7; color:#92400e; }
.type-tag.type-传统项目 { background:#f0fdf4; color:#166534; }
.type-tag.type-数据项目 { background:#eff6ff; color:#1d4ed8; }
.type-tag.type-软件项目 { background:#f5f3ff; color:#7c3aed; }
.left-bar { position:absolute; left:0; top:0; bottom:0; width:4px; }
.left-bar.yellow { background:#f59e0b; }
.left-bar.red { background:#ef4444; }
.left-bar.both { background:linear-gradient(180deg,#f59e0b 50%,#ef4444 50%); }
.budget-cell { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.budget-arrow { font-weight:700; font-size:13px; cursor:help; }
.budget-arrow.up { color: #22c55e; }
.budget-arrow.down { color: #ef4444; }

/* ===== 入口页 ===== */
.nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; }
.nav-card {
  background: var(--bg-card); border-radius: 12px; padding: 32px;
  box-shadow: var(--shadow); border-left: 4px solid transparent; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; transition: all 0.2s ease;
  position: relative;
}
.nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* 当前页面卡片 — 不可点击 */
.nav-card-current {
  display: block;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow);
  position: relative;
  opacity: 0.85;
  cursor: default;
}
.nav-card-current[data-border="primary"] { border-left-color: var(--primary); }
.nav-card-current[data-border="success"] { border-left-color: var(--success); }
.nav-card-current[data-border="warning"] { border-left-color: var(--warning); }
.nav-card-current[data-border="info"] { border-left-color: var(--info); }
.nav-card-current .card-current-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 4px;
}
.nav-card-current .card-header h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.nav-card-current .card-subtitle { font-size: 13px; color: var(--text-tertiary); }
.nav-card-current .card-value { font-size: 32px; font-weight: 700; margin: 16px 0; }
.nav-card[data-border="primary"] { border-left-color: var(--primary); }
.nav-card[data-border="success"] { border-left-color: var(--success); }
.nav-card[data-border="warning"] { border-left-color: var(--warning); }
.nav-card[data-border="info"] { border-left-color: var(--info); }
.nav-card .card-header h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.nav-card .card-subtitle { font-size: 13px; color: var(--text-tertiary); }
.nav-card .card-value { font-size: 32px; font-weight: 700; margin: 16px 0; }
.nav-card .card-arrow {
  position: absolute; right: 24px; bottom: 24px; font-size: 24px;
  color: var(--text-tertiary); transition: color 0.2s;
}
.nav-card:hover .card-arrow { color: var(--primary); }

.summary-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 40px;
}
.summary-item {
  background: var(--bg-card); border-radius: 12px; padding: 24px;
  box-shadow: var(--shadow); text-align: center; border: 1px solid var(--border);
}
.summary-item .label { font-size: 13px; color: var(--text-tertiary); margin-bottom: 8px; }
.summary-item .value { font-size: 24px; font-weight: 600; color: var(--text-primary); }
.summary-item .value.highlight { color: var(--primary); }

.status-bar {
  background: var(--bg-card); border-radius: 12px; padding: 20px 24px;
  box-shadow: var(--shadow); display: flex; justify-content: space-between;
  align-items: center; font-size: 13px; color: var(--text-tertiary);
  border: 1px solid var(--border);
}
.status-bar .batch-info { font-weight: 500; color: var(--text-primary); }

/* ===== 入口页微调 ===== */
.index-header { margin-bottom: 40px; }
.index-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.index-header .subtitle { color: var(--text-tertiary); font-size: 14px; }

/* ===== 背景色类（人员头像/图例） ===== */
.bg-color-0 { background: #2563eb; }
.bg-color-1 { background: #8b5cf6; }
.bg-color-2 { background: #16a34a; }
.bg-color-3 { background: #d97706; }
.bg-color-4 { background: #dc2626; }
.bg-color-5 { background: #0891b2; }
.bg-color-6 { background: #ec4899; }
.bg-color-7 { background: #6366f1; }

/* ===== 列宽工具类（colgroup） ===== */
.col-w65  { width: 65px; }
.col-w70  { width: 70px; }
.col-w80  { width: 80px; }
.col-w85  { width: 85px; }
.col-w90  { width: 90px; }
.col-w100 { width: 100px; }
.col-w110 { width: 110px; }
.col-w120 { width: 120px; }
.col-w150 { width: 150px; }

/* ===== 数据锚点 ===== */
.data-anchor { text-align: right; font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }

/* ===== 项目追踪行交互 ===== */
.data-table tr.proj-row { cursor: pointer; transition: background .15s; }
.data-table tr.proj-row:hover { background: var(--bg-hover); }
/* 异常行 hover 覆盖 */
tr.stagnant:hover { background: #fef3c7; }
tr.budget-jump:hover { background: #fee2e2; }

/* ===== Responsive ===== */
@media(max-width:768px){
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid[data-columns="6"] { grid-template-columns: repeat(3, 1fr); }
  .nav-links { display: none; }
  .container { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .change-grid { grid-template-columns: repeat(3, 1fr); }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
  .week-grid { grid-template-columns: 1fr; }
  .rank-table { font-size: 11px; }
  .rank-table th, .rank-table td { padding: 6px 8px; }
  .nav-grid { grid-template-columns: 1fr; }
  .summary-bar { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:480px){
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-grid[data-columns="4"] { grid-template-columns: 1fr; }
  .kpi-grid[data-columns="6"] { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .change-grid { grid-template-columns: repeat(2, 1fr); }
  .person-grid { grid-template-columns: 1fr; }
  .summary-bar { grid-template-columns: 1fr; }
}