Update public/styles.css

public/styles.css

@@ -232,6 +232,68 @@ legend {
   background: #ccc;
   border-radius: 6px;
 }
+.page-container.trends {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.page-container.trends > h1 { margin: 1rem; }
+.trends-controls {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+#timeframe-slider { flex: 1; }
+#timeframe-label { margin-left: 1rem; }
+.trends-metrics {
+  padding: 0 1rem;
+  margin-bottom: 1rem;
+}
+.chart-container {
+  flex: 0 0 50%;
+  position: relative;
+  margin: 0 1rem 1rem;
+}
+.chart-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+.table-wrapper {
+  flex: 0 0 45%;
+  margin: 0 1rem 1rem;
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+.table-wrapper table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.table-wrapper th,
+.table-wrapper td {
+  padding: 8px;
+  text-align: center;
+  border: 1px solid #ccc;
+}
+.table-wrapper thead th {
+  background: #f2f2f2;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+.table-wrapper tbody tr:nth-child(even) {
+  background: #fafafa;
+}
+.sortable::after {
+  content: '▲▼';
+  font-size: 0.6em;
+  margin-left: 4px;
+  color: #888;
+}
+.sortable.asc::after { content: '▲'; }
+.sortable.desc::after { content: '▼'; }
+
 
 /* ================= TOOLTIP ================= */
 .tooltip {