:host {
  display: block;
}

.hb-table {
  position: relative;
  overflow: hidden;
  border-radius: var(--hb-border-radius-base);
  background-color: var(--hb-color-bg);
}

.hb-table--border {
  border: 1px solid var(--hb-color-border-secondary);
}

.hb-table--border .hb-table__td,
.hb-table--border .hb-table__table th {
  border-right: 1px solid var(--hb-color-border-secondary);
}

.hb-table__wrapper {
  overflow-x: auto;
}

.hb-table__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

.hb-table__table th {
  background-color: var(--hb-table-header-bg);
  color: var(--hb-table-header-color);
  font-weight: 600;
  font-size: var(--hb-font-size-sm);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hb-color-border-secondary);
  white-space: nowrap;
  user-select: none;
}

.hb-table__th-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hb-table__th--sortable {
  cursor: pointer;
}

.hb-table__th--sortable:hover {
  background-color: var(--hb-color-fill-tertiary);
}

.hb-table__sort {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-size: 10px;
  gap: 1px;
}

.hb-table__sort-icon {
  color: var(--hb-color-text-quaternary);
  transition: color var(--hb-transition-duration);
}

.hb-table__sort-icon--active {
  color: var(--hb-color-primary);
}

.hb-table__td {
  padding: 10px 12px;
  font-size: var(--hb-font-size-sm);
  color: var(--hb-color-text);
  border-bottom: 1px solid var(--hb-table-border-color);
  transition: background-color var(--hb-transition-duration);
}

.hb-table__row:hover .hb-table__td {
  background-color: var(--hb-table-row-hover-bg);
}

.hb-table__row--striped .hb-table__td {
  background-color: var(--hb-table-stripe-bg);
}

.hb-table__row--current .hb-table__td {
  background-color: var(--hb-color-primary-bg);
}

.hb-table__empty {
  text-align: center;
  color: var(--hb-color-text-secondary);
  padding: var(--hb-spacing-xl) 0;
}

.hb-table__loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.hb-table__loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--hb-color-border-secondary);
  border-top-color: var(--hb-color-primary);
  border-radius: 50%;
  animation: hb-spin 0.8s linear infinite;
}

/* ---- 尺寸 ---- */
.hb-table--small .hb-table__table th,
.hb-table--small .hb-table__td {
  padding: 6px 8px;
  font-size: var(--hb-font-size-xs);
}

.hb-table--large .hb-table__table th,
.hb-table--large .hb-table__td {
  padding: 14px 16px;
  font-size: var(--hb-font-size-base);
}

/* ---- 行选择 ---- */
.hb-table__selection {
  width: 48px;
  min-width: 48px;
  text-align: center;
  white-space: nowrap;
}
.hb-table__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--hb-color-primary);
  vertical-align: middle;
}
.hb-table__selection .hb-table__checkbox {
  margin: 0;
}
.hb-table__row--selected .hb-table__td {
  background-color: var(--hb-color-primary-bg);
}

/* ---- 固定列（sticky） ---- */
/* 固定列单元格需要不透明背景，避免横向滚动时底层内容透出 */
.hb-table__cell--fixed-left,
.hb-table__cell--fixed-right {
  position: sticky;
  z-index: 2;
  background-color: var(--hb-color-bg);
}
.hb-table__table th.hb-table__cell--fixed-left,
.hb-table__table th.hb-table__cell--fixed-right {
  background-color: var(--hb-table-header-bg);
}
.hb-table__cell--fixed-right {
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
}
.hb-table__cell--fixed-left:not(.hb-table__cell--fixed-right) {
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
}
/* 固定列在选中行需保持选中背景 */
.hb-table__row--selected .hb-table__cell--fixed-left,
.hb-table__row--selected .hb-table__cell--fixed-right {
  background-color: var(--hb-color-primary-bg);
}
.hb-table__row:hover .hb-table__cell--fixed-left,
.hb-table__row:hover .hb-table__cell--fixed-right {
  background-color: var(--hb-table-row-hover-bg);
}

@keyframes hb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 行操作按钮（link 风格，类 Ant Design） */
.hb-table__action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--hb-font-size-sm, 14px);
  line-height: 1.5;
  color: var(--hb-color-primary, #1677ff);
  transition: opacity var(--hb-transition-duration, 0.2s);
}
.hb-table__action:hover {
  opacity: 0.8;
}
.hb-table__action:disabled {
  color: var(--hb-color-text-disabled, #c0c4cc);
  cursor: not-allowed;
}
.hb-table__action--danger {
  color: var(--hb-color-danger, #f5222d);
}
.hb-table__action--danger:disabled {
  color: var(--hb-color-text-disabled, #c0c4cc);
}
.hb-table__action + .hb-table__action {
  margin-left: var(--hb-spacing-sm, 12px);
}

/* ---- 虚拟滚动 ---- */
.hb-table--virtual {
  overflow: hidden;
}
.hb-table__virtual-wrapper {
  display: flex;
  flex-direction: column;
}
.hb-table__virtual-viewport {
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}
.hb-table__virtual-spacer {
  position: relative;
  width: 100%;
}
.hb-table__table--virtual {
  width: 100%;
  table-layout: fixed;
}
.hb-table__table--virtual tbody {
  /* 可见窗口的行紧跟在 offset 占位行之后，撑高容器由 spacer 负责 */
  position: relative;
}

/* ---- 树形数据（可展开行） ---- */
.hb-table__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hb-color-text-secondary, #595959);
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  transition: color var(--hb-transition-duration, 0.2s);
  flex-shrink: 0;
}
.hb-table__expand:hover {
  color: var(--hb-color-primary, #1677ff);
}
.hb-table__row--tree .hb-table__td {
  /* 树形行第一列内容随缩进对齐 */
  white-space: nowrap;
}

/* ---- 行内编辑 ---- */
.hb-table__cell--editable {
  cursor: text;
}
.hb-table__cell--editable:hover {
  background-color: var(--hb-color-fill-tertiary, #f5f5f5);
}
.hb-table__edit-input {
  width: 100%;
  min-width: 60px;
  box-sizing: border-box;
  padding: 2px 6px;
  font-size: var(--hb-font-size-sm, 14px);
  color: var(--hb-color-text, #262626);
  border: 1px solid var(--hb-color-primary, #1677ff);
  border-radius: var(--hb-border-radius-base, 4px);
  outline: none;
  background-color: var(--hb-color-bg, #fff);
}
