<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
    <meta name="description" content="MYP Platform - Mercedes-Benz 3D Druck Management System">
    <meta name="robots" content="noindex, nofollow">
    <!-- Dynamic theme-color meta tags for browser UI -->
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
    <meta name="theme-color" id="metaThemeColor" content="#000000">
    <!-- CSRF-Token für Formulare -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- Title -->
    <title>{% block title %}MYP Platform - Mercedes-Benz{% endblock %}</title>
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/favicon-16x16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='favicon.svg') }}" color="#000000">
    
    <!-- CSS -->
    <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/components.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/professional-theme.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/optimization-animations.css') }}" rel="stylesheet">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="{{ url_for('static', filename='js/ui-components.js') }}" as="script">
    <link rel="preload" href="{{ url_for('static', filename='js/optimization-features.js') }}" as="script">
    
    <!-- Additional CSS -->
    {% block extra_css %}{% endblock %}
    
    <!-- Dark Mode Script (must be in head to prevent flash) -->
    <script>
        // Temporär für sofortige Anwendung ohne Flackern
        document.documentElement.classList.add('disable-transitions');
        
        const STORAGE_KEY = 'myp-dark-mode';
        const savedMode = localStorage.getItem(STORAGE_KEY);
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const isDark = savedMode === 'true' || (savedMode === null && prefersDark);
        
        // Dark Mode sofort anwenden
        if (isDark) {
            document.documentElement.classList.add('dark');
            document.documentElement.setAttribute('data-theme', 'dark');
            document.documentElement.style.colorScheme = 'dark';
        } else {
            document.documentElement.classList.remove('dark');
            document.documentElement.setAttribute('data-theme', 'light');
            document.documentElement.style.colorScheme = 'light';
        }
        
        // ThemeColor Meta-Tag aktualisieren
        const metaThemeColor = document.getElementById('metaThemeColor');
        if (metaThemeColor) {
            metaThemeColor.setAttribute('content', isDark ? '#000000' : '#ffffff');
        }
        
        // Übergänge nach kurzer Verzögerung wieder aktivieren
        setTimeout(function() {
            document.documentElement.classList.remove('disable-transitions');
        }, 10);
        
        // Diese Funktion wird nach dem DOM-Laden ausgeführt
        document.addEventListener('DOMContentLoaded', function() {
            // Dark Mode Toggle Button Icons aktualisieren
            const darkModeToggle = document.getElementById('darkModeToggle');
            if (darkModeToggle) {
                const sunIcon = darkModeToggle.querySelector('.sun-icon');
                const moonIcon = darkModeToggle.querySelector('.moon-icon');
                
                if (isDark) {
                    darkModeToggle.setAttribute('aria-pressed', 'true');
                    darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
                    if (sunIcon) sunIcon.classList.add('hidden');
                    if (moonIcon) moonIcon.classList.remove('hidden');
                } else {
                    darkModeToggle.setAttribute('aria-pressed', 'false');
                    darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
                    if (sunIcon) sunIcon.classList.remove('hidden');
                    if (moonIcon) moonIcon.classList.add('hidden');
                }
            }
            
            // MYP App für Offline-Funktionalität initialisieren
            if (typeof MYPApp !== 'undefined') {
                window.mypApp = new MYPApp();
            }
            
            // User-Dropdown-Funktionalität initialisieren
            initUserDropdown();
            
            // Flask Flash Messages über das Glassmorphism-System anzeigen
            const flashContainer = document.getElementById('flask-flash-messages');
            if (flashContainer) {
                const flashCount = parseInt(flashContainer.getAttribute('data-flash-count')) || 0;
                
                for (let i = 1; i <= flashCount; i++) {
                    const flashData = flashContainer.getAttribute('data-flash-' + i);
                    if (flashData) {
                        const [category, message] = flashData.split('|', 2);
                        let messageType = category;
                        
                        // Flask-Kategorien zu JavaScript-Kategorien mappen
                        if (messageType === 'danger') messageType = 'error';
                        
                        // Nachricht über das moderne Glassmorphism-System anzeigen
                        if (typeof showToast === 'function') {
                            // Kleine Verzögerung für bessere UX und schöne Glassmorphism-Animationen
                            setTimeout(() => {
                                showToast(message, messageType, 6000, {
                                    title: messageType === 'success' ? 'Erfolgreich' : 
                                           messageType === 'error' ? 'Fehler' : 
                                           messageType === 'warning' ? 'Warnung' : 'Information',
                                    playSound: true
                                });
                            }, i * 250); // Nachrichten gestaffelt anzeigen
                        }
                    }
                }
                
                // Container nach Verarbeitung entfernen
                flashContainer.remove();
            }
            
            console.log('🚀 MYP Platform UI erfolgreich initialisiert');
        });
    </script>
    
    <!-- Disable Transitions Styling -->
    <style>
        .disable-transitions,
        .disable-transitions * {
            transition: none !important;
        }
        
        /* ===== ULTRA-DEZENTE SCROLLBALKEN ===== */
        
        /* Webkit-Browser (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        /* Nur bei Hover über scrollbaren Container sichtbar */
        *:hover::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.05);
        }
        
        *:hover::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.1);
        }
        
        /* Dark Mode - noch dezenter */
        .dark *:hover::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.03);
        }
        
        .dark *:hover::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        
        /* Firefox - ultra-thin */
        * {
            scrollbar-width: none; /* Komplett versteckt in Firefox */
        }
        
        /* Nur bei Hover sichtbar in Firefox */
        *:hover {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
        }
        
        .dark *:hover {
            scrollbar-color: rgba(255, 255, 255, 0.03) transparent;
        }
        
        /* Spezielle Container die scrollbar brauchen */
        .modal-content::-webkit-scrollbar,
        .dropdown-menu::-webkit-scrollbar {
            width: 4px;
        }
        
        .modal-content::-webkit-scrollbar-thumb,
        .dropdown-menu::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .dark .modal-content::-webkit-scrollbar-thumb,
        .dark .dropdown-menu::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* ===== DO NOT DISTURB BUTTON STYLES ===== */
        .dnd-toggle-button {
            /* Inaktiv (Standard) */
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
            color: rgb(99, 102, 241);
            border: 1px solid rgba(99, 102, 241, 0.2);
        }
        
        .dnd-toggle-button:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.15));
            border-color: rgba(99, 102, 241, 0.3);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }
        
        /* Aktiv (DND eingeschaltet) */
        .dnd-toggle-button.active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(234, 88, 12, 0.9));
            color: white;
            border: 1px solid rgba(249, 115, 22, 0.8);
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
        }
        
        .dnd-toggle-button.active:hover {
            background: linear-gradient(135deg, rgba(249, 115, 22, 1), rgba(234, 88, 12, 1));
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
        }
        
        /* Dark Mode Anpassungen */
        .dark .dnd-toggle-button {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.15));
            color: rgb(147, 197, 253);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }
        
        .dark .dnd-toggle-button:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.2));
            border-color: rgba(99, 102, 241, 0.4);
        }
        
        .dark .dnd-toggle-button.active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(234, 88, 12, 0.9));
            color: white;
            border: 1px solid rgba(249, 115, 22, 0.8);
        }
    </style>
    
    {% block head %}{% endblock %}
