From 33c7b2ba650e5aee082890837ec1869bb65996db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Br=C3=BCckner?= <j.brueckner@airitsystems.de>
Date: Fri, 5 Jun 2026 10:09:52 +0200
Subject: [PATCH] fix(light-mode): JSON panel header dark, orange Ansible card
 overrides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JSON panel header (bg-slate-900) no longer flips to light gray inside
  the dark terminal block — scoped override keeps it #161b22
- Title text and copy button styled consistently for dark context
- Orange Ansible status card gets proper light-mode colors (orange-50 bg,
  orange-200 border, orange-600 text)
- application/json badge tweaked to text-indigo-400 for consistency
---
 src/components/BookingDetailsModal.tsx |  2 +-
 src/index.css                          | 47 ++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/BookingDetailsModal.tsx b/src/components/BookingDetailsModal.tsx
index 3d83e4a..fe9137c 100644
--- a/src/components/BookingDetailsModal.tsx
+++ b/src/components/BookingDetailsModal.tsx
@@ -320,7 +320,7 @@ export default function BookingDetailsModal({
                 <Database className="w-3.5 h-3.5" />
                 GET /api/bookings/{booking.id}
               </span>
-              <span className="text-indigo-300 bg-indigo-500/15 border border-indigo-500/30 px-1.5 py-0.5 rounded font-mono text-[9px]">application/json</span>
+              <span className="text-indigo-400 bg-indigo-500/20 border border-indigo-500/30 px-1.5 py-0.5 rounded font-mono text-[9px]">application/json</span>
             </div>
             <div className="p-4 relative overflow-x-auto max-h-[260px] overflow-y-auto">
               <button
diff --git a/src/index.css b/src/index.css
index 3f54ca7..38e34fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -518,21 +518,56 @@
   border-color: var(--border) !important;
 }
 
-/* Developer panel wrapper - restore dark terminal feel */
+/* JSON REST Response panel – always dark (code/terminal aesthetic) */
 :root.light #booking-details-modal .font-mono.bg-slate-950 {
   background-color: #0d1117 !important;
   color: #c9d1d9 !important;
   border-color: #30363d !important;
 }
 
-/* Terminal output area bg-slate-1000 */
-:root.light #booking-details-modal .bg-slate-1000 {
-  background-color: #0d1117 !important;
-  color: #c9d1d9 !important;
+/* Header bar inside the dark JSON panel – keep dark to match the block */
+:root.light #booking-details-modal .font-mono.bg-slate-950 .bg-slate-900 {
+  background-color: #161b22 !important;
   border-color: #30363d !important;
 }
 
-/* Ansible/terminal button trigger row bg-slate-900/40 - keep readable */
+/* Title label and icon in dark panel header */
+:root.light #booking-details-modal .font-mono.bg-slate-950 .text-indigo-400 {
+  color: #818cf8 !important;
+}
+
+/* Copy button inside dark panel */
+:root.light #booking-details-modal .font-mono.bg-slate-950 button {
+  background-color: #21262d !important;
+  border-color: #30363d !important;
+  color: #8b949e !important;
+}
+:root.light #booking-details-modal .font-mono.bg-slate-950 button:hover {
+  background-color: #30363d !important;
+  color: #f0f6fc !important;
+}
+
+/* Ansible status card – orange accent in light mode */
+:root.light #booking-details-modal .bg-orange-950\/10 {
+  background-color: #fff7ed !important;
+}
+:root.light #booking-details-modal .border-orange-900\/40 {
+  border-color: #fdba74 !important;
+}
+:root.light .text-orange-400 {
+  color: #ea580c !important;
+}
+:root.light .bg-orange-950\/60,
+:root.light .bg-orange-900\/40 {
+  background-color: #fed7aa !important;
+  border-color: #fb923c !important;
+  color: #9a3412 !important;
+}
+:root.light .border-orange-800\/50 {
+  border-color: #fb923c !important;
+}
+
+/* bg-slate-900/40 rows (notice box etc.) – light in light mode */
 :root.light #booking-details-modal .bg-slate-900\/40 {
   background-color: #f1f5f9 !important;
   border-color: var(--border) !important;