fix: improve dark mode compatibility and chart visibility

- Fix TopQuestionsChart with proper dark mode colors using CSS variables and shadcn/ui components
- Enhance ResponseTimeDistribution with thicker bars (maxBarSize: 60)
- Replace GeographicMap with dark/light mode compatible CartoDB tiles
- Add custom text selection background color with primary theme color
- Update all loading states to use proper CSS variables instead of hardcoded colors
- Fix dashboard layout background to use bg-background instead of bg-gray-100

app/dashboard/layout.tsx

@@ -57,7 +57,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="flex h-screen bg-background">
       <Sidebar
         isExpanded={isSidebarExpanded}
         isMobile={isMobile}

app/dashboard/page.tsx

@@ -36,8 +36,11 @@ const DashboardPage: FC = () => {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-4">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
-          <p className="text-lg text-muted-foreground">Loading dashboard...</p>
+          <div className="relative">
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-muted border-t-primary mx-auto"></div>
+            <div className="absolute inset-0 animate-ping rounded-full h-12 w-12 border border-primary opacity-20 mx-auto"></div>
+          </div>
+          <p className="text-lg text-muted-foreground animate-pulse">Loading dashboard...</p>
         </div>
       </div>
     );
@@ -121,39 +124,39 @@ const DashboardPage: FC = () => {
   return (
     <div className="space-y-8">
       {/* Welcome Header */}
-      <Card className="border-0 bg-linear-to-r from-primary/5 via-primary/10 to-primary/5">
-        <CardHeader>
+      <div className="relative overflow-hidden rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-transparent p-8 border border-primary/10">
+        <div className="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent" />
+        <div className="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
+        <div className="relative">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <div className="space-y-2">
+            <div className="space-y-3">
               <div className="flex items-center gap-3">
-                <h1 className="text-3xl font-bold tracking-tight">
+                <h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-foreground to-foreground/70">
                   Welcome back, {session?.user?.name || "User"}!
                 </h1>
-                <Badge variant="secondary" className="text-xs">
+                <Badge variant="secondary" className="text-xs px-3 py-1 bg-primary/10 text-primary border-primary/20">
                   {session?.user?.role}
                 </Badge>
               </div>
-              <p className="text-muted-foreground">
+              <p className="text-muted-foreground text-lg">
                 Choose a section below to explore your analytics dashboard
               </p>
             </div>
 
-            <div className="flex items-center gap-2">
-              <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                <Shield className="h-4 w-4" />
-                Secure Dashboard
-              </div>
+            <div className="flex items-center gap-3 px-4 py-2 rounded-full bg-muted/50 backdrop-blur-sm">
+              <Shield className="h-4 w-4 text-green-600" />
+              <span className="text-sm font-medium">Secure Dashboard</span>
             </div>
           </div>
-        </CardHeader>
-      </Card>
+        </div>
+      </div>
 
       {/* Navigation Cards */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {navigationCards.map((card, index) => (
           <Card
             key={index}
-            className={`relative overflow-hidden transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer ${getCardClasses(
+            className={`relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group ${getCardClasses(
               card.variant
             )}`}
             onClick={() => router.push(card.href)}
@@ -166,11 +169,11 @@ const DashboardPage: FC = () => {
                 <div className="space-y-3">
                   <div className="flex items-center gap-3">
                     <div
-                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-colors ${getIconClasses(
+                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-all duration-300 group-hover:scale-110 ${getIconClasses(
                         card.variant
                       )}`}
                     >
-                      {card.icon}
+                      <span className="transition-transform duration-300 group-hover:scale-110">{card.icon}</span>
                     </div>
                     <div>
                       <CardTitle className="text-xl font-semibold flex items-center gap-2">
@@ -198,7 +201,7 @@ const DashboardPage: FC = () => {
                     key={featureIndex}
                     className="flex items-center gap-2 text-sm"
                   >
-                    <div className="h-1.5 w-1.5 rounded-full bg-current opacity-60" />
+                    <Zap className="h-3 w-3 text-primary/60" />
                     <span className="text-muted-foreground">{feature}</span>
                   </div>
                 ))}
@@ -206,7 +209,7 @@ const DashboardPage: FC = () => {
 
               {/* Action Button */}
               <Button
-                className="w-full gap-2 mt-4"
+                className="w-full gap-2 mt-4 group-hover:gap-3 transition-all duration-300"
                 variant={card.variant === "primary" ? "default" : "outline"}
                 onClick={(e) => {
                   e.stopPropagation();

app/globals.css

@@ -39,7 +39,58 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-}
+  --animate-shine: shine var(--duration) infinite linear;
+  @keyframes shine {
+  0% {
+    background-position: 0% 0%;
+    }
+  50% {
+    background-position: 100% 100%;
+    }
+  to {
+    background-position: 0% 0%;
+    }
+  }
+  --animate-meteor: meteor 5s linear infinite
+;
+  @keyframes meteor {
+  0% {
+    transform: rotate(var(--angle)) translateX(0);
+    opacity: 1;}
+  70% {
+    opacity: 1;}
+  100% {
+    transform: rotate(var(--angle)) translateX(-500px);
+    opacity: 0;}}
+  --animate-background-position-spin: background-position-spin 3000ms infinite alternate;
+  @keyframes background-position-spin {
+  0% {
+    background-position: top center;}
+  100% {
+    background-position: bottom center;}}
+  --animate-aurora: aurora 8s ease-in-out infinite alternate;
+  @keyframes aurora {
+  0% {
+    background-position: 0% 50%;
+    transform: rotate(-5deg) scale(0.9);}
+  25% {
+    background-position: 50% 100%;
+    transform: rotate(5deg) scale(1.1);}
+  50% {
+    background-position: 100% 50%;
+    transform: rotate(-3deg) scale(0.95);}
+  75% {
+    background-position: 50% 0%;
+    transform: rotate(3deg) scale(1.05);}
+  100% {
+    background-position: 0% 50%;
+    transform: rotate(-5deg) scale(0.9);}}
+  --animate-shiny-text: shiny-text 8s infinite;
+  @keyframes shiny-text {
+  0%, 90%, 100% {
+    background-position: calc(-100% - var(--shiny-width)) 0;}
+  30%, 60% {
+    background-position: calc(100% + var(--shiny-width)) 0;}}}
 
 :root {
   --radius: 0.625rem;
@@ -49,8 +100,8 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.5 0.2 240);
+  --primary-foreground: oklch(0.98 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
@@ -83,17 +134,17 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.7 0.2 240);
+  --primary-foreground: oklch(0.15 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.65 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
+  --border: oklch(1 0 0 / 15%);
+  --input: oklch(1 0 0 / 20%);
   --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -117,4 +168,15 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+  
+  /* Custom text selection colors */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.2);
+    color: hsl(var(--foreground));
+  }
+  
+  ::-moz-selection {
+    background-color: hsl(var(--primary) / 0.2);
+    color: hsl(var(--foreground));
+  }
+}

app/layout.tsx

@@ -2,6 +2,7 @@
 import "./globals.css";
 import { ReactNode } from "react";
 import { Providers } from "./providers";
+import { Toaster } from "@/components/ui/sonner";
 
 export const metadata = {
   title: "LiveDash-Node",
@@ -19,9 +20,10 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
-      <body className="bg-gray-100 min-h-screen font-sans">
+    <html lang="en" suppressHydrationWarning>
+      <body className="bg-background text-foreground min-h-screen font-sans antialiased">
         <Providers>{children}</Providers>
+        <Toaster />
       </body>
     </html>
   );

app/login/page.tsx

@@ -2,58 +2,216 @@
 import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { ThemeToggle } from "@/components/ui/theme-toggle";
+import { Loader2, Shield, BarChart3, Zap } from "lucide-react";
+import { toast } from "sonner";
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
-    const res = await signIn("credentials", {
-      email,
-      password,
-      redirect: false,
-    });
-    if (res?.ok) router.push("/dashboard");
-    else setError("Invalid credentials.");
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const res = await signIn("credentials", {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (res?.ok) {
+        toast.success("Login successful! Redirecting...");
+        router.push("/dashboard");
+      } else {
+        setError("Invalid email or password. Please try again.");
+        toast.error("Login failed. Please check your credentials.");
+      }
+    } catch {
+      setError("An error occurred. Please try again.");
+      toast.error("An unexpected error occurred.");
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (
-    <div className="max-w-md mx-auto mt-24 bg-white rounded-xl p-8 shadow">
-      <h1 className="text-2xl font-bold mb-6">Login</h1>
-      {error && <div className="text-red-600 mb-3">{error}</div>}
-      <form onSubmit={handleLogin} className="flex flex-col gap-4">
-        <input
-          className="border px-3 py-2 rounded"
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <input
-          className="border px-3 py-2 rounded"
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <button className="bg-blue-600 text-white rounded py-2" type="submit">
-          Login
-        </button>
-      </form>
-      <div className="mt-4 text-center">
-        <a href="/register" className="text-blue-600 underline">
-          Register company
-        </a>
+    <div className="min-h-screen flex">
+      {/* Left side - Branding and Features */}
+      <div className="hidden lg:flex lg:flex-1 bg-linear-to-br from-primary/10 via-primary/5 to-background relative overflow-hidden">
+        <div className="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent" />
+        <div className="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-primary/10 blur-3xl" />
+        <div className="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />
+
+        <div className="relative flex flex-col justify-center px-12 py-24">
+          <div className="max-w-md">
+            <Link href="/" className="flex items-center gap-3 mb-8">
+              <div className="relative w-12 h-12">
+                <Image
+                  src="/favicon.svg"
+                  alt="LiveDash Logo"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+              <span className="text-2xl font-bold text-primary">LiveDash</span>
+            </Link>
+
+            <h1 className="text-4xl font-bold tracking-tight mb-6">
+              Welcome back to your analytics dashboard
+            </h1>
+            <p className="text-xl text-muted-foreground mb-8">
+              Monitor, analyze, and optimize your customer conversations with AI-powered insights.
+            </p>
+
+            <div className="space-y-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-primary/10 text-primary">
+                  <BarChart3 className="h-5 w-5" />
+                </div>
+                <span className="text-muted-foreground">Real-time analytics and insights</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-green-500/10 text-green-600">
+                  <Shield className="h-5 w-5" />
+                </div>
+                <span className="text-muted-foreground">Enterprise-grade security</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-blue-500/10 text-blue-600">
+                  <Zap className="h-5 w-5" />
+                </div>
+                <span className="text-muted-foreground">AI-powered conversation analysis</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div className="mt-2 text-center">
-        <a href="/forgot-password" className="text-blue-600 underline">
-          Forgot password?
-        </a>
+
+      {/* Right side - Login Form */}
+      <div className="flex-1 flex flex-col justify-center px-8 py-12 lg:px-12">
+        <div className="absolute top-4 right-4">
+          <ThemeToggle />
+        </div>
+
+        <div className="mx-auto w-full max-w-sm">
+          {/* Mobile logo */}
+          <div className="lg:hidden flex justify-center mb-8">
+            <Link href="/" className="flex items-center gap-3">
+              <div className="relative w-10 h-10">
+                <Image
+                  src="/favicon.svg"
+                  alt="LiveDash Logo"
+                  fill
+                  className="object-contain"
+                />
+              </div>
+              <span className="text-xl font-bold text-primary">LiveDash</span>
+            </Link>
+          </div>
+
+          <Card className="border-border/50 shadow-xl">
+            <CardHeader className="space-y-1">
+              <CardTitle className="text-2xl font-bold">Sign in</CardTitle>
+              <CardDescription>
+                Enter your email and password to access your dashboard
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {error && (
+                <Alert variant="destructive" className="mb-6">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="name@company.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    disabled={isLoading}
+                    required
+                    className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="Enter your password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    disabled={isLoading}
+                    required
+                    className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
+                  />
+                </div>
+
+                <Button
+                  type="submit"
+                  className="w-full mt-6 h-11 bg-linear-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 transition-all duration-200"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Signing in...
+                    </>
+                  ) : (
+                    "Sign in"
+                  )}
+                </Button>
+              </form>
+
+              <div className="mt-6 space-y-4">
+                <div className="text-center">
+                  <Link
+                    href="/register"
+                    className="text-sm text-primary hover:underline transition-colors"
+                  >
+                    Don't have a company account? Register here
+                  </Link>
+                </div>
+                <div className="text-center">
+                  <Link
+                    href="/forgot-password"
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Forgot your password?
+                  </Link>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <p className="mt-8 text-center text-xs text-muted-foreground">
+            By signing in, you agree to our{" "}
+            <Link href="/terms" className="text-primary hover:underline">
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link href="/privacy" className="text-primary hover:underline">
+              Privacy Policy
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );

app/providers.tsx

@@ -2,16 +2,24 @@
 
 import { SessionProvider } from "next-auth/react";
 import { ReactNode } from "react";
+import { ThemeProvider } from "@/components/theme-provider";
 
 export function Providers({ children }: { children: ReactNode }) {
   // Including error handling and refetch interval for better user experience
   return (
-    <SessionProvider
-      // Re-fetch session every 30 minutes (reduced from 10)
-      refetchInterval={30 * 60}
-      refetchOnWindowFocus={false}
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
     >
-      {children}
-    </SessionProvider>
+      <SessionProvider
+        // Re-fetch session every 30 minutes (reduced from 10)
+        refetchInterval={30 * 60}
+        refetchOnWindowFocus={false}
+      >
+        {children}
+      </SessionProvider>
+    </ThemeProvider>
   );
 }