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/page.tsx

@@ -52,7 +52,7 @@ export default async function AdminDashboard() {
     <main>
       <h1>Dashboard</h1>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
           label="Players online"
           value={online}
@@ -75,44 +75,40 @@ export default async function AdminDashboard() {
         />
       </div>
 
-      <section className="admin-section">
-        <h2 style={{ margin: 0 }}>Users by rank</h2>
+      <section className="mt-6">
+        <h2 className="m-0 text-lg">Users by rank</h2>
         {rankCounts.length === 0 ? (
-          <p className="muted" style={{ marginTop: "0.7rem" }}>
+          <p className="muted mt-3">
             {dbOk ? "No accounts to break down yet." : "DB unavailable."}
           </p>
         ) : (
-          <div style={{ display: "grid", gap: "0.5rem", marginTop: "0.8rem" }}>
+          <div className="grid gap-2 mt-3">
             {rankCounts.map((r) => {
               const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
               return (
                 <div
                   key={r.rank}
-                  style={{ display: "grid", gridTemplateColumns: "5.5rem 1fr 3rem", alignItems: "center", gap: "0.6rem" }}
+                  className="grid items-center gap-2.5"
+                  style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
                 >
-                  <span className="muted" style={{ fontSize: "0.82rem", whiteSpace: "nowrap" }}>
+                  <span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
                     Rank {r.rank}
                   </span>
                   <div
-                    style={{
-                      background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
-                      borderRadius: "var(--radius-sm)",
-                      height: "0.85rem",
-                      overflow: "hidden",
-                    }}
+                    className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
+                    style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
                     role="img"
                     aria-label={`Rank ${r.rank}: ${r.count} accounts`}
                   >
                     <div
+                      className="h-full rounded-[var(--radius-sm)]"
                       style={{
                         width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
-                        height: "100%",
                         background: "var(--color-primary, #eeb425)",
-                        borderRadius: "var(--radius-sm)",
                       }}
                     />
                   </div>
-                  <strong style={{ fontSize: "0.85rem", textAlign: "right" }}>{r.count}</strong>
+                  <strong className="text-[0.85rem] text-right">{r.count}</strong>
                 </div>
               );
             })}
@@ -120,17 +116,17 @@ export default async function AdminDashboard() {
         )}
       </section>
 
-      <section className="admin-section">
-        <div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
-          <h2 style={{ margin: 0 }}>Recent staff activity</h2>
-          <Link href="/admin/commandocentrum" className="muted" style={{ fontSize: "0.82rem" }}>
+      <section className="mt-6">
+        <div className="flex items-baseline gap-3">
+          <h2 className="m-0 text-lg">Recent staff activity</h2>
+          <Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
             View all →
           </Link>
         </div>
         {activity.length === 0 ? (
-          <p className="muted">No staff activity logged yet.</p>
+          <p className="muted mt-3">No staff activity logged yet.</p>
         ) : (
-          <table style={{ marginTop: "0.7rem" }}>
+          <table className="mt-3">
             <thead>
               <tr>
                 <th>When</th>
@@ -142,12 +138,14 @@ export default async function AdminDashboard() {
             <tbody>
               {activity.map((a) => (
                 <tr key={String(a.id)}>
-                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                  <td className="muted whitespace-nowrap">
                     {fromDate(a.createdAt)}
                   </td>
                   <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
                   <td>
-                    <span className="admin-badge">{a.action}</span>
+                    <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
+                      {a.action}
+                    </span>
                   </td>
                   <td>{a.description}</td>
                 </tr>