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

@@ -5,7 +5,7 @@
 {% block content %}
 <div class="row mt-4">
     <div class="col-12">
-        <h1 class="mb-4" style="color: #60a5fa;">Dashboard</h1>
+        <h1 class="mb-4">Dashboard</h1>
     </div>
 </div>
 
@@ -42,7 +42,7 @@
     <div class="col-12">
         <div class="card">
             <div class="card-header">
-                <h5 class="mb-0" style="color: #60a5fa;">Quick Actions</h5>
+                <h5 class="mb-0">Quick Actions</h5>
             </div>
             <div class="card-body">
                 <button class="btn btn-primary btn-lg" onclick="showTriggerScanModal()">
@@ -63,7 +63,7 @@
     <div class="col-md-8">
         <div class="card">
             <div class="card-header">
-                <h5 class="mb-0" style="color: #60a5fa;">Scan Activity (Last 30 Days)</h5>
+                <h5 class="mb-0">Scan Activity (Last 30 Days)</h5>
             </div>
             <div class="card-body">
                 <div id="chart-loading" class="text-center py-4">
@@ -80,7 +80,7 @@
     <div class="col-md-4">
         <div class="card h-100">
             <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0" style="color: #60a5fa;">Upcoming Schedules</h5>
+                <h5 class="mb-0">Upcoming Schedules</h5>
                 <a href="{{ url_for('main.schedules') }}" class="btn btn-sm btn-secondary">Manage</a>
             </div>
             <div class="card-body">
@@ -105,7 +105,7 @@
     <div class="col-12">
         <div class="card">
             <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0" style="color: #60a5fa;">Recent Scans</h5>
+                <h5 class="mb-0">Recent Scans</h5>
                 <button class="btn btn-sm btn-secondary" onclick="refreshScans()">
                     <span id="refresh-text">Refresh</span>
                     <span id="refresh-spinner" class="spinner-border spinner-border-sm ms-1" style="display: none;"></span>
@@ -145,9 +145,9 @@
 <!-- Trigger Scan Modal -->
 <div class="modal fade" id="triggerScanModal" tabindex="-1">
     <div class="modal-dialog">
-        <div class="modal-content" style="background-color: #1e293b; border: 1px solid #334155;">
-            <div class="modal-header" style="border-bottom: 1px solid #334155;">
-                <h5 class="modal-title" style="color: #60a5fa;">Trigger New Scan</h5>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Trigger New Scan</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
@@ -172,7 +172,7 @@
                     <div id="trigger-error" class="alert alert-danger" style="display: none;"></div>
                 </form>
             </div>
-            <div class="modal-footer" style="border-top: 1px solid #334155;">
+            <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-primary" id="trigger-scan-btn" onclick="triggerScan()">
                     <span id="modal-trigger-text">Trigger Scan</span>