/**
 * 数据展示类组件：Table / Tag / Alert / Empty / Pagination（开发清单 2.5）。
 *
 * **稿件只画了表头 + 普通行**，hover / 选中 / 条纹 / 固定列这四种状态
 * 是这里补的（清单 2.5 明确要求）。补的依据是令牌，不是猜色值。
 */

/* ============ Table ============ */

.table-wrap {
  background: var(--color-neutral-0);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* 需要横滚时才套这一层。
   注意 1280 下**表格不横滚**（清单 2.8）—— 折叠侧栏省出的 160px
   正好补上表格缺的宽度。这个类是给 8 列以上的宽表留的后路，
   不要顺手套在活动/参会人列表上 */
.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  font-size: var(--text-body-2);
}

.table th {
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-50);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}

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

/**
 * 行状态：条纹 < hover < 选中。
 *
 * **这三条必须互斥，不能靠书写顺序分优先级。**
 * 早先的写法是「条纹放最后，靠源码顺序被 hover 覆盖」，那是错的：
 *   .table.is-striped tbody tr:nth-child(even) td → (0,3,3)
 *   .table tbody tr.is-selected td               → (0,2,3)
 * :nth-child() 按类一级计权，所以条纹的权重本来就比选中高，
 * 无论谁写在后面，偶数行的选中态都会被条纹吃掉 —— 运营勾了第 2 行，
 * 界面上毫无变化。
 *
 * 改成条纹自己用 :not() 让位：它只在既没 hover 也没选中时出现。
 * 这样三种状态在选择器层面就是互斥的，权重高低不再影响结果，
 * 后面谁往这个文件里插规则也不会重新踩到。
 */

/* 条纹（最底层） */
.table.is-striped tbody tr:nth-child(even):not(:hover):not(.is-selected) td,
.table.is-striped tbody tr:nth-child(even):not(:hover):not(.is-selected) .col-fixed-left,
.table.is-striped tbody tr:nth-child(even):not(:hover):not(.is-selected) .col-fixed-right {
  background: var(--color-bg-row-stripe);
}

/* hover：整行提示可点。表格行多时没有 hover 会看串行 */
.table tbody tr:hover:not(.is-selected) td,
.table tbody tr:hover:not(.is-selected) .col-fixed-left,
.table tbody tr:hover:not(.is-selected) .col-fixed-right {
  background: var(--color-bg-row-hover);
}

/* 选中态 */
.table tbody tr.is-selected td,
.table tbody tr.is-selected .col-fixed-left,
.table tbody tr.is-selected .col-fixed-right {
  background: var(--color-bg-row-active);
}

/* 选中行的 hover 再深一档。不做这一档的话，鼠标划过已选中的行没有任何反馈，
   在批量操作时分不清"这行已经选了"和"表格卡住了" */
.table tbody tr.is-selected:hover td,
.table tbody tr.is-selected:hover .col-fixed-left,
.table tbody tr.is-selected:hover .col-fixed-right {
  background: var(--color-bg-row-active-hover);
}

/**
 * 固定列。
 *
 * position:sticky 要求单元格自己有背景色，否则滚动时下层内容会透上来。
 * 这也是上面每条行状态规则都要连带写 .col-fixed-left / -right 的原因 ——
 * 漏掉的话固定列在 hover 时颜色和其余部分不一致，看着像渲染错误。
 * （状态色都在上面那一段里，这里只管定位与静置底色。）
 */
.table .col-fixed-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-neutral-0);
}

.table .col-fixed-right {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--color-neutral-0);
  /* 左侧一道分隔线，让人知道这一列是浮在上面的 */
  box-shadow: -1px 0 0 var(--color-border);
}

.table th.col-fixed-left,
.table th.col-fixed-right {
  z-index: 2;                            /* 表头固定列要压过主体固定列 */
  background: var(--color-neutral-50);
}

/* 数字列右对齐 + 等宽。座位数、金额、人数都归这里 */
.table .col-num {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.table .col-actions {
  white-space: nowrap;
  text-align: right;
}

/* ============ Tag ============ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-s);
  font-size: var(--text-caption);
  line-height: 1;
  white-space: nowrap;
}

.tag-default { background: var(--color-neutral-100); color: var(--color-text-secondary); }
.tag-primary { background: var(--color-primary-50); color: var(--color-primary-500); }
.tag-success { background: var(--color-success-bg); color: var(--color-success-500); }
/* 警告用 700 而非 500：500 压在 warning-bg 上对比度不足 4.5:1 */
.tag-warning { background: var(--color-warning-bg); color: var(--color-warning-700); }
.tag-danger  { background: var(--color-danger-bg);  color: var(--color-danger-500); }
.tag-info    { background: var(--color-info-bg);    color: var(--color-info-500); }
.tag-vip     { background: var(--color-vip-bg);     color: var(--color-vip-500); }

.tag-round { border-radius: var(--radius-full); padding: 0 var(--space-3); }

/* ============ Alert ============ */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  font-size: var(--text-body-2);
  line-height: var(--text-body-2-lh);
}

.alert-title {
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}

.alert-info    { background: var(--color-info-bg);    color: var(--color-info-500); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-500); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-700); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger-500); }

/* 正文压回常规色：整段染成语义色会很难读，
   语义色只承担图标与标题 */
.alert-body { color: var(--color-text-secondary); }

/* ============ Empty ============ */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-4);
  text-align: center;
}

.empty-icon {
  width: 64px;
  height: 64px;
  color: var(--color-neutral-300);
}

.empty-text {
  font-size: var(--text-body-2);
  color: var(--color-text-tertiary);
}

/* ============ Pagination ============ */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.pagination-total {
  font-size: var(--text-body-2);
  color: var(--color-text-tertiary);
  margin-right: auto;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-neutral-0);
  font-size: var(--text-body-2);
  color: var(--color-text-secondary);
  /* 等宽数字：翻页时页码宽度不跳 */
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.pagination-item:not(:disabled):hover {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.pagination-item.is-active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-text-inverse);
}

.pagination-item:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ============ Loading（清单 6.7 / 8.1.9 四态里的加载态）============ */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 骨架屏：列表加载时占位，避免高度塌陷后又弹回来 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-50) 37%,
    var(--color-neutral-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-s);
  animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}