/* ============================================================
   admin-v2.css — 平台后台 Admin（V2 明亮工具风 · 监控密集档）
   设计系统：NDBI V2（DESIGN-V2.md · shared/tokens-v2.css）
   端纪律（§5.3）：中性冷白底 + 明亮蓝主色 + 冷灰阶；
   卡片圆角 6px / Flat 无影 / 1px --border；
   侧边导航 220px；顶栏 48px；正文 13px；表格行高 36px；
   数字 tabular-nums，监控档 KPI 用 --font-mono；
   表格：表头 --bg-subtle / 行分隔 1px --border / hover --bg-hover / 选中 --primary-50；
   图表主序列 --chart-1 #0EA5E9、网格 --chart-grid；
   珊瑚 --cta-500 仅用于「需要对方行动」的操作钮（发送/催办/暂缓审核）。
   ============================================================ */

/* 监控密集档：正文 13px */
body { font-size:13px; }

/* 区域条形色阶：--primary-500 不同 alpha（由深至浅表示家庭数降序） */
:root {
  --r-alpha-1:color-mix(in srgb, var(--primary-500) 100%, transparent);
  --r-alpha-2:color-mix(in srgb, var(--primary-500) 82%, transparent);
  --r-alpha-3:color-mix(in srgb, var(--primary-500) 66%, transparent);
  --r-alpha-4:color-mix(in srgb, var(--primary-500) 52%, transparent);
  --r-alpha-5:color-mix(in srgb, var(--primary-500) 40%, transparent);
  --r-alpha-6:color-mix(in srgb, var(--primary-500) 30%, transparent);
}

/* ============ 骨架：侧边导航 220px + 主区域 ============ */
.shell { display:flex; min-height:100vh; }

