From d8ec4e71424c594a51f5cce162fe72a52711b358 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Fri, 29 May 2026 13:44:46 +0800
Subject: [PATCH] fix: tabular row selection visibility - CSS specificity fix
 for dark/light themes

- Dark theme: .tabular-cell color was overriding .tabular-row-selected color
  due to same specificity and later position. Added !important and combined
  selector .tabular-row-selected .tabular-cell to fix.
- Added background-color change for selected rows (both themes)
- Added cursor:pointer on .tabular-row for better UX
- Light theme: added blue-tinted background + darker text for selected rows
---
 wwwroot/shell_theme.css | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/wwwroot/shell_theme.css b/wwwroot/shell_theme.css
index 5b605e9..cfdce39 100644
--- a/wwwroot/shell_theme.css
+++ b/wwwroot/shell_theme.css
@@ -385,6 +385,10 @@ body {
 }
 
 /* ===== DataViewer Overrides for theme ===== */
+.tabular-row {
+  cursor: pointer;
+}
+
 [data-theme="dark"] .dataviewer-toolbar,
 [data-theme="dark"] .tabular,
 [data-theme="dark"] .data-row,
@@ -412,7 +416,20 @@ body {
 }
 
 [data-theme="dark"] .tabular-row-selected {
-  color: var(--sage-brand);
+  background-color: var(--sage-bg-hover) !important;
+}
+[data-theme="dark"] .tabular-row-selected,
+[data-theme="dark"] .tabular-row-selected .tabular-cell {
+  color: var(--sage-brand) !important;
+}
+
+/* Light theme selected row */
+[data-theme="light"] .tabular-row-selected {
+  background-color: #E0F2FE !important;
+}
+[data-theme="light"] .tabular-row-selected,
+[data-theme="light"] .tabular-row-selected .tabular-cell {
+  color: #0369A1 !important;
 }
 
 [data-theme="dark"] .tabular-cell {