/* ============================================================
   统一布局层 layout.css（2026-10-28 · UI/UX 核对专项）
   ------------------------------------------------------------
   定位：在 app.css / ds.css 之后加载，只做「几何 + 字号 + 层级」覆盖，
        不改语义色，不改交互脚本；把各模块自建的头部/表格/看板收敛到同一契约。
   四级契约：
     1. 页面节奏  2. 区块标题  3. 工具栏/按钮  4. 表格 / 看板
   令牌来源：ds.css 的 --fs-* / --sp-* / --r-* 与语义色
   ============================================================ */

/* 控件三档高度（唯一尺度，禁止页面再写死 30/32/36/38） */
:root {
  --h-ctl: 34px;      /* 标准控件：输入框 / 按钮 / 页签 */
  --h-ctl-sm: 28px;   /* 小号控件：表格内联、次级操作 */
  --h-ctl-xs: 22px;   /* 徽章 / 标签 */
}

/* ---------- 1. 页面节奏 ---------- */
.view { padding: 20px 26px 72px; }
.view > .card,
.view > .grid,
.view > .toolbar,
.view > .notice { margin-bottom: 16px; }
.view > .card:last-child { margin-bottom: 0; }

/* ---------- 2. 区块标题：所有卡片头同高同字号 ---------- */
.card-hd {
  min-height: 52px;
  padding: 0 18px;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom-color: var(--line);
}
/* 头部里的按钮一律小号：既保证 52px 头部不被撑开，也避免标题行出现两种按钮高度 */
.card-hd .btn, .card-hd .btn-primary, .card-hd .btn-ghost { height: var(--h-ctl-sm); padding: 0 10px; }
.card-hd .input, .card-hd .select { height: var(--h-ctl-sm); }
.card-hd h3 {
  margin: 0;
  font-size: var(--fs-6);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
.card-hd .sub { font-size: var(--fs-3); color: var(--muted); }
.card-hd .spacer { flex: 1 1 auto; }
/* 无 spacer 的卡片头：把末尾操作区推到右侧，保证「标题左 / 操作右」一致 */
.card-hd > button:last-child,
.card-hd > .btn:last-child,
.card-hd > .btn-group:last-child,
.card-hd > .seg:last-child { margin-left: auto; }

/* 模块自建头部对齐到同一字号/间距 */
.ast-head { padding: 16px 20px 4px; margin-bottom: 14px; }
.ast-head h1, .ast-head h2,
.tl-hd h3, .an-hd h3, .kpi-hd h3, .rec-hd h3,
.detail-hd h2, .detail-hd h3 {
  font-size: var(--fs-6);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin: 0;
}
.tl-hd, .an-hd, .kpi-hd, .rec-hd { gap: 10px; margin-bottom: 10px; }

/* ---------- 3. 工具栏与按钮几何 ---------- */
.toolbar { gap: 8px; margin-bottom: 14px; min-height: 34px; }
.toolbar .btn, .toolbar .btn-sm { flex: none; }

.btn {
  height: var(--h-ctl);
  padding: 0 13px;
  border-radius: var(--r-sm);
  font-weight: 600;
  gap: 6px;
}
.btn-sm, .btn-mini { height: var(--h-ctl-sm); padding: 0 10px; border-radius: var(--r-xs); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn + .btn { margin-left: 2px; }
/* 图标按钮：正圆，与文字按钮同高，避免出现 28/30/32 三种 */
.btn-icon {
  width: var(--h-ctl);
  height: var(--h-ctl);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.btn-icon.btn-sm { width: var(--h-ctl-sm); height: var(--h-ctl-sm); }
.btn-link { height: auto; padding: 0 2px; }

/* ---------- 3b. 表单控件：与按钮同高，一套尺度 ---------- */
.input, .select, .textarea { font-size: var(--fs-4); box-sizing: border-box; }
.input, .select {
  height: var(--h-ctl);
  min-height: var(--h-ctl);   /* apple.css 为触摸留了 36px，这里拉回与按钮同高 */
  padding: 0 10px;
  border-radius: var(--r-sm);
}
.input-sm, .select-sm, .input.input-sm, .select.select-sm { height: var(--h-ctl-sm); font-size: var(--fs-3); }
.textarea { border-radius: var(--r-sm); }
.field { margin-bottom: var(--sp-4); }
.field > .label { margin-bottom: var(--sp-2); font-size: var(--fs-3); }

/* 分段控件 / 页签：与控件同高，选中态统一 */
.tabs { gap: 2px; }
.tabs button, .tabs .tab { height: var(--h-ctl); padding: 0 12px; font-size: var(--fs-4); border-radius: var(--r-sm); }
.seg { height: var(--h-ctl); padding: 2px; border-radius: var(--r-sm); }
.seg > button, .seg > label { height: calc(var(--h-ctl) - 6px); padding: 0 11px; font-size: var(--fs-3); border-radius: var(--r-xs); }

/* ---------- 4. 表格：两档密度，仅此两档 ---------- */
/* 4a. 标准密度（列表 / 明细） */
.tbl-wrap,
.seg-tbl,
.tbl-shell,
.tw-tbl-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: auto;
  background: var(--card);
}
.tbl-wrap > .tbl,
.seg-tbl > .tbl,
.tbl-shell > .tbl { border: 0; border-radius: 0; }

.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-3);
}
.tbl thead th {
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.tbl tbody td {
  height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl td.num, .tbl th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* 4b. 紧凑密度（排班 / 九宫格 / 内嵌小表）：表头 30 / 行 32，内距 6×8 */
.tbl-dense,
.tbl-sm,
.seg-tbl .tbl,
table.mx-table {
  font-size: var(--fs-3);
}
.tbl-dense thead th,
.tbl-sm thead th,
.seg-tbl .tbl thead th,
table.mx-table th {
  height: 30px;
  padding: 0 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.tbl-dense tbody td,
.tbl-sm tbody td,
.seg-tbl .tbl tbody td,
table.mx-table td {
  height: 32px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
}
/* 紧凑表自带的容器不要再画一遍边框 */
.seg-tbl .tbl th, .seg-tbl .tbl td { border-left: 0; }
table.mx-table { border-radius: var(--r-sm); }
table.mx-table tr.mx-ghd th { background: var(--brand-50); color: var(--brand-700); }

/* ---------- 5. 看板：三套实现（招聘 / 团队 / 实时）统一 ---------- */
.kanban, .tw-board, .rt-board { gap: 14px; align-items: flex-start; }
.kanban { padding: 16px 18px 20px; }
.kb-col, .tw-col, .rt-col {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
}
.kb-hd, .tw-col-h { padding: 2px 4px 10px; gap: 8px; min-height: 30px; }
.kb-hd b, .tw-col-h b, .kb-hd h4, .tw-col-h h4 {
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kb-card, .rt-card, .tw-kcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 10px 12px;
}
.tw-card { border-radius: var(--r-md); }
/* 列内卡片间距统一，避免 6/8/10 混用 */
.kb-col > * + *, .tw-col > * + *, .rt-col > * + * { margin-top: 8px; }

/* ---------- 5b. 详情头 / 弹窗头 ---------- */
.detail-hd, .modal-hd, .drawer-hd {
  min-height: var(--h-ctl);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.detail-hd h2, .detail-hd h3, .modal-hd h3, .drawer-hd h3 {
  font-size: var(--fs-6);
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0;
}

/* ---------- 6. 空态与徽章 ---------- */
.empty { padding: 44px 18px; }
.empty b { font-size: var(--fs-5); font-weight: 700; color: var(--ink); }
.badge, .tag, .pill {
  height: var(--h-ctl-xs);
  padding: 0 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: var(--h-ctl-xs);
  display: inline-flex;
  align-items: center;
}

/* ---------- 7. 窄屏：只保留一套断点语义 ---------- */
@media (max-width: 900px) {
  :root { --h-ctl: 36px; --h-ctl-sm: 30px; }
  .view { padding: 16px 14px 64px; }
  .card-hd { padding: 0 14px; min-height: 48px; }
  .tbl thead th { height: 34px; }
  .tbl tbody td { height: 40px; }
  .kanban, .tw-board, .rt-board { gap: 10px; }
  .kb-col, .tw-col, .rt-col { padding: 8px; }
}
@media (max-width: 640px) {
  /* 顶部页面标题与卡片头在手机上同号，避免两级标题挤在一起 */
  .card-hd h3 { font-size: var(--fs-5); }
  .toolbar { row-gap: 8px; }
  /* 卡片内的紧凑表也降级成卡，与标准表一致 */
  .tbl-dense, .seg-tbl .tbl { font-size: var(--fs-3); }
}