.sidebar {
  width:220px; flex:none;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand {
  display:flex; align-items:center; gap:10px;
  height:48px; padding:0 16px; border-bottom:1px solid var(--border);
}
.brand-mark {
  width:24px; height:24px; border-radius:6px; flex:none;
  background:var(--primary-500);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg { width:15px; height:15px; }
.brand-text { display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong { font-size:14px; font-weight:600; color:var(--text-heading); }
.brand-text small { font-size:12px; color:var(--text-tertiary); }

.nav { padding:12px 8px; flex:1; }
.nav-group { font-size:12px; color:var(--text-tertiary); padding:6px 12px; }
.nav-item {
  display:flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:6px;
  font-size:13px; color:var(--text-secondary); line-height:1;
  transition:background .15s, color .15s;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active {
  background:var(--primary-50); color:var(--primary-700); font-weight:600;
  box-shadow:inset 3px 0 0 var(--primary-500);
}
.nav-ic { width:16px; height:16px; flex:none; }
.nav-no { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-tertiary); }
.nav-item.active .nav-no { color:var(--primary-700); }
.nav-name { flex:1; }
.nav-badge {
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--warning-red-bg); color:var(--warning-red-text);
  font-size:11px; font-weight:600; line-height:18px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.sidebar-foot {
  padding:12px 16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-tertiary);
}

.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ============ 顶栏 48px：面包屑 12px + 用户区 ============ */
.topbar {
  height:48px; flex:none;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px;
  position:sticky; top:0; z-index:var(--z-sticky);
}
.crumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.crumb a { color:var(--text-secondary); }
.crumb a:hover { color:var(--primary-700); }
.crumb-sep { color:var(--text-placeholder); }
.crumb-current { color:var(--text-primary); font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.user-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.avatar {
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--primary-100); color:var(--primary-700);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}

/* ============ 内容区 ============ */
.content { padding:20px 24px; display:flex; flex-direction:column; gap:16px; }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.page-title { font-size:18px; font-weight:600; color:var(--text-heading); line-height:1.35; }
.page-sub { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.page-actions { display:flex; align-items:center; gap:8px; }

.select {
  height:32px; padding:0 8px;
  border:1px solid var(--border-strong); border-radius:var(--radius-input);
  background:var(--bg-surface); color:var(--text-primary);
  font-family:inherit; font-size:13px;
}

/* ============ 12 栅格 ============ */
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:start; }
.col-3 { grid-column:span 3; }
.col-4 { grid-column:span 4; }
.col-5 { grid-column:span 5; }
.col-6 { grid-column:span 6; } /* Batch BE：原漏定义，a4 省档案包卡片默认只占 1/12 列被挤成一字一行 */
.col-7 { grid-column:span 7; }
.col-8 { grid-column:span 8; }
.col-12 { grid-column:span 12; }

/* ============ 面板卡片（后台 6px 圆角 · Flat） ============ */
.panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:6px; /* V2 §5.3 后台 6px（覆盖工作台 10px 默认） */
  overflow:hidden;
}
.panel-head {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.panel-title { font-size:15px; font-weight:600; color:var(--text-heading); display:inline-flex; align-items:center; gap:6px; }
.panel-title svg { flex:none; }
.panel-caption { font-size:12px; color:var(--text-tertiary); }
.panel-body { padding:16px; }
.panel-body.tight { padding:12px 16px; }

/* ============ KPI 卡（监控档：mono 数字） ============ */
.kpi { padding:16px; }
.kpi-label { font-size:12px; color:var(--text-tertiary); }
.kpi-value {
  margin-top:6px;
  font-family:var(--font-mono); font-size:24px; font-weight:600;
  color:var(--text-heading); line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.kpi-unit { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--text-secondary); margin-left:2px; }
.kpi-delta { display:flex; align-items:center; gap:4px; font-size:12px; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi-delta svg { flex:none; }
.kpi-delta.up { color:var(--success-700); }
.kpi-delta.down { color:var(--warning-red-text); }
.kpi-note { font-size:12px; color:var(--text-tertiary); margin-top:6px; }

/* ============ 图表 ============ */
.chart { width:100%; height:auto; display:block; }
.axis-label {
  font-family:var(--font-sans); font-size:12px; fill:var(--text-tertiary);
}
.axis-label-mono {
  font-family:var(--font-mono); font-size:12px; fill:var(--text-tertiary);
  font-variant-numeric:tabular-nums;
}
.chart-note { font-size:12px; color:var(--text-tertiary); margin-top:8px; line-height:1.5; }

/* ============ 区域分布（横向条形 · --primary-500 alpha 分级） ============ */
.region-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.region-name { width:44px; flex:none; font-size:13px; color:var(--text-primary); }
.region-track { flex:1; height:8px; background:var(--bg-hover); border-radius:999px; overflow:hidden; }
.region-bar { display:block; height:100%; border-radius:999px; }
.region-val {
  width:40px; flex:none; text-align:right;
  font-family:var(--font-mono); font-size:12px; color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}

/* ============ 红线告警 ============ */
.alert-title { color:var(--warning-red-text); }
.alert-item { padding:12px 0; border-bottom:1px solid var(--border); }
.alert-item:last-child { border-bottom:none; }
.alert-item-title { font-size:13px; font-weight:600; color:var(--text-heading); display:flex; align-items:center; gap:6px; }
.alert-item-title .dot { width:6px; height:6px; border-radius:50%; background:var(--warning-red); flex:none; }
.alert-item-desc { font-size:13px; color:var(--text-secondary); margin:4px 0 8px; line-height:1.5; }
.alert-item-desc .num { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-primary); }
.alert-foot {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-tertiary);
}

/* ============ 监控表格（行高 36px · mono 数字） ============ */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th {
  background:var(--bg-subtle);
  font-size:12px; font-weight:500; color:var(--text-tertiary);
  text-align:left; padding:0 12px; height:36px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td {
  padding:0 12px; height:36px;
  border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text-primary); vertical-align:middle; white-space:nowrap;
}
.table tbody tr { transition:background .15s; }
.table tbody tr:hover { background:var(--bg-hover); }
.table tbody tr:hover td { background:var(--bg-hover); }
.table tbody tr.selected, .table tbody tr.selected:hover { background:var(--primary-50); }
.table tbody tr.selected td { background:var(--primary-50); }
.table tbody tr:last-child td { border-bottom:none; }
.cell-strong { font-weight:500; color:var(--text-primary); }
.cell-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.ta-r { text-align:right; }

/* ============ 按钮尺寸（颜色语义沿用 tokens-v2） ============ */
.btn { height:32px; padding:0 14px; font-size:13px; }
.btn-sm { height:28px; padding:0 12px; font-size:12px; }
.btn svg { flex:none; }

/* ============ 页脚 ============ */
.page-foot {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--text-tertiary); padding-top:4px;
}

/* ============ 响应式（≥1280 主形态，窄屏降级不丢内容） ============ */
@media (max-width:1439px) {
  .col-8 { grid-column:span 12; }
  .col-4 { grid-column:span 12; }
  .col-7 { grid-column:span 12; }
  .col-5 { grid-column:span 12; }
  .col-6 { grid-column:span 12; }
}
@media (max-width:1279px) {
  .col-3 { grid-column:span 6; }
}
@media (max-width:1023px) {
  .sidebar { display:none; }
  .col-3 { grid-column:span 12; }
}