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/schedule_edit.html

@@ -554,20 +554,16 @@ async function deleteSchedule() {
 
 // Show notification
 function showNotification(message, type = 'info') {
+    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);
 
     setTimeout(() => {
         notification.remove();