/* ============================================
   RenDS — Pagination Component
   ============================================
   Page navigation for lists/tables.
   CSS-only. No JS needed for styling.

   Semantic <nav> + links for accessibility.
   44px touch targets on all interactive elements.

   Usage (simple):
     <nav aria-label="Pagination" class="ren-pagination">
       <a href="?p=1" class="ren-pagination-prev" aria-label="Previous page">&lsaquo;</a>
       <a href="?p=1" class="ren-pagination-item">1</a>
       <a href="?p=2" class="ren-pagination-item" aria-current="page">2</a>
       <a href="?p=3" class="ren-pagination-item">3</a>
       <a href="?p=3" class="ren-pagination-next" aria-label="Next page">&rsaquo;</a>
     </nav>

   Usage (minimal — just prev/next):
     <nav aria-label="Pagination" class="ren-pagination ren-pagination-simple">
       <a href="?p=1" class="ren-pagination-prev">Previous</a>
       <span class="ren-pagination-info">Page 2 of 10</span>
       <a href="?p=3" class="ren-pagination-next">Next</a>
     </nav>
   ============================================ */

.ren-pagination {
  display: flex;
  align-items: center;
  gap: var(--ren-pagination-gap);
}

/* ─── Page items ─── */
.ren-pagination-item,
.ren-pagination-prev,
.ren-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ren-pagination-size);
  min-height: var(--ren-pagination-size);
  padding: var(--space-1) var(--space-2);
  font-size: var(--ren-pagination-font-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--ren-pagination-radius);
  border: var(--stroke-1) solid transparent;
  background-color: var(--ren-pagination-bg);
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    border-color var(--duration-tactile) var(--ease-enter);
  user-select: none;
}

.ren-pagination-item:hover,
.ren-pagination-prev:hover,
.ren-pagination-next:hover {
  background-color: var(--ren-pagination-hover-bg);
}

.ren-pagination-item:active,
.ren-pagination-prev:active,
.ren-pagination-next:active {
  background-color: var(--color-fill-hover);
}

.ren-pagination-item:focus-visible,
.ren-pagination-prev:focus-visible,
.ren-pagination-next:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Current page */
.ren-pagination-item[aria-current="page"] {
  background-color: var(--ren-pagination-active-bg);
  color: var(--ren-pagination-active-color);
  pointer-events: none;
}

/* Disabled prev/next */
.ren-pagination-prev[aria-disabled="true"],
.ren-pagination-next[aria-disabled="true"],
.ren-pagination-prev:disabled,
.ren-pagination-next:disabled {
  color: var(--color-disabled-text);
  pointer-events: none;
  opacity: 0.5;
}

/* Ellipsis */
.ren-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* ─── Simple variant (prev + info + next) ─── */
.ren-pagination-simple {
  gap: var(--space-2);
}

.ren-pagination-info {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 var(--space-2);
}

/* ─── Compact variant (smaller touch targets) ─── */
.ren-pagination-compact .ren-pagination-item,
.ren-pagination-compact .ren-pagination-prev,
.ren-pagination-compact .ren-pagination-next {
  min-width: var(--size-sm);
  min-height: var(--size-sm);
  padding: var(--space-1);
  font-size: var(--caption-size, var(--text-sm));
}

/* ─── Centered (for standalone pagination) ─── */
.ren-pagination-centered {
  justify-content: center;
}