/* ─────────────────────────────────────────────────────────────────────────────
   Canonical pagination styling — the main operations dashboard look, app-wide.
   Paired with templates/_pagination.html and static/js/ajax_pagination.js.

   Palette mirrors the main dashboard (.dash) zinc theme. Values are exposed as
   --ep-* custom properties so a dashboard with its own theme can override them
   on a local scope without forking this file.
   ──────────────────────────────────────────────────────────────────────────── */

.ep-pagination {
    --ep-fg:          #09090b; /* zinc-950 */
    --ep-muted:       #f4f4f5; /* zinc-100 */
    --ep-muted-fg:    #71717a; /* zinc-500 */
    --ep-border:      #e4e4e7; /* zinc-200 */
    --ep-primary:     #18181b; /* zinc-900 */
    --ep-primary-fg:  #fafafa;
    --ep-radius:      0.65rem;
}

.ep-pagination .pagination {
    gap: 0.25rem;
    flex-wrap: wrap;
}

.ep-pagination .page-link {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius) !important;
    color: var(--ep-fg);
    font-size: 0.8125rem;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ep-pagination .page-link:hover {
    background: var(--ep-muted);
    color: var(--ep-fg);
    border-color: var(--ep-border);
}

.ep-pagination .page-item.active .page-link {
    background: var(--ep-primary);
    border-color: var(--ep-primary);
    color: var(--ep-primary-fg);
}

.ep-pagination .page-item.disabled .page-link {
    color: var(--ep-muted-fg);
    background: transparent;
    border-color: var(--ep-border);
}

/* Subtle dimming while an AJAX page swap is in flight */
[data-ajax-table].ep-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}