/* ============================================================
 * Design Tokens · 策天智服 (内部平台)
 * 抽自 design-tokens.md, 7/18 Charlie 拍板全平台统一
 * ============================================================ */

:root {
  /* === 颜色 === */
  --bg-primary: #f5f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfbfd;
  --bg-hover: rgba(0,0,0,0.02);
  --bg-gradient: linear-gradient(135deg, #f5f5f7 0%, #ececef 100%);

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --text-link: #007aff;

  --border: rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.10);

  /* 6 模块固定色 (跟 welcome.html 一致) */
  --mod-ai: linear-gradient(135deg, #5ac8fa, #007aff);
  --mod-sales: linear-gradient(135deg, #ff6b6b, #ff9500);
  --mod-service: linear-gradient(135deg, #5ac8fa, #5856d6);
  --mod-admin: linear-gradient(135deg, #5856d6, #af52de);
  --mod-master: linear-gradient(135deg, #34c759, #30b0c7);
  --mod-media: linear-gradient(135deg, #ff2d55, #ff9500);
  --mod-tool: linear-gradient(135deg, #8e8e93, #c7c7cc);
  --mod-customer: linear-gradient(135deg, #ffcc00, #ff9500);
  --mod-hr: linear-gradient(135deg, #4facfe, #00f2fe);
  --mod-admin-staff: linear-gradient(135deg, #ffecd2, #fcb69f);
  --mod-finance: linear-gradient(135deg, #11998e, #38ef7d);

  /* 状态色 */
  --success: #34c759;
  --warning: #ff9500;
  --error: #ff3b30;
  --info: #007aff;

  /* === 字号 === */
  --t-display: 28px;
  --t-h1: 22px;
  --t-h2: 18px;
  --t-h3: 16px;
  --t-body: 15px;
  --t-small: 13px;
  --t-tiny: 12px;
  --t-micro: 11px;

  /* === 间距 === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* === 圆角 === */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* === 阴影 === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-hover: 0 12px 28px rgba(0,0,0,0.10);

  /* === 动效 === */
  --ease-default: all 0.2s ease;
  --ease-card: all 0.25s ease;

  /* === 布局 === */
  --container-max: 1200px;
  --topbar-height: 56px;

  /* === 字体 === */
  --font-stack: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro SC", "Helvetica Neue", sans-serif;
}

/* ============================================================
 * 基础 reset
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-stack);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * 通用组件 (业务页 dashboard 风格)
 * ============================================================ */

/* 顶栏 - 业务页 dashboard 用 */
.topbar {
  height: var(--topbar-height);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-6);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  color: var(--text-primary);
}

.topbar .actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

/* 容器 */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-6);
}

/* 主卡片 (业务页 dashboard) */
.card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--ease-card);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 统计卡片 (4 列指标) */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--ease-card);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card .label {
  font-size: var(--t-small);
  color: var(--text-tertiary);
  margin-bottom: var(--s-2);
  font-weight: 500;
}

.stat-card .value {
  font-size: var(--t-display);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.stat-card .sub {
  font-size: var(--t-tiny);
  color: var(--text-tertiary);
  margin-top: var(--s-2);
}

/* 4 列 grid */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

/* 面板 (含标题 + 内容) */
.panel {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--s-4);
}

.panel-title {
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 按钮 */
.btn {
  background: var(--info);
  color: white;
  border: none;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  transition: var(--ease-default);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.btn:hover {
  background: #0066d6;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--info);
  border: 1px solid var(--info);
}

.btn-ghost:hover {
  background: var(--info);
  color: white;
}

.btn-sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-tiny);
}

/* 表格 */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.table th {
  background: var(--bg-hover);
  padding: var(--s-3);
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}

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

/* Tag/Badge */
.tag {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--t-tiny);
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.tag.success { background: rgba(52, 199, 89, 0.12); color: var(--success); }
.tag.warning { background: rgba(255, 149, 0, 0.12); color: var(--warning); }
.tag.error { background: rgba(255, 59, 48, 0.12); color: var(--error); }
.tag.info { background: rgba(0, 122, 255, 0.12); color: var(--info); }

/* 模块色块 (welcome 用 + 业务页 hero 卡用) */
.module-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: var(--ease-card);
}

.module-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.module-tile.mod-ai { background: var(--mod-ai); }
.module-tile.mod-sales { background: var(--mod-sales); }
.module-tile.mod-service { background: var(--mod-service); }
.module-tile.mod-admin { background: var(--mod-admin); }
.module-tile.mod-master { background: var(--mod-master); }
.module-tile.mod-media { background: var(--mod-media); }
.module-tile.mod-customer { background: var(--mod-customer); }
.module-tile.mod-hr { background: var(--mod-hr); }
.module-tile.mod-admin-staff { background: var(--mod-admin-staff); }
.module-tile.mod-finance { background: var(--mod-finance); }
.module-tile.mod-tool { background: var(--mod-tool); }

/* Empty state */
.empty {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--s-8);
  font-size: var(--t-small);
}

.loading {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--s-6);
  font-style: italic;
}

/* 响应式 */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .container { padding: var(--s-4); }
}
/* ============================================================
 * .header.mod-XXX 模块色顶栏 (兼容老 .header 类, 7/21 拍板)
 * 优先级: 在 tokens.css 末尾定义, 覆盖页面内联 .header background
 * ============================================================ */
.header { color: white; padding: var(--s-4) var(--s-6); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-md); }
.header h1, .header h2 { color: white; font-weight: 700; }
.header.mod-ai { background: var(--mod-ai) !important; }
.header.mod-sales { background: var(--mod-sales) !important; }
.header.mod-service { background: var(--mod-service) !important; }
.header.mod-admin { background: var(--mod-admin) !important; }
.header.mod-master { background: var(--mod-master) !important; }
.header.mod-media { background: var(--mod-media) !important; }
.header.mod-customer { background: var(--mod-customer) !important; }
.header.mod-hr { background: var(--mod-hr) !important; }
.header.mod-admin-staff { background: var(--mod-admin-staff) !important; }
.header.mod-finance { background: var(--mod-finance) !important; }

/* .topbar.mod-XXX (新业务页用, 跟 .header 兼容) */
.topbar.mod-ai { background: var(--mod-ai) !important; }
.topbar.mod-sales { background: var(--mod-sales) !important; }
.topbar.mod-service { background: var(--mod-service) !important; }
.topbar.mod-admin { background: var(--mod-admin) !important; }
.topbar.mod-master { background: var(--mod-master) !important; }
.topbar.mod-media { background: var(--mod-media) !important; }
.topbar.mod-customer { background: var(--mod-customer) !important; }