refactor: Replaced individual value boxes with a unified card for station information display in the data tab header.

server.R

@@ -870,7 +870,7 @@ server <- function(input, output, session) {
         }
     )
 
-    # Data Tab Header
+    # Data Tab Header - Info Callout Card
     output$station_info_header <- renderUI({
         id <- current_station_id()
         if (is.null(id)) {
@@ -896,37 +896,47 @@ server <- function(input, output, session) {
             dates_text <- paste(date_range[1], "to", date_range[2])
         }
 
-        layout_columns(
-            fill = FALSE,
-            value_box(
-                title = "Station",
-                value = span(s_name, style = "font-size: 1.2rem; font-weight: 500;"),
-                p(paste("ID:", id)),
-                theme = "primary"
-            ),
-            value_box(
-                title = "State / Location",
-                value = span(s_state, style = "font-size: 1.2rem; font-weight: 500;"),
-                p(paste0("Lat: ", meta$latitude[1], " | Lon: ", meta$longitude[1])),
-                theme = "secondary"
-            ),
-            value_box(
-                title = "Elevation",
-                value = span(paste0(s_elev, " m"), style = "font-size: 1.2rem; font-weight: 500;"),
-                p("Above mean sea level"),
-                theme = "info"
-            ),
-            value_box(
-                title = "Data Period",
-                value = span(dates_text, style = "font-size: 1.2rem; font-weight: 500;"),
-                p(paste("Resolution:", input$data_resolution)),
-                theme = "success"
-            ),
-            value_box(
-                title = "Actions",
-                value = span("Download", style = "font-size: 1.2rem; font-weight: 500;"),
-                downloadButton("download_hourly", "Export CSV", class = "btn-sm btn-light", style = "width: 100%;"),
-                theme = "warning"
+        # Unified Info Card
+        card(
+            style = "margin-bottom: 20px; border-left: 5px solid #007bff;",
+            card_body(
+                padding = 15,
+                layout_columns(
+                    fill = FALSE,
+                    # Col 1: Station
+                    div(
+                        strong("Station"), br(),
+                        span(s_name, style = "font-size: 1.1rem;"), br(),
+                        tags$small(class = "text-muted", paste("ID:", id))
+                    ),
+                    # Col 2: Location
+                    div(
+                        strong("Location"), br(),
+                        span(s_state), br(),
+                        tags$small(class = "text-muted", paste0(meta$latitude[1], "°N, ", meta$longitude[1], "°E"))
+                    ),
+                    # Col 3: Elevation & Resolution
+                    div(
+                        strong("Technical"), br(),
+                        span(paste0(s_elev, " m")), br(),
+                        span(class = "badge bg-info text-dark", input$data_resolution)
+                    ),
+                    # Col 4: Period
+                    div(
+                        strong("Data Selection"), br(),
+                        span(dates_text)
+                    ),
+                    # Col 5: Actions
+                    div(
+                        class = "d-flex align-items-center justify-content-end",
+                        downloadButton(
+                            "download_hourly",
+                            label = "Export CSV",
+                            class = "btn-sm btn-primary",
+                            icon = icon("download")
+                        )
+                    )
+                )
             )
         )
     })