feat: Add operator dashboard, alerts, analytics, and simulator pages

- Implemented new HTML templates for operator dashboard, alerts, analytics, and simulator functionalities.
- Created a structured layout for displaying alerts and analytics data.
- Added JavaScript files for real-time updates and notifications.
- Established a testing framework with comprehensive tests for API endpoints, authentication, crowd and queue services, and simulator logic.
- Included fixtures for testing with authenticated clients for both attendees and operators.

.env.example

@@ -0,0 +1,26 @@
+# Flask
+FLASK_SECRET_KEY=your-secret-key-here
+FLASK_ENV=development
+FLASK_DEBUG=1
+
+# Firebase
+FIREBASE_CREDENTIALS_PATH=path/to/serviceAccountKey.json
+FIREBASE_API_KEY=your-firebase-api-key
+FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
+FIREBASE_PROJECT_ID=your-project-id
+FIREBASE_STORAGE_BUCKET=your-project.appspot.com
+FIREBASE_MESSAGING_SENDER_ID=your-sender-id
+FIREBASE_APP_ID=your-app-id
+
+# Google Gemini
+GEMINI_API_KEY=your-gemini-api-key
+
+# Google Maps
+GOOGLE_MAPS_API_KEY=your-google-maps-api-key
+
+# Google Cloud Translation
+GOOGLE_TRANSLATE_API_KEY=your-translate-api-key
+
+# App Config
+USE_MOCK_SERVICES=true
+VENUE_CAPACITY=50000

.gitignore

@@ -0,0 +1,32 @@
+# Environment
+.env
+*.env
+serviceAccountKey.json
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+.venv/
+env/
+*.egg-info/
+dist/
+build/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+.pytest_cache/
+htmlcov/
+.coverage

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Create a user to run the app (Hugging Face Spaces requirement)
+RUN useradd -m -u 1000 user
+
+# Install required packages
+COPY requirements.txt /app/
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install --no-cache-dir gunicorn
+
+# Copy the rest of the application
+COPY . /app/
+
+# Set ownership to the non-root user so the app can create and write to game.db
+RUN chown -R user:user /app
+
+# Switch to the non-root user
+USER user
+
+# Expose port 7860 which is the default for Hugging Face Spaces
+EXPOSE 7860
+
+# Initialize the database and then start gunicorn
+CMD ["sh", "-c", "python -c 'from app import init_db; init_db()' && gunicorn -b 0.0.0.0:7860 app:app"]

app.py

@@ -0,0 +1,131 @@
+"""VenueFlow — Flask application factory."""
+
+import logging
+from flask import Flask, redirect, url_for, render_template
+from config import get_config
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+)
+logger = logging.getLogger(__name__)
+
+
+def create_app(config_class=None):
+    """Application factory."""
+    app = Flask(__name__)
+
+    # Load configuration
+    if config_class is None:
+        config_class = get_config()
+    app.config.from_object(config_class)
+
+    # ─── Security Headers ────────────────────────────────────────────────
+    @app.after_request
+    def set_security_headers(response):
+        response.headers["X-Content-Type-Options"] = "nosniff"
+        response.headers["X-Frame-Options"] = "DENY"
+        response.headers["X-XSS-Protection"] = "1; mode=block"
+        response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
+        if not app.debug:
+            response.headers["Strict-Transport-Security"] = (
+                "max-age=31536000; includeSubDomains"
+            )
+        return response
+
+    # ─── Initialize Services ─────────────────────────────────────────────
+    from services.firebase_service import init_firebase
+    from services.gemini_service import init_gemini
+    from services.translation_service import init_translation
+
+    init_firebase(app)
+    init_gemini(app)
+    init_translation(app)
+
+    # ─── Initialize Demo Data ────────────────────────────────────────────
+    from services.simulator import (
+        create_demo_venue,
+        create_demo_queue_stations,
+        create_demo_event,
+        Simulator,
+    )
+    from services.crowd_service import CrowdService
+    from services.queue_service import QueueService
+    from services.maps_service import MapsService
+    from services.notification_service import NotificationService
+
+    venue = create_demo_venue()
+    event = create_demo_event()
+    crowd_service = CrowdService()
+    queue_service = QueueService()
+    maps_service = MapsService(venue)
+    notification_service = NotificationService()
+
+    # Register queue stations
+    queue_stations = create_demo_queue_stations()
+    queue_service.register_stations(queue_stations)
+
+    # Create simulator
+    simulator = Simulator(venue, queue_service, crowd_service, notification_service, event)
+
+    # Wire SSE broadcasting
+    from blueprints.sse import broadcast_update
+
+    def on_sim_update():
+        broadcast_update({
+            "venue": venue.to_dict(),
+            "event": event.to_dict(),
+            "sim_status": simulator.get_status(),
+        })
+
+    simulator.set_update_callback(on_sim_update)
+
+    # Store services in app config for blueprint access
+    app.config["VENUE_OBJ"] = venue
+    app.config["EVENT_OBJ"] = event
+    app.config["CROWD_SERVICE"] = crowd_service
+    app.config["QUEUE_SERVICE"] = queue_service
+    app.config["MAPS_SERVICE"] = maps_service
+    app.config["NOTIFICATION_SERVICE"] = notification_service
+    app.config["SIMULATOR_OBJ"] = simulator
+
+    # Run initial tick to populate data
+    simulator.tick()
+
+    # ─── Register Blueprints ─────────────────────────────────────────────
+    from blueprints.auth import auth_bp
+    from blueprints.attendee import attendee_bp
+    from blueprints.operator import operator_bp
+    from blueprints.api import api_bp
+    from blueprints.sse import sse_bp
+
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(attendee_bp)
+    app.register_blueprint(operator_bp)
+    app.register_blueprint(api_bp)
+    app.register_blueprint(sse_bp)
+
+    # ─── Root Route ──────────────────────────────────────────────────────
+    @app.route("/")
+    def index():
+        return redirect(url_for("auth.login"))
+
+    # ─── Error Handlers ──────────────────────────────────────────────────
+    @app.errorhandler(404)
+    def not_found(e):
+        return render_template("errors/404.html"), 404
+
+    @app.errorhandler(500)
+    def server_error(e):
+        return render_template("errors/500.html"), 500
+
+    logger.info("🏟️ VenueFlow app created successfully")
+    return app
+
+
+# ─── Entry Point ─────────────────────────────────────────────────────────────
+
+if __name__ == "__main__":
+    app = create_app()
+    app.run(host="0.0.0.0", port=5000, debug=True, threaded=True)

blueprints/__init__.py

@@ -0,0 +1 @@
+"""Blueprints package."""

blueprints/api.py

@@ -0,0 +1,359 @@
+"""REST API endpoints for real-time data access."""
+
+from flask import Blueprint, jsonify, request, session, current_app
+import bleach
+
+api_bp = Blueprint("api", __name__, url_prefix="/api")
+
+
+def _get_services():
+    return {
+        "venue": current_app.config.get("VENUE_OBJ"),
+        "event": current_app.config.get("EVENT_OBJ"),
+        "crowd": current_app.config.get("CROWD_SERVICE"),
+        "queue": current_app.config.get("QUEUE_SERVICE"),
+        "maps": current_app.config.get("MAPS_SERVICE"),
+        "notifications": current_app.config.get("NOTIFICATION_SERVICE"),
+        "simulator": current_app.config.get("SIMULATOR_OBJ"),
+    }
+
+
+# ─── Crowd Data ──────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/crowd/summary")
+def crowd_summary():
+    """Get venue crowd summary."""
+    svc = _get_services()
+    if not svc["crowd"] or not svc["venue"]:
+        return jsonify({"error": "Service unavailable"}), 503
+    return jsonify(svc["crowd"].get_venue_summary(svc["venue"]))
+
+
+@api_bp.route("/crowd/heatmap")
+def crowd_heatmap():
+    """Get heatmap data for visualization."""
+    svc = _get_services()
+    if not svc["crowd"] or not svc["venue"]:
+        return jsonify({"error": "Service unavailable"}), 503
+    return jsonify(svc["crowd"].get_crowd_flow_data(svc["venue"]))
+
+
+@api_bp.route("/crowd/zone/<zone_id>")
+def crowd_zone(zone_id):
+    """Get specific zone data."""
+    svc = _get_services()
+    venue = svc["venue"]
+    if not venue:
+        return jsonify({"error": "Service unavailable"}), 503
+    zone = venue.get_zone(zone_id)
+    if not zone:
+        return jsonify({"error": "Zone not found"}), 404
+    trend = svc["crowd"].get_zone_trend(zone_id) if svc["crowd"] else []
+    return jsonify({"zone": zone.to_dict(), "trend": trend})
+
+
+@api_bp.route("/crowd/recommend")
+def crowd_recommend():
+    """Get recommended least crowded zones."""
+    svc = _get_services()
+    zone_type = request.args.get("type")
+    return jsonify(svc["crowd"].get_recommended_zones(svc["venue"], zone_type))
+
+
+# ─── Queue Data ──────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/queue/summary")
+def queue_summary():
+    """Get queue overview."""
+    svc = _get_services()
+    if not svc["queue"]:
+        return jsonify({"error": "Service unavailable"}), 503
+    return jsonify(svc["queue"].get_queue_summary())
+
+
+@api_bp.route("/queue/stations")
+def queue_stations():
+    """Get all queue stations."""
+    svc = _get_services()
+    category = request.args.get("category")
+    if category:
+        return jsonify(svc["queue"].get_stations_by_category(category))
+    return jsonify(svc["queue"].get_all_stations())
+
+
+@api_bp.route("/queue/shortest")
+def queue_shortest():
+    """Find shortest queue."""
+    svc = _get_services()
+    category = request.args.get("category")
+    result = svc["queue"].get_shortest_queue(category)
+    if result:
+        return jsonify(result)
+    return jsonify({"error": "No open stations found"}), 404
+
+
+@api_bp.route("/queue/join", methods=["POST"])
+def queue_join():
+    """Join a virtual queue."""
+    svc = _get_services()
+    user_id = session.get("user_id")
+    if not user_id:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data = request.get_json()
+    station_id = data.get("station_id", "") if data else ""
+    if not station_id:
+        return jsonify({"error": "Station ID required"}), 400
+
+    ticket = svc["queue"].join_virtual_queue(user_id, station_id)
+    if ticket:
+        return jsonify(ticket)
+    return jsonify({"error": "Could not join queue"}), 400
+
+
+@api_bp.route("/queue/tickets")
+def queue_tickets():
+    """Get user's virtual queue tickets."""
+    svc = _get_services()
+    user_id = session.get("user_id")
+    if not user_id:
+        return jsonify({"error": "Not authenticated"}), 401
+    return jsonify(svc["queue"].get_user_tickets(user_id))
+
+
+@api_bp.route("/queue/cancel", methods=["POST"])
+def queue_cancel():
+    """Cancel a virtual queue ticket."""
+    svc = _get_services()
+    user_id = session.get("user_id")
+    if not user_id:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data = request.get_json()
+    ticket_id = data.get("ticket_id", "") if data else ""
+    if svc["queue"].cancel_ticket(ticket_id, user_id):
+        return jsonify({"success": True})
+    return jsonify({"error": "Could not cancel ticket"}), 400
+
+
+# ─── Navigation ──────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/navigate/route")
+def navigate_route():
+    """Get route between two zones."""
+    svc = _get_services()
+    from_zone = request.args.get("from")
+    to_zone = request.args.get("to")
+    accessible = request.args.get("accessible", "false").lower() == "true"
+
+    if not from_zone or not to_zone:
+        return jsonify({"error": "from and to zone IDs required"}), 400
+
+    route = svc["maps"].find_route(from_zone, to_zone, accessible)
+    if route:
+        return jsonify(route)
+    return jsonify({"error": "Route not found"}), 404
+
+
+@api_bp.route("/navigate/nearest")
+def navigate_nearest():
+    """Find nearest zone of a type."""
+    svc = _get_services()
+    from_zone = request.args.get("from")
+    target_type = request.args.get("type")
+    accessible = request.args.get("accessible", "false").lower() == "true"
+
+    if not from_zone or not target_type:
+        return jsonify({"error": "from zone and type required"}), 400
+
+    result = svc["maps"].find_nearest(from_zone, target_type, accessible)
+    if result:
+        return jsonify(result)
+    return jsonify({"error": "No matching zone found"}), 404
+
+
+@api_bp.route("/navigate/pois")
+def navigate_pois():
+    """Get all points of interest."""
+    svc = _get_services()
+    return jsonify(svc["maps"].get_points_of_interest())
+
+
+# ─── Chatbot ─────────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/chat", methods=["POST"])
+def chat():
+    """Send a message to the AI chatbot."""
+    from services import gemini_service
+
+    user_id = session.get("user_id")
+    if not user_id:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data = request.get_json()
+    message = bleach.clean(data.get("message", "").strip()) if data else ""
+    if not message:
+        return jsonify({"error": "Message required"}), 400
+    if len(message) > 500:
+        return jsonify({"error": "Message too long (max 500 chars)"}), 400
+
+    # Build venue context for the AI
+    svc = _get_services()
+    venue_context = None
+    if svc["crowd"] and svc["venue"]:
+        summary = svc["crowd"].get_venue_summary(svc["venue"])
+        queue_summary = svc["queue"].get_queue_summary() if svc["queue"] else {}
+        venue_context = {
+            "overall_occupancy": summary.get("overall_occupancy"),
+            "hotspots": [h["name"] for h in summary.get("hotspots", [])[:3]],
+            "queue_categories": queue_summary.get("categories", {}),
+        }
+
+    history = data.get("history", [])
+    response = gemini_service.get_chat_response(message, venue_context, history)
+
+    return jsonify({"response": response})
+
+
+@api_bp.route("/chat/suggestions")
+def chat_suggestions():
+    """Get chatbot quick-reply suggestions."""
+    from services import gemini_service
+    return jsonify(gemini_service.get_quick_suggestions())
+
+
+# ─── Notifications ───────────────────────────────────────────────────────────
+
+
+@api_bp.route("/notifications")
+def notifications():
+    """Get notifications for the current user."""
+    svc = _get_services()
+    role = session.get("user_role", "attendee")
+    limit = request.args.get("limit", 20, type=int)
+    return jsonify(svc["notifications"].get_alerts(role=role, limit=limit))
+
+
+@api_bp.route("/notifications/unread")
+def notifications_unread():
+    """Get unread notification count."""
+    svc = _get_services()
+    role = session.get("user_role", "attendee")
+    return jsonify({"count": svc["notifications"].get_unread_count(role)})
+
+
+@api_bp.route("/notifications/read", methods=["POST"])
+def notifications_read():
+    """Mark a notification as read."""
+    svc = _get_services()
+    data = request.get_json()
+    alert_id = data.get("id", "") if data else ""
+    if svc["notifications"].mark_read(alert_id):
+        return jsonify({"success": True})
+    return jsonify({"error": "Alert not found"}), 404
+
+
+# ─── Simulator Control ───────────────────────────────────────────────────────
+
+
+@api_bp.route("/simulator/status")
+def simulator_status():
+    """Get simulator status."""
+    svc = _get_services()
+    simulator = svc["simulator"]
+    if not simulator:
+        return jsonify({"error": "Simulator unavailable"}), 503
+    return jsonify(simulator.get_status())
+
+
+@api_bp.route("/simulator/start", methods=["POST"])
+def simulator_start():
+    """Start the simulation."""
+    if session.get("user_role") not in ("operator", "admin"):
+        return jsonify({"error": "Operator access required"}), 403
+    svc = _get_services()
+    svc["simulator"].start()
+    return jsonify({"success": True, "status": svc["simulator"].get_status()})
+
+
+@api_bp.route("/simulator/stop", methods=["POST"])
+def simulator_stop():
+    """Stop the simulation."""
+    if session.get("user_role") not in ("operator", "admin"):
+        return jsonify({"error": "Operator access required"}), 403
+    svc = _get_services()
+    svc["simulator"].stop()
+    return jsonify({"success": True, "status": svc["simulator"].get_status()})
+
+
+@api_bp.route("/simulator/phase", methods=["POST"])
+def simulator_phase():
+    """Change simulation phase."""
+    if session.get("user_role") not in ("operator", "admin"):
+        return jsonify({"error": "Operator access required"}), 403
+    svc = _get_services()
+    data = request.get_json()
+    phase = data.get("phase", "") if data else ""
+    svc["simulator"].set_phase(phase)
+    return jsonify({"success": True, "status": svc["simulator"].get_status()})
+
+
+@api_bp.route("/simulator/speed", methods=["POST"])
+def simulator_speed():
+    """Change simulation speed."""
+    if session.get("user_role") not in ("operator", "admin"):
+        return jsonify({"error": "Operator access required"}), 403
+    svc = _get_services()
+    data = request.get_json()
+    speed = float(data.get("speed", 1.0)) if data else 1.0
+    svc["simulator"].set_speed(speed)
+    return jsonify({"success": True, "status": svc["simulator"].get_status()})
+
+
+# ─── Translation ─────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/translate", methods=["POST"])
+def translate():
+    """Translate text."""
+    from services import translation_service
+
+    data = request.get_json()
+    text = data.get("text", "") if data else ""
+    target = data.get("target_lang", "en") if data else "en"
+
+    if not text:
+        return jsonify({"error": "Text required"}), 400
+
+    translated = translation_service.translate_text(text, target)
+    return jsonify({"translated": translated, "target_lang": target})
+
+
+@api_bp.route("/languages")
+def languages():
+    """Get supported languages."""
+    from services import translation_service
+    return jsonify(translation_service.get_supported_languages())
+
+
+# ─── Event Info ──────────────────────────────────────────────────────────────
+
+
+@api_bp.route("/event")
+def event_info():
+    """Get current event information."""
+    svc = _get_services()
+    event = svc["event"]
+    return jsonify(event.to_dict() if event else {})
+
+
+@api_bp.route("/venue")
+def venue_info():
+    """Get venue information."""
+    svc = _get_services()
+    venue = svc["venue"]
+    return jsonify(venue.to_dict() if venue else {})

blueprints/attendee.py

@@ -0,0 +1,113 @@
+"""Attendee-facing routes."""
+
+from flask import Blueprint, render_template, session, current_app
+
+attendee_bp = Blueprint("attendee", __name__, url_prefix="/app")
+
+
+def _get_services():
+    """Get shared services from app context."""
+    return {
+        "venue": current_app.config.get("VENUE_OBJ"),
+        "event": current_app.config.get("EVENT_OBJ"),
+        "crowd": current_app.config.get("CROWD_SERVICE"),
+        "queue": current_app.config.get("QUEUE_SERVICE"),
+        "maps": current_app.config.get("MAPS_SERVICE"),
+        "notifications": current_app.config.get("NOTIFICATION_SERVICE"),
+    }
+
+
+@attendee_bp.before_request
+def require_login():
+    """Require login for all attendee pages."""
+    from blueprints.auth import login_required
+    # Check inline to avoid decorator issues with blueprints
+    if "user_id" not in session:
+        from flask import redirect, url_for, flash
+        flash("Please log in to continue.", "warning")
+        return redirect(url_for("auth.login"))
+
+
+@attendee_bp.route("/")
+def home():
+    """Attendee home page with venue overview."""
+    svc = _get_services()
+    venue = svc["venue"]
+    event = svc["event"]
+    crowd = svc["crowd"]
+    queue = svc["queue"]
+
+    venue_summary = crowd.get_venue_summary(venue) if crowd else {}
+    queue_summary = queue.get_queue_summary() if queue else {}
+
+    return render_template(
+        "attendee/home.html",
+        venue=venue.to_dict() if venue else {},
+        event=event.to_dict() if event else {},
+        venue_summary=venue_summary,
+        queue_summary=queue_summary,
+        user_name=session.get("user_name", "Guest"),
+    )
+
+
+@attendee_bp.route("/heatmap")
+def heatmap():
+    """Live crowd heatmap page."""
+    svc = _get_services()
+    venue = svc["venue"]
+    crowd = svc["crowd"]
+
+    heatmap_data = crowd.get_crowd_flow_data(venue) if crowd else {}
+
+    return render_template(
+        "attendee/heatmap.html",
+        venue=venue.to_dict() if venue else {},
+        heatmap_data=heatmap_data,
+        maps_api_key=current_app.config.get("GOOGLE_MAPS_API_KEY", ""),
+    )
+
+
+@attendee_bp.route("/queues")
+def queues():
+    """Queue status and virtual queue page."""
+    svc = _get_services()
+    queue = svc["queue"]
+
+    queue_summary = queue.get_queue_summary() if queue else {}
+    user_tickets = queue.get_user_tickets(session.get("user_id", "")) if queue else []
+
+    return render_template(
+        "attendee/queues.html",
+        queue_summary=queue_summary,
+        user_tickets=user_tickets,
+    )
+
+
+@attendee_bp.route("/navigate")
+def navigate():
+    """Wayfinding and navigation page."""
+    svc = _get_services()
+    venue = svc["venue"]
+    maps_svc = svc["maps"]
+
+    pois = maps_svc.get_points_of_interest() if maps_svc else []
+
+    return render_template(
+        "attendee/navigate.html",
+        venue=venue.to_dict() if venue else {},
+        pois=pois,
+        maps_api_key=current_app.config.get("GOOGLE_MAPS_API_KEY", ""),
+    )
+
+
+@attendee_bp.route("/profile")
+def profile():
+    """User profile and accessibility settings."""
+    from services.translation_service import get_supported_languages
+
+    return render_template(
+        "attendee/profile.html",
+        user_name=session.get("user_name", "Guest"),
+        user_email=session.get("user_email", ""),
+        languages=get_supported_languages(),
+    )

blueprints/auth.py

@@ -0,0 +1,139 @@
+"""Authentication blueprint with Firebase Auth (mock fallback)."""
+
+from flask import Blueprint, render_template, request, redirect, url_for, session, flash, current_app
+from services import firebase_service
+import bleach
+import re
+
+auth_bp = Blueprint("auth", __name__, url_prefix="/auth")
+
+
+def _sanitize(text: str) -> str:
+    """Sanitize user input."""
+    return bleach.clean(text.strip())
+
+
+def _validate_email(email: str) -> bool:
+    """Basic email validation."""
+    pattern = r"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+    return bool(re.match(pattern, email))
+
+
+@auth_bp.route("/login", methods=["GET", "POST"])
+def login():
+    """Login page and handler."""
+    if request.method == "POST":
+        email = _sanitize(request.form.get("email", ""))
+        password = request.form.get("password", "")
+
+        if not email or not password:
+            flash("Please fill in all fields.", "error")
+            return render_template("auth/login.html")
+
+        if not _validate_email(email):
+            flash("Please enter a valid email address.", "error")
+            return render_template("auth/login.html")
+
+        # Authenticate
+        if current_app.config.get("USE_MOCK_SERVICES"):
+            user = firebase_service.verify_mock_login(email, password)
+        else:
+            # TODO: Implement Firebase Auth token verification
+            user = firebase_service.verify_mock_login(email, password)
+
+        if user:
+            session["user_id"] = user["uid"]
+            session["user_email"] = user["email"]
+            session["user_name"] = user["display_name"]
+            session["user_role"] = user["role"]
+
+            flash(f"Welcome back, {user['display_name']}!", "success")
+
+            if user["role"] in ("operator", "admin"):
+                return redirect(url_for("operator.dashboard"))
+            return redirect(url_for("attendee.home"))
+        else:
+            flash("Invalid email or password.", "error")
+
+    return render_template("auth/login.html")
+
+
+@auth_bp.route("/register", methods=["GET", "POST"])
+def register():
+    """Registration page and handler."""
+    if request.method == "POST":
+        email = _sanitize(request.form.get("email", ""))
+        password = request.form.get("password", "")
+        confirm_password = request.form.get("confirm_password", "")
+        display_name = _sanitize(request.form.get("display_name", ""))
+
+        errors = []
+        if not email or not password or not display_name:
+            errors.append("Please fill in all fields.")
+        if not _validate_email(email):
+            errors.append("Please enter a valid email address.")
+        if len(password) < 6:
+            errors.append("Password must be at least 6 characters.")
+        if password != confirm_password:
+            errors.append("Passwords do not match.")
+
+        if errors:
+            for err in errors:
+                flash(err, "error")
+            return render_template("auth/register.html")
+
+        # Create user
+        user = firebase_service.create_mock_user(email, password, display_name)
+        if user:
+            session["user_id"] = user["uid"]
+            session["user_email"] = user["email"]
+            session["user_name"] = user["display_name"]
+            session["user_role"] = user["role"]
+            flash("Account created successfully! Welcome to VenueFlow.", "success")
+            return redirect(url_for("attendee.home"))
+        else:
+            flash("Could not create account. Please try again.", "error")
+
+    return render_template("auth/register.html")
+
+
+@auth_bp.route("/logout")
+def logout():
+    """Clear session and redirect to login."""
+    session.clear()
+    flash("You have been logged out.", "info")
+    return redirect(url_for("auth.login"))
+
+
+# ─── Helpers ─────────────────────────────────────────────────────────────────
+
+
+def login_required(f):
+    """Decorator to require authentication."""
+    from functools import wraps
+
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if "user_id" not in session:
+            flash("Please log in to continue.", "warning")
+            return redirect(url_for("auth.login"))
+        return f(*args, **kwargs)
+
+    return decorated
+
+
+def operator_required(f):
+    """Decorator to require operator role."""
+    from functools import wraps
+
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if "user_id" not in session:
+            flash("Please log in to continue.", "warning")
+            return redirect(url_for("auth.login"))
+        if session.get("user_role") not in ("operator", "admin"):
+            flash("Access denied. Operator privileges required.", "error")
+            return redirect(url_for("attendee.home"))
+        return f(*args, **kwargs)
+
+    return decorated

blueprints/operator.py

