moving closer to something useful

static/style.css

@@ -207,6 +207,7 @@ nav {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+  position: relative;
 }
 
 .filter-group label {
@@ -231,6 +232,91 @@ nav {
 }
 .filter-group select:focus { border-color: var(--accent); }
 
+/* ---- Multi-Select Dropdown ---- */
+.filter-group.multi-select {
+  position: relative;
+}
+
+.dropdown-trigger {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--ink);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.82rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: border-color 0.2s;
+}
+
+.dropdown-trigger:hover {
+  border-color: var(--accent);
+}
+
+.dropdown-trigger::after {
+  content: '▼';
+  font-size: 0.6rem;
+  margin-left: 0.5rem;
+  opacity: 0.6;
+}
+
+.checkbox-dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 2px 2px;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: none;
+  padding: 0.5rem 0;
+}
+
+.checkbox-dropdown-list.open {
+  display: block;
+}
+
+.dropdown-separator {
+  border-top: 1px solid var(--border);
+  margin: 0.25rem 0;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.checkbox-item:hover {
+  background: var(--surface-hover);
+}
+
+.checkbox-item input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--accent);
+  margin-right: 0.5rem;
+}
+
+.select-all-wrapper {
+  font-weight: 600;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .apply-btn {
   align-self: flex-end;
   padding: 0.5rem 1.2rem;
@@ -269,8 +355,8 @@ nav {
   height: 450px;
 }
 
-.chart-container:nth-child(2), /* Donut */
-.chart-container:nth-child(3) { /* Bar */
+.chart-container:nth-child(2),
+.chart-container:nth-child(3) {
   height: 350px;
 }