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

components/TopQuestionsChart.tsx

@@ -2,6 +2,9 @@
 
 import React from "react";
 import { TopQuestion } from "../lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
 
 interface TopQuestionsChartProps {
   data: TopQuestion[];
@@ -14,12 +17,16 @@ export default function TopQuestionsChart({
 }: TopQuestionsChartProps) {
   if (!data || data.length === 0) {
     return (
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
-        <div className="text-center py-8 text-gray-500">
-          No questions data available
-        </div>
-      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-8 text-muted-foreground">
+            No questions data available
+          </div>
+        </CardContent>
+      </Card>
     );
   }
 
@@ -27,52 +34,55 @@ export default function TopQuestionsChart({
   const maxCount = Math.max(...data.map((q) => q.count));
 
   return (
-    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {data.map((question, index) => {
+            const percentage =
+              maxCount > 0 ? (question.count / maxCount) * 100 : 0;
 
-      <div className="space-y-4">
-        {data.map((question, index) => {
-          const percentage =
-            maxCount > 0 ? (question.count / maxCount) * 100 : 0;
+            return (
+              <div key={index} className="relative pl-8">
+                {/* Question text */}
+                <div className="flex justify-between items-start mb-2">
+                  <p className="text-sm font-medium leading-tight pr-4 flex-1 text-foreground">
+                    {question.question}
+                  </p>
+                  <Badge variant="secondary" className="whitespace-nowrap">
+                    {question.count}
+                  </Badge>
+                </div>
 
-          return (
-            <div key={index} className="relative">
-              {/* Question text */}
-              <div className="flex justify-between items-start mb-2">
-                <p className="text-sm text-gray-700 font-medium leading-tight pr-4 flex-1">
-                  {question.question}
-                </p>
-                <span className="text-sm font-semibold text-gray-900 bg-gray-100 px-2 py-1 rounded-md whitespace-nowrap">
-                  {question.count}
-                </span>
+                {/* Progress bar */}
+                <div className="w-full bg-muted rounded-full h-2">
+                  <div
+                    className="bg-primary h-2 rounded-full transition-all duration-300 ease-in-out"
+                    style={{ width: `${percentage}%` }}
+                  />
+                </div>
+
+                {/* Rank indicator */}
+                <div className="absolute -left-1 top-0 w-6 h-6 bg-primary text-primary-foreground text-xs font-bold rounded-full flex items-center justify-center">
+                  {index + 1}
+                </div>
               </div>
+            );
+          })}
+        </div>
 
-              {/* Progress bar */}
-              <div className="w-full bg-gray-200 rounded-full h-2">
-                <div
-                  className="bg-blue-600 h-2 rounded-full transition-all duration-300 ease-in-out"
-                  style={{ width: `${percentage}%` }}
-                />
-              </div>
+        <Separator className="my-6" />
 
-              {/* Rank indicator */}
-              <div className="absolute -left-2 top-0 w-6 h-6 bg-blue-600 text-white text-xs font-bold rounded-full flex items-center justify-center">
-                {index + 1}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Summary */}
-      <div className="mt-6 pt-4 border-t border-gray-200">
-        <div className="flex justify-between text-sm text-gray-600">
+        {/* Summary */}
+        <div className="flex justify-between text-sm text-muted-foreground">
           <span>Total questions analyzed</span>
-          <span className="font-medium">
+          <span className="font-medium text-foreground">
             {data.reduce((sum, q) => sum + q.count, 0)}
           </span>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }