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

@@ -121,7 +121,7 @@ export default async function AdminRadioPage() {
         Latest shouts, DJ applications and on-air schedules (25 most recent of each).
       </p>
 
-      <div className="admin-stats">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
         <StatusCard
           label="Pending applications"
@@ -138,7 +138,7 @@ export default async function AdminRadioPage() {
         />
       </div>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Recent Shouts ({shouts.length})</h2>
         {shouts.length === 0 ? (
           <p className="muted">No shouts to moderate.</p>
@@ -175,7 +175,7 @@ export default async function AdminRadioPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>DJ Applications ({applications.length})</h2>
         {applications.length === 0 ? (
           <p className="muted">No applications submitted.</p>
@@ -203,7 +203,7 @@ export default async function AdminRadioPage() {
                   <td>{a.musicStyle ?? '—'}</td>
                   <td>{a.discordUsername ?? '—'}</td>
                   <td>
-                    <span className={`admin-badge ${statusBadgeClass(a.status)}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
                       {a.status}
                     </span>
                   </td>
@@ -215,7 +215,7 @@ export default async function AdminRadioPage() {
         )}
       </section>
 
-      <section className="admin-section">
+      <section className="mt-6">
         <h2>Schedules ({schedules.length})</h2>
         {schedules.length === 0 ? (
           <p className="muted">No schedules configured.</p>
@@ -242,7 +242,7 @@ export default async function AdminRadioPage() {
                   <td>{formatTime(sc.endTime)}</td>
                   <td>{sc.showName ?? '—'}</td>
                   <td>
-                    <span className={`admin-badge ${sc.isActive ? 'ok' : 'danger'}`}>
+                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                       {sc.isActive ? 'active' : 'inactive'}
                     </span>
                   </td>