Update public/styles.css

public/styles.css

@@ -11,6 +11,8 @@ body {
   font-family: Arial, sans-serif;
   background-color: #eeeeee;
   color: #333;
+  /* push content below fixed header */
+  padding-top: 70px;
   overflow: hidden; /* inner containers will scroll */
 }
 
@@ -50,72 +52,20 @@ body {
 
 /* ─── PAGE CONTAINER ───────────────────────────────────────────────────────── */
 .page-container {
+  width: 95%;
+  max-width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+  overflow: auto;
   position: absolute;
   top: 70px;    /* header height */
   left: 0; right: 0; bottom: 0;
-  overflow: auto;
+  padding: 1rem;
-  background: #fff;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-
-/* ─── 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) ───────────────────────────────── */
+/* ─── INPUT/FORM STYLES (input.html) ───────────────────────────────────────── */
 .form-input,
 .form-textarea,
 select {
@@ -152,29 +102,90 @@ legend {
   background-color: #218838;
 }
 
-/* ─── TRENDS PAGE STYLES (for reference) ──────────────────────────────────── */
+/* ─── HEATMAP PAGE STYLES ──────────────────────────────────────────────────── */
-/* (These go in same file; keep them here so you don’t lose anything.) */
+.page-container.heatmap {
+  padding: 0;              /* remove default padding */
+  background: #f9f9f9;
+}
+#heatmap-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+.map-svg-container {
+  /* adjust these to your actual map dimensions */
+  min-width: 2000px;
+  min-height: 400px;
+  transform-origin: 0 0;
+  cursor: grab;
+}
+.map-svg-container:active {
+  cursor: grabbing;
+}
+.dock-door {
+  fill: #ccc;
+  stroke: #999;
+  stroke-width: 1;
+  cursor: pointer;
+}
+.dock-door:hover {
+  stroke: #FF9900;
+  stroke-width: 2;
+}
+.area-rect {
+  fill: rgba(200,200,200,0.3);
+  stroke: #999;
+  stroke-width: 1;
+}
+.area-rect text {
+  font-size: 0.85rem;
+  font-weight: bold;
+}
+.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 STYLES (trends.html) ───────────────────────────────────── */
 .page-container.trends {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 0);
+  padding: 1rem;
+}
+.page-container.trends h1 {
+  margin-bottom: 1rem;
 }
-.page-container.trends > h1 { margin: 1rem; }
 .trends-controls {
   display: flex;
   align-items: center;
-  padding: 0 1rem;
+  margin-bottom: 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%;
+  margin-bottom: 1rem;
   position: relative;
-  margin: 0 1rem 1rem;
 }
 .chart-container canvas {
   width: 100% !important;
@@ -182,7 +193,6 @@ legend {
 }
 .table-wrapper {
   flex: 0 0 45%;
-  margin: 0 1rem 1rem;
   overflow: auto;
   border: 1px solid #ddd;
 }
@@ -213,6 +223,22 @@ legend {
   margin-left: 4px;
   color: #888;
 }
-.sortable.asc::after { content: '▲'; }
+.sortable.asc::after {
-.sortable.desc::after { content: '▼'; }
+  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%;
+  }
+}