From eccd8c7fc1a3a3582dab8843e7cb3e600e2b7b87 Mon Sep 17 00:00:00 2001
From: Jonathan Payne <paynejd@gmail.com>
Date: Thu, 22 Oct 2026 13:55:45 -0400
Subject: [PATCH] closes OpenConceptLab/ocl_issues#2948 | Results tables:
 tinted header row (surface.s90) framed by surface.nv80 rules

The header row of TableResults and the grouped references table now uses the
surface.s90 token instead of white, keeping its bold labels. The header cells
and the results toolbar above them get a 1px surface.nv80 rule, so the header
stays a distinct band when the toolbar shows a selection (primary tint) and
when the selected row (primary.90, almost the same value as surface.s90) sits
right under it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TjM9dGow2KV1Gwr2dWQdph
---
 src/components/references/ReferenceSourceGroupedResults.jsx | 4 ++--
 src/components/search/SearchResults.jsx                     | 3 ++-
 src/components/search/TableResults.jsx                      | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/references/ReferenceSourceGroupedResults.jsx b/src/components/references/ReferenceSourceGroupedResults.jsx
index f54bfed39..13f34e6e0 100644
--- a/src/components/references/ReferenceSourceGroupedResults.jsx
+++ b/src/components/references/ReferenceSourceGroupedResults.jsx
@@ -268,9 +268,9 @@ const ReferenceSourceGroupedResults = ({ selected, results, loading, selectedToS
 
   return (
     <TableContainer style={style || {height: 'calc(var(--app-height) - 263px)'}} className={className}>
-      <Table stickyHeader size={size || 'small'} sx={{'.MuiTableCell-head': {lineHeight: '1.2rem', padding: '3px 16px', fontSize: '12px'}}}>
+      <Table stickyHeader size={size || 'small'} sx={{'.MuiTableCell-head': {lineHeight: '1.2rem', padding: '3px 16px', fontSize: '12px', borderBottom: 1, borderBottomColor: 'surface.nv80'}}}>
         <TableHead>
-          <TableRow sx={{background: '#FFF'}}>
+          <TableRow sx={{bgcolor: 'surface.s90'}}>
             <TableCell padding='checkbox' sx={{background: 'inherit'}} />
             <TableCell padding='checkbox' sx={{background: 'inherit'}} />
             <TableCell sx={{background: 'inherit'}}><b>{t('reference.reference')}</b></TableCell>
diff --git a/src/components/search/SearchResults.jsx b/src/components/search/SearchResults.jsx
index 1810d35e4..f7cba3100 100644
--- a/src/components/search/SearchResults.jsx
+++ b/src/components/search/SearchResults.jsx
@@ -40,7 +40,8 @@ const ResultsToolbar = props => {
         borderRadius: 0,
         pl: { sm: 1 },
         pr: { xs: 1, sm: 1 },
-        borderBottom: (disabled || display === 'card') ? 'none': '1px solid rgba(224, 224, 224, 1)',
+        borderBottom: (disabled || display === 'card') ? 'none': 1,
+        borderBottomColor: 'surface.nv80',
         minHeight: '48px !important'
       }, numSelected > 0 && {
         bgcolor: (theme) =>
diff --git a/src/components/search/TableResults.jsx b/src/components/search/TableResults.jsx
index 3da5fbab9..3acbb007c 100644
--- a/src/components/search/TableResults.jsx
+++ b/src/components/search/TableResults.jsx
@@ -40,7 +40,7 @@ const EnhancedTableHead = props => {
   };
   return (
     <TableHead sx={{background: props.bgColor}}>
-      <TableRow sx={{background: '#FFF'}}>
+      <TableRow sx={{bgcolor: 'surface.s90'}}>
         {
           onSelectAllClick &&
             <TableCell padding="checkbox" sx={{background: 'inherit'}}>
@@ -296,7 +296,7 @@ const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSel
       <Table
         stickyHeader
         size={size || 'small'}
-        sx={{'.MuiTableCell-head': {lineHeight: '1.2rem', padding: '3px 16px', fontSize: '12px'}}}
+        sx={{'.MuiTableCell-head': {lineHeight: '1.2rem', padding: '3px 16px', fontSize: '12px', borderBottom: 1, borderBottomColor: 'surface.nv80'}}}
       >
         <EnhancedTableHead
           size={size}