refactor: convert admin panel to Tailwind CSS

- Convert admin layout, sidebar, and navigation to Tailwind classes
- Convert dashboard components (StatusCard, DiagnosticRow, etc.) to Tailwind
- Convert all ~48 admin page files from admin CSS classes to Tailwind
- Remove unused admin CSS from globals.css (973 → 712 lines)
- Convert developers page badges to Tailwind
- Remove <style jsx> block from OnlineUsersWidget

src/app/admin/layout.tsx

@@ -92,22 +92,29 @@ export default async function AdminLayout({ children }: { children: ReactNode })
   const initial = staff.username.charAt(0).toUpperCase();
 
   return (
-    <div className="admin">
-      <aside className="admin-sidebar">
-        <div className="admin-sidebar-head">
-          <span className="admin-avatar" aria-hidden>
+    <div className="grid grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)] gap-5 items-start">
+      <aside className="sticky top-4 self-start bg-[#2d2d44] text-[#e7e9f3] rounded-xl p-3.5 shadow-card max-h-[calc(100vh-2rem)] overflow-y-auto">
+        <div className="flex items-center gap-2.5 px-1.5 pb-3.5 border-b border-white/10 mb-2">
+          <span
+            className="flex-none w-[38px] h-[38px] rounded-lg grid place-items-center font-extrabold text-[#1a1a2e] bg-[var(--color-primary)]"
+            aria-hidden
+          >
             {initial}
           </span>
-          <div style={{ minWidth: 0 }}>
-            <div className="admin-sidebar-name">{staff.username}</div>
-            <span className="admin-rank-badge">rank {staff.rank}</span>
+          <div className="min-w-0">
+            <div className="font-bold text-sm leading-tight text-white truncate">{staff.username}</div>
+            <span className="inline-block mt-0.5 text-[0.66rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2 py-0.5">
+              rank {staff.rank}
+            </span>
           </div>
         </div>
 
-        <nav className="admin-nav">
+        <nav className="flex flex-col gap-0.5">
           {NAV_GROUPS.map((group) => (
-            <div key={group.label} className="admin-nav-group">
-              <span className="admin-nav-group-label">{group.label}</span>
+            <div key={group.label} className="mt-2">
+              <span className="block text-[0.64rem] font-bold uppercase tracking-widest text-[rgba(231,233,243,0.42)] px-2.5 pb-1">
+                {group.label}
+              </span>
               {group.items.map((item) => (
                 <AdminNavLink key={item.href} href={item.href} label={item.label} />
               ))}
@@ -116,10 +123,10 @@ export default async function AdminLayout({ children }: { children: ReactNode })
         </nav>
       </aside>
 
-      <div className="admin-content">
-        <header className="admin-topbar">
-          <h2>Housekeeping</h2>
-          <span className="muted" style={{ fontSize: "0.8rem" }}>
+      <div className="min-w-0">
+        <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-xl px-4 py-3 mb-4 shadow-card">
+          <h2 className="m-0 text-base font-extrabold">Housekeeping</h2>
+          <span className="muted text-[0.8rem]">
             Signed in as <strong>{staff.username}</strong>
           </span>
         </header>