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/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>
   );