/**
 * PAGINATION - PharmData Design System v2.0
 * Navegação entre páginas de conteúdo
 *
 * Inclui: Pagination básica, compacta, com input, responsiva
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Sizing */
    --pagination-height: 2.25rem;
    --pagination-min-width: 2.25rem;
    --pagination-gap: 0.25rem;
    --pagination-padding: 0.5rem 0.75rem;

    /* Colors */
    --pagination-bg: white;
    --pagination-bg-hover: rgba(183, 228, 213, 0.1);
    --pagination-bg-active: var(--teal-intense, #2AA198);
    --pagination-text: var(--graphite-depth, #1F2937);
    --pagination-text-hover: var(--teal-intense, #2AA198);
    --pagination-text-active: white;
    --pagination-text-disabled: var(--soft-steel, #94A3B8);
    --pagination-border: rgba(183, 228, 213, 0.3);
    --pagination-border-active: var(--teal-intense, #2AA198);

    /* Border radius */
    --pagination-radius: 0.375rem;

    /* Transition */
    --pagination-transition: all 0.15s ease;
}

/* Dark mode */
:root.dark-mode {
    --pagination-bg: var(--arctic-mist, #1a2332);
    --pagination-bg-hover: rgba(183, 228, 213, 0.15);
    --pagination-border: rgba(183, 228, 213, 0.2);
}

/* ===================
   PAGINATION CONTAINER
   =================== */

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

/* ===================
   PAGINATION ITEM
   =================== */

.pagination-item {
    display: flex;
}

.pagination-link,
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-min-width);
    height: var(--pagination-height);
    padding: var(--pagination-padding);
    background: var(--pagination-bg);
    color: var(--pagination-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    cursor: pointer;
    transition: var(--pagination-transition);
    gap: 0.375rem;
}

.pagination-link:hover,
.pagination-btn:hover {
    background: var(--pagination-bg-hover);
    color: var(--pagination-text-hover);
    border-color: var(--pagination-text-hover);
}

.pagination-link:focus-visible,
.pagination-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal-intense, #2AA198);
    z-index: 1;
}

/* Active state */
.pagination-item.active .pagination-link,
.pagination-link[aria-current="page"],
.pagination-btn.active {
    background: var(--pagination-bg-active);
    color: var(--pagination-text-active);
    border-color: var(--pagination-border-active);
    cursor: default;
}

/* Disabled state */
.pagination-item.disabled .pagination-link,
.pagination-link[aria-disabled="true"],
.pagination-btn:disabled {
    color: var(--pagination-text-disabled);
    background: var(--pagination-bg);
    border-color: var(--pagination-border);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* ===================
   PAGINATION NAVIGATION
   Previous/Next buttons
   =================== */

.pagination-prev,
.pagination-next {
    font-weight: 500;
}

.pagination-prev .pagination-icon {
    margin-right: 0.25rem;
}

.pagination-next .pagination-icon {
    margin-left: 0.25rem;
}

/* Icon only */
.pagination-prev-icon,
.pagination-next-icon {
    padding: 0;
}

/* ===================
   PAGINATION ELLIPSIS
   =================== */

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-min-width);
    height: var(--pagination-height);
    color: var(--pagination-text-disabled);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    cursor: default;
}

/* Hoverable ellipsis (para mostrar dropdown) */
.pagination-ellipsis-interactive {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--pagination-radius);
    transition: var(--pagination-transition);
}

.pagination-ellipsis-interactive:hover {
    background: var(--pagination-bg-hover);
    color: var(--pagination-text);
}

/* ===================
   PAGINATION VARIANTS
   =================== */

/* --- Bordered Group --- */
.pagination-bordered {
    gap: 0;
}

.pagination-bordered .pagination-link,
.pagination-bordered .pagination-btn,
.pagination-bordered .pagination-ellipsis {
    border-radius: 0;
    margin-left: -1px;
}

.pagination-bordered .pagination-item:first-child .pagination-link,
.pagination-bordered .pagination-item:first-child .pagination-btn {
    border-radius: var(--pagination-radius) 0 0 var(--pagination-radius);
    margin-left: 0;
}

.pagination-bordered .pagination-item:last-child .pagination-link,
.pagination-bordered .pagination-item:last-child .pagination-btn {
    border-radius: 0 var(--pagination-radius) var(--pagination-radius) 0;
}

/* --- Pills --- */
.pagination-pills .pagination-link,
.pagination-pills .pagination-btn {
    border: none;
    background: transparent;
}

.pagination-pills .pagination-link:hover,
.pagination-pills .pagination-btn:hover {
    background: var(--pagination-bg-hover);
}

.pagination-pills .pagination-item.active .pagination-link,
.pagination-pills .pagination-btn.active {
    background: var(--pagination-bg-active);
    color: var(--pagination-text-active);
}

/* --- Ghost --- */
.pagination-ghost .pagination-link,
.pagination-ghost .pagination-btn {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0.5rem;
}

.pagination-ghost .pagination-link:hover,
.pagination-ghost .pagination-btn:hover {
    background: transparent;
    color: var(--pagination-text-hover);
}

.pagination-ghost .pagination-item.active .pagination-link {
    background: transparent;
    color: var(--teal-intense, #2AA198);
    font-weight: 700;
}

/* --- Rounded --- */
.pagination-rounded .pagination-link,
.pagination-rounded .pagination-btn {
    border-radius: 50%;
}

/* ===================
   PAGINATION SIZES
   =================== */

.pagination-sm .pagination-link,
.pagination-sm .pagination-btn {
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

.pagination-sm .pagination-ellipsis {
    min-width: 1.875rem;
    height: 1.875rem;
}

.pagination-lg .pagination-link,
.pagination-lg .pagination-btn {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
}

.pagination-lg .pagination-ellipsis {
    min-width: 2.75rem;
    height: 2.75rem;
}

/* ===================
   PAGINATION INFO
   Texto "Página X de Y"
   =================== */

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #64748B);
}

.pagination-info-current {
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
}

/* ===================
   PAGINATION WITH INPUT
   Jump to page
   =================== */

.pagination-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #64748B);
}

.pagination-jump-input {
    width: 4rem;
    height: var(--pagination-height);
    padding: 0.375rem 0.5rem;
    text-align: center;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    font-size: 0.875rem;
    color: var(--pagination-text);
    background: var(--pagination-bg);
    transition: var(--pagination-transition);
}

.pagination-jump-input:focus {
    outline: none;
    border-color: var(--teal-intense, #2AA198);
    box-shadow: 0 0 0 2px rgba(42, 161, 152, 0.2);
}

.pagination-jump-btn {
    height: var(--pagination-height);
    padding: 0.375rem 0.75rem;
}

/* ===================
   PAGINATION PER PAGE
   Items per page selector
   =================== */

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #64748B);
}

.pagination-per-page-select {
    height: var(--pagination-height);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    font-size: 0.875rem;
    color: var(--pagination-text);
    background: var(--pagination-bg);
    cursor: pointer;
    transition: var(--pagination-transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.pagination-per-page-select:focus {
    outline: none;
    border-color: var(--teal-intense, #2AA198);
    box-shadow: 0 0 0 2px rgba(42, 161, 152, 0.2);
}

/* ===================
   PAGINATION WRAPPER
   Container com info e controles
   =================== */

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-wrapper-center {
    justify-content: center;
}

.pagination-wrapper-end {
    justify-content: flex-end;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ===================
   SIMPLE PAGINATION
   Apenas Previous/Next
   =================== */

.pagination-simple {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pagination-simple .pagination-info {
    min-width: 8rem;
    justify-content: center;
}

/* ===================
   TABLE PAGINATION
   Integração com tabelas
   =================== */

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--pagination-border);
    background: rgba(183, 228, 213, 0.03);
}

.table-pagination-info {
    font-size: 0.8125rem;
    color: var(--soft-steel, #64748B);
}

.table-pagination-info strong {
    color: var(--graphite-depth, #1F2937);
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Screen reader */
.pagination-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard navigation */
.pagination-link:focus:not(:focus-visible),
.pagination-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Current page */
.pagination-link[aria-current="page"] {
    /* Announced as current page */
}

/* High contrast */
@media (prefers-contrast: high) {
    .pagination-link,
    .pagination-btn {
        border-width: 2px;
    }

    .pagination-item.active .pagination-link {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pagination-link,
    .pagination-btn,
    .pagination-jump-input,
    .pagination-per-page-select {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .pagination-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pagination-controls {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Hide middle pages on mobile */
    .pagination-responsive .pagination-item:not(.pagination-prev):not(.pagination-next):not(.active):not(:first-child):not(:last-child) {
        display: none;
    }

    .pagination-responsive .pagination-ellipsis {
        display: flex;
    }

    .table-pagination {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}