Merge caitlin/CRM_ENVR: AI chat ref+health, tips panel, cyberpunk theme, app-shell/bg improvements

src/components/settings/theme-settings.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { cn } from "@/lib/utils"
-import { Sun, Moon, Monitor, Shield } from "lucide-react"
+import { Sun, Moon, Monitor, Palette, Shield } from "lucide-react"
 import { useWebsiteTheme } from "@/providers/website-theme-provider"
 
 const COLOR_THEME_KEY = "crm-color-theme"
@@ -31,7 +31,7 @@ const themeOptions = [
 ]
 
 const backgroundOptions = [
-  { value: "default", label: "None", icon: Shield, color: "bg-gray-400", ring: "ring-gray-400", desc: "No background theme" },
+  { value: "default", label: "Default", icon: Shield, color: "bg-zinc-500", ring: "ring-zinc-500", desc: "Standard CRM appearance" },
   { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
   { value: "cosmic", label: "Cosmic", icon: Shield, color: "bg-gradient-to-r from-purple-500 to-green-500", ring: "ring-purple-500", desc: "Deep space with purple nebula and cyan accents" },
   { value: "cyberpunk", label: "Cyberpunk", icon: Shield, color: "bg-gradient-to-r from-pink-500 to-cyan-400", ring: "ring-pink-500", desc: "Dark retro-futuristic synthwave aesthetic" },
@@ -46,12 +46,12 @@ function getStoredColorTheme(): string {
 }
 
 function applyColorTheme(theme: string) {
-  document.documentElement.className = document.documentElement.className
-    .replace(/\b(default|ocean|forest|sunset|midnight|rose|amber|violet|slate|ruby)\b/g, "")
-    .trim()
+  const colorThemes = ["default","ocean","forest","sunset","midnight","rose","amber","violet","slate","ruby"]
+  const classes = document.documentElement.className.split(" ").filter(c => !colorThemes.includes(c))
   if (theme !== "default") {
-    document.documentElement.classList.add(theme)
+    classes.push(theme)
   }
+  document.documentElement.className = classes.join(" ").trim()
   localStorage.setItem(COLOR_THEME_KEY, theme)
 }