/* =================================================================
   Pagination - 分页组件
   ================================================================= */

/* ==================== 文件说明 ====================
 * 文件名称: pagination.css
 * 所属层级: components（组件层）
 * 文件用途: 通用分页组件样式
 * 应用场景: 所有列表页（考试列表、文章列表等）
 * 依赖关系: 依赖 base/variables.css
 * 维护说明: 全站通用分页组件，修改需测试所有列表页
 * ================================================== */

/* ==================== 目录结构 ====================
 * 1. 分页容器布局
 * 2. 页码按钮样式（默认、激活、悬停）
 * 3. 上一页/下一页按钮
 * 4. 省略号样式
 * 5. 页码输入框（快速跳转）
 * 6. 主题适配（暗色模式）
 * 7. 响应式适配（移动端简化版）
 * ================================================== */

/* 分页容器 */
.pagination-wrapper {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

.resource-pagination {
    margin-bottom: 32px;
    padding: 24px 0;
}

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
}

.pagination-buttons {
    display: flex;
    margin: 0 auto;
    gap: 8px;
    flex-wrap: wrap;
}

/* 分页按钮 */
.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.page-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
    font-weight: 600;
    cursor: default;
}

.page-btn:disabled,
.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.page-btn.disabled:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.page-ellipsis {
    padding: 0 8px;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* 页码显示容器 */
.page-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px;
}

/* 当前页码和总页数 */
.page-current,
.page-total {
    min-width: 60px;
    height: 36px;
    padding: 0 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 斜杠分隔符 */
.page-separator {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
}