/* @@SPLIT_HEADER@@
   css/table-extra.css —— 真实数据新增段 + 表头「已选 N」角标
      由 redesign2.html 拆分而来（原行号 1880-1957），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   真实数据新增（本轮只加块，原有样式一行没动）
   --------------------------------------------------------------------------
   · .conn-bar  顶部连接状态条：绿=已连接 / 黄=演示数据 / 红=连不上服务
   · .skl-row   加载骨架屏：数据没回来时占位，避免白屏（纯 CSS，不用图片/emoji）
   ========================================================================== */
.conn-bar{flex:none;display:flex;align-items:center;gap:8px;height:26px;padding:0 14px;
  font-size:12px;line-height:26px;background:var(--hover);border-bottom:1px solid var(--line);
  color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-bar .cdot{width:7px;height:7px;border-radius:50%;background:#94a3b8;flex:none}
.conn-bar[data-st="ok"]{background:var(--green-bg);border-bottom-color:#bbf7d0;color:#166534}
.conn-bar[data-st="ok"] .cdot{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.conn-bar[data-st="demo"]{background:var(--warn-bg);border-bottom-color:var(--warn-line);color:#92400e}
.conn-bar[data-st="demo"] .cdot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.conn-bar[data-st="err"]{background:var(--danger-bg);border-bottom-color:var(--danger-line);color:#b91c1c}
.conn-bar[data-st="err"] .cdot{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.skl{height:12px;border-radius:4px;
  background:linear-gradient(90deg,var(--accent-weak) 25%,var(--sel) 37%,var(--accent-weak) 63%);
  background-size:400% 100%;animation:sklShine 1.2s ease-in-out infinite}
@keyframes sklShine{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skl-row td{padding:9px 8px}
.empty-sub{margin-top:6px;font-size:11px;color:var(--faint);font-weight:400}

/* ==========================================================================
   13. 表头「已选 N」角标（2026-10-25 用户要求；2026-10-25 二修：被裁 + 压序号列）
   --------------------------------------------------------------------------
   ★ 为什么是绝对定位角标、而不是在表头里多写一行字：
     .c-chk 列只有 2.6%（1920 下约 24px），"已选 3 单" 根本放不进去；
     多占一列又会破坏 22 列 / 无横向滚动的既有约束。
   ★ pointer-events:none 必须有：角标压在勾选框右上角，能点的话
     就会挡住"点全选框"这个最常用的动作。
   --------------------------------------------------------------------------
   ★ 二修的两个根因（用户截图指出「勾选列 + 红色 1 角标」）：
   ① 角标被 th 的 overflow:hidden 裁掉（实测：th 右边 53，角标右边 55，
      红色像素只画到 52；elementFromPoint 在角标右缘内侧拿到的是 <th>）。
      修法是**只给勾选列表头放开 overflow**：
        · overflow:hidden 是给「长表头文字显示省略号」用的
          （.grid thead th 上 nowrap / hidden / ellipsis 是一整套），
          而 .c-chk 里只有 checkbox + 角标，**没有任何需要省略号的文字**，
          放开它不会波及别的列 —— 自测断言：其它列 computed overflow 仍是
          hidden，塞一段长标题 scrollWidth 344 > clientWidth 150 照样出省略号。
        · 反过来，如果为了角标把 .grid thead th 的 overflow 全放开，
          长表头会把 22 列撑宽 → 主界面出现横向滚动条（用户红线）。
   ② 角标压进序号列的那 6px 会被序号列的表头白底盖住，所以两侧都要抬层级：
      th 是 position:sticky + z-index:5 的定位元素，**自己就是一个 stacking
      context**，子元素 z-index:6 只在它这个 context 内部生效，压不过**后面**
      的兄弟 th（序号列，同样 5，但 DOM 顺序在后）。所以角标 6、th.c-chk 也 6。
      实测：只提角标不提 th 时，elementFromPoint 落在序号列上方拿到的是 <th>。
   ★ 白描边 box-shadow:0 0 0 2px #fff 不是装饰：
     角标骑在勾选列/序号列的边界上，不描一圈白边的话红色直接贴着序号列，
     看起来像"序号列自己多了一块红的"；白边把它从邻居的表头白底上撕出来。
   ========================================================================== */
.grid thead th.c-chk,
.as-table thead th.c-chk,
.subtable thead th.c-chk{
  /* ★ 用 sticky 而不是 relative：th 的基础规则就是 sticky（表头滚动吸顶），
     写 relative 会把吸顶顶掉 —— 只有勾选列这一格不吸顶、滚动时掉队。
     sticky 和 relative 都是定位元素，对角标的 absolute 参照系没有区别。 */
  position:sticky;
  overflow:visible;          /* 只放开勾选列，见上面 ① */
}
.grid thead th.c-chk,.as-table thead th.c-chk{z-index:6}   /* 兄弟 th 是 5，见上面 ② */
.subtable thead th.c-chk{z-index:4}                        /* 子表 th 是 3 */
.sel-badge{
  position:absolute;
  /* 横向骑在列边界上（右侧露出 6px，白描边再 2px）；
     ★ 纵向不能写负值：.tablewrap / .as-wrap / .subwrap 都是 overflow:auto 的
       滚动容器，表头吸顶在它们的上边界上，角标只要 top<0 就会被**滚动容器**
       裁掉顶部（实测 top:-4px 时截图里红块只有 11px 高 = 15-4）。所以收到 0。 */
  top:0; right:-6px;
  min-width:15px; height:15px; line-height:15px; padding:0 4px;
  border-radius:8px; background:#e11d48; color:#fff;
  font-size:10px; font-weight:700; text-align:center;
  pointer-events:none; z-index:6;
  box-shadow:0 0 0 2px #fff;
}
.sel-badge[hidden]{display:none}