@@ -0,0 +1,105 @@
+"""Operator dashboard routes."""
+
+from flask import Blueprint, render_template, session, current_app
+
+operator_bp = Blueprint("operator", __name__, url_prefix="/operator")
+
+
+def _get_services():
+    """Get shared services from app context."""
+    return {
+        "venue": current_app.config.get("VENUE_OBJ"),
+        "event": current_app.config.get("EVENT_OBJ"),
+        "crowd": current_app.config.get("CROWD_SERVICE"),
+        "queue": current_app.config.get("QUEUE_SERVICE"),
+        "notifications": current_app.config.get("NOTIFICATION_SERVICE"),
+        "simulator": current_app.config.get("SIMULATOR_OBJ"),
+    }
+
+
+@operator_bp.before_request
+def require_operator():
+    """Require operator role for all operator pages."""
+    if "user_id" not in session:
+        from flask import redirect, url_for, flash
+        flash("Please log in to continue.", "warning")
+        return redirect(url_for("auth.login"))
+    if session.get("user_role") not in ("operator", "admin"):
+        from flask import redirect, url_for, flash
+        flash("Access denied. Operator privileges required.", "error")
+        return redirect(url_for("attendee.home"))
+
+
+@operator_bp.route("/")
+@operator_bp.route("/dashboard")
+def dashboard():
+    """Main operator dashboard."""
+    svc = _get_services()
+    venue = svc["venue"]
+    event = svc["event"]
+    crowd = svc["crowd"]
+    queue = svc["queue"]
+    simulator = svc["simulator"]
+
+    venue_summary = crowd.get_venue_summary(venue) if crowd else {}
+    queue_summary = queue.get_queue_summary() if queue else {}
+    sim_status = simulator.get_status() if simulator else {}
+
+    return render_template(
+        "operator/dashboard.html",
+        venue=venue.to_dict() if venue else {},
+        event=event.to_dict() if event else {},
+        venue_summary=venue_summary,
+        queue_summary=queue_summary,
+        sim_status=sim_status,
+        user_name=session.get("user_name", "Operator"),
+    )
+
+
+@operator_bp.route("/analytics")
+def analytics():
+    """Historical analytics view."""
+    svc = _get_services()
+    venue = svc["venue"]
+    crowd = svc["crowd"]
+
+    venue_summary = crowd.get_venue_summary(venue) if crowd else {}
+
+    return render_template(
+        "operator/analytics.html",
+        venue_summary=venue_summary,
+    )
+
+
+@operator_bp.route("/alerts")
+def alerts():
+    """Alert management view."""
+    svc = _get_services()
+    notifications = svc["notifications"]
+
+    all_alerts = notifications.get_alerts(role="operator", limit=100) if notifications else []
+
+    return render_template(
+        "operator/alerts.html",
+        alerts=all_alerts,
+    )
+
+
+@operator_bp.route("/simulator")
+def simulator_view():
+    """Simulation control panel."""
+    svc = _get_services()
+    simulator = svc["simulator"]
+    event = svc["event"]
+
+    from models.event import EventPhase
+    phases = [{"value": p.value, "label": p.label, "desc": p.description} for p in EventPhase]
+
+    sim_status = simulator.get_status() if simulator else {}
+
+    return render_template(
+        "operator/simulator.html",
+        sim_status=sim_status,
+        event=event.to_dict() if event else {},
+        phases=phases,
+    )

blueprints/sse.py

@@ -0,0 +1,67 @@
+"""Server-Sent Events (SSE) endpoint for real-time push updates."""
+
+import json
+import time
+import queue
+import logging
+from flask import Blueprint, Response, session, current_app
+
+logger = logging.getLogger(__name__)
+
+sse_bp = Blueprint("sse", __name__, url_prefix="/sse")
+
+# Thread-safe message queues for SSE clients
+_client_queues = {}
+
+
+def broadcast_update(data: dict, event_type: str = "update"):
+    """Send an update to all connected SSE clients."""
+    message = f"event: {event_type}\ndata: {json.dumps(data)}\n\n"
+    dead_clients = []
+
+    for client_id, q in _client_queues.items():
+        try:
+            q.put_nowait(message)
+        except queue.Full:
+            dead_clients.append(client_id)
+
+    # Clean up dead clients
+    for cid in dead_clients:
+        _client_queues.pop(cid, None)
+
+
+def _generate_events(client_id: str):
+    """Generator for SSE events."""
+    q = queue.Queue(maxsize=50)
+    _client_queues[client_id] = q
+
+    try:
+        while True:
+            try:
+                # Wait for a message (with timeout for heartbeat)
+                message = q.get(timeout=15)
+                yield message
+            except queue.Empty:
+                # Send heartbeat to keep connection alive
+                yield f"event: heartbeat\ndata: {json.dumps({'time': time.time()})}\n\n"
+    except GeneratorExit:
+        pass
+    finally:
+        _client_queues.pop(client_id, None)
+
+
+@sse_bp.route("/stream")
+def stream():
+    """SSE stream endpoint for real-time updates."""
+    user_id = session.get("user_id", "anon")
+    client_id = f"{user_id}_{time.time()}"
+
+    return Response(
+        _generate_events(client_id),
+        mimetype="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",
+        },
+    )

config.py

@@ -0,0 +1,71 @@
+"""Application configuration loaded from environment variables."""
+
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+
+class Config:
+    """Base configuration."""
+
+    SECRET_KEY = os.getenv("FLASK_SECRET_KEY", "dev-secret-key-change-in-production")
+    WTF_CSRF_ENABLED = True
+
+    # Firebase
+    FIREBASE_CREDENTIALS_PATH = os.getenv("FIREBASE_CREDENTIALS_PATH", "")
+    FIREBASE_API_KEY = os.getenv("FIREBASE_API_KEY", "")
+    FIREBASE_AUTH_DOMAIN = os.getenv("FIREBASE_AUTH_DOMAIN", "")
+    FIREBASE_PROJECT_ID = os.getenv("FIREBASE_PROJECT_ID", "")
+    FIREBASE_STORAGE_BUCKET = os.getenv("FIREBASE_STORAGE_BUCKET", "")
+    FIREBASE_MESSAGING_SENDER_ID = os.getenv("FIREBASE_MESSAGING_SENDER_ID", "")
+    FIREBASE_APP_ID = os.getenv("FIREBASE_APP_ID", "")
+
+    # Google Gemini
+    GEMINI_API_KEY = os.getenv("GEMINI_API_KEY", "")
+
+    # Google Maps
+    GOOGLE_MAPS_API_KEY = os.getenv("GOOGLE_MAPS_API_KEY", "")
+
+    # Google Cloud Translation
+    GOOGLE_TRANSLATE_API_KEY = os.getenv("GOOGLE_TRANSLATE_API_KEY", "")
+
+    # App
+    USE_MOCK_SERVICES = os.getenv("USE_MOCK_SERVICES", "true").lower() == "true"
+    VENUE_CAPACITY = int(os.getenv("VENUE_CAPACITY", "50000"))
+
+
+class DevelopmentConfig(Config):
+    """Development configuration."""
+
+    DEBUG = True
+    TESTING = False
+
+
+class ProductionConfig(Config):
+    """Production configuration."""
+
+    DEBUG = False
+    TESTING = False
+    USE_MOCK_SERVICES = False
+
+
+class TestingConfig(Config):
+    """Testing configuration."""
+
+    TESTING = True
+    WTF_CSRF_ENABLED = False
+    USE_MOCK_SERVICES = True
+
+
+config_map = {
+    "development": DevelopmentConfig,
+    "production": ProductionConfig,
+    "testing": TestingConfig,
+}
+
+
+def get_config():
+    """Return config class based on FLASK_ENV."""
+    env = os.getenv("FLASK_ENV", "development")
+    return config_map.get(env, DevelopmentConfig)

implementation_plan.md

@@ -0,0 +1,535 @@
+# VenueFlow — Smart Sporting Venue Experience Platform
+
+A Flask-based real-time system that transforms the physical event experience at large-scale sporting venues by addressing crowd movement, waiting times, and real-time coordination.
+
+---
+
+## Problem Statement
+
+Attendees at large sporting events face:
+- **Crowd congestion** at gates, concourses, and exits
+- **Long queues** at food stalls, merchandise, and restrooms
+- **Poor wayfinding** inside massive, unfamiliar venues
+- **No real-time information** about crowd conditions or wait times
+- **Accessibility barriers** for attendees with disabilities
+
+VenueFlow solves these with an intelligent, real-time web platform for both **fans** (mobile-first attendee app) and **operators** (venue management dashboard).
+
+---
+
+## Architecture Overview
+
+```
+┌──────────────────────────────────────────────────────────┐
+│                    FRONTEND (Jinja2 + JS)                │
+│  ┌─────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
+│  │ Attendee│  │ Operator │  │ Heatmap  │  │ Chatbot  │  │
+│  │   App   │  │Dashboard │  │  View    │  │  Widget  │  │
+│  └────┬────┘  └────┬─────┘  └────┬─────┘  └────┬─────┘  │
+│       └─────────────┴────────────┴──────────────┘        │
+│                          │ SSE / Fetch                    │
+├──────────────────────────┼───────────────────────────────┤
+│                    FLASK BACKEND                         │
+│  ┌──────────┐ ┌────────────┐ ┌──────────────┐           │
+│  │ Auth &   │ │ Real-time  │ │  AI Engine   │           │
+│  │ Security │ │  Engine    │ │  (Gemini)    │           │
+│  └──────────┘ └────────────┘ └──────────────┘           │
+│  ┌──────────┐ ┌────────────┐ ┌──────────────┐           │
+│  │ Queue    │ │ Crowd      │ │ Notification │           │
+│  │ Manager  │ │ Analytics  │ │   Service    │           │
+│  └──────────┘ └────────────┘ └──────────────┘           │
+├──────────────────────────────────────────────────────────┤
+│                   GOOGLE SERVICES                        │
+│  ┌──────────┐ ┌────────────┐ ┌──────────────┐           │
+│  │ Firebase │ │Google Maps │ │   Gemini     │           │
+│  │ Firestore│ │  JS API    │ │   2.5 API    │           │
+│  └──────────┘ └────────────┘ └──────────────┘           │
+│  ┌──────────┐ ┌────────────┐                             │
+│  │ Cloud    │ │ Firebase   │                             │
+│  │Translate │ │   Auth     │                             │
+│  └──────────┘ └────────────┘                             │
+└──────────────────────────────────────────────────────────┘
+```
+
+### Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| **Backend** | Python 3.11+, Flask, Flask-SocketIO |
+| **Frontend** | Jinja2 templates, Vanilla JS, CSS3 |
+| **Database** | Firebase Firestore (real-time sync) |
+| **Auth** | Firebase Authentication |
+| **Maps** | Google Maps JavaScript API |
+| **AI** | Google Gemini 2.5 Flash API |
+| **Translation** | Google Cloud Translation API |
+| **Real-time** | Server-Sent Events (SSE) + Firebase listeners |
+| **Deployment** | Docker-ready for Cloud Run |
+
+---
+
+## User Review Required
+
+> [!IMPORTANT]
+> **Google API Keys Required**: You will need to provide API keys / service accounts for:
+> - Firebase project (Firestore + Auth)
+> - Google Maps JavaScript API key
+> - Google Gemini API key
+> - Google Cloud Translation API key
+>
+> These will be stored in a `.env` file (never committed to git).
+
+> [!WARNING]
+> **Simulated Sensor Data**: Since we don't have physical IoT sensors, the system will include a **simulation engine** that generates realistic crowd density, queue lengths, and movement patterns. This makes the demo fully functional without hardware.
+
+> [!IMPORTANT]
+> **Two User Interfaces**:
+> 1. **Attendee App** (mobile-first) — For fans at the venue
+> 2. **Operator Dashboard** — For venue staff/management
+>
+> Both are served from the same Flask app. Please confirm this dual-interface approach.
+
+---
+
+## Proposed Changes
+
+### Project Structure
+
+```
+EventManager/
+├── app.py                      # Flask application factory
+├── config.py                   # Configuration & env management
+├── requirements.txt            # Python dependencies
+├── Dockerfile                  # Container deployment
+├── .env.example                # Environment variable template
+├── .gitignore
+│
+├── blueprints/
+│   ├── __init__.py
+│   ├── auth.py                 # Authentication routes
+│   ├── attendee.py             # Attendee-facing routes
+│   ├── operator.py             # Operator dashboard routes
+│   ├── api.py                  # REST API endpoints
+│   └── sse.py                  # Server-Sent Events stream
+│
+├── services/
+│   ├── __init__.py
+│   ├── firebase_service.py     # Firebase Firestore & Auth
+│   ├── crowd_service.py        # Crowd density analytics
+│   ├── queue_service.py        # Queue management logic
+│   ├── gemini_service.py       # AI chatbot & recommendations
+│   ├── maps_service.py         # Maps & wayfinding
+│   ├── translation_service.py  # Multi-language support
+│   ├── notification_service.py # Alert & notification engine
+│   └── simulator.py            # Realistic data simulation
+│
+├── models/
+│   ├── __init__.py
+│   ├── venue.py                # Venue, Zone, Gate models
+│   ├── queue.py                # Queue & wait time models
+│   └── event.py                # Event & attendee models
+│
+├── static/
+│   ├── css/
+│   │   ├── base.css            # Design system & tokens
+│   │   ├── attendee.css        # Attendee app styles
+│   │   ├── operator.css        # Operator dashboard styles
+│   │   └── accessibility.css   # A11y overrides
+│   ├── js/
+│   │   ├── app.js              # Core JS utilities
+│   │   ├── heatmap.js          # Crowd heatmap rendering
+│   │   ├── queue.js            # Queue display & updates
+│   │   ├── wayfinding.js       # Navigation & routing
+│   │   ├── chatbot.js          # Gemini chatbot widget
+│   │   ├── notifications.js   # Real-time notification handler
+│   │   ├── sse-client.js       # SSE connection manager
+│   │   ├── dashboard.js        # Operator dashboard logic
+│   │   ├── simulator-ui.js     # Simulation controls
+│   │   └── accessibility.js   # A11y toggle & preferences
+│   └── images/
+│       └── (generated assets)
+│
+├── templates/
+│   ├── base.html               # Base template with a11y
+│   ├── attendee/
+│   │   ├── home.html           # Fan landing page
+│   │   ├── heatmap.html        # Live crowd heatmap
+│   │   ├── queues.html         # Queue status & booking
+│   │   ├── navigate.html       # Wayfinding page
+│   │   └── profile.html        # Preferences & a11y settings
+│   ├── operator/
+│   │   ├── dashboard.html      # Main control dashboard
+│   │   ├── analytics.html      # Historical analytics
+│   │   ├── alerts.html         # Alert management
+│   │   └── simulator.html      # Simulation controls
+│   ├── auth/
+│   │   ├── login.html
+│   │   └── register.html
+│   └── components/
+│       ├── chatbot.html        # Chatbot widget partial
+│       ├── notification.html   # Notification toast partial
+│       └── nav.html            # Navigation component
+│
+└── tests/
+    ├── __init__.py
+    ├── conftest.py             # Pytest fixtures
+    ├── test_auth.py            # Authentication tests
+    ├── test_crowd_service.py   # Crowd analytics tests
+    ├── test_queue_service.py   # Queue management tests
+    ├── test_api.py             # API endpoint tests
+    ├── test_simulator.py       # Simulator logic tests
+    └── test_accessibility.py   # Accessibility audit tests
+```
+
+---
+
+### Component 1: Core Application & Configuration
+
+#### [NEW] `app.py`
+- Flask application factory pattern with blueprint registration
+- CORS, CSP, and security headers middleware
+- Error handlers (404, 500) with accessible error pages
+- SSE stream endpoint registration
+
+#### [NEW] `config.py`
+- Environment-based configuration (dev/staging/prod)
+- Secure loading of all API keys from `.env`
+- Firebase, Gemini, Maps, Translation config constants
+
+#### [NEW] `requirements.txt`
+Key dependencies:
+```
+flask>=3.1
+flask-socketio>=5.3
+firebase-admin>=6.5
+google-generativeai>=0.8
+google-cloud-translate>=3.16
+gunicorn>=22.0
+python-dotenv>=1.0
+pytest>=8.0
+```
+
+---
+
+### Component 2: Authentication (Firebase Auth)
+
+#### [NEW] `blueprints/auth.py`
+- Login / Register routes using Firebase Authentication
+- Role-based access: `attendee` vs `operator`
+- Session management with secure HTTP-only cookies
+- CSRF protection on all forms
+
+#### [NEW] `services/firebase_service.py`
+- Firebase Admin SDK initialization (singleton)
+- Firestore CRUD helpers with connection pooling
+- Real-time listener setup for zone/queue collections
+- Token verification for authenticated API calls
+
+---
+
+### Component 3: Real-Time Crowd Heatmap
+
+#### [NEW] `services/crowd_service.py`
+- Processes zone density data from Firestore
+- Calculates crowd density levels: 🟢 Low / 🟡 Moderate / 🔴 High / ⚫ Critical
+- Threshold-based alerting triggers
+- Historical trend computation
+
+#### [NEW] `static/js/heatmap.js`
+- Renders interactive venue map overlay using **Google Maps JavaScript API**
+- Real-time heatmap layer with color-coded zones
+- Click-to-inspect zone details (capacity, current count, trend)
+- Auto-refresh via SSE stream
+
+#### [NEW] `templates/attendee/heatmap.html`
+- Mobile-first responsive layout
+- Legend with WCAG-compliant color indicators + text labels
+- "Best route" suggestion panel
+- Accessible alternative: tabular zone status view
+
+---
+
+### Component 4: Queue Management System
+
+#### [NEW] `services/queue_service.py`
+- Manages virtual queues for food, merchandise, restrooms
+- Estimated wait time calculation (moving average algorithm)
+- "Book your spot" — virtual queue reservation
+- Queue position tracking and SMS/notification alerts
+
+#### [NEW] `static/js/queue.js`
+- Live queue dashboard with animated progress bars
+- Sort/filter by wait time, category, proximity
+- "Join Queue" button with confirmation modal
+- Real-time position counter
+
+#### [NEW] `templates/attendee/queues.html`
+- Card-based queue listings with status indicators
+- Category filters (🍕 Food, 🛍 Merch, 🚻 Restrooms)
+- Estimated wait time with confidence indicator
+- Virtual queue ticket with QR code
+
+---
+
+### Component 5: Wayfinding & Navigation
+
+#### [NEW] `services/maps_service.py`
+- Google Maps integration for venue layout
+- Shortest-path routing between venue zones
+- Accessibility-aware routing (elevators, ramps)
+- Points-of-interest data management
+
+#### [NEW] `static/js/wayfinding.js`
+- Interactive venue map with Google Maps JS API
+- Turn-by-turn directions within the venue
+- "Navigate to nearest [restroom/food/exit]" functionality
+- Crowd-aware routing (avoids congested paths)
+
+#### [NEW] `templates/attendee/navigate.html`
+- Full-screen map with controls
+- Quick-action buttons: "Nearest Exit", "My Seat", "Food Court"
+- Step-by-step accessible text directions
+- Estimated walking time display
+
+---
+
+### Component 6: AI Chatbot (Google Gemini)
+
+#### [NEW] `services/gemini_service.py`
+- Gemini 2.5 Flash integration for conversational AI
+- Context-aware: knows venue layout, current crowd data, queue times
+- Multi-language support via Cloud Translation API
+- Safety filters and responsible AI guardrails
+- Prompts:
+  - "Where's the shortest food queue?"
+  - "How do I get to Gate 7?"
+  - "Is Section B crowded right now?"
+
+#### [NEW] `static/js/chatbot.js`
+- Floating chat widget (bottom-right)
+- Message bubbles with typing indicator
+- Quick-reply suggestion chips
+- Language selector for real-time translation
+- ARIA live region for screen reader announcements
+
+#### [NEW] `templates/components/chatbot.html`
+- Accessible chat interface with proper ARIA roles
+- Resizable/minimizable widget
+- Keyboard-navigable message list
+
+---
+
+### Component 7: Operator Dashboard
+
+#### [NEW] `blueprints/operator.py`
+- Protected routes (operator role required)
+- Dashboard, analytics, alerts, and simulator views
+- API endpoints for crowd threshold management
+
+#### [NEW] `static/js/dashboard.js`
+- Real-time KPI cards (total attendance, avg wait, alerts)
+- Zone-by-zone capacity meters
+- Alert timeline with severity levels
+- Staff deployment recommendations
+
+#### [NEW] `templates/operator/dashboard.html`
+- Grid layout with responsive breakpoints
+- Live charts (crowd trends, queue throughput)
+- Draggable alert cards
+- Emergency broadcast panel
+
+---
+
+### Component 8: Notification & Alert System
+
+#### [NEW] `services/notification_service.py`
+- Multi-channel: in-app toasts, SSE push, email
+- Priority levels: Info / Warning / Critical / Emergency
+- Geo-targeted: alerts to specific venue zones
+- Automatic triggers from crowd density thresholds
+
+#### [NEW] `blueprints/sse.py`
+- Server-Sent Events endpoint for real-time push
+- Per-user event filtering (zone, role)
+- Heartbeat keep-alive for connection stability
+- Graceful reconnection handling
+
+#### [NEW] `static/js/notifications.js`
+- Toast notification stack (top-right)
+- Sound alerts for critical notifications
+- Notification center with history
+- "Do Not Disturb" mode for operators
+
+---
+
+### Component 9: Simulation Engine
+
+#### [NEW] `services/simulator.py`
+- Generates realistic crowd movement patterns
+- Simulates event lifecycle: pre-event → kickoff → halftime → post-event
+- Queue fluctuation with realistic distributions
+- Configurable parameters: venue capacity, event type, weather
+- Writes simulated data to Firestore in real-time
+
+#### [NEW] `templates/operator/simulator.html`
+- Simulation control panel (start/stop/speed)
+- Event phase selector
+- Parameter sliders (crowd size, arrival rate)
+- Live preview of simulated data
+
+---
+
+### Component 10: Accessibility & Internationalization
+
+#### [NEW] `static/css/accessibility.css`
+- High-contrast mode styles
+- Large text mode (150% scaling)
+- Reduced motion preference support
+- Focus indicator styles (3px solid, 3:1 contrast)
+
+#### [NEW] `static/js/accessibility.js`
+- Accessibility preferences panel
+- Toggle: high contrast, large text, reduced motion
+- Persisted via localStorage
+- Screen reader announcement utility
+
+#### [NEW] `services/translation_service.py`
+- Google Cloud Translation API integration
+- Auto-detect user language from browser
+- On-demand translation of UI strings and notifications
+- Cached translations for performance
+
+---
+
+## Google Services Integration Summary
+
+| Google Service | Usage | Why |
+|---|---|---|
+| **Firebase Firestore** | Real-time database for crowd, queue, and event data | Sub-second sync, offline support, scales automatically |
+| **Firebase Auth** | User authentication (email/social login) | Secure, supports role-based access, easy integration |
+| **Google Maps JS API** | Venue map, heatmap overlay, wayfinding routes | Industry standard mapping, custom overlays, directions |
+| **Gemini 2.5 Flash** | AI chatbot for attendee assistance | Context-aware responses, fast inference, multi-turn |
+| **Cloud Translation** | Multi-language support | Real-time translation for international events |
+
+---
+
+## Security Implementation
+
+1. **Authentication**: Firebase Auth with JWT token verification
+2. **Authorization**: Role-based access control (attendee/operator/admin)
+3. **CSRF**: Flask-WTF CSRF tokens on all forms
+4. **CSP**: Content Security Policy headers
+5. **Input Validation**: Server-side validation on all endpoints
+6. **Rate Limiting**: API rate limiting to prevent abuse
+7. **Secrets Management**: All keys in `.env`, never in source
+8. **HTTPS**: Enforced in production via Dockerfile/Cloud Run
+9. **XSS Protection**: Jinja2 auto-escaping enabled
+10. **SQL Injection**: N/A (NoSQL Firestore) — Firestore Security Rules used
+
+---
+
+## Accessibility Compliance (WCAG 2.2 AA)
+
+- **Contrast**: All text ≥ 4.5:1 ratio, UI components ≥ 3:1
+- **Target Size**: All interactive elements ≥ 44×44 CSS pixels
+- **Keyboard Navigation**: Full keyboard support with visible focus indicators
+- **Screen Readers**: ARIA landmarks, live regions, proper heading hierarchy
+- **Reduced Motion**: `prefers-reduced-motion` media query support
+- **High Contrast Mode**: Toggle-able high contrast theme
+- **Skip Links**: "Skip to content" link on every page
+- **Semantic HTML**: Proper use of `<nav>`, `<main>`, `<aside>`, `<section>`
+- **Alt Text**: All images have descriptive alt text
+- **Language**: `lang` attribute on `<html>`, translated content marked
+
+---
+
+## Testing Strategy
+
+### Unit Tests (pytest)
+```
+tests/
+├── test_crowd_service.py    # Density calculation, threshold logic
+├── test_queue_service.py    # Wait time estimation, virtual queue
+├── test_auth.py             # Login, registration, role checks
+├── test_api.py              # API endpoint responses
+└── test_simulator.py        # Simulation output validation
+```
+
+### Integration Tests
+- Firebase Firestore read/write operations
+- Gemini API response processing
+- SSE event delivery end-to-end
+
+### Accessibility Tests
+- Automated: axe-core audit via browser subagent
+- Manual: keyboard navigation flow verification
+- Contrast ratio verification on all pages
+
+### Browser Testing
+- Mobile viewport (375px) responsive validation
+- Desktop viewport (1440px) dashboard verification
+- Cross-browser visual spot checks
+
+---
+
+## Verification Plan
+
+### Automated Tests
+1. `pytest tests/ -v` — Run full test suite
+2. `flask run` — Verify app starts without errors
+3. Browser subagent: Navigate all pages, verify rendering
+4. Accessibility audit via axe-core integration
+
+### Manual Verification
+1. Start simulation → observe real-time heatmap updates
+2. Join virtual queue → verify position tracking
+3. Ask chatbot questions → verify Gemini responses
+4. Toggle accessibility modes → verify contrast/text changes
+5. Switch languages → verify translation
+
+---
+
+## Execution Phases
+
+### Phase 1: Foundation (Core + Auth + Database)
+- `app.py`, `config.py`, `requirements.txt`
+- Firebase service, Auth blueprints
+- Base templates with design system
+- Docker setup
+
+### Phase 2: Real-Time Core (Heatmap + Queues + SSE)
+- Crowd service + heatmap visualization
+- Queue management system
+- SSE real-time push infrastructure
+- Simulation engine
+
+### Phase 3: Intelligence (AI + Navigation + Notifications)
+- Gemini chatbot integration
+- Google Maps wayfinding
+- Notification/alert system
+- Cloud Translation integration
+
+### Phase 4: Operations (Dashboard + Analytics)
+- Operator dashboard with live KPIs
+- Historical analytics views
+- Alert management interface
+- Simulation control panel
+
+### Phase 5: Polish (A11y + Testing + Security)
+- Accessibility features & compliance
+- Comprehensive test suite
+- Security hardening
+- Performance optimization
+- Final UI polish
+
+---
+
+## Open Questions
+
+> [!IMPORTANT]
+> 1. **Do you have Google Cloud / Firebase API keys ready?** If not, I can set up the project with mock services that can be swapped for real ones later.
+
+> [!IMPORTANT]
+> 2. **Venue type preference?** Should the demo simulate a specific type of venue (cricket stadium, football stadium, Olympic arena)? This affects the venue map layout.
+
+> [!NOTE]
+> 3. **Should we include a mobile app wrapper** or keep this strictly as a responsive web app? (I recommend responsive web — works on all devices without installation.)

models/__init__.py

@@ -0,0 +1 @@
+"""Data models package."""

models/event.py

