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

@@ -5,7 +5,7 @@
 {% block content %}
 <div class="row mt-4">
     <div class="col-12 d-flex justify-content-between align-items-center mb-4">
-        <h1 style="color: #60a5fa;">Alert Rules</h1>
+        <h1>Alert Rules</h1>
         <div>
             <a href="{{ url_for('main.alerts') }}" class="btn btn-outline-primary me-2">
                 <i class="bi bi-bell"></i> View Alerts
@@ -23,7 +23,7 @@
         <div class="card">
             <div class="card-body">
                 <h6 class="text-muted mb-2">Total Rules</h6>
-                <h3 class="mb-0" style="color: #60a5fa;">{{ rules | length }}</h3>
+                <h3 class="mb-0">{{ rules | length }}</h3>
             </div>
         </div>
     </div>
@@ -42,7 +42,7 @@
     <div class="col-12">
         <div class="card">
             <div class="card-header">
-                <h5 class="mb-0" style="color: #60a5fa;">Alert Rules Configuration</h5>
+                <h5 class="mb-0">Alert Rules Configuration</h5>
             </div>
             <div class="card-body">
                 {% if rules %}
@@ -121,9 +121,9 @@
                                                onchange="toggleRule({{ rule.id }}, this.checked)">
                                         <label class="form-check-label" for="rule-enabled-{{ rule.id }}">
                                             {% if rule.enabled %}
-                                                <span class="text-success">Active</span>
+                                                <span class="text-success ms-2">Active</span>
                                             {% else %}
-                                                <span class="text-muted">Inactive</span>
+                                                <span class="text-muted ms-2">Inactive</span>
                                             {% endif %}
                                         </label>
                                     </div>