/* ==================== 分页组件 ==================== */
/* Linear 风格玻璃态分页导航 */

/* ==================== 基础分页容器 ==================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  flex-wrap: wrap;
}

.pagination--left {
  justify-content: flex-start;
}

.pagination--right {
  justify-content: flex-end;
}

.pagination--between {
  justify-content: space-between;
}

/* ==================== 分页按钮 ==================== */

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: 0.5rem;
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-decoration: none;
}

.pagination__btn:hover:not(:disabled):not(.pagination__btn--active) {
  background: rgba(120, 119, 198, 0.1);
  border-color: rgba(120, 119, 198, 0.2);
  color: var(--glow-purple, #7877c6);
  transform: translateY(-1px);
}

.pagination__btn:active:not(:disabled) {
  transform: translateY(0);
}

/* 当前页 */
.pagination__btn--active {
  background: linear-gradient(135deg, var(--glow-purple, #7877c6), var(--glow-blue, #5b5a9e));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(120, 119, 198, 0.3);
  pointer-events: none;
}

/* 禁用状态 */
.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==================== 上一页/下一页按钮 ==================== */

.pagination__prev,
.pagination__next {
  font-weight: 600;
  gap: 0.5rem;
}

.pagination__prev::before {
  content: '←';
  font-size: 1rem;
}

.pagination__next::after {
  content: '→';
  font-size: 1rem;
}

/* ==================== 省略号 ==================== */

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--text-tertiary, #737373);
  pointer-events: none;
  user-select: none;
}

/* ==================== 页面信息 ==================== */

.pagination__info,
.page-info {
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.pagination__info strong,
.page-info strong {
  color: var(--text-primary, #ffffff);
  font-weight: 600;
}

/* ==================== 每页数量选择器 ==================== */

.pagination__size-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pagination__size-select {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: 0.5rem;
  color: var(--text-primary, #ffffff);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination__size-select:hover {
  background: rgba(120, 119, 198, 0.1);
  border-color: rgba(120, 119, 198, 0.2);
}

.pagination__size-select:focus {
  outline: none;
  border-color: var(--glow-purple, #7877c6);
  box-shadow: 0 0 0 3px rgba(120, 119, 198, 0.1);
}

/* ==================== 跳转输入框 ==================== */

.pagination__jumper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
}

.pagination__jumper-input {
  width: 4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: 0.5rem;
  color: var(--text-primary, #ffffff);
  font-size: 0.875rem;
  text-align: center;
  transition: all 0.2s ease;
}

/* 隐藏 number input 的上下箭头 */
.pagination__jumper-input::-webkit-inner-spin-button,
.pagination__jumper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination__jumper-input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.pagination__jumper-input:hover {
  background: rgba(120, 119, 198, 0.05);
  border-color: rgba(120, 119, 198, 0.2);
}

.pagination__jumper-input:focus {
  outline: none;
  background: rgba(120, 119, 198, 0.08);
  border-color: var(--glow-purple, #7877c6);
  box-shadow: 0 0 0 3px rgba(120, 119, 198, 0.1);
}

/* ==================== 完整分页布局 ==================== */

.pagination--full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1rem;
  flex-wrap: wrap;
}

.pagination__left-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.pagination__center-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination__right-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ==================== 简洁模式 ==================== */

.pagination--simple {
  gap: 1rem;
}

.pagination--simple .pagination__btn {
  padding: 0 1rem;
}

/* ==================== 紧凑模式 ==================== */

.pagination--compact .pagination__btn {
  min-width: 2rem;
  height: 2rem;
  font-size: 0.813rem;
}

.pagination--compact .pagination__info {
  font-size: 0.813rem;
}

/* ==================== 大尺寸 ==================== */

.pagination--lg .pagination__btn {
  min-width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.pagination--lg .pagination__info {
  font-size: 1rem;
}

/* ==================== 圆形按钮 ==================== */

.pagination--rounded .pagination__btn {
  border-radius: 50%;
  min-width: 2.5rem;
  padding: 0;
}

.pagination--rounded .pagination__prev,
.pagination--rounded .pagination__next {
  border-radius: 0.5rem;
  padding: 0 0.75rem;
}

/* ==================== 响应式变体 ==================== */

/* 响应式分页 - 自动适配设备尺寸 */
.pagination--responsive .pagination__btn {
  /* 移动端：紧凑按钮 */
  min-width: 1.875rem;
  height: 1.875rem;
  font-size: 0.75rem;
  padding: 0 0.375rem;
}

.pagination--responsive .pagination__info,
.pagination--responsive .page-info {
  font-size: 0.813rem;
}

.pagination--responsive .pagination__size-selector,
.pagination--responsive .pagination__jumper {
  font-size: 0.813rem;
}

.pagination--responsive .pagination__jumper-input {
  width: 3rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.813rem;
}

@media (min-width: 768px) {
  .pagination--responsive .pagination__btn {
    /* 平板端：标准按钮 */
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 0.813rem;
    padding: 0 0.625rem;
  }

  .pagination--responsive .pagination__info,
  .pagination--responsive .page-info {
    font-size: 0.875rem;
  }

  .pagination--responsive .pagination__size-selector,
  .pagination--responsive .pagination__jumper {
    font-size: 0.875rem;
  }

  .pagination--responsive .pagination__jumper-input {
    width: 3.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 1200px) {
  .pagination--responsive .pagination__btn {
    /* 桌面端：宽松按钮 */
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
    padding: 0 0.75rem;
  }

  .pagination--responsive .pagination__info,
  .pagination--responsive .page-info {
    font-size: 0.875rem;
  }

  .pagination--responsive .pagination__size-selector,
  .pagination--responsive .pagination__jumper {
    font-size: 0.875rem;
  }

  .pagination--responsive .pagination__jumper-input {
    width: 4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* 响应式分页 - 移动端隐藏部分页码 */
@media (max-width: 767px) {
  .pagination--responsive .pagination__btn.hide-mobile {
    display: none;
  }

  .pagination--responsive .pagination__info,
  .pagination--responsive .page-info {
    order: -1;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* 响应式分页 - 完整布局在移动端的调整 */
@media (max-width: 767px) {
  .pagination--responsive.pagination--full {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pagination--responsive .pagination__left-section,
  .pagination--responsive .pagination__center-section,
  .pagination--responsive .pagination__right-section {
    width: 100%;
    justify-content: center;
  }
}

/* ==================== 响应式（保留原有全局响应式） ==================== */

@media (max-width: 768px) {
  .pagination {
    padding: 1rem 0.5rem;
    gap: 0.375rem;
  }
  
  .pagination__btn {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.813rem;
    padding: 0 0.5rem;
  }
  
  .pagination__info,
  .page-info {
    font-size: 0.813rem;
    order: -1;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .pagination--full {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pagination__left-section,
  .pagination__center-section,
  .pagination__right-section {
    width: 100%;
    justify-content: center;
  }
  
  /* 移动端隐藏部分页码 */
  .pagination__btn.hide-mobile {
    display: none;
  }
  
  .pagination__size-selector,
  .pagination__jumper {
    font-size: 0.813rem;
  }
  
  .pagination__jumper-input {
    width: 3rem;
    padding: 0.375rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: 0.25rem;
  }
  
  .pagination__btn {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    padding: 0 0.375rem;
  }
  
  .pagination__prev::before,
  .pagination__next::after {
    font-size: 0.875rem;
  }
  
  /* 极小屏幕只显示前后按钮和当前页 */
  .pagination--simple-mobile .pagination__btn:not(.pagination__prev):not(.pagination__next):not(.pagination__btn--active) {
    display: none;
  }
}

/* ==================== 加载状态 ==================== */

.pagination--loading {
  opacity: 0.5;
  pointer-events: none;
}

.pagination--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  border-radius: 0.5rem;
}