@@ -0,0 +1,135 @@
+"""Event and attendee models."""
+
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import List, Optional
+from enum import Enum
+
+
+class EventPhase(Enum):
+    """Current phase of the event lifecycle."""
+
+    PRE_EVENT = "pre_event"
+    GATES_OPEN = "gates_open"
+    FILLING = "filling"
+    EVENT_START = "event_start"
+    FIRST_HALF = "first_half"
+    HALFTIME = "halftime"
+    SECOND_HALF = "second_half"
+    EVENT_END = "event_end"
+    EXITING = "exiting"
+    POST_EVENT = "post_event"
+
+    @property
+    def label(self):
+        return {
+            "pre_event": "Pre-Event",
+            "gates_open": "Gates Open",
+            "filling": "Venue Filling",
+            "event_start": "Event Started",
+            "first_half": "1st Half / Session",
+            "halftime": "Half-Time / Break",
+            "second_half": "2nd Half / Session",
+            "event_end": "Event Ended",
+            "exiting": "Attendees Exiting",
+            "post_event": "Post-Event",
+        }[self.value]
+
+    @property
+    def description(self):
+        return {
+            "pre_event": "Venue preparation underway",
+            "gates_open": "Gates are open, attendees arriving",
+            "filling": "Venue is filling up rapidly",
+            "event_start": "The event has begun",
+            "first_half": "First session in progress",
+            "halftime": "Break time — high food/restroom traffic expected",
+            "second_half": "Second session in progress",
+            "event_end": "Event concluded — exit rush expected",
+            "exiting": "Attendees leaving the venue",
+            "post_event": "Venue cleared",
+        }[self.value]
+
+
+@dataclass
+class Event:
+    """Represents a sporting event."""
+
+    id: str
+    name: str
+    sport: str
+    venue_id: str
+    date: datetime
+    home_team: str = ""
+    away_team: str = ""
+    current_phase: str = "pre_event"
+    expected_attendance: int = 0
+    actual_attendance: int = 0
+    weather: str = "clear"
+    temperature_c: float = 28.0
+
+    @property
+    def phase(self) -> EventPhase:
+        return EventPhase(self.current_phase)
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "name": self.name,
+            "sport": self.sport,
+            "venue_id": self.venue_id,
+            "date": self.date.isoformat(),
+            "home_team": self.home_team,
+            "away_team": self.away_team,
+            "current_phase": self.current_phase,
+            "phase_label": self.phase.label,
+            "phase_description": self.phase.description,
+            "expected_attendance": self.expected_attendance,
+            "actual_attendance": self.actual_attendance,
+            "weather": self.weather,
+            "temperature_c": self.temperature_c,
+        }
+
+
+@dataclass
+class Attendee:
+    """An event attendee / user profile."""
+
+    id: str
+    display_name: str
+    email: str
+    role: str = "attendee"  # attendee, operator, admin
+    language: str = "en"
+    accessibility_needs: List[str] = field(default_factory=list)
+    current_zone_id: Optional[str] = None
+    seat_section: str = ""
+    seat_row: str = ""
+    seat_number: str = ""
+    preferences: dict = field(default_factory=dict)
+
+    @property
+    def is_operator(self) -> bool:
+        return self.role in ("operator", "admin")
+
+    @property
+    def seat_display(self) -> str:
+        parts = []
+        if self.seat_section:
+            parts.append(f"Section {self.seat_section}")
+        if self.seat_row:
+            parts.append(f"Row {self.seat_row}")
+        if self.seat_number:
+            parts.append(f"Seat {self.seat_number}")
+        return ", ".join(parts) if parts else "General Admission"
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "display_name": self.display_name,
+            "email": self.email,
+            "role": self.role,
+            "language": self.language,
+            "accessibility_needs": self.accessibility_needs,
+            "current_zone_id": self.current_zone_id,
+            "seat_display": self.seat_display,
+        }

models/queue.py

@@ -0,0 +1,132 @@
+"""Queue and wait-time models."""
+
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import Optional
+from enum import Enum
+import uuid
+
+
+class QueueCategory(Enum):
+    """Category of service queue."""
+
+    FOOD = "food"
+    MERCHANDISE = "merch"
+    RESTROOM = "restroom"
+    ENTRY = "entry"
+    EXIT = "exit"
+    TICKET = "ticket"
+
+    @property
+    def icon(self):
+        return {
+            "food": "🍕",
+            "merch": "🛍️",
+            "restroom": "🚻",
+            "entry": "🚪",
+            "exit": "🚶",
+            "ticket": "🎫",
+        }[self.value]
+
+    @property
+    def label(self):
+        return {
+            "food": "Food & Beverages",
+            "merch": "Merchandise",
+            "restroom": "Restrooms",
+            "entry": "Entry Gates",
+            "exit": "Exit Gates",
+            "ticket": "Ticket Counter",
+        }[self.value]
+
+
+@dataclass
+class QueueStation:
+    """A single service station (e.g., one food stall)."""
+
+    id: str
+    name: str
+    category: str  # QueueCategory value
+    zone_id: str
+    current_length: int = 0
+    avg_service_time_sec: float = 45.0
+    is_open: bool = True
+    lat: float = 0.0
+    lng: float = 0.0
+
+    @property
+    def estimated_wait_minutes(self) -> float:
+        if not self.is_open or self.current_length == 0:
+            return 0.0
+        return round((self.current_length * self.avg_service_time_sec) / 60, 1)
+
+    @property
+    def wait_level(self) -> str:
+        wait = self.estimated_wait_minutes
+        if wait < 5:
+            return "short"
+        elif wait < 15:
+            return "moderate"
+        elif wait < 30:
+            return "long"
+        else:
+            return "very_long"
+
+    @property
+    def wait_color(self) -> str:
+        return {
+            "short": "#22c55e",
+            "moderate": "#f59e0b",
+            "long": "#ef4444",
+            "very_long": "#18181b",
+        }[self.wait_level]
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "name": self.name,
+            "category": self.category,
+            "category_icon": QueueCategory(self.category).icon,
+            "category_label": QueueCategory(self.category).label,
+            "zone_id": self.zone_id,
+            "current_length": self.current_length,
+            "estimated_wait_minutes": self.estimated_wait_minutes,
+            "wait_level": self.wait_level,
+            "wait_color": self.wait_color,
+            "is_open": self.is_open,
+            "lat": self.lat,
+            "lng": self.lng,
+        }
+
+
+@dataclass
+class VirtualQueueTicket:
+    """A virtual queue reservation for an attendee."""
+
+    id: str = field(default_factory=lambda: str(uuid.uuid4())[:8].upper())
+    user_id: str = ""
+    station_id: str = ""
+    station_name: str = ""
+    category: str = ""
+    position: int = 0
+    estimated_ready_time: Optional[datetime] = None
+    status: str = "waiting"  # waiting, ready, served, expired
+    created_at: datetime = field(default_factory=datetime.utcnow)
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "user_id": self.user_id,
+            "station_id": self.station_id,
+            "station_name": self.station_name,
+            "category": self.category,
+            "category_icon": QueueCategory(self.category).icon if self.category else "",
+            "position": self.position,
+            "estimated_ready_time": (
+                self.estimated_ready_time.isoformat()
+                if self.estimated_ready_time
+                else None
+            ),
+            "status": self.status,
+            "created_at": self.created_at.isoformat(),
+        }

models/venue.py

@@ -0,0 +1,138 @@
+"""Venue and zone models for the stadium layout."""
+
+from dataclasses import dataclass, field
+from typing import List, Optional
+from enum import Enum
+
+
+class DensityLevel(Enum):
+    """Crowd density classification."""
+
+    LOW = "low"
+    MODERATE = "moderate"
+    HIGH = "high"
+    CRITICAL = "critical"
+
+    @property
+    def color(self):
+        return {
+            "low": "#22c55e",
+            "moderate": "#f59e0b",
+            "high": "#ef4444",
+            "critical": "#18181b",
+        }[self.value]
+
+    @property
+    def label(self):
+        return {
+            "low": "🟢 Low",
+            "moderate": "🟡 Moderate",
+            "high": "🔴 High",
+            "critical": "⚫ Critical",
+        }[self.value]
+
+
+@dataclass
+class Zone:
+    """A distinct area within the venue."""
+
+    id: str
+    name: str
+    zone_type: str  # 'stand', 'concourse', 'gate', 'food_court', 'restroom', 'parking'
+    capacity: int
+    current_count: int = 0
+    lat: float = 0.0
+    lng: float = 0.0
+    polygon_coords: List[dict] = field(default_factory=list)
+    amenities: List[str] = field(default_factory=list)
+    is_accessible: bool = True
+    floor_level: int = 0
+
+    @property
+    def occupancy_rate(self) -> float:
+        if self.capacity == 0:
+            return 0.0
+        return min(self.current_count / self.capacity, 1.0)
+
+    @property
+    def density_level(self) -> DensityLevel:
+        rate = self.occupancy_rate
+        if rate < 0.4:
+            return DensityLevel.LOW
+        elif rate < 0.7:
+            return DensityLevel.MODERATE
+        elif rate < 0.9:
+            return DensityLevel.HIGH
+        else:
+            return DensityLevel.CRITICAL
+
+    @property
+    def available_capacity(self) -> int:
+        return max(0, self.capacity - self.current_count)
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "name": self.name,
+            "zone_type": self.zone_type,
+            "capacity": self.capacity,
+            "current_count": self.current_count,
+            "occupancy_rate": round(self.occupancy_rate * 100, 1),
+            "density_level": self.density_level.value,
+            "density_color": self.density_level.color,
+            "density_label": self.density_level.label,
+            "available_capacity": self.available_capacity,
+            "lat": self.lat,
+            "lng": self.lng,
+            "polygon_coords": self.polygon_coords,
+            "amenities": self.amenities,
+            "is_accessible": self.is_accessible,
+            "floor_level": self.floor_level,
+        }
+
+
+@dataclass
+class Venue:
+    """Represents the entire sporting venue."""
+
+    id: str
+    name: str
+    city: str
+    total_capacity: int
+    zones: List[Zone] = field(default_factory=list)
+    center_lat: float = 0.0
+    center_lng: float = 0.0
+    map_zoom: int = 17
+
+    @property
+    def total_current(self) -> int:
+        return sum(z.current_count for z in self.zones)
+
+    @property
+    def overall_occupancy(self) -> float:
+        if self.total_capacity == 0:
+            return 0.0
+        return min(self.total_current / self.total_capacity, 1.0)
+
+    def get_zone(self, zone_id: str) -> Optional[Zone]:
+        for zone in self.zones:
+            if zone.id == zone_id:
+                return zone
+        return None
+
+    def get_zones_by_type(self, zone_type: str) -> List[Zone]:
+        return [z for z in self.zones if z.zone_type == zone_type]
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "name": self.name,
+            "city": self.city,
+            "total_capacity": self.total_capacity,
+            "total_current": self.total_current,
+            "overall_occupancy": round(self.overall_occupancy * 100, 1),
+            "center_lat": self.center_lat,
+            "center_lng": self.center_lng,
+            "map_zoom": self.map_zoom,
+            "zones": [z.to_dict() for z in self.zones],
+        }

requirements.txt

@@ -0,0 +1,12 @@
+flask>=3.1
+flask-socketio>=5.3
+flask-wtf>=1.2
+firebase-admin>=6.5
+google-generativeai>=0.8
+google-cloud-translate>=3.16
+gunicorn>=22.0
+python-dotenv>=1.0
+pytest>=8.0
+pytest-flask>=1.3
+requests>=2.31
+bleach>=6.1

services/__init__.py

@@ -0,0 +1 @@
+"""Services package."""

services/crowd_service.py

@@ -0,0 +1,129 @@
+"""Crowd density analytics service."""
+
+import logging
+from typing import List, Dict, Optional
+from models.venue import Venue, Zone, DensityLevel
+
+logger = logging.getLogger(__name__)
+
+
+class CrowdService:
+    """Manages crowd density analytics and alerts."""
+
+    # Thresholds for triggering alerts (occupancy rate)
+    THRESHOLDS = {
+        "warning": 0.7,
+        "critical": 0.9,
+        "emergency": 0.95,
+    }
+
+    def __init__(self):
+        self._alert_callbacks = []
+        self._history: List[Dict] = []
+
+    def register_alert_callback(self, callback):
+        """Register a function to call when density thresholds are breached."""
+        self._alert_callbacks.append(callback)
+
+    def update_zone_count(self, venue: Venue, zone_id: str, new_count: int) -> Optional[Dict]:
+        """Update a zone's crowd count and check thresholds."""
+        zone = venue.get_zone(zone_id)
+        if not zone:
+            return None
+
+        old_level = zone.density_level
+        zone.current_count = max(0, min(new_count, zone.capacity))
+        new_level = zone.density_level
+
+        # Record history
+        self._history.append({
+            "zone_id": zone_id,
+            "count": zone.current_count,
+            "occupancy": zone.occupancy_rate,
+            "level": new_level.value,
+        })
+
+        # Keep history manageable (last 1000 entries)
+        if len(self._history) > 1000:
+            self._history = self._history[-500:]
+
+        # Check if we need to fire alerts
+        alert = None
+        if new_level != old_level and new_level in (DensityLevel.HIGH, DensityLevel.CRITICAL):
+            alert = {
+                "type": "crowd_density",
+                "severity": "critical" if new_level == DensityLevel.CRITICAL else "warning",
+                "zone_id": zone_id,
+                "zone_name": zone.name,
+                "occupancy_rate": round(zone.occupancy_rate * 100, 1),
+                "density_level": new_level.value,
+                "message": f"⚠️ {zone.name} is now at {new_level.label} density ({round(zone.occupancy_rate * 100)}% capacity)",
+            }
+            for callback in self._alert_callbacks:
+                try:
+                    callback(alert)
+                except Exception as e:
+                    logger.error(f"Alert callback error: {e}")
+
+        return zone.to_dict()
+
+    def get_venue_summary(self, venue: Venue) -> Dict:
+        """Get a summary of crowd conditions across the venue."""
+        zones_data = [z.to_dict() for z in venue.zones]
+
+        # Count zones by density level
+        density_counts = {}
+        for level in DensityLevel:
+            density_counts[level.value] = sum(
+                1 for z in venue.zones if z.density_level == level
+            )
+
+        # Find hotspots (highest occupancy zones)
+        hotspots = sorted(venue.zones, key=lambda z: z.occupancy_rate, reverse=True)[:5]
+
+        # Find available zones (lowest occupancy)
+        available = sorted(venue.zones, key=lambda z: z.occupancy_rate)[:5]
+
+        return {
+            "total_capacity": venue.total_capacity,
+            "total_current": venue.total_current,
+            "overall_occupancy": round(venue.overall_occupancy * 100, 1),
+            "density_counts": density_counts,
+            "hotspots": [z.to_dict() for z in hotspots],
+            "most_available": [z.to_dict() for z in available],
+            "zones": zones_data,
+        }
+
+    def get_zone_trend(self, zone_id: str, last_n: int = 20) -> List[Dict]:
+        """Get recent occupancy trend for a zone."""
+        zone_history = [h for h in self._history if h["zone_id"] == zone_id]
+        return zone_history[-last_n:]
+
+    def get_recommended_zones(self, venue: Venue, zone_type: str = None) -> List[Dict]:
+        """Recommend least crowded zones, optionally filtered by type."""
+        zones = venue.zones
+        if zone_type:
+            zones = [z for z in zones if z.zone_type == zone_type]
+
+        sorted_zones = sorted(zones, key=lambda z: z.occupancy_rate)
+        return [z.to_dict() for z in sorted_zones[:5]]
+
+    def get_crowd_flow_data(self, venue: Venue) -> Dict:
+        """Get data formatted for heatmap visualization."""
+        heatmap_points = []
+        for zone in venue.zones:
+            if zone.lat and zone.lng:
+                heatmap_points.append({
+                    "lat": zone.lat,
+                    "lng": zone.lng,
+                    "weight": zone.occupancy_rate,
+                    "zone_id": zone.id,
+                    "zone_name": zone.name,
+                    "density_color": zone.density_level.color,
+                })
+
+        return {
+            "heatmap_points": heatmap_points,
+            "zones": [z.to_dict() for z in venue.zones],
+            "overall_occupancy": round(venue.overall_occupancy * 100, 1),
+        }

services/firebase_service.py

@@ -0,0 +1,220 @@
+"""Firebase Firestore & Auth service with mock fallback."""
+
+import os
+import json
+import logging
+from datetime import datetime
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+# In-memory store for mock mode
+_mock_store = {}
+_firebase_app = None
+_firestore_client = None
+
+
+def init_firebase(app):
+    """Initialize Firebase Admin SDK or fall back to mock mode."""
+    global _firebase_app, _firestore_client
+
+    if app.config.get("USE_MOCK_SERVICES"):
+        logger.info("🔶 Firebase running in MOCK mode")
+        return
+
+    try:
+        import firebase_admin
+        from firebase_admin import credentials, firestore
+
+        cred_path = app.config.get("FIREBASE_CREDENTIALS_PATH", "")
+        if cred_path and os.path.exists(cred_path):
+            cred = credentials.Certificate(cred_path)
+            _firebase_app = firebase_admin.initialize_app(cred)
+            _firestore_client = firestore.client()
+            logger.info("✅ Firebase initialized successfully")
+        else:
+            logger.warning("⚠️ Firebase credentials not found, using mock mode")
+            app.config["USE_MOCK_SERVICES"] = True
+    except Exception as e:
+        logger.error(f"❌ Firebase init failed: {e}, falling back to mock mode")
+        app.config["USE_MOCK_SERVICES"] = True
+
+
+def _is_mock():
+    """Check if running in mock mode."""
+    return _firestore_client is None
+
+
+# ─── Firestore CRUD Operations ──────────────────────────────────────────────
+
+
+def set_document(collection: str, doc_id: str, data: dict) -> bool:
+    """Create or overwrite a document."""
+    try:
+        if _is_mock():
+            if collection not in _mock_store:
+                _mock_store[collection] = {}
+            _mock_store[collection][doc_id] = {
+                **data,
+                "_updated_at": datetime.utcnow().isoformat(),
+            }
+            return True
+
+        _firestore_client.collection(collection).document(doc_id).set(data)
+        return True
+    except Exception as e:
+        logger.error(f"Firestore set_document error: {e}")
+        return False
+
+
+def get_document(collection: str, doc_id: str) -> Optional[dict]:
+    """Retrieve a single document."""
+    try:
+        if _is_mock():
+            return _mock_store.get(collection, {}).get(doc_id)
+
+        doc = _firestore_client.collection(collection).document(doc_id).get()
+        return doc.to_dict() if doc.exists else None
+    except Exception as e:
+        logger.error(f"Firestore get_document error: {e}")
+        return None
+
+
+def get_collection(collection: str) -> list:
+    """Retrieve all documents in a collection."""
+    try:
+        if _is_mock():
+            store = _mock_store.get(collection, {})
+            return [{"id": k, **v} for k, v in store.items()]
+
+        docs = _firestore_client.collection(collection).stream()
+        return [{"id": doc.id, **doc.to_dict()} for doc in docs]
+    except Exception as e:
+        logger.error(f"Firestore get_collection error: {e}")
+        return []
+
+
+def update_document(collection: str, doc_id: str, data: dict) -> bool:
+    """Update fields in a document."""
+    try:
+        if _is_mock():
+            if collection not in _mock_store:
+                _mock_store[collection] = {}
+            if doc_id not in _mock_store[collection]:
+                _mock_store[collection][doc_id] = {}
+            _mock_store[collection][doc_id].update(data)
+            _mock_store[collection][doc_id]["_updated_at"] = (
+                datetime.utcnow().isoformat()
+            )
+            return True
+
+        _firestore_client.collection(collection).document(doc_id).update(data)
+        return True
+    except Exception as e:
+        logger.error(f"Firestore update_document error: {e}")
+        return False
+
+
+def delete_document(collection: str, doc_id: str) -> bool:
+    """Delete a document."""
+    try:
+        if _is_mock():
+            if collection in _mock_store and doc_id in _mock_store[collection]:
+                del _mock_store[collection][doc_id]
+            return True
+
+        _firestore_client.collection(collection).document(doc_id).delete()
+        return True
+    except Exception as e:
+        logger.error(f"Firestore delete_document error: {e}")
+        return False
+
+
+def query_documents(collection: str, field: str, op: str, value) -> list:
+    """Query documents with a filter."""
+    try:
+        if _is_mock():
+            results = []
+            for doc_id, doc_data in _mock_store.get(collection, {}).items():
+                doc_val = doc_data.get(field)
+                if op == "==" and doc_val == value:
+                    results.append({"id": doc_id, **doc_data})
+                elif op == ">" and doc_val is not None and doc_val > value:
+                    results.append({"id": doc_id, **doc_data})
+                elif op == "<" and doc_val is not None and doc_val < value:
+                    results.append({"id": doc_id, **doc_data})
+                elif op == ">=" and doc_val is not None and doc_val >= value:
+                    results.append({"id": doc_id, **doc_data})
+                elif op == "<=" and doc_val is not None and doc_val <= value:
+                    results.append({"id": doc_id, **doc_data})
+            return results
+
+        docs = (
+            _firestore_client.collection(collection)
+            .where(field, op, value)
+            .stream()
+        )
+        return [{"id": doc.id, **doc.to_dict()} for doc in docs]
+    except Exception as e:
+        logger.error(f"Firestore query error: {e}")
+        return []
+
+
+# ─── Auth Helpers ────────────────────────────────────────────────────────────
+
+# Mock user store
+_mock_users = {
+    "fan1": {
+        "uid": "fan1",
+        "email": "fan@venueflow.demo",
+        "display_name": "Demo Fan",
+        "role": "attendee",
+        "password": "demo123",
+    },
+    "op1": {
+        "uid": "op1",
+        "email": "operator@venueflow.demo",
+        "display_name": "Demo Operator",
+        "role": "operator",
+        "password": "demo123",
+    },
+}
+
+
+def verify_mock_login(email: str, password: str) -> Optional[dict]:
+    """Verify login credentials in mock mode."""
+    for uid, user in _mock_users.items():
+        if user["email"] == email and user["password"] == password:
+            return {
+                "uid": uid,
+                "email": user["email"],
+                "display_name": user["display_name"],
+                "role": user["role"],
+            }
+    return None
+
+
+def create_mock_user(email: str, password: str, display_name: str, role: str = "attendee") -> Optional[dict]:
+    """Create a user in mock mode."""
+    uid = f"user_{len(_mock_users) + 1}"
+    _mock_users[uid] = {
+        "uid": uid,
+        "email": email,
+        "display_name": display_name,
+        "role": role,
+        "password": password,
+    }
+    return {"uid": uid, "email": email, "display_name": display_name, "role": role}
+
+
+def get_mock_user(uid: str) -> Optional[dict]:
+    """Get a user by UID in mock mode."""
+    user = _mock_users.get(uid)
+    if user:
+        return {
+            "uid": uid,
+            "email": user["email"],
+            "display_name": user["display_name"],
+            "role": user["role"],
+        }
+    return None

services/gemini_service.py

@@ -0,0 +1,130 @@
+"""Gemini AI chatbot service with mock fallback."""
+
+import logging
+from typing import List, Dict, Optional
+
+logger = logging.getLogger(__name__)
+
+_genai_model = None
+_is_mock = True
+
+
+def init_gemini(app):
+    """Initialize Google Gemini API or fall back to mock."""
+    global _genai_model, _is_mock
+
+    if app.config.get("USE_MOCK_SERVICES"):
+        logger.info("🔶 Gemini running in MOCK mode")
+        return
+
+    api_key = app.config.get("GEMINI_API_KEY", "")
+    if not api_key:
+        logger.warning("⚠️ No Gemini API key, using mock mode")
+        return
+
+    try:
+        import google.generativeai as genai
+
+        genai.configure(api_key=api_key)
+        _genai_model = genai.GenerativeModel("gemini-2.5-flash")
+        _is_mock = False
+        logger.info("✅ Gemini AI initialized successfully")
+    except Exception as e:
+        logger.error(f"❌ Gemini init failed: {e}, using mock mode")
+
+
+SYSTEM_PROMPT = """You are VenueFlow Assistant, an AI concierge for a large sporting venue. 
+You help attendees with:
+- Finding the shortest queues for food, merchandise, and restrooms
+- Navigating to different areas of the venue
+- Checking crowd density in different zones
+- General event information and recommendations
+
+Be concise, friendly, and helpful. Use emojis sparingly for clarity.
+When providing directions, be specific about zone names and landmarks.
+Always prioritize attendee safety and comfort."""
+
+
+# Smart mock responses based on keywords
+MOCK_RESPONSES = {
+    "queue": "Based on current data, the **North Food Court** (Gate 3 area) has the shortest wait at ~4 minutes 🍕. The South Food Court is busier at ~12 minutes. Would you like me to add you to the virtual queue?",
+    "food": "Here are the least crowded food options right now:\n\n1. **Stall N3** - North Food Court (4 min wait)\n2. **Stall W1** - West Concourse (6 min wait)\n3. **Stall E2** - East Pavilion (8 min wait)\n\nWould you like directions to any of these?",
+    "restroom": "The nearest restroom with the shortest queue is at **West Concourse Level 1** (~2 min wait) 🚻. The restrooms near Gate 5 are currently busy (~10 min wait). Want me to navigate you there?",
+    "crowd": "Current venue status:\n\n🟢 **Low density**: North Stand, West Pavilion\n🟡 **Moderate**: East Stand, South Concourse\n🔴 **High**: Main Pavilion, VIP Area\n\nI recommend the North Stand concourse for a more comfortable experience.",
+    "seat": "To find your seat, head through **Gate 3** and follow the signs for your section. Staff members at each entry point can help direct you. Would you like turn-by-turn directions?",
+    "exit": "The nearest exit from your area is **Gate 5 (West Exit)**. Current crowd density at this exit is 🟢 Low. For the fastest exit after the event, I recommend **Gate 7 (North Exit)** — it typically has 30% less congestion.",
+    "help": "I can help you with:\n\n🍕 **Food & Drinks** — Find shortest queues\n🚻 **Restrooms** — Locate nearest available\n🗺️ **Navigation** — Get directions anywhere\n📊 **Crowd Info** — Check zone density\n🚪 **Exits** — Find fastest exit route\n\nWhat would you like to know?",
+    "navigate": "I can help you navigate! Which zone are you heading to? You can say things like:\n- 'Navigate to Gate 5'\n- 'Find nearest food stall'\n- 'How do I get to my seat in Section B?'",
+    "weather": "Current conditions: ☀️ Clear skies, 28°C. It's a great day for the match! Don't forget to stay hydrated — the nearest water station is at the **North Concourse**.",
+    "emergency": "🚨 **In case of emergency:**\n1. Stay calm and follow staff directions\n2. Move to the nearest marked exit\n3. Do not use elevators\n4. Emergency exits are marked with green signs\n5. First aid stations are at Gates 1, 4, and 7\n\nIf you need immediate help, call venue security or alert the nearest staff member.",
+}
+
+DEFAULT_MOCK_RESPONSE = "I'm your VenueFlow assistant! I can help with finding food, restrooms, navigating the venue, checking crowd levels, and more. What would you like to know? 😊"
+
+
+def get_chat_response(
+    message: str,
+    venue_context: Dict = None,
+    conversation_history: List[Dict] = None,
+) -> str:
+    """Get a response from the AI chatbot."""
+    if _is_mock:
+        return _get_mock_response(message)
+
+    try:
+        # Build context-aware prompt
+        context_parts = [SYSTEM_PROMPT]
+
+        if venue_context:
+            context_parts.append(f"\nCurrent venue data: {venue_context}")
+
+        if conversation_history:
+            for msg in conversation_history[-6:]:  # Last 6 messages
+                role = "user" if msg.get("role") == "user" else "model"
+                context_parts.append(f"{role}: {msg.get('content', '')}")
+
+        full_prompt = "\n".join(context_parts) + f"\n\nuser: {message}\nassistant:"
+
+        response = _genai_model.generate_content(
+            full_prompt,
+            generation_config={
+                "temperature": 0.7,
+                "max_output_tokens": 500,
+                "top_p": 0.9,
+            },
+            safety_settings={
+                "HARM_CATEGORY_HARASSMENT": "BLOCK_MEDIUM_AND_ABOVE",
+                "HARM_CATEGORY_HATE_SPEECH": "BLOCK_MEDIUM_AND_ABOVE",
+                "HARM_CATEGORY_SEXUALLY_EXPLICIT": "BLOCK_MEDIUM_AND_ABOVE",
+                "HARM_CATEGORY_DANGEROUS_CONTENT": "BLOCK_MEDIUM_AND_ABOVE",
+            },
+        )
+
+        return response.text.strip()
+
+    except Exception as e:
+        logger.error(f"Gemini API error: {e}")
+        return "I'm having trouble connecting right now. Please try again in a moment, or ask a venue staff member for help."
+
+
+def _get_mock_response(message: str) -> str:
+    """Generate a contextual mock response based on keywords."""
+    msg_lower = message.lower()
+
+    for keyword, response in MOCK_RESPONSES.items():
+        if keyword in msg_lower:
+            return response
+
+    return DEFAULT_MOCK_RESPONSE
+
+
+def get_quick_suggestions() -> List[str]:
+    """Return suggested quick-reply prompts for the chatbot."""
+    return [
+        "Where's the shortest food queue?",
+        "Find nearest restroom",
+        "How crowded is it?",
+        "Navigate to my seat",
+        "Where's the nearest exit?",
+        "What's the weather like?",
+    ]

