{% load static %}
<!DOCTYPE html>
<html lang="en" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}HAVEN GRAZURI ADVANCE{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        :root {
            --primary: #00308a;
            --secondary: #86c662;
            --background: #ffffff;
            --success: #86c662;
            --error: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            --primary-light: #1e40af;
            --primary-dark: #002266;
            --secondary-light: #9dd470;
            --secondary-dark: #73b554;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        /* Light mode */
        .light {
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
        
        /* Dark mode */
        .dark {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --border-color: #334155;
            --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
        }
        
        body {
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            color: var(--text-primary);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 100vh;
        }
        
        .bg-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
        .bg-secondary { 
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
            box-shadow: 0 0 20px rgba(134, 198, 98, 0.3);
        }
        .text-primary { color: var(--primary); }
        .text-secondary { color: var(--secondary); }
        .text-text-light { color: #e2e8f0; }
        .bg-background-white { background-color: var(--bg-primary); }
        
        /* Glassmorphism effect */
        .glass {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .dark .glass {
            background: rgba(15, 23, 42, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Enhanced animations */
        .fade-in {
            animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .slide-in {
            animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        /* Sidebar enhancements */
        .sidebar-item {
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }
        
        .sidebar-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: var(--secondary);
            transform: scaleY(0);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: bottom;
        }
        
        .sidebar-item.active::before,
        .sidebar-item:hover::before {
            transform: scaleY(1);
            transform-origin: top;
        }
        
        .sidebar-item.active {
            background: linear-gradient(90deg, rgba(134, 198, 98, 0.2) 0%, transparent 100%);
            border-radius: 8px;
        }
        
        .sidebar-item:hover {
            background: linear-gradient(90deg, rgba(134, 198, 98, 0.15) 0%, transparent 100%);
            border-radius: 8px;
            transform: translateX(4px);
        }
        
        /* Top bar enhancements */
        .top-bar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow);
        }
        
        .dark .top-bar {
            background: rgba(15, 23, 42, 0.95);
        }
        
        /* Profile avatar enhancement */
        .profile-avatar {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
            box-shadow: 0 4px 12px rgba(134, 198, 98, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .profile-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(134, 198, 98, 0.4);
        }
        
        /* Message enhancements */
        .message-card {
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: slideInDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .message-success {
            background: linear-gradient(135deg, rgba(134, 198, 98, 0.1) 0%, rgba(134, 198, 98, 0.05) 100%);
            border-color: rgba(134, 198, 98, 0.3);
        }
        
        .message-error {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
            border-color: rgba(239, 68, 68, 0.3);
        }
        
        .message-warning {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
            border-color: rgba(245, 158, 11, 0.3);
        }
        
        .message-info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
            border-color: rgba(59, 130, 246, 0.3);
        }
        
        /* Notification badge */
        .notification-badge {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            animation: pulse 2s infinite;
        }
        
        /* Button enhancements */
        .btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        /* Dark mode toggle enhancement */
        .dark-mode-toggle {
            position: relative;
            background: linear-gradient(135deg, rgba(134, 198, 98, 0.2) 0%, rgba(134, 198, 98, 0.1) 100%);
            border: 1px solid rgba(134, 198, 98, 0.3);
        }
        
        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%);
        }
        
        /* Keyframe animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        
        @keyframes slideInDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* Responsive enhancements */
        @media (max-width: 768px) {
            .sidebar-item:hover {
                transform: none;
            }
        }
        
        /* Focus states for accessibility */
        .focus-ring:focus {
            outline: 2px solid var(--secondary);
            outline-offset: 2px;
        }
        
        /* Loading states */
        .loading {
            position: relative;
        }
        
        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid transparent;
            border-top: 2px solid var(--secondary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    <script>
        // Check for saved dark mode preference
        if (localStorage.getItem('darkMode') === 'true' || 
            (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.remove('light');
            document.documentElement.classList.add('dark');
        }
        
        function toggleDarkMode() {
            const html = document.documentElement;
            const isDark = html.classList.contains('dark');
            
            // Add transition class
            html.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            
            html.classList.toggle('dark');
            html.classList.toggle('light');
            
            localStorage.setItem('darkMode', !isDark);
            
            // Remove transition class after animation
            setTimeout(() => {
                html.style.transition = '';
            }, 300);
        }
    </script>
</head>
<body class="bg-gray-50 fade-in">
    <div>
        <!-- Mobile sidebar overlay -->
        <div id="mobile-sidebar" class="fixed inset-0 z-50 lg:hidden hidden">
            <div class="fixed inset-0 bg-gray-900/80 backdrop-blur-sm" onclick="closeSidebar()"></div>
            <div class="fixed inset-0 flex">
                <div class="relative mr-16 flex w-full max-w-xs flex-1 slide-in">
                    <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
                        <button type="button" class="-m-2.5 p-2.5 btn focus-ring rounded-full hover:bg-white/20" onclick="closeSidebar()">
                            <span class="sr-only">Close sidebar</span>
                            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <!-- Mobile sidebar content -->
                    <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4 shadow-2xl">
                        <div class="flex h-16 shrink-0 items-center">
                            <div class="text-xl font-bold text-white flex items-center gap-3">
                                <div class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center">
                                    <i class="fas fa-chart-line text-white text-sm"></i>
                                </div>
                                Branch Business
                            </div>
                        </div>
                        <nav class="flex flex-1 flex-col">
                            <ul role="list" class="flex flex-1 flex-col gap-y-7">
                                <li>
                                    <ul role="list" class="-mx-2 space-y-2">
                                        <li>
                                            <a href="{% url 'dashboard' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'dashboard' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-chart-line h-6 w-6 shrink-0"></i>
                                                Dashboard
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'users:client_list' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'client_list' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-users h-6 w-6 shrink-0"></i>
                                                Clients
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'loans:loans' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'loans' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-money-bill-wave h-6 w-6 shrink-0"></i>
                                                Loans
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'reports:reports_dashboard' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'reports_dashboard' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-chart-bar h-6 w-6 shrink-0"></i>
                                                Reports
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'utils:documents' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'documents' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-file-alt h-6 w-6 shrink-0"></i>
                                                Documents
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'utils:all_customer_documents' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'all_customer_documents' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-users-cog h-6 w-6 shrink-0"></i>
                                                Customer Documents
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'utils:notifications' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'notifications' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-bell h-6 w-6 shrink-0"></i>
                                                Notifications
                                                <span class="notification-badge ml-auto text-white text-xs px-2 py-0.5 rounded-full hidden">0</span>
                                            </a>
                                        </li>
                                        <li>
                                            <button onclick="toggleDarkMode()" 
                                               class="dark-mode-toggle w-full sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 text-text-light hover:bg-secondary/20 hover:text-white focus-ring">
                                                <i class="fas fa-moon h-6 w-6 shrink-0 dark:hidden"></i>
                                                <i class="fas fa-sun h-6 w-6 shrink-0 hidden dark:block"></i>
                                                <span class="dark:hidden">Dark Mode</span>
                                                <span class="hidden dark:block">Light Mode</span>
                                            </button>
                                        </li>
                                        <li>
                                            <a href="{% url 'utils:settings' %}" 
                                               class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'settings' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-cog h-6 w-6 shrink-0"></i>
                                                Settings
                                            </a>
                                        </li>
                                {% if user.is_staff %}
                                <li>
                                    <a href="{% url 'users:admin_list' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'admin_list' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-users-cog h-6 w-6 shrink-0"></i>
                                        Admin Management
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- Static sidebar for desktop -->
        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4 shadow-2xl">
                <div class="flex h-16 shrink-0 items-center">
                    <div class="text-xl font-bold text-white flex items-center gap-3">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-chart-line text-white"></i>
                        </div>
                        Branch Business
                    </div>
                </div>
                <nav class="flex flex-1 flex-col">
                    <ul role="list" class="flex flex-1 flex-col gap-y-7">
                        <li>
                            <ul role="list" class="-mx-2 space-y-2">
                                <li>
                                    <a href="{% url 'dashboard' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'dashboard' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-chart-line h-6 w-6 shrink-0"></i>
                                        Dashboard
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'users:client_list' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'client_list' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-users h-6 w-6 shrink-0"></i>
                                        Clients
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'loans:loans' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'loans' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-money-bill-wave h-6 w-6 shrink-0"></i>
                                        Loans
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'reports:reports_dashboard' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'reports_dashboard' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-chart-bar h-6 w-6 shrink-0"></i>
                                        Reports
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'utils:documents' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'documents' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-file-alt h-6 w-6 shrink-0"></i>
                                        Documents
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'utils:all_customer_documents' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'all_customer_documents' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-users-cog h-6 w-6 shrink-0"></i>
                                        Customer Documents
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'utils:notifications' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'notifications' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-bell h-6 w-6 shrink-0"></i>
                                        Notifications
                                        <span class="notification-badge ml-auto text-white text-xs px-2 py-0.5 rounded-full hidden">0</span>
                                    </a>
                                </li>
                                <li>
                                    <button onclick="toggleDarkMode()" 
                                       class="dark-mode-toggle w-full sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 text-text-light hover:bg-secondary/20 hover:text-white focus-ring">
                                        <i class="fas fa-moon h-6 w-6 shrink-0 dark:hidden"></i>
                                        <i class="fas fa-sun h-6 w-6 shrink-0 hidden dark:block"></i>
                                        <span class="dark:hidden">Dark Mode</span>
                                        <span class="hidden dark:block">Light Mode</span>
                                    </button>
                                </li>
                                <li>
                                    <a href="{% url 'utils:settings' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'settings' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-cog h-6 w-6 shrink-0"></i>
                                        Settings
                                    </a>
                                </li>
                                {% if user.is_staff %}
                                <li>
                                    <a href="{% url 'users:admin_list' %}" 
                                       class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if request.resolver_match.url_name == 'admin_list' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-users-cog h-6 w-6 shrink-0"></i>
                                        Admin Management
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="lg:pl-72">
            <!-- Top bar -->
            <div class="top-bar sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b px-4 sm:gap-x-6 sm:px-6 lg:px-8">
                <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden btn focus-ring rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800" onclick="openSidebar()">
                    <span class="sr-only">Open sidebar</span>
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                    </svg>
                </button>

                <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
                    <div class="flex flex-1 items-center">
                        <!-- Breadcrumb or search can go here -->
                        <div class="text-sm text-gray-600 dark:text-gray-400">
                            Welcome back, <span class="font-semibold text-primary">{{ user.get_full_name }}</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-x-4 lg:gap-x-6">
                        <!-- Notification bell -->
                        <button type="button" class="btn focus-ring p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-secondary relative">
                            <i class="fas fa-bell h-5 w-5"></i>
                            <span class="notification-badge absolute -top-1 -right-1 text-white text-xs px-1.5 py-0.5 rounded-full hidden">3</span>
                        </button>
                        
                        <!-- Profile dropdown -->
                        <div class="relative">
                            <button type="button" class="-m-1.5 flex items-center p-1.5 btn focus-ring rounded-lg" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                <span class="sr-only">Open user menu</span>
                                <div class="profile-avatar h-10 w-10 rounded-full flex items-center justify-center">
                                    <span class="text-sm font-bold text-white">{{ user.get_full_name|first|upper }}</span>
                                </div>
                                <span class="hidden lg:flex lg:items-center">
                                    <span class="ml-4 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100" aria-hidden="true">{{ user.get_full_name }}</span>
                                    <svg class="ml-2 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <main class="py-10">
                <div class="px-4 sm:px-6 lg:px-8">
                    {% if messages %}
                        {% for message in messages %}
                            {% if message.extra_tags %}
                                {% if message.extra_tags == request.resolver_match.url_name %}
                                    <div class="message-card mb-6 p-6 {% if message.tags == 'error' %}message-error{% elif message.tags == 'success' %}message-success{% elif message.tags == 'warning' %}message-warning{% else %}message-info{% endif %}">
                                        <div class="flex">
                                            <div class="flex-shrink-0">
                                                {% if message.tags == 'error' %}
                                                    <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center">
                                                        <i class="fas fa-exclamation-circle text-white"></i>
                                                    </div>
                                                {% elif message.tags == 'success' %}
                                                    <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center shadow-lg">
                                                        <i class="fas fa-check-circle text-white"></i>
                                                    </div>
                                                {% elif message.tags == 'warning' %}
                                                    <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center">
                                                        <i class="fas fa-exclamation-triangle text-white"></i>
                                                    </div>
                                                {% else %}
                                                    <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                                                        <i class="fas fa-info-circle text-white"></i>
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="ml-4 flex-1">
                                                <p class="text-base font-semibold {% if message.tags == 'error' %}text-red-800 dark:text-red-200{% elif message.tags == 'success' %}text-green-800 dark:text-green-200{% elif message.tags == 'warning' %}text-yellow-800 dark:text-yellow-200{% else %}text-blue-800 dark:text-blue-200{% endif %}">{{ message }}</p>
                                            </div>
                                            <div class="ml-auto pl-3">
                                                <div class="-mx-1.5 -my-1.5">
                                                    <button type="button" onclick="this.closest('.message-card').remove()" class="btn inline-flex rounded-full p-2 focus-ring {% if message.tags == 'error' %}text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20{% elif message.tags == 'success' %}text-green-500 hover:bg-green-100 dark:hover:bg-green-900/20{% elif message.tags == 'warning' %}text-yellow-500 hover:bg-yellow-100 dark:hover:bg-yellow-900/20{% else %}text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900/20{% endif %}">
                                                        <span class="sr-only">Dismiss</span>
                                                        <i class="fas fa-times h-4 w-4"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    <script>
        function openSidebar() {
            document.getElementById('mobile-sidebar').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeSidebar() {
            document.getElementById('mobile-sidebar').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // Enhanced message handling
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-dismiss messages after 5 seconds
            setTimeout(function() {
                const messages = document.querySelectorAll('.message-card');
                messages.forEach(function(message) {
                    message.style.transform = 'translateY(-100%)';
                    message.style.opacity = '0';
                    setTimeout(() => message.remove(), 300);
                });
            }, 5000);

            // Enhanced profile dropdown functionality
            const userMenuButton = document.getElementById('user-menu-button');
            if (userMenuButton) {
                userMenuButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    // Profile dropdown logic can be added here
                });
            }

            // Add loading states to buttons
            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', function() {
                    const submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.classList.add('loading');
                        submitBtn.disabled = true;
                    }
                });
            });

            // Enhanced notifications
            updateNotificationBadge();
            
            // Start periodic updates
            setInterval(updateNotificationBadge, 30000); // Update every 30 seconds
        });

        function updateNotificationBadge() {
            // Fetch unread notifications count from backend
            fetch('/utils/api/notifications/unread-count/')
                .then(response => response.json())
                .then(data => {
                    const badges = document.querySelectorAll('.notification-badge');
                    const count = data.count;
                    
                    badges.forEach(badge => {
                        if (count > 0) {
                            badge.textContent = count;
                            badge.classList.remove('hidden');
                        } else {
                            badge.classList.add('hidden');
                        }
                    });
                });
        }

        // Enhanced keyboard navigation
        document.addEventListener('keydown', function(e) {
            // Escape key closes sidebar
            if (e.key === 'Escape') {
                closeSidebar();
            }
            
            // Ctrl/Cmd + K for search (if implemented)
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                // Focus search input if exists
                const searchInput = document.querySelector('input[type="search"]');
                if (searchInput) {
                    searchInput.focus();
                }
            }
        });

        // Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, observerOptions);

        // Observe elements for animation
        document.addEventListener('DOMContentLoaded', function() {
            const animatableElements = document.querySelectorAll('.hover-lift, .message-card');
            animatableElements.forEach(el => observer.observe(el));
        });

        // Enhanced error handling
        window.addEventListener('error', function(e) {
            console.error('Application error:', e.error);
            // Could show user-friendly error message
        });

        // Performance optimization
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // Theme persistence
        function applyTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
        }

        // Initialize theme
        const savedTheme = localStorage.getItem('theme') || 'light';
        applyTheme(savedTheme);
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>