diff --git a/public/styles.css b/public/styles.css
index 07f1b36..b520312 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,22 +1,44 @@
-/* styles.css */
-
-/* ─── Global & Layout ───────────────────────────────────────────────────────── */
-
-/* Reset & body */
-* { box-sizing: border-box; }
-body {
-  margin: 0;
-  font-family: Arial, sans-serif;
-  background-color: #eeeeee;
-  color: #333;
+/* ================= CSS VARIABLES ================= */
+:root {
+  --square-size: 60px;
+  --gap: 8px;
+  --v-gap: 24px;
+  --warehouse-height: 200px;
 }
 
-/* Fixed header */
+/* ================= GLOBAL & LAYOUT ================= */
+html, body {
+  height: 100%;
+  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);
+}
+
+/* ================= BINS HEADER & NAV BUTTONS ================= */
 .main-header {
   background-color: #232F3E;
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 2rem;
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 1000;
@@ -45,52 +67,17 @@ body {
   background-color: #e48f00;
 }
 
-/* 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;
-  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;
+/* ================= FORM STYLES ================= */
+.form-input {
+  width: 80%;
+  max-width: 400px;
+  margin: 1rem 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;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
 }
-legend {
-  padding: 0 0.5rem;
-  font-weight: bold;
-}
-
-/* Large submit button */
 .big-button {
   background-color: #28a745;
   color: white;
@@ -105,133 +92,124 @@ legend {
 .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;
+fieldset {
+  border: 1px solid #ccc;
   border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  padding: 1rem;
+  margin-bottom: 1.5rem;
 }
-
-/* 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;
+legend {
   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 */
-#trends-table-container {
-  max-height: 40vh;
-  overflow: auto;
-  border: 1px solid #ddd;
+/* ================= TRENDS PAGE ================= */
+/* Controls */
+#trend-controls {
+  flex: 0 0 auto;
+  text-align: center;
   margin-bottom: 1rem;
 }
-
-/* Table styling */
-#trends-table {
+/* Chart */
+.chart-container {
+  flex: 1 1 auto;
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
+  position: relative;
 }
-#trends-table th,
-#trends-table td {
-  padding: 8px;
-  text-align: center;
-  border-bottom: 1px solid #ddd;
-  font-size: 0.95rem;
+.chart-container canvas {
+  width: 100% !important;
+  height: 100% !important;
 }
-#trends-table thead th {
-  position: sticky;
-  top: 0;
-  background: #f2f2f2;
-  border-bottom: 2px solid #ccc;
+/* Table */
+.table-container {
+  margin-top: 2rem;
+  overflow-x: auto;
+}
+table.dataTable {
+  width: 100% !important;
+}
+
+/* ================= HEATMAP STYLES ================= */
+/* Scroll & pan wrapper */
+.heatmap-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+/* Entire diagram */
+.diagram-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--v-gap);
+}
+/* Dock-door row */
+.dock-row {
+  display: flex;
+  gap: var(--gap);
+}
+/* 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;
   cursor: pointer;
   user-select: none;
 }
-/* Zebra striping */
-#trends-table tbody tr:nth-child(even) {
-  background: #fafafa;
+/* Regions below dock row */
+.regions-container {
+  display: flex;
+  width: 100%;
+  gap: var(--gap);
 }
-/* Sort arrow indicators */
-.sortable::after {
-  content: '▲▼';
-  font-size: 0.6em;
-  margin-left: 4px;
-  color: #888;
+.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;
 }
-.sortable.asc::after {
-  content: '▲';
+.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.desc::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;
 }
 
-/* ─── 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;
-  }
+/* ================= UTILITY ================= */
+.hidden {
+  display: none;
 }