/**
 * Pagination Styles
 * Custom pagination styling
 */

.pagination {
    margin-top: var(--spacing-6, 48px);
}

.pagination nav {
    display: block;
}

/* Mobile/Desktop containers */
.pagination__mobile {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.pagination__desktop {
    display: none;
}

@media (min-width: 640px) {
    .pagination__mobile {
        display: none;
    }
    
    .pagination__desktop {
        display: flex;
        flex: 1;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
    }
}

/* Legacy support for old structure */
.pagination nav > div:first-child {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.pagination nav > div:last-child {
    display: none;
}

@media (min-width: 640px) {
    .pagination nav > div:first-child {
        display: none;
    }
    
    .pagination nav > div:last-child {
        display: flex;
        flex: 1;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
    }
}

/* Info text */
.pagination p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
}

.pagination p span {
    font-weight: 500;
    color: var(--color-text-primary, #111827);
    padding: 0 4px;
}

/* Buttons container */
.pagination span.inline-flex {
    display: inline-flex;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

/* All links and buttons */
.pagination a,
.pagination span[aria-current] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-left: -1px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

/* First button */
.pagination span.inline-flex > a:first-child,
.pagination span.inline-flex > span:first-child {
    margin-left: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* Last button */
.pagination span.inline-flex > a:last-child,
.pagination span.inline-flex > span:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Hover state */
.pagination a:hover {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-secondary, #f9fafb);
    position: relative;
    z-index: 1;
}

/* Focus state */
.pagination a:focus {
    outline: 2px solid var(--color-primary-light, #93c5fd);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
}

/* Active state */
.pagination a:active {
    background-color: var(--color-bg-tertiary, #f3f4f6);
}

/* Current page */
.pagination span[aria-current] span {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-tertiary, #f3f4f6);
    cursor: default;
    pointer-events: none;
}

/* Arrow buttons */
.pagination a[rel="prev"],
.pagination a[rel="next"] {
    padding: 8px;
}

.pagination svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* Mobile buttons */
@media (max-width: 639px) {
    .pagination nav > div:first-child a {
        padding: 8px 16px;
        border-radius: 8px;
        margin-left: 0;
    }
}

/* Dark mode */
[data-theme="dark"] .pagination p {
    color: var(--color-text-secondary-dark, #9ca3af);
}

[data-theme="dark"] .pagination p span {
    color: var(--color-text-primary-dark, #f9fafb);
}

[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span[aria-current] span {
    color: var(--color-text-secondary-dark, #d1d5db);
    background-color: var(--color-bg-primary-dark, #1f2937);
    border-color: var(--color-border-dark, #374151);
}

[data-theme="dark"] .pagination a:hover {
    color: var(--color-text-primary-dark, #f9fafb);
    background-color: var(--color-bg-secondary-dark, #111827);
}

[data-theme="dark"] .pagination span[aria-current] span {
    color: var(--color-text-primary-dark, #f9fafb);
    background-color: var(--color-bg-tertiary-dark, #374151);
}

/* Additional pagination elements */
.pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.pagination__btn:hover {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-secondary, #f9fafb);
}

.pagination__btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination__buttons {
    display: inline-flex;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-left: -1px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    min-width: 40px;
}

.pagination__item:hover {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-secondary, #f9fafb);
    position: relative;
    z-index: 1;
}

.pagination__item--active {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-tertiary, #f3f4f6);
    cursor: default;
    pointer-events: none;
}

.pagination__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-left: -1px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.pagination__arrow:hover {
    color: var(--color-text-primary, #111827);
    background-color: var(--color-bg-secondary, #f9fafb);
}

.pagination__arrow--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination__info {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary, #6b7280);
}

.pagination__info span {
    font-weight: 500;
    color: var(--color-text-primary, #111827);
}

/* Dark mode for new elements */
[data-theme="dark"] .pagination__btn,
[data-theme="dark"] .pagination__item,
[data-theme="dark"] .pagination__arrow {
    color: var(--color-text-secondary-dark, #d1d5db);
    background-color: var(--color-bg-primary-dark, #1f2937);
    border-color: var(--color-border-dark, #374151);
}

[data-theme="dark"] .pagination__btn:hover,
[data-theme="dark"] .pagination__item:hover,
[data-theme="dark"] .pagination__arrow:hover {
    color: var(--color-text-primary-dark, #f9fafb);
    background-color: var(--color-bg-secondary-dark, #111827);
}

[data-theme="dark"] .pagination__item--active {
    color: var(--color-text-primary-dark, #f9fafb);
    background-color: var(--color-bg-tertiary-dark, #374151);
}

[data-theme="dark"] .pagination__info {
    color: var(--color-text-secondary-dark, #9ca3af);
}

[data-theme="dark"] .pagination__info span {
    color: var(--color-text-primary-dark, #f9fafb);
}