From d897c05c61cd5ee69369c2cf3365f3fed3c0ecda Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Mon, 30 Mar 2026 23:29:30 -0700
Subject: [PATCH] feat: add device-badge, group-header, filter-bar, and
 sidebar-device-header CSS classes

---
 muxplex/frontend/style.css | 65 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css
index c240f09..265417e 100644
--- a/muxplex/frontend/style.css
+++ b/muxplex/frontend/style.css
@@ -1347,6 +1347,71 @@ body {
   z-index: 200;
 }
 
+/* ============================================================
+   Device badge, group header, filter bar, sidebar device header
+   ============================================================ */
+
+.device-badge {
+  display: inline-block;
+  font-size: 9px;
+  color: var(--accent);
+  background: var(--accent-dim);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 1px 4px;
+  line-height: 1.4;
+  vertical-align: middle;
+}
+
+.device-group-header {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  grid-column: 1 / -1;
+  padding: 8px 0 6px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 0;
+}
+
+.filter-pill {
+  font-size: 12px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  padding: 3px 10px;
+  cursor: pointer;
+  transition: border-color 150ms ease, color 150ms ease;
+  line-height: 1.4;
+}
+
+.filter-pill:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.filter-pill--active {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.sidebar-device-header {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  padding: 8px 12px 4px;
+}
+
 /* ============================================================
    Responsive overlay sidebar at <960px
    ============================================================ */