/* ==================== TABLE FOOTER (List Page Pattern, Sep 2026) ====================
 * Rendered by templates/includes/_pagination.html beneath every paginated
 * list table: result count left, elided page numbers right. Always present —
 * a single page still reads "Showing 1 to 20 of 20 results".
 * Spec: docs/superpowers/specs/2026-09-05-list-page-pattern-design.md §7 */

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--pk-gray-100);
}

.table-footer-summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--pk-gray-500); /* on the white card, not the page ground */
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pagination-btn {
  font-family: var(--font-sans);
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--pk-gray-600);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.pagination-btn:hover {
  background: var(--pk-gray-100);
}

.pagination-btn[aria-current="page"] {
  background: var(--pk-gray-900);
  color: var(--pk-white);
  border-color: var(--pk-gray-900);
}

.pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-gray-400);
  font-size: var(--text-sm);
}