feat: introduce overlay dialog component

public/index.html

@@ -263,6 +263,7 @@
     <script src="./scripts/components/PrimaryNodeComponent.js"></script>
     <script src="./scripts/components/NodeDetailsComponent.js"></script>
     <script src="./scripts/components/ClusterMembersComponent.js"></script>
+    <script src="./scripts/components/OverlayDialogComponent.js"></script>
     <script src="./scripts/components/FirmwareComponent.js"></script>
     <script src="./scripts/components/FirmwareUploadComponent.js"></script>
     <!-- Container/view components after their deps -->

public/scripts/components/ClusterViewComponent.js

@@ -33,6 +33,9 @@ class ClusterViewComponent extends Component {
         
         // Track if we've already loaded data to prevent unnecessary reloads
         this.dataLoaded = false;
+        
+        // Initialize overlay dialog
+        this.overlayDialog = null;
     }
 
     mount() {
@@ -50,6 +53,9 @@ class ClusterViewComponent extends Component {
         // Set up deploy button event listener
         this.setupDeployButton();
         
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Only load data if we haven't already or if the view model is empty
         const members = this.viewModel.get('members');
         const shouldLoadData = true; // always perform initial refresh quickly
@@ -106,6 +112,32 @@ class ClusterViewComponent extends Component {
         }
     }
     
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('cluster-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'cluster-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+    
     async handleDeploy() {
         logger.debug('ClusterViewComponent: Deploy button clicked, opening firmware upload drawer...');
         
@@ -113,7 +145,14 @@ class ClusterViewComponent extends Component {
         const filteredMembers = this.clusterMembersComponent ? this.clusterMembersComponent.getFilteredMembers() : [];
         
         if (!filteredMembers || filteredMembers.length === 0) {
-            alert('No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.');
+            this.showConfirmationDialog({
+                title: 'No Nodes Available',
+                message: 'No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         

public/scripts/components/FirmwareComponent.js

@@ -7,6 +7,9 @@ class FirmwareComponent extends Component {
         logger.debug('FirmwareComponent: Container:', container);
         logger.debug('FirmwareComponent: Container ID:', container?.id);
         
+        // Initialize overlay dialog
+        this.overlayDialog = null;
+        
         // Check if the dropdown exists in the container
         if (container) {
             const dropdown = container.querySelector('#specific-node-select');
@@ -105,6 +108,9 @@ class FirmwareComponent extends Component {
         
         logger.debug('FirmwareComponent: Mounting...');
         
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Check if the dropdown exists when mounted
         const dropdown = this.findElement('#specific-node-select');
         logger.debug('FirmwareComponent: Mount - dropdown found:', !!dropdown);
@@ -131,6 +137,24 @@ class FirmwareComponent extends Component {
         this.updateDeployButton();
     }
 
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('firmware-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'firmware-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
     handleFileSelect(event) {
         const file = event.target.files[0];
         this.viewModel.setSelectedFile(file);
@@ -160,15 +184,69 @@ class FirmwareComponent extends Component {
         const specificNode = this.viewModel.get('specificNode');
         
         if (!file) {
-            alert('Please select a firmware file first.');
+            this.showConfirmationDialog({
+                title: 'No File Selected',
+                message: 'Please select a firmware file first.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
         if (targetType === 'specific' && !specificNode) {
-            alert('Please select a specific node to update.');
+            this.showConfirmationDialog({
+                title: 'No Node Selected',
+                message: 'Please select a specific node to update.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
+        // Show confirmation dialog for deployment
+        this.showDeploymentConfirmation(file, targetType, specificNode);
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+
+    showDeploymentConfirmation(file, targetType, specificNode) {
+        let title, message;
+        
+        if (targetType === 'all') {
+            const nodes = this.viewModel.get('availableNodes') || [];
+            title = 'Deploy to All Nodes';
+            message = `Upload firmware "${file.name}" to all ${nodes.length} nodes?<br><br>This will update:<br>${nodes.map(n => `• ${n.hostname || n.ip}`).join('<br>')}`;
+        } else if (targetType === 'specific') {
+            title = 'Deploy to Specific Node';
+            message = `Upload firmware "${file.name}" to node ${specificNode}?`;
+        } else if (targetType === 'labels') {
+            const nodes = this.viewModel.getAffectedNodesByLabels();
+            const labels = this.viewModel.get('selectedLabels') || [];
+            title = 'Deploy to Labeled Nodes';
+            message = `Upload firmware "${file.name}" to ${nodes.length} node(s) matching labels (${labels.join(', ')})?<br><br>This will update:<br>${nodes.map(n => `• ${n.hostname || n.ip}`).join('<br>')}`;
+        }
+        
+        this.showConfirmationDialog({
+            title: title,
+            message: message,
+            confirmText: 'Deploy',
+            cancelText: 'Cancel',
+            onConfirm: () => this.performDeployment(file, targetType, specificNode),
+            onCancel: () => {}
+        });
+    }
+
+    async performDeployment(file, targetType, specificNode) {
         try {
             this.viewModel.startUpload();
             
@@ -185,7 +263,14 @@ class FirmwareComponent extends Component {
             
         } catch (error) {
             logger.error('Firmware deployment failed:', error);
-            alert(`Deployment failed: ${error.message}`);
+            this.showConfirmationDialog({
+                title: 'Deployment Failed',
+                message: `Deployment failed: ${error.message}`,
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
         } finally {
             this.viewModel.completeUpload();
         }
@@ -198,13 +283,17 @@ class FirmwareComponent extends Component {
             const nodes = response.members || [];
             
             if (nodes.length === 0) {
-                alert('No nodes available for firmware update.');
+                this.showConfirmationDialog({
+                    title: 'No Nodes Available',
+                    message: 'No nodes available for firmware update.',
+                    confirmText: 'OK',
+                    cancelText: null,
+                    onConfirm: () => {},
+                    onCancel: null
+                });
                 return;
             }
             
-            const confirmed = confirm(`Upload firmware to all ${nodes.length} nodes? This will update: ${nodes.map(n => n.hostname || n.ip).join(', ')}`);
-            if (!confirmed) return;
-            
             // Show upload progress area
             this.showUploadProgress(file, nodes);
             
@@ -222,9 +311,6 @@ class FirmwareComponent extends Component {
 
     async uploadToSpecificNode(file, nodeIp) {
         try {
-            const confirmed = confirm(`Upload firmware to node ${nodeIp}?`);
-            if (!confirmed) return;
-            
             // Show upload progress area
             this.showUploadProgress(file, [{ ip: nodeIp, hostname: nodeIp }]);
             
@@ -266,12 +352,16 @@ class FirmwareComponent extends Component {
         try {
             const nodes = this.viewModel.getAffectedNodesByLabels();
             if (!nodes || nodes.length === 0) {
-                alert('No nodes match the selected labels.');
+                this.showConfirmationDialog({
+                    title: 'No Matching Nodes',
+                    message: 'No nodes match the selected labels.',
+                    confirmText: 'OK',
+                    cancelText: null,
+                    onConfirm: () => {},
+                    onCancel: null
+                });
                 return;
             }
-            const labels = this.viewModel.get('selectedLabels') || [];
-            const confirmed = confirm(`Upload firmware to ${nodes.length} node(s) matching labels (${labels.join(', ')})?`);
-            if (!confirmed) return;
             
             // Show upload progress area
             this.showUploadProgress(file, nodes);

public/scripts/components/FirmwareUploadComponent.js

@@ -6,6 +6,9 @@ class FirmwareUploadComponent extends Component {
         logger.debug('FirmwareUploadComponent: Constructor called');
         logger.debug('FirmwareUploadComponent: Container:', container);
         logger.debug('FirmwareUploadComponent: Container ID:', container?.id);
+        
+        // Initialize overlay dialog
+        this.overlayDialog = null;
     }
 
     setupEventListeners() {
@@ -37,6 +40,9 @@ class FirmwareUploadComponent extends Component {
         
         logger.debug('FirmwareUploadComponent: Mounting...');
         
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Initialize UI state
         this.updateFileInfo();
         this.updateDeployButton();
@@ -49,6 +55,32 @@ class FirmwareUploadComponent extends Component {
         this.updateDeployButton();
     }
 
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('firmware-upload-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'firmware-upload-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+
     handleFileSelect(event) {
         const file = event.target.files[0];
         this.viewModel.setSelectedFile(file);
@@ -59,28 +91,54 @@ class FirmwareUploadComponent extends Component {
         const targetNodes = this.viewModel.get('targetNodes');
         
         if (!file) {
-            alert('Please select a firmware file first.');
+            this.showConfirmationDialog({
+                title: 'No File Selected',
+                message: 'Please select a firmware file first.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
         if (!targetNodes || targetNodes.length === 0) {
-            alert('No target nodes available for firmware update.');
+            this.showConfirmationDialog({
+                title: 'No Target Nodes',
+                message: 'No target nodes available for firmware update.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
+        // Show confirmation dialog for deployment
+        this.showDeploymentConfirmation(file, targetNodes);
+    }
+
+    showDeploymentConfirmation(file, targetNodes) {
+        const title = 'Deploy Firmware';
+        const message = `Upload firmware "${file.name}" to ${targetNodes.length} node(s)?<br><br>Target nodes:<br>${targetNodes.map(n => `• ${n.hostname || n.ip} (${n.ip})`).join('<br>')}<br><br>This will update the firmware on all selected nodes.`;
+        
+        this.showConfirmationDialog({
+            title: title,
+            message: message,
+            confirmText: 'Deploy',
+            cancelText: 'Cancel',
+            onConfirm: () => this.performDeployment(file, targetNodes),
+            onCancel: () => {}
+        });
+    }
+
+    async performDeployment(file, targetNodes) {
         try {
             this.viewModel.startUpload();
             
             // Show progress overlay to block UI interactions
             this.showProgressOverlay();
             
-            const confirmed = confirm(`Upload firmware to ${targetNodes.length} node(s)?\n\nTarget nodes:\n${targetNodes.map(n => `• ${n.hostname || n.ip} (${n.ip})`).join('\n')}\n\nThis will update the firmware on all selected nodes.`);
-            if (!confirmed) {
-                this.viewModel.completeUpload();
-                this.hideProgressOverlay();
-                return;
-            }
-            
             // Show upload progress area
             this.showUploadProgress(file, targetNodes);
             
@@ -95,7 +153,14 @@ class FirmwareUploadComponent extends Component {
             
         } catch (error) {
             logger.error('Firmware deployment failed:', error);
-            alert(`Deployment failed: ${error.message}`);
+            this.showConfirmationDialog({
+                title: 'Deployment Failed',
+                message: `Deployment failed: ${error.message}`,
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
         } finally {
             this.viewModel.completeUpload();
             this.hideProgressOverlay();

public/scripts/components/OverlayDialogComponent.js

@@ -0,0 +1,126 @@
+// Overlay Dialog Component - Reusable confirmation dialog
+class OverlayDialogComponent extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+        this.isVisible = false;
+        this.onConfirm = null;
+        this.onCancel = null;
+        this.title = '';
+        this.message = '';
+        this.confirmText = 'Yes';
+        this.cancelText = 'No';
+    }
+
+    mount() {
+        super.mount();
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Close overlay when clicking outside or pressing escape
+        this.addEventListener(this.container, 'click', (e) => {
+            if (!this.isVisible) return;
+            if (e.target === this.container) {
+                this.hide();
+            }
+        });
+
+        this.addEventListener(document, 'keydown', (e) => {
+            if (e.key === 'Escape' && this.isVisible) {
+                this.hide();
+            }
+        });
+    }
+
+    show(options = {}) {
+        const {
+            title = 'Confirm Action',
+            message = 'Are you sure you want to proceed?',
+            confirmText = 'Yes',
+            cancelText = 'No',
+            onConfirm = null,
+            onCancel = null
+        } = options;
+
+        this.title = title;
+        this.message = message;
+        this.confirmText = confirmText;
+        this.cancelText = cancelText;
+        this.onConfirm = onConfirm;
+        this.onCancel = onCancel;
+
+        this.render();
+        this.container.classList.add('visible');
+        this.isVisible = true;
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+        this.isVisible = false;
+        
+        // Call cancel callback if provided
+        if (this.onCancel) {
+            this.onCancel();
+        }
+    }
+
+    handleConfirm() {
+        this.hide();
+        
+        // Call confirm callback if provided
+        if (this.onConfirm) {
+            this.onConfirm();
+        }
+    }
+
+    render() {
+        this.container.innerHTML = `
+            <div class="overlay-dialog-content">
+                <div class="overlay-dialog-header">
+                    <h3 class="overlay-dialog-title">${this.title}</h3>
+                    <button class="overlay-dialog-close" type="button">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
+                            <path d="M18 6L6 18M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+                <div class="overlay-dialog-body">
+                    <div class="overlay-dialog-message">${this.message}</div>
+                </div>
+                <div class="overlay-dialog-footer">
+                    <button class="overlay-dialog-btn overlay-dialog-btn-cancel" type="button">
+                        ${this.cancelText}
+                    </button>
+                    <button class="overlay-dialog-btn overlay-dialog-btn-confirm" type="button">
+                        ${this.confirmText}
+                    </button>
+                </div>
+            </div>
+        `;
+
+        // Add event listeners to buttons
+        const closeBtn = this.container.querySelector('.overlay-dialog-close');
+        const cancelBtn = this.container.querySelector('.overlay-dialog-btn-cancel');
+        const confirmBtn = this.container.querySelector('.overlay-dialog-btn-confirm');
+
+        if (closeBtn) {
+            this.addEventListener(closeBtn, 'click', () => this.hide());
+        }
+
+        if (cancelBtn) {
+            this.addEventListener(cancelBtn, 'click', () => this.hide());
+        }
+
+        if (confirmBtn) {
+            this.addEventListener(confirmBtn, 'click', () => this.handleConfirm());
+        }
+    }
+
+    unmount() {
+        // Clean up event listeners
+        this.removeAllEventListeners();
+        
+        // Call parent unmount
+        super.unmount();
+    }
+}

public/styles/main.css

@@ -6100,3 +6100,131 @@ html {
         justify-content: center;
     }
 }
+
+/* Overlay Dialog Styles */
+.overlay-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.overlay-dialog.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.overlay-dialog-content {
+    background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    max-height: 90vh;
+    overflow: hidden;
+    transform: scale(0.9) translateY(20px);
+    transition: all 0.3s ease;
+}
+
+.overlay-dialog.visible .overlay-dialog-content {
+    transform: scale(1) translateY(0);
+}
+
+.overlay-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 24px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.overlay-dialog-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #ecf0f1;
+    margin: 0;
+}
+
+.overlay-dialog-close {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ecf0f1;
+}
+
+.overlay-dialog-body {
+    padding: 16px 24px;
+}
+
+.overlay-dialog-message {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0;
+    white-space: normal;
+}
+
+.overlay-dialog-footer {
+    display: flex;
+    gap: 12px;
+    padding: 16px 24px 24px;
+    justify-content: flex-end;
+}
+
+.overlay-dialog-btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    min-width: 80px;
+}
+
+.overlay-dialog-btn-cancel {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.overlay-dialog-btn-cancel:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: #ecf0f1;
+    transform: translateY(-1px);
+}
+
+.overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+.overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}

public/styles/theme.css

@@ -1095,6 +1095,61 @@
     }
 }
 
+/* Overlay Dialog Light Theme Styles */
+[data-theme="light"] .overlay-dialog-content {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
+}
+
+[data-theme="light"] .overlay-dialog-header {
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="light"] .overlay-dialog-title {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+}
+
+[data-theme="light"] .overlay-dialog-close {
+    color: var(--text-tertiary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-message {
+    color: var(--text-secondary) !important;
+    white-space: normal;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.05) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: var(--text-secondary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel:hover {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.08) 100%);
+    border-color: rgba(148, 163, 184, 0.3);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
 /* Ultra-specific mobile navigation override for light theme */
 @media (max-width: 768px) {
     html[data-theme="light"] .main-navigation.mobile-open .nav-left {
@@ -1246,3 +1301,58 @@
         box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
     }
 }
+
+/* Overlay Dialog Light Theme Styles */
+[data-theme="light"] .overlay-dialog-content {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
+}
+
+[data-theme="light"] .overlay-dialog-header {
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="light"] .overlay-dialog-title {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+}
+
+[data-theme="light"] .overlay-dialog-close {
+    color: var(--text-tertiary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-message {
+    color: var(--text-secondary) !important;
+    white-space: normal;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.05) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: var(--text-secondary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel:hover {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.08) 100%);
+    border-color: rgba(148, 163, 184, 0.3);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}