fixed tables and alerts

frontend/src/components/ui/Alert.ts

@@ -2,17 +2,31 @@ export function showAlert(msg: string, type: 'success' | 'error', elementId: str
     const alertEl = document.getElementById(elementId);
     if (alertEl) {
         alertEl.textContent = msg;
-        alertEl.className = `p-4 rounded-lg mb-6 text-sm md:text-base ${
-            type === 'success' 
-            ? 'bg-green/20 text-green border border-green/30' 
-            : 'bg-red/20 text-red border border-red/30'
-        }`;
+        
+        // Define colors based on type using theme variables
+        const colorVar = type === 'success' ? 'var(--green)' : 'var(--red)';
+        
+        // Apply inline styles for guaranteed high contrast and glassy look
+        alertEl.style.display = 'block';
+        alertEl.style.backgroundColor = `color-mix(in srgb, ${colorVar} 15%, transparent)`;
+        alertEl.style.color = 'var(--text)';
+        alertEl.style.border = `1px solid color-mix(in srgb, ${colorVar} 40%, transparent)`;
+        alertEl.style.padding = '1rem';
+        alertEl.style.borderRadius = '0.75rem';
+        alertEl.style.marginBottom = '1.5rem';
+        alertEl.style.fontSize = '0.875rem';
+        alertEl.style.fontWeight = '600';
+        alertEl.style.backdropFilter = 'blur(12px)';
+        alertEl.style.textAlign = 'center';
+        alertEl.style.boxShadow = '0 4px 15px -5px rgba(0,0,0,0.3)';
+        
         alertEl.classList.remove('hidden');
         
         window.scrollTo({ top: 0, behavior: 'smooth' });
         
         setTimeout(() => { 
             alertEl.classList.add('hidden'); 
+            alertEl.style.display = 'none';
         }, 5000);
     }
 }