From b9b9b37636d424dda9a5d956fea23725ad5bdd99 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 08:25:45 +0000
Subject: [PATCH] Task #727: flush attendees table + rose external pill +
 darker card text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AttendeesTable got optional `flush` prop: flush mode drops
  rounded-xl/border/shadow, uses only border-t so the table attaches
  full-width inside the expanded booking details card. Dialog usage
  unchanged (non-flush card style).
- Attendee side "خارج الهيئة" pill changed violet → rose
  (bg-rose-100 text-rose-700), matching the external booking badge.
- Darker text in expanded card: title text-slate-900; grid values
  text-slate-800 font-semibold; removed max-w-2xl width cap.
- UI-only; tsc --noEmit clean; architect PASS.
---
 artifacts/tx-os/src/pages/protocol.tsx | 33 ++++++++++++++++++--------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 0bc476c7..ebfccb59 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1225,7 +1225,7 @@ export default function ProtocolPage() {
                   <span className="text-[11px] text-slate-400">
                     {t("protocol.bookings.table.title")}
                   </span>
-                  <div className="text-sm font-bold text-slate-800">
+                  <div className="text-sm font-bold text-slate-900">
                     {b.title}
                   </div>
                 </div>
@@ -1272,22 +1272,26 @@ export default function ProtocolPage() {
                       <div className="text-[11px] text-slate-400">
                         {label}
                       </div>
-                      <div className="text-xs font-medium text-slate-700 break-words">
+                      <div className="text-xs font-semibold text-slate-800 break-words">
                         {value != null && value !== "" ? value : "—"}
                       </div>
                     </div>
                   ))}
                 </div>
-                <div className="px-4 py-2.5">
-                  <div className="mb-1.5 text-[11px] font-semibold text-slate-400">
+                <div>
+                  <div className="px-4 pt-2.5 pb-1.5 text-[11px] font-semibold text-slate-400">
                     {t("protocol.bookings.keyAttendees")}
                   </div>
                   {b.keyAttendees && b.keyAttendees.length > 0 ? (
-                    <div className="max-w-2xl">
-                      <AttendeesTable attendees={b.keyAttendees} t={t} />
-                    </div>
+                    <AttendeesTable
+                      attendees={b.keyAttendees}
+                      t={t}
+                      flush
+                    />
                   ) : (
-                    <span className="text-xs text-slate-600">—</span>
+                    <span className="block px-4 pb-2.5 text-xs text-slate-600">
+                      —
+                    </span>
                   )}
                 </div>
                 {b.status === "rejected" && b.rejectionReason && (
@@ -2473,12 +2477,21 @@ export default function ProtocolPage() {
 function AttendeesTable({
   attendees,
   t,
+  flush = false,
 }: {
   attendees: KeyAttendee[];
   t: (key: string) => string;
+  flush?: boolean;
 }) {
   return (
-    <div className="overflow-x-auto rounded-xl border border-slate-200 shadow-sm">
+    <div
+      className={cn(
+        "overflow-x-auto",
+        flush
+          ? "border-t border-slate-200"
+          : "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">
@@ -2509,7 +2522,7 @@ function AttendeesTable({
                   className={cn(
                     "inline-block whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-medium",
                     a.side === "external"
-                      ? "bg-violet-100 text-violet-700"
+                      ? "bg-rose-100 text-rose-700"
                       : "bg-sky-100 text-sky-700",
                   )}
                 >