move filters to left box

static/index.html

@@ -30,11 +30,8 @@
   </nav>
 
   <main class="page-body">
-    <div class="dashboard">
+    <div class="sidebar">
-      <div id="loading-overlay" class="loading-overlay">
+      <div class="filters-panel">
-        <span>Loading fisheries data…</span>
-      </div>
-
         <div class="filters">
           <div class="filter-group multi-select" id="species">
             <label>Species</label>
@@ -61,7 +58,15 @@
           </div>
           <button class="apply-btn" id="apply-filters">Apply</button>
         </div>
+      </div>
+    </div>
 
+    <div class="dashboard-wrapper">
+      <div id="loading-overlay" class="loading-overlay">
+        <span>Loading fisheries data…</span>
+      </div>
+
+      <div class="dashboard">
         <div id="empty-state" class="empty-state" style="display:none;">
           <p>No data available for the selected filters.</p>
           <p>Try adjusting your filters or running an ingestion.</p>
@@ -82,6 +87,7 @@
           </div>
         </div>
       </div>
+    </div>
   </main>
 
   <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>

static/style.css

@@ -156,13 +156,49 @@ nav {
 .page-body {
   flex: 1;
   display: flex;
-  align-items: center;
+  padding: calc(65px + 2.5rem) 2rem 2rem;
-  justify-content: center;
+  gap: 2rem;
-  padding: calc(65px + 2.5rem) 2rem 4rem;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.filters-panel {
+  background: var(--bg-panel);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+  animation: panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: background 0.3s ease, border-color 0.3s ease;
+  height: 100%;
+}
+
+@keyframes panel-in {
+  0%   { opacity: 0; transform: translateX(-10px); }
+  100% { opacity: 1; transform: translateX(0); }
+}
+
+.dashboard-wrapper {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  height: 100%;
 }
 
 .dashboard {
-  width: min(1200px, 100%);
+  width: 100%;
+  height: 100%;
   background: var(--bg-panel);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
@@ -175,13 +211,8 @@ nav {
   transform: translateY(10px);
   transition: background 0.3s ease, border-color 0.3s ease;
   position: relative;
-  min-height: 500px;
+  display: flex;
-  height: calc(100dvh - 230px);
+  flex-direction: column;
-}
-
-@keyframes panel-in {
-  0%   { opacity: 0; transform: translateY(10px); }
-  100% { opacity: 1; transform: translateY(0); }
 }
 
 /* ---- Loading Overlay ---- */
@@ -216,16 +247,15 @@ nav {
   font-size: 0.85rem;
   text-align: center;
   line-height: 1.6;
+  flex: 1;
 }
 
 /* ---- Filters ---- */
 .filters {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(5, 1fr);
+  flex-direction: column;
   gap: 1rem;
-  margin-bottom: 2rem;
+  height: 100%;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
 }
 
 .filter-group {
@@ -343,8 +373,7 @@ nav {
 }
 
 .apply-btn {
-  grid-column: 1 / -1;
+  width: 100%;
-  justify-self: start;
   padding: 0.5rem 2rem;
   background: var(--accent);
   color: var(--bg-panel);
@@ -368,6 +397,8 @@ nav {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
+  flex: 1;
+  min-height: 0;
 }
 
 .chart-container {
@@ -376,17 +407,18 @@ nav {
   border-radius: 2px;
   padding: 1rem;
   position: relative;
-  min-height: 300px;
 }
 
 .chart-container.full-width {
   grid-column: span 2;
   height: 450px;
+  flex-shrink: 0;
 }
 
 .chart-container:nth-child(2),
 .chart-container:nth-child(3) {
-  height: 350px;
+  flex: 1;
+  min-height: 350px;
 }
 
 .chart-title {
@@ -440,37 +472,19 @@ footer {
 
 /* ---- Responsive ---- */
 @media (max-width: 820px) {
-  .charts-grid {
+  .sidebar {
-    grid-template-columns: 1fr;
+    display: none;
   }
-  .chart-container.full-width {
+  .page-body {
-    grid-column: span 1;
+    padding: calc(55px + 1.25rem) 1rem 3rem;
   }
-  nav {
+  .dashboard {
-    gap: 0.5rem;
+    padding: 1.5rem;
-    padding: 0.85rem 0.85rem;
   }
-  .back-link { font-size: 0.58rem; padding: 0.25rem 0.4rem; letter-spacing: 0.08em; }
-  .nav-brand { font-size: 0.9rem; }
-  .brand-sub { font-size: 0.6rem; letter-spacing: 0.1em; }
-  .page-body { padding: calc(55px + 1.25rem) 1rem 3rem; }
-  .dashboard { padding: 1.5rem; }
-  .charts-grid { grid-template-columns: 1fr; }
-  .chart-container.full-width { grid-column: span 1; }
-  .filter-group { min-width: unset; }
-  .filters {
-    grid-template-columns: 1fr 1fr;
-  }
-  .apply-btn { grid-column: 1 / -1; }
-  .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.9rem; }
 }
 
 @media (max-width: 460px) {
   .nav-brand .brand-sub { display: none; }
   .nav-brand .brand-sep { display: none; }
   .dashboard { padding: 1rem; }
-  .filters {
-    grid-template-columns: 1fr;
-  }
-  .apply-btn { grid-column: span 1; }
 }