Restyle to light content theme with Lucide icons

- index.css: light body (#f4f5f7), white cards, sidebar stays dark navy
- AppIcon.tsx: Lucide icon lookup component for app tiles and nav
- Sidebar.tsx: Lucide nav icons (LayoutGrid, Users, Activity, LogOut)
- Dashboard.tsx: white cards with shadows, coloured Lucide app icons
- AdminMonitor.tsx: light theme throughout, Lucide tab icons,
  better status colours for light backgrounds

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/AppIcon.tsx

@@ -0,0 +1,27 @@
+import {
+  ClipboardList, ChefHat, Banknote, BedDouble, TrendingUp, Tag,
+  LayoutGrid, Users, Activity, Home, ScrollText, RefreshCw,
+  ArrowUpCircle, Wifi, Terminal, Settings, Building2,
+} from 'lucide-react'
+import type { LucideProps } from 'lucide-react'
+
+type IconComponent = React.ComponentType<LucideProps>
+
+const iconMap: Record<string, IconComponent> = {
+  ClipboardList, ChefHat, Banknote, BedDouble, TrendingUp, Tag,
+  LayoutGrid, Users, Activity, Home, ScrollText, RefreshCw,
+  ArrowUpCircle, Wifi, Terminal, Settings, Building2,
+}
+
+interface Props {
+  name: string
+  size?: number
+  color?: string
+  strokeWidth?: number
+}
+
+export function AppIcon({ name, size = 20, color, strokeWidth = 1.75 }: Props) {
+  const Icon = iconMap[name]
+  if (!Icon) return null
+  return <Icon size={size} color={color} strokeWidth={strokeWidth} />
+}

src/components/Sidebar.tsx

@@ -1,4 +1,6 @@
 import { NavLink, useNavigate } from 'react-router-dom'
+import { LayoutGrid, Users, Activity, LogOut } from 'lucide-react'
+import { AppIcon } from './AppIcon'
 import type { User } from '../types'
 
 interface Props { user: User; activeSlug?: string }
@@ -19,22 +21,23 @@ export function Sidebar({ user, activeSlug }: Props) {
       position: 'sticky', top: 0,
     }}>
       <div style={{ padding: '1.25rem 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }}>
-        <div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.05em' }}>
+        <div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.06em' }}>
           MANAGE
         </div>
-        <div style={{ color: 'var(--text-muted)', fontSize: '0.75rem', marginTop: '0.2rem' }}>
+        <div style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>
           {import.meta.env.VITE_HOTEL_NAME}
         </div>
       </div>
 
       <nav style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0' }}>
         <NavLink to="/" end style={({ isActive }) => navItem(isActive && !activeSlug)}>
-          🏠 Dashboard
+          <LayoutGrid size={15} strokeWidth={1.75} />
+          Dashboard
         </NavLink>
 
         {user.apps.length > 0 && (
-          <div style={{ padding: '0.5rem 1rem 0.25rem', fontSize: '0.65rem',
-            color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+          <div style={{ padding: '0.6rem 1rem 0.2rem', fontSize: '0.62rem',
+            color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
             Apps
           </div>
         )}
@@ -42,35 +45,39 @@ export function Sidebar({ user, activeSlug }: Props) {
         {user.apps.map(app => (
           <NavLink key={app.slug} to={`/app/${app.slug}`}
             style={({ isActive }) => navItem(isActive)}>
-            <span style={{ fontSize: '1rem' }}>{app.icon}</span>
-            <span style={{ marginLeft: '0.5rem' }}>{app.name}</span>
+            <AppIcon name={app.icon} size={15} strokeWidth={1.75} />
+            <span>{app.name}</span>
           </NavLink>
         ))}
 
         {user.is_admin && (
           <>
-            <div style={{ padding: '0.5rem 1rem 0.25rem', fontSize: '0.65rem',
-              color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em',
+            <div style={{ padding: '0.6rem 1rem 0.2rem', fontSize: '0.62rem',
+              color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em',
               marginTop: '0.5rem' }}>
               Admin
             </div>
             <NavLink to="/admin/users" style={({ isActive }) => navItem(isActive)}>
-              👥 Users
+              <Users size={15} strokeWidth={1.75} />
+              Users
             </NavLink>
             <NavLink to="/admin/monitor" style={({ isActive }) => navItem(isActive)}>
-              📡 Monitor
+              <Activity size={15} strokeWidth={1.75} />
+              Monitor
             </NavLink>
           </>
         )}
       </nav>
 
       <div style={{ padding: '0.875rem 1rem', borderTop: '1px solid var(--surface-2)' }}>
-        <div style={{ fontSize: '0.8rem', fontWeight: 600, marginBottom: '0.1rem' }}>{user.name}</div>
+        <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text)', marginBottom: '0.1rem' }}>{user.name}</div>
         <div style={{ fontSize: '0.7rem', color: 'var(--text-muted)', marginBottom: '0.6rem' }}>{user.email}</div>
         <button onClick={logout} style={{
           background: 'none', border: '1px solid var(--surface-2)', borderRadius: '5px',
           color: 'var(--text-muted)', padding: '0.3rem 0.75rem', fontSize: '0.75rem', width: '100%',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
         }}>
+          <LogOut size={13} strokeWidth={1.75} />
           Sign out
         </button>
       </div>
@@ -80,10 +87,11 @@ export function Sidebar({ user, activeSlug }: Props) {
 
 function navItem(active: boolean): React.CSSProperties {
   return {
-    display: 'flex', alignItems: 'center', padding: '0.55rem 1rem',
-    fontSize: '0.875rem', color: active ? 'var(--gold)' : 'var(--text-muted)',
+    display: 'flex', alignItems: 'center', gap: '0.6rem',
+    padding: '0.5rem 1rem',
+    fontSize: '0.85rem', color: active ? 'var(--gold)' : 'var(--text-muted)',
     background: active ? 'var(--surface)' : 'transparent',
-    borderLeft: active ? '3px solid var(--gold)' : '3px solid transparent',
+    borderLeft: active ? '2px solid var(--gold)' : '2px solid transparent',
     transition: 'color 0.1s, background 0.1s',
   }
 }