/*
 * PAGINATION — rodapé de listagem, DESTACADO da tabela (não grudado): fica
 * abaixo, separado por espaço. À esquerda, seletor de itens por página +
 * contagem; à direita, navegação por páginas com setas (‹ ›).
 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

/* Grupo da esquerda: seletor de quantidade + contagem. */
.pagination__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.pagination__perpage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Select compacto (sobrescreve a largura cheia do select global). */
.pagination__perpage select {
  width: auto;
  padding: var(--space-1) var(--space-2);
}

.pagination__info {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Botão de página e botão de seta compartilham a forma. */
.pagination__page,
.pagination__nav {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination__page:hover,
.pagination__nav:not(:disabled):hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}

.pagination__page--active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  cursor: default;
}

.pagination__nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reticências entre blocos de páginas (ex.: 1 … 5 6 7 … 20). */
.pagination__gap {
  min-width: 1.5rem;
  text-align: center;
  color: var(--color-text-subtle);
}