/* ===============================
 * 学员端分页：状态与当前主题保持一致。
 * =============================== */

.pagination {
    gap: 8px;
    margin-top: 16px;
}

/* 基础按钮使用主题文字与边框，避免浅色主题残留中性灰、深色主题页码过暗。 */
.pagination .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 500;

    color: var(--mxj-text-primary);
    background-color: var(--mxj-surface-2);
    border: 1px solid var(--mxj-border-1);
    border-radius: 8px !important;
    box-shadow: none;
    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease;
}

/* 仅可用页码响应悬停；主题交互色同时保证浅色与深色模式下的文字清晰。 */
.pagination .page-item:not(.disabled):not(.active) .page-link:is(:hover, :focus-visible) {
    background-color: var(--mxj-interactive-soft-strong);
    border-color: var(--mxj-interactive-border);
    color: var(--mxj-interactive-ink);
}

/* 鼠标点击不保留 MDB 默认焦点阴影，键盘焦点仍在下方清晰呈现。 */
.pagination .page-link:focus {
    box-shadow: none;
}

/* 键盘焦点跟随当前主题，避免 MDB 默认蓝色焦点环泄漏。 */
.pagination .page-item:not(.disabled) .page-link:focus-visible {
    outline: 2px solid var(--mxj-interactive-border);
    outline-offset: 2px;
    box-shadow: var(--mxj-focus-ring);
}

/* 实心当前页使用主色的深一档，保证小号文字对比度；命名主题会提供对应色板。 */
.pagination .page-item.active .page-link {
    background: var(--mxj-brand-600);
    border-color: var(--mxj-brand-600);
    color: var(--page-link-active-color);
    font-weight: 600;
    box-shadow: none;
}

/* 上页 / 下页保留足够的横向点击区域。 */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    padding: 0 14px;
}

/* 禁用按钮保留主题底色和清晰文字，通过淡实心底、次级文字及不可交互表达状态。 */
.pagination .page-item.disabled .page-link {
    color: var(--mxj-text-muted);
    background-color: var(--mxj-surface-3);
    border-color: var(--mxj-border-1);
    opacity: 1;
    pointer-events: none;
}

/* 只有分页器显式标记的省略号不显示按钮外框，不能以缺少 href 判断。 */
.pagination .page-item.is-ellipsis .page-link {
    min-width: 34px;
    color: var(--mxj-text-muted);
    background-color: transparent;
    border-color: transparent;
}