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/GeographicMap.tsx

@@ -63,7 +63,7 @@ const DEFAULT_COORDINATES = getCountryCoordinates();
 const Map = dynamic(() => import("./Map"), {
   ssr: false,
   loading: () => (
-    <div className="h-full w-full bg-gray-100 flex items-center justify-center">
+    <div className="h-full w-full bg-muted flex items-center justify-center text-muted-foreground">
       Loading map...
     </div>
   ),
@@ -151,7 +151,7 @@ export default function GeographicMap({
   // Show loading state during SSR or until client-side rendering takes over
   if (!isClient) {
     return (
-      <div className="h-full w-full bg-gray-100 flex items-center justify-center">
+      <div className="h-full w-full bg-muted flex items-center justify-center text-muted-foreground">
         Loading map...
       </div>
     );
@@ -162,7 +162,7 @@ export default function GeographicMap({
       {countryData.length > 0 ? (
         <Map countryData={countryData} maxCount={maxCount} />
       ) : (
-        <div className="h-full w-full bg-gray-100 flex items-center justify-center text-gray-500">
+        <div className="h-full w-full bg-muted flex items-center justify-center text-muted-foreground">
           No geographic data available
         </div>
       )}