/* ==========================================================================
   办结反馈列表：把分页移出列表边框
   --------------------------------------------------------------------------
   本段放在 pagebar.css，是因为页面里它的 <link> 在 style.css 之后：
       <link href="css/style.css"    …>   ← 先加载
       <link href="css/pagebar.css"  …>   ← 后加载（同优先级时说了算）
   所以只需改 pagebar.css 一个文件，style.css 一行都不用动。

   问题：博达静态翻页组件把 <div class="pagebar"> 生成在
        <ul class="list"> 内部（且是最后一个子元素），
        而 .list 自带 border + border-radius + overflow:hidden，
        分页必然被一起框住。

   做法：.list 不再画边框，改由每个 <li> 各自带边框拼接成框。
        容器没有边框，分页自然落在框外 —— 无需定位，也不必计算高度。

   注意：条目之间夹着 <span><hr></span> 分段符（来自组件模板），
        所以 .list > li + li 这种相邻选择器匹配不到，
        分隔线要用 li:not(:first-of-type) 来画。
   ========================================================================== */

/* ---- 第 1 步：容器去框、去裁剪 ---- */
ul.list {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* ---- 第 2 步：每个 li 带 上/左/右 三条边，首尾补圆角，拼成完整外框 ---- */
ul.list > li {
    border: 1px solid #e2e8f0;   /* slate-200 */
    border-bottom: 0;
    border-radius: 0;
    background: #fff;
}

ul.list > li:first-of-type {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

ul.list > li:last-of-type {
    border-bottom: 1px solid #e2e8f0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* 条目分隔线：用 :not(:first-of-type) 而非 li + li，
   因为组件在 li 之间插入了 <span> 分段符，相邻选择器会失效 */
ul.list > li:not(:first-of-type) {
    border-top: 1px solid #f1f5f9;   /* slate-100 */
}

/* ---- 第 3 步：模板里那段 <span><hr></span>，统一细虚线并去掉留白 ---- */
ul.list > span {
    display: block;
    background: #fff;
}

ul.list > span hr {
    margin: 0;
    border: 0;
    border-top: 1px dashed #f1f5f9;
}

/* ---- 第 4 步：分页落在框外，间距 24px ---- */
ul.list > .pagebar {
    margin-top: 24px;
}

/* ==========================================================================
   以下为原有分页样式，保持不变
   ========================================================================== */

/* 尺寸按边框盒计算，保证 36px 视觉高度 */
.pagebar,
.pagebar * {
    box-sizing: border-box;
}

/* 分页栏容器：水平居中排列，超宽自动换行 */
.pagebar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    color: #475569;               /* slate-600 */
}

/* 页码区容器 */
.pagebar .p_pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- 可点击的功能按钮与页码：白底浅灰边框 ---- */
.pagebar .p_first,
.pagebar .p_prev,
.pagebar .p_no,
.pagebar .p_next,
.pagebar .p_last {
    display: inline-flex;
    border: 1px solid #cbd5e1;   /* slate-300 */
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

/* 内部链接铺满按钮，决定按钮尺寸 */
.pagebar .p_first a,
.pagebar .p_prev a,
.pagebar .p_no a,
.pagebar .p_next a,
.pagebar .p_last a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    text-decoration: none;
    color: inherit;
}

/* 悬停：浅蓝边框、浅蓝底、深蓝文字 */
.pagebar .p_first:hover,
.pagebar .p_prev:hover,
.pagebar .p_no:hover,
.pagebar .p_next:hover,
.pagebar .p_last:hover {
    border-color: #5b9ad7;        /* brand-400 */
    background: #eef5fc;          /* brand-50 */
    color: #1a4a89;              /* brand-700 */
}

/* ---- 当前页码：蓝底白字加粗 ---- */
.pagebar .p_no_d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #1e5aa8;   /* brand-600 */
    border-radius: 6px;
    background: #1e5aa8;
    color: #fff;
    font-weight: 600;
}

/* ---- 禁用的功能按钮：浅灰边框浅灰字 ---- */
.pagebar .p_first_d,
.pagebar .p_prev_d,
.pagebar .p_next_d,
.pagebar .p_last_d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;   /* slate-200 */
    border-radius: 6px;
    background: #fff;
    color: #cbd5e1;              /* slate-300 */
    cursor: not-allowed;
}

/* ---- 页码省略号 ---- */
.pagebar .p_dot {
    color: #94a3b8;               /* slate-400 */
    padding: 0 2px;
}

/* ---- 文本标签（1/12、到第、页）---- */
.pagebar .p_t {
    color: #64748b;               /* slate-500 */
}

/* ---- 跳转输入框 ---- */
.pagebar .p_goto_input {
    width: 56px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;   /* slate-300 */
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #334155;              /* slate-700 */
    outline: none;
    transition: border-color 0.15s;
}

.pagebar .p_goto_input:hover {
    border-color: #5b9ad7;       /* brand-400 */
}

.pagebar .p_goto_input:focus {
    border-color: #357cc4;       /* brand-500 */
}

/* ---- 跳转按钮：主操作蓝底白字 ---- */
.pagebar .p_goto a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #1e5aa8;   /* brand-600 */
    border-radius: 6px;
    background: #1e5aa8;
    color: #fff;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.pagebar .p_goto a:hover {
    border-color: #1a4a89;       /* brand-700 */
    background: #1a4a89;
}

/* ==========================================================================
   显示 / 隐藏控制（需要时取消对应注释）
   ========================================================================== */

/* 隐藏 "首页" "尾页" */
/* .pagebar .p_first, .pagebar .p_first_d, .pagebar .p_last, .pagebar .p_last_d { display: none; } */

/* 隐藏 "上页" "下页" */
/* .pagebar .p_prev, .pagebar .p_prev_d, .pagebar .p_next, .pagebar .p_next_d { display: none; } */

/* 隐藏页码与省略号，仅保留跳转输入框 */
/* .pagebar .p_no, .pagebar .p_no_d, .pagebar .p_dot { display: none; } */