Improve UI design system and fix notification positioning

- Overhaul CSS with comprehensive design tokens (shadows, transitions, radii)
- Add hover effects and smooth transitions to cards, buttons, tables
- Improve typography hierarchy and color consistency
- Remove inline styles from 10 template files for better maintainability
- Add global notification container to ensure toasts appear above modals
- Update showNotification/showAlert functions to use centralized container
- Add accessibility improvements (focus states, reduced motion support)
- Improve responsive design and mobile styling
- Add print styles

app/web/templates/schedules.html

@@ -6,7 +6,7 @@
 <div class="row mt-4">
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center mb-4">
-            <h1 style="color: #60a5fa;">Scheduled Scans</h1>
+            <h1>Scheduled Scans</h1>
             <a href="{{ url_for('main.create_schedule') }}" class="btn btn-primary">
                 <i class="bi bi-plus-circle"></i> New Schedule
             </a>
@@ -47,7 +47,7 @@
     <div class="col-12">
         <div class="card">
             <div class="card-header">
-                <h5 class="mb-0" style="color: #60a5fa;">All Schedules</h5>
+                <h5 class="mb-0">All Schedules</h5>
             </div>
             <div class="card-body">
                 <div id="schedules-loading" class="text-center py-5">
@@ -352,21 +352,16 @@ async function deleteSchedule(scheduleId) {
 
 // Show notification
 function showNotification(message, type = 'info') {
-    // Create notification element
+    const container = document.getElementById('notification-container');
     const notification = document.createElement('div');
-    notification.className = `alert alert-${type} alert-dismissible fade show`;
-    notification.style.position = 'fixed';
-    notification.style.top = '20px';
-    notification.style.right = '20px';
-    notification.style.zIndex = '9999';
-    notification.style.minWidth = '300px';
+    notification.className = `alert alert-${type} alert-dismissible fade show mb-2`;
 
     notification.innerHTML = `
         ${message}
         <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
     `;
 
-    document.body.appendChild(notification);
+    container.appendChild(notification);
 
     // Auto-remove after 5 seconds
     setTimeout(() => {