services/maps_service.py

@@ -0,0 +1,217 @@
+"""Maps and wayfinding service."""
+
+import logging
+import math
+from typing import List, Dict, Optional, Tuple
+
+logger = logging.getLogger(__name__)
+
+
+class MapsService:
+    """Venue navigation and wayfinding service."""
+
+    def __init__(self, venue=None):
+        self.venue = venue
+        # Pre-built adjacency for routing between zones
+        self._adjacency: Dict[str, List[str]] = {}
+        self._walking_speeds = {
+            "normal": 1.2,  # m/s
+            "crowded": 0.6,  # m/s in dense areas
+            "accessible": 0.8,  # m/s for accessible routes
+        }
+
+    def set_venue(self, venue):
+        """Set the active venue and build routing graph."""
+        self.venue = venue
+        self._build_adjacency()
+
+    def _build_adjacency(self):
+        """Build zone adjacency graph based on proximity."""
+        if not self.venue:
+            return
+
+        self._adjacency = {}
+        zones = self.venue.zones
+
+        for z in zones:
+            self._adjacency[z.id] = []
+            for other in zones:
+                if z.id != other.id:
+                    dist = self._haversine(z.lat, z.lng, other.lat, other.lng)
+                    if dist < 300:  # Within 300 meters = adjacent
+                        self._adjacency[z.id].append(other.id)
+
+    def _haversine(self, lat1, lon1, lat2, lon2) -> float:
+        """Calculate distance between two points in meters."""
+        R = 6371000  # Earth's radius in meters
+        phi1 = math.radians(lat1)
+        phi2 = math.radians(lat2)
+        dphi = math.radians(lat2 - lat1)
+        dlambda = math.radians(lon2 - lon1)
+
+        a = (
+            math.sin(dphi / 2) ** 2
+            + math.cos(phi1) * math.cos(phi2) * math.sin(dlambda / 2) ** 2
+        )
+        c = 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a))
+        return R * c
+
+    def find_route(
+        self,
+        from_zone_id: str,
+        to_zone_id: str,
+        accessible: bool = False,
+    ) -> Optional[Dict]:
+        """Find a route between two zones using BFS (shortest path)."""
+        if not self.venue:
+            return None
+
+        from_zone = self.venue.get_zone(from_zone_id)
+        to_zone = self.venue.get_zone(to_zone_id)
+        if not from_zone or not to_zone:
+            return None
+
+        # BFS for shortest path
+        visited = {from_zone_id}
+        queue = [(from_zone_id, [from_zone_id])]
+        path = None
+
+        while queue:
+            current, current_path = queue.pop(0)
+            if current == to_zone_id:
+                path = current_path
+                break
+
+            for neighbor in self._adjacency.get(current, []):
+                if neighbor not in visited:
+                    # Skip non-accessible zones if accessible routing requested
+                    nzone = self.venue.get_zone(neighbor)
+                    if accessible and nzone and not nzone.is_accessible:
+                        continue
+                    visited.add(neighbor)
+                    queue.append((neighbor, current_path + [neighbor]))
+
+        if not path:
+            # Fallback: direct route
+            path = [from_zone_id, to_zone_id]
+
+        # Build route details
+        steps = []
+        total_distance = 0
+        for i in range(len(path) - 1):
+            z1 = self.venue.get_zone(path[i])
+            z2 = self.venue.get_zone(path[i + 1])
+            if z1 and z2:
+                dist = self._haversine(z1.lat, z1.lng, z2.lat, z2.lng)
+                total_distance += dist
+                steps.append({
+                    "from": z1.name,
+                    "to": z2.name,
+                    "distance_m": round(dist),
+                    "instruction": f"Head towards {z2.name}",
+                    "from_coords": {"lat": z1.lat, "lng": z1.lng},
+                    "to_coords": {"lat": z2.lat, "lng": z2.lng},
+                })
+
+        speed = (
+            self._walking_speeds["accessible"]
+            if accessible
+            else self._walking_speeds["normal"]
+        )
+        est_time_sec = total_distance / speed if speed > 0 else 0
+
+        return {
+            "from": from_zone.name,
+            "to": to_zone.name,
+            "path": path,
+            "steps": steps,
+            "total_distance_m": round(total_distance),
+            "estimated_time_sec": round(est_time_sec),
+            "estimated_time_display": self._format_time(est_time_sec),
+            "accessible": accessible,
+        }
+
+    def find_nearest(
+        self,
+        from_zone_id: str,
+        target_type: str,
+        accessible: bool = False,
+    ) -> Optional[Dict]:
+        """Find the nearest zone of a specific type."""
+        if not self.venue:
+            return None
+
+        from_zone = self.venue.get_zone(from_zone_id)
+        if not from_zone:
+            return None
+
+        targets = self.venue.get_zones_by_type(target_type)
+        if accessible:
+            targets = [z for z in targets if z.is_accessible]
+
+        if not targets:
+            return None
+
+        # Sort by distance and choose nearest with lowest crowd
+        scored = []
+        for t in targets:
+            dist = self._haversine(from_zone.lat, from_zone.lng, t.lat, t.lng)
+            # Penalize crowded zones
+            crowd_penalty = t.occupancy_rate * 100
+            score = dist + crowd_penalty
+            scored.append((t, dist, score))
+
+        scored.sort(key=lambda x: x[2])
+        best = scored[0]
+
+        route = self.find_route(from_zone_id, best[0].id, accessible)
+
+        return {
+            "target_zone": best[0].to_dict(),
+            "distance_m": round(best[1]),
+            "route": route,
+        }
+
+    def get_points_of_interest(self) -> List[Dict]:
+        """Get all points of interest for the map."""
+        if not self.venue:
+            return []
+
+        pois = []
+        type_icons = {
+            "food_court": "🍕",
+            "restroom": "🚻",
+            "gate": "🚪",
+            "stand": "🏟️",
+            "concourse": "🚶",
+            "parking": "🅿️",
+            "first_aid": "🏥",
+            "merchandise": "🛍️",
+        }
+
+        for zone in self.venue.zones:
+            pois.append({
+                "id": zone.id,
+                "name": zone.name,
+                "type": zone.zone_type,
+                "icon": type_icons.get(zone.zone_type, "📍"),
+                "lat": zone.lat,
+                "lng": zone.lng,
+                "is_accessible": zone.is_accessible,
+                "density_level": zone.density_level.value,
+                "density_color": zone.density_level.color,
+            })
+
+        return pois
+
+    def _format_time(self, seconds: float) -> str:
+        """Format seconds into a readable time string."""
+        if seconds < 60:
+            return f"{int(seconds)} sec"
+        minutes = int(seconds / 60)
+        remaining_sec = int(seconds % 60)
+        if minutes < 60:
+            return f"{minutes} min" + (f" {remaining_sec}s" if remaining_sec > 0 else "")
+        hours = int(minutes / 60)
+        remaining_min = int(minutes % 60)
+        return f"{hours}h {remaining_min}m"

services/notification_service.py

@@ -0,0 +1,128 @@
+"""Notification and alert service."""
+
+import logging
+from datetime import datetime
+from typing import List, Dict, Optional
+from enum import Enum
+import uuid
+
+logger = logging.getLogger(__name__)
+
+
+class AlertSeverity(Enum):
+    INFO = "info"
+    WARNING = "warning"
+    CRITICAL = "critical"
+    EMERGENCY = "emergency"
+
+    @property
+    def color(self):
+        return {
+            "info": "#3b82f6",
+            "warning": "#f59e0b",
+            "critical": "#ef4444",
+            "emergency": "#dc2626",
+        }[self.value]
+
+    @property
+    def icon(self):
+        return {
+            "info": "ℹ️",
+            "warning": "⚠️",
+            "critical": "🔴",
+            "emergency": "🚨",
+        }[self.value]
+
+
+class NotificationService:
+    """Manages alerts and notifications for both attendees and operators."""
+
+    def __init__(self):
+        self._alerts: List[Dict] = []
+        self._subscribers: List[callable] = []
+        self._max_alerts = 500
+
+    def subscribe(self, callback):
+        """Register a callback for new alerts."""
+        self._subscribers.append(callback)
+
+    def create_alert(
+        self,
+        title: str,
+        message: str,
+        severity: str = "info",
+        zone_id: str = None,
+        target_role: str = "all",
+    ) -> Dict:
+        """Create and broadcast a new alert."""
+        alert = {
+            "id": str(uuid.uuid4())[:8],
+            "title": title,
+            "message": message,
+            "severity": severity,
+            "severity_color": AlertSeverity(severity).color,
+            "severity_icon": AlertSeverity(severity).icon,
+            "zone_id": zone_id,
+            "target_role": target_role,
+            "timestamp": datetime.utcnow().isoformat(),
+            "read": False,
+        }
+
+        self._alerts.insert(0, alert)
+
+        # Trim old alerts
+        if len(self._alerts) > self._max_alerts:
+            self._alerts = self._alerts[: self._max_alerts]
+
+        # Notify subscribers
+        for callback in self._subscribers:
+            try:
+                callback(alert)
+            except Exception as e:
+                logger.error(f"Notification callback error: {e}")
+
+        return alert
+
+    def get_alerts(
+        self,
+        role: str = "all",
+        severity: str = None,
+        zone_id: str = None,
+        limit: int = 50,
+    ) -> List[Dict]:
+        """Get filtered alerts."""
+        filtered = self._alerts
+
+        if role != "all":
+            filtered = [
+                a for a in filtered
+                if a["target_role"] in ("all", role)
+            ]
+
+        if severity:
+            filtered = [a for a in filtered if a["severity"] == severity]
+
+        if zone_id:
+            filtered = [
+                a for a in filtered
+                if a.get("zone_id") is None or a["zone_id"] == zone_id
+            ]
+
+        return filtered[:limit]
+
+    def mark_read(self, alert_id: str) -> bool:
+        """Mark an alert as read."""
+        for alert in self._alerts:
+            if alert["id"] == alert_id:
+                alert["read"] = True
+                return True
+        return False
+
+    def get_unread_count(self, role: str = "all") -> int:
+        """Count unread alerts for a role."""
+        alerts = self.get_alerts(role=role)
+        return sum(1 for a in alerts if not a["read"])
+
+    def clear_all(self):
+        """Clear all alerts."""
+        self._alerts = []

services/queue_service.py

@@ -0,0 +1,185 @@
+"""Queue management service with virtual queue support."""
+
+import logging
+from datetime import datetime, timedelta
+from typing import List, Dict, Optional
+from models.queue import QueueStation, VirtualQueueTicket
+
+logger = logging.getLogger(__name__)
+
+
+class QueueService:
+    """Manages queues, wait times, and virtual queue reservations."""
+
+    def __init__(self):
+        self._stations: Dict[str, QueueStation] = {}
+        self._virtual_tickets: Dict[str, VirtualQueueTicket] = {}
+        self._station_history: Dict[str, List[Dict]] = {}
+
+    def register_station(self, station: QueueStation):
+        """Register a queue station."""
+        self._stations[station.id] = station
+
+    def register_stations(self, stations: List[QueueStation]):
+        """Register multiple queue stations."""
+        for s in stations:
+            self._stations[s.id] = s
+
+    def get_station(self, station_id: str) -> Optional[QueueStation]:
+        """Get a station by ID."""
+        return self._stations.get(station_id)
+
+    def get_all_stations(self) -> List[Dict]:
+        """Get all stations as dicts."""
+        return [s.to_dict() for s in self._stations.values()]
+
+    def get_stations_by_category(self, category: str) -> List[Dict]:
+        """Get stations filtered by category."""
+        return [
+            s.to_dict()
+            for s in self._stations.values()
+            if s.category == category and s.is_open
+        ]
+
+    def get_stations_by_zone(self, zone_id: str) -> List[Dict]:
+        """Get stations in a specific zone."""
+        return [
+            s.to_dict()
+            for s in self._stations.values()
+            if s.zone_id == zone_id
+        ]
+
+    def update_queue_length(self, station_id: str, new_length: int) -> Optional[Dict]:
+        """Update the queue length for a station."""
+        station = self._stations.get(station_id)
+        if not station:
+            return None
+
+        station.current_length = max(0, new_length)
+
+        # Track history
+        if station_id not in self._station_history:
+            self._station_history[station_id] = []
+        self._station_history[station_id].append({
+            "length": station.current_length,
+            "wait_min": station.estimated_wait_minutes,
+            "timestamp": datetime.utcnow().isoformat(),
+        })
+
+        # Trim history
+        if len(self._station_history[station_id]) > 100:
+            self._station_history[station_id] = self._station_history[station_id][-50:]
+
+        return station.to_dict()
+
+    def get_shortest_queue(self, category: str = None) -> Optional[Dict]:
+        """Find the station with the shortest wait time."""
+        stations = [
+            s for s in self._stations.values()
+            if s.is_open and (category is None or s.category == category)
+        ]
+        if not stations:
+            return None
+        shortest = min(stations, key=lambda s: s.estimated_wait_minutes)
+        return shortest.to_dict()
+
+    def get_queue_summary(self) -> Dict:
+        """Get an overview of all queues."""
+        open_stations = [s for s in self._stations.values() if s.is_open]
+        categories = {}
+
+        for station in open_stations:
+            cat = station.category
+            if cat not in categories:
+                categories[cat] = {
+                    "category": cat,
+                    "total_stations": 0,
+                    "total_in_queue": 0,
+                    "avg_wait_minutes": 0.0,
+                    "shortest_wait": float("inf"),
+                    "shortest_station": None,
+                }
+            categories[cat]["total_stations"] += 1
+            categories[cat]["total_in_queue"] += station.current_length
+
+            wait = station.estimated_wait_minutes
+            if wait < categories[cat]["shortest_wait"]:
+                categories[cat]["shortest_wait"] = wait
+                categories[cat]["shortest_station"] = station.name
+
+        # Calculate averages
+        for cat_data in categories.values():
+            if cat_data["total_stations"] > 0:
+                cat_data["avg_wait_minutes"] = round(
+                    sum(
+                        s.estimated_wait_minutes
+                        for s in open_stations
+                        if s.category == cat_data["category"]
+                    ) / cat_data["total_stations"],
+                    1,
+                )
+            if cat_data["shortest_wait"] == float("inf"):
+                cat_data["shortest_wait"] = 0
+
+        return {
+            "total_stations": len(open_stations),
+            "total_people_waiting": sum(s.current_length for s in open_stations),
+            "categories": categories,
+            "stations": [s.to_dict() for s in open_stations],
+        }
+
+    # ─── Virtual Queue ───────────────────────────────────────────────────
+
+    def join_virtual_queue(self, user_id: str, station_id: str) -> Optional[Dict]:
+        """Create a virtual queue reservation."""
+        station = self._stations.get(station_id)
+        if not station or not station.is_open:
+            return None
+
+        # Check if user already has a ticket for this station
+        existing = [
+            t for t in self._virtual_tickets.values()
+            if t.user_id == user_id and t.station_id == station_id and t.status == "waiting"
+        ]
+        if existing:
+            return existing[0].to_dict()
+
+        # Count waiting tickets for this station
+        waiting_count = sum(
+            1 for t in self._virtual_tickets.values()
+            if t.station_id == station_id and t.status == "waiting"
+        )
+
+        ticket = VirtualQueueTicket(
+            user_id=user_id,
+            station_id=station_id,
+            station_name=station.name,
+            category=station.category,
+            position=waiting_count + 1,
+            estimated_ready_time=datetime.utcnow() + timedelta(
+                seconds=station.avg_service_time_sec * (waiting_count + 1)
+            ),
+        )
+
+        self._virtual_tickets[ticket.id] = ticket
+        return ticket.to_dict()
+
+    def get_user_tickets(self, user_id: str) -> List[Dict]:
+        """Get all virtual tickets for a user."""
+        return [
+            t.to_dict()
+            for t in self._virtual_tickets.values()
+            if t.user_id == user_id
+        ]
+
+    def cancel_ticket(self, ticket_id: str, user_id: str) -> bool:
+        """Cancel a virtual queue ticket."""
+        ticket = self._virtual_tickets.get(ticket_id)
+        if ticket and ticket.user_id == user_id and ticket.status == "waiting":
+            ticket.status = "expired"
+            return True
+        return False
+
+    def get_station_history(self, station_id: str, last_n: int = 20) -> List[Dict]:
+        """Get queue length history for a station."""
+        return self._station_history.get(station_id, [])[-last_n:]

services/simulator.py

