/* ================= 数据表格组件 ================= */

.table-wrap,
.table-card {
  margin-top: 16px;
  border: 1px solid var(--admin-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  transition: opacity 150ms;
}

.table-wrap.fetching,
.table-card.fetching,
.table-card.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  table-layout: auto;
}

.admin-table th,
.admin-table td {
  padding: 13px 16px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table th {
  border-bottom: 1px solid var(--admin-border, rgba(0, 0, 0, 0.08));
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint, rgba(0, 0, 0, 0.45));
  background: transparent;
}

.admin-table td {
  border-bottom: 1px solid var(--admin-line, rgba(0, 0, 0, 0.06));
  color: var(--text, rgba(0, 0, 0, 0.9));
  vertical-align: middle;
}

.admin-table tbody tr {
  height: 52px;
  box-sizing: border-box;
  transition: background-color 120ms ease;
}
.admin-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.015);
}
.admin-table tbody tr.disabled {
  background: var(--table-disabled, #f7f7f8);
}
.admin-table tbody tr.disabled:hover td {
  background: var(--table-disabled-hover, #f4f4f5);
}

.admin-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table .empty-row td {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-faint, rgba(0, 0, 0, 0.45));
}
.admin-table .empty-row:hover td {
  background: transparent;
}

/* 表格骨架：每格一根浅灰胶囊条，行高与真实行一致 52px */
.admin-table .sk-tr:hover td {
  background: transparent;
}
.admin-table .sk-tr .sk {
  min-width: 28px;
}

/* 行级交错入场动画 */
@media (prefers-reduced-motion: no-preference) {
  [data-slot='table'] tbody tr,
  .admin-table tbody tr {
    animation: tableRowEnter 0.2s cubic-bezier(0.33, 1, 0.68, 1) both;
  }
  [data-slot='table'] tbody tr:nth-child(2),
  .admin-table tbody tr:nth-child(2)  { animation-delay: 25ms; }
  [data-slot='table'] tbody tr:nth-child(3),
  .admin-table tbody tr:nth-child(3)  { animation-delay: 50ms; }
  [data-slot='table'] tbody tr:nth-child(4),
  .admin-table tbody tr:nth-child(4)  { animation-delay: 75ms; }
  [data-slot='table'] tbody tr:nth-child(5),
  .admin-table tbody tr:nth-child(5)  { animation-delay: 100ms; }
  [data-slot='table'] tbody tr:nth-child(6),
  .admin-table tbody tr:nth-child(6)  { animation-delay: 125ms; }
  [data-slot='table'] tbody tr:nth-child(7),
  .admin-table tbody tr:nth-child(7)  { animation-delay: 150ms; }
  [data-slot='table'] tbody tr:nth-child(8),
  .admin-table tbody tr:nth-child(8)  { animation-delay: 150ms; }
  [data-slot='table'] tbody tr:nth-child(9),
  .admin-table tbody tr:nth-child(9)  { animation-delay: 175ms; }
  [data-slot='table'] tbody tr:nth-child(10),
  .admin-table tbody tr:nth-child(10) { animation-delay: 200ms; }
  [data-slot='table'] tbody tr:nth-child(n + 11),
  .admin-table tbody tr:nth-child(n + 11) { animation-delay: 225ms; }
  [data-slot='table'] tbody tr.sk-tr,
  .admin-table tbody tr.sk-tr { animation: none; }
}

@keyframes tableRowEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 表格内操作：文字按钮 */
.row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.admin-btn:not(.primary),
button.admin-btn:not(.primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--link, #1783ff);
  font: inherit;
  font-size: 14px;
  line-height: inherit;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: none;
}
.admin-btn:not(.primary):hover,
button.admin-btn:not(.primary):hover,
.admin-btn:not(.primary):active,
button.admin-btn:not(.primary):active,
.admin-btn:not(.primary):focus,
button.admin-btn:not(.primary):focus {
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  color: var(--link, #1783ff);
}
.admin-btn.danger,
button.admin-btn.danger {
  color: var(--danger, #FF3849);
}
.admin-btn.danger:hover,
button.admin-btn.danger:hover,
.admin-btn.danger:active,
button.admin-btn.danger:active,
.admin-btn.danger:focus,
button.admin-btn.danger:focus {
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  color: var(--danger, #FF3849);
}
.admin-btn.more-btn,
button.admin-btn.more-btn {
  color: var(--link, #1783ff);
}
.admin-btn.more-btn:hover,
button.admin-btn.more-btn:hover,
.admin-btn.more-btn:active,
button.admin-btn.more-btn:active,
.admin-btn.more-btn:focus,
button.admin-btn.more-btn:focus,
.admin-btn.more-btn[aria-expanded="true"],
button.admin-btn.more-btn[aria-expanded="true"] {
  background: none;
  border: none;
  outline: none;
  color: var(--link, #1783ff);
}
.admin-btn.more-btn .more-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.mc-actions .admin-btn:not(.primary),
.model-form .admin-btn:not(.primary) {
  height: 34px;
  line-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.admin-action-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.admin-action-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text, rgba(0, 0, 0, 0.9));
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s, color 0.12s;
}
.admin-action-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text, rgba(0, 0, 0, 0.95));
}
.admin-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.admin-btn.primary,
button.admin-btn.primary {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: #111;
  color: #fff !important;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}
.admin-btn.primary:hover,
button.admin-btn.primary:hover {
  background: #000;
  color: #fff !important;
  text-decoration: none;
}
.admin-btn.primary:active,
button.admin-btn.primary:active {
  background: #1a1a1a;
  color: #fff !important;
}
.usage-filter .admin-btn:not(.primary) {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background: #f2f2f2;
  color: var(--text, rgba(0, 0, 0, 0.9));
  font-size: 14px;
  text-decoration: none;
}
.usage-filter .admin-btn:not(.primary):hover {
  background: #ebebeb;
  color: var(--text, rgba(0, 0, 0, 0.9));
  text-decoration: none;
}
.usage-filter .admin-btn:not(.primary):active,
.usage-filter .admin-btn:not(.primary):focus {
  background: #e2e2e2;
  color: var(--text, rgba(0, 0, 0, 0.9));
}

/* 表格状态文字 */
.status-active { color: var(--admin-green, #2fb36d); }
.status-disabled { color: var(--danger, #FF3849); }
.status-warn { color: var(--warn, #a9610a); }
.points-in { color: var(--admin-green, #2fb36d); }
.points-out { color: var(--danger, #FF3849); }

/* 分页器 */
.table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--admin-line, rgba(0, 0, 0, 0.06));
  font-size: 13px;
  color: var(--text-dim, rgba(0, 0, 0, 0.6));
}

.pager-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pager-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pager-info {
  font-variant-numeric: tabular-nums;
}

/* 分页条里的下拉融入文字行：无底色、与周围同灰度，悬停仅加深颜色 */
.table-pager .ui-select-btn {
  height: 26px;
  padding: 0 2px;
  gap: 4px;
  font-size: 13px;
  background: transparent;
}
.table-pager .ui-select-label {
  color: var(--text-dim, rgba(0, 0, 0, 0.6));
  font-variant-numeric: tabular-nums;
}
.table-pager .ui-select-btn:hover:not(:disabled) .ui-select-label,
.table-pager .ui-select-btn[aria-expanded="true"] .ui-select-label {
  color: var(--text, rgba(0, 0, 0, 0.9));
}
.table-pager .ui-select-btn:hover:not(:disabled) .ui-select-caret,
.table-pager .ui-select-btn[aria-expanded="true"] .ui-select-caret {
  color: var(--text-dim, rgba(0, 0, 0, 0.6));
}
/* 抵消全局 button 与 .ui-select-btn 的灰底 */
.table-pager .ui-select-btn:hover:not(:disabled),
.table-pager .ui-select-btn[aria-expanded="true"] {
  background: transparent;
}
.table-pager .ui-select-caret svg {
  width: 12px;
  height: 12px;
}

.pager-nav, .pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-dim, rgba(0, 0, 0, 0.6));
  font: inherit;
  font-size: 13px;
  min-width: 24px;
  height: 28px;
  padding: 0 4px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
/* 优先级压过全局 button:hover 的灰底 */
.pager-nav:hover, .pager-num:hover,
.pager-nav:disabled:hover, .pager-num:disabled:hover {
  background: none;
}
.pager-nav:hover:not(:disabled), .pager-num:hover:not(:disabled) {
  color: var(--text, rgba(0, 0, 0, 0.9));
}
.pager-nav:disabled {
  color: var(--text-faint, rgba(0, 0, 0, 0.45));
  opacity: 0.6;
  cursor: default;
}
.pager-nav .icon {
  display: inline-flex;
}
.pager-nav .icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.pager-num.cur {
  color: var(--text, rgba(0, 0, 0, 0.9));
  font-weight: 600;
  cursor: default;
  opacity: 1;  /* 抵消全局 button:disabled 的半透明 */
}

.pager-ellipsis {
  color: var(--text-faint, rgba(0, 0, 0, 0.45));
  padding: 0 2px;
}