Update public/styles.css

public/styles.css

@@ -2,6 +2,15 @@
 
 /* ─── Global & Layout ───────────────────────────────────────────────────────── */
 
+/* Reset & body */
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #eeeeee;
+  color: #333;
+}
+
 /* Fixed header */
 .main-header {
   background-color: #232F3E;
@@ -36,9 +45,9 @@
   background-color: #e48f00;
 }
 
-/* Main page container (offset for fixed header) */
+/* Main page container (offset under header) */
 .page-container {
-  margin-top: 70px; /* height of header */
+  margin-top: 70px;  /* height of header */
   width: 95%;
   max-width: 1200px;
   margin-left: auto;
@@ -56,9 +65,10 @@
 
 /* ─── Forms & Buttons ───────────────────────────────────────────────────────── */
 
-/* Text inputs and textareas */
+/* Text inputs & dropdowns */
 .form-input,
-.form-textarea {
+.form-textarea,
+select {
   width: 90%;
   margin: 0.5rem auto;
   display: block;
@@ -66,7 +76,18 @@
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 1rem;
-  box-sizing: border-box;
+}
+
+/* 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 */
@@ -87,9 +108,9 @@
 
 /* ─── Heat Map Page ────────────────────────────────────────────────────────── */
 
-/* Container for the heat map (scrollable & zoomable) */
+/* Scrollable/zoomable container */
 #heatmap-container {
-  margin-top: 70px; /* offset under header */
+  margin-top: 70px;
   width: 95%;
   height: calc(100vh - 70px);
   margin-left: auto;
@@ -101,39 +122,45 @@
   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 {
-  width: 30px;
-  height: 30px;
-  background-color: #ccc;
-  border: 1px solid #999;
-  box-sizing: border-box;
-  position: absolute;
+  fill: #ccc;
+  stroke: #999;
+  stroke-width: 1;
   cursor: pointer;
 }
 .dock-door:hover {
-  outline: 2px solid #FF9900;
-  z-index: 10;
+  stroke: #FF9900;
+  stroke-width: 2;
 }
 
-/* Additional area rectangles */
+/* Area rectangles (A-Mod, AFE-1, etc) */
 .area-rect {
-  position: absolute;
-  background-color: rgba(200,200,200,0.3);
-  border: 1px solid #999;
-  box-sizing: border-box;
+  fill: rgba(200,200,200,0.3);
+  stroke: #999;
+  stroke-width: 1;
 }
 .area-rect label {
-  position: absolute;
-  top: 4px; left: 4px;
   font-size: 0.85rem;
   font-weight: bold;
 }
 
-/* Floor selector radios */
+/* Floor selector */
 .floor-selector {
   position: absolute;
-  top: 10px; right: 10px;
+  top: 1rem;
+  right: 1rem;
   background: rgba(255,255,255,0.9);
   padding: 0.5rem;
   border-radius: 6px;
@@ -151,7 +178,7 @@
 
 /* Spreadsheet-style table wrapper */
 #trends-table-container {
-  max-height: 50vh;
+  max-height: 40vh;
   overflow: auto;
   border: 1px solid #ddd;
   margin-bottom: 1rem;
@@ -182,7 +209,6 @@
 #trends-table tbody tr:nth-child(even) {
   background: #fafafa;
 }
-
 /* Sort arrow indicators */
 .sortable::after {
   content: '▲▼';
@@ -196,3 +222,16 @@
 .sortable.desc::after {
   content: '▼';
 }
+
+/* ─── Responsive Tweaks ─────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .form-input, .form-textarea, select {
+    width: 100%;
+  }
+  .nav-btn {
+    padding: 0.5rem;
+    margin-left: 0.25rem;
+    font-size: 0.9rem;
+  }
+}