/* ============================================================================
 * 工作台公共表格件 · table.css  v1.0（2026-09-17）
 * 依据《工作台表格规范》v1.7 第三~十二章实现；各工作台直接引用，不再各自复制。
 * 用法：列表容器加 class="ctbl"，内部结构：
 *   <div class="ctbl">
 *     <div class="fchips">…已选条件…</div>
 *     <div class="table-scroll"><table class="…（可另加业务类）">…</table></div>
 *     <div class="pager">…</div>
 *   </div>
 * 说明：不覆盖页面其它表格（本文件所有规则均以 .ctbl / .colpop / .float-thead 为根，
 *       不写裸 table / th / td 选择器）。
 * ========================================================================== */

/* ---- §12.2 颜色变量（作用域限定在公共件内，不污染页面其它元素） ---- */
.ctbl {
  --brand: #0033ff; --brand-light: #e8eefb; --border: #e3e8f0; --text: #1f2733; --muted: #7a8699;
  --green: #12a35c; --green-bg: #e6f6ee;
  --red: #d93026;   --red-bg: #fdebea;
  --yellow: #c77d00; --yellow-bg: #fff4e0;
  --gray: #6b7280;  --gray-bg: #f0f2f5;
  --thead-bg: #f8fafc; --hover-bg: #f7faff;
}

/* ---- §三 表格基础样式 ---- */
.ctbl .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 启用吸底横条时，隐藏表格自带横滚动条，避免出现两条（2026-09-17） */
.ctbl .table-scroll.hide-hbar { scrollbar-width: none; }
.ctbl .table-scroll.hide-hbar::-webkit-scrollbar { height: 0; display: none; }
/* ---- §4.9 吸底横向滚动条：页面上下滚动时粘在视口底部，滚到表格底部自动归位 ---- */
.ctbl-hbar {
  position: sticky; bottom: 0; z-index: 55;
  overflow-x: auto; overflow-y: hidden;
  height: 14px; background: #f7f9fd; border-top: 1px solid var(--border);
  display: none;
}
.ctbl-hbar.on { display: block; }
.ctbl-hbar > i { display: block; height: 1px; }
.ctbl table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ctbl th, .ctbl td {
  text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--border);
  font-size: 12.8px; vertical-align: middle; box-sizing: border-box;
}
.ctbl th {
  background: var(--thead-bg); color: var(--muted); font-weight: 500; font-size: 12px;
  user-select: none; white-space: normal; position: relative;
  border-top: 1px solid var(--border);   /* §三.4 表头上面补一条表格线（底/内都有，唯顶部曾缺）2026-09-18 文哥定 */
  padding-right: 0;   /* 表头图标贴住列右边框；只有数据把列撑宽时才会出现间隙（2026-09-17 文哥定） */
}
.ctbl tbody tr:hover td { background: var(--hover-bg); }
/* 行合并表：鼠标经过时整组（同一订单的多行）一起高亮（2026-10-19 文哥定） */
.ctbl tbody tr.rm-hover td { background: var(--hover-bg); }

