From 5d3053595505e12fb083233cc9a03b84e0a1e40c Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 08:50:59 +0000
Subject: [PATCH] Task #729: darker borders in booking details card + bigger
 centered attendees heading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Expanded booking details card in protocol.tsx: outer frame slate-200 →
  slate-400; header/grid row and column dividers slate-100/200 → slate-300
  so the grid reads as a real table.
- AttendeesTable: border darkening is flush-mode only (flush top border,
  header row slate-300, body rows slate-200); dialog (non-flush) keeps its
  previous lighter shades per architect review fix.
- "أبرز الحضور" heading: text-center text-base font-bold text-slate-900
  (was text-sm text-slate-800).
- UI-only; tsc --noEmit clean; architect issue addressed.
---
 artifacts/tx-os/src/pages/protocol.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 666a6935..fca52c10 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1220,8 +1220,8 @@ export default function ProtocolPage() {
         {expanded && (
           <TableRow key={`${b.id}-details`} className="bg-slate-50/80">
             <TableCell colSpan={detailColSpan} className="p-3">
-              <div className="overflow-hidden rounded-lg border border-slate-200 bg-white">
-                <div className="border-b border-slate-200 bg-slate-50 px-4 py-2.5">
+              <div className="overflow-hidden rounded-lg border border-slate-400 bg-white">
+                <div className="border-b border-slate-300 bg-slate-50 px-4 py-2.5">
                   <span className="text-[11px] text-slate-400">
                     {t("protocol.bookings.table.title")}
                   </span>
@@ -1229,7 +1229,7 @@ export default function ProtocolPage() {
                     {b.title}
                   </div>
                 </div>
-                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 divide-x divide-x-reverse divide-slate-100 border-b border-slate-200">
+                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 divide-x divide-x-reverse divide-slate-300 border-b border-slate-300">
                   {(
                     [
                       [t("protocol.bookings.requester"), b.requesterName],
@@ -1267,7 +1267,7 @@ export default function ProtocolPage() {
                   ).map(([label, value], i) => (
                     <div
                       key={i}
-                      className="border-b border-slate-100 px-4 py-2"
+                      className="border-b border-slate-300 px-4 py-2"
                     >
                       <div className="text-[11px] text-slate-400">
                         {label}
@@ -1279,7 +1279,7 @@ export default function ProtocolPage() {
                   ))}
                 </div>
                 <div>
-                  <div className="px-4 pt-3 pb-2 text-center text-sm font-bold text-slate-800">
+                  <div className="px-4 pt-3 pb-2 text-center text-base font-bold text-slate-900">
                     {t("protocol.bookings.keyAttendees")}
                   </div>
                   {b.keyAttendees && b.keyAttendees.length > 0 ? (
@@ -2488,13 +2488,18 @@ function AttendeesTable({
       className={cn(
         "overflow-x-auto",
         flush
-          ? "border-t border-slate-200"
+          ? "border-t border-slate-300"
           : "rounded-xl border border-slate-200 shadow-sm",
       )}
     >
       <Table>
         <TableHeader>
-          <TableRow className="border-b border-slate-200 bg-slate-100/80 hover:bg-slate-100/80">
+          <TableRow
+            className={cn(
+              "border-b bg-slate-100/80 hover:bg-slate-100/80",
+              flush ? "border-slate-300" : "border-slate-200",
+            )}
+          >
             <TableHead className="h-10 w-10 whitespace-nowrap px-4 text-center text-xs font-bold uppercase tracking-wide text-slate-600">
               #
             </TableHead>
@@ -2512,7 +2517,10 @@ function AttendeesTable({
           {attendees.map((a, i) => (
             <TableRow
               key={i}
-              className="border-b border-slate-100 last:border-b-0 even:bg-slate-50/60"
+              className={cn(
+                "border-b last:border-b-0 even:bg-slate-50/60",
+                flush ? "border-slate-200" : "border-slate-100",
+              )}
             >
               <TableCell className="w-10 px-4 py-2.5 text-center">
                 <span className="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">