/* 数据明细视图（DataTableView）专属样式，类名前缀 sbi-dt-。
   颜色/圆角只使用 social-v2.css 的 token 与其既有中性色（#f1f5fa / #f7fafd / rgba(16,34,56,…)）。 */

.sbi-dt-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px 14px;
}

.sbi-dt-groups {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sbi-dt-groups-label {
  color: var(--sbi-text-3);
  font-size: 12px;
}

.sbi-dt-export {
  margin-left: auto;
}

/* 表格纵向滚动容器：限制高度让两级表头的 sticky 生效，底部跟随卡片圆角。 */
.sbi-dt-scroll {
  max-height: 72vh;
  border-top: 1px solid var(--sbi-border);
  border-radius: 0 0 var(--sbi-radius) var(--sbi-radius);
}

/* 第一行：列组表头（浅灰底、居中、固定高度，供第二行 sticky 偏移用）。 */
.sbi-dt-table th.sbi-dt-group-th {
  box-sizing: border-box;
  height: 34px;
  padding: 0 12px;
  background: #f1f5fa;
  color: var(--sbi-text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

/* 第二行：指标表头，sticky 吸附在列组行下方，可点击排序。 */
.sbi-dt-table th.sbi-dt-metric-th {
  top: 34px;
  cursor: pointer;
  user-select: none;
}

.sbi-dt-table th.sbi-dt-metric-th:hover,
.sbi-dt-table th.sbi-dt-metric-th.is-sorted {
  color: var(--sbi-accent);
}

.sbi-dt-sort {
  margin-left: 3px;
  font-size: 11px;
}

/* 首列冻结：白底 + 右侧阴影；合计行/悬浮行的底色由 social-v2.css 中更高优先级规则接管。 */
.sbi-dt-table .sbi-dt-sticky {
  position: sticky;
  left: 0;
  box-shadow: 6px 0 10px -8px rgba(16, 34, 56, 0.28);
}

.sbi-dt-table td.sbi-dt-sticky {
  z-index: 1;
  background: var(--sbi-card);
}

.sbi-dt-table th.sbi-dt-sticky {
  z-index: 4;
}

/* 截断提示（表尾整行）。 */
.sbi-dt-note td {
  padding: 10px 12px;
  background: #f7fafd;
  color: var(--sbi-text-3);
  font-size: 12px;
  text-align: center;
  white-space: normal;
}

/* 无数据时的加载骨架。 */
.sbi-dt-skeleton {
  display: grid;
  gap: 10px;
  padding: 6px 18px 20px;
}

.sbi-dt-skeleton .sbi-skeleton {
  height: 14px;
}