Update public/styles.css

public/styles.css

@@ -294,70 +294,49 @@ legend {
 .sortable.asc::after { content: '▲'; }
 .sortable.desc::after { content: '▼'; }
 
-/* ─── TRENDS PAGE ───────────────────────────────────────────────────────────── */
+/* ─── Trends Chart & Table ─────────────────────────────────────────────────── */
 
-/* page-container is already full-screen under header */
-.page-container.trends {
-  display: flex;
-  flex-direction: column;
-}
-/* Controls row */
-.trends-controls {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-#timeframe-slider {
-  flex: 1;
-}
-#timeframe-label {
-  margin-left: 1rem;
-  white-space: nowrap;
-}
-/* Metric toggles */
-.trends-metrics {
-  margin-bottom: 1rem;
-}
 /* Chart area */
-.chart-container {
-  flex: 2;
-  position: relative;
+#chart-container {
+  height: 50vh;
+  width: 100%;
+  margin-bottom: 2rem;
 }
-.chart-container canvas {
-  width: 100% !important;
-  height: 100% !important;
-}
-/* Table wrapper */
-.table-wrapper {
-  flex: 1;
+
+/* Table wrapper: scrollable pane */
+#trends-table-container {
+  max-height: 40vh;
   overflow: auto;
   border: 1px solid #ddd;
+  margin-bottom: 1rem;
 }
-.table-wrapper table {
+
+/* Spreadsheet-style table */
+#trends-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
-.table-wrapper th,
-.table-wrapper td {
+#trends-table th,
+#trends-table td {
   padding: 8px;
   text-align: center;
-  border: 1px solid #ccc;
+  border-bottom: 1px solid #ddd;
   font-size: 0.95rem;
 }
-.table-wrapper thead th {
-  background: #f2f2f2;
+#trends-table thead th {
   position: sticky;
   top: 0;
-  z-index: 2;
+  background: #f2f2f2;
+  border-bottom: 2px solid #ccc;
   cursor: pointer;
   user-select: none;
 }
-/* Zebra stripes */
-.table-wrapper tbody tr:nth-child(even) {
+/* Zebra striping */
+#trends-table tbody tr:nth-child(even) {
   background: #fafafa;
 }
-/* Sort arrows */
+/* Sort arrow indicators */
 .sortable::after {
   content: '▲▼';
   font-size: 0.6em;