From db1ee0d08b4385cffcf67dadcde5d3404b6155b2 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Tue, 4 Nov 2025 15:55:29 +1100
Subject: [PATCH] fix: Apply solid theme-aware background to Add Widget modal

The Add Widget modal is moved to document.body on first use (to escape
panel transform constraints), which causes it to lose the panel's solid
background context and become transparent.

Solution: After moving modal to body, apply the same theme-aware background
logic used in tab context menu and prompt dialogs:
- If themed: Copy data-theme attribute for CSS overrides
- If default: Read computed colors from panel, convert to opacity 1.0

Changes:
- dashboardIntegration.js: Add background fix after modal move to body
---
 src/systems/dashboard/dashboardIntegration.js | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/systems/dashboard/dashboardIntegration.js b/src/systems/dashboard/dashboardIntegration.js
index d452664..8c9aba3 100644
--- a/src/systems/dashboard/dashboardIntegration.js
+++ b/src/systems/dashboard/dashboardIntegration.js
@@ -487,6 +487,27 @@ function showAddWidgetDialog(manager) {
         }
         bodyModalsContainer.appendChild(modal);
         console.log('[RPG Companion] Moved Add Widget modal to document.body for proper viewport positioning');
+
+        // Apply theme-aware solid background since modal is now outside panel
+        const panel = document.querySelector('.rpg-panel');
+        const modalContent = modal.querySelector('.rpg-modal-content');
+        if (modalContent) {
+            if (panel && panel.dataset.theme) {
+                modalContent.dataset.theme = panel.dataset.theme;
+            } else if (panel) {
+                // For default theme: read computed colors from panel and apply as solid (1.0 opacity)
+                const computedStyle = window.getComputedStyle(panel);
+                const bgColor = computedStyle.getPropertyValue('--rpg-bg').trim();
+                const accentColor = computedStyle.getPropertyValue('--rpg-accent').trim();
+
+                // Convert rgba with 0.9 opacity to 1.0 opacity
+                const solidBg = bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)');
+                const solidAccent = accentColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)');
+
+                modalContent.style.background = `linear-gradient(135deg, ${solidAccent} 0%, ${solidBg} 100%)`;
+                modalContent.style.opacity = '1';
+            }
+        }
     }
 
     const widgetSelector = modal.querySelector('#rpg-widget-selector');