/**
 * KLT Pagination Component Styles
 * Author: K L Torvanger
 *
 * Responsive pagination styling:
 * - Desktop (≥768px): Full pagination with text labels
 * - Tablet/Mobile (<768px): Carets instead of text
 * - Mobile (<576px): Compact 7-item display
 */

.pagination {
    margin-top: 2rem;
    margin-bottom: 2rem;
    flex-wrap: nowrap;
}

.pagination .page-item {
    margin: 0 0.125rem;
}

.pagination .page-link {
    color: #212529;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-link:hover {
    color: #000;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.pagination .page-link:focus {
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

/* Desktop - Fixed width for prev/next buttons to match "Föregående" */
@media (min-width: 768px) {
    .pagination .page-item-prev .page-link,
    .pagination .page-item-next .page-link {
        width: 110px;
    }
}

/* Tablet and Mobile styles - Show carets instead of text (below 768px) */
@media (max-width: 767.98px) {
    .pagination .page-link {
        padding: 0.625rem 0.875rem;
        font-size: 1rem;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination .page-item {
        margin: 0 0.125rem;
    }

    /* Hide text in prev/next buttons, show carets instead */
    .pagination .page-item-prev .page-link-text,
    .pagination .page-item-next .page-link-text {
        display: none;
    }

    .pagination .page-item-prev .page-link::before,
    .pagination .page-item-next .page-link::before {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 0.8;
        display: block;
    }

    .pagination .page-item-prev .page-link::before {
        content: '‹';
    }

    .pagination .page-item-next .page-link::before {
        content: '›';
    }
}

/* Mobile styles - Compact display (below 576px) */
@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: 0.5rem;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide extra pages and middle-near pages on mobile for 7-item display */
    .pagination .page-item-extra,
    .pagination .page-item-middle-near {
        display: none;
    }

    /* Keep near pages (at edges), edge (first/last), and ellipsis visible on mobile */
    .pagination .page-item-near,
    .pagination .page-item-edge,
    .pagination .page-item-ellipsis {
        display: inline-block;
    }
}