@@ -0,0 +1,364 @@
+"""Realistic event simulation engine for demo/testing."""
+
+import random
+import math
+import logging
+import threading
+import time
+from datetime import datetime
+from typing import Dict, Optional, Callable
+from models.venue import Venue, Zone
+from models.queue import QueueStation
+from models.event import Event, EventPhase
+
+logger = logging.getLogger(__name__)
+
+
+def create_demo_venue() -> Venue:
+    """Create a realistic cricket stadium layout (based on a typical Indian cricket ground)."""
+    # Center coordinates (representative sports venue in Mumbai)
+    center_lat = 18.9388
+    center_lng = 72.8255
+
+    zones = [
+        # Stands
+        Zone(id="north_stand", name="North Stand", zone_type="stand", capacity=8000,
+             lat=center_lat + 0.0015, lng=center_lng, amenities=["seating", "shade"]),
+        Zone(id="south_stand", name="South Stand", zone_type="stand", capacity=8000,
+             lat=center_lat - 0.0015, lng=center_lng, amenities=["seating", "shade"]),
+        Zone(id="east_pavilion", name="East Pavilion", zone_type="stand", capacity=6000,
+             lat=center_lat, lng=center_lng + 0.0015, amenities=["seating", "premium"]),
+        Zone(id="west_pavilion", name="West Pavilion", zone_type="stand", capacity=6000,
+             lat=center_lat, lng=center_lng - 0.0015, amenities=["seating", "premium"]),
+        Zone(id="main_pavilion", name="Main Pavilion (VIP)", zone_type="stand", capacity=3000,
+             lat=center_lat + 0.001, lng=center_lng + 0.001, amenities=["seating", "vip", "lounge"]),
+
+        # Concourses
+        Zone(id="north_concourse", name="North Concourse", zone_type="concourse", capacity=4000,
+             lat=center_lat + 0.002, lng=center_lng, amenities=["walking"]),
+        Zone(id="south_concourse", name="South Concourse", zone_type="concourse", capacity=4000,
+             lat=center_lat - 0.002, lng=center_lng, amenities=["walking"]),
+        Zone(id="east_concourse", name="East Concourse", zone_type="concourse", capacity=3000,
+             lat=center_lat, lng=center_lng + 0.002, amenities=["walking"]),
+        Zone(id="west_concourse", name="West Concourse", zone_type="concourse", capacity=3000,
+             lat=center_lat, lng=center_lng - 0.002, amenities=["walking"]),
+
+        # Gates
+        Zone(id="gate_1", name="Gate 1 (Main)", zone_type="gate", capacity=2000,
+             lat=center_lat + 0.0025, lng=center_lng - 0.001, amenities=["entry", "security"]),
+        Zone(id="gate_3", name="Gate 3 (North)", zone_type="gate", capacity=1500,
+             lat=center_lat + 0.0025, lng=center_lng + 0.001, amenities=["entry", "security"]),
+        Zone(id="gate_5", name="Gate 5 (West)", zone_type="gate", capacity=1500,
+             lat=center_lat, lng=center_lng - 0.0025, amenities=["entry", "security"]),
+        Zone(id="gate_7", name="Gate 7 (South)", zone_type="gate", capacity=1500,
+             lat=center_lat - 0.0025, lng=center_lng, amenities=["entry", "security"]),
+
+        # Food Courts
+        Zone(id="food_north", name="North Food Court", zone_type="food_court", capacity=1500,
+             lat=center_lat + 0.0018, lng=center_lng + 0.0005, amenities=["food", "beverages"]),
+        Zone(id="food_south", name="South Food Court", zone_type="food_court", capacity=1500,
+             lat=center_lat - 0.0018, lng=center_lng - 0.0005, amenities=["food", "beverages"]),
+        Zone(id="food_west", name="West Food Stalls", zone_type="food_court", capacity=800,
+             lat=center_lat - 0.0005, lng=center_lng - 0.0018, amenities=["food"]),
+
+        # Restrooms
+        Zone(id="restroom_n1", name="Restrooms N1", zone_type="restroom", capacity=200,
+             lat=center_lat + 0.0017, lng=center_lng - 0.0008, amenities=["restroom", "accessible"]),
+        Zone(id="restroom_s1", name="Restrooms S1", zone_type="restroom", capacity=200,
+             lat=center_lat - 0.0017, lng=center_lng + 0.0008, amenities=["restroom", "accessible"]),
+        Zone(id="restroom_e1", name="Restrooms E1", zone_type="restroom", capacity=150,
+             lat=center_lat + 0.0005, lng=center_lng + 0.0017, amenities=["restroom"]),
+        Zone(id="restroom_w1", name="Restrooms W1", zone_type="restroom", capacity=150,
+             lat=center_lat - 0.0005, lng=center_lng - 0.0017, amenities=["restroom"]),
+
+        # Parking
+        Zone(id="parking_a", name="Parking Lot A", zone_type="parking", capacity=3000,
+             lat=center_lat + 0.003, lng=center_lng, amenities=["parking"]),
+        Zone(id="parking_b", name="Parking Lot B", zone_type="parking", capacity=2000,
+             lat=center_lat, lng=center_lng - 0.003, amenities=["parking"]),
+    ]
+
+    venue = Venue(
+        id="wankhede",
+        name="Wankhede Stadium",
+        city="Mumbai",
+        total_capacity=50000,
+        zones=zones,
+        center_lat=center_lat,
+        center_lng=center_lng,
+        map_zoom=16,
+    )
+
+    return venue
+
+
+def create_demo_queue_stations() -> list:
+    """Create realistic queue stations for the demo venue."""
+    stations = [
+        # Food stalls
+        QueueStation(id="f_n1", name="Chaat Counter", category="food", zone_id="food_north",
+                     avg_service_time_sec=60, lat=18.9406, lng=72.8260),
+        QueueStation(id="f_n2", name="Biryani House", category="food", zone_id="food_north",
+                     avg_service_time_sec=90, lat=18.9406, lng=72.8258),
+        QueueStation(id="f_n3", name="Pizza & Burgers", category="food", zone_id="food_north",
+                     avg_service_time_sec=75, lat=18.9406, lng=72.8262),
+        QueueStation(id="f_s1", name="South Indian Delights", category="food", zone_id="food_south",
+                     avg_service_time_sec=70, lat=18.9370, lng=72.8250),
+        QueueStation(id="f_s2", name="Beverages & Ice Cream", category="food", zone_id="food_south",
+                     avg_service_time_sec=45, lat=18.9370, lng=72.8252),
+        QueueStation(id="f_w1", name="Quick Bites", category="food", zone_id="food_west",
+                     avg_service_time_sec=40, lat=18.9385, lng=72.8237),
+
+        # Merchandise
+        QueueStation(id="m_1", name="Team Jersey Shop", category="merch", zone_id="north_concourse",
+                     avg_service_time_sec=120, lat=18.9408, lng=72.8255),
+        QueueStation(id="m_2", name="Souvenir Stand", category="merch", zone_id="east_concourse",
+                     avg_service_time_sec=90, lat=18.9388, lng=72.8275),
+
+        # Restrooms (physical queues)
+        QueueStation(id="r_n1", name="Restrooms N1", category="restroom", zone_id="restroom_n1",
+                     avg_service_time_sec=120, lat=18.9405, lng=72.8247),
+        QueueStation(id="r_s1", name="Restrooms S1", category="restroom", zone_id="restroom_s1",
+                     avg_service_time_sec=120, lat=18.9371, lng=72.8263),
+        QueueStation(id="r_e1", name="Restrooms E1", category="restroom", zone_id="restroom_e1",
+                     avg_service_time_sec=110, lat=18.9393, lng=72.8272),
+        QueueStation(id="r_w1", name="Restrooms W1", category="restroom", zone_id="restroom_w1",
+                     avg_service_time_sec=110, lat=18.9383, lng=72.8238),
+
+        # Entry/Exit gates
+        QueueStation(id="g_1", name="Gate 1 Entry", category="entry", zone_id="gate_1",
+                     avg_service_time_sec=15, lat=18.9413, lng=72.8245),
+        QueueStation(id="g_3", name="Gate 3 Entry", category="entry", zone_id="gate_3",
+                     avg_service_time_sec=15, lat=18.9413, lng=72.8265),
+        QueueStation(id="g_5", name="Gate 5 Entry", category="entry", zone_id="gate_5",
+                     avg_service_time_sec=15, lat=18.9388, lng=72.8230),
+        QueueStation(id="g_7", name="Gate 7 Entry", category="entry", zone_id="gate_7",
+                     avg_service_time_sec=15, lat=18.9363, lng=72.8255),
+    ]
+
+    return stations
+
+
+def create_demo_event() -> Event:
+    """Create a demo cricket match event."""
+    return Event(
+        id="ipl_2026_01",
+        name="IPL 2026 — Mumbai Indians vs Chennai Super Kings",
+        sport="Cricket",
+        venue_id="wankhede",
+        date=datetime.now(),
+        home_team="Mumbai Indians",
+        away_team="Chennai Super Kings",
+        current_phase="first_half",
+        expected_attendance=33000,
+        actual_attendance=0,
+        weather="clear",
+        temperature_c=31.0,
+    )
+
+
+# ─── Phase-based simulation profiles ─────────────────────────────────────────
+
+PHASE_PROFILES = {
+    "pre_event": {
+        "stand_fill": 0.0, "concourse_fill": 0.05, "gate_fill": 0.1,
+        "food_fill": 0.05, "restroom_fill": 0.05, "parking_fill": 0.3,
+        "queue_food": (0, 3), "queue_restroom": (0, 2), "queue_entry": (0, 5),
+    },
+    "gates_open": {
+        "stand_fill": 0.1, "concourse_fill": 0.3, "gate_fill": 0.7,
+        "food_fill": 0.15, "restroom_fill": 0.1, "parking_fill": 0.6,
+        "queue_food": (2, 8), "queue_restroom": (1, 4), "queue_entry": (10, 40),
+    },
+    "filling": {
+        "stand_fill": 0.4, "concourse_fill": 0.5, "gate_fill": 0.8,
+        "food_fill": 0.3, "restroom_fill": 0.2, "parking_fill": 0.8,
+        "queue_food": (5, 15), "queue_restroom": (3, 8), "queue_entry": (20, 60),
+    },
+    "first_half": {
+        "stand_fill": 0.8, "concourse_fill": 0.15, "gate_fill": 0.1,
+        "food_fill": 0.1, "restroom_fill": 0.1, "parking_fill": 0.9,
+        "queue_food": (2, 8), "queue_restroom": (1, 5), "queue_entry": (0, 5),
+    },
+    "halftime": {
+        "stand_fill": 0.5, "concourse_fill": 0.7, "gate_fill": 0.15,
+        "food_fill": 0.9, "restroom_fill": 0.8, "parking_fill": 0.9,
+        "queue_food": (15, 40), "queue_restroom": (10, 25), "queue_entry": (0, 3),
+    },
+    "second_half": {
+        "stand_fill": 0.75, "concourse_fill": 0.1, "gate_fill": 0.1,
+        "food_fill": 0.1, "restroom_fill": 0.1, "parking_fill": 0.9,
+        "queue_food": (2, 8), "queue_restroom": (1, 5), "queue_entry": (0, 2),
+    },
+    "event_end": {
+        "stand_fill": 0.3, "concourse_fill": 0.6, "gate_fill": 0.8,
+        "food_fill": 0.05, "restroom_fill": 0.3, "parking_fill": 0.9,
+        "queue_food": (0, 3), "queue_restroom": (3, 10), "queue_entry": (0, 0),
+    },
+    "exiting": {
+        "stand_fill": 0.1, "concourse_fill": 0.4, "gate_fill": 0.9,
+        "food_fill": 0.02, "restroom_fill": 0.2, "parking_fill": 0.7,
+        "queue_food": (0, 2), "queue_restroom": (1, 5), "queue_entry": (0, 0),
+    },
+    "post_event": {
+        "stand_fill": 0.0, "concourse_fill": 0.02, "gate_fill": 0.05,
+        "food_fill": 0.0, "restroom_fill": 0.02, "parking_fill": 0.2,
+        "queue_food": (0, 0), "queue_restroom": (0, 1), "queue_entry": (0, 0),
+    },
+}
+
+# Map zone types to profile keys
+ZONE_TYPE_MAP = {
+    "stand": "stand_fill",
+    "concourse": "concourse_fill",
+    "gate": "gate_fill",
+    "food_court": "food_fill",
+    "restroom": "restroom_fill",
+    "parking": "parking_fill",
+}
+
+
+class Simulator:
+    """Simulates realistic crowd and queue dynamics."""
+
+    def __init__(self, venue: Venue, queue_service, crowd_service, notification_service, event: Event):
+        self.venue = venue
+        self.queue_service = queue_service
+        self.crowd_service = crowd_service
+        self.notification_service = notification_service
+        self.event = event
+        self._running = False
+        self._thread: Optional[threading.Thread] = None
+        self._speed = 1.0  # 1x = real-time, 2x = double speed, etc.
+        self._tick_count = 0
+        self._update_callback: Optional[Callable] = None
+
+    @property
+    def is_running(self) -> bool:
+        return self._running
+
+    def set_update_callback(self, callback: Callable):
+        """Set a callback to fire after each simulation tick."""
+        self._update_callback = callback
+
+    def set_phase(self, phase: str):
+        """Manually set the event phase."""
+        if phase in PHASE_PROFILES:
+            self.event.current_phase = phase
+            logger.info(f"🎬 Simulation phase changed to: {phase}")
+
+    def set_speed(self, speed: float):
+        """Set simulation speed (1.0 = real-time)."""
+        self._speed = max(0.1, min(10.0, speed))
+
+    def start(self):
+        """Start the simulation loop."""
+        if self._running:
+            return
+
+        self._running = True
+        self._thread = threading.Thread(target=self._run_loop, daemon=True)
+        self._thread.start()
+        logger.info("▶️ Simulation started")
+
+    def stop(self):
+        """Stop the simulation loop."""
+        self._running = False
+        if self._thread:
+            self._thread.join(timeout=5)
+        logger.info("⏹️ Simulation stopped")
+
+    def tick(self):
+        """Execute one simulation tick — update all zones and queues."""
+        phase = self.event.current_phase
+        profile = PHASE_PROFILES.get(phase, PHASE_PROFILES["pre_event"])
+
+        self._tick_count += 1
+
+        # Update zone crowd counts
+        for zone in self.venue.zones:
+            fill_key = ZONE_TYPE_MAP.get(zone.zone_type, "concourse_fill")
+            target_fill = profile.get(fill_key, 0.5)
+
+            # Add randomness (+/- 15%)
+            jitter = random.uniform(-0.15, 0.15)
+            target_count = int(zone.capacity * max(0, min(1, target_fill + jitter)))
+
+            # Smooth transition (don't jump instantly)
+            diff = target_count - zone.current_count
+            step = max(1, abs(diff) // 5)
+            if diff > 0:
+                new_count = zone.current_count + min(step, diff)
+            elif diff < 0:
+                new_count = zone.current_count - min(step, abs(diff))
+            else:
+                new_count = zone.current_count
+
+            self.crowd_service.update_zone_count(self.venue, zone.id, new_count)
+
+        # Update queue lengths
+        for station_id, station in self.queue_service._stations.items():
+            cat = station.category
+            queue_range = profile.get(f"queue_{cat}", (0, 5))
+            target = random.randint(queue_range[0], queue_range[1])
+
+            # Smooth transition
+            diff = target - station.current_length
+            step = max(1, abs(diff) // 3)
+            if diff > 0:
+                new_len = station.current_length + min(step, diff)
+            elif diff < 0:
+                new_len = station.current_length - min(step, abs(diff))
+            else:
+                new_len = station.current_length
+
+            self.queue_service.update_queue_length(station_id, max(0, new_len))
+
+        # Update attendance count
+        self.event.actual_attendance = self.venue.total_current
+
+        # Periodic alerts based on conditions
+        if self._tick_count % 10 == 0:
+            self._check_and_alert()
+
+        # Fire update callback
+        if self._update_callback:
+            try:
+                self._update_callback()
+            except Exception as e:
+                logger.error(f"Simulator callback error: {e}")
+
+    def _check_and_alert(self):
+        """Generate contextual alerts based on current conditions."""
+        for zone in self.venue.zones:
+            if zone.occupancy_rate > 0.9:
+                self.notification_service.create_alert(
+                    title=f"High Density: {zone.name}",
+                    message=f"{zone.name} is at {round(zone.occupancy_rate * 100)}% capacity. Consider redirecting foot traffic.",
+                    severity="warning",
+                    zone_id=zone.id,
+                    target_role="operator",
+                )
+
+    def _run_loop(self):
+        """Main simulation loop running in a background thread."""
+        while self._running:
+            try:
+                self.tick()
+                time.sleep(2.0 / self._speed)
+            except Exception as e:
+                logger.error(f"Simulation error: {e}")
+                time.sleep(1)
+
+    def get_status(self) -> Dict:
+        """Get current simulation status."""
+        return {
+            "running": self._running,
+            "speed": self._speed,
+            "tick_count": self._tick_count,
+            "phase": self.event.current_phase,
+            "phase_label": self.event.phase.label,
+            "phase_description": self.event.phase.description,
+            "attendance": self.event.actual_attendance,
+            "venue_occupancy": round(self.venue.overall_occupancy * 100, 1),
+        }

services/translation_service.py

@@ -0,0 +1,97 @@
+"""Google Cloud Translation service with mock fallback."""
+
+import logging
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+_translate_client = None
+_is_mock = True
+
+# Supported languages for the venue
+SUPPORTED_LANGUAGES = {
+    "en": "English",
+    "hi": "हिन्दी",
+    "ta": "தமிழ்",
+    "te": "తెలుగు",
+    "kn": "ಕನ್ನಡ",
+    "mr": "मराठी",
+    "bn": "বাংলা",
+    "es": "Español",
+    "fr": "Français",
+    "de": "Deutsch",
+    "ja": "日本語",
+    "zh": "中文",
+}
+
+# Cache for translations
+_translation_cache = {}
+
+
+def init_translation(app):
+    """Initialize Google Cloud Translation or fall back to mock."""
+    global _translate_client, _is_mock
+
+    if app.config.get("USE_MOCK_SERVICES"):
+        logger.info("🔶 Translation running in MOCK mode")
+        return
+
+    api_key = app.config.get("GOOGLE_TRANSLATE_API_KEY", "")
+    if not api_key:
+        logger.warning("⚠️ No Translation API key, using mock mode")
+        return
+
+    try:
+        from google.cloud import translate_v2 as translate
+
+        _translate_client = translate.Client()
+        _is_mock = False
+        logger.info("✅ Google Translate initialized successfully")
+    except Exception as e:
+        logger.error(f"❌ Translation init failed: {e}, using mock mode")
+
+
+def translate_text(text: str, target_lang: str, source_lang: str = "en") -> str:
+    """Translate text to the target language."""
+    if target_lang == source_lang:
+        return text
+
+    # Check cache
+    cache_key = f"{source_lang}:{target_lang}:{text}"
+    if cache_key in _translation_cache:
+        return _translation_cache[cache_key]
+
+    if _is_mock:
+        # In mock mode, return original text with language indicator
+        result = f"[{SUPPORTED_LANGUAGES.get(target_lang, target_lang)}] {text}"
+        _translation_cache[cache_key] = result
+        return result
+
+    try:
+        result = _translate_client.translate(
+            text, target_language=target_lang, source_language=source_lang
+        )
+        translated = result["translatedText"]
+        _translation_cache[cache_key] = translated
+        return translated
+    except Exception as e:
+        logger.error(f"Translation error: {e}")
+        return text
+
+
+def detect_language(text: str) -> str:
+    """Detect the language of input text."""
+    if _is_mock:
+        return "en"
+
+    try:
+        result = _translate_client.detect_language(text)
+        return result["language"]
+    except Exception as e:
+        logger.error(f"Language detection error: {e}")
+        return "en"
+
+
+def get_supported_languages() -> dict:
+    """Return supported language options."""
+    return SUPPORTED_LANGUAGES

static/css/base.css

@@ -0,0 +1,1276 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   VenueFlow Design System — base.css
+   Premium dark-mode sporting venue interface
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ─── CSS Custom Properties (Design Tokens) ───────────────────────────────── */
+:root {
+  /* Colors — Deep stadium night palette */
+  --bg-primary: #0a0e1a;
+  --bg-secondary: #111827;
+  --bg-tertiary: #1a2236;
+  --bg-card: #1e2a3a;
+  --bg-card-hover: #243347;
+  --bg-glass: rgba(30, 42, 58, 0.7);
+  --bg-glass-strong: rgba(30, 42, 58, 0.9);
+  --bg-overlay: rgba(10, 14, 26, 0.85);
+
+  /* Accent colors */
+  --accent-primary: #6366f1;      /* Indigo */
+  --accent-primary-light: #818cf8;
+  --accent-primary-dark: #4f46e5;
+  --accent-secondary: #06b6d4;    /* Cyan */
+  --accent-secondary-light: #22d3ee;
+  --accent-success: #22c55e;
+  --accent-success-light: #4ade80;
+  --accent-warning: #f59e0b;
+  --accent-warning-light: #fbbf24;
+  --accent-danger: #ef4444;
+  --accent-danger-light: #f87171;
+  --accent-critical: #18181b;
+
+  /* Text */
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-tertiary: #64748b;
+  --text-muted: #475569;
+  --text-inverse: #0a0e1a;
+
+  /* Density colors */
+  --density-low: #22c55e;
+  --density-moderate: #f59e0b;
+  --density-high: #ef4444;
+  --density-critical: #991b1b;
+
+  /* Borders */
+  --border-subtle: rgba(148, 163, 184, 0.1);
+  --border-medium: rgba(148, 163, 184, 0.2);
+  --border-strong: rgba(148, 163, 184, 0.3);
+  --border-accent: rgba(99, 102, 241, 0.4);
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
+  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+  --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
+  --gradient-dark: linear-gradient(180deg, #0a0e1a 0%, #111827 100%);
+  --gradient-card: linear-gradient(145deg, #1e2a3a 0%, #162030 100%);
+  --gradient-glass: linear-gradient(145deg, rgba(30,42,58,0.8) 0%, rgba(22,32,48,0.6) 100%);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+  --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
+
+  /* Typography */
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Z-index scale */
+  --z-base: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal: 500;
+  --z-toast: 700;
+  --z-chatbot: 800;
+  --z-overlay: 900;
+}
+
+/* ─── High Contrast Mode ──────────────────────────────────────────────────── */
+[data-high-contrast="true"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-card: #1a1a1a;
+  --text-primary: #ffffff;
+  --text-secondary: #e0e0e0;
+  --border-subtle: rgba(255, 255, 255, 0.3);
+  --border-medium: rgba(255, 255, 255, 0.5);
+}
+
+/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+[data-large-text="true"] html,
+[data-large-text="true"] {
+  font-size: 20px;
+}
+
+body {
+  font-family: var(--font-family);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* ─── Skip to Content (A11y) ──────────────────────────────────────────────── */
+.skip-link {
+  position: absolute;
+  top: -50px;
+  left: var(--space-4);
+  background: var(--accent-primary);
+  color: #fff;
+  padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-md);
+  z-index: 10000;
+  font-weight: 600;
+  text-decoration: none;
+  transition: top var(--transition-fast);
+}
+
+.skip-link:focus {
+  top: var(--space-4);
+}
+
+/* ─── Focus Indicators (A11y) ─────────────────────────────────────────────── */
+:focus-visible {
+  outline: 3px solid var(--accent-primary-light);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ─── Typography ──────────────────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+h1 { font-size: var(--font-size-4xl); letter-spacing: -0.02em; }
+h2 { font-size: var(--font-size-3xl); letter-spacing: -0.01em; }
+h3 { font-size: var(--font-size-2xl); }
+h4 { font-size: var(--font-size-xl); }
+h5 { font-size: var(--font-size-lg); }
+
+p { color: var(--text-secondary); margin-bottom: var(--space-4); }
+
+a {
+  color: var(--accent-primary-light);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover { color: var(--accent-secondary-light); }
+
+/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ─── Layout Containers ───────────────────────────────────────────────────── */
+.page-wrapper {
+  display: flex;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  padding: var(--space-6);
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.content-grid {
+  display: grid;
+  gap: var(--space-6);
+}
+
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 1024px) {
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 640px) {
+  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
+  .main-content { padding: var(--space-4); }
+}
+
+/* ─── Navigation Bar ─────────────────────────────────────────────────────── */
+.navbar {
+  background: var(--bg-glass-strong);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-subtle);
+  padding: var(--space-3) var(--space-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--font-size-xl);
+  font-weight: 800;
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.navbar-brand .logo-icon {
+  font-size: 1.5rem;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  list-style: none;
+}
+
+.navbar-nav a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: var(--font-size-sm);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-base);
+  text-decoration: none;
+  min-height: 44px;
+  min-width: 44px;
+  justify-content: center;
+}
+
+.navbar-nav a:hover,
+.navbar-nav a.active {
+  color: var(--text-primary);
+  background: var(--bg-card);
+}
+
+.navbar-nav a.active {
+  background: var(--accent-primary);
+  color: #fff;
+}
+
+.navbar-user {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.navbar-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: var(--font-size-sm);
+  color: #fff;
+}
+
+/* ─── Mobile Nav ──────────────────────────────────────────────────────────── */
+.mobile-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-glass-strong);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--space-2) var(--space-4);
+  z-index: var(--z-sticky);
+}
+
+.mobile-nav-items {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+}
+
+.mobile-nav-items a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  text-decoration: none;
+  min-height: 44px;
+  min-width: 44px;
+  justify-content: center;
+}
+
+.mobile-nav-items a .nav-icon {
+  font-size: 1.25rem;
+}
+
+.mobile-nav-items a:hover,
+.mobile-nav-items a.active {
+  color: var(--accent-primary-light);
+}
+
+@media (max-width: 768px) {
+  .navbar-nav { display: none; }
+  .mobile-nav { display: block; }
+  .main-content { padding-bottom: 80px; }
+}
+
+/* ─── Cards ───────────────────────────────────────────────────────────────── */
+.card {
+  background: var(--gradient-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--gradient-primary);
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.card:hover {
+  border-color: var(--border-medium);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.card:hover::before {
+  opacity: 1;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.card-title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.card-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  margin-top: var(--space-1);
+}
+
+.card-body {
+  color: var(--text-secondary);
+}
+
+/* ─── KPI Stat Cards ─────────────────────────────────────────────────────── */
+.stat-card {
+  background: var(--gradient-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card .stat-icon {
+  font-size: 1.75rem;
+  margin-bottom: var(--space-1);
+}
+
+.stat-card .stat-value {
+  font-size: var(--font-size-3xl);
+  font-weight: 800;
+  line-height: 1;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-card .stat-value.warning {
+  background: var(--gradient-warm);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.stat-card .stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+.stat-card .stat-change {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.stat-card .stat-change.positive { color: var(--accent-success); }
+.stat-card .stat-change.negative { color: var(--accent-danger); }
+
+/* ─── Buttons ─────────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-6);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  text-decoration: none;
+  min-height: 44px;
+  min-width: 44px;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+  background: var(--gradient-primary);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--shadow-sm), 0 0 0 0 rgba(99, 102, 241, 0);
+}
+
+.btn-primary:hover {
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  border-color: var(--border-medium);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+}
+
+.btn-success {
+  background: var(--accent-success);
+  color: #fff;
+}
+
+.btn-success:hover {
+  background: var(--accent-success-light);
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
+}
+
+.btn-danger {
+  background: var(--accent-danger);
+  color: #fff;
+}
+
+.btn-danger:hover {
+  background: var(--accent-danger-light);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: transparent;
+}
+
+.btn-ghost:hover {
+  background: var(--bg-card);
+  color: var(--text-primary);
+}
+
+.btn-sm {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-xs);
+  min-height: 36px;
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--font-size-base);
+}
+
+.btn-block { width: 100%; }
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* ─── Form Inputs ─────────────────────────────────────────────────────────── */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+
+.form-label {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.form-input {
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  transition: all var(--transition-fast);
+  min-height: 44px;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.form-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* ─── Badges ──────────────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+.badge-low { background: rgba(34,197,94,0.15); color: var(--density-low); }
+.badge-moderate { background: rgba(245,158,11,0.15); color: var(--density-moderate); }
+.badge-high { background: rgba(239,68,68,0.15); color: var(--density-high); }
+.badge-critical { background: rgba(153,27,27,0.2); color: #fca5a5; }
+.badge-info { background: rgba(59,130,246,0.15); color: #60a5fa; }
+
+/* ─── Progress Bar ────────────────────────────────────────────────────────── */
+.progress {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slow);
+  position: relative;
+}
+
+.progress-bar.low { background: var(--density-low); }
+.progress-bar.moderate { background: var(--density-moderate); }
+.progress-bar.high { background: var(--density-high); }
+.progress-bar.critical { background: var(--density-critical); }
+
+.progress-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* ─── Toasts / Alerts ─────────────────────────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  top: var(--space-6);
+  right: var(--space-6);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-width: 400px;
+}
+
+.toast {
+  background: var(--bg-glass-strong);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4) var(--space-5);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  animation: slideInRight var(--transition-spring) forwards;
+  box-shadow: var(--shadow-lg);
+}
+
+.toast.info { border-left: 3px solid #3b82f6; }
+.toast.success { border-left: 3px solid var(--accent-success); }
+.toast.warning { border-left: 3px solid var(--accent-warning); }
+.toast.error { border-left: 3px solid var(--accent-danger); }
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideOut {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+
+.toast-icon { font-size: 1.25rem; flex-shrink: 0; }
+.toast-body { flex: 1; }
+.toast-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-primary); }
+.toast-message { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
+
+.toast-close {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: var(--space-1);
+  min-height: 44px;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Density Indicator ───────────────────────────────────────────────────── */
+.density-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.density-dot.low { background: var(--density-low); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
+.density-dot.moderate { background: var(--density-moderate); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
+.density-dot.high { background: var(--density-high); box-shadow: 0 0 8px rgba(239,68,68,0.5); animation: pulse-dot 2s infinite; }
+.density-dot.critical { background: var(--density-critical); box-shadow: 0 0 8px rgba(153,27,27,0.5); animation: pulse-dot 1s infinite; }
+
+@keyframes pulse-dot {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.3); opacity: 0.7; }
+}
+
+/* ─── Loading Spinner ─────────────────────────────────────────────────────── */
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--border-medium);
+  border-top-color: var(--accent-primary);
+  border-radius: var(--radius-full);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-overlay);
+  border-radius: inherit;
+  z-index: var(--z-base);
+}
+
+/* ─── Chatbot Widget ──────────────────────────────────────────────────────── */
+.chatbot-toggle {
+  position: fixed;
+  bottom: 90px;
+  right: var(--space-6);
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-full);
+  background: var(--gradient-primary);
+  color: #fff;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  box-shadow: var(--shadow-lg), var(--shadow-glow);
+  z-index: var(--z-chatbot);
+  transition: all var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chatbot-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-xl), 0 0 30px rgba(99, 102, 241, 0.5);
+}
+
+.chatbot-window {
+  position: fixed;
+  bottom: 160px;
+  right: var(--space-6);
+  width: 380px;
+  max-height: 500px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  z-index: var(--z-chatbot);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+  pointer-events: none;
+  transition: all var(--transition-spring);
+}
+
+.chatbot-window.open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: all;
+}
+
+.chatbot-header {
+  background: var(--gradient-primary);
+  padding: var(--space-4) var(--space-5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
+
+.chatbot-header h4 { font-size: var(--font-size-base); color: #fff; }
+
+.chatbot-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 250px;
+}
+
+.chat-message {
+  max-width: 85%;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  animation: fadeInUp 0.3s ease;
+}
+
+@keyframes fadeInUp {
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.chat-message.user {
+  align-self: flex-end;
+  background: var(--accent-primary);
+  color: #fff;
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.chat-message.bot {
+  align-self: flex-start;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border-bottom-left-radius: var(--radius-sm);
+}
+
+.chat-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+}
+
+.chat-suggestion {
+  font-size: var(--font-size-xs);
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.chat-suggestion:hover {
+  background: var(--accent-primary);
+  color: #fff;
+  border-color: var(--accent-primary);
+}
+
+.chatbot-input {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--border-subtle);
+}
+
+.chatbot-input input {
+  flex: 1;
+  padding: var(--space-3);
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  min-height: 44px;
+}
+
+.chatbot-input input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.chatbot-input button {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: var(--accent-primary);
+  color: #fff;
+  border: none;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chatbot-input button:hover {
+  background: var(--accent-primary-dark);
+}
+
+/* ─── Typing indicator ────────────────────────────────────────────────────── */
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: var(--space-3) var(--space-4);
+  align-items: center;
+}
+
+.typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background: var(--text-tertiary);
+  border-radius: var(--radius-full);
+  animation: typingBounce 1.4s ease infinite;
+}
+
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+
+/* ─── Map Container ───────────────────────────────────────────────────────── */
+.map-container {
+  width: 100%;
+  height: 500px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+}
+
+@media (max-width: 640px) {
+  .map-container { height: 350px; }
+}
+
+/* ─── Queue Cards ─────────────────────────────────────────────────────────── */
+.queue-card {
+  background: var(--gradient-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  transition: all var(--transition-base);
+}
+
+.queue-card:hover {
+  border-color: var(--border-medium);
+  box-shadow: var(--shadow-md);
+}
+
+.queue-icon {
+  font-size: 2rem;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+
+.queue-details { flex: 1; }
+.queue-name { font-weight: 600; font-size: var(--font-size-base); color: var(--text-primary); }
+.queue-meta { font-size: var(--font-size-sm); color: var(--text-tertiary); }
+.queue-wait {
+  text-align: right;
+  font-weight: 700;
+  font-size: var(--font-size-xl);
+}
+
+/* ─── Phase Indicator ─────────────────────────────────────────────────────── */
+.phase-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--bg-card);
+  border: 1px solid var(--border-accent);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--accent-primary-light);
+}
+
+.phase-badge .phase-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--accent-primary);
+  animation: pulse-dot 2s infinite;
+}
+
+/* ─── Auth Pages ──────────────────────────────────────────────────────────── */
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gradient-dark);
+  padding: var(--space-6);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-page::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.08) 0%, transparent 50%),
+              radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.06) 0%, transparent 50%);
+  animation: auroraShift 20s ease infinite alternate;
+}
+
+@keyframes auroraShift {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(-5%, 5%) rotate(3deg); }
+}
+
+.auth-card {
+  background: var(--bg-glass);
+  backdrop-filter: blur(30px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  padding: var(--space-10);
+  width: 100%;
+  max-width: 440px;
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-xl);
+}
+
+.auth-card h1 {
+  font-size: var(--font-size-2xl);
+  text-align: center;
+  margin-bottom: var(--space-2);
+}
+
+.auth-card .auth-subtitle {
+  text-align: center;
+  color: var(--text-tertiary);
+  margin-bottom: var(--space-8);
+  font-size: var(--font-size-sm);
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: var(--space-6);
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+}
+
+/* ─── Flash Messages ──────────────────────────────────────────────────────── */
+.flash-messages {
+  margin-bottom: var(--space-4);
+}
+
+.flash-msg {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  margin-bottom: var(--space-2);
+}
+
+.flash-msg.success { background: rgba(34,197,94,0.15); color: var(--accent-success-light); border: 1px solid rgba(34,197,94,0.2); }
+.flash-msg.error { background: rgba(239,68,68,0.15); color: var(--accent-danger-light); border: 1px solid rgba(239,68,68,0.2); }
+.flash-msg.warning { background: rgba(245,158,11,0.15); color: var(--accent-warning-light); border: 1px solid rgba(245,158,11,0.2); }
+.flash-msg.info { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.2); }
+
+/* ─── Hero Section (Attendee Home) ────────────────────────────────────────── */
+.hero-banner {
+  background: var(--gradient-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8) var(--space-10);
+  margin-bottom: var(--space-6);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.hero-banner h2 { color: #fff; font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
+.hero-banner p { color: rgba(255,255,255,0.8); margin-bottom: 0; }
+
+.hero-event-info {
+  display: flex;
+  gap: var(--space-6);
+  margin-top: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.hero-event-info .event-detail {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: rgba(255,255,255,0.9);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
+
+/* ─── Zone List ───────────────────────────────────────────────────────────── */
+.zone-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.zone-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-card);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  transition: all var(--transition-fast);
+}
+
+.zone-item:hover {
+  border-color: var(--border-medium);
+  background: var(--bg-card-hover);
+}
+
+.zone-info { flex: 1; }
+.zone-name { font-weight: 600; font-size: var(--font-size-sm); }
+.zone-type { font-size: var(--font-size-xs); color: var(--text-tertiary); text-transform: capitalize; }
+.zone-occupancy { text-align: right; font-size: var(--font-size-sm); font-weight: 600; }
+
+/* ─── Table ───────────────────────────────────────────────────────────────── */
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.data-table th {
+  text-align: left;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.data-table td {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-sm);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.data-table tr:hover td {
+  background: var(--bg-card);
+}
+
+/* ─── Reduced Motion ──────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+[data-reduced-motion="true"] *,
+[data-reduced-motion="true"] *::before,
+[data-reduced-motion="true"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
+/* ─── Utilities ───────────────────────────────────────────────────────────── */
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+.visually-hidden { composes: sr-only; }
+
+@media (max-width: 768px) {
+  .chatbot-window {
+    right: var(--space-4);
+    left: var(--space-4);
+    width: auto;
+    bottom: 100px;
+  }
+  .chatbot-toggle {
+    bottom: 76px;
+  }
+}

static/js/accessibility.js

@@ -0,0 +1,85 @@
+/**
+ * VenueFlow — Accessibility Preferences
+ */
+
+const A11Y_STORAGE_KEY = 'venueflow_a11y';
+
+function getA11yPrefs() {
+    try {
+        return JSON.parse(localStorage.getItem(A11Y_STORAGE_KEY) || '{}');
+    } catch {
+        return {};
+    }
+}
+
+function saveA11yPrefs(prefs) {
+    localStorage.setItem(A11Y_STORAGE_KEY, JSON.stringify(prefs));
+}
+
+function toggleA11y(key) {
+    const prefs = getA11yPrefs();
+    prefs[key] = !prefs[key];
+    saveA11yPrefs(prefs);
+    applyA11yPrefs(prefs);
+    updateSwitchUI();
+}
+
+function applyA11yPrefs(prefs) {
+    const root = document.documentElement;
+
+    if (prefs.highContrast) {
+        root.dataset.highContrast = 'true';
+    } else {
+        root.dataset.highContrast = 'false';
+    }
+
+    if (prefs.largeText) {
+        root.dataset.largeText = 'true';
+    } else {
+        root.dataset.largeText = 'false';
+    }
+
+    if (prefs.reducedMotion) {
+        root.dataset.reducedMotion = 'true';
+    } else {
+        root.dataset.reducedMotion = 'false';
+    }
+}
+
+function updateSwitchUI() {
+    const prefs = getA11yPrefs();
+
+    const pairs = {
+        highContrast: { toggle: 'toggle-contrast', switch: 'switch-contrast' },
+        largeText:    { toggle: 'toggle-text', switch: 'switch-text' },
+        reducedMotion:{ toggle: 'toggle-motion', switch: 'switch-motion' },
+    };
+
+    for (const [key, ids] of Object.entries(pairs)) {
+        const toggleEl = document.getElementById(ids.toggle);
+        const switchEl = document.getElementById(ids.switch);
+
+        if (toggleEl) {
+            toggleEl.setAttribute('aria-checked', prefs[key] ? 'true' : 'false');
+        }
+        if (switchEl) {
+            switchEl.textContent = prefs[key] ? 'ON' : 'OFF';
+            switchEl.style.color = prefs[key] ? 'var(--accent-success)' : 'var(--text-muted)';
+            switchEl.style.fontWeight = prefs[key] ? '700' : '500';
+        }
+    }
+}
+
+function setLanguage(lang) {
+    localStorage.setItem('venueflow_lang', lang);
+    showToast('Language Updated', `Preferred language set. Translation will apply to new content.`, 'info');
+}
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', () => {
+    const prefs = getA11yPrefs();
+    applyA11yPrefs(prefs);
+    updateSwitchUI();
+});
+
+console.log('♿ Accessibility loaded');

static/js/app.js

@@ -0,0 +1,116 @@
+/**
+ * VenueFlow — Core JavaScript Utilities
+ */
+
+// ─── Toast Notification System ───────────────────────────────────────────────
+
+function showToast(title, message, type = 'info', duration = 5000) {
+    const container = document.getElementById('toast-container');
+    if (!container) return;
+
+    const icons = { info: 'ℹ️', success: '✅', warning: '⚠️', error: '❌' };
+
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.setAttribute('role', 'alert');
+    toast.innerHTML = `
+        <span class="toast-icon">${icons[type] || 'ℹ️'}</span>
+        <div class="toast-body">
+            <div class="toast-title">${escapeHtml(title)}</div>
+            <div class="toast-message">${escapeHtml(message)}</div>
+        </div>
+        <button class="toast-close" onclick="this.parentElement.remove()" aria-label="Dismiss notification">&times;</button>
+    `;
+
+    container.appendChild(toast);
+
+    // Auto remove
+    setTimeout(() => {
+        if (toast.parentElement) {
+            toast.style.animation = 'slideOut 0.3s ease forwards';
+            setTimeout(() => toast.remove(), 300);
+        }
+    }, duration);
+}
+
+
+// ─── XSS Prevention ─────────────────────────────────────────────────────────
+
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+
+// ─── API Helper ──────────────────────────────────────────────────────────────
+
+async function apiCall(url, options = {}) {
+    try {
+        const defaults = {
+            headers: { 'Content-Type': 'application/json' },
+        };
+        const resp = await fetch(url, { ...defaults, ...options });
+        const data = await resp.json();
+
+        if (!resp.ok) {
+            throw new Error(data.error || `HTTP ${resp.status}`);
+        }
+
+        return data;
+    } catch (err) {
+        console.error(`API Error [${url}]:`, err);
+        throw err;
+    }
+}
+
+
+// ─── Format Helpers ──────────────────────────────────────────────────────────
+
+function formatNumber(num) {
+    if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+    return num.toString();
+}
+
+function formatWaitTime(minutes) {
+    if (minutes < 1) return '< 1 min';
+    if (minutes < 60) return Math.round(minutes) + ' min';
+    const h = Math.floor(minutes / 60);
+    const m = Math.round(minutes % 60);
+    return `${h}h ${m}m`;
+}
+
+function getDensityClass(level) {
+    return level || 'low';
+}
+
+
+// ─── Keyboard Accessibility Helpers ──────────────────────────────────────────
+
+document.addEventListener('keydown', (e) => {
+    // Allow Enter and Space to activate buttons/links for a11y
+    if (e.key === 'Enter' || e.key === ' ') {
+        const el = document.activeElement;
+        if (el && (el.getAttribute('role') === 'button' || el.getAttribute('role') === 'switch')) {
+            e.preventDefault();
+            el.click();
+        }
+    }
+});
+
+
+// ─── Auto-dismiss flash messages ─────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+    const flashMsgs = document.querySelectorAll('.flash-msg');
+    flashMsgs.forEach((msg, i) => {
+        setTimeout(() => {
+            msg.style.transition = 'opacity 0.5s';
+            msg.style.opacity = '0';
+            setTimeout(() => msg.remove(), 500);
+        }, 4000 + (i * 1000));
+    });
+});
+
+console.log('🏟️ VenueFlow app.js loaded');

