/**
 * 通用表格（`app/shared/universal-table.js`）的专属样式。
 *
 * 从内部工作台 5177 的两段样式整段搬来：
 *   - `src/styles/11-customers.css`：`.universal-table-scroll-host` / `.universal-workbench-table` /
 *     sticky 表头 / 聚焦与选区；
 *   - `src/styles/12-freight.css`：列宽把手、行高把手、拖拽落点、右键菜单。
 *
 * 选择器与几何值一字未改（sticky 表头 top:0 / z-index:4、把手 8px、菜单 z-index:3000、
 * 菜单 min-width 160px 与 7px 9px 内边距等）。只把颜色与阴影换成本站令牌：
 *   5177 `--line` / `--ink` → var(--wb-border) / var(--wb-text-primary)（两边取值本来就相同）；
 *   5177 的蓝色强调色 → var(--wb-accent)；选中行、菜单悬停底 → var(--wb-accent-soft)；
 *   菜单底 → var(--wb-surface)；菜单阴影 → var(--wb-shadow-menu)；圆角 → var(--wb-radius-button) /
 *   var(--wb-radius-control)；菜单字号 → var(--wb-fs-13)。
 * 依据《客户版设计基准 V1》第 1 节铁律：颜色只能走令牌，所以这里不写任何色值。
 *
 * 引入方式：index.html 里补一行
 *   `<link rel="stylesheet" href="styles/universal-table.css">`（放在 tokens.css 之后）。
 * 本批次只允许新建这一个样式文件，没有改 index.html —— 接入时补上即可。
 * 注意：5177 的 sticky 表头本身没写背景色（靠它自己的表格类补上），这里照搬；
 * 若接入后表头出现"透底"，请在**调用方**的表格类上补背景，不要动这个文件。
 */

.universal-table-scroll-host {
  overflow: auto;
  scrollbar-gutter: stable;
}

.universal-workbench-table {
  border-collapse: separate;
  border-spacing: 0;
}

.universal-workbench-table thead th {
  position: sticky;
  text-align: center;
  top: 0;
  vertical-align: middle;
  white-space: pre-line;
  z-index: 4;
}

.universal-workbench-table th,
.universal-workbench-table td {
  position: relative;
}

.universal-workbench-table td:focus,
.universal-workbench-table th:focus,
.universal-cell-selected {
  outline: 2px solid var(--wb-accent);
  outline-offset: -2px;
}

.universal-row-selected > td {
  background: var(--wb-accent-soft);
}

.universal-col-resizer,
.universal-row-resizer {
  border: 0;
  background: transparent;
  position: absolute;
  z-index: 8;
}

.universal-col-resizer {
  bottom: 0;
  cursor: col-resize;
  right: 0;
  top: 0;
  width: 8px;
}

.universal-row-resizer {
  bottom: 0;
  cursor: row-resize;
  height: 8px;
  left: 0;
  right: 0;
}

.universal-drag-over {
  box-shadow: inset 0 0 0 2px var(--wb-accent);
}

.universal-table-context-menu {
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  box-shadow: var(--wb-shadow-menu);
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 6px;
  position: fixed;
  z-index: 3000;
}

.universal-table-context-menu[hidden] {
  display: none;
}

.universal-table-context-menu button {
  background: var(--wb-surface);
  border: 0;
  border-radius: var(--wb-radius-control);
  color: var(--wb-text-primary);
  cursor: pointer;
  font-size: var(--wb-fs-13);
  padding: 7px 9px;
  text-align: left;
}

.universal-table-context-menu button:hover {
  background: var(--wb-accent-soft);
}