/* ================================================================
 * 公共分页组件 CommonPager（2026-09-30，配合 common-pager.js）
 * 全项目列表页统一使用：左侧总条数，右侧「每页 N 条 + 智能页码」
 * 结构：.cp-bar > .cp-total + .cp-right(.cp-size + ul.cp-pagination)
 * 视觉与任务发布中心分页一致：圆角方块页码、浅描边、当前页实心蓝
 * ================================================================ */
.cp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

/* 无边框变体：宿主卡片已有分隔线时使用 */
.cp-bar.cp-flush {
    margin-top: 12px;
    padding-top: 12px;
    border-top: none;
}

.cp-total {
    font-size: 13px;
    color: #86909c;
    white-space: nowrap;
}

.cp-total b {
    color: #1677ff;
    font-weight: 700;
    font-size: 14px;
    margin: 0 2px;
}

.cp-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cp-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #86909c;
    white-space: nowrap;
}

/* 每页条数选择器：固定宽度，避免原生 select width:auto 经自定义下拉增强后
   外壳在 flex 容器中塌缩成 min-content，导致「50/100」尾数被裁切（2026-09-30） */
.cp-size select.form-select,
.cp-size .cs-enhanced-wrap {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    flex-shrink: 0;
}

.cp-size select.form-select {
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    border-radius: 8px;
    border-color: #e5e7eb;
    background-color: #fff;
    cursor: pointer;
}

.cp-size select.form-select:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
}

/* ---------------- 页码 ---------------- */
.cp-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-pagination .cp-page {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-pagination .cp-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.cp-pagination .cp-btn:hover {
    color: #1677ff;
    border-color: #1677ff;
    background: #f0f7ff;
}

.cp-pagination .cp-page.active .cp-btn {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.cp-pagination .cp-page.active .cp-btn:hover {
    background: #0e6be8;
    border-color: #0e6be8;
    color: #fff;
}

.cp-pagination .cp-page.is-disabled .cp-btn {
    background: #fafafa;
    border-color: #ececec;
    color: #c0c4cc;
    cursor: not-allowed;
}

.cp-pagination .cp-page.is-disabled .cp-btn:hover {
    color: #c0c4cc;
    border-color: #ececec;
    background: #fafafa;
}

.cp-pagination .cp-ellipsis {
    min-width: 24px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;
    font-size: 13px;
}

/* 千川系列页面：宿主 .qc-pager 为右对齐 flex 容器，组件条撑满并去掉自带分隔线/间距 */
.qc-pager .cp-bar {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: none;
}

/* RBAC / 授权管理动态模板：容器保留旧类 .rbac-pagination（flex 右对齐），组件条同样撑满 */
.rbac-pagination .cp-bar {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: none;
}

/* 单品直降：宿主 #flashSalePager 被 product-ranking.css 泛化规则
   (.tab-pane .card:last-of-type .card-body > div:last-child) 命中为 flex 容器，
   组件条作为 flex item 会塌缩成内容宽、整体堆在左侧；撑满整行恢复「左总数/右页码」，
   分隔线/内边距沿用宿主规则，去掉组件自带的一套避免双线 */
#flashSalePager .cp-bar {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: none;
}

/* 跳转输入（可选，showJump 开启时） */
.cp-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #86909c;
    white-space: nowrap;
}

.cp-jump input {
    width: 52px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    color: #374151;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cp-jump input:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
}

@media (max-width: 576px) {
    .cp-bar {
        justify-content: center;
    }
    .cp-right {
        justify-content: center;
    }
}