Update public/styles.css

public/styles.css

@@ -11,7 +11,7 @@ body {
   font-family: Arial, sans-serif;
   background-color: #eeeeee;
   color: #333;
-  overflow: hidden; /* main containers will scroll internally */
+  overflow: hidden; /* inner containers will scroll */
 }
 
 /* ─── HEADER & NAVIGATION ─────────────────────────────────────────────────── */
@@ -54,11 +54,68 @@ body {
   top: 70px; /* header height */
   left: 0; right: 0; bottom: 0;
   overflow: auto;
-  padding: 1rem;
   background: #fff;
 }
 
-/* ─── INPUT/FORM STYLES (input.html) ───────────────────────────────────────── */
+/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */
+.page-container.heatmap {
+  padding: 0; /* we’ll handle padding inside */
+}
+#heatmap-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #f9f9f9;
+}
+/* The SVG (or container) for everything */
+.map-svg-container {
+  min-width: 2000px;  /* adjust to map width */
+  min-height: 400px;  /* adjust to map height */
+  transform-origin: 0 0;
+  cursor: grab;
+}
+.map-svg-container:active {
+  cursor: grabbing;
+}
+/* Dock-door squares */
+.dock-door {
+  fill: #ccc;
+  stroke: #999;
+  stroke-width: 1;
+  cursor: pointer;
+}
+.dock-door:hover {
+  stroke: #FF9900;
+  stroke-width: 2;
+}
+/* Area rectangles */
+.area-rect {
+  fill: rgba(200,200,200,0.3);
+  stroke: #999;
+  stroke-width: 1;
+}
+.area-rect label {
+  font-size: 0.85rem;
+  font-weight: bold;
+}
+/* Floor selector overlay */
+.floor-selector {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(255,255,255,0.9);
+  padding: 0.5rem;
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+.floor-selector label {
+  margin-right: 0.75rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+/* ─── GENERIC FORM STYLES (for input.html) ───────────────────────────────── */
 .form-input,
 .form-textarea,
 select {
@@ -95,92 +152,29 @@ legend {
   background-color: #218838;
 }
 
-/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */
+/* ─── TRENDS PAGE STYLES (for reference) ──────────────────────────────────── */
-.page-container.heatmap {
+/* (These go in same file; keep them here so you don’t lose anything.) */
-  padding: 0;
-}
-#heatmap-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-  background-color: #f9f9f9;
-}
-.map-svg-container {
-  /* sufficiently large to house all SVG elements */
-  min-width: 2000px;
-  min-height: 400px;
-  transform-origin: 0 0;
-  cursor: grab;
-}
-.map-svg-container:active {
-  cursor: grabbing;
-}
-/* Dock-door squares */
-.dock-door {
-  fill: #ccc;
-  stroke: #999;
-  stroke-width: 1;
-  cursor: pointer;
-}
-.dock-door:hover {
-  stroke: #FF9900;
-  stroke-width: 2;
-}
-/* Area rectangles */
-.area-rect {
-  fill: rgba(200,200,200,0.3);
-  stroke: #999;
-  stroke-width: 1;
-}
-.area-rect label {
-  font-size: 0.85rem;
-  font-weight: bold;
-}
-/* Floor selector */
-.floor-selector {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: rgba(255,255,255,0.9);
-  padding: 0.5rem;
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-}
-.floor-selector label {
-  margin-right: 0.75rem;
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
-/* ─── TRENDS PAGE ──────────────────────────────────────────────────────────── */
 .page-container.trends {
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0);
+  height: 100%;
-}
-.page-container.trends > h1 {
-  margin-bottom: 1rem;
 }
+.page-container.trends > h1 { margin: 1rem; }
 .trends-controls {
   display: flex;
   align-items: center;
-  margin-bottom: 1rem;
+  padding: 0 1rem;
-}
-#timeframe-slider {
-  flex: 1;
-}
-#timeframe-label {
-  margin-left: 1rem;
-  white-space: nowrap;
 }
+#timeframe-slider { flex: 1; }
+#timeframe-label { margin-left: 1rem; }
 .trends-metrics {
+  padding: 0 1rem;
   margin-bottom: 1rem;
 }
 .chart-container {
   flex: 0 0 50%;
   position: relative;
-  margin-bottom: 1rem;
+  margin: 0 1rem 1rem;
 }
 .chart-container canvas {
   width: 100% !important;
@@ -188,6 +182,7 @@ legend {
 }
 .table-wrapper {
   flex: 0 0 45%;
+  margin: 0 1rem 1rem;
   overflow: auto;
   border: 1px solid #ddd;
 }
@@ -201,7 +196,6 @@ legend {
   padding: 8px;
   text-align: center;
   border: 1px solid #ccc;
-  font-size: 0.95rem;
 }
 .table-wrapper thead th {
   background: #f2f2f2;
@@ -209,7 +203,6 @@ legend {
   top: 0;
   z-index: 2;
   cursor: pointer;
-  user-select: none;
 }
 .table-wrapper tbody tr:nth-child(even) {
   background: #fafafa;
@@ -220,22 +213,6 @@ legend {
   margin-left: 4px;
   color: #888;
 }
-.sortable.asc::after {
+.sortable.asc::after { content: '▲'; }
-  content: '▲';
+.sortable.desc::after { content: '▼'; }
-}
-.sortable.desc::after {
-  content: '▼';
-}
 
-/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
-@media (max-width: 768px) {
-  .nav-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.9rem;
-  }
-  .form-input,
-  .form-textarea,
-  select {
-    width: 100%;
-  }
-}