Update public/styles.css

public/styles.css

@@ -1,4 +1,6 @@
-/* ─── GLOBAL RESET & BASE ───────────────────────────────────────────────────── */
+/* styles.css */
+
+/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
 * {
   box-sizing: border-box;
 }
@@ -9,10 +11,10 @@ body {
   background-color: #eeeeee;
   color: #333;
   height: 100vh;
-  overflow: hidden; /* we'll scroll inner containers */
+  overflow: hidden;
 }
 
-/* ─── HEADER & NAVIGATION ───────────────────────────────────────────────────── */
+/* ─── HEADER & NAV ─────────────────────────────────────────────────────────── */
 .main-header {
   background-color: #232F3E;
   display: flex;
@@ -46,19 +48,17 @@ body {
   background-color: #e48f00;
 }
 
-/* ─── PAGE CONTAINER ────────────────────────────────────────────────────────── */
-/* shared by all pages, sits below header */
+/* ─── PAGE WRAPPER ─────────────────────────────────────────────────────────── */
 .page-container {
   position: absolute;
-  top: 70px; /* header height */
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 70px;   /* height of header */
+  left: 0; right: 0; bottom: 0;
   overflow: auto;
   padding: 1rem;
+  background: #fff;
 }
 
-/* ─── INPUT & FORM STYLES ───────────────────────────────────────────────────── */
+/* ─── INPUT/FORM STYLES ────────────────────────────────────────────────────── */
 .form-input,
 .form-textarea,
 select {
@@ -95,7 +95,7 @@ legend {
   background-color: #218838;
 }
 
-/* ─── HEATMAP PAGE ──────────────────────────────────────────────────────────── */
+/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */
 #heatmap-container {
   width: 100%;
   height: 100%;
@@ -104,7 +104,6 @@ legend {
   background-color: #f9f9f9;
 }
 .map-svg-container {
-  /* width/height large enough for all doors + areas */
   min-width: 2000px;
   min-height: 400px;
   transform-origin: 0 0;
@@ -143,40 +142,33 @@ legend {
 }
 
 /* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */
-/* page-container is already full-screen under header */
+/* make this container a flex column filling available space */
 .page-container.trends {
   display: flex;
   flex-direction: column;
+  height: calc(100% - 0); /* full height under header */
 }
-/* Controls row */
-.trends-controls {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-#timeframe-slider {
-  flex: 1;
-}
-#timeframe-label {
-  margin-left: 1rem;
-  white-space: nowrap;
-}
-/* Metric toggles */
+/* Heading & controls take auto height */
+.page-container.trends > h1,
+.trends-controls,
 .trends-metrics {
-  margin-bottom: 1rem;
+  flex: 0 0 auto;
+  margin: 0 0 1rem 0;
 }
-/* Chart area */
+
+/* Chart: fixed 50% of container */
 .chart-container {
-  flex: 2;
+  flex: 0 0 50%;
   position: relative;
 }
 .chart-container canvas {
   width: 100% !important;
   height: 100% !important;
 }
-/* Table wrapper */
+
+/* Table: fixed 45% of container */
 .table-wrapper {
-  flex: 1;
+  flex: 0 0 45%;
   overflow: auto;
   border: 1px solid #ddd;
 }
@@ -200,11 +192,11 @@ legend {
   cursor: pointer;
   user-select: none;
 }
-/* Zebra stripes */
+/* Zebra striping */
 .table-wrapper tbody tr:nth-child(even) {
   background: #fafafa;
 }
-/* Sort arrows */
+/* Sort arrow indicators */
 .sortable::after {
   content: '▲▼';
   font-size: 0.6em;
@@ -220,6 +212,13 @@ legend {
 
 /* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
-  .nav-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
-  .form-input, .form-textarea, select { width: 100%; }
+  .nav-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+  }
+  .form-input,
+  .form-textarea,
+  select {
+    width: 100%;
+  }
 }