/**
 * Shared pagination style (legacy app match).
 * Use on all pages that need pagination: search, history, bookmarks, etc.
 * Structure: <ul class="pagination-modern"> with <li class="page-item">,
 * each nav button in .tooltip-container > .page-link.page-nav + .custom-tooltip,
 * page numbers as .page-link.page-num and .page-link.page-num.current for active.
 */

.pagination-modern {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
}

.pagination-modern .page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* When one li holds multiple page numbers (e.g. client-rendered search), lay them out with gap */
.pagination-modern .page-item:has(.page-link.page-num) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Tooltip container for nav buttons (First / Previous / Next / Last) */
.pagination-modern .tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-modern .tooltip-container .custom-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 6px;
    transform: translateX(-50%) translateY(4px);
    background: var(--neutral-800);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.pagination-modern .tooltip-container:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Nav buttons (arrows) - grey to match non-current page numbers */
.pagination-modern .page-link.page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--neutral-500);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination-modern .page-link.page-nav:hover {
    background: var(--neutral-50);
    color: var(--neutral-700);
}

.pagination-modern .page-link.page-nav.disabled {
    color: var(--neutral-400);
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

/* Page number buttons - lighter than data card, grey for non-current */
.pagination-modern .page-link.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.35rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--neutral-500);
    font-size: calc(0.9rem - 1px);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination-modern .page-link.page-num:hover {
    background: var(--neutral-50);
    color: var(--neutral-800);
}

.pagination-modern .page-link.page-num.active,
.pagination-modern .page-link.page-num.current {
    background: var(--neutral-300);
    color: var(--neutral-800);
    font-weight: 400;
    cursor: default;
}

.pagination-modern .page-link.page-num.active:hover,
.pagination-modern .page-link.page-num.current:hover {
    background: var(--neutral-400);
    color: var(--neutral-900);
}

/* Optional: range text (e.g. "Page 1 of 5") */
.pagination-range {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--neutral-600);
    padding: 0 0.5rem;
    white-space: nowrap;
    user-select: none;
}

.pagination-range strong {
    font-weight: 700;
    color: var(--neutral-800);
}

/* Hide table/cell cruft when pagination is inside a grid */
.pagination-modern td,
.pagination-modern td a,
.pagination-modern td span {
    display: none;
}