/* Custom Pagination Styles */

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}

/* Laravel Pagination Styles */
nav[role="navigation"] {
    width: 100%;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-mint-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.pagination a:hover {
    background-color: var(--color-mint-light);
    border-color: var(--color-mint);
    transform: translateY(-2px);
}

/* Active page */
.pagination .active span {
    background-color: var(--color-mint);
    border-color: var(--color-mint);
    color: var(--color-text-primary);
    font-weight: var(--weight-bold);
}

/* Disabled state */
.pagination .disabled span {
    color: var(--color-text-light);
    background-color: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
    cursor: not-allowed;
}

/* Previous/Next buttons */
.pagination a[rel="prev"],
.pagination a[rel="next"] {
    font-weight: var(--weight-semibold);
}

.pagination .disabled span[rel="prev"],
.pagination .disabled span[rel="next"] {
    opacity: 0.5;
}

/* Dots (ellipsis) */
.pagination .dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--color-text-light);
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        padding: var(--space-xs);
        font-size: var(--text-xs);
    }
    
    .pagination {
        gap: 4px;
    }
    
    /* Hide some page numbers on mobile */
    .pagination li:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

/* Tailwind pagination override (if using Tailwind) */
.flex.justify-between {
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: var(--space-md);
}

.flex.justify-between > div {
    display: none; /* Hide "Showing X to Y of Z results" text */
}

.flex.justify-between nav {
    width: auto;
}

/* Alternative: Simple pagination style */
.simple-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}

.simple-pagination a,
.simple-pagination span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-mint);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.simple-pagination a:hover {
    background-color: var(--color-mint);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.simple-pagination span {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--color-bg-primary);
}