</head>

<body class="min-h-screen flex flex-col bg-white text-slate-900 dark:bg-black dark:text-white transition-colors duration-300 text-base mercedes-background">
    
    <!-- Navigation -->
    <nav class="navbar">
        <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
            <div class="flex items-center justify-between h-16 sm:h-18 lg:h-20">
                <!-- Brand Section -->
                <div class="flex-shrink-0">
                    <a href="{{ url_for('dashboard') }}" class="navbar-brand group" aria-label="Zur Startseite">
                        <!-- Mercedes-Benz Logo -->
                        <div class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 transition-all duration-300 group-hover:rotate-180">
                            <svg class="w-full h-full text-slate-900 dark:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 80 80" aria-hidden="true">
                                <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                                C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
                                c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
                                C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
                                C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
                                c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
                            </svg>
                        </div>
                        <!-- Brand Text -->
                        <div class="flex flex-col ml-3">
                            <span class="text-sm lg:text-base font-bold text-slate-900 dark:text-white transition-colors duration-300 tracking-tight">Mercedes-Benz</span>
                            <span class="text-xs font-medium text-slate-600 dark:text-slate-400 transition-colors duration-300">Manage Your Printer - </span>
                        </div>
                    </a>
                </div>

                <!-- Desktop Navigation Menu - überarbeitetes Design -->
                <div class="hidden lg:flex flex-1 justify-center">
                    <nav class="navbar-menu-new" role="navigation" aria-label="Hauptnavigation">
                        <a href="{{ url_for('dashboard') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
                            </svg>
                            <span>Dashboard</span>
                        </a>
                        
                        <a href="{{ url_for('printers_page') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            <span>Drucker-Steckdosen</span>
                        </a>
                        
                        <a href="{{ url_for('jobs_page') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'jobs_page' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                            </svg>
                            <span>Reservierungen</span>
                        </a>
                        
                        <a href="{{ url_for('stats_page') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'stats_page' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                            </svg>
                            <span>Statistiken</span>
                        </a>
                        
                        <a href="{{ url_for('calendar.calendar_view') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'calendar.calendar_view' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <span>Schichtplan</span>
                        </a>
                        
                        <a href="{{ url_for('guest.guest_request_form') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'guest.guest_request_form' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span>Antrag stellen</span>
                        </a>
                        
                        <a href="{{ url_for('guest.guest_requests_overview') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'guest.guest_requests_overview' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <span>Meine Anträge</span>
                        </a>
                        
                        {% if current_user.is_authenticated and current_user.is_admin %}
                        <a href="{{ url_for('admin_page') }}" 
                           class="nav-item {{ 'active' if request.endpoint == 'admin_page' else '' }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <span>Ausbilder-Bereich</span>
                        </a>
                        {% endif %}
                    </nav>
                </div>

                <!-- Rechte Seite der Navbar -->
                <div class="flex items-center space-x-2 sm:space-x-3">
                    <!-- Mobile Menu Toggle (neu) -->
                    <button 
                        id="mobileMenuToggle" 
                        class="lg:hidden p-2 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50"
                        aria-label="Menü öffnen"
                        aria-expanded="false"
                    >
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                    
                    <!-- Dark Mode Toggle - Moderner, schöner Design -->
                    <div class="relative">
                        <button 
                            id="darkModeToggle" 
                            class="dark-mode-toggle-premium group"
                            aria-label="Dark Mode umschalten"
                            data-action="toggle-dark-mode"
                            title="Design wechseln"
                        >
                            <!-- Hintergrund-Ring für besseren visuellen Effekt -->
                            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-amber-300 to-orange-400 dark:from-blue-400 dark:to-purple-500 opacity-0 group-hover:opacity-100 blur-sm transition-all duration-500"></div>
                            
                            <!-- Haupt-Container -->
                            <div class="relative flex items-center justify-center w-11 h-11 rounded-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border border-slate-200/50 dark:border-slate-600/50 shadow-lg dark:shadow-slate-900/20 transition-all duration-300 group-hover:scale-105 group-active:scale-95">
                                
                                <!-- Sonnen-Icon (Light Mode) -->
                                <div class="sun-icon absolute inset-0 flex items-center justify-center transition-all duration-500 ease-in-out opacity-100 dark:opacity-0 scale-100 dark:scale-75 rotate-0 dark:rotate-90">
                                    <svg class="w-5 h-5 text-amber-500 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
                                        <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
                                    </svg>
                                </div>
                                
                                <!-- Mond-Icon (Dark Mode) -->
                                <div class="moon-icon absolute inset-0 flex items-center justify-center transition-all duration-500 ease-in-out opacity-0 dark:opacity-100 scale-75 dark:scale-100 rotate-90 dark:rotate-0">
                                    <svg class="w-5 h-5 text-blue-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
                                        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                
                                <!-- Animierte Punkte für zusätzlichen visuellen Effekt -->
                                <div class="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="animate-pulse absolute top-0 left-1/2 w-1 h-1 bg-amber-400 dark:bg-blue-400 rounded-full transform -translate-x-1/2 -translate-y-1"></div>
                                    <div class="animate-pulse absolute bottom-0 left-1/2 w-1 h-1 bg-amber-400 dark:bg-blue-400 rounded-full transform -translate-x-1/2 translate-y-1 animation-delay-500"></div>
                                    <div class="animate-pulse absolute top-1/2 left-0 w-1 h-1 bg-amber-400 dark:bg-blue-400 rounded-full transform -translate-y-1/2 -translate-x-1 animation-delay-1000"></div>
                                    <div class="animate-pulse absolute top-1/2 right-0 w-1 h-1 bg-amber-400 dark:bg-blue-400 rounded-full transform -translate-y-1/2 translate-x-1 animation-delay-1500"></div>
                                </div>
                            </div>
                        </button>
                        
                        <!-- Tooltip -->
                        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 dark:bg-slate-700 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
                            <span class="dark:hidden">Dark Mode aktivieren</span>
                            <span class="hidden dark:inline">Light Mode aktivieren</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-900 dark:border-t-slate-700"></div>
                        </div>
                    </div>
                    
                    {% if current_user.is_authenticated %}
                    <!-- Benachrichtigungen - kompakteres Design -->
                    <div class="relative">
                        <button 
                            id="notificationToggle" 
                            class="relative p-1.5 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
                            aria-label="Benachrichtigungen anzeigen"
                            title="Benachrichtigungen"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                            </svg>
                            <!-- Badge für ungelesene Benachrichtigungen -->
                            <span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium hidden">
                                0
                            </span>
                        </button>
                        
                        <!-- Benachrichtigungs-Dropdown -->
                        <div id="notificationDropdown" class="absolute right-0 mt-2 w-72 sm:w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
                            <div class="p-3 border-b border-slate-200 dark:border-slate-600">
                                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
                            </div>
                            <div id="notificationList" class="max-h-80 overflow-y-auto">
                                <div class="p-3 text-center text-slate-500 dark:text-slate-400 text-sm">
                                    Keine neuen Benachrichtigungen
                                </div>
                            </div>
                            <div class="p-2 border-t border-slate-200 dark:border-slate-600">
                                <button id="markAllRead" class="w-full text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
                                    Alle als gelesen markieren
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- User Profile Dropdown - kompakteres Design -->
                    <div class="relative" id="user-menu-container">
                        <button 
                            id="user-menu-button" 
                            class="flex items-center space-x-1 rounded-full p-1 text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
                            aria-expanded="false"
                            aria-haspopup="true"
                            aria-label="Benutzermenu öffnen"
                        >
                            <!-- Profile Avatar -->
                            <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">
                                {{ current_user.email[0].upper() if current_user.email else 'U' }}
                            </div>
                            <!-- User Info (nur auf größeren Geräten) -->
                            <div class="hidden sm:block text-left ml-1">
                                <div class="text-xs font-medium text-slate-900 dark:text-white transition-colors duration-300">{{ current_user.email.split('@')[0] if current_user.email else 'Benutzer' }}</div>
                            </div>
                        </button>
                        
                        <!-- User Menu Dropdown -->
                        <div id="user-dropdown" class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden origin-top-right">
                            <!-- User Info Header -->
                            <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-600">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
                                        {{ current_user.email[0].upper() if current_user.email else 'U' }}
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-slate-900 dark:text-white truncate">
                                            {{ current_user.full_name if current_user.full_name else current_user.email.split('@')[0] if current_user.email else 'Benutzer' }}
                                        </p>
                                        <p class="text-xs text-slate-500 dark:text-slate-400 truncate">
                                            {{ current_user.email if current_user.email else 'Keine E-Mail' }}
                                        </p>
                                        {% if current_user.is_admin %}
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 mt-1">
                                            Ausbilder
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Menu Items -->
                            <div class="py-1">
                                <a href="{{ url_for('user_profile') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                    Mein Profil
                                </a>
                                
                                <a href="{{ url_for('user_settings') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    Einstellungen
                                </a>
                                
                                <a href="{{ url_for('jobs_page') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                    </svg>
                                    Neue Reservierung
                                </a>
                                
                                <a href="{{ url_for('stats_page') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                    </svg>
                                    Analytik
                                </a>
                            </div>
                            
                            <div class="border-t border-slate-200 dark:border-slate-600">
                                <a href="{{ url_for('privacy') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                    </svg>
                                    Datenschutz
                                </a>
                                
                                <a href="{{ url_for('terms') }}" 
                                   class="flex items-center px-4 py-2 text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    Nutzungsbedingungen
                                </a>
                                
                                <button onclick="handleLogout()" 
                                        class="flex items-center w-full px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                    </svg>
                                    Abmelden
                                </button>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <!-- Login Button - kompakteres Design -->
                    <a href="{{ url_for('login') }}" 
                       class="flex items-center space-x-1 py-1 px-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-xs transition-colors duration-200">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        <span class="hidden sm:inline">Anmelden</span>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
    
    <!-- Mobile Menu (neu) -->
    <div id="mobileMenu" class="mobile-menu-new hidden lg:hidden">
        <nav class="flex flex-col space-y-1 px-3 py-4" role="navigation" aria-label="Mobile Navigation">
            <a href="{{ url_for('dashboard') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
                </svg>
                <span>Dashboard</span>
            </a>
            
            <a href="{{ url_for('printers_page') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                <span>Drucker-Steckdosen</span>
            </a>
            
            <a href="{{ url_for('jobs_page') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'jobs_page' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                <span>Reservierungen</span>
            </a>
            
            <a href="{{ url_for('stats_page') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'stats_page' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                <span>Statistiken</span>
            </a>
            
            <a href="{{ url_for('calendar.calendar_view') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'calendar.calendar_view' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <span>Schichtplan</span>
            </a>
            
            <a href="{{ url_for('guest.guest_request_form') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'guest.guest_request_form' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                <span>Antrag stellen</span>
            </a>
            
            <a href="{{ url_for('guest.guest_requests_overview') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'guest.guest_requests_overview' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <span>Meine Anträge</span>
            </a>
            
            {% if current_user.is_authenticated and current_user.is_admin %}
            <a href="{{ url_for('admin_page') }}" 
               class="mobile-nav-item {{ 'active' if request.endpoint == 'admin_page' else '' }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <span>Ausbilder-Bereich</span>
            </a>
            {% endif %}
        </nav>
    </div>

    <!-- Main Content -->
    <main id="main-content" class="flex-grow max-w-7xl w-full mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8">
        <div class="container mx-auto px-4 py-8">
            <!-- Flash Messages - Modernisiert für Glassmorphism-Kompatibilität -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <!-- Flask Flash Messages als Datenattribute für JavaScript -->
                    <div id="flask-flash-messages" style="display: none;"
                         {% for category, message in messages %}
                         data-flash-{{ loop.index }}="{{ category }}|{{ message | e }}"
                         {% endfor %}
                         data-flash-count="{{ messages|length }}">
                    </div>
                {% endif %}
            {% endwith %}
            
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- Mercedes-Benz Footer -->
    <footer class="bg-white dark:bg-black border-t border-gray-200 dark:border-slate-700 mt-auto transition-colors duration-300">
        <div class="max-w-screen-xl w-full mx-auto px-3 sm:px-6 lg:px-8">
            <div class="py-4 sm:py-8 border-t border-gray-200 dark:border-slate-700 mt-8 sm:mt-12 pt-4 sm:pt-8">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8">
                    <!-- Brand Section - Stack on mobile -->
                    <div class="flex flex-col space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="w-6 h-6">
                                <svg class="w-full h-full text-slate-900 dark:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 80 80">
                                    <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                                    C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
                                    c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
                                    C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
                                    C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
                                    c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
                                </svg>
                            </div>
                            <div>
                                <div class="text-base font-bold text-slate-900 dark:text-white transition-colors duration-300">Mercedes-Benz</div>
                                <div class="text-xs text-slate-600 dark:text-slate-400 transition-colors duration-300">TBA Marienfelde - Steckdosen-Steuerung</div>
                            </div>
                        </div>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
                            Das Beste oder nichts - Professionelles 3D-Druck Management für Mercedes-Benz.
                        </p>
                    </div>
                    
                    <!-- System Info -->
                    <div class="flex flex-col space-y-4">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">System</h3>
                        <div class="space-y-2 text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
                            <div class="flex justify-between">
                                <span>Version:</span>
                                <span class="text-slate-900 dark:text-white font-medium transition-colors duration-300">3.0.0</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Status:</span>
                                <div id="connection-status" class="flex items-center space-x-1">
                                    <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                                    <span class="text-green-500 dark:text-green-400 font-medium transition-colors duration-300">Online</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Do Not Disturb Controls -->
                    <div class="flex flex-col space-y-4">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">Benachrichtigungen</h3>
                        <div class="space-y-3">
                            <!-- Do Not Disturb Toggle - Vereinfacht -->
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-slate-600 dark:text-slate-400">Nicht stören:</span>
                                <button 
                                    id="dndToggle" 
                                    class="dnd-toggle-button px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                    aria-label="Do Not Disturb umschalten"
                                    data-dnd-toggle
                                    title="Benachrichtigungen stumm schalten"
                                >
                                    <span class="dnd-text">Inaktiv</span>
                                </button>
                            </div>
                            
                            <!-- DND Status -->
                            <div id="dndStatus" class="text-xs text-slate-500 dark:text-slate-400">
                                <span class="dnd-status-text">Alle Benachrichtigungen aktiv</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Copyright -->
                    <div class="flex flex-col space-y-4">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">Rechtliches</h3>
                        <div class="space-y-2 text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
                            <p>© 2024 Mercedes-Benz Group AG</p>
                            <p>Alle Rechte vorbehalten.</p>
                            <p class="text-xs text-slate-500 dark:text-slate-500 transition-colors duration-300">
                                Entwickelt für interne Mercedes-Benz Anwendungen
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/debug-fix.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
    <script src="{{ url_for('static', filename='js/job-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/dark-mode-fix.js') }}"></script>
    <script src="{{ url_for('static', filename='js/optimization-features.js') }}"></script>
    <script src="{{ url_for('static', filename='js/global-refresh-functions.js') }}"></script>
    <script src="{{ url_for('static', filename='js/event-handlers.js') }}"></script>
    <script src="{{ url_for('static', filename='js/csp-violation-handler.js') }}"></script>
    <script src="{{ url_for('static', filename='js/printer_monitor.js') }}"></script>
    {% if current_user.is_authenticated %}
    <script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
    <script src="{{ url_for('static', filename='js/session-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/auto-logout.js') }}"></script>
    {% endif %}
    
    <!-- Glassmorphism Notification System - Modernisiert -->
    <script src="{{ url_for('static', filename='js/glassmorphism-notifications.js') }}"></script>
    
    <!-- Additional JavaScript Functions -->
    <script>
        /**
         * Logout-Handler für sicheres Abmelden
         * Unterstützt sowohl das moderne Glassmorphism-System als auch Fallback-Bestätigung
         */
        function handleLogout() {
            console.log('🚪 Abmeldung angefordert');
            
            // Funktion für die tatsächliche Abmeldung
            function performLogout() {
                try {
                    console.log('🔄 Abmeldung wird durchgeführt...');
                    
                    // Loading-Animation anzeigen
                    document.body.style.opacity = '0.7';
                    document.body.style.pointerEvents = 'none';
                    
                    // Status-Feedback anzeigen
                    const loadingMessage = document.createElement('div');
                    loadingMessage.id = 'logout-loading';
                    loadingMessage.style.cssText = `
                        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                        background: rgba(0, 0, 0, 0.8); color: white; padding: 20px 40px;
                        border-radius: 8px; z-index: 9999; font-family: sans-serif;
                        backdrop-filter: blur(10px);
                    `;
                    loadingMessage.textContent = 'Abmeldung wird durchgeführt...';
                    document.body.appendChild(loadingMessage);
                    
                    // CSRF-Token aus Meta-Tag holen
                    const csrfToken = document.querySelector('meta[name="csrf-token"]');
                    
                    // Logout-Formular erstellen und absenden
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ url_for("auth_logout") }}';
                    form.style.display = 'none';
                    
                    // CSRF-Token hinzufügen falls verfügbar
                    if (csrfToken) {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'csrf_token';
                        input.value = csrfToken.getAttribute('content');
                        form.appendChild(input);
                    }
                    
                    // Formular absenden
                    document.body.appendChild(form);
                    form.submit();
                    
                } catch (error) {
                    console.error('❌ Fehler bei der Abmeldung:', error);
                    // Bei Fehler direkt zur Login-Seite weiterleiten
                    window.location.href = '/auth/login';
                }
            }
            
            // Abbruch-Funktion
            function cancelLogout() {
                console.log('❌ Abmeldung abgebrochen');
                // Nichts zu tun - Toast wird automatisch geschlossen
            }
            
            // Prüfen ob das moderne Glassmorphism-System verfügbar ist
            if (typeof showConfirmationToast === 'function' && window.glassNotificationSystem) {
                console.log('✨ Verwende modernes Glassmorphism-Bestätigungssystem');
                
                try {
                    showConfirmationToast(
                        'Möchten Sie sich wirklich abmelden?',
                        performLogout,
                        cancelLogout,
                        {
                            title: 'Abmeldung bestätigen',
                            confirmText: 'Abmelden',
                            cancelText: 'Abbrechen'
                        }
                    );
                } catch (error) {
                    console.warn('⚠️ Glassmorphism-System Fehler, verwende Fallback:', error);
                    // Bei Fehler mit Glassmorphism-System zum Standard-Fallback wechseln
                    useStandardConfirmation();
                }
            } else {
                console.log('📋 Verwende Standard-Bestätigungsdialog');
                useStandardConfirmation();
            }
            
            // Standard-Bestätigungslogik
            function useStandardConfirmation() {
                // Verbesserte Standard-Bestätigung mit besserer UX
                const confirmation = confirm('Möchten Sie sich wirklich abmelden?\n\nSie werden zur Anmeldeseite weitergeleitet.');
                
                if (confirmation) {
                    performLogout();
                } else {
                    console.log('❌ Abmeldung abgebrochen (Standard-Dialog)');
                }
            }
        }
        
        /**
         * Initialisierung aller UI-Komponenten nach DOM-Load
         */
        document.addEventListener('DOMContentLoaded', function() {
            // MYP App für Offline-Funktionalität initialisieren
            if (typeof MYPApp !== 'undefined') {
                window.mypApp = new MYPApp();
            }
            
            // User-Dropdown-Funktionalität initialisieren
            initUserDropdown();
            
            // Flask Flash Messages über das Glassmorphism-System anzeigen
            const flashContainer = document.getElementById('flask-flash-messages');
            if (flashContainer) {
                const flashCount = parseInt(flashContainer.getAttribute('data-flash-count')) || 0;
                
                for (let i = 1; i <= flashCount; i++) {
                    const flashData = flashContainer.getAttribute('data-flash-' + i);
                    if (flashData) {
                        const [category, message] = flashData.split('|', 2);
                        let messageType = category;
                        
                        // Flask-Kategorien zu JavaScript-Kategorien mappen
                        if (messageType === 'danger') messageType = 'error';
                        
                        // Nachricht über das moderne Glassmorphism-System anzeigen
                        if (typeof showToast === 'function') {
                            // Kleine Verzögerung für bessere UX und schöne Glassmorphism-Animationen
                            setTimeout(() => {
                                showToast(message, messageType, 6000, {
                                    title: messageType === 'success' ? 'Erfolgreich' : 
                                           messageType === 'error' ? 'Fehler' : 
                                           messageType === 'warning' ? 'Warnung' : 'Information',
                                    playSound: true
                                });
                            }, i * 250); // Nachrichten gestaffelt anzeigen
                        }
                    }
                }
                
                // Container nach Verarbeitung entfernen
                flashContainer.remove();
            }
            
            console.log('🚀 MYP Platform UI erfolgreich initialisiert');
        });
        
        /**
         * User-Dropdown-Funktionalität
         */
        function initUserDropdown() {
            const userMenuButton = document.getElementById('user-menu-button');
            const userDropdown = document.getElementById('user-dropdown');
            
            console.log('🔍 User-Dropdown Init:', { userMenuButton, userDropdown });
            
            if (!userMenuButton || !userDropdown) {
                console.warn('⚠️ User-Dropdown-Elemente nicht gefunden:', {
                    button: !!userMenuButton,
                    dropdown: !!userDropdown
                });
                return; // Nicht angemeldet oder Elemente nicht gefunden
            }
            
            let isDropdownOpen = false;
            
            // Toggle-Funktion
            function toggleDropdown(event) {
                if (event) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                
                isDropdownOpen = !isDropdownOpen;
                console.log('🔄 Toggle Dropdown:', isDropdownOpen);
                
                if (isDropdownOpen) {
                    openDropdown();
                } else {
                    closeDropdown();
                }
            }
            
            function openDropdown() {
                userDropdown.classList.remove('hidden');
                userMenuButton.setAttribute('aria-expanded', 'true');
                
                // Reset any existing styles
                userDropdown.style.transition = '';
                userDropdown.style.opacity = '0';
                userDropdown.style.transform = 'translateY(-10px) scale(0.95)';
                
                // Force reflow
                userDropdown.offsetHeight;
                
                // Apply opening animation
                requestAnimationFrame(() => {
                    userDropdown.style.transition = 'all 0.2s ease-out';
                    userDropdown.style.opacity = '1';
                    userDropdown.style.transform = 'translateY(0) scale(1)';
                });
                
                console.log('✅ Dropdown geöffnet');
            }
            
            function closeDropdown() {
                userDropdown.style.transition = 'all 0.15s ease-in';
                userDropdown.style.opacity = '0';
                userDropdown.style.transform = 'translateY(-10px) scale(0.95)';
                
                setTimeout(() => {
                    userDropdown.classList.add('hidden');
                    userMenuButton.setAttribute('aria-expanded', 'false');
                    // Reset inline styles
                    userDropdown.style.transition = '';
                    userDropdown.style.opacity = '';
                    userDropdown.style.transform = '';
                }, 150);
                
                isDropdownOpen = false;
                console.log('❌ Dropdown geschlossen');
            }
            
            // Event-Listener für Button-Click
            userMenuButton.addEventListener('click', toggleDropdown);
            
            // Alternative: Auch auf touchstart für mobile Geräte
            userMenuButton.addEventListener('touchstart', function(e) {
                e.preventDefault();
                toggleDropdown(e);
            }, { passive: false });
            
            // Event-Listener für Klicks außerhalb des Dropdowns
            document.addEventListener('click', function(e) {
                if (!userMenuButton.contains(e.target) && !userDropdown.contains(e.target)) {
                    if (isDropdownOpen) {
                        closeDropdown();
                    }
                }
            });
            
            // Touch-Events für mobile Geräte
            document.addEventListener('touchstart', function(e) {
                if (!userMenuButton.contains(e.target) && !userDropdown.contains(e.target)) {
                    if (isDropdownOpen) {
                        closeDropdown();
                    }
                }
            });
            
            // Escape-Taste zum Schließen
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && isDropdownOpen) {
                    closeDropdown();
                    userMenuButton.focus();
                }
            });
            
            // Fokus-Management für bessere Accessibility
            userDropdown.addEventListener('keydown', function(e) {
                if (e.key === 'Tab') {
                    const focusableElements = userDropdown.querySelectorAll('a, button');
                    const firstElement = focusableElements[0];
                    const lastElement = focusableElements[focusableElements.length - 1];
                    
                    if (e.shiftKey && document.activeElement === firstElement) {
                        e.preventDefault();
                        lastElement.focus();
                    } else if (!e.shiftKey && document.activeElement === lastElement) {
                        e.preventDefault();
                        firstElement.focus();
                    }
                }
            });
            
            // Window resize handler
            window.addEventListener('resize', function() {
                if (isDropdownOpen) {
                    closeDropdown();
                }
            });
            
            console.log('✅ User-Dropdown erfolgreich initialisiert');
        }
        
        /**
         * Do Not Disturb (DND) Funktionalität
         */
        class DoNotDisturbManager {
            constructor() {
                this.storageKey = 'myp-dnd-mode';
                this.counterKey = 'myp-dnd-counter';
                this.suppressedMessages = [];
                this.isEnabled = this.loadDNDState();
                this.suppressedCount = this.loadSuppressedCount();
                
                this.init();
            }
            
            init() {
                const dndToggle = document.getElementById('dndToggle');
                const dndStatus = document.getElementById('dndStatus');
                
                if (dndToggle) {
                    dndToggle.addEventListener('click', () => this.toggle());
                    this.updateUI();
                }
                
                // Integration mit dem bestehenden Benachrichtigungssystem
                this.integrateWithNotificationSystem();
            }
            
            toggle() {
                this.isEnabled = !this.isEnabled;
                this.saveDNDState();
                this.updateUI();
                
                if (!this.isEnabled) {
                    // Beim Deaktivieren alle unterdrückten Nachrichten anzeigen
                    this.showSuppressedMessages();
                    this.resetSuppressedCount();
                }
                
                // Feedback für den Benutzer
                const message = this.isEnabled 
                    ? 'Nicht stören aktiviert - Benachrichtigungen werden unterdrückt'
                    : 'Nicht stören deaktiviert - Benachrichtigungen sind wieder aktiv';
                    
                if (typeof showToast === 'function') {
                    showToast(message, 'info', 3000, {
                        title: 'Information',
                        playSound: true
                    });
                }
                
                console.log(`🔕 DND ${this.isEnabled ? 'aktiviert' : 'deaktiviert'}`);
            }
            
            updateUI() {
                const dndToggle = document.getElementById('dndToggle');
                const dndText = dndToggle?.querySelector('.dnd-text');
                const dndStatusText = document.querySelector('.dnd-status-text');
                
                if (this.isEnabled) {
                    dndToggle?.classList.add('active');
                    if (dndText) dndText.textContent = 'Aktiv';
                    if (dndStatusText) dndStatusText.textContent = 'Benachrichtigungen unterdrückt';
                    dndToggle?.setAttribute('title', 'Nicht stören deaktivieren');
                } else {
                    dndToggle?.classList.remove('active');
                    if (dndText) dndText.textContent = 'Inaktiv';
                    if (dndStatusText) dndStatusText.textContent = 'Alle Benachrichtigungen aktiv';
                    dndToggle?.setAttribute('title', 'Nicht stören aktivieren');
                }
            }
            
            shouldSuppressNotification(message, type) {
                if (!this.isEnabled) return false;
                
                // Wichtige Nachrichten (Fehler) nicht unterdrücken
                if (type === 'error' || type === 'danger') return false;
                
                // Nachricht zur Liste der unterdrückten hinzufügen
                this.suppressedMessages.push({
                    message,
                    type,
                    timestamp: new Date().toISOString()
                });
                
                this.incrementSuppressedCount();
                return true;
            }
            
            showSuppressedMessages() {
                if (this.suppressedMessages.length === 0) return;
                
                // Sammelnachricht über unterdrückte Benachrichtigungen
                const count = this.suppressedMessages.length;
                const summaryMessage = `${count} Benachrichtigung${count > 1 ? 'en' : ''} während "Nicht stören" erhalten`;
                
                if (typeof showToast === 'function') {
                    showToast(summaryMessage, 'info', 4000, {
                        title: 'Information',
                        playSound: true
                    });
                }
                
                // Optional: Alle einzelnen Nachrichten anzeigen (mit Verzögerung)
                this.suppressedMessages.forEach((item, index) => {
                    setTimeout(() => {
                        if (typeof showToast === 'function') {
                            showToast(item.message, item.type, 3000, {
                                title: item.type === 'success' ? 'Erfolgreich' : 
                                       item.type === 'error' ? 'Fehler' : 
                                       item.type === 'warning' ? 'Warnung' : 'Information',
                                playSound: true
                            });
                        }
                    }, (index + 1) * 500);
                });
                
                this.suppressedMessages = [];
            }
            
            incrementSuppressedCount() {
                this.suppressedCount++;
                this.saveSuppressedCount();
                this.updateUI();
            }
            
            resetSuppressedCount() {
                this.suppressedCount = 0;
                this.saveSuppressedCount();
                this.updateUI();
            }
            
            integrateWithNotificationSystem() {
                // Überschreibe showToast wenn verfügbar
                if (typeof window.showToast === 'function') {
                    const originalShowToast = window.showToast;
                    window.showToast = (message, type, duration, options) => {
                        if (this.shouldSuppressNotification(message, type)) {
                            console.log(`🔕 Benachrichtigung unterdrückt: ${message}`);
                            return;
                        }
                        return originalShowToast(message, type, duration, options);
                    };
                }
            }
            
            loadDNDState() {
                const saved = localStorage.getItem(this.storageKey);
                return saved === 'true';
            }
            
            saveDNDState() {
                localStorage.setItem(this.storageKey, this.isEnabled.toString());
            }
            
            loadSuppressedCount() {
                const saved = localStorage.getItem(this.counterKey);
                return saved ? parseInt(saved, 10) : 0;
            }
            
            saveSuppressedCount() {
                localStorage.setItem(this.counterKey, this.suppressedCount.toString());
            }
            
            // Public API
            getState() {
                return {
                    enabled: this.isEnabled,
                    suppressedCount: this.suppressedCount,
                    suppressedMessages: this.suppressedMessages
                };
            }
        }
        
        // DND Manager global verfügbar machen
        window.dndManager = new DoNotDisturbManager();
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html> 