Update public/styles.css

public/styles.css

@@ -1,17 +1,16 @@
-/* styles.css */
+/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
-
+* {
-/* ─── Global & Layout ───────────────────────────────────────────────────────── */
+  box-sizing: border-box;
-
+}
-/* Reset & body */
-* { box-sizing: border-box; }
 body {
   margin: 0;
+  padding-top: 70px; /* push everything below fixed header */
   font-family: Arial, sans-serif;
   background-color: #eeeeee;
   color: #333;
 }
 
-/* Fixed header */
+/* ─── Header & Nav ─────────────────────────────────────────────────────────── */
 .main-header {
   background-color: #232F3E;
   display: flex;
@@ -45,138 +44,27 @@ body {
   background-color: #e48f00;
 }
 
-/* Main page container (offset under header) */
+/* ─── Page Container ───────────────────────────────────────────────────────── */
 .page-container {
-  margin-top: 70px;  /* height of header */
   width: 95%;
   max-width: 1200px;
-  margin-left: auto;
+  margin: 0 auto;
-  margin-right: auto;
   padding: 1rem;
   background-color: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
-/* Utility */
+/* ─── Trends Chart & Table ─────────────────────────────────────────────────── */
-.hidden {
-  display: none !important;
-}
 
-/* ─── Forms & Buttons ───────────────────────────────────────────────────────── */
+/* Chart area */
-
-/* Text inputs & dropdowns */
-.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 & legend spacing */
-fieldset {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  margin: 1rem 0;
-  padding: 1rem;
-}
-legend {
-  padding: 0 0.5rem;
-  font-weight: bold;
-}
-
-/* Large submit button */
-.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;
-}
-
-/* ─── Heat Map Page ────────────────────────────────────────────────────────── */
-
-/* Scrollable/zoomable container */
-#heatmap-container {
-  margin-top: 70px;
-  width: 95%;
-  height: calc(100vh - 70px);
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  overflow: auto;
-  background-color: #f9f9f9;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-
-/* SVG wrapper */
-.map-svg-container {
-  width: 2000px;   /* adjust to your full map width */
-  height: 400px;   /* adjust to your 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 (A-Mod, AFE-1, etc) */
-.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);
-}
-
-/* ─── Trends Page ──────────────────────────────────────────────────────────── */
-
-/* Chart container */
 #chart-container {
   height: 50vh;
   width: 100%;
   margin-bottom: 2rem;
 }
 
-/* Spreadsheet-style table wrapper */
+/* Table wrapper: scrollable pane */
 #trends-table-container {
   max-height: 40vh;
   overflow: auto;
@@ -184,7 +72,7 @@ legend {
   margin-bottom: 1rem;
 }
 
-/* Table styling */
+/* Spreadsheet-style table */
 #trends-table {
   width: 100%;
   border-collapse: collapse;
@@ -224,14 +112,10 @@ legend {
 }
 
 /* ─── Responsive Tweaks ─────────────────────────────────────────────────────── */
-
 @media (max-width: 768px) {
-  .form-input, .form-textarea, select {
-    width: 100%;
-  }
   .nav-btn {
-    padding: 0.5rem;
+    padding: 0.4rem 0.8rem;
-    margin-left: 0.25rem;
     font-size: 0.9rem;
+    margin-left: 0.25rem;
   }
 }