/** Custom Pagination Styling **/
    .pagination-wrapper {
        grid-column: content;
        padding: var(--spacing-6);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: var(--spacing-4);
    }

    .custom-pagination {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2) var(--spacing-3);
        min-width: 44px;
        height: 44px;
        
        background: var(--clr-surface-02);
        border: 1px solid var(--clr-forSurface-02);
        border-radius: var(--radius-2);
        color: var(--clr-onSurface-02);
        text-decoration: none;
        
        font-family: var(--font-sans);
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.3s ease;
        box-sizing: border-box;
        cursor: pointer;
    }

    .pagination-btn:hover {
        background: var(--clr-surface-03);
        border-color: var(--clr-forSurface-03);
        color: var(--clr-onSurface-03--strong);
        text-decoration: none;
        transform: translateY(-1px);
    }

    /* Active page styling */
    .pagination-btn.active {
        background: var(--clr-accent-brand) !important;
        border-color: var(--clr-forAccent-brand) !important;
        color: var(--clr-onAccent-brand) !important;
        font-weight: 700 !important;
        cursor: default;
    }

    .pagination-btn.active:hover {
        background: var(--clr-accent-brand--strong) !important;
        border-color: var(--clr-forAccent-brand--strong) !important;
        color: var(--clr-onAccent-brand--strong) !important;
        transform: none;
    }

    /* Disabled styling */
    .pagination-btn.disabled {
        background: var(--clr-surface-01) !important;
        border-color: var(--clr-forSurface-01) !important;
        color: var(--clr-onSurface-01--subtle) !important;
        cursor: not-allowed !important;
        opacity: 0.5 !important;
    }

    .pagination-btn.disabled:hover {
        background: var(--clr-surface-01) !important;
        border-color: var(--clr-forSurface-01) !important;
        color: var(--clr-onSurface-01--subtle) !important;
        transform: none !important;
    }

    .pagination-btn:first-child,
    .pagination-btn:last-child {
        font-size: 1.2rem;
        font-weight: 700;
    }

    /* Pagination dots styling */
    .pagination-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2) var(--spacing-1);
        min-width: 32px;
        height: 44px;
        color: var(--clr-onSurface-02--subtle);
        font-family: var(--font-sans);
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* Mobile pagination adjustments */
    @media (width < 480px) {
        .pagination-wrapper {
            padding: var(--spacing-4);
        }
        
        .custom-pagination {
            gap: var(--spacing-1);
        }
        
        .pagination-btn {
            min-width: 40px;
            height: 40px;
            padding: var(--spacing-1) var(--spacing-2);
            font-size: 0.75rem;
        }
        
        .pagination-btn:first-child,
        .pagination-btn:last-child {
            font-size: 1rem;
        }
    }

    /* Hide pagination if only one page */
    .custom-pagination:has(.pagination-btn:only-of-type) {
        display: none;
    }

/* Map Tailwind-like Laravel paginator markup to our pagination styles */
nav[aria-label="Pagination Navigation"] {
    width: 100%;
    display: block;
}

nav[aria-label="Pagination Navigation"] .flex {
    display: none;
}

nav[aria-label="Pagination Navigation"] .relative.inline-flex,
nav[aria-label="Pagination Navigation"] a[rel],
nav[aria-label="Pagination Navigation"] a[aria-label] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-3) !important;
    min-width: 44px;
    height: 44px;
    background: var(--clr-surface-02) !important;
    border: 1px solid var(--clr-forSurface-02) !important;
    border-radius: var(--radius-2) !important;
    color: var(--clr-onSurface-02) !important;
    text-decoration: none !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

nav[aria-label="Pagination Navigation"] .relative.inline-flex:hover,
nav[aria-label="Pagination Navigation"] a[rel]:hover {
    background: var(--clr-surface-03) !important;
    border-color: var(--clr-forSurface-03) !important;
    color: var(--clr-onSurface-03--strong) !important;
    transform: translateY(-1px);
}

nav[aria-label="Pagination Navigation"] span[aria-current] .relative.inline-flex,
nav[aria-label="Pagination Navigation"] .relative.inline-flex[aria-current] {
    background: var(--clr-accent-brand) !important;
    border-color: var(--clr-forAccent-brand) !important;
    color: var(--clr-onAccent-brand) !important;
    font-weight: 700 !important;
    cursor: default !important;
}

/* NOTE: Do not force .hidden to display:none here — Tailwind uses responsive classes like
    `sm:flex` to override `.hidden` at larger breakpoints. Keeping this rule removed
    allows the numeric pagination controls to appear on sm+ viewports. */

nav[aria-label="Pagination Navigation"] .text-sm {
    color: var(--clr-onSurface-02) !important;
}