From 110844e5979b25883608784e68eaa82c07fed11d Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Thu, 11 Jun 2026 15:52:30 +0000
Subject: [PATCH] fix: use defined CSS var --panel instead of undefined
 --surface

The session options dropdown used var(--surface) which was never
defined anywhere in the stylesheet, causing a transparent background.
Changed to var(--panel) which is defined in tokens.css.

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
---
 apps/web/src/styles/pages/sessions.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/styles/pages/sessions.css b/apps/web/src/styles/pages/sessions.css
index 35f54ba..b1ce221 100644
--- a/apps/web/src/styles/pages/sessions.css
+++ b/apps/web/src/styles/pages/sessions.css
@@ -6,7 +6,7 @@
 	padding: 0.25rem 0.5rem;
 	border: 1px solid var(--border);
 	border-radius: 0.375rem;
-	background: var(--surface);
+	background: var(--panel);
 	color: var(--text);
 	width: 100%;
 	min-width: 0;
@@ -65,7 +65,7 @@
 	right: 0;
 	z-index: 100;
 	min-width: 12rem;
-	background: var(--surface);
+	background: var(--panel);
 	border: 1px solid var(--border);
 	border-radius: 0.5rem;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -99,7 +99,7 @@
 }
 
 .session-option-item:hover {
-	background: var(--surface-hover, rgba(0, 0, 0, 0.05));
+	background: var(--bg);
 }
 
 .session-option-item.danger-text {