Update public/styles.css

public/styles.css

@@ -1,6 +1,4 @@
-/* styles.css */
-
-/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
+/* ─── GLOBAL RESET & BASE ───────────────────────────────────────────────────── */
 * {
   box-sizing: border-box;
 }
@@ -11,10 +9,10 @@ body {
   background-color: #eeeeee;
   color: #333;
   height: 100vh;
-  overflow: hidden;
+  overflow: hidden; /* we'll scroll inner containers */
 }
 
-/* ─── HEADER & NAV ─────────────────────────────────────────────────────────── */
+/* ─── HEADER & NAVIGATION ───────────────────────────────────────────────────── */
 .main-header {
   background-color: #232F3E;
   display: flex;
@@ -48,17 +46,19 @@ body {
   background-color: #e48f00;
 }
 
-/* ─── PAGE WRAPPER ─────────────────────────────────────────────────────────── */
+/* ─── PAGE CONTAINER ────────────────────────────────────────────────────────── */
+/* shared by all pages, sits below header */
 .page-container {
   position: absolute;
-  top: 70px;   /* height of header */
-  left: 0; right: 0; bottom: 0;
+  top: 70px; /* header height */
+  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,6 +104,7 @@ 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;
@@ -142,33 +143,40 @@ legend {
 }
 
 /* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */
-/* make this container a flex column filling available space */
+/* page-container is already full-screen under header */
 .page-container.trends {
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0); /* full height under header */
 }
-/* Heading & controls take auto height */
-.page-container.trends > h1,
-.trends-controls,
+/* 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 */
 .trends-metrics {
-  flex: 0 0 auto;
-  margin: 0 0 1rem 0;
+  margin-bottom: 1rem;
 }
-
-/* Chart: fixed 50% of container */
+/* Chart area */
 .chart-container {
-  flex: 0 0 50%;
+  flex: 2;
   position: relative;
 }
 .chart-container canvas {
   width: 100% !important;
   height: 100% !important;
 }
-
-/* Table: fixed 45% of container */
+/* Table wrapper */
 .table-wrapper {
-  flex: 0 0 45%;
+  flex: 1;
   overflow: auto;
   border: 1px solid #ddd;
 }
@@ -192,11 +200,11 @@ legend {
   cursor: pointer;
   user-select: none;
 }
-/* Zebra striping */
+/* Zebra stripes */
 .table-wrapper tbody tr:nth-child(even) {
   background: #fafafa;
 }
-/* Sort arrow indicators */
+/* Sort arrows */
 .sortable::after {
   content: '▲▼';
   font-size: 0.6em;
@@ -212,13 +220,7 @@ 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%; }
 }
+