/*
 * components/table.css — 统一表格组件
 *
 * 使用：
 *   <table class="c-table">
 *     <thead><tr><th>列1</th><th>列2</th></tr></thead>
 *     <tbody><tr><td>值1</td><td>值2</td></tr></tbody>
 *   </table>
 *
 * 变体：c-table-striped（斑马纹）、c-table-hover（行 hover）
 *
 * 依赖：/theme.css
 */

/* ========== 基础表格 ========== */

.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.c-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}

.c-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.c-table tbody tr:last-child td {
  border-bottom: none;
}

/* ========== 斑马纹 ========== */

.c-table-striped tbody tr:nth-child(odd) {
  background: rgba(245, 243, 239, 0.5);
}

/* ========== 行 hover ========== */

.c-table-hover tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer;
}

.c-table-hover tbody tr:hover {
  background: var(--color-brand-light);
}

/* ========== 操作列（右对齐） ========== */

.c-table th:last-child,
.c-table td:last-child {
  text-align: right;
}

/* ========== 数字列（等宽数字） ========== */

.c-table td.is-numeric,
.c-table th.is-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ========== 状态徽章（嵌入表格） ========== */

.c-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.c-badge-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.c-badge-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.c-badge-info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.c-badge-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.c-badge-muted {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}