From 6e3a0957145be197fac2136f216d9fe807f0b187 Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 30 Apr 2025 07:12:50 +0000
Subject: [PATCH] Update public/styles.css

---
 public/styles.css | 170 ++++++++++++++++++++--------------------------
 1 file changed, 75 insertions(+), 95 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 41ff5d9..7b9278b 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,5 +1,3 @@
-/* styles.css */
-
 /* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
 * {
   box-sizing: border-box;
@@ -14,51 +12,91 @@ body {
   overflow: hidden;
 }
 
-/* ─── HEADER & NAV ─────────────────────────────────────────────────────────── */
+/* ─── HEADER & NAVIGATION ─────────────────────────────────────────────────── */
 .main-header {
   background-color: #232F3E;
   display: flex;
   align-items: center;
   padding: 0.5rem 1rem;
-  position: fixed;
-  top: 0; left: 0; right: 0;
+  position: fixed; top: 0; left: 0; right: 0;
   z-index: 1000;
 }
-.logo {
-  height: 40px;
-  margin-right: 1rem;
-}
+.logo { height: 40px; margin-right: 1rem; }
 .header-title {
-  color: #fff;
-  font-size: 1.2rem;
-  font-weight: bold;
+  color: #fff; font-size: 1.2rem; font-weight: bold;
   margin-right: auto;
 }
 .nav-btn {
-  background-color: #FF9900;
-  color: #111;
-  border: none;
-  border-radius: 5px;
-  padding: 0.5rem 1rem;
-  margin-left: 0.5rem;
-  cursor: pointer;
-  font-weight: bold;
-}
-.nav-btn:hover {
-  background-color: #e48f00;
+  background-color: #FF9900; color: #111;
+  border: none; border-radius: 5px;
+  padding: 0.5rem 1rem; margin-left: 0.5rem;
+  cursor: pointer; font-weight: bold;
 }
+.nav-btn:hover { background-color: #e48f00; }
 
-/* ─── PAGE WRAPPER ─────────────────────────────────────────────────────────── */
+/* ─── PAGE CONTAINERS ──────────────────────────────────────────────────────── */
 .page-container {
   position: absolute;
-  top: 70px;   /* height of header */
+  top: 70px; /* header height */
   left: 0; right: 0; bottom: 0;
   overflow: auto;
   padding: 1rem;
   background: #fff;
 }
 
-/* ─── INPUT/FORM STYLES ────────────────────────────────────────────────────── */
+/* ─── HEATMAP PAGE ─────────────────────────────────────────────────────────── */
+.page-container.heatmap {
+  padding: 0; /* flush to edges */
+}
+#heatmap-container {
+  width: 100%; height: 100%;
+  position: relative;
+  overflow: auto;
+  background-color: #f9f9f9;
+}
+/* this inner container is very wide/tall to allow scrolling + zoom */
+.map-svg-container {
+  min-width: 2000px;
+  min-height: 400px;
+  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, B-Mod, AFE-1, AFE-2, 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 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);
+}
+
+/* ─── INPUT/FORM (input.html) ─────────────────────────────────────────────── */
 .form-input,
 .form-textarea,
 select {
@@ -71,77 +109,20 @@ select {
   font-size: 1rem;
 }
 fieldset {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  margin: 1rem 0;
-  padding: 1rem;
-}
-legend {
-  padding: 0 0.5rem;
-  font-weight: bold;
+  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;
+  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 {
-  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 ───────────────────────────────────────────────────────────── */
+/* ─── TRENDS PAGE (for reference) ────────────────────────────────────────── */
+/* ... your existing trends styles go here ... */
 /* make this container a flex column filling available space */
 .page-container.trends {
   display: flex;
@@ -221,5 +202,4 @@ legend {
   select {
     width: 100%;
   }
-}
-
+}
\ No newline at end of file