initial commit

src/components/tablePager.css

@@ -0,0 +1,24 @@
+/* ══ 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;
+  }
+}