/* ============================================================
   后台 / 前台 **统一分页组件**样式（2026-10-07 第十八轮 · 发哥第 4 项）
   ------------------------------------------------------------
   🔴 为什么单独一个文件（而不是放进 admin.css）：
      前台（layouts/app.blade.php）不引 admin.css，但它也有多页列表
      （论坛帖子、我的收藏、积分明细、提醒、Q&A…）。发哥要求"整个网站只要
      多页的列表都用这个组件" ⇒ 样式必须是**前后台共用的一份**。
   🔴 颜色用 `var(--admin-*, 兜底值)` 写法：
      后台有 admin.css 的主题变量 → 走变量；前台没有 → 走兜底值，两边都好看。

   🔴 为什么不用框架默认的 `->links()`：
      它渲染的是 **Tailwind 类**（`hidden sm:flex` …），而 Tailwind 是 Vite
      **purge 构建**的 —— vendor 里的类不在扫描范围 → 被整批剔掉 ⇒
      页面上只剩「上一页 / 下一页」能看，页码 / 首页 / 尾页全不见。
   结构见 `resources/views/components/admin/pager.blade.php`。
   ============================================================ */
.tp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}
.tp-pager-info { font-size: 12px; color: var(--admin-muted, #6b7280); }
.tp-pager-info strong { color: var(--admin-body-text, #374151); }

.tp-pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.tp-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 9px;
    font-size: 13px;
    line-height: 1;
    color: var(--admin-body-text, #374151);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--admin-border, #e5e7eb);
    cursor: pointer;
}
.tp-pager-btn:hover {
    border-color: var(--admin-accent, #E2231A);
    color: var(--admin-accent, #E2231A);
    text-decoration: none;
}
.tp-pager-btn.is-active {
    background: var(--admin-accent, #E2231A);
    border-color: var(--admin-accent, #E2231A);
    color: #fff;
    font-weight: 600;
}
.tp-pager-btn.is-active:hover { color: #fff; }
.tp-pager-btn.is-disabled {
    color: var(--admin-muted, #9ca3af);
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.tp-pager-gap { padding: 0 4px; color: var(--admin-muted, #9ca3af); }