/* ============================================================
   .datatable 数据表样式 v0.2（定稿 · 2026-10-28）
   机制：:has() 自动识别首行列数 → 9 种情形；列宽=实测px归一化为百分比
   字号史：用户初测 7px/4.5px 为 50% 缩放半值；线上原始表头/表体实测均 14px；
           表体按用户要求改 12px（略小于表头）
   !important 用于压制主题冲突与编辑器内联样式（见出口需求单第三节）
   接入位置：必须在 view_product.css 之后加载
   ============================================================ */
.datatable {
  /* —— 可调变量 —— */
  --dt-head-bg: rgb(0, 150, 185);    /* 表头底色 */
  --dt-head-fg: #ffffff;             /* 表头文字 */
  --dt-alt-bg:  rgb(239, 248, 254);  /* 表体隔行底色 */
  --dt-fg:      #333333;             /* 表体文字 */
  --dt-border:  #dcdcdc;             /* 网格线（gainsboro，与现站一致） */
  --dt-pad:     12px;                /* 单元格内边距 */
  --dt-row-h:   70px;                /* 单元格高度 */
  --dt-head-fs: 16px;                /* 表头字号（2026-10-29 用户要求：14px 加大 2 号） */
  --dt-body-fs: 12px;                /* 表体字号（略小于表头，用户拍板） */
  --dt-hover-fs: 13px;               /* 悬停字号 */
  --dt-hover-bd: rgb(0, 150, 185);   /* 悬停框线＝对比色（表头青） */
  --dt-hover-bw: 2px;                /* 悬停框线宽 */
  --dt-hover-bg: rgb(217, 240, 250); /* 悬停行底色 */
  --dt-total-w: 1028.56px;           /* 总宽度上限 */

  width: 100%;
  max-width: var(--dt-total-w);
  /* 窄屏保底：列数越多，最小宽度越大（每列 90px），装不下就由 .content-inner 出横向滚动条，
     不再把列压到文字竖排。取 90 而非 96：4 列=360px，375px 竖屏手机正好放下、不必滑。
     默认 0 = 不限制（9 档之外回退自然布局时由内容自己撑）。 */
  min-width: var(--dt-min-w, 0);
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  color: var(--dt-fg);
  font-family: inherit;
  /* 🔴 必须覆盖 base.css 第 6 节的全局 table 规则（max-width:100%; display:block; overflow-x:auto）。
     那条是为窄屏横滑写的，副作用是让 table 变成 block、内部 rows 收缩成匿名 table box，
     宽屏时列宽只占内容宽的约 77%，表格右侧留一大片空白。实测 2026-10-28：
     不加此行时 4 列表填充率 76.85%，加上后 99.93%，列宽 20/20/20/40 精确命中。 */
  display: table !important;
}

/* 窄屏兜底：列数多（如 15 列）时表格难免超出容器，交给外层横向滚动，不再依赖 table 自身的 display:block。 */
.content-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 单元格（表头表体共用） */
.datatable td,
.datatable th {
  box-sizing: border-box;
  padding: var(--dt-pad) !important;
  height: var(--dt-row-h) !important;
  border: 1px solid var(--dt-border) !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: var(--dt-body-fs) !important;
}

/* 表头行（thead 内行 或 th） */
.datatable thead td,
.datatable thead th,
.datatable th {
  background: var(--dt-head-bg) !important;
  color: var(--dt-head-fg) !important;
  font-size: var(--dt-head-fs) !important;
  font-weight: 700;                  /* 2026-10-29 用户要求：表头加粗 */
}

/* 隔行：tbody 偶数行浅蓝 */
.datatable tbody tr:nth-child(even) td {
  background: var(--dt-alt-bg) !important;
}

/* ============================================================
   行悬停高亮（v0.3' 合并单元格适配 + 2026-10-29/30 用户视觉裁决）
   语义：
   1) 基础档＝字号放大 + 文字加深（**底色不变**，用户 10-29 明确要求）
   2) 横线变青按**单元格**判定：非跨行格都给，colspan 行内合并格也算；
      **左右竖线不动**（用户 10-29 明确要求）
   3) rowspan 跨行格完全退出悬停，恢复常态
   4) 偶数行宿主的跨行格常态＝隔行色
   顺序敏感：rowspan 恢复规则必须置块末。
   ⚠️ 2026-10-30 修正：原写法按整表排除（表内只要有 rowspan 就全表无高亮），
      而 990.html 4 张表全部同时含 rowspan 与 colspan ⇒ 整页零高亮，用户报障。改按格排除。
   ============================================================ */
/* 基础档：只放大字号 + 加深文字 */
.datatable tbody tr:hover td {
  font-size: var(--dt-hover-fs) !important;
  color: #111111 !important;
}
/* 对比色横线：按单元格排除，只有跨行格退出，colspan 行内合并在内。
   不能按整表排除 —— 实测 990.html 4 张表全部同时含 rowspan 与 colspan，
   整表排除会让整页一条高亮都没有（2026-10-30 用户报障）。竖线仍保持基础规则网格线。 */
.datatable tbody tr:hover td:not([rowspan]) {
  border-top: var(--dt-hover-bw) solid var(--dt-hover-bd) !important;
  border-bottom: var(--dt-hover-bw) solid var(--dt-hover-bd) !important;
}
/* 跨行格不参与悬停：恢复常态（必须置于本块最后） */
.datatable tbody tr:hover td[rowspan] {
  font-size: var(--dt-body-fs) !important;
  background: #fff !important;
  color: var(--dt-fg) !important;
  border: 1px solid var(--dt-border) !important;
}
/* 偶数行（隔行色）宿主行的跨行格常态＝隔行色 */
.datatable tbody tr:nth-child(even):hover td[rowspan] {
  background: var(--dt-alt-bg) !important;
}

