/*
 * Pagination styles — Sprint 9 MATCH-XX-PT2-BATCH-B
 *
 * Used by `new-matches.html` and `browse-profiles.html` (server-side
 * pagination via `?page=&page_size=`). Buttons are native `<button>`
 * elements so keyboard activation (Enter / Space) and focus order come
 * for free.
 *
 * DEV_GUIDE constraints honored:
 *   #1  — rem only (no px).
 *   #6  — touch targets >= 2.75rem (44px @ 16px root).
 *   #19 — no innerHTML on user-derived data (CSS-side: no concern).
 *   #22 — CSP-Enforce: no inline styles or scripts touched.
 *
 * a11y notes:
 *   - The active page button carries `aria-current="page"` (set by JS).
 *   - First/Prev/Next/Last get `aria-label` for screen readers.
 *   - `:focus-visible` outline keeps the focus ring visible to keyboard
 *     users without disrupting mouse interactions.
 *   - Disabled state is announced via the `disabled` attribute (also
 *     applied to first-page button when on page 1, etc.).
 */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block: 1.5rem;
    padding-inline: 0.5rem;
    /* Center the live region under the buttons on narrow viewports. */
    flex-direction: row;
}

.pagination button {
    /* DEV_GUIDE #6 — minimum touch target 2.75rem (= 44px). */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #1f2937;        /* gray-800 — matches list-page surface */
    color: #f3f4f6;             /* gray-100 */
    border: 0.0625rem solid #374151;  /* gray-700 */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination button:hover:not(:disabled) {
    background: #374151;        /* gray-700 */
    border-color: #4b5563;      /* gray-600 */
}

.pagination button:focus {
    /* No visible style — :focus-visible handles keyboard, fall back here
     * for tooling that lacks :focus-visible support. */
    outline: none;
}

.pagination button:focus-visible {
    outline: 0.1875rem solid #ec4899;  /* pink-500 — IndianMarriage accent */
    outline-offset: 0.125rem;
}

.pagination button[aria-current="page"] {
    background: #ec4899;        /* pink-500 */
    border-color: #db2777;      /* pink-600 */
    color: #ffffff;
    font-weight: 700;
    cursor: default;
}

.pagination button[aria-current="page"]:hover {
    /* Don't change appearance on hover for the active page. */
    background: #ec4899;
    border-color: #db2777;
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Light-theme override — list pages support a `dark` class on <html>; default
 * is light. Listed AFTER the dark defaults above because IM list-pages render
 * dark by default. */
:root:not(.dark) .pagination button {
    background: #ffffff;
    color: #1f2937;
    border-color: #d1d5db;      /* gray-300 */
}

:root:not(.dark) .pagination button:hover:not(:disabled) {
    background: #f3f4f6;        /* gray-100 */
    border-color: #9ca3af;      /* gray-400 */
}

:root:not(.dark) .pagination button[aria-current="page"] {
    background: #ec4899;
    border-color: #db2777;
    color: #ffffff;
}

/* Ellipsis placeholder — rendered as a non-interactive `<span>` for the
 * ranges between page-number clusters (e.g. 1 ... 4 5 6 ... 12). */
.pagination .ellipsis {
    min-width: 2rem;
    text-align: center;
    color: #9ca3af;             /* gray-400 */
    user-select: none;
    padding-inline: 0.25rem;
}

/* Live region — visually integrated with the bar but separated from buttons
 * for screen-reader clarity. */
.pagination .pagination-status {
    margin-inline-start: 1rem;
    font-size: 0.875rem;
    color: #d1d5db;             /* gray-300 */
}

:root:not(.dark) .pagination .pagination-status {
    color: #4b5563;             /* gray-600 */
}

/* Narrow viewports — stack the live region below the buttons. */
@media (max-width: 32rem) {
    .pagination {
        flex-direction: column;
    }
    .pagination .pagination-status {
        margin-inline-start: 0;
        margin-block-start: 0.5rem;
    }
}

/* Reduced-motion — already no animations; included for completeness should
 * a future iteration add transitions to the active-page swap. */
@media (prefers-reduced-motion: reduce) {
    .pagination button {
        transition: none;
    }
}