From c2892685506a7e78f21a71b81eb053232fc8a544 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 6 May 2026 14:53:41 -0400
Subject: [PATCH] Fix Jitsi report dark surfaces

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 documentation/CLIENT__IDAA_and_customized_mods.md | 5 +++++
 src/routes/idaa/(idaa)/jitsi_reports/+page.svelte | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/documentation/CLIENT__IDAA_and_customized_mods.md b/documentation/CLIENT__IDAA_and_customized_mods.md
index 45914676..46f2d2fc 100644
--- a/documentation/CLIENT__IDAA_and_customized_mods.md
+++ b/documentation/CLIENT__IDAA_and_customized_mods.md
@@ -479,6 +479,11 @@ Two display modes, toggled via a button in the page header:
 
 Both modes use the same filtered data set — switching views does not reset filters.
 
+### Dark Mode / Surface Safety
+
+The page now uses explicit page and row surfaces so dark mode does not collapse into white-on-white
+text in either the regular app or the Novi iframe.
+
 ### Filters
 
 | Filter | Default | Logic |
diff --git a/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte b/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
index 2cd3e971..e1ed0c6b 100644
--- a/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
+++ b/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
@@ -457,7 +457,7 @@ function export_json() {
     <title>&AElig;: Jitsi Meeting Reports</title>
 </svelte:head>
 
-<div class="text-surface-950 dark:text-surface-50 w-full max-w-5xl space-y-4 p-4">
+<div class="bg-surface-50-950 text-surface-950 dark:bg-surface-950 dark:text-surface-50 min-h-screen w-full max-w-5xl space-y-4 p-4">
     <!-- Page header: view toggle + export buttons -->
     <div class="flex flex-row flex-wrap items-center justify-between gap-2">
         <h1 class="!text-surface-950 dark:!text-surface-50 text-xl font-bold">
@@ -812,7 +812,7 @@ function export_json() {
                                                 {@const others = m.real_participants.filter((p) => p.role !== 'moderator')}
                                                 {@const all_names = m.real_participants.map((p) => `${p.displayName} (${p.role})`).join('\n')}
                                                 <tr
-                                                    class="border-surface-200-800 hover:bg-surface-100-900 border-b transition-colors duration-200">
+                                                    class="border-surface-200-800 bg-surface-50-900 text-surface-950 hover:bg-surface-100-900 dark:bg-surface-900 dark:text-surface-50 border-b transition-colors duration-200">
                                                     <td
                                                         class="px-3 py-2 whitespace-nowrap">
                                                         {new Date(
@@ -1085,8 +1085,8 @@ function export_json() {
                                                 </thead>
                                                 <tbody>
                                                     {#each meeting.real_participants as participant (participant.displayName)}
-                                                        <tr
-                                                            class="border-surface-200-800 hover:bg-surface-100-900 border-b transition-colors duration-200">
+                                                <tr
+                                                    class="border-surface-200-800 bg-surface-50-900 text-surface-950 hover:bg-surface-100-900 dark:bg-surface-900 dark:text-surface-50 border-b transition-colors duration-200">
                                                             <td class="py-1"
                                                                 >{participant.displayName}</td>
                                                             <td class="py-1"