/* 首行列宽映射（仅在列数被识别后启用） */
.datatable tr:first-child > :nth-child(1)  { width: var(--w1, auto); }
.datatable tr:first-child > :nth-child(2)  { width: var(--w2, auto); }
.datatable tr:first-child > :nth-child(3)  { width: var(--w3, auto); }
.datatable tr:first-child > :nth-child(4)  { width: var(--w4, auto); }
.datatable tr:first-child > :nth-child(5)  { width: var(--w5, auto); }
.datatable tr:first-child > :nth-child(6)  { width: var(--w6, auto); }
.datatable tr:first-child > :nth-child(7)  { width: var(--w7, auto); }
.datatable tr:first-child > :nth-child(8)  { width: var(--w8, auto); }
.datatable tr:first-child > :nth-child(9)  { width: var(--w9, auto); }
.datatable tr:first-child > :nth-child(10) { width: var(--w10, auto); }
.datatable tr:first-child > :nth-child(11) { width: var(--w11, auto); }
.datatable tr:first-child > :nth-child(12) { width: var(--w12, auto); }
.datatable tr:first-child > :nth-child(13) { width: var(--w13, auto); }
.datatable tr:first-child > :nth-child(14) { width: var(--w14, auto); }
.datatable tr:first-child > :nth-child(15) { width: var(--w15, auto); }

/* —— 9 种列数情形（列宽=实测px÷和→%；总宽1028.56，width:100%+max-width封顶） —— */
/* 2列: 150 | 700（和850）｜最小宽 2×90=180 */
.datatable:has(tr:first-child > :nth-child(2):last-child)  { table-layout: fixed; --dt-min-w: 180px; --w1: 17.65%; --w2: 82.35%; }
/* 3列: 300 | 300 | 350（和950）｜270 */
.datatable:has(tr:first-child > :nth-child(3):last-child)  { table-layout: fixed; --dt-min-w: 270px; --w1: 31.58%; --w2: 31.58%; --w3: 36.84%; }
/* 4列: 200 | 200 | 200 | 400（和1000；原始数据"2000"按笔误=200处理，已经用户默认）｜360（375 竖屏手机正好放下） */
.datatable:has(tr:first-child > :nth-child(4):last-child)  { table-layout: fixed; --dt-min-w: 360px; --w1: 20%; --w2: 20%; --w3: 20%; --w4: 40%; }
/* 5列: 200×5（和1000）｜450 */
.datatable:has(tr:first-child > :nth-child(5):last-child)  { table-layout: fixed; --dt-min-w: 450px; --w1: 20%; --w2: 20%; --w3: 20%; --w4: 20%; --w5: 20%; }
/* 6列: 200 | 150×5（和950）｜540 */
.datatable:has(tr:first-child > :nth-child(6):last-child)  { table-layout: fixed; --dt-min-w: 540px; --w1: 21.05%; --w2: 15.79%; --w3: 15.79%; --w4: 15.79%; --w5: 15.79%; --w6: 15.79%; }
/* 8列: 100×5 | 80 | 100×2（和780）｜720 */
.datatable:has(tr:first-child > :nth-child(8):last-child)  { table-layout: fixed; --dt-min-w: 720px; --w1: 12.82%; --w2: 12.82%; --w3: 12.82%; --w4: 12.82%; --w5: 12.82%; --w6: 10.26%; --w7: 12.82%; --w8: 12.82%; }
/* 9列: 250 | 150 | 100 | 80×6（和980）｜810 */
.datatable:has(tr:first-child > :nth-child(9):last-child)  { table-layout: fixed; --dt-min-w: 810px; --w1: 25.51%; --w2: 15.31%; --w3: 10.2%; --w4: 8.16%; --w5: 8.16%; --w6: 8.16%; --w7: 8.16%; --w8: 8.16%; --w9: 8.16%; }
/* 10列: 200×2 | 80×8（和1040）｜900 */
.datatable:has(tr:first-child > :nth-child(10):last-child) { table-layout: fixed; --dt-min-w: 900px; --w1: 19.23%; --w2: 19.23%; --w3: 7.69%; --w4: 7.69%; --w5: 7.69%; --w6: 7.69%; --w7: 7.69%; --w8: 7.69%; --w9: 7.69%; --w10: 7.69%; }
/* 15列: 60×4 | 100 | 40 | 130 | 60×4 | 100 | 60×3（和1030）｜1350（15 列在 1028 里必然挤成竖排，故保底更宽、靠滚动看全） */
.datatable:has(tr:first-child > :nth-child(15):last-child) { table-layout: fixed; --dt-min-w: 1350px; --dt-head-fs: 16px; --w1: 5.83%; --w2: 5.83%; --w3: 5.83%; --w4: 5.83%; --w5: 9.71%; --w6: 3.88%; --w7: 12.62%; --w8: 5.83%; --w9: 5.83%; --w10: 5.83%; --w11: 5.83%; --w12: 9.71%; --w13: 5.83%; --w14: 5.83%; --w15: 5.83%; }

/* ============================================================
   v0.4：多行表头压缩（2026-10-29）
   站1 隔振参数表表头多达 3–4 行，v0.2 每行强制 70px ⇒ 表头总高 280px 级。
   识别条件＝"第 2 行仍有 TH"（编辑器把多级表头 TH 行放在 tbody 内，不依赖 thead）。
   第二个选择器兜 thead 多行、且仍是 td 的旧结构（模板层虽已转 th，但保留兼容）。
   单行表头表零影响：thead 只有 1 行时两个条件都不成立。
   ============================================================ */
.datatable:has(tr:nth-child(2) > th) th,
.datatable:has(thead tr:nth-child(2)) thead td {
  height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}