/* rmc-pagination-grammar.css — v3.57.0 (2026-05-21)
 *
 * Canonical pagination + "page X of Y" + jump-to-page + page-size selector
 * grammar for every paged list across the platform. Replaces five forked
 * pagination implementations that landed in different waves:
 *
 *   - admin Django changelist (built-in HTML)
 *   - DRF Redoc paging chrome
 *   - portal-ui-components.css `.portal-page-pager`
 *   - backend-dashboard-v2.css `.bk-dash-pager`
 *   - phase2-portal-bundle.css `.rbac-page-pager`
 *
 * Adoption is opt-in: templates wrap pager markup in `.rmc-pagination` and
 * let this stylesheet take over visual styling. Existing fork stylesheets
 * are NOT deleted in this wave (cleanup goes through the retirement docket
 * after one full wave of adoption). The class names below are intentionally
 * scoped under `.rmc-pagination` to avoid collision.
 *
 * Token contract:
 *   - All color/border/typography routes through semantic tokens defined in
 *     `static/css/design-tokens.css` — no hex literals.
 *   - Hairlines via `var(--hairline)`; surfaces via `var(--surface-*)`;
 *     text via `var(--text-*)`. Cascade flips correctly on dark mode.
 *
 * Accessibility:
 *   - Active page emits `aria-current="page"` (markup contract); style here
 *     mirrors visual emphasis with no color-only signaling.
 *   - Focus ring uses platform-wide `var(--focus-ring)` so keyboard nav is
 *     visible across all four shells.
 *   - Min-height meets touch-target ≥44px guidance.
 *
 * Markup contract (templates must follow):
 *
 *   <nav class="rmc-pagination" aria-label="Pagination">
 *     <ul class="rmc-pagination__list">
 *       <li><a class="rmc-pagination__link" href="?page=1" aria-label="Page 1">1</a></li>
 *       <li><a class="rmc-pagination__link is-active" aria-current="page">2</a></li>
 *       <li><span class="rmc-pagination__gap" aria-hidden="true">…</span></li>
 *       <li><a class="rmc-pagination__link" href="?page=24">24</a></li>
 *     </ul>
 *     <div class="rmc-pagination__meta">
 *       <span class="rmc-pagination__count">Page 2 of 24 · 240 results</span>
 *       <form class="rmc-pagination__jumper">…</form>
 *       <label class="rmc-pagination__size-select">…</label>
 *     </div>
 *   </nav>
 */

.rmc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
  font: inherit;
  color: var(--text-primary);
}

.rmc-pagination__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rmc-pagination__list > li {
  display: inline-flex;
  align-items: stretch;
}

.rmc-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--motion-duration-fast, 140ms) var(--ease-out, ease),
    border-color var(--motion-duration-fast, 140ms) var(--ease-out, ease),
    color var(--motion-duration-fast, 140ms) var(--ease-out, ease);
}

.rmc-pagination__link:hover,
.rmc-pagination__link:focus-visible {
  background: var(--surface-elevated);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  outline: none;
}

.rmc-pagination__link:focus-visible {
  box-shadow: var(--focus-ring, 0 0 0 2px var(--text-secondary));
}

.rmc-pagination__link.is-active,
.rmc-pagination__link[aria-current="page"] {
  background: var(--surface-elevated);
  border-color: var(--text-primary);
  color: var(--text-primary);
  font-weight: 700;
  cursor: default;
}

.rmc-pagination__link.is-disabled,
.rmc-pagination__link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

.rmc-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 0.25rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.rmc-pagination__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.rmc-pagination__count {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 24rem;
  font-variant-numeric: tabular-nums;
}

