feat(hosts): add hosts list page with filters, pagination and delete

Implements task #7. The Hosts page provides:
- Name/network/port/application filters (sentinel values instead of
  Option<T> to avoid server function serialization issues)
- Configurable page size (15 default, 25/50/100/All)
- Prev/next navigation with total host count
- Add host form with network selector
- Delete action per row

Sub-components (AddHostForm, FilterBar, PaginationBar, HostTable) each
call .into_any() to erase their concrete view types. This breaks the
deeply-nested generic type that caused "queries overflow the depth
limit!" without requiring an unbounded recursion_limit increase.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style/rust-ipam.css

@@ -515,8 +515,24 @@ tbody td {
   vertical-align: middle;
 }
 
-tbody td:last-child {
+/* Count columns (Hosts, Applications...) — right-aligned, muted color */
+th.col-count,
+td.col-count {
   text-align: right;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  width: 120px;
+}
+
+th.col-count {
+  color: var(--text-tertiary);
+}
+
+/* Actions column — right-aligned to match the button position */
+th.col-actions,
+td.col-actions {
+  text-align: right;
+  width: 100px;
 }
 
 /* ============================================================
@@ -716,3 +732,177 @@ tbody td:last-child {
 .not-found a:hover {
   text-decoration: underline;
 }
+
+/* ============================================================
+   TABLE UTILITIES — shared across pages
+   ============================================================ */
+
+/* Clickable link inside a table cell */
+.table-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.table-link:hover {
+  text-decoration: underline;
+}
+
+/* Monospace cell (IPs, CIDRs…) */
+.cell-mono {
+  font-family: var(--font-mono);
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+}
+
+/* ============================================================
+   FILTER BAR
+   ============================================================ */
+
+.filter-bar {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--size-md) var(--size-lg);
+  margin-bottom: var(--size-md);
+}
+
+.filter-bar__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--size-md);
+  align-items: end;
+}
+
+.filter-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xs);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* ============================================================
+   PAGINATION BAR
+   ============================================================ */
+
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--size-sm);
+  padding: var(--size-sm) 0;
+  margin-bottom: var(--size-sm);
+}
+
+.pagination-bar__info {
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+}
+
+.pagination-bar__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--size-md);
+}
+
+.pagination-per-page {
+  display: flex;
+  align-items: center;
+  gap: var(--size-xs);
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.pagination-per-page select {
+  width: auto;
+  padding: 4px 8px;
+  font-size: var(--font-sm);
+}
+
+.pagination-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--size-xs);
+}
+
+.pagination-nav button {
+  background: var(--bg-surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 4px 10px;
+  font-size: var(--font-base);
+  border-radius: var(--radius-sm);
+  min-width: 32px;
+}
+
+.pagination-nav button:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.pagination-nav button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.pagination-nav__label {
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  padding: 0 var(--size-xs);
+}
+
+/* ============================================================
+   HOSTS PAGE
+   ============================================================ */
+
+.hosts-page h1 {
+  margin-bottom: var(--size-lg);
+}
+
+.hosts-page .add-form {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--size-lg);
+  margin-bottom: var(--size-md);
+}
+
+.hosts-page .add-form h2 {
+  margin-bottom: var(--size-md);
+}
+
+.add-form__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--size-md);
+  align-items: end;
+}
+
+.add-form__fields button[type="submit"] {
+  align-self: end;
+}
+
+/* Delete button inside hosts table */
+.hosts-page td button {
+  background: transparent;
+  color: var(--danger);
+  border: 1px solid transparent;
+  font-size: var(--font-xs);
+  padding: 3px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.hosts-page td button:hover {
+  background: var(--danger-light);
+  border-color: var(--danger);
+}