/**
 * 分页控件样式文件
 * 
 * @file pagination.css
 * @description 为系统中的表格分页控件提供统一的样式定义
 * @author CodeBuddy
 * @version 1.0.0
 * @date 2025-08-25
 * 
 * 功能说明:
 * - 支持账户表格、PO表格、预约表格的分页显示
 * - 包含页码按钮、页面大小选择、跳转功能
 * - 响应式设计，适配移动端显示
 * - 统一的深色主题风格
 * 
 * 使用的表格ID:
 * - #account-table-pagination: 账户表格分页
 * - #po-table-pagination: PO表格分页  
 * - #appointment-table-pagination: 预约表格分页
 */

/* ========================================
   分页容器主体样式
   ======================================== */
#account-table-pagination, #po-table-pagination, #appointment-table-pagination, #bill-table-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 10px 24px;
    color: var(--dark);
    font-size: 15px;
    border: 1px solid rgba(0,0,0,0.08);
    margin-top: 18px;
    margin-bottom: 0;
}

/* ========================================
   分页信息显示区域
   ======================================== */
/* 总数显示 */
.pg-total {
    margin-right: 8px;
}

/* 页面大小选择下拉框 */
.pg-size-select {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 3px 8px;
    margin-right: 16px;
    background: #ffffff;
    color: var(--dark);
}

/* ========================================
   页码按钮区域
   ======================================== */
/* 页码按钮容器 */
.pg-pages {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* 通用按钮样式（上一页/下一页按钮和页码按钮） */
.pg-btn, .pg-num {
    min-width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #ffffff;
    color: var(--dark);
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
}

/* 禁用状态的按钮样式 */
.pg-btn[disabled], .pg-num[disabled] {
    background: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #dee2e6;
}

/* 当前激活页码的样式 */
.pg-num.active {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* ========================================
   页面跳转功能区域
   ======================================== */
/* 跳转功能容器 */
.pg-jump {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
}

/* 跳转页码输入框 */
.pg-jump input {
    width: 38px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 2px 6px;
    text-align: center;
    background: #ffffff;
    color: var(--dark);
}

/* ========================================
   响应式设计 - 移动端适配
   ======================================== */
@media (max-width: 900px) {
    #account-table-pagination {
        padding: 8px 6px;
        font-size: 13px;
    }
}