fix: workspace table white backgrounds, row hover, sort indicator tokens

- Add table-row-hover and sort-indicator-active tokens to eform/workspace
- Emit tokens as CSS custom properties in theme mixin
- Force white background on table and rows for Google Drive appearance
- Blue sort header text and arrow when column is actively sorted
- Row hover highlights in light gray (#f1f3f4)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: renemadsen

eform-client/src/scss/components/_workspace-overrides.scss

@@ -9,11 +9,11 @@ body.theme-workspace {
   // --- Table styling (Google Drive-like) ---
 
   .mat-mdc-table {
-    background: var(--content-card-bg, #ffffff);
+    background-color: var(--content-card-bg, #ffffff) !important;
   }
 
   .mat-mdc-header-row {
-    background: var(--content-card-bg, #ffffff);
+    background-color: var(--content-card-bg, #ffffff);
     height: 40px;
   }
 
@@ -25,6 +25,11 @@ body.theme-workspace {
 
   .mat-mdc-row {
     height: 40px;
+    background-color: var(--content-card-bg, #ffffff);
+
+    &:hover {
+      background-color: var(--table-row-hover, #f1f3f4) !important;
+    }
   }
 
   .mat-mdc-cell {
@@ -39,14 +44,23 @@ body.theme-workspace {
     border-bottom-style: solid;
   }
 
+  // Active sort indicator — blue arrow
+  .mat-sort-header-sorted .mat-sort-header-content {
+    color: var(--sort-indicator-active, #0b57d0);
+  }
+
+  .mat-sort-header-sorted .mat-sort-header-arrow {
+    color: var(--sort-indicator-active, #0b57d0) !important;
+  }
+
   // mtx-grid table overrides
   .mtx-grid {
     .mat-mdc-table {
-      background: var(--content-card-bg, #ffffff);
+      background-color: var(--content-card-bg, #ffffff) !important;
     }
 
     .mat-mdc-header-row {
-      background: var(--content-card-bg, #ffffff);
+      background-color: var(--content-card-bg, #ffffff);
       height: 40px;
     }
 
@@ -58,6 +72,11 @@ body.theme-workspace {
 
     .mat-mdc-row {
       height: 40px;
+      background-color: var(--content-card-bg, #ffffff);
+
+      &:hover {
+        background-color: var(--table-row-hover, #f1f3f4) !important;
+      }
     }
 
     .mat-mdc-cell {

eform-client/src/scss/themes/_eform.scss

@@ -186,6 +186,8 @@ $eform-tokens: (
       content-card-bg: #FFFFFF,
       content-card-radius: 0,
       content-card-margin: 0,
+      table-row-hover: #f5f5f5,
+      sort-indicator-active: #289694,
     ),
 
     // ----- Dark mode -----
@@ -313,6 +315,8 @@ $eform-tokens: (
       content-card-bg: #202122,
       content-card-radius: 0,
       content-card-margin: 0,
+      table-row-hover: #2a2a2a,
+      sort-indicator-active: #4FCAC8,
     ),
   ),
 );

eform-client/src/scss/themes/_theme-mixin.scss

@@ -223,6 +223,8 @@ $eform-m3-dark-theme: mat.define-theme((
   --content-card-bg: #{map.get($mode-colors, content-card-bg)};
   --content-card-radius: #{map.get($mode-colors, content-card-radius)};
   --content-card-margin: #{map.get($mode-colors, content-card-margin)};
+  --table-row-hover: #{map.get($mode-colors, table-row-hover)};
+  --sort-indicator-active: #{map.get($mode-colors, sort-indicator-active)};
 
   // Material component overrides
   --mat-table-row-item-outline-color: #{map.get($mode-colors, border)} !important;

eform-client/src/scss/themes/_workspace.scss

@@ -170,6 +170,8 @@ $workspace-tokens: (
       content-card-bg: #FFFFFF,
       content-card-radius: 16px,
       content-card-margin: 16px,
+      table-row-hover: #f1f3f4,
+      sort-indicator-active: #0b57d0,
     ),
 
     // ----- Dark mode -----
@@ -283,6 +285,8 @@ $workspace-tokens: (
       content-card-bg: #28292e,
       content-card-radius: 16px,
       content-card-margin: 16px,
+      table-row-hover: #2d2e33,
+      sort-indicator-active: #a8c7fa,
     ),
   ),
 );