Convert admin pages to new Tailwind design pattern

- Replace 'card' class with 'admin-card' (gradient cards, dark mode support)
- Replace 'muted' class with consistent Tailwind muted states
- Standardize page headers with gradient backgrounds and Lucide icons
- Convert all inline styles to Tailwind classes
- Add admin-page CSS helpers (admin-card, admin-filter-bar, admin-section-title)
- Apply pattern to all 42 admin pages (was only 6 before)
- Zero TypeScript errors, production builds successfully

Co-authored-by: openhands <[email protected]>

src/app/admin/calendar/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
+import { Calendar } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -57,10 +58,15 @@ export default async function AdminCalendar() {
 
   return (
     <main>
-      <h1>Calendar campaigns</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.
-      </p>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Calendar size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Calendar campaigns</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.</p>
+        </div>
+      </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
@@ -74,7 +80,7 @@ export default async function AdminCalendar() {
       </div>
 
       {campaigns.length === 0 ? (
-        <p className="muted">No calendar campaigns found.</p>
+        <div className="admin-empty">No calendar campaigns found.</div>
       ) : (
         <div className="grid cols-3">
           {campaigns.map((c) => {
@@ -84,8 +90,7 @@ export default async function AdminCalendar() {
               <Link
                 key={c.id}
                 href={`/admin/calendar/${c.id}`}
-                className="card hover article"
-                style={{ color: "inherit" }}
+                className="admin-card hover article"
               >
                 {c.image ? (
                   // eslint-disable-next-line @next/next/no-img-element
@@ -94,25 +99,17 @@ export default async function AdminCalendar() {
                   <div className="article-img" />
                 )}
                 <div className="body">
-                  <div
-                    style={{
-                      display: "flex",
-                      gap: "0.5rem",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      margin: "0 0 0.35rem",
-                    }}
-                  >
-                    <h3 style={{ margin: 0 }}>{c.name || `Campaign #${c.id}`}</h3>
+                  <div className="flex items-center justify-between gap-2 mb-1">
+                    <h3 className="m-0">{c.name || `Campaign #${c.id}`}</h3>
                     <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                       {enabled ? "enabled" : "disabled"}
                     </span>
                   </div>
-                  <p className="muted" style={{ margin: 0 }}>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
                     #{c.id} · {c.totalDays} day{c.totalDays === 1 ? "" : "s"} · {count} reward
                     {count === 1 ? "" : "s"}
                   </p>
-                  <p className="muted" style={{ margin: "0.35rem 0 0" }}>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                     Starts {fmtDate(c.startTimestamp)}
                     {c.lockExpired === "1" ? " · Locks expired" : ""}
                   </p>