/* ============================================
 * Pagination Enhanced - Light/Dark Adaptive
 * 分页导航优化 - 智能适配
 * ============================================ */

/* 分页容器 */
#pagination,
.pagination,
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 0;
    flex-wrap: wrap;
}

/* ============================================
 * 页码按钮通用样式
 * ============================================ */
#pagination .page-number,
.pagination .page-number,
#pagination a,
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* ============================================
 * Light 背景 - 页码按钮
 * ============================================ */
body.light-background #pagination .page-number,
body.light-background .pagination .page-number,
body.light-background #pagination a:not(.extend),
body.light-background .pagination a:not(.extend) {
    background: rgba(255, 255, 255, 0.95);
    color: #2a2a2a;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

body.light-background #pagination .page-number:hover,
body.light-background .pagination .page-number:hover,
body.light-background #pagination a:not(.extend):hover,
body.light-background .pagination a:not(.extend):hover {
    background: #ffffff;
    color: var(--theme-color, #667eea);
    border-color: var(--theme-color, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* 当前页 */
body.light-background #pagination .page-number.current,
body.light-background .pagination .page-number.current {
    background: var(--theme-color, #667eea) !important;
    color: #ffffff !important;
    border-color: var(--theme-color, #667eea) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ============================================
 * Dark 背景 - 页码按钮
 * ============================================ */
body.dark-background #pagination .page-number,
body.dark-background .pagination .page-number,
body.dark-background #pagination a:not(.extend),
body.dark-background .pagination a:not(.extend) {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-background #pagination .page-number:hover,
body.dark-background .pagination .page-number:hover,
body.dark-background #pagination a:not(.extend):hover,
body.dark-background .pagination a:not(.extend):hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: var(--theme-color, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* 当前页 */
body.dark-background #pagination .page-number.current,
body.dark-background .pagination .page-number.current {
    background: var(--theme-color, #667eea) !important;
    color: #ffffff !important;
    border-color: var(--theme-color, #667eea) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

/* ============================================
 * 上一页/下一页箭头按钮
 * ============================================ */
#pagination .extend,
.pagination .extend,
#pagination .prev,
#pagination .next,
.pagination .prev,
.pagination .next {
    min-width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

/* Light 背景 - 箭头按钮 */
body.light-background #pagination .extend,
body.light-background .pagination .extend {
    background: rgba(255, 255, 255, 0.95);
    color: #2a2a2a;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

body.light-background #pagination .extend:hover,
body.light-background .pagination .extend:hover {
    background: var(--theme-color, #667eea);
    color: #ffffff;
    border-color: var(--theme-color, #667eea);
}

/* Dark 背景 - 箭头按钮 */
body.dark-background #pagination .extend,
body.dark-background .pagination .extend {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

body.dark-background #pagination .extend:hover,
body.dark-background .pagination .extend:hover {
    background: var(--theme-color, #667eea);
    color: #ffffff;
    border-color: var(--theme-color, #667eea);
}

/* ============================================
 * 跳转输入框和按钮
 * ============================================ */

/* 输入框 */
.page-jump-input,
#pagination input[type="number"],
.pagination input[type="number"] {
    width: 80px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

/* Light 背景 - 输入框 */
body.light-background .page-jump-input,
body.light-background #pagination input[type="number"],
body.light-background .pagination input[type="number"] {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2a2a2a !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.light-background .page-jump-input:focus,
body.light-background #pagination input[type="number"]:focus,
body.light-background .pagination input[type="number"]:focus {
    outline: none !important;
    border-color: var(--theme-color, #667eea) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

body.light-background .page-jump-input::placeholder,
body.light-background #pagination input[type="number"]::placeholder,
body.light-background .pagination input[type="number"]::placeholder {
    color: #999 !important;
}

/* Dark 背景 - 输入框 */
body.dark-background .page-jump-input,
body.dark-background #pagination input[type="number"],
body.dark-background .pagination input[type="number"] {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-background .page-jump-input:focus,
body.dark-background #pagination input[type="number"]:focus,
body.dark-background .pagination input[type="number"]:focus {
    outline: none !important;
    border-color: var(--theme-color, #667eea) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

body.dark-background .page-jump-input::placeholder,
body.dark-background #pagination input[type="number"]::placeholder,
body.dark-background .pagination input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* GO 按钮 */
.page-jump-btn,
#pagination button,
.pagination button {
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-transform: uppercase !important;
}

/* Light 背景 - GO 按钮 */
body.light-background .page-jump-btn,
body.light-background #pagination button,
body.light-background .pagination button {
    background: var(--theme-color, #667eea) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

body.light-background .page-jump-btn:hover,
body.light-background #pagination button:hover,
body.light-background .pagination button:hover {
    background: #5568d3 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

/* Dark 背景 - GO 按钮 */
body.dark-background .page-jump-btn,
body.dark-background #pagination button,
body.dark-background .pagination button {
    background: var(--theme-color, #667eea) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
}

body.dark-background .page-jump-btn:hover,
body.dark-background #pagination button:hover,
body.dark-background .pagination button:hover {
    background: #5568d3 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
}

/* ============================================
 * 省略号样式
 * ============================================ */
#pagination .space,
.pagination .space {
    color: inherit;
    opacity: 0.5;
    font-weight: bold;
}

/* ============================================
 * 跳转容器布局
 * ============================================ */
.page-jump-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-jump-label,
.page-jump-total {
    font-size: 14px;
    font-weight: 500;
}

/* Light 背景 - 标签 */
body.light-background .page-jump-label,
body.light-background .page-jump-total {
    color: #666;
}

/* Dark 背景 - 标签 */
body.dark-background .page-jump-label,
body.dark-background .page-jump-total {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
 * 移动端适配
 * ============================================ */
@media screen and (max-width: 768px) {

    #pagination,
    .pagination,
    .pagination-wrapper {
        gap: 8px;
        padding: 20px 10px;
    }

    #pagination .page-number,
    .pagination .page-number,
    #pagination a,
    .pagination a {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 8px;
    }

    .page-jump-input,
    #pagination input[type="number"],
    .pagination input[type="number"] {
        width: 50px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .page-jump-btn,
    #pagination button,
    .pagination button {
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
    }

    .page-jump-container {
        flex-wrap: wrap;
        justify-content: center;
    }
}