static/js/chatbot.js

@@ -0,0 +1,133 @@
+/**
+ * VenueFlow — AI Chatbot Widget
+ */
+
+let chatHistory = [];
+let chatbotOpen = false;
+
+function toggleChatbot() {
+    const window = document.getElementById('chatbot-window');
+    const toggle = document.getElementById('chatbot-toggle');
+
+    chatbotOpen = !chatbotOpen;
+
+    if (chatbotOpen) {
+        window.classList.add('open');
+        window.setAttribute('aria-hidden', 'false');
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.innerHTML = '✕';
+        document.getElementById('chat-input').focus();
+        loadSuggestions();
+    } else {
+        window.classList.remove('open');
+        window.setAttribute('aria-hidden', 'true');
+        toggle.setAttribute('aria-expanded', 'false');
+        toggle.innerHTML = '💬';
+    }
+}
+
+async function loadSuggestions() {
+    try {
+        const suggestions = await apiCall('/api/chat/suggestions');
+        const container = document.getElementById('chat-suggestions');
+        if (container && suggestions) {
+            container.innerHTML = suggestions.map(s =>
+                `<button class="chat-suggestion" onclick="sendSuggestion('${escapeHtml(s)}')" aria-label="Quick reply: ${escapeHtml(s)}">${escapeHtml(s)}</button>`
+            ).join('');
+        }
+    } catch (e) {
+        console.error('Failed to load suggestions:', e);
+    }
+}
+
+function sendSuggestion(text) {
+    document.getElementById('chat-input').value = text;
+    sendChatMessage();
+}
+
+async function sendChatMessage() {
+    const input = document.getElementById('chat-input');
+    const message = input.value.trim();
+    if (!message) return;
+
+    // Add user message
+    addChatMessage(message, 'user');
+    chatHistory.push({ role: 'user', content: message });
+    input.value = '';
+
+    // Show typing indicator
+    showTypingIndicator();
+
+    // Hide suggestions after first message
+    const sugContainer = document.getElementById('chat-suggestions');
+    if (sugContainer) sugContainer.style.display = 'none';
+
+    try {
+        const data = await apiCall('/api/chat', {
+            method: 'POST',
+            body: JSON.stringify({
+                message: message,
+                history: chatHistory.slice(-6),
+            }),
+        });
+
+        removeTypingIndicator();
+        addChatMessage(data.response, 'bot');
+        chatHistory.push({ role: 'assistant', content: data.response });
+    } catch (err) {
+        removeTypingIndicator();
+        addChatMessage('Sorry, I had trouble processing that. Please try again.', 'bot');
+    }
+}
+
+function addChatMessage(text, role) {
+    const container = document.getElementById('chat-messages');
+    const msg = document.createElement('div');
+    msg.className = `chat-message ${role}`;
+
+    // Support basic markdown-like formatting
+    let formatted = escapeHtml(text);
+    // Bold
+    formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    // Line breaks
+    formatted = formatted.replace(/\n/g, '<br>');
+
+    msg.innerHTML = formatted;
+    container.appendChild(msg);
+    container.scrollTop = container.scrollHeight;
+}
+
+function showTypingIndicator() {
+    const container = document.getElementById('chat-messages');
+    const indicator = document.createElement('div');
+    indicator.id = 'typing-indicator';
+    indicator.className = 'chat-message bot';
+    indicator.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
+    container.appendChild(indicator);
+    container.scrollTop = container.scrollHeight;
+}
+
+function removeTypingIndicator() {
+    const indicator = document.getElementById('typing-indicator');
+    if (indicator) indicator.remove();
+}
+
+// Enter key to send
+document.addEventListener('DOMContentLoaded', () => {
+    const input = document.getElementById('chat-input');
+    if (input) {
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendChatMessage();
+            }
+        });
+    }
+
+    const toggle = document.getElementById('chatbot-toggle');
+    if (toggle) {
+        toggle.addEventListener('click', toggleChatbot);
+    }
+});
+
+console.log('🤖 Chatbot loaded');

static/js/dashboard.js

@@ -0,0 +1,90 @@
+/**
+ * VenueFlow — Operator Dashboard Logic
+ */
+
+// Auto-refresh dashboard data
+let dashboardRefreshInterval = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+    dashboardRefreshInterval = setInterval(refreshDashboard, 4000);
+});
+
+async function refreshDashboard() {
+    try {
+        const [crowdData, queueData] = await Promise.all([
+            apiCall('/api/crowd/summary'),
+            apiCall('/api/queue/summary'),
+        ]);
+
+        // Update KPIs
+        updateElement('kpi-attendance', crowdData.total_current || 0);
+        updateElement('kpi-occupancy', (crowdData.overall_occupancy || 0) + '%');
+        updateElement('kpi-waiting', queueData.total_people_waiting || 0);
+
+        const highZones = (crowdData.density_counts?.high || 0) + (crowdData.density_counts?.critical || 0);
+        updateElement('kpi-alerts', highZones);
+
+        // Update zone list
+        const zoneList = document.getElementById('op-zone-list');
+        if (zoneList && crowdData.zones) {
+            zoneList.innerHTML = crowdData.zones
+                .sort((a, b) => b.occupancy_rate - a.occupancy_rate)
+                .map(zone => `
+                    <div class="zone-item" data-zone-id="${zone.id}">
+                        <span class="density-dot ${zone.density_level}"></span>
+                        <div class="zone-info">
+                            <div class="zone-name">${escapeHtml(zone.name)}</div>
+                            <div class="zone-type">${zone.zone_type.replace('_', ' ')} • ${zone.current_count}/${zone.capacity}</div>
+                        </div>
+                        <div class="zone-occupancy" style="color:${zone.density_color}">${zone.occupancy_rate}%</div>
+                    </div>
+                `).join('');
+        }
+
+        // Update queue list
+        const queueList = document.getElementById('op-queue-list');
+        if (queueList && queueData.stations) {
+            queueList.innerHTML = queueData.stations
+                .sort((a, b) => b.estimated_wait_minutes - a.estimated_wait_minutes)
+                .map(station => `
+                    <div class="zone-item">
+                        <span style="font-size:1.25rem;">${station.category_icon}</span>
+                        <div class="zone-info">
+                            <div class="zone-name">${escapeHtml(station.name)}</div>
+                            <div class="zone-type">${station.current_length} in line</div>
+                        </div>
+                        <div class="zone-occupancy" style="color:${station.wait_color}">${Math.round(station.estimated_wait_minutes)} min</div>
+                    </div>
+                `).join('');
+        }
+    } catch (e) {
+        // Silent fail for dashboard refresh
+    }
+}
+
+async function startSim() {
+    try {
+        await apiCall('/api/simulator/start', { method: 'POST' });
+        showToast('Simulation Started', 'Crowd data is now being simulated in real-time', 'success');
+        setTimeout(() => location.reload(), 1000);
+    } catch (err) {
+        showToast('Error', err.message || 'Could not start simulation', 'error');
+    }
+}
+
+async function stopSim() {
+    try {
+        await apiCall('/api/simulator/stop', { method: 'POST' });
+        showToast('Simulation Stopped', 'Data is now frozen', 'info');
+        setTimeout(() => location.reload(), 1000);
+    } catch (err) {
+        showToast('Error', err.message || 'Could not stop simulation', 'error');
+    }
+}
+
+function updateElement(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+}
+
+console.log('📊 Dashboard loaded');

static/js/heatmap.js

@@ -0,0 +1,232 @@
+/**
+ * VenueFlow — Canvas-based Crowd Heatmap Visualization
+ */
+
+let heatmapCanvas, heatmapCtx;
+let heatmapData = [];
+let heatmapAnimFrame = null;
+
+// Stadium zone approximate positions (normalized 0-1 for canvas)
+const ZONE_POSITIONS = {
+    north_stand:     { x: 0.5, y: 0.15, w: 0.35, h: 0.08, label: 'North Stand' },
+    south_stand:     { x: 0.5, y: 0.85, w: 0.35, h: 0.08, label: 'South Stand' },
+    east_pavilion:   { x: 0.85, y: 0.5, w: 0.08, h: 0.3, label: 'East Pavilion' },
+    west_pavilion:   { x: 0.15, y: 0.5, w: 0.08, h: 0.3, label: 'West Pavilion' },
+    main_pavilion:   { x: 0.72, y: 0.25, w: 0.12, h: 0.1, label: 'VIP' },
+    north_concourse: { x: 0.5, y: 0.06, w: 0.4, h: 0.04, label: 'N Concourse' },
+    south_concourse: { x: 0.5, y: 0.94, w: 0.4, h: 0.04, label: 'S Concourse' },
+    east_concourse:  { x: 0.95, y: 0.5, w: 0.04, h: 0.35, label: 'E Concourse' },
+    west_concourse:  { x: 0.05, y: 0.5, w: 0.04, h: 0.35, label: 'W Concourse' },
+    gate_1:          { x: 0.35, y: 0.02, w: 0.06, h: 0.03, label: 'Gate 1' },
+    gate_3:          { x: 0.65, y: 0.02, w: 0.06, h: 0.03, label: 'Gate 3' },
+    gate_5:          { x: 0.02, y: 0.5, w: 0.03, h: 0.06, label: 'Gate 5' },
+    gate_7:          { x: 0.5, y: 0.98, w: 0.06, h: 0.03, label: 'Gate 7' },
+    food_north:      { x: 0.6, y: 0.1, w: 0.06, h: 0.04, label: '🍕 Food N' },
+    food_south:      { x: 0.4, y: 0.9, w: 0.06, h: 0.04, label: '🍕 Food S' },
+    food_west:       { x: 0.1, y: 0.6, w: 0.04, h: 0.06, label: '🍕 Food W' },
+    restroom_n1:     { x: 0.38, y: 0.1, w: 0.04, h: 0.03, label: '🚻 N1' },
+    restroom_s1:     { x: 0.62, y: 0.9, w: 0.04, h: 0.03, label: '🚻 S1' },
+    restroom_e1:     { x: 0.9, y: 0.35, w: 0.03, h: 0.04, label: '🚻 E1' },
+    restroom_w1:     { x: 0.1, y: 0.65, w: 0.03, h: 0.04, label: '🚻 W1' },
+    parking_a:       { x: 0.5, y: -0.02, w: 0.15, h: 0.03, label: 'Parking A' },
+    parking_b:       { x: -0.02, y: 0.3, w: 0.03, h: 0.1, label: 'Parking B' },
+};
+
+const DENSITY_COLORS = {
+    low: '#22c55e',
+    moderate: '#f59e0b',
+    high: '#ef4444',
+    critical: '#991b1b',
+};
+
+function initHeatmap() {
+    heatmapCanvas = document.getElementById('heatmap-canvas');
+    if (!heatmapCanvas) return;
+
+    heatmapCtx = heatmapCanvas.getContext('2d');
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    // Initial fetch
+    fetchHeatmapData();
+
+    // Auto-refresh every 3 seconds
+    setInterval(fetchHeatmapData, 3000);
+}
+
+function resizeCanvas() {
+    if (!heatmapCanvas) return;
+    const rect = heatmapCanvas.parentElement.getBoundingClientRect();
+    heatmapCanvas.width = rect.width;
+    heatmapCanvas.height = rect.height;
+    drawHeatmap();
+}
+
+async function fetchHeatmapData() {
+    try {
+        const data = await apiCall('/api/crowd/heatmap');
+        heatmapData = data.zones || [];
+        drawHeatmap();
+        updateZoneCards(heatmapData);
+    } catch (e) {
+        console.error('Heatmap fetch error:', e);
+    }
+}
+
+function drawHeatmap() {
+    if (!heatmapCtx || !heatmapCanvas) return;
+
+    const W = heatmapCanvas.width;
+    const H = heatmapCanvas.height;
+
+    // Clear
+    heatmapCtx.fillStyle = '#111827';
+    heatmapCtx.fillRect(0, 0, W, H);
+
+    // Draw pitch (center ellipse)
+    heatmapCtx.save();
+    heatmapCtx.beginPath();
+    heatmapCtx.ellipse(W * 0.5, H * 0.5, W * 0.25, H * 0.3, 0, 0, Math.PI * 2);
+    heatmapCtx.fillStyle = '#1a3a2a';
+    heatmapCtx.fill();
+    heatmapCtx.strokeStyle = '#2a5a3a';
+    heatmapCtx.lineWidth = 2;
+    heatmapCtx.stroke();
+    heatmapCtx.restore();
+
+    // Draw pitch circle
+    heatmapCtx.beginPath();
+    heatmapCtx.ellipse(W * 0.5, H * 0.5, W * 0.08, H * 0.1, 0, 0, Math.PI * 2);
+    heatmapCtx.strokeStyle = '#2a5a3a';
+    heatmapCtx.lineWidth = 1;
+    heatmapCtx.stroke();
+
+    // Draw zones
+    heatmapData.forEach(zone => {
+        const pos = ZONE_POSITIONS[zone.id];
+        if (!pos) return;
+
+        const x = pos.x * W;
+        const y = pos.y * H;
+        const w = pos.w * W;
+        const h = pos.h * H;
+
+        // Zone fill with density color
+        const color = DENSITY_COLORS[zone.density_level] || '#22c55e';
+        const alpha = 0.3 + (zone.occupancy_rate / 100) * 0.5;
+
+        heatmapCtx.save();
+
+        // Glow effect
+        heatmapCtx.shadowColor = color;
+        heatmapCtx.shadowBlur = 15 * (zone.occupancy_rate / 100);
+
+        heatmapCtx.fillStyle = hexToRgba(color, alpha);
+        heatmapCtx.strokeStyle = hexToRgba(color, 0.6);
+        heatmapCtx.lineWidth = 1;
+
+        const rx = x - w / 2;
+        const ry = y - h / 2;
+
+        // Rounded rect
+        roundRect(heatmapCtx, rx, ry, w, h, 4);
+        heatmapCtx.fill();
+        heatmapCtx.stroke();
+
+        heatmapCtx.restore();
+
+        // Label
+        heatmapCtx.save();
+        heatmapCtx.fillStyle = '#f1f5f9';
+        heatmapCtx.font = `${Math.max(9, W * 0.012)}px Inter, sans-serif`;
+        heatmapCtx.textAlign = 'center';
+        heatmapCtx.textBaseline = 'middle';
+
+        const label = pos.label || zone.name;
+        const occ = `${Math.round(zone.occupancy_rate)}%`;
+
+        if (h > 25) {
+            heatmapCtx.fillText(label, x, y - 6);
+            heatmapCtx.font = `bold ${Math.max(10, W * 0.014)}px Inter, sans-serif`;
+            heatmapCtx.fillStyle = color;
+            heatmapCtx.fillText(occ, x, y + 8);
+        } else {
+            heatmapCtx.fillText(`${label} ${occ}`, x, y);
+        }
+
+        heatmapCtx.restore();
+    });
+
+    // Title
+    heatmapCtx.save();
+    heatmapCtx.fillStyle = '#94a3b8';
+    heatmapCtx.font = `600 ${Math.max(12, W * 0.016)}px Inter, sans-serif`;
+    heatmapCtx.textAlign = 'center';
+    heatmapCtx.fillText('🏏 Wankhede Stadium — Live Density', W / 2, H * 0.5);
+    heatmapCtx.restore();
+}
+
+function updateZoneCards(zones) {
+    zones.forEach(zone => {
+        const card = document.querySelector(`[data-zone-id="${zone.id}"]`);
+        if (!card) return;
+
+        const progressBar = card.querySelector('.progress-bar');
+        if (progressBar) {
+            progressBar.style.width = zone.occupancy_rate + '%';
+            progressBar.className = `progress-bar ${zone.density_level}`;
+        }
+
+        const dot = card.querySelector('.density-dot');
+        if (dot) {
+            dot.className = `density-dot ${zone.density_level}`;
+        }
+    });
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+}
+
+// Toggle table view
+document.addEventListener('DOMContentLoaded', () => {
+    initHeatmap();
+
+    const toggleBtn = document.getElementById('toggle-table-view');
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', () => {
+            const visual = document.getElementById('heatmap-visual');
+            const table = document.getElementById('heatmap-table');
+            if (table.style.display === 'none') {
+                table.style.display = 'block';
+                visual.style.display = 'none';
+                toggleBtn.textContent = '🗺️ Map View';
+            } else {
+                table.style.display = 'none';
+                visual.style.display = 'block';
+                toggleBtn.textContent = '📋 Table View';
+            }
+        });
+    }
+});
+
+console.log('🔥 Heatmap loaded');

static/js/notifications.js

@@ -0,0 +1,59 @@
+/**
+ * VenueFlow — Notification Handler
+ */
+
+let notifCheckInterval = null;
+
+async function checkNotifications() {
+    try {
+        const data = await apiCall('/api/notifications/unread');
+        const countEl = document.getElementById('notif-count');
+        if (countEl) {
+            const count = data.count || 0;
+            countEl.textContent = count;
+            countEl.style.display = count > 0 ? 'flex' : 'none';
+        }
+    } catch (e) {
+        // Silent fail for notification polling
+    }
+}
+
+async function loadNotifications() {
+    try {
+        const notifications = await apiCall('/api/notifications?limit=10');
+        if (notifications && notifications.length > 0) {
+            // Show the latest unread as a toast
+            const unread = notifications.filter(n => !n.read);
+            if (unread.length > 0) {
+                const latest = unread[0];
+                showToast(latest.title, latest.message, latest.severity === 'critical' ? 'error' : latest.severity);
+                // Mark as read
+                await apiCall('/api/notifications/read', {
+                    method: 'POST',
+                    body: JSON.stringify({ id: latest.id }),
+                });
+            }
+        }
+    } catch (e) {
+        // Silent fail
+    }
+}
+
+// Listen for SSE notifications
+document.addEventListener('venueflow:update', (e) => {
+    checkNotifications();
+});
+
+// Start periodic check
+document.addEventListener('DOMContentLoaded', () => {
+    checkNotifications();
+    notifCheckInterval = setInterval(checkNotifications, 10000);
+
+    // Click handler for notification bell
+    const bell = document.getElementById('notification-bell');
+    if (bell) {
+        bell.addEventListener('click', loadNotifications);
+    }
+});
+
+console.log('🔔 Notifications loaded');

static/js/queue.js

@@ -0,0 +1,110 @@
+/**
+ * VenueFlow — Queue Management UI
+ */
+
+// Filter queue stations by category
+document.addEventListener('DOMContentLoaded', () => {
+    const filterBtns = document.querySelectorAll('.queue-filter');
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const category = btn.dataset.category;
+
+            // Update active state
+            filterBtns.forEach(b => {
+                b.classList.remove('active');
+                b.classList.replace('btn-primary', 'btn-secondary');
+                b.setAttribute('aria-selected', 'false');
+            });
+            btn.classList.add('active');
+            btn.classList.replace('btn-secondary', 'btn-primary');
+            btn.setAttribute('aria-selected', 'true');
+
+            // Filter cards
+            const cards = document.querySelectorAll('#queue-stations-list .queue-card');
+            cards.forEach(card => {
+                if (category === 'all' || card.dataset.category === category) {
+                    card.style.display = 'flex';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        });
+    });
+
+    // Auto-refresh queue data
+    setInterval(refreshQueues, 5000);
+});
+
+async function refreshQueues() {
+    try {
+        const data = await apiCall('/api/queue/summary');
+        if (!data || !data.stations) return;
+
+        data.stations.forEach(station => {
+            const card = document.querySelector(`[data-station-id="${station.id}"]`);
+            if (!card) return;
+
+            const waitEl = card.querySelector('.queue-wait');
+            if (waitEl) {
+                waitEl.textContent = Math.round(station.estimated_wait_minutes) + ' min';
+                waitEl.style.color = station.wait_color;
+            }
+
+            const metaEl = card.querySelector('.queue-meta');
+            if (metaEl) {
+                metaEl.textContent = `${station.category_label} • ${station.current_length} in line`;
+            }
+
+            const progressBar = card.querySelector('.progress-bar');
+            if (progressBar) {
+                const w = Math.min(station.estimated_wait_minutes * 3.3, 100);
+                progressBar.style.width = w + '%';
+                progressBar.className = `progress-bar ${station.wait_level}`;
+            }
+        });
+    } catch (e) {
+        // Silent fail for background refresh
+    }
+}
+
+async function joinQueue(stationId) {
+    try {
+        const ticket = await apiCall('/api/queue/join', {
+            method: 'POST',
+            body: JSON.stringify({ station_id: stationId }),
+        });
+
+        if (ticket && ticket.id) {
+            showToast(
+                'Queue Joined! 🎫',
+                `Ticket #${ticket.id} — Position ${ticket.position} at ${ticket.station_name}`,
+                'success',
+                8000
+            );
+
+            // Refresh the page to show updated tickets
+            setTimeout(() => location.reload(), 1500);
+        }
+    } catch (err) {
+        showToast('Could not join queue', err.message || 'Please try again', 'error');
+    }
+}
+
+async function cancelTicket(ticketId) {
+    if (!confirm('Cancel this virtual queue ticket?')) return;
+
+    try {
+        await apiCall('/api/queue/cancel', {
+            method: 'POST',
+            body: JSON.stringify({ ticket_id: ticketId }),
+        });
+
+        showToast('Ticket Cancelled', 'Your virtual queue spot has been released.', 'info');
+        setTimeout(() => location.reload(), 1000);
+    } catch (err) {
+        showToast('Could not cancel', err.message || 'Please try again', 'error');
+    }
+}
+
+console.log('⏱️ Queue UI loaded');

