/* =============================================================
 * cw-theme.css · 全站共享视觉基底
 * ---------------------------------------------------------------
 * 定位：唯一一处定义「颜色 / 圆角 / 阴影 / 字号 / 间距」的地方。
 *       五个页面（①登录 ②加载 ③功能 ④单位 ⑤台账）都只引用变量，
 *       不各自写死色值—— 换肤只需改这一个文件。
 *
 * 风格基准：浅色企业后台（Ant Design / Arco 谱系）
 *   · 中性灰阶打底，主色只用于「强调」与「选中」
 *   · 任一语义色都是「主色 + 浅底 + 描边」三件套成套使用
 *   · 圆角只有 4 / 6 / 8 三档，阴影只有两档，克制到近乎无装饰
 *
 * 约束（改写时必须遵守）：
 *   1. 业务样式里禁止出现字面色值，一律 var(--xxx)
 *   2. 圆角只能取 4 / 6 / 8px（或 --radius-sm / --radius）
 *   3. 阴影只能取 --shadow / --shadow-lg
 *   4. 字号限定 10 ~ 20px，基准 13px，行高 1.6 ~ 1.7
 *   5. 过渡统一 .15s
 * ============================================================= */

:root {
  /* ===== 中性层===== */
  --bg: #f2f3f5;          /* 页面底色 */
  --card: #ffffff;        /* 卡片 / 浮层 */
  --line: #e5e6eb;        /* 常规描边 */
  --line-2: #f2f3f5;      /* 次级分隔线、斑马纹 */
  --txt: #1d2129;         /* 正文 */
  --txt-2: #4e5969;       /* 次要文字 */
  --muted: #86909c;       /* 弱化文字 */
  --txt-3: #a9aeb8;       /* 占位符 / 禁用 */
  --sidebar: #ffffff;    /* 侧栏底 */
  --sidebar-txt: #4e5969;

  /* ===== 主色三件套（主 / 深 / 浅底 / 描边）===== */
  --brand: #1677ff;
  --brand-d: #0e5fd8;
  --brand-l: #e8f3ff;
  --brand-bd: #bedaff;

  /* ===== 语义色，每个同样成套 ===== */
  --green: #00b42a;
  --green-l: #e8ffea;
  --green-bd: #aff0b5;

  --orange: #ff7d00;
  --orange-l: #fff7e8;
  --orange-bd: #ffcf8b;

  --red: #f53f3f;
  --red-l: #ffece8;
  --red-bd: #fdcdc5;

  --purple: #722ed1;
  --purple-l: #f5f0ff;
  --purple-bd: #d9c2ff;

  /* ===== 圆角：只有两档变量 + 3px 角标特例 ===== */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-tag: 3px;
  --radius-lg: 8px;       /* 仅模态框 */

  /* ===== 阴影：只有两档 ===== */
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  /* ===== 字号阶梯 ===== */
  --fs-body: 13px;        /* 正文基准 */
  --fs-sm: 12px;          /* 表格内文字 */
  --fs-xs: 11px;          /* 次要说明 */
  --fs-tag: 10px;         /* 角标 */
  --fs-title: 14px;       /* 卡片标题 */
  --fs-lg: 16px;          /* 区块标题 */

  /* ===== 结构高度（4px 栅格）===== */
  --h-top: 52px;
  --h-status: 30px;
  --th-h: 37px;

  /* ===== 过渡 ===== */
  --t: .15s;
}

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

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--txt);
}

/* ===== 滚动条：8px细条，圆角 4 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9dee5; border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: #c2c8d0; }

/* =============================================================
 * 通用组件基类
 * 各页面沿用这些类名，避免每个页面重复写一遍同样的框体样式。
 * ============================================================= */

/* 卡片 */
.cw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 按钮：形状在基类，颜色在变体 */
.cw-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.4;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.cw-btn-primary { background: var(--brand); color: #fff; }
.cw-btn-primary:hover { background: var(--brand-d); }
.cw-btn-ghost {
  background: #fff;
  color: var(--txt-2);
  border: 1px solid var(--line);
}
.cw-btn-ghost:hover { color: var(--brand); border-color: var(--brand-bd); }

/* 表单控件 */
.cw-input {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--fs-body);
  outline: none;
  transition: border-color var(--t);
}
.cw-input:focus { border-color: var(--brand); }

/* 角标 */
.cw-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-tag);
  padding: 1px 6px;
  border-radius: var(--radius-tag);
  background: var(--line-2);
  color: var(--muted);
}
.cw-tag-blue { background: var(--brand-l); color: var(--brand); }
.cw-tag-green { background: var(--green-l); color: var(--green); }
.cw-tag-orange { background: var(--orange-l); color: var(--orange); }
.cw-tag-red { background: var(--red-l); color: var(--red); }

/* 筛选 chip */
.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  padding: 3px 11px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt-2);
}

/* 表格：数字列不折行 */
.cw-table { width: 100%; border-collapse: collapse; }
.cw-table th, .cw-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.cw-table th {
  background: var(--line-2);
  color: var(--txt-2);
  font-weight: 600;
  text-align: left;
}
.cw-table td.num, .cw-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== 公共提示条（cw-core.js 的 CWUi.tip 用）===== */
#lh-tip {
  font-family: inherit !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 12.5px !important;
}

/* ===== 桥接层注入的公共按钮 ===== */
#btnExitSys, #btnExitUnit, #btnAddUnit, #btnBackUnit {
  font-family: inherit !important;
  border-radius: var(--radius-sm) !important;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t) !important;
}
#btnExitSys:hover, #btnExitUnit:hover, #btnAddUnit:hover, #btnBackUnit:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(29, 33, 41, .16);
}