BookingModal: move guest fields to right column; Theme: auto mode follows system prefers-color-scheme

src/contexts/ThemeContext.tsx

@@ -12,9 +12,8 @@ interface ThemeContextValue {
 
 const ThemeContext = createContext<ThemeContextValue | null>(null)
 
-function getAutoTheme(): Theme {
-  const h = new Date().getHours()
-  return h >= 7 && h < 22 ? 'light' : 'dark'
+function getSystemTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -26,14 +25,16 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     const stored = localStorage.getItem('hotelsync-theme') as ThemeMode | null
     if (!stored || stored === 'light') return 'light'
     if (stored === 'dark') return 'dark'
-    return getAutoTheme()
+    return getSystemTheme()
   })
 
   useEffect(() => {
     if (mode === 'auto') {
-      setTheme(getAutoTheme())
-      const interval = setInterval(() => setTheme(getAutoTheme()), 60_000)
-      return () => clearInterval(interval)
+      setTheme(getSystemTheme())
+      const mq = window.matchMedia('(prefers-color-scheme: dark)')
+      const handler = (e: MediaQueryListEvent) => setTheme(e.matches ? 'dark' : 'light')
+      mq.addEventListener('change', handler)
+      return () => mq.removeEventListener('change', handler)
     } else {
       setTheme(mode)
     }