.rmc-pagination__jumper {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

.rmc-pagination__jumper > label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.rmc-pagination__jumper input[type="number"] {
  inline-size: 4rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 0.375rem;
  background: var(--surface-bg);
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.rmc-pagination__jumper input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: var(--focus-ring, 0 0 0 2px var(--text-secondary));
}

.rmc-pagination__size-select {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.rmc-pagination__size-select select {
  min-height: 2.25rem;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 0.375rem;
  background: var(--surface-bg);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.rmc-pagination__size-select select:focus-visible {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: var(--focus-ring, 0 0 0 2px var(--text-secondary));
}

/* Compact variant — embeds inside dense tables or split-pane drawers. */
.rmc-pagination--compact {
  margin: 0.5rem 0;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.rmc-pagination--compact .rmc-pagination__link {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
}

/* Standalone "page X of Y · N results" badge — usable WITHOUT the full pager
 * markup, e.g. on infinite-scroll lists where the count is the only paging UI. */
.rmc-pagination-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-bg);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* horizontal-overflow-risk-allow: short-numeric-page-count-pill-content-bounded */
}

@media (prefers-reduced-motion: reduce) {
  .rmc-pagination__link {
    transition: none;
  }
}

/* ============================================================
 * v3.57.x adoption-wave additive aliasing — retire 4 forked pagers
 *
 * Rather than rewriting markup at every call-site OR deleting the
 * legacy fork stylesheets (both risky), we layer rmc-pagination
 * grammar onto the two markup families that exist in the wild:
 *
 *   (1) Bootstrap `<ul class="pagination">` / `.page-item` / `.page-link`
 *       — used by ~8 hand-rolled pager nodes across portal/marketing
 *         /compliance/people/schools list templates.
 *   (2) Django admin `.paginator` / `.paginator a` / `.this-page`
 *       — emitted by the django-unfold PyPI package's pagination
 *         partial (referenced from `templates/admin/change_list.html`
 *         via `{% include "unfold/helpers/pagination.html" %}`).
 *
 * The aliasing is purely additive — original Bootstrap + admin shell
 * rules continue to apply; rmc-pagination grammar wins on conflicting
 * properties because this stylesheet is loaded AFTER bootstrap and
 * admin-manager-shell per the v3.57.1 shell wiring. No markup edits
 * required for the visual layer to flip.
 *
 * Forks named in `docs/DEFERRED_v3_57_EXTERNAL.md` that were searched
 * for and NOT found in any real CSS rule or template markup (likely
 * already mass-purged before this wave): `.portal-page-pager`,
 * `.bk-dash-pager`, `.rbac-page-pager`. Catalog entry now stale; the
 * grammar header comment lists them historically only.
 *
 * DRF Redoc pagination chrome lives inside the bundled Redoc JS asset
 * served at `/api/v1/docs/`; it does NOT render through a Django
 * template, so there is no fork to retire — the OpenAPI schema view's
 * paging UI is intentionally vendored as-is.
 * ============================================================ */

/* (1) Bootstrap pagination markup → rmc-pagination grammar */
ul.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.pagination > .page-item {
  display: inline-flex;
  align-items: stretch;
}

ul.pagination > .page-item > .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--motion-duration-fast, 140ms) var(--ease-out, ease),
    border-color var(--motion-duration-fast, 140ms) var(--ease-out, ease),
    color var(--motion-duration-fast, 140ms) var(--ease-out, ease);
}

ul.pagination > .page-item > .page-link:hover,
ul.pagination > .page-item > .page-link:focus-visible {
  background: var(--surface-elevated);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  outline: none;
}

ul.pagination > .page-item > .page-link:focus-visible {
  box-shadow: var(--focus-ring, 0 0 0 2px var(--text-secondary));
}

ul.pagination > .page-item.active > .page-link,
ul.pagination > .page-item > .page-link[aria-current="page"] {
  background: var(--surface-elevated);
  border-color: var(--text-primary);
  color: var(--text-primary);
  font-weight: 700;
  cursor: default;
}

ul.pagination > .page-item.disabled > .page-link,
ul.pagination > .page-item > .page-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

/* (2) Django admin `.paginator` markup → rmc-pagination grammar.
 *
 * NOTE: `rmc-admin-mirror.css` already styles `.paginator` with the
 * cockpit chip variant (pill links). The rules below are deliberately
 * NOT property-conflicting with that mirror — they only add the
 * shared focus-ring + active-page emphasis + reduced-motion contract
 * so admin pagination behaves identically to portal pagination on
 * keyboard nav and disabled state, which the mirror does not cover. */
#changelist .paginator a:focus-visible,
.paginator a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--text-secondary));
}

#changelist .paginator a[aria-disabled="true"],
.paginator a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  ul.pagination > .page-item > .page-link {
    transition: none;
  }
}