Adapt + improve all admin pages to the new design system

Swept the whole housekeeping panel (34 pages) so it's a consistent,
improved adaptation of the old Filament admin rather than bare tables:
- Live status tiles (StatusCard) summarising each page's data — counts
  and stateful metrics (users online, active/permanent bans, pending
  applications, settings, radio shouts, etc.).
- Status pills (admin-badge ok/danger) replacing ad-hoc text: online/
  offline, account/ip ban types, permanent vs timed, command OK/FAIL,
  alert severity & read/new, enabled/disabled, open/closed.
- Sections wrapped in .admin-section with h2 headers; redundant inline
  table styling removed (the global .admin layer handles it).
- alerts/logs/emulator hand-built as the reference pattern; the rest
  via parallel agents that read the schema and preserved every server
  action, query and field name.

Behaviour unchanged (same actions, queries, field names). Verified in a
real authed admin session (prod, amx_test): pages render with live data
(Users tiles show 7 real accounts + online/offline pills), no errors.
tsc 0, vitest 49/49, next build 0.

src/app/admin/applications/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { dismissApplication } from "@/actions/admin-applications";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -13,7 +14,7 @@ type ApplicationRow = {
 };
 
 function formatDate(d: Date | null): string {
-  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
+  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
 }
 
 export default async function AdminApplications() {
@@ -45,47 +46,62 @@ export default async function AdminApplications() {
   return (
     <main>
       <h1>Staff Applications</h1>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        Pending applications from players requesting a staff rank.
+      </p>
 
-      {applications.length === 0 ? (
-        <p className="muted">No pending applications.</p>
-      ) : (
-        <div className="grid cols-2">
-          {applications.map((a) => {
-            const username = userMap.get(a.userId);
-            return (
-              <article key={String(a.id)} className="card">
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "baseline",
-                    gap: "0.5rem",
-                  }}
-                >
-                  <h3 style={{ margin: "0 0 0.25rem" }}>
-                    {username ? (
-                      <Link href={`/admin/users/${a.userId}`}>{username}</Link>
-                    ) : (
-                      <>User #{a.userId}</>
-                    )}
-                  </h3>
-                  <span className="muted">Rank {a.rankId}</span>
-                </div>
-                <p className="muted" style={{ marginTop: 0 }}>
-                  {formatDate(a.createdAt)}
-                </p>
-                <p style={{ whiteSpace: "pre-wrap", margin: "0 0 0.75rem" }}>{a.content}</p>
-                <form action={dismissApplication}>
-                  <input type="hidden" name="id" value={String(a.id)} />
-                  <button type="submit" className="btn btn-danger">
-                    Dismiss
-                  </button>
-                </form>
-              </article>
-            );
-          })}
-        </div>
-      )}
+      <div className="admin-stats">
+        <StatusCard
+          label="Pending applications"
+          value={applications.length}
+          state={applications.length > 0 ? "warn" : "ok"}
+          icon="📨"
+        />
+      </div>
+
+      <section className="admin-section">
+        <h2>Applications ({applications.length})</h2>
+        {applications.length === 0 ? (
+          <p className="muted">No pending applications.</p>
+        ) : (
+          <div className="grid cols-2">
+            {applications.map((a) => {
+              const username = userMap.get(a.userId);
+              return (
+                <article key={String(a.id)} className="card">
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "baseline",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <h3 style={{ margin: "0 0 0.25rem" }}>
+                      {username ? (
+                        <Link href={`/admin/users/${a.userId}`}>{username}</Link>
+                      ) : (
+                        <>User #{a.userId}</>
+                      )}
+                    </h3>
+                    <span className="admin-badge">Rank {a.rankId}</span>
+                  </div>
+                  <p className="muted" style={{ marginTop: 0 }}>
+                    {formatDate(a.createdAt)}
+                  </p>
+                  <p style={{ whiteSpace: "pre-wrap", margin: "0 0 0.75rem" }}>{a.content}</p>
+                  <form action={dismissApplication}>
+                    <input type="hidden" name="id" value={String(a.id)} />
+                    <button type="submit" className="btn btn-danger">
+                      Dismiss
+                    </button>
+                  </form>
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </section>
     </main>
   );
 }