/* ---- §四 数据行：不换行 + 超长省略 ---- */
.ctbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctbl td.num { text-align: right; font-family: Consolas, Menlo, monospace; color: #1f2f55; }
/* 2026-09-22 文哥定：数值列里的「中文单位」用中文字体（数值仍等宽），避免「5万元」一格两字体 */
.ctbl td.num .u { font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; font-weight: 400; }
.ctbl td.c { text-align: center; }
.ctbl td.w { white-space: nowrap; }
/* ---- §三.2 统一最小行高（2026-09-18 文哥定）----
   各表行高一致，不再“带标签/按钮的行高出一截”；表内控件压到 24px 以内以对齐最小行高。
   仅在桌面端生效：≤ᅸ68px 卡片式布局不受影响。 */
@media (min-width: 769px) {
  .ctbl tbody td { height: 42px; }                              /* 单元格 height = 最小行高 */
  .ctbl tbody .btn.small,
  .ctbl tbody .row-btn { height: 23px; min-height: 23px; line-height: 23px; }   /* 表内按钮压到 23px：内联盒不撑破 42px 最小行高 */
}
.ctbl td.tc-empty { text-align: center; color: var(--muted); padding: 40px 0; text-overflow: clip; }
/* ---- §8.3/§8.4 浮层·弹层统一外观与内层结构（公共件**唯一定义**；「查看」按钮弹层与省略号浮层共用同一份 CSS，页面禁止自写任何浮层样式）2026-09-17 文哥定 ---- */
/* 关键：①同一外层 padding（上下左右留白一致）；②内层标题/正文/分段同一套规则；
   ③两处浮层 DOM 结构一致（.cp-hd 可选 + .cp-bd > .cp-seg），杜绝“看起来不是一个东西”。 */
.ctbl-pop {
  position: fixed; z-index: 900; display: none;
  min-width: 180px; max-width: 470px;
  background: #fff; border: 1px solid #d7e0f2; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 35, 95, .18);
  padding: 10px 12px 11px;                              /* 四边留白：上10 右12 下11 左12 */
  font-size: 12.5px; line-height: 1.75; color: #333c4e;
  white-space: normal; word-break: break-all;
  pointer-events: auto; user-select: text;              /* 鼠标可移上来、内容可选中复制 */
}
.ctbl-pop .cp-hd { font-size: 12px; font-weight: 700; color: #0033ff; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #edf1f8; }
.ctbl-pop .cp-hd .cp-lk { color: #9aa6b8; font-weight: 400; margin-left: 6px; }
.ctbl-pop .cp-bd { font-size: 12.5px; line-height: 1.75; color: #333c4e; white-space: normal; margin: 0; }
.ctbl-pop .cp-seg { display: block; padding-left: 13px; position: relative; }
.ctbl-pop .cp-seg::before { content: "·"; position: absolute; left: 2px; color: #0033ff; font-weight: 700; }
.ctbl-pop .cp-seg + .cp-seg { margin-top: 4px; }
/* 浮层里的链接段（2026-09-18 文哥定）：格子被省略号截掉的链接，浮层里照样是可点的链接 */
.ctbl-pop .cp-seg-link { padding-right: 2px; }
.ctbl-pop .cp-seg-link a, .ctbl-pop .cp-seg-link .cp-link,
.ctbl-pop .cp-seg-link .link-cell, .ctbl-pop .cp-seg-link button {
  color: #0033ff; cursor: pointer; text-decoration: none; font: inherit;
}
.ctbl-pop .cp-seg-link a:hover, .ctbl-pop .cp-seg-link .cp-link:hover,
.ctbl-pop .cp-seg-link .link-cell:hover { text-decoration: underline; }
.ctbl-pop .cp-bd:last-child, .ctbl-pop .cp-seg:last-child { margin-bottom: 0; }   /* 末行不留额外下边距，上下留白一致 */
.ctbl .link-cell { color: var(--brand); cursor: pointer; font-weight: 500; }
.ctbl .link-cell:hover { text-decoration: underline; }
.ctbl .muted { color: var(--muted); font-size: 12px; }
.ctbl .empty { text-align: center; color: var(--muted); padding: 40px 0; }
/* ---- §4.13 加载 / 错误态（统一：加载中… / 加载失败…；2026-09-18 收自人事工作台，各台共用） ---- */
.ctbl-loading { text-align: center; color: var(--muted, #7a8699); font-size: 12.5px; padding: 14px; }
.ctbl-loading.error { color: var(--red, #d93026); }

/* ---- §5.2 表头两行截断（长字段名自动换行、最多两行） ---- */
/* 表头内层 flex：字段名与漏斗/箭头同一行，图标绝不换行 */
/* 表头内层 flex：字段名与漏斗/箭头同行，图标紧贴文字无间隙、绝不换行；
   表头文字贴左（与左边框不留空隙）；图标与右边框的间隙由该列数据宽度决定（2026-09-17 文哥定） */
.ctbl th .th-inner { display: flex; align-items: center; min-width: 0; }
.ctbl th .th-txt {
  flex: 0 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; line-height: 1.35;
}
.ctbl th .funnel, .ctbl th .arrow { flex: 0 0 auto; }

/* ---- §5.3 排序表头 / §5.4 筛选表头 ---- */
.ctbl th.sortable { cursor: pointer; }
.ctbl th.sortable:hover { color: var(--brand); }
.ctbl th .arrow { font-size: 10px; margin-left: 2px; color: #b6bfcc; }
.ctbl th .arrow.on { color: var(--brand); }
.ctbl th .funnel {
  cursor: pointer; margin-left: 3px; color: #c2cad6; display: inline-flex;
  align-items: center; vertical-align: -3px; border-radius: 4px;
}
.ctbl th .funnel svg { width: 12px; height: 12px; display: block; }
.ctbl th .funnel:hover, .ctbl th .funnel.on { color: var(--brand); }

/* ---- §4.8 列宽拖拽手柄 ---- */
.ctbl th .col-resizer { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 6; }
.ctbl th .col-resizer:hover { background: rgba(0, 51, 255, .14); }
/* 2026-09-19 文哥定：表头按字段类型对齐——数值列表头（th.num）同数据一样居右，文字+图标整组靠右。
   口径与数据单元格 §三.3 td.num 一致；c.align==='left' 的列不加 .num，保持居左。 */
.ctbl th.num .th-inner { justify-content: flex-end; }
.ctbl th.num { padding-left: 0; }
.ctbl th.num .th-txt { text-align: right; }

/* ---- §4.7 左右两端固定列（桌面端） ---- */
@media (min-width: 769px) {
  .ctbl table.pin th.pin-l, .ctbl table.pin td.pin-l { position: sticky; left: 0; z-index: 2; background: #fff; }
  .ctbl table.pin th.pin-l { z-index: 4; background: var(--thead-bg); }
  .ctbl table.pin td.pin-l { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .14); }
  .ctbl table.pin th.pin-r, .ctbl table.pin td.pin-r { position: sticky; right: 0; z-index: 2; background: #fff; }
  .ctbl table.pin th.pin-r { z-index: 4; background: var(--thead-bg); }
  .ctbl table.pin td.pin-r { box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .14); }
  /* 悬停态需覆盖固定列底色 */
  .ctbl table.pin tbody tr:hover td.pin-l, .ctbl table.pin tbody tr:hover td.pin-r { background: var(--hover-bg); }
  .ctbl table.pin tbody tr.rm-hover td.pin-l, .ctbl table.pin tbody tr.rm-hover td.pin-r { background: var(--hover-bg); }
}

/* ---- §7.3 已选条件 chips ---- */
.ctbl .fchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ctbl .fchip {
  display: inline-flex; align-items: center; gap: 6px; background: #eef4ff; color: #1a3a8f;
  border: 1px solid #cddffb; border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 12px; max-width: 100%;
}
.ctbl .fchip .x { cursor: pointer; color: #7b8bb0; font-weight: 700; padding: 0 2px; }
.ctbl .fchip .x:hover { color: var(--red); }

/* ---- §八 底部翻页 ---- */
.ctbl .pager { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.ctbl .pager .pager-size { margin-left: 0; }   /* 左对齐顺排：跳至/每页 紧贴「下一页」左侧（2026-09-17 文哥第11条重做，取消右顶） */
.ctbl .pager .btn { min-height: 28px; }
.ctbl .pager select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; background: #fff; color: var(--text); outline: none; }
.ctbl .pager input { font-family: inherit; font-size: 13px; color: var(--text); background: #fff; outline: none; }
.ctbl .pager input:focus, .ctbl .pager select:focus { border-color: var(--brand); }

/* ---- §12.1 状态标签 ---- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; line-height: 1.6; }
.tag.blue { background: #e8eefb; color: #0033ff; }
.tag.green { background: #e6f6ee; color: #12a35c; }
.tag.red { background: #fdebea; color: #d93026; }
.tag.yellow { background: #fff4e0; color: #c77d00; }
.tag.gray { background: #f0f2f5; color: #6b7280; }

/* ---- §12.5 行状态 / 勾选列 / 批量条 ---- */
.ctbl tbody tr.clk { cursor: pointer; }
.ctbl tbody tr.hl-row td { background: #fff6c2 !important; }
.ctbl tbody tr.hl-row td:first-child { box-shadow: inset 3px 0 0 #f0b400; }
.ctbl tbody tr.sel-row td { background: #dfeaff !important; }
.ctbl tbody tr.sel-row td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.ctbl th.ckcol, .ctbl td.ckcol { text-align: center; padding-left: 8px; padding-right: 8px; }   /* 2026-10-10：表头/数据格左右内边距对齐（原 th padding-right:0 会让表头勾偏右） */
.ctbl .batch-bar {
  display: flex; flex-wrap: wrap; gap: 8px; background: #eef4ff; border: 1px solid #c7d9fb;
  border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px;
}
.ctbl .batch-bar b { color: var(--brand); font-size: 15px; }

/* ---- §12.8 十字高亮（宽 × 长表：本页 >10 列 且 >10 行 且存在「连续 4 列数字」）★2026-09-17 文哥定（B 方案） ----
   悬停单元格 → 整行 + 整列同时高亮（所有列均生效）。
   行 / 列 / 交叉点统一为**同一族半透明蓝叠加**，只分深浅；**不换底**（红行、固定列、选中态均保留）。 */
.ctbl table.ch-on tbody tr:hover td {
  /* 悬停行：先把底色还原成该行自身底色（--ch-base，由 crossHair 写入），再叠同族蓝 */
  background-color: var(--ch-base, transparent) !important;
  background-image: linear-gradient(rgba(0, 51, 255, .05), rgba(0, 51, 255, .05)) !important;
}
.ctbl table.ch-on tbody td.ch-c { background-image: linear-gradient(rgba(0, 51, 255, .05), rgba(0, 51, 255, .05)) !important; }
.ctbl table.ch-on tbody tr:hover td.ch-x { background-image: linear-gradient(rgba(0, 51, 255, .13), rgba(0, 51, 255, .13)) !important; }
.ctbl table.ch-on tbody tr:hover td.pin-l, .ctbl table.ch-on tbody tr:hover td.pin-r { background-color: var(--ch-base, #fff) !important; }   /* 固定列必须不透明：否则横向滚动时下层内容透出来成「重影」（2026-09-17 文哥第13条） */
.ctbl table.ch-on thead th.ch-c { background-image: linear-gradient(rgba(0, 51, 255, .07), rgba(0, 51, 255, .07)) !important; }

/* ---- §12.6 表头筛选弹窗（组件级，供所有表格共用） ---- */
.colpop {
  position: fixed; z-index: 1000100; background: #fff; border: 1px solid #e3e8f0; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16); padding: 6px; max-height: 300px; overflow: auto;
  min-width: 160px; display: none;
}
.colpop .opt { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.colpop .opt:hover { background: #f2f4f8; }
.colpop .opt.on { color: #0033ff; font-weight: 600; }
.colpop .opt .c { color: #9ca3af; font-size: 12px; }
.colpop input.cf-search { width: 190px; border: 1px solid #e3e8f0; border-radius: 6px; padding: 6px 8px; font-size: 13px; font-family: inherit; outline: none; }
.colpop input.cf-search:focus { border-color: #0033ff; }
.colpop input[type=number], .colpop input[type=date] { border: 1px solid #e3e8f0; border-radius: 6px; padding: 6px 8px; font-size: 13px; font-family: inherit; outline: none; }
.colpop input[type=number]:focus, .colpop input[type=date]:focus { border-color: #0033ff; }

/* ---- §九 吸顶浮动表头 ---- */
.float-thead {
  position: fixed; top: 0; left: 0; z-index: 80; display: none; overflow: hidden;
  background: #f8fafc; box-shadow: 0 6px 12px rgba(15, 35, 95, .10);
}
.float-thead table { width: auto; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.float-thead th {
  box-sizing: border-box; background: #f8fafc; color: #7a8699; font-weight: 500; font-size: 12px;
  padding: 9px 0 9px 8px; text-align: left; white-space: normal; vertical-align: middle;
  border-bottom: 1px solid #e3e8f0; overflow: hidden;
}
.float-thead th .th-inner { display: flex; align-items: center; min-width: 0; }
.float-thead th .th-txt { flex: 0 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.float-thead th .funnel, .float-thead th .arrow { flex: 0 0 auto; }
.float-thead th .arrow { font-size: 10px; margin-left: 2px; color: #b6bfcc; }
.float-thead th .arrow.on { color: #0033ff; }
.float-thead th .funnel { margin-left: 3px; color: #c2cad6; display: inline-flex; align-items: center; vertical-align: -3px; }
.float-thead th .funnel svg { width: 12px; height: 12px; display: block; }
.float-thead th .funnel.on { color: #0033ff; }
.float-thead th .col-resizer { display: none; }
/* 吸顶浮头同步：数值列表头居右（2026-09-19 文哥定，与 .ctbl th.num 同口径） */
.float-thead th.num .th-inner { justify-content: flex-end; }
.float-thead th.num { padding-left: 0; }
.float-thead th.num .th-txt { text-align: right; }

/* ---- §九 浮动表尾（小计/合计固定底部，与吸顶浮头对称）2026-09-17 文哥定 ---- */
.float-foot {
  position: fixed; left: 0; bottom: 0; z-index: 70; display: none; overflow: hidden;
  background: #fff; box-shadow: 0 -6px 12px rgba(15, 35, 95, .10);
}
.float-foot-scroll { overflow-x: hidden; }   /* 横向用 scrollLeft 同步，使固定列（pin-l/pin-r）在浮尾里同样定住 */
.float-foot table { min-width: 0; table-layout: fixed; border-collapse: collapse; }
.float-foot tfoot tr { display: table-row; }
/* 浮尾里的翻页行（2026-09-17 文哥定：翻页行也固定在底部）。浮动时真 .pager 节点被搬入本容器，收起时自动搬回原位。 */
.float-foot .pager { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border, #e5e7eb); background: #fff; }

/* ============================================================================
 * §2.3 冻结区 · 表格上方「筛选条 + 按钮」（★2026-09-17 文哥定，全站统一，禁止各台再自写）
 * 结构：.wt-bar（行）> .wt-tabs（左：筛选 tab 组） + .btn（右：动作按钮）
 * 兼容别名：.tabs / .sfilter-item / .count（老页面零改动即生效，后续新页面用 .wt-*）
 * 冻结取值：行上下 padding 12px、左右 padding 0（★左右缘与表格卡片对齐：Tab 左缘 = 表格左缘、按钮右缘 = 表格右缘）/ 底 #f2f4f8 / gap 8px / 行可换行、**Tab 组单行不换行**（★2026-09-19 文哥定：Tab 组内部一律单行 + 横向滚动，禁止换行）/ 上下外边距 0（与上方 Tab 栏、下方卡片贴合）；
 *           tab padding 6px 14px / radius 6px / 14px #262626 / 白底 / 透明边；
 *           ★行内对齐：.wt-bar 交叉轴用 baseline（文字基线）——Tab 行与右侧按钮自动对齐，不受滚动条占高影响（2026-09-19 文哥定）；
 *           激活 = 黑字 + 500 + 1px 黑边；计数徽标 #f0f2f5/#8c8c8c/12px；
 *           按钮 min-height 32px / radius 6px / 13px，.small 28px/12px。
 * ========================================================================== */
.wt-bar, .tabs {
  /* ★2026-09-19 文哥定：「按钮与 Tab 行对齐」→ 交叉轴用 baseline（文字基线）对齐。
     背景：Tab 组改成横向滚动容器后，**原生横条自己占高（Windows 15px）**，
     容器 box 变高 → 若仍用 center，会把右侧按钮顶到「容器中心」而比 Tab 低 ~7.5px（实测）。
     baseline 比高度/滚动条何时生效：双方**文字基线永远对齐**，有、无滞动条实测偏差都是 0.00px（center 时为 +7.50px）。 */
  display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap;   /* 整条不换行：右侧按钮固定，左侧 Tab 组横向滚动（2026-10-17 文哥定） */
  padding: 12px 0;   /* 上下 12px；左右 0 → 内容左右缘与表格卡片对齐（Tab 左缘=表格左缘、按钮右缘=表格右缘，★2026-09-17 文哥定，公共库职责） */
  background: #f2f4f8;
  margin: 0;   /* 上下均无外边距：行与上方 Tab 栏、与下方表格卡片贴合（参照供应链工作台，2026-09-17 文哥定） */
}
/* 2026-10-17 文哥定：.wt-bar 内动作按钮固定整块、不收缩、不换行；Tab 组负责横向滚动 */
.wt-bar > .btn, .wt-bar > .btn-wrap { flex: 0 0 auto; }
.wt-tabs, #sfilterBar, #bhFilterBar {
  display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0;
  /* ★2026-09-19 文哥定（公共库职责，各台禁止再自写）：Tab 组**单行不换行 + 横向滚动**。
     背景：供应链「采购订单」付款/发货两维共 10 个 tab，换行会掉到第二行、把分组割裂。
     做 法：nowrap 保证行高恒定（分组靠 .mod-tab-divider 竖线 + 间距体现），超宽时容器内横向滚动；
     只作用于 Tab 组容器 —— 右侧动作按钮（.btn）在 .wt-bar 里，**不随滚动移出、始终可见**。 */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: 1px;
}
/* Tab 组内所有成员（tab / 竖线分隔符）禁止收缩，否则会被压扁而不是滚动 */
.wt-tabs > *, #sfilterBar > *, #bhFilterBar > * { flex: 0 0 auto; }
/* 滚动条外观：★2026-09-19 文哥定 —— **不自定义**，直接用浏览器原生横条，
   与表格横向滚动条（.ctbl .table-scroll / 吸底 .ctbl-hbar，均为原生 overflow-x:auto 容器）完全一致，
   全局统一一条外观，禁止各台再自写 ::-webkit-scrollbar 皮肤。 */
.wt-tab, .sfilter-item {
  display: inline-flex; align-items: center; gap: 6px;
  /* ★2026-10-23 文哥定：Tab 与同一筛选条内的动作按钮 .btn 同高 32px。
     原来 padding 6px 14px 靠内容撑到 35.2px，比 .btn（32px）高 3.2px，看起来一大一小。 */
  box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent;
  background: #fff; color: #262626; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.wt-tab:hover, .sfilter-item:hover { color: var(--brand, #0033ff); }
.wt-tab.active, .sfilter-item.active { color: #000; font-weight: 500; border-color: #000; }
.wt-tab .cnt, .sfilter-item .count {
  background: #f0f2f5; color: #8c8c8c; border-radius: 4px; padding: 1px 7px; font-size: 12px; line-height: 1.6;
}
.wt-tab.add, .sfilter-item.add { color: var(--brand, #0033ff); border: 1px dashed var(--brand, #0033ff); }
.wt-tab.add:hover, .sfilter-item.add:hover { opacity: .8; }
/* §2.3.1 置灰 tab（无数据 / 禁用）：不可点、置灰；2026-09-18 收自人事工作台，各台共用 */
.wt-tab.dim, .sfilter-item.dim { color: #c0c4cc; cursor: default; }
.wt-tab.dim:hover, .sfilter-item.dim:hover { color: #c0c4cc; }
.wt-tab.dim.active, .sfilter-item.dim.active { color: #c0c4cc; border-color: transparent; font-weight: 400; }
/* §2.3.2 顶栏贴顶：放在 .wrap 等有上边距的容器里时，加 .flush-top 抵消容器顶边距（与上方 Tab 栏贴合）；2026-09-18 */
.wt-bar.flush-top { margin-top: -16px; }
/* §2.3.3 tab 分组竖线分隔符（.mod-tab-divider）：两组 tab 之间一条竖线 + 左右间距分组（2026-10-11 文哥定：收进公共库，各台不再自写）；
   用法：把 <span class="mod-tab-divider"></span> 插在两组 tab 之间（与 tab 同为 flex 子项）。 */
.mod-tab-divider { width: 1px; height: 16px; background: #d9d9d9; align-self: center; margin: 0 10px; flex-shrink: 0; }

/* ---- §2.4 按钮族（.btn）冻结（同上，全站统一） ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border, #e3e8f0); background: #fff; color: var(--text, #1f2733);
  padding: 0 14px; min-height: 32px; height: auto; box-sizing: border-box; line-height: 1;
  border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap;
  font-family: inherit; text-decoration: none; transition: .15s;
}
.btn:hover { border-color: var(--brand, #0033ff); color: var(--brand, #0033ff); }
.btn.primary { background: var(--brand, #0033ff); border-color: var(--brand, #0033ff); color: #fff; }
.btn.primary:hover { color: #fff; opacity: .9; }
.btn.ghost { background: transparent; border-color: var(--brand, #0033ff); color: var(--brand, #0033ff); }
.btn.ghost:hover { background: var(--brand-light, #e8eefb); color: var(--brand, #0033ff); }
.btn.ghost.active { background: transparent; border-color: #000; color: #000; font-weight: 500; }
.btn.danger { color: var(--red, #d93026); }
.btn.danger:hover { border-color: var(--red, #d93026); }
.btn.small { padding: 0 10px; font-size: 12px; min-height: 28px; height: auto; }
.btn:disabled { background: #f0f2f5; color: #b0b7c3; border-color: #e5e7eb; cursor: not-allowed; }
.btn.primary:disabled { background: #d0d5dd; border-color: #d0d5dd; color: #fff; }
.btn-locked { pointer-events: none; opacity: .55; }

/* ---- §十 响应式（≤768px 卡片式） ---- */
@media (max-width: 768px) {
  .ctbl .table-scroll { overflow-x: visible; }
  .ctbl table { width: 100% !important; table-layout: auto; }
  /* 2026-09-19 文哥定（移动端卡片缩在左边）：table / tbody 必须一并转 block。
     只把 tr/td 转 block 的话，浏览器会把 display:block 的 tr 包进「匿名表格单元格」，
     行宽按内容收缩（实测行宽 151 vs 容器 336）→ 整块缩在左侧。colgroup 同步隐藏。 */
  .ctbl table, .ctbl tbody { display: block; }
  .ctbl colgroup, .ctbl col { display: none; }
  .ctbl thead { display: none; }
  .ctbl tbody tr { display: block; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 6px 2px; background: #fff; }
  .ctbl tbody td {
    display: flex; justify-content: space-between; gap: 12px; border-bottom: none;
    white-space: normal; overflow: visible; text-overflow: clip; padding: 6px 12px;
  }
  .ctbl tbody td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: 0 0 auto; }
  .ctbl tfoot { display: none; }
  .float-foot { display: none !important; }
  .ctbl table.pin th, .ctbl table.pin td { position: static !important; box-shadow: none !important; }
  .float-thead { display: none !important; }
}

/* §4.12 页尾补位（2026-09-17 文哥定）：翻页行之后的等高空白块，用于恒定「文档总高」，
   避免翻页/排序把页面高度改小、浏览器把滚动位置钳回顶部（页面上下跳动）。不参与交互。 */
.ctbl-tailfill { pointer-events: none; }

/* ============================================================================
 * §12.9 行语义：告警行(redrow) / 小计·合计行(totrow) · 行内操作按钮(.row-btn 仅样式)
 *   2026-09-18 由人事工作台抽上公共库，全站统一（文哥定）。各表格直接加类名即可，不再各自复制。
 *   色值走变量，各台可在 .ctbl 上覆盖：--warn-bg / --warn-fg / --warn-hover-bg / --tot-bg
 *   注：background 用 !important 仅为压过 §12.8 十字高亮 / §4.7 固定列 的底色规则，属行语义强约束。
 * ========================================================================== */
.ctbl { --warn-bg: #FFF3F2; --warn-fg: #C0392B; --warn-hover-bg: #ffe9e6; --tot-bg: #fafbfd; }
.ctbl tr.redrow > td { background: var(--warn-bg, #FFF3F2) !important; }
.ctbl tr.redrow > td.num { color: var(--warn-fg, #C0392B); }
.ctbl tr.redrow:hover > td { background: var(--warn-hover-bg, #ffe9e6) !important; }
.ctbl tr.totrow > td {
  background: var(--tot-bg, #fafbfd) !important; font-weight: 700; font-size: 12.8px;
  border-top: 1px solid var(--border, #e3e8f0);
}
/* 2026-09-19 文哥定：小计/合计行内容不显示省略号，完整展开、一行显示（如「本页小计-20 行」不被截）。 */
.ctbl tr.totrow > td { overflow: visible; text-overflow: clip; white-space: nowrap; }
.float-thead tr.totrow > td { overflow: visible; text-overflow: clip; white-space: nowrap; }
/* 行内操作按钮（通用小按钮，仅样式；具体是什么按钮/点了做什么由页面定）2026-09-18 文哥定 */
.ctbl td.act-cell { overflow: visible; text-overflow: clip; }   /* 按钮列不截断（2026-09-18 文哥定）：否则按钮被 ellipsis 切掉点不到 */
.ctbl .row-btn {
  height: 24px; padding: 0 10px; border: 1px solid #c9d4ea; background: #f3f7ff; color: #0033ff;
  border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit; transition: .12s;
}
.ctbl .row-btn:hover { background: #e4edff; border-color: #0033ff; }
.ctbl tr.redrow .row-btn { border-color: #e5b3ad; background: #fff; color: var(--warn-fg, #C0392B); }
.ctbl tr.redrow .row-btn:hover { background: #ffe9e6; border-color: var(--warn-fg, #C0392B); }

/* ---- 单元格内超长内容裁切（配合 table.js 的省略号浮层）2026-11-03 文哥定 ----
   用法：<td> 内放 <span class="ct-clip">…完整内容…</span>
   作用：格子内先做省略号，鼠标悬停由公共库浮层显示完整内容，可选中复制、链接可点。
   注意：不要用 title/alt，也不要在页面里自己截字符串。 */
.ctbl .ct-clip { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
