Fix main page horizontal scroll caused by Leaflet z-index override

The previous fix overrode .leaflet-pane z-index to 1, which broke
Leaflet's internal pane stacking (tiles, markers, popups need
z-indices 200-700). This caused the map to render incorrectly and
push content far beyond the viewport width.

Fix: removed the z-index override on individual panes. Instead,
set z-index:0 on the .leaflet-container itself to keep the entire
map below modals without breaking internal layout. Added overflow-
hidden on the map wrapper div for extra safety.

Author: OliTamrat

src/app/globals.css

@@ -249,15 +249,10 @@ html.light .metric-card:hover {
   animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
 }
 
-/* Ensure Leaflet map doesn't overlap modals */
-.leaflet-pane,
-.leaflet-top,
-.leaflet-bottom,
-.leaflet-control {
-  z-index: 1 !important;
-}
-.leaflet-popup-pane {
-  z-index: 2 !important;
+/* Contain Leaflet map within its parent — prevent overflow and z-index conflicts */
+.leaflet-container {
+  z-index: 0;
+  position: relative;
 }
 
 /* Water flow animation */

src/app/page.tsx

@@ -140,7 +140,7 @@ export default function Dashboard() {
                 <span className={`text-xs ${isDark ? "text-[#E5E7EB]" : "text-[#6B7280]"}`}>{t("section.map_network")}</span>
               </div>
             </div>
-            <div className="h-[250px] sm:h-[350px] md:h-[550px]" aria-label="Interactive watershed map">
+            <div className="h-[250px] sm:h-[350px] md:h-[550px] overflow-hidden rounded-2xl" aria-label="Interactive watershed map">
               <DCMap
                 onStationSelect={setSelectedStation}
                 selectedStation={selectedStation}