Update public/styles.css

public/styles.css

@@ -1,16 +1,18 @@
-/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
+/* ─── GLOBAL RESET & BASE ───────────────────────────────────────────────────── */
 * {
   box-sizing: border-box;
 }
 body {
   margin: 0;
-  padding-top: 70px; /* push everything below fixed header */
+  padding: 0;
   font-family: Arial, sans-serif;
   background-color: #eeeeee;
   color: #333;
+  height: 100vh;
+  overflow: hidden; /* we'll scroll inner containers */
 }
 
-/* ─── Header & Nav ─────────────────────────────────────────────────────────── */
+/* ─── HEADER & NAVIGATION ───────────────────────────────────────────────────── */
 .main-header {
   background-color: #232F3E;
   display: flex;
@@ -44,60 +46,165 @@ body {
   background-color: #e48f00;
 }
 
-/* ─── Page Container ───────────────────────────────────────────────────────── */
+/* ─── PAGE CONTAINER ────────────────────────────────────────────────────────── */
+/* shared by all pages, sits below header */
 .page-container {
-  width: 95%;
+  position: absolute;
-  max-width: 1200px;
+  top: 70px; /* header height */
-  margin: 0 auto;
+  left: 0;
-  padding: 1rem;
+  right: 0;
-  background-color: #fff;
+  bottom: 0;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-
-/* ─── Trends Chart & Table ─────────────────────────────────────────────────── */
-
-/* Chart area */
-#chart-container {
-  height: 50vh;
-  width: 100%;
-  margin-bottom: 2rem;
-}
-
-/* Table wrapper: scrollable pane */
-#trends-table-container {
-  max-height: 40vh;
   overflow: auto;
-  border: 1px solid #ddd;
+  padding: 1rem;
+}
+
+/* ─── INPUT & FORM STYLES ───────────────────────────────────────────────────── */
+.form-input,
+.form-textarea,
+select {
+  width: 90%;
+  margin: 0.5rem auto;
+  display: block;
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+fieldset {
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  margin: 1rem 0;
+  padding: 1rem;
+}
+legend {
+  padding: 0 0.5rem;
+  font-weight: bold;
+}
+.big-button {
+  background-color: #28a745;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  margin: 1rem auto;
+  display: block;
+}
+.big-button:hover {
+  background-color: #218838;
+}
+
+/* ─── HEATMAP PAGE ──────────────────────────────────────────────────────────── */
+#heatmap-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+  background-color: #f9f9f9;
+}
+.map-svg-container {
+  /* width/height large enough for all doors + areas */
+  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 label {
+  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);
+}
+
+/* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */
+/* page-container is already full-screen under header */
+.page-container.trends {
+  display: flex;
+  flex-direction: column;
+}
+/* Controls row */
+.trends-controls {
+  display: flex;
+  align-items: center;
   margin-bottom: 1rem;
 }
-
+#timeframe-slider {
-/* Spreadsheet-style table */
+  flex: 1;
-#trends-table {
+}
+#timeframe-label {
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+/* Metric toggles */
+.trends-metrics {
+  margin-bottom: 1rem;
+}
+/* Chart area */
+.chart-container {
+  flex: 2;
+  position: relative;
+}
+.chart-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+/* Table wrapper */
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+.table-wrapper table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
-#trends-table th,
+.table-wrapper th,
-#trends-table td {
+.table-wrapper td {
   padding: 8px;
   text-align: center;
-  border-bottom: 1px solid #ddd;
+  border: 1px solid #ccc;
   font-size: 0.95rem;
 }
-#trends-table thead th {
+.table-wrapper thead th {
+  background: #f2f2f2;
   position: sticky;
   top: 0;
-  background: #f2f2f2;
+  z-index: 2;
-  border-bottom: 2px solid #ccc;
   cursor: pointer;
   user-select: none;
 }
-/* Zebra striping */
+/* Zebra stripes */
-#trends-table tbody tr:nth-child(even) {
+.table-wrapper tbody tr:nth-child(even) {
   background: #fafafa;
 }
-/* Sort arrow indicators */
+/* Sort arrows */
 .sortable::after {
   content: '▲▼';
   font-size: 0.6em;
@@ -111,11 +218,8 @@ body {
   content: '▼';
 }
 
-/* ─── Responsive Tweaks ─────────────────────────────────────────────────────── */
+/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
-  .nav-btn {
+  .nav-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
-    padding: 0.4rem 0.8rem;
+  .form-input, .form-textarea, select { width: 100%; }
-    font-size: 0.9rem;
-    margin-left: 0.25rem;
-  }
 }