From 7744df85f1d675f6a918753de82fe73376b055e3 Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 30 Apr 2025 06:20:30 +0000
Subject: [PATCH] Update public/styles.css

---
 public/styles.css | 302 +++++++++++++++++++++++++---------------------
 1 file changed, 162 insertions(+), 140 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index b520312..07f1b36 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,44 +1,22 @@
-/* ================= CSS VARIABLES ================= */
-:root {
-  --square-size: 60px;
-  --gap: 8px;
-  --v-gap: 24px;
-  --warehouse-height: 200px;
-}
+/* styles.css */
 
-/* ================= GLOBAL & LAYOUT ================= */
-html, body {
-  height: 100%;
+/* ─── Global & Layout ───────────────────────────────────────────────────────── */
+
+/* Reset & body */
+* { box-sizing: border-box; }
+body {
   margin: 0;
-  padding: 0;
-  background: #f4f4f4;
   font-family: Arial, sans-serif;
-}
-h1 {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-.page-container {
-  margin-top: 70px;               /* under fixed header */
-  width: 95%;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 1rem;
-  background: #fff;
-  border-radius: 6px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  min-height: calc(100vh - 70px);
+  background-color: #eeeeee;
+  color: #333;
 }
 
-/* ================= BINS HEADER & NAV BUTTONS ================= */
+/* Fixed header */
 .main-header {
   background-color: #232F3E;
   display: flex;
   align-items: center;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 1rem;
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 1000;
@@ -67,17 +45,52 @@ h1 {
   background-color: #e48f00;
 }
 
-/* ================= FORM STYLES ================= */
-.form-input {
-  width: 80%;
-  max-width: 400px;
-  margin: 1rem auto;
-  display: block;
+/* Main page container (offset under header) */
+.page-container {
+  margin-top: 70px;  /* height of header */
+  width: 95%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
   padding: 1rem;
-  font-size: 1rem;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* Utility */
+.hidden {
+  display: none !important;
+}
+
+/* ─── Forms & Buttons ───────────────────────────────────────────────────────── */
+
+/* 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;
@@ -92,124 +105,133 @@ h1 {
 .big-button:hover {
   background-color: #218838;
 }
-fieldset {
-  border: 1px solid #ccc;
+
+/* ─── 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;
-  padding: 1rem;
-  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
-legend {
+
+/* 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;
 }
 
-/* ================= TRENDS PAGE ================= */
-/* Controls */
-#trend-controls {
-  flex: 0 0 auto;
-  text-align: center;
-  margin-bottom: 1rem;
-}
-/* Chart */
-.chart-container {
-  flex: 1 1 auto;
-  width: 100%;
-  position: relative;
-}
-.chart-container canvas {
-  width: 100% !important;
-  height: 100% !important;
-}
-/* Table */
-.table-container {
-  margin-top: 2rem;
-  overflow-x: auto;
-}
-table.dataTable {
-  width: 100% !important;
+/* 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);
 }
 
-/* ================= HEATMAP STYLES ================= */
-/* Scroll & pan wrapper */
-.heatmap-wrapper {
+/* ─── Trends Page ──────────────────────────────────────────────────────────── */
+
+/* Chart container */
+#chart-container {
+  height: 50vh;
   width: 100%;
-  height: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  margin-bottom: 2rem;
 }
-/* Entire diagram */
-.diagram-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--v-gap);
+
+/* Spreadsheet-style table wrapper */
+#trends-table-container {
+  max-height: 40vh;
+  overflow: auto;
+  border: 1px solid #ddd;
+  margin-bottom: 1rem;
 }
-/* Dock-door row */
-.dock-row {
-  display: flex;
-  gap: var(--gap);
+
+/* Table styling */
+#trends-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
 }
-/* Each dock square */
-.dock-square {
-  width: var(--square-size);
-  height: var(--square-size);
-  background: #ddd;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  color: #333;
+#trends-table th,
+#trends-table td {
+  padding: 8px;
+  text-align: center;
+  border-bottom: 1px solid #ddd;
+  font-size: 0.95rem;
+}
+#trends-table thead th {
+  position: sticky;
+  top: 0;
+  background: #f2f2f2;
+  border-bottom: 2px solid #ccc;
   cursor: pointer;
   user-select: none;
 }
-/* Regions below dock row */
-.regions-container {
-  display: flex;
-  width: 100%;
-  gap: var(--gap);
+/* Zebra striping */
+#trends-table tbody tr:nth-child(even) {
+  background: #fafafa;
 }
-.region {
-  flex: 1;
-  height: 120px;
-  border: 2px solid #666;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  user-select: none;
+/* Sort arrow indicators */
+.sortable::after {
+  content: '▲▼';
+  font-size: 0.6em;
+  margin-left: 4px;
+  color: #888;
 }
-.region-amod    { background: #eef; }
-.region-preslam { background: #efe; }
-.region-bmod    { background: #fee; }
-/* Warehouse rectangle */
-.warehouse {
-  width: calc(
-    (var(--square-size) * 83) +    /* adjust door count if needed */
-    (var(--gap) * 82)
-  );
-  height: var(--warehouse-height);
-  background: #ccc;
-  border-radius: 6px;
+.sortable.asc::after {
+  content: '▲';
 }
-/* Hover tooltip */
-.tooltip {
-  position: absolute;
-  pointer-events: none;
-  background: rgba(0,0,0,0.75);
-  color: #fff;
-  padding: 8px;
-  border-radius: 4px;
-  font-size: 0.9rem;
-  line-height: 1.2;
-  display: none;
-  z-index: 2000;
+.sortable.desc::after {
+  content: '▼';
 }
 
-/* ================= UTILITY ================= */
-.hidden {
-  display: none;
+/* ─── 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;
+  }
 }