feat: implement weather radar component and update water resource data records. before river

src/App.css

@@ -210,8 +210,13 @@
   color: var(--text-muted);
 }
 
-.kpi-trend.positive { color: var(--color-green); }
-.kpi-trend.negative { color: var(--color-red); }
+.kpi-trend.positive {
+  color: var(--color-green);
+}
+
+.kpi-trend.negative {
+  color: var(--color-red);
+}
 
 .chart-card {
   background-color: var(--bg-card);
@@ -330,19 +335,19 @@
   .mobile-only {
     display: flex !important;
   }
-  
+
   .desktop-only {
     display: none !important;
   }
-  
+
   .dashboard-container {
     flex-direction: column;
   }
-  
+
   .sidebar {
     display: none;
   }
-  
+
   .sidebar.mobile-open {
     display: flex;
     position: fixed;
@@ -351,108 +356,107 @@
     height: 100vh;
     z-index: 1000;
   }
-  
+
   .main-content {
     padding: 1rem;
     gap: 1rem;
   }
-  
+
   .topbar {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
   }
-  
+
   .topbar-mobile-header {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: space-between;
   }
-  
+
   .search-bar {
     width: 100%;
   }
-  
+
   .search-bar input {
     display: none;
   }
-  
+
   .search-bar {
     width: auto;
     background: transparent;
     border: none;
     padding: 0;
   }
-  
+
   .search-bar svg {
     margin: 0;
     font-size: 1.5rem;
     color: var(--text-main);
   }
-  
+
   .kpi-container {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-  
+
   .kpi-card {
     padding: 1rem;
   }
-  
+
   .kpi-value {
     font-size: 1.75rem;
   }
-  
+
   .kpi-subtitle {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.2rem;
   }
-  
+
   .chart-card {
     padding: 1rem;
   }
-  
+
   .chart-header {
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .chart-title {
     font-size: 1.1rem;
     line-height: 1.3;
   }
-  
+
   .chart-controls {
     width: 100%;
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .control-group {
     width: 100%;
   }
-  
+
   .button-group {
     width: 100%;
     justify-content: space-between;
   }
-  
+
   .control-btn {
     padding: 0.5rem;
     flex: 1;
     text-align: center;
   }
-  
+
   .chart-legend-container {
     flex-wrap: wrap;
     gap: 1rem !important;
     justify-content: flex-start !important;
   }
-  
-  .chart-legend-container > span {
+
+  .chart-legend-container>span {
     flex: 0 0 calc(50% - 0.5rem);
   }
-}
-
+}