` 元素最稳，也省得以后外层再改一次名就失效。 */
.card:has(table),
.card:has(.empty) {
align-self: start;
}
/* --- K4b. 图形 / 图表类卡片体：被拉高时竖直居中 ---
库存「库龄分布」(.agebars)、员工结构「用工类型构成」(.bar-row)、
资产「状态分布」(.ast-bars)、资产盘点「近 12 个月趋势」(.ast-trend) …
这些都不是 .chart-bd，但同样是"图"。
v171 最初是逐个枚举类名，结果漏了 .ast-trend（盘点页右卡留下 112px 白，
比修复前还多 16px）。现在改成**按结构判定**：卡片体里既没有表格、也没有
空态，就视为图形区 —— 以后新增任何图表类名都自动覆盖，不会再漏。
⚠ 写法有坑：`:has()` **不能嵌套在 `:has()` 内部**（CSS 规范明确禁止），
最初写成 `.card:has(> .card-bd:not(:has(table)))` 时整条规则被浏览器
直接丢弃（不报错、静默失效），P2 因此"改了却没生效"。
正确写法是把否定提到外层：`.card:has(> .card-bd):not(:has(table))`。 */
.card:has(> .card-bd):not(:has(table)):not(:has(.empty)) {
display: flex;
flex-direction: column;
}
.card:has(> .card-bd):not(:has(table)):not(:has(.empty)) > .card-bd {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
/* --- K4c. 空态卡片：若因场景需要被拉高（工作台三卡并列），空态竖直居中 --- */
.card:has(> .empty),
.card:has(> .card-bd > .empty) {
display: flex;
flex-direction: column;
}
.card:has(> .empty) > .empty,
.card:has(> .card-bd > .empty) > .card-bd {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
/* --- K4d. 工作台三卡并列（最近通知 / 我的待办 / 快捷入口）：保持等高 ---
这一行是同构 widget，等高更像一个整体；空态由 K4c 居中，
不会出现"顶上一个字、下面一大片白"。 */
.wb-grid > .card {
align-self: stretch;
}
/* --- K5. 空状态尺寸：不再把"一个'无'字"撑成一屏 ---
⚠ 这是**全局**改动，不是局部：`.empty` 在全站有 256 处直接写法
（另有 emptyMini() 等封装调用 30 处），改它等于所有空态一起变紧。
64px → 40px（上下）是刻意为之：空态是"没有数据"的提示，不该占掉半屏；
若将来要区分"页面级空态"和"卡片内空态"，请新增更细的选择器，
不要在这里加例外。 */
.empty {
padding: var(--sp-8) var(--sp-6);
}
/* --- K6. 双列栅格里的纵向列：最后一张卡补足剩余高度 ---
典型：采购驾驶舱「月度预算执行 + 品类分布」左列 vs 「最新动向 + 待办」右列。
把列容器变成 flex 列（间距交给 gap，避免与 .card + .card 的 margin 叠加），
列内最后一张卡吃掉剩余高度 —— 于是左右两列底边齐平。 */
.grid.g2 > div:not(.card):not(.kpi):not(.panel) {
display: flex;
flex-direction: column;
gap: var(--sp-4);
align-self: stretch; /* 列容器先撑满整行高度，列内才能补高 */
}
.grid.g2 > div > .card {
margin-top: 0; /* 间距交给上面的 gap，避免 16px 叠加 */
}
.grid.g2 > div > .card:last-child {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* 被补高的那张卡：卡片体吃掉剩余高度（表格/空态不参与补高，避免白块） */
.grid.g2 > div > .card:last-child > .card-bd,
.grid.g2 > div > .card:last-child > .chart-bd {
flex: 1 1 auto;
min-height: 0;
}
.grid.g2 > div > .card:last-child:has(table),
.grid.g2 > div > .card:last-child:has(.empty) {
flex: 0 0 auto;
}
/* --- K7. 移动端 / 窄屏：单列堆叠，一切回到"按内容高度" --- */
@media (max-width: 860px) {
.grid.grid > *,
.wb-grid.wb-grid > *,
.ast-two.ast-two > * {
align-self: auto;
}
.card.chart-card > .chart-bd,
.card:has(> .chart-bd) > .chart-bd,
.card > .empty,
.card:has(> .card-bd > .empty) > .card-bd {
flex: 0 0 auto;
justify-content: flex-start;
}
.grid.g2 > div:not(.card):not(.kpi):not(.panel) {
display: block;
}
.grid.g2 > div > .card:last-child {
flex: 0 0 auto;
}
/* 单列下 `.card + .card` 的 16px 间距是必要的，恢复它 */
.grid.g2 > div > .card + .card {
margin-top: var(--sp-4);
}
}
/* ============================================================
K8 / K9 · KPI 行的两处收尾（v171.1）
============================================================ */
/* --- K8. KPI 金额不再被省略号截断 ---
成因：ds.css:938-943 为了"长数字不撑破卡片"加了
`.k-val { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }`，
于是一旦金额超过卡片宽度就显示成 `6,740,000.0…` —— 数字最重要的信息被吃掉了。
解法：把 KPI 卡变成查询容器，字号按**卡片宽度**自适应（cqi），
让长金额自动缩号而不是截断；同时收紧字距，多放一位。
系数说明：cqi 是**查询容器内容盒**的百分比（不是 border-box）。
6 列时卡片 178px、内容盒 140px，14cqi ≈ 19.6px ——
实测 12 字符金额（6,740,000.00）在 140px 内刚好完整；宽屏卡片自动放大，
上限仍是原来的 --fs-9(29px)，不会比改动前更大。
包在 @supports 里：不支持容器查询的浏览器继续走原来的省略号逻辑，
不会出现"文字被硬裁掉"的更差结果。 */
@supports (container-type: inline-size) {
.kpis > .kpi,
.wb-kpis > .kpi,
.tw-kpis > .tw-kpi {
container-type: inline-size;
}
.kpis > .kpi .k-val,
.wb-kpis > .kpi .kv,
.tw-kpis > .tw-kpi b {
overflow: visible;
text-overflow: clip;
font-size: clamp(17px, 14cqi, var(--fs-9));
letter-spacing: -.045em;
}
}
/* --- K9. 六项 KPI 一行排满（第 6 张不再掉到第二行） ---
实测：`.view` 内容盒 1130px，`.kpis` 的 minmax(184px,1fr) 需要
6×184+5×12=1164px，放不下 → 只剩 5 列，第 6 张孤零零落在第二行最左，
右边空出 930px，看起来像"漏了一张卡"。
把这类容器的最小列宽压到 158px 即可一行 6 张（6×158+60=1008 ≤ 1130）。
带 k6 / kpis6 的容器（采购、库存、财务、法务、团队、资产）本来就显式
写好了六列栅格与 1360px 断点，这里用 :not() 排除，绝不覆盖它们的响应式规则。 */
.kpis:has(> .kpi:nth-child(6)):not(.k6):not(.kpis6) {
grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
}
/* ============================================================
L. 12 列网格系统（方案 A · Step 1）
------------------------------------------------------------
目的：给全站一个统一的网格基准，替代现在 80+ 种不同的
grid-template-columns 和 8 种 gap。
★ 作用域隔离：本段所有规则只在 .grid-12 容器内生效。
现有 27 个视图用的是 .grid / .g2 / .g3 / .kpis，完全不受影响。
迁移一页，才有一页用上新网格；出问题只影响已迁移的页面。
为什么用 12 列：
3/4/6/8/12 五种跨度都能整除 12，任意组合都能对齐。
这是 react-grid-layout / Bootstrap / Ant Design 的同一套基准。
============================================================ */
/* --- L1. 网格令牌 --- */
:root {
--grid-cols: 12;
--grid-gap: 16px; /* 卡片间距，全站唯一值（原 8 种 → 1 种） */
--grid-row: 140px; /* 基础行高：内容少的卡片最小高度 */
--card-pad: 20px; /* 卡片内边距，唯一值 */
}
/* --- L2. 网格容器 --- */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--grid-gap);
/* 行高：最小 140px，内容多时可撑高；同行卡片由 stretch 自动等高 */
grid-auto-rows: minmax(var(--grid-row), auto);
align-items: stretch;
min-width: 0;
}
/* --- L3. 跨度档位（3/4/6/8/12，按用户确认） --- */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
/* 纵向跨行（可选：内容确实需要更高时用） */
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }
/* --- L4. 响应式：列数递减，span 按比例折算（百分比永远不变） --- */
@media (max-width: 1199px) {
.grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.col-3 { grid-column: span 2; } /* 2/8 = 25% */
.col-4 { grid-column: span 3; } /* 3/8 ≈ 37% */
.col-6 { grid-column: span 4; } /* 4/8 = 50% */
.col-8 { grid-column: span 5; } /* 5/8 ≈ 62% */
.col-12 { grid-column: span 8; }
}
@media (max-width: 991px) {
.grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.col-3 { grid-column: span 2; } /* 2/6 ≈ 33% */
.col-4 { grid-column: span 2; }
.col-6 { grid-column: span 3; } /* 3/6 = 50% */
.col-8 { grid-column: span 4; } /* 4/6 ≈ 67% */
.col-12 { grid-column: span 6; }
}
@media (max-width: 767px) {
.grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-3, .col-4, .col-6 { grid-column: span 2; } /* 两两并排 */
.col-8, .col-12 { grid-column: span 4; } /* 整行 */
}
@media (max-width: 479px) {
.grid-12 { grid-template-columns: 1fr; }
.col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 1; }
.row-2, .row-3 { grid-row: auto; } /* 单列下取消跨行 */
}
/* --- L5. 卡片三段结构（只在 .grid-12 内生效）---
目标：同一行等高 + 内容少时居中不显空 + 内容多时内部滚动不撑破 */
.grid-12 > .card,
.grid-12 > div > .card {
display: flex;
flex-direction: column;
min-height: var(--grid-row);
min-width: 0; /* 防止 grid 子项被内容撑破 */
overflow: hidden; /* 配合内部滚动，避免圆角处溢出 */
}
/* 头部：固定高度，不参与伸缩 */
.grid-12 > .card > .card-hd,
.grid-12 > div > .card > .card-hd { flex: 0 0 auto; }
/* 主体：吃掉剩余高度；内容超出时内部滚动，不把整行撑高 */
.grid-12 > .card > .card-bd,
.grid-12 > .card > .chart-bd,
.grid-12 > div > .card > .card-bd,
.grid-12 > div > .card > .chart-bd {
flex: 1 1 auto;
min-height: 0; /* flex 子项能收缩的关键 */
overflow-y: auto;
}
/* 空态：垂直居中，空白均分上下（而不是全堆在底部） */
.grid-12 > .card > .empty,
.grid-12 > div > .card > .empty {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
/* --- L6. 列容器（.grid-12 里包一层 div 再放多张卡的场景）---
如采购页左列：近效期 → 类别分布 → 待办，三张卡纵向堆叠 */
.grid-12 > div:not(.card) {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
min-width: 0;
min-height: 0;
}
/* 列内最后一张卡吸收剩余高度，避免列底露出页面底色（灰缝） */
.grid-12 > div:not(.card) > *:last-child {
flex: 1 1 auto;
}
/* 列内的卡片也要能撑满（覆盖 .card 默认的 min-height） */
.grid-12 > div:not(.card) > .card {
min-height: 0;
}
/* --- L7. 表格卡例外：允许表格自然撑高，不强制滚动 ---
表格滚动体验差（用户要一屏看 30 行），所以表格卡不设 overflow。
高度仍由 grid 保证同行等高。 */
.grid-12 > .card:has(> .card-bd table),
.grid-12 > div > .card:has(> .card-bd table) > .card-bd {
overflow-y: visible;
}
/* ============================================================
M. 修正：`.card + .card` 在网格容器内重复计算间距（第 3 次踩同一个坑）
------------------------------------------------------------
历史：
- v175 我加了 G5 `.card + .card { margin-top: 16px }`（本意给纵向叠放卡留间距）
- v178 在 K1 里用 `.grid.grid > * + *` 清零 —— **只覆盖了 `.grid`**
- v179 新增 `.grid-12`，又没覆盖 → 同排第 2/3/4 张卡再次下沉 16px
实测（测试页第一行四张 col-3）：A top=24，B/C/D top=40 —— 正好差一个 gap
★ 这次不再逐个容器打补丁，改为给 G5 加"排除网格容器"的条件：
只要容器 class 含 "grid" 或 "cols-"，内部相邻卡片的 margin-top 一律归零，
间距全部交给 gap。以后新增任何网格容器都自动正确。
============================================================ */
[class*="grid"] > .card + .card,
[class*="grid"] > * > .card + .card,
[class*="cols-"] > .card + .card,
[class*="cols-"] > * > .card + .card,
.kpis > .kpi + .kpi,
.kpis > * + * {
margin-top: 0;
}
/* 同理：卡片与网格容器相邻时也不叠加 margin（间距由外层容器的 gap 负责） */
[class*="grid"] > .card + [class*="grid"],
[class*="grid"] > [class*="grid"] + .card {
margin-top: 0;
}
/* --- L8. 工作台卡片组：按卡片数量自动均分跨度 ---
工作台主网格有 3 或 4 张卡（"我的申请"按权限条件渲染）：
4 张 → 各 3/12（一行四列）；3 张 → 各 4/12（一行三列）。
用 :has() 数卡片数量，不需要在 JS 里判断，卡片增删自动适配。 */
.grid-12.wb-cards > .card { grid-column: span 4; } /* 默认 3 列 */
.grid-12.wb-cards:has(> .card:nth-child(4)) > .card { grid-column: span 3; } /* 4 张时改 4 列 */
/* --- L9. 流程全景卡片：补内边距 ---
根因：.card 本身不带 padding（padding 在 .card-hd/.card-bd 上），
而 .fc-flowcard 把内容直接放在 .card 里，所以标题和节点链都贴着卡片边。
对比：其它卡片的正文都在 .card-bd 里，所以有 18-20px 内边距。 */
.fc-flowcard {
padding: 14px 16px;
gap: 12px; /* 原来 10px，标题与节点链之间多留一口气 */
}
.fc-flowcard .fc-flow-hd { gap: 12px; } /* 原来 8px，标题与徽章之间太挤 */
.fc-flowcard .fc-flow-hd b {
font-size: var(--fs-5);
line-height: 1.35;
min-width: 0; /* 允许长标题收缩，而不是把徽章挤出去 */
}
/* 徽章不参与压缩，始终完整显示 */
.fc-flowcard .fc-flow-hd .badge { flex: 0 0 auto; white-space: nowrap; }
/* 节点链在窄卡片里换行，不撑破 */
.fc-flowcard .fc-chain { gap: 6px 6px; }
/* --- L10. 修正：flex 列容器内的卡片必须撑满宽度 ---
★ 真正的灰带根因（用户反馈第 5 次才找到）：
v178 的 K4 段为了修「表格卡/空态卡被拉伸留白」，给它们加了
.card:has(table), .card:has(.empty) { align-self: start }
在 **grid 容器**里，align-self 控制的是「垂直方向」（高度按内容）—— 这是想要的。
但在 **flex column 容器**（.grid-12 的列容器）里，
align-self 控制的是「水平方向」（宽度）→ 卡片宽度变成内容宽度，
于是在宽列里露出一大片页面底色 = 用户看到的灰带。
修法：在 flex 列容器内强制 stretch 宽度，高度仍由 flex 分配。 */
.grid-12 > div:not(.card) > .card,
.grid-12 > div:not(.card) > * > .card {
align-self: stretch;
width: auto; /* 覆盖可能存在的 width: fit-content / max-content */
min-width: 0;
}
/* --- L11. 资产页 .ast-two 纳入 12 列网格 ---
资产页有 4 处 （原 1fr 1fr，gap 16）。
只在 CSS 层覆盖，不动 JS —— 4 处同时受益，符合最小改动原则。
同时补上「卡片撑满列容器」：理由同 L10（align-self 在 flex 里的语义）。 */
.ast-two {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--grid-gap);
margin-bottom: 16px; /* 保留原间距 */
}
.ast-two > * { grid-column: span 6; }
/* 卡片结构：撑满宽度 + 主体吃剩余高度 */
.ast-two > .card {
display: flex;
flex-direction: column;
align-self: stretch;
min-width: 0;
min-height: var(--grid-row);
}
.ast-two > .card > .card-bd,
.ast-two > .card > .chart-bd { flex: 1 1 auto; min-height: 0; }
.ast-two > .card > .empty { flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; }
/* 响应式：与 .grid-12 同一套断点 */
@media (max-width: 991px) {
.ast-two { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ast-two > * { grid-column: span 6; } /* 单列（6/6） */
}
@media (max-width: 479px) {
.ast-two { grid-template-columns: 1fr; }
.ast-two > * { grid-column: span 1; }
}
/* ============================================================
N. Apple 风下拉选框（方案 C · 零侵入增强）
------------------------------------------------------------
原生