static/js/simulator-ui.js

@@ -0,0 +1,79 @@
+/**
+ * VenueFlow — Simulator Control UI
+ */
+
+let simRefreshInterval = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+    simRefreshInterval = setInterval(refreshSimStatus, 3000);
+});
+
+async function refreshSimStatus() {
+    try {
+        const status = await apiCall('/api/simulator/status');
+
+        updateEl('sim-tick', status.tick_count || 0);
+        updateEl('sim-speed', (status.speed || 1) + 'x');
+        updateEl('sim-occ', (status.venue_occupancy || 0) + '%');
+
+        const badge = document.getElementById('sim-status-badge');
+        if (badge) {
+            badge.textContent = status.running ? '🟢 Running' : '⏸️ Stopped';
+            badge.className = status.running ? 'badge badge-low' : 'badge badge-info';
+        }
+    } catch (e) {}
+}
+
+async function startSim() {
+    try {
+        await apiCall('/api/simulator/start', { method: 'POST' });
+        showToast('Simulation Started', 'Real-time data generation is active', 'success');
+        refreshSimStatus();
+    } catch (err) {
+        showToast('Error', err.message, 'error');
+    }
+}
+
+async function stopSim() {
+    try {
+        await apiCall('/api/simulator/stop', { method: 'POST' });
+        showToast('Simulation Stopped', 'Data generation paused', 'info');
+        refreshSimStatus();
+    } catch (err) {
+        showToast('Error', err.message, 'error');
+    }
+}
+
+async function setPhase(phase) {
+    try {
+        await apiCall('/api/simulator/phase', {
+            method: 'POST',
+            body: JSON.stringify({ phase }),
+        });
+        showToast('Phase Changed', `Event phase set to: ${phase.replace('_', ' ')}`, 'success');
+        refreshSimStatus();
+    } catch (err) {
+        showToast('Error', err.message, 'error');
+    }
+}
+
+async function setSpeed(speed) {
+    try {
+        const label = document.getElementById('speed-label');
+        if (label) label.textContent = speed + 'x';
+
+        await apiCall('/api/simulator/speed', {
+            method: 'POST',
+            body: JSON.stringify({ speed: parseFloat(speed) }),
+        });
+    } catch (err) {
+        showToast('Error', err.message, 'error');
+    }
+}
+
+function updateEl(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+}
+
+console.log('🎮 Simulator UI loaded');

static/js/sse-client.js

@@ -0,0 +1,84 @@
+/**
+ * VenueFlow — SSE Client for Real-Time Updates
+ */
+
+let sseConnection = null;
+let sseReconnectAttempts = 0;
+const SSE_MAX_RECONNECT = 10;
+
+function connectSSE() {
+    if (sseConnection) {
+        sseConnection.close();
+    }
+
+    try {
+        sseConnection = new EventSource('/sse/stream');
+
+        sseConnection.onopen = () => {
+            console.log('📡 SSE connected');
+            sseReconnectAttempts = 0;
+        };
+
+        sseConnection.addEventListener('update', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                handleSSEUpdate(data);
+            } catch (e) {
+                console.error('SSE parse error:', e);
+            }
+        });
+
+        sseConnection.addEventListener('heartbeat', () => {
+            // Keep-alive, no action needed
+        });
+
+        sseConnection.onerror = () => {
+            console.warn('📡 SSE connection lost');
+            sseConnection.close();
+            sseConnection = null;
+
+            // Reconnect with backoff
+            if (sseReconnectAttempts < SSE_MAX_RECONNECT) {
+                const delay = Math.min(1000 * Math.pow(2, sseReconnectAttempts), 30000);
+                sseReconnectAttempts++;
+                setTimeout(connectSSE, delay);
+            }
+        };
+    } catch (e) {
+        console.error('SSE connection failed:', e);
+    }
+}
+
+function handleSSEUpdate(data) {
+    // Update KPI values if elements exist
+    if (data.venue) {
+        updateElement('kpi-attendance', data.venue.total_current);
+        updateElement('kpi-occupancy', data.venue.overall_occupancy + '%');
+        updateElement('stat-occupancy-val', data.venue.overall_occupancy + '%');
+    }
+
+    if (data.sim_status) {
+        updateElement('sim-tick', data.sim_status.tick_count);
+        updateElement('sim-occ', data.sim_status.venue_occupancy + '%');
+    }
+
+    // Trigger custom event for page-specific handlers
+    document.dispatchEvent(new CustomEvent('venueflow:update', { detail: data }));
+}
+
+function updateElement(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+}
+
+// Start SSE on page load
+document.addEventListener('DOMContentLoaded', () => {
+    connectSSE();
+});
+
+// Disconnect on page unload
+window.addEventListener('beforeunload', () => {
+    if (sseConnection) sseConnection.close();
+});
+
+console.log('📡 SSE client loaded');

static/js/wayfinding.js

@@ -0,0 +1,267 @@
+/**
+ * VenueFlow — Wayfinding & Navigation
+ */
+
+let navCanvas, navCtx;
+let currentRoute = null;
+let accessibleMode = false;
+let selectedFromZone = 'gate_1'; // Default starting point
+let pois = [];
+
+// Same zone positions as heatmap
+const NAV_ZONE_POSITIONS = {
+    north_stand:     { x: 0.5, y: 0.15, label: 'North Stand', icon: '🏟️' },
+    south_stand:     { x: 0.5, y: 0.85, label: 'South Stand', icon: '🏟️' },
+    east_pavilion:   { x: 0.85, y: 0.5, label: 'East Pavilion', icon: '🏟️' },
+    west_pavilion:   { x: 0.15, y: 0.5, label: 'West Pavilion', icon: '🏟️' },
+    main_pavilion:   { x: 0.72, y: 0.25, label: 'VIP Pavilion', icon: '⭐' },
+    north_concourse: { x: 0.5, y: 0.06, label: 'N Concourse', icon: '🚶' },
+    south_concourse: { x: 0.5, y: 0.94, label: 'S Concourse', icon: '🚶' },
+    east_concourse:  { x: 0.95, y: 0.5, label: 'E Concourse', icon: '🚶' },
+    west_concourse:  { x: 0.05, y: 0.5, label: 'W Concourse', icon: '🚶' },
+    gate_1:          { x: 0.35, y: 0.02, label: 'Gate 1', icon: '🚪' },
+    gate_3:          { x: 0.65, y: 0.02, label: 'Gate 3', icon: '🚪' },
+    gate_5:          { x: 0.02, y: 0.5, label: 'Gate 5', icon: '🚪' },
+    gate_7:          { x: 0.5, y: 0.98, label: 'Gate 7', icon: '🚪' },
+    food_north:      { x: 0.6, y: 0.1, label: 'North Food', icon: '🍕' },
+    food_south:      { x: 0.4, y: 0.9, label: 'South Food', icon: '🍕' },
+    food_west:       { x: 0.1, y: 0.6, label: 'West Food', icon: '🍕' },
+    restroom_n1:     { x: 0.38, y: 0.1, label: 'Restroom N1', icon: '🚻' },
+    restroom_s1:     { x: 0.62, y: 0.9, label: 'Restroom S1', icon: '🚻' },
+    restroom_e1:     { x: 0.9, y: 0.35, label: 'Restroom E1', icon: '🚻' },
+    restroom_w1:     { x: 0.1, y: 0.65, label: 'Restroom W1', icon: '🚻' },
+    parking_a:       { x: 0.5, y: 0.0, label: 'Parking A', icon: '🅿️' },
+    parking_b:       { x: 0.0, y: 0.3, label: 'Parking B', icon: '🅿️' },
+};
+
+function initNav() {
+    navCanvas = document.getElementById('nav-canvas');
+    if (!navCanvas) return;
+
+    navCtx = navCanvas.getContext('2d');
+    resizeNavCanvas();
+    window.addEventListener('resize', resizeNavCanvas);
+
+    // Click handler on canvas
+    navCanvas.addEventListener('click', handleCanvasClick);
+
+    drawNavMap();
+}
+
+function resizeNavCanvas() {
+    if (!navCanvas) return;
+    const rect = navCanvas.parentElement.getBoundingClientRect();
+    navCanvas.width = rect.width;
+    navCanvas.height = rect.height;
+    drawNavMap();
+}
+
+function handleCanvasClick(e) {
+    const rect = navCanvas.getBoundingClientRect();
+    const clickX = (e.clientX - rect.left) / rect.width;
+    const clickY = (e.clientY - rect.top) / rect.height;
+
+    // Find closest zone
+    let closest = null;
+    let closestDist = Infinity;
+
+    for (const [id, pos] of Object.entries(NAV_ZONE_POSITIONS)) {
+        const dist = Math.sqrt(Math.pow(clickX - pos.x, 2) + Math.pow(clickY - pos.y, 2));
+        if (dist < 0.05 && dist < closestDist) {
+            closest = id;
+            closestDist = dist;
+        }
+    }
+
+    if (closest) {
+        selectPOI(closest);
+    }
+}
+
+function drawNavMap() {
+    if (!navCtx || !navCanvas) return;
+
+    const W = navCanvas.width;
+    const H = navCanvas.height;
+
+    // Background
+    navCtx.fillStyle = '#111827';
+    navCtx.fillRect(0, 0, W, H);
+
+    // Cricket pitch
+    navCtx.save();
+    navCtx.beginPath();
+    navCtx.ellipse(W * 0.5, H * 0.5, W * 0.25, H * 0.3, 0, 0, Math.PI * 2);
+    navCtx.fillStyle = '#1a3a2a';
+    navCtx.fill();
+    navCtx.strokeStyle = '#2a5a3a';
+    navCtx.lineWidth = 2;
+    navCtx.stroke();
+    navCtx.restore();
+
+    // Draw zone markers
+    for (const [id, pos] of Object.entries(NAV_ZONE_POSITIONS)) {
+        const x = pos.x * W;
+        const y = pos.y * H;
+
+        // Marker circle
+        navCtx.save();
+        const isFrom = id === selectedFromZone;
+
+        navCtx.beginPath();
+        navCtx.arc(x, y, isFrom ? 14 : 10, 0, Math.PI * 2);
+        navCtx.fillStyle = isFrom ? '#6366f1' : '#1e2a3a';
+        navCtx.fill();
+        navCtx.strokeStyle = isFrom ? '#818cf8' : '#475569';
+        navCtx.lineWidth = 2;
+        navCtx.stroke();
+
+        // Icon
+        navCtx.font = `${isFrom ? 14 : 11}px serif`;
+        navCtx.textAlign = 'center';
+        navCtx.textBaseline = 'middle';
+        navCtx.fillText(pos.icon, x, y);
+
+        // Label below
+        navCtx.font = `500 ${Math.max(9, W * 0.01)}px Inter, sans-serif`;
+        navCtx.fillStyle = '#94a3b8';
+        navCtx.fillText(pos.label, x, y + 20);
+
+        navCtx.restore();
+    }
+
+    // Draw route if exists
+    if (currentRoute && currentRoute.path) {
+        drawRoute(currentRoute.path);
+    }
+}
+
+function drawRoute(path) {
+    if (!navCtx || path.length < 2) return;
+
+    const W = navCanvas.width;
+    const H = navCanvas.height;
+
+    navCtx.save();
+    navCtx.strokeStyle = '#06b6d4';
+    navCtx.lineWidth = 3;
+    navCtx.setLineDash([8, 4]);
+    navCtx.shadowColor = '#06b6d4';
+    navCtx.shadowBlur = 10;
+
+    navCtx.beginPath();
+    for (let i = 0; i < path.length; i++) {
+        const pos = NAV_ZONE_POSITIONS[path[i]];
+        if (!pos) continue;
+        const x = pos.x * W;
+        const y = pos.y * H;
+
+        if (i === 0) navCtx.moveTo(x, y);
+        else navCtx.lineTo(x, y);
+    }
+    navCtx.stroke();
+
+    // Destination marker
+    const dest = NAV_ZONE_POSITIONS[path[path.length - 1]];
+    if (dest) {
+        navCtx.beginPath();
+        navCtx.arc(dest.x * W, dest.y * H, 16, 0, Math.PI * 2);
+        navCtx.fillStyle = 'rgba(6, 182, 212, 0.3)';
+        navCtx.fill();
+        navCtx.strokeStyle = '#06b6d4';
+        navCtx.lineWidth = 3;
+        navCtx.setLineDash([]);
+        navCtx.stroke();
+    }
+
+    navCtx.restore();
+}
+
+async function selectPOI(zoneId) {
+    try {
+        const data = await apiCall(`/api/navigate/route?from=${selectedFromZone}&to=${zoneId}&accessible=${accessibleMode}`);
+        if (data) {
+            currentRoute = data;
+            showRouteDisplay(data);
+            drawNavMap();
+        }
+    } catch (err) {
+        showToast('Route Error', err.message || 'Could not find route', 'error');
+    }
+}
+
+async function findNearest(type) {
+    try {
+        const data = await apiCall(`/api/navigate/nearest?from=${selectedFromZone}&type=${type}&accessible=${accessibleMode}`);
+        if (data && data.route) {
+            currentRoute = data.route;
+            showRouteDisplay(data.route);
+            drawNavMap();
+            showToast('Nearest Found', `${data.target_zone.name} — ${data.distance_m}m away`, 'success');
+        }
+    } catch (err) {
+        showToast('Not Found', `No ${type.replace('_', ' ')} found nearby`, 'warning');
+    }
+}
+
+function showRouteDisplay(route) {
+    const display = document.getElementById('route-display');
+    if (!display) return;
+
+    display.style.display = 'block';
+
+    document.getElementById('route-title').textContent = `${route.from} → ${route.to}`;
+    document.getElementById('route-distance').textContent = route.total_distance_m + 'm';
+    document.getElementById('route-time').textContent = route.estimated_time_display;
+
+    const stepsEl = document.getElementById('route-steps');
+    stepsEl.innerHTML = '';
+
+    if (route.steps && route.steps.length > 0) {
+        route.steps.forEach((step, i) => {
+            const item = document.createElement('div');
+            item.className = 'zone-item';
+            item.innerHTML = `
+                <span style="font-size:1.25rem;color:var(--accent-secondary);">${i + 1}</span>
+                <div class="zone-info">
+                    <div class="zone-name">${escapeHtml(step.instruction)}</div>
+                    <div class="zone-type">${step.distance_m}m</div>
+                </div>
+                <span style="font-size:1rem;">→</span>
+            `;
+            stepsEl.appendChild(item);
+        });
+    } else {
+        stepsEl.innerHTML = '<div class="zone-item"><div class="zone-info"><div class="zone-name">Direct route available</div></div></div>';
+    }
+}
+
+function clearRoute() {
+    currentRoute = null;
+    const display = document.getElementById('route-display');
+    if (display) display.style.display = 'none';
+    drawNavMap();
+}
+
+function toggleAccessible() {
+    accessibleMode = !accessibleMode;
+    const btn = document.getElementById('accessible-route-btn');
+    if (btn) {
+        btn.setAttribute('aria-pressed', accessibleMode.toString());
+        if (accessibleMode) {
+            btn.classList.replace('btn-ghost', 'btn-primary');
+            showToast('Accessible Routing', 'Routes now prioritize elevators, ramps, and accessible paths', 'info');
+        } else {
+            btn.classList.replace('btn-primary', 'btn-ghost');
+        }
+    }
+
+    // Re-route if there's an active route
+    if (currentRoute) {
+        selectPOI(currentRoute.path[currentRoute.path.length - 1]);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', initNav);
+
+console.log('🗺️ Wayfinding loaded');

templates/attendee/heatmap.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import attendee_nav %}
+
+{% block title %}Live Heatmap{% endblock %}
+
+{% block navbar %}{{ attendee_nav('heatmap') }}{% endblock %}
+
+{% block content %}
+<div class="main-content">
+    <div class="card-header mb-4">
+        <div>
+            <h2>🔥 Live Crowd Heatmap</h2>
+            <p class="card-subtitle">Real-time density across the venue — updated every 2 seconds</p>
+        </div>
+        <div class="flex gap-2">
+            <button id="toggle-table-view" class="btn btn-secondary btn-sm" aria-label="Toggle accessible table view">
+                📋 Table View
+            </button>
+        </div>
+    </div>
+
+    <!-- Heatmap Legend -->
+    <div class="flex gap-4 mb-4 items-center" style="flex-wrap:wrap;" role="legend" aria-label="Density legend">
+        <div class="flex items-center gap-2"><span class="density-dot low"></span><span style="font-size:var(--font-size-sm);">Low (&lt;40%)</span></div>
+        <div class="flex items-center gap-2"><span class="density-dot moderate"></span><span style="font-size:var(--font-size-sm);">Moderate (40-70%)</span></div>
+        <div class="flex items-center gap-2"><span class="density-dot high"></span><span style="font-size:var(--font-size-sm);">High (70-90%)</span></div>
+        <div class="flex items-center gap-2"><span class="density-dot critical"></span><span style="font-size:var(--font-size-sm);">Critical (&gt;90%)</span></div>
+    </div>
+
+    <!-- Visual Heatmap (Canvas-based) -->
+    <div id="heatmap-visual" class="card" style="padding:0;overflow:hidden;">
+        <div id="venue-map" class="map-container" style="height:520px;position:relative;background:var(--bg-secondary);">
+            <canvas id="heatmap-canvas" style="width:100%;height:100%;"></canvas>
+        </div>
+    </div>
+
+    <!-- Accessible Table View (hidden by default) -->
+    <div id="heatmap-table" class="card mt-4" style="display:none;">
+        <h3 class="card-title mb-4">Zone Density Data</h3>
+        <div style="overflow-x:auto;">
+            <table class="data-table" aria-label="Zone crowd density data">
+                <thead>
+                    <tr>
+                        <th scope="col">Status</th>
+                        <th scope="col">Zone</th>
+                        <th scope="col">Type</th>
+                        <th scope="col">Capacity</th>
+                        <th scope="col">Current</th>
+                        <th scope="col">Occupancy</th>
+                        <th scope="col">Available</th>
+                    </tr>
+                </thead>
+                <tbody id="heatmap-table-body">
+                    {% for zone in heatmap_data.get('zones', []) %}
+                    <tr>
+                        <td><span class="density-dot {{ zone.density_level }}" aria-label="{{ zone.density_label }}"></span></td>
+                        <td><strong>{{ zone.name }}</strong></td>
+                        <td>{{ zone.zone_type | replace('_', ' ') | title }}</td>
+                        <td>{{ zone.capacity }}</td>
+                        <td>{{ zone.current_count }}</td>
+                        <td>
+                            <span class="badge badge-{{ zone.density_level }}">{{ zone.occupancy_rate }}%</span>
+                        </td>
+                        <td>{{ zone.available_capacity }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Zone Detail Cards -->
+    <div class="content-grid grid-3 mt-6" id="zone-cards">
+        {% for zone in heatmap_data.get('zones', []) %}
+        <div class="stat-card" data-zone-id="{{ zone.id }}">
+            <div class="flex items-center gap-2">
+                <span class="density-dot {{ zone.density_level }}"></span>
+                <strong>{{ zone.name }}</strong>
+            </div>
+            <div class="progress" style="margin: var(--space-2) 0;">
+                <div class="progress-bar {{ zone.density_level }}" style="width: {{ zone.occupancy_rate }}%"></div>
+            </div>
+            <div class="flex justify-between" style="font-size:var(--font-size-xs);color:var(--text-tertiary);">
+                <span>{{ zone.current_count }} / {{ zone.capacity }}</span>
+                <span style="color:{{ zone.density_color }};font-weight:600;">{{ zone.occupancy_rate }}%</span>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}
+
+{% block chatbot %}
+{% include "components/chatbot.html" %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/heatmap.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
+<script src="{{ url_for('static', filename='js/sse-client.js') }}"></script>
+<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+{% endblock %}

templates/attendee/home.html

@@ -0,0 +1,163 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import attendee_nav %}
+
+{% block title %}Home{% endblock %}
+
+{% block navbar %}{{ attendee_nav('home') }}{% endblock %}
+
+{% block content %}
+<div class="main-content">
+    <!-- Hero Banner -->
+    <section class="hero-banner" aria-label="Event information">
+        <h2>{{ event.get('name', 'Live Event Today') }}</h2>
+        <p>{{ event.get('phase_description', 'Welcome to the venue') }}</p>
+        <div class="hero-event-info">
+            <div class="event-detail">🏏 {{ event.get('sport', 'Cricket') }}</div>
+            <div class="event-detail">🌤️ {{ event.get('temperature_c', 28) }}°C {{ event.get('weather', 'Clear') }}</div>
+            <div class="event-detail">
+                <span class="phase-badge">
+                    <span class="phase-dot"></span>
+                    {{ event.get('phase_label', 'Pre-Event') }}
+                </span>
+            </div>
+            <div class="event-detail">👥 {{ venue_summary.get('total_current', 0) | int }} / {{ venue_summary.get('total_capacity', 50000) | int }}</div>
+        </div>
+    </section>
+
+    <!-- Quick Stats -->
+    <section aria-label="Quick statistics">
+        <div class="content-grid grid-4 mb-6">
+            <div class="stat-card" id="stat-occupancy">
+                <span class="stat-icon">🏟️</span>
+                <span class="stat-value" id="stat-occupancy-val">{{ venue_summary.get('overall_occupancy', 0) }}%</span>
+                <span class="stat-label">Venue Occupancy</span>
+            </div>
+
+            <div class="stat-card" id="stat-waiting">
+                <span class="stat-icon">⏱️</span>
+                <span class="stat-value">{{ queue_summary.get('total_people_waiting', 0) }}</span>
+                <span class="stat-label">People in Queues</span>
+            </div>
+
+            <div class="stat-card" id="stat-zones-ok">
+                <span class="stat-icon">✅</span>
+                <span class="stat-value">{{ venue_summary.get('density_counts', {}).get('low', 0) }}</span>
+                <span class="stat-label">Low Density Zones</span>
+            </div>
+
+            <div class="stat-card" id="stat-zones-busy">
+                <span class="stat-icon">🔴</span>
+                <span class="stat-value warning">{{ (venue_summary.get('density_counts', {}).get('high', 0) + venue_summary.get('density_counts', {}).get('critical', 0)) }}</span>
+                <span class="stat-label">Busy Zones</span>
+            </div>
+        </div>
+    </section>
+
+    <div class="content-grid grid-2">
+        <!-- Crowd Hotspots -->
+        <section class="card" aria-label="Busiest zones">
+            <div class="card-header">
+                <div>
+                    <h3 class="card-title">🔥 Hotspot Zones</h3>
+                    <p class="card-subtitle">Most crowded areas right now</p>
+                </div>
+                <a href="{{ url_for('attendee.heatmap') }}" class="btn btn-ghost btn-sm">View Map →</a>
+            </div>
+            <div class="zone-list" id="hotspot-list">
+                {% for zone in venue_summary.get('hotspots', [])[:5] %}
+                <div class="zone-item">
+                    <span class="density-dot {{ zone.density_level }}" aria-label="{{ zone.density_label }}"></span>
+                    <div class="zone-info">
+                        <div class="zone-name">{{ zone.name }}</div>
+                        <div class="zone-type">{{ zone.zone_type | replace('_', ' ') }}</div>
+                    </div>
+                    <div class="zone-occupancy" style="color: {{ zone.density_color }}">
+                        {{ zone.occupancy_rate }}%
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+
+        <!-- Quick Queue Summary -->
+        <section class="card" aria-label="Queue overview">
+            <div class="card-header">
+                <div>
+                    <h3 class="card-title">⏱️ Queue Status</h3>
+                    <p class="card-subtitle">Shortest wait times by category</p>
+                </div>
+                <a href="{{ url_for('attendee.queues') }}" class="btn btn-ghost btn-sm">All Queues →</a>
+            </div>
+            <div class="zone-list" id="queue-overview">
+                {% for cat_key, cat_data in queue_summary.get('categories', {}).items() %}
+                <div class="zone-item">
+                    <span class="queue-icon" style="font-size:1.5rem;">
+                        {% if cat_key == 'food' %}🍕{% elif cat_key == 'restroom' %}🚻{% elif cat_key == 'merch' %}🛍️{% elif cat_key == 'entry' %}🚪{% else %}📍{% endif %}
+                    </span>
+                    <div class="zone-info">
+                        <div class="zone-name">{{ cat_key | replace('_', ' ') | title }}</div>
+                        <div class="zone-type">Best: {{ cat_data.shortest_station or 'N/A' }}</div>
+                    </div>
+                    <div class="zone-occupancy" style="color: {% if cat_data.shortest_wait < 5 %}var(--density-low){% elif cat_data.shortest_wait < 15 %}var(--density-moderate){% else %}var(--density-high){% endif %}">
+                        {{ cat_data.shortest_wait | round(0) | int }} min
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+    </div>
+
+    <!-- Recommended Zones -->
+    <section class="card mt-6" aria-label="Recommended quiet zones">
+        <div class="card-header">
+            <div>
+                <h3 class="card-title">🟢 Quiet Zones</h3>
+                <p class="card-subtitle">Least crowded areas — recommended for a comfortable experience</p>
+            </div>
+        </div>
+        <div class="content-grid grid-3">
+            {% for zone in venue_summary.get('most_available', [])[:3] %}
+            <div class="stat-card">
+                <span class="stat-icon">
+                    {% if zone.zone_type == 'food_court' %}🍕{% elif zone.zone_type == 'restroom' %}🚻{% elif zone.zone_type == 'concourse' %}🚶{% elif zone.zone_type == 'stand' %}🏟️{% else %}📍{% endif %}
+                </span>
+                <div>
+                    <div style="font-weight:600;margin-bottom:4px;">{{ zone.name }}</div>
+                    <div style="font-size:var(--font-size-sm);color:var(--text-tertiary);">{{ zone.zone_type | replace('_', ' ') | title }}</div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="density-dot {{ zone.density_level }}"></span>
+                    <span style="color:{{ zone.density_color }};font-weight:600;">{{ zone.occupancy_rate }}% full</span>
+                </div>
+                <div class="progress">
+                    <div class="progress-bar {{ zone.density_level }}" style="width: {{ zone.occupancy_rate }}%"></div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+</div>
+{% endblock %}
+
+{% block chatbot %}
+{% include "components/chatbot.html" %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/sse-client.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
+<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+<script>
+    // Auto-refresh data every 5 seconds
+    setInterval(async () => {
+        try {
+            const resp = await fetch('/api/crowd/summary');
+            if (resp.ok) {
+                const data = await resp.json();
+                const occEl = document.getElementById('stat-occupancy-val');
+                if (occEl) occEl.textContent = data.overall_occupancy + '%';
+            }
+        } catch(e) {}
+    }, 5000);
+</script>
+{% endblock %}

templates/attendee/navigate.html

@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import attendee_nav %}
+
+{% block title %}Navigate{% endblock %}
+
+{% block navbar %}{{ attendee_nav('navigate') }}{% endblock %}
+
+{% block content %}
+<div class="main-content">
+    <div class="card-header mb-4">
+        <div>
+            <h2>🗺️ Venue Navigation</h2>
+            <p class="card-subtitle">Find your way around — crowd-aware routing</p>
+        </div>
+    </div>
+
+    <!-- Quick Navigation Buttons -->
+    <div class="flex gap-3 mb-6" style="flex-wrap:wrap;">
+        <button class="btn btn-primary" onclick="findNearest('food_court')" id="find-food-btn">🍕 Nearest Food</button>
+        <button class="btn btn-secondary" onclick="findNearest('restroom')" id="find-restroom-btn">🚻 Nearest Restroom</button>
+        <button class="btn btn-secondary" onclick="findNearest('gate')" id="find-exit-btn">🚪 Nearest Exit</button>
+        <button class="btn btn-ghost" onclick="toggleAccessible()" id="accessible-route-btn" aria-pressed="false">♿ Accessible Routes</button>
+    </div>
+
+    <!-- Venue Map -->
+    <div class="card mb-6" style="padding:0;overflow:hidden;">
+        <div id="nav-map" class="map-container" style="height:480px;position:relative;background:var(--bg-secondary);">
+            <canvas id="nav-canvas" style="width:100%;height:100%;"></canvas>
+        </div>
+    </div>
+
+    <!-- Route Display -->
+    <div id="route-display" class="card mb-6" style="display:none;">
+        <div class="card-header">
+            <h3 class="card-title" id="route-title">Route</h3>
+            <button class="btn btn-ghost btn-sm" onclick="clearRoute()" aria-label="Clear route">✕ Clear</button>
+        </div>
+        <div class="flex gap-4 mb-4">
+            <div class="stat-card" style="flex:1;">
+                <span class="stat-icon">📏</span>
+                <span class="stat-value" id="route-distance">—</span>
+                <span class="stat-label">Distance</span>
+            </div>
+            <div class="stat-card" style="flex:1;">
+                <span class="stat-icon">⏱️</span>
+                <span class="stat-value" id="route-time">—</span>
+                <span class="stat-label">Est. Walking Time</span>
+            </div>
+        </div>
+        <div id="route-steps" class="zone-list" role="list" aria-label="Navigation steps"></div>
+    </div>
+
+    <!-- Points of Interest -->
+    <section class="card" aria-label="Points of interest">
+        <h3 class="card-title mb-4">📍 Points of Interest</h3>
+        <div class="content-grid grid-3" id="poi-grid">
+            {% for poi in pois %}
+            <div class="zone-item" style="cursor:pointer;" onclick="selectPOI('{{ poi.id }}')"
+                 role="button" tabindex="0" aria-label="Navigate to {{ poi.name }}">
+                <span style="font-size:1.5rem;">{{ poi.icon }}</span>
+                <div class="zone-info">
+                    <div class="zone-name">{{ poi.name }}</div>
+                    <div class="zone-type">{{ poi.type | replace('_', ' ') | title }}</div>
+                </div>
+                <span class="density-dot {{ poi.density_level }}"></span>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+</div>
+{% endblock %}
+
+{% block chatbot %}
+{% include "components/chatbot.html" %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/wayfinding.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
+<script src="{{ url_for('static', filename='js/sse-client.js') }}"></script>
+<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+{% endblock %}

templates/attendee/profile.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import attendee_nav %}
+
+{% block title %}Profile & Settings{% endblock %}
+
+{% block navbar %}{{ attendee_nav('profile') }}{% endblock %}
+
+{% block content %}
+<div class="main-content" style="max-width:700px;">
+    <h2 class="mb-6">⚙️ Settings & Accessibility</h2>
+
+    <!-- Profile Info -->
+    <section class="card mb-6" aria-label="Profile information">
+        <h3 class="card-title mb-4">👤 Profile</h3>
+        <div class="form-group">
+            <label class="form-label">Display Name</label>
+            <input type="text" class="form-input" value="{{ user_name }}" disabled>
+        </div>
+        <div class="form-group">
+            <label class="form-label">Email</label>
+            <input type="email" class="form-input" value="{{ user_email }}" disabled>
+        </div>
+    </section>
+
+    <!-- Accessibility Settings -->
+    <section class="card mb-6" aria-label="Accessibility settings">
+        <h3 class="card-title mb-4">♿ Accessibility</h3>
+        <p class="card-subtitle" style="margin-bottom:var(--space-6);">Customize your experience for comfort and accessibility</p>
+
+        <div class="zone-list">
+            <div class="zone-item" style="cursor:pointer;" onclick="toggleA11y('highContrast')" role="switch" aria-checked="false" tabindex="0" id="toggle-contrast">
+                <span style="font-size:1.5rem;">🔲</span>
+                <div class="zone-info">
+                    <div class="zone-name">High Contrast Mode</div>
+                    <div class="zone-type">Increase text and element contrast for better visibility</div>
+                </div>
+                <div class="a11y-switch" id="switch-contrast" aria-hidden="true">OFF</div>
+            </div>
+
+            <div class="zone-item" style="cursor:pointer;" onclick="toggleA11y('largeText')" role="switch" aria-checked="false" tabindex="0" id="toggle-text">
+                <span style="font-size:1.5rem;">🔤</span>
+                <div class="zone-info">
+                    <div class="zone-name">Large Text</div>
+                    <div class="zone-type">Increase font size to 125% for easier reading</div>
+                </div>
+                <div class="a11y-switch" id="switch-text" aria-hidden="true">OFF</div>
+            </div>
+
+            <div class="zone-item" style="cursor:pointer;" onclick="toggleA11y('reducedMotion')" role="switch" aria-checked="false" tabindex="0" id="toggle-motion">
+                <span style="font-size:1.5rem;">🎞️</span>
+                <div class="zone-info">
+                    <div class="zone-name">Reduced Motion</div>
+                    <div class="zone-type">Disable animations and transitions</div>
+                </div>
+                <div class="a11y-switch" id="switch-motion" aria-hidden="true">OFF</div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Language -->
+    <section class="card mb-6" aria-label="Language settings">
+        <h3 class="card-title mb-4">🌐 Language</h3>
+        <div class="form-group">
+            <label for="language-select" class="form-label">Preferred Language</label>
+            <select id="language-select" class="form-input" onchange="setLanguage(this.value)">
+                {% for code, name in languages.items() %}
+                <option value="{{ code }}">{{ name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </section>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/accessibility.js') }}"></script>
+{% endblock %}

templates/attendee/queues.html

@@ -0,0 +1,113 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import attendee_nav %}
+
+{% block title %}Queue Status{% endblock %}
+
+{% block navbar %}{{ attendee_nav('queues') }}{% endblock %}
+
+{% block content %}
+<div class="main-content">
+    <div class="card-header mb-4">
+        <div>
+            <h2>⏱️ Queue Status & Virtual Queue</h2>
+            <p class="card-subtitle">Skip physical lines — book your spot in virtual queues</p>
+        </div>
+    </div>
+
+    <!-- Filter Tabs -->
+    <div class="flex gap-2 mb-6" style="flex-wrap:wrap;" role="tablist" aria-label="Queue category filter">
+        <button class="btn btn-primary btn-sm queue-filter active" data-category="all" role="tab" aria-selected="true">All</button>
+        <button class="btn btn-secondary btn-sm queue-filter" data-category="food" role="tab" aria-selected="false">🍕 Food</button>
+        <button class="btn btn-secondary btn-sm queue-filter" data-category="restroom" role="tab" aria-selected="false">🚻 Restrooms</button>
+        <button class="btn btn-secondary btn-sm queue-filter" data-category="merch" role="tab" aria-selected="false">🛍️ Merchandise</button>
+        <button class="btn btn-secondary btn-sm queue-filter" data-category="entry" role="tab" aria-selected="false">🚪 Gates</button>
+    </div>
+
+    <!-- Active Virtual Tickets -->
+    {% if user_tickets %}
+    <section class="card mb-6" aria-label="Your virtual queue tickets">
+        <h3 class="card-title mb-4">🎫 Your Virtual Tickets</h3>
+        <div class="content-grid grid-2" id="my-tickets">
+            {% for ticket in user_tickets %}
+            {% if ticket.status == 'waiting' %}
+            <div class="queue-card" style="border-left:3px solid var(--accent-primary);">
+                <div class="queue-icon">{{ ticket.category_icon }}</div>
+                <div class="queue-details">
+                    <div class="queue-name">{{ ticket.station_name }}</div>
+                    <div class="queue-meta">Ticket #{{ ticket.id }} • Position {{ ticket.position }}</div>
+                </div>
+                <div>
+                    <div class="queue-wait" style="color:var(--accent-primary);">#{{ ticket.position }}</div>
+                    <button class="btn btn-ghost btn-sm" onclick="cancelTicket('{{ ticket.id }}')" aria-label="Cancel ticket {{ ticket.id }}">Cancel</button>
+                </div>
+            </div>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </section>
+    {% endif %}
+
+    <!-- Queue Summary Stats -->
+    <div class="content-grid grid-3 mb-6">
+        <div class="stat-card">
+            <span class="stat-icon">📊</span>
+            <span class="stat-value">{{ queue_summary.get('total_stations', 0) }}</span>
+            <span class="stat-label">Open Stations</span>
+        </div>
+        <div class="stat-card">
+            <span class="stat-icon">👥</span>
+            <span class="stat-value warning">{{ queue_summary.get('total_people_waiting', 0) }}</span>
+            <span class="stat-label">Total People Waiting</span>
+        </div>
+        <div class="stat-card">
+            <span class="stat-icon">⚡</span>
+            <span class="stat-value" id="shortest-wait-val">
+                {% set min_wait = namespace(val=999) %}
+                {% for s in queue_summary.get('stations', []) %}
+                    {% if s.estimated_wait_minutes < min_wait.val %}
+                        {% set min_wait.val = s.estimated_wait_minutes %}
+                    {% endif %}
+                {% endfor %}
+                {{ min_wait.val | round(0) | int if min_wait.val < 999 else 0 }} min
+            </span>
+            <span class="stat-label">Shortest Wait</span>
+        </div>
+    </div>
+
+    <!-- All Queue Stations -->
+    <section aria-label="All queue stations">
+        <div class="content-grid grid-2" id="queue-stations-list">
+            {% for station in queue_summary.get('stations', []) %}
+            <div class="queue-card" data-category="{{ station.category }}" data-station-id="{{ station.id }}">
+                <div class="queue-icon">{{ station.category_icon }}</div>
+                <div class="queue-details">
+                    <div class="queue-name">{{ station.name }}</div>
+                    <div class="queue-meta">{{ station.category_label }} • {{ station.current_length }} in line</div>
+                    <div class="progress" style="margin-top:var(--space-2);max-width:200px;">
+                        <div class="progress-bar {{ station.wait_level }}" style="width: {{ [station.estimated_wait_minutes * 3.3, 100] | min }}%"></div>
+                    </div>
+                </div>
+                <div style="text-align:right;">
+                    <div class="queue-wait" style="color:{{ station.wait_color }};">{{ station.estimated_wait_minutes | round(0) | int }} min</div>
+                    <button class="btn btn-primary btn-sm mt-4" onclick="joinQueue('{{ station.id }}')"
+                            aria-label="Join virtual queue for {{ station.name }}">
+                        Join Queue
+                    </button>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+</div>
+{% endblock %}
+
+{% block chatbot %}
+{% include "components/chatbot.html" %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/queue.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
+<script src="{{ url_for('static', filename='js/sse-client.js') }}"></script>
+<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+{% endblock %}

templates/auth/login.html

@@ -0,0 +1,59 @@
+{% extends "base.html" %}
+
+{% block title %}Login{% endblock %}
+
+{% block content %}
+<div class="auth-page">
+    <div class="auth-card">
+        <div class="text-center mb-6">
+            <div class="navbar-brand" style="justify-content: center; margin-bottom: var(--space-4);">
+                <span class="logo-icon">🏟️</span>
+                <span>VenueFlow</span>
+            </div>
+            <h1>Welcome Back</h1>
+            <p class="auth-subtitle">Sign in to access your venue experience</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages" role="alert">
+            {% for category, message in messages %}
+            <div class="flash-msg {{ category }}" role="alert">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('auth.login') }}" novalidate>
+            <div class="form-group">
+                <label for="email" class="form-label">Email Address</label>
+                <input type="email" id="email" name="email" class="form-input"
+                       placeholder="you@example.com" required autocomplete="email"
+                       aria-required="true">
+            </div>
+
+            <div class="form-group">
+                <label for="password" class="form-label">Password</label>
+                <input type="password" id="password" name="password" class="form-input"
+                       placeholder="Enter your password" required autocomplete="current-password"
+                       aria-required="true">
+            </div>
+
+            <button type="submit" id="login-btn" class="btn btn-primary btn-block btn-lg">
+                Sign In
+            </button>
+        </form>
+
+        <div class="auth-footer">
+            <p style="margin-bottom: var(--space-3);">Don't have an account? <a href="{{ url_for('auth.register') }}">Create one</a></p>
+            <div style="border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); margin-top: var(--space-4);">
+                <p style="font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: var(--space-2);">Demo Accounts</p>
+                <p style="font-size: var(--font-size-xs); color: var(--text-tertiary);">
+                    <strong>Fan:</strong> fan@venueflow.demo / demo123<br>
+                    <strong>Operator:</strong> operator@venueflow.demo / demo123
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/register.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block title %}Register{% endblock %}
+
+{% block content %}
+<div class="auth-page">
+    <div class="auth-card">
+        <div class="text-center mb-6">
+            <div class="navbar-brand" style="justify-content: center; margin-bottom: var(--space-4);">
+                <span class="logo-icon">🏟️</span>
+                <span>VenueFlow</span>
+            </div>
+            <h1>Create Account</h1>
+            <p class="auth-subtitle">Join VenueFlow for a smarter venue experience</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages" role="alert">
+            {% for category, message in messages %}
+            <div class="flash-msg {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('auth.register') }}" novalidate>
+            <div class="form-group">
+                <label for="display_name" class="form-label">Display Name</label>
+                <input type="text" id="display_name" name="display_name" class="form-input"
+                       placeholder="Your name" required aria-required="true">
+            </div>
+
+            <div class="form-group">
+                <label for="email" class="form-label">Email Address</label>
+                <input type="email" id="email" name="email" class="form-input"
+                       placeholder="you@example.com" required autocomplete="email" aria-required="true">
+            </div>
+
+            <div class="form-group">
+                <label for="password" class="form-label">Password</label>
+                <input type="password" id="password" name="password" class="form-input"
+                       placeholder="At least 6 characters" required autocomplete="new-password"
+                       aria-required="true" minlength="6">
+            </div>
+
+            <div class="form-group">
+                <label for="confirm_password" class="form-label">Confirm Password</label>
+                <input type="password" id="confirm_password" name="confirm_password" class="form-input"
+                       placeholder="Repeat your password" required autocomplete="new-password"
+                       aria-required="true">
+            </div>
+
+            <button type="submit" id="register-btn" class="btn btn-primary btn-block btn-lg">
+                Create Account
+            </button>
+        </form>
+
+        <div class="auth-footer">
+            <p>Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" data-high-contrast="false" data-large-text="false" data-reduced-motion="false">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="VenueFlow — Smart crowd management for sporting venues. Real-time heatmaps, virtual queues, and AI-powered navigation.">
+    <meta name="theme-color" content="#0a0e1a">
+    <title>{% block title %}VenueFlow{% endblock %} — Smart Venue Experience</title>
+
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
+    {% block extra_css %}{% endblock %}
+
+    <!-- Preload critical font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>
+<body>
+    <!-- Skip to Content (A11y) -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    {% block navbar %}{% endblock %}
+
+    <main id="main-content" role="main">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Toast Notification Container -->
+    <div id="toast-container" class="toast-container" role="alert" aria-live="polite" aria-label="Notifications"></div>
+
+    <!-- Chatbot Widget -->
+    {% block chatbot %}{% endblock %}
+
+    <!-- Mobile Bottom Nav -->
+    {% block mobile_nav %}{% endblock %}
+
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    {% block extra_js %}{% endblock %}
+
+    <script>
+        // Load accessibility preferences from localStorage
+        (function() {
+            const prefs = JSON.parse(localStorage.getItem('venueflow_a11y') || '{}');
+            if (prefs.highContrast) document.documentElement.dataset.highContrast = 'true';
+            if (prefs.largeText) document.documentElement.dataset.largeText = 'true';
+            if (prefs.reducedMotion) document.documentElement.dataset.reducedMotion = 'true';
+        })();
+    </script>
+</body>
+</html>

templates/components/chatbot.html

@@ -0,0 +1,28 @@
+<!-- Chatbot Widget Component -->
+<button class="chatbot-toggle" id="chatbot-toggle" aria-label="Open AI assistant" aria-expanded="false">
+    💬
+</button>
+
+<div class="chatbot-window" id="chatbot-window" role="dialog" aria-label="AI Assistant" aria-hidden="true">
+    <div class="chatbot-header">
+        <h4>🤖 VenueFlow Assistant</h4>
+        <button class="btn btn-ghost btn-sm" onclick="toggleChatbot()" aria-label="Close chat" style="color:#fff;font-size:1.25rem;min-width:44px;min-height:44px;">✕</button>
+    </div>
+
+    <div class="chatbot-messages" id="chat-messages" aria-live="polite" aria-label="Chat messages">
+        <div class="chat-message bot">
+            👋 Hi! I'm your venue assistant. I can help you find food, restrooms, check crowd levels, and navigate the venue. What do you need?
+        </div>
+    </div>
+
+    <div class="chat-suggestions" id="chat-suggestions">
+        <!-- Populated by JS -->
+    </div>
+
+    <div class="chatbot-input">
+        <label for="chat-input" class="sr-only">Type your message</label>
+        <input type="text" id="chat-input" placeholder="Ask me anything..."
+               aria-label="Type your message" autocomplete="off" maxlength="500">
+        <button id="chat-send" onclick="sendChatMessage()" aria-label="Send message">➤</button>
+    </div>
+</div>

templates/components/nav.html

@@ -0,0 +1,66 @@
+<!-- Reusable navigation component -->
+<!-- Attendee Navigation -->
+{% macro attendee_nav(active='home') %}
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+    <a href="{{ url_for('attendee.home') }}" class="navbar-brand">
+        <span class="logo-icon">🏟️</span>
+        <span>VenueFlow</span>
+    </a>
+
+    <ul class="navbar-nav" role="menubar">
+        <li role="none"><a href="{{ url_for('attendee.home') }}" role="menuitem" class="{{ 'active' if active == 'home' }}" id="nav-home">🏠 Home</a></li>
+        <li role="none"><a href="{{ url_for('attendee.heatmap') }}" role="menuitem" class="{{ 'active' if active == 'heatmap' }}" id="nav-heatmap">🔥 Heatmap</a></li>
+        <li role="none"><a href="{{ url_for('attendee.queues') }}" role="menuitem" class="{{ 'active' if active == 'queues' }}" id="nav-queues">⏱️ Queues</a></li>
+        <li role="none"><a href="{{ url_for('attendee.navigate') }}" role="menuitem" class="{{ 'active' if active == 'navigate' }}" id="nav-navigate">🗺️ Navigate</a></li>
+        <li role="none"><a href="{{ url_for('attendee.profile') }}" role="menuitem" class="{{ 'active' if active == 'profile' }}" id="nav-profile">⚙️ Settings</a></li>
+    </ul>
+
+    <div class="navbar-user">
+        <div id="notification-bell" class="btn btn-ghost" style="position:relative;font-size:1.25rem;cursor:pointer;" aria-label="Notifications" role="button" tabindex="0">
+            🔔
+            <span id="notif-count" class="badge badge-high" style="position:absolute;top:2px;right:2px;font-size:10px;min-width:18px;height:18px;display:none;align-items:center;justify-content:center;">0</span>
+        </div>
+        <div class="navbar-avatar" aria-hidden="true">{{ user_name[0] | upper if user_name else 'G' }}</div>
+        <a href="{{ url_for('auth.logout') }}" class="btn btn-ghost btn-sm" id="logout-btn">Logout</a>
+    </div>
+</nav>
+
+<!-- Mobile Bottom Nav -->
+<nav class="mobile-nav" role="navigation" aria-label="Mobile navigation">
+    <ul class="mobile-nav-items" role="menubar">
+        <li role="none"><a href="{{ url_for('attendee.home') }}" role="menuitem" class="{{ 'active' if active == 'home' }}"><span class="nav-icon">🏠</span>Home</a></li>
+        <li role="none"><a href="{{ url_for('attendee.heatmap') }}" role="menuitem" class="{{ 'active' if active == 'heatmap' }}"><span class="nav-icon">🔥</span>Heatmap</a></li>
+        <li role="none"><a href="{{ url_for('attendee.queues') }}" role="menuitem" class="{{ 'active' if active == 'queues' }}"><span class="nav-icon">⏱️</span>Queues</a></li>
+        <li role="none"><a href="{{ url_for('attendee.navigate') }}" role="menuitem" class="{{ 'active' if active == 'navigate' }}"><span class="nav-icon">🗺️</span>Navigate</a></li>
+        <li role="none"><a href="{{ url_for('attendee.profile') }}" role="menuitem" class="{{ 'active' if active == 'profile' }}"><span class="nav-icon">⚙️</span>Settings</a></li>
+    </ul>
+</nav>
+{% endmacro %}
+
+
+<!-- Operator Navigation -->
+{% macro operator_nav(active='dashboard') %}
+<nav class="navbar" role="navigation" aria-label="Operator navigation">
+    <a href="{{ url_for('operator.dashboard') }}" class="navbar-brand">
+        <span class="logo-icon">🏟️</span>
+        <span>VenueFlow <span style="font-size:var(--font-size-xs);color:var(--accent-secondary);font-weight:500;">OPS</span></span>
+    </a>
+
+    <ul class="navbar-nav" role="menubar">
+        <li role="none"><a href="{{ url_for('operator.dashboard') }}" role="menuitem" class="{{ 'active' if active == 'dashboard' }}" id="nav-dashboard">📊 Dashboard</a></li>
+        <li role="none"><a href="{{ url_for('operator.analytics') }}" role="menuitem" class="{{ 'active' if active == 'analytics' }}" id="nav-analytics">📈 Analytics</a></li>
+        <li role="none"><a href="{{ url_for('operator.alerts') }}" role="menuitem" class="{{ 'active' if active == 'alerts' }}" id="nav-alerts">🚨 Alerts</a></li>
+        <li role="none"><a href="{{ url_for('operator.simulator_view') }}" role="menuitem" class="{{ 'active' if active == 'simulator' }}" id="nav-simulator">🎮 Simulator</a></li>
+        <li role="none"><a href="{{ url_for('attendee.home') }}" role="menuitem" id="nav-fan-view">👤 Fan View</a></li>
+    </ul>
+
+    <div class="navbar-user">
+        <div id="notification-bell" class="btn btn-ghost" style="position:relative;font-size:1.25rem;cursor:pointer;" aria-label="Notifications" role="button" tabindex="0">
+            🔔
+            <span id="notif-count" class="badge badge-high" style="position:absolute;top:2px;right:2px;font-size:10px;min-width:18px;height:18px;display:none;align-items:center;justify-content:center;">0</span>
+        </div>
+        <div class="navbar-avatar" aria-hidden="true" style="background: var(--gradient-warm);">{{ user_name[0] | upper if user_name else 'O' }}</div>
+        <a href="{{ url_for('auth.logout') }}" class="btn btn-ghost btn-sm" id="logout-btn">Logout</a>
+    </div>
+</nav>
+{% endmacro %}

templates/errors/404.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}Page Not Found{% endblock %}
+{% block content %}
+<div class="auth-page">
+    <div class="auth-card text-center">
+        <div style="font-size:4rem;margin-bottom:var(--space-4);">🏟️</div>
+        <h1 style="font-size:var(--font-size-4xl);">404</h1>
+        <p style="margin-top:var(--space-4);margin-bottom:var(--space-6);">Looks like you've wandered off the pitch! This page doesn't exist.</p>
+        <a href="/" class="btn btn-primary">Return to Home</a>
+    </div>
+</div>
+{% endblock %}

templates/errors/500.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}Server Error{% endblock %}
+{% block content %}
+<div class="auth-page">
+    <div class="auth-card text-center">
+        <div style="font-size:4rem;margin-bottom:var(--space-4);">⚠️</div>
+        <h1 style="font-size:var(--font-size-4xl);">500</h1>
+        <p style="margin-top:var(--space-4);margin-bottom:var(--space-6);">Something went wrong on our end. Our team has been notified.</p>
+        <a href="/" class="btn btn-primary">Return to Home</a>
+    </div>
+</div>
+{% endblock %}

templates/operator/alerts.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+{% from "components/nav.html" import operator_nav %}
+{% block title %}Alerts{% endblock %}
+{% block navbar %}{{ operator_nav('alerts') }}{% endblock %}
+{% block content %}
+<div class="main-content">
+    <div class="card-header mb-6">
+        <div>
+            <h2>🚨 Alert Management</h2>
+            <p class="card-subtitle">Review and manage venue alerts</p>
+        </div>
+        <span class="badge badge-info">{{ alerts | length }} alerts</span>
+    </div>
+    {% if alerts %}
+    <div class="zone-list" id="alerts-list">
+        {% for alert in alerts %}
+        <div class="zone-item" style="border-left: 3px solid {{ alert.severity_color }};">
+            <span style="font-size:1.25rem;">{{ alert.severity_icon }}</span>
+            <div class="zone-info" style="flex:1;">
+                <div class="zone-name">{{ alert.title }}</div>
+                <div class="zone-type">{{ alert.message }}</div>
+                <div style="font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px;">{{ alert.timestamp }}</div>
+            </div>
+            <span class="badge badge-{{ alert.severity }}">{{ alert.severity | title }}</span>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="card text-center" style="padding:var(--space-12);">
+        <p style="font-size:2rem;margin-bottom:var(--space-4);">✅</p>
+        <p style="font-size:var(--font-size-lg);font-weight:600;">No alerts right now</p>
+        <p style="color:var(--text-tertiary);">Alerts will appear here when crowd thresholds are breached.</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/sse-client.js') }}"></script>
+<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+{% endblock %}