/* ══ The pager under a table ═══════════════════════════════════════════════
   Sits inside the table's own card, below the last row, so it reads as part of
   the table rather than as a separate control floating beneath it.           */

.table-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  /* The rule is the seam between the last row and the controls. Rows already
     draw their own bottom border, so this only shows where the table ends. */
  border-top: 1px solid var(--color-line);
}

/* On a narrow window the count and the buttons stop fitting side by side.
   Centred rather than left-aligned once wrapped, so the two lines read as one
   block instead of a ragged edge. */
@media (max-width: 560px) {
  .table-pager {
    justify-content: center;
    flex-wrap: wrap;
  }
}