@if ($paginator->hasPages())
    @php
        $currentPage = $paginator->currentPage();
        $lastPage = $paginator->lastPage();
        $delta = 2;
        $pages = [1];

        // Add pages around current page
        for ($i = max(2, $currentPage - $delta); $i <= min($lastPage - 1, $currentPage + $delta); $i++) {
            $pages[] = $i;
        }

        // Add last page if not 1
        if ($lastPage > 1) {
            $pages[] = $lastPage;
        }

        // Remove duplicates
        $pages = array_unique($pages);
        sort($pages);
    @endphp

    <nav aria-label="Pagination Navigation" style="display: flex; align-items: center; gap: 3px; flex-wrap: wrap;">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <button class="disabled" disabled style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--text-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;opacity:.38;cursor:default;">‹</button>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--text-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .15s, color .15s, border-color .15s;text-decoration:none;" onmouseover="this.style.background='var(--teal-light)';this.style.color='var(--teal)';this.style.borderColor='var(--teal-light)';" onmouseout="this.style.background='var(--white)';this.style.color='var(--text-mid)';this.style.borderColor='var(--border)';">‹</a>
        @endif

        {{-- Page Number Links --}}
        @php $prevPage = 0; @endphp
        @foreach ($pages as $page)
            {{-- Add gap if needed --}}
            @if ($page - $prevPage > 1)
                <span style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;color:#9ca3af;font-size:12px;font-family:'DM Sans',sans-serif;">…</span>
            @endif

            {{-- Page Link --}}
            @if ($page == $currentPage)
                <span class="current" style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--teal);border-radius:6px;background:var(--teal);color:#fff;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:700;">{{ $page }}</span>
            @else
                <a href="{{ $paginator->url($page) }}" style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--text-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .15s, color .15s, border-color .15s;text-decoration:none;" onmouseover="this.style.background='var(--teal-light)';this.style.color='var(--teal)';this.style.borderColor='var(--teal-light)';" onmouseout="this.style.background='var(--white)';this.style.color='var(--text-mid)';this.style.borderColor='var(--border)';">{{ $page }}</a>
            @endif

            @php $prevPage = $page; @endphp
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--text-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .15s, color .15s, border-color .15s;text-decoration:none;" onmouseover="this.style.background='var(--teal-light)';this.style.color='var(--teal)';this.style.borderColor='var(--teal-light)';" onmouseout="this.style.background='var(--white)';this.style.color='var(--text-mid)';this.style.borderColor='var(--border)';">›</a>
        @else
            <button class="disabled" disabled style="display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--text-mid);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;opacity:.38;cursor:default;">›</button>
        @endif
    </nav>
@endif