/*
 * Heritage Pro — global pagination
 *
 * Rounded pill pagination applied to every Laravel paginator (`->links()`),
 * every DataTables pager, and any hand-rolled pager that opts in with
 * `.pagination-rounded`. Loaded from `layouts/head-css`, `layouts/public`
 * and `layouts/public-careers`, so it covers admin, portals, kiosk and the
 * public careers/admissions sites.
 *
 * Modules theme the pager by re-declaring the custom properties below on a
 * scoping selector — never by re-declaring the rules. See the timetable block
 * at the bottom of this file for the reference example.
 */

:root {
    --hp-page-size: 32px;
    --hp-page-gap: 3px;
    --hp-page-radius: 30px;
    --hp-page-font-size: 13px;
    --hp-page-bg: #f3f4f6;
    --hp-page-color: #3b82f6;
    --hp-page-hover-bg: #e5e7eb;
    --hp-page-hover-color: #1d4ed8;
    --hp-page-active-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --hp-page-active-color: #ffffff;
    --hp-page-active-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    --hp-page-disabled-bg: #f9fafb;
    --hp-page-disabled-color: #cbd5e1;
    --hp-page-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ---------------------------------------------------------------------------
 * Wrapper
 * -------------------------------------------------------------------------*/

/*
 * Pagers sit right by default, matching the rest of the system. `space-between`
 * plus `margin-left: auto` on the nav gives one layout for both shapes: with a
 * "Showing 1 to 10 of 240" summary the summary sits left and the pager right;
 * without one the pager still lands right.
 *
 * Alignment is declared without `!important` so a page that deliberately
 * centres its pager with a Bootstrap utility still wins.
 */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.pagination-container nav,
.pagination-wrap nav {
    margin-left: auto;
}

/*
 * Callers that pass a padded/bordered strip class already own the gap above the
 * pager, so drop the default margin rather than stacking two. Spacing utilities
 * (`mt-3`, `mt-4`, …) need no entry here — Bootstrap declares them `!important`
 * and overrides the default on their own. `.career-pagination` is deliberately
 * absent: it is a plain `margin-top: 2rem` spacer, not a strip.
 */
.pagination-container.p-3,
.pagination-container.pagination-wrap,
.pagination-container.hr-pagination,
.pagination-container.planning-pagination,
.pagination-container.staff-chat-pagination {
    margin-top: 0;
}

.pagination-summary {
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pagination-container nav {
        margin-left: 0;
    }

    .pagination-container .pagination {
        justify-content: flex-start;
    }
}

.pagination {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0;
    gap: 0;
}

/* ---------------------------------------------------------------------------
 * Page buttons
 *
 * `border-radius` and `border` carry `!important` because Bootstrap sets them
 * at equal specificity via `.page-item:first-child .page-link`; the rest of the
 * declarations win on source order alone.
 * -------------------------------------------------------------------------*/

.pagination .page-link,
.pagination .page-item .page-link,
.pagination-rounded .page-link,
.pagination-rounded .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hp-page-size);
    height: var(--hp-page-size);
    margin: 0 var(--hp-page-gap) !important;
    padding: 0 10px;
    border: 0 !important;
    border-radius: var(--hp-page-radius) !important;
    background: var(--hp-page-bg);
    color: var(--hp-page-color);
    font-size: var(--hp-page-font-size);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.pagination .page-link:hover,
.pagination-rounded .page-link:hover {
    background: var(--hp-page-hover-bg);
    color: var(--hp-page-hover-color);
}

.pagination .page-link:focus-visible,
.pagination-rounded .page-link:focus-visible {
    outline: 0;
    box-shadow: var(--hp-page-focus-ring);
}

.pagination .page-item.active .page-link,
.pagination-rounded .page-item.active .page-link {
    background: var(--hp-page-active-bg);
    color: var(--hp-page-active-color);
    box-shadow: var(--hp-page-active-shadow);
}

.pagination .page-item.disabled .page-link,
.pagination-rounded .page-item.disabled .page-link {
    background: var(--hp-page-disabled-bg);
    color: var(--hp-page-disabled-color);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pagination .page-link,
    .pagination-rounded .page-link {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * DataTables
 *
 * The Bootstrap integration emits `.pagination > .page-item > .page-link`, so
 * the rules above already apply. These only fix the pager's own float/spacing.
 * -------------------------------------------------------------------------*/

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Dark mode
 * -------------------------------------------------------------------------*/

body[data-layout-mode="dark"] {
    --hp-page-bg: #1f2937;
    --hp-page-color: #93c5fd;
    --hp-page-hover-bg: #374151;
    --hp-page-hover-color: #bfdbfe;
    --hp-page-disabled-bg: #111827;
    --hp-page-disabled-color: #6b7280;
}

/* ---------------------------------------------------------------------------
 * Timetable module
 *
 * The timetable pages previously shipped their own square pager. They now use
 * the shared pill, tinted with the module's own palette tokens.
 * -------------------------------------------------------------------------*/

body.is-timetable-module .timetable-page,
body.is-timetable-module .planning-pagination {
    --hp-page-color: var(--tt-system-primary, #3b82f6);
    --hp-page-hover-bg: var(--tt-system-primary-soft, #e5e7eb);
    --hp-page-active-bg: var(--tt-system-primary, #3b82f6);
}

/* ---------------------------------------------------------------------------
 * Small screens
 * -------------------------------------------------------------------------*/

@media (max-width: 575.98px) {
    :root {
        --hp-page-size: 28px;
        --hp-page-gap: 2px;
        --hp-page-font-size: 12px;
    }

    .pagination .page-link,
    .pagination-rounded .page-link {
        padding: 0 8px;
    }
}