{% load static %}
{% load permission_filters %}
<!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 INVESTMENT LIMITED{% endblock %}</title>
    <link rel="icon" type="image/png" href="{% static 'logo.png' %}">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/table-fix.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;
            --system-zoom: 0.7;
        }

        * {
            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;
            zoom: var(--system-zoom, 0.7);
        }

        .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);
        }

        /* Fun Inline Admin Zoom Control */
        .zoom-control-inline {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            backdrop-filter: blur(15px);
            border-radius: 12px;
            padding: 6px 10px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: zoomPulse 3s ease-in-out infinite;
            min-width: 120px;
            height: 36px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dark .zoom-control-inline {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 6px 20px rgba(30, 41, 59, 0.4);
        }

        .zoom-control-inline:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
            animation-play-state: paused;
        }

        @keyframes zoomPulse {
            0%, 100% { 
                box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
                transform: scale(1.02);
            }
        }

        .zoom-slider-inline {
            width: 120px;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #e5e7eb 0%, #10b981 50%, #f59e0b 100%);
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .zoom-slider-inline:hover {
            height: 8px;
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
        }

        .zoom-slider-inline::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid white;
        }

        .zoom-slider-inline::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
        }

        .zoom-slider-inline::-webkit-slider-thumb:active {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.8);
        }

        .zoom-slider-inline::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
            transition: all 0.3s ease;
        }

        .zoom-label-inline {
            font-size: 11px;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .zoom-label-inline i {
            animation: zoomIconSpin 2s linear infinite;
        }

        @keyframes zoomIconSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .zoom-value-inline {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.9);
            text-align: center;
            margin-top: 3px;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .zoom-control-inline:hover .zoom-value-inline {
            color: white;
            transform: scale(1.1);
        }

        @keyframes twinkle {
            0% { opacity: 0.3; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1.2); }
        }

        /* Fun hover effects */
        .zoom-control::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
            border-radius: 22px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .zoom-control:hover::before {
            opacity: 0.7;
            animation: rainbow 2s linear infinite;
        }

        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 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%);
            box-shadow: 0 0 20px rgba(134, 198, 98, 0.3);
        }

        .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);
        }

        // Fun Inline Admin Zoom Control
        function initializeZoomControl() {
            const savedZoom = localStorage.getItem('systemZoom') || '0.7';
            document.documentElement.style.setProperty('--system-zoom', savedZoom);
            
            const slider = document.getElementById('zoomSlider');
            const valueDisplay = document.getElementById('zoomValue');
            const zoomControl = document.getElementById('zoomControl');
            
            if (slider && valueDisplay && zoomControl) {
                slider.value = savedZoom;
                updateZoomDisplay(savedZoom);
                
                // Enhanced slider interaction
                slider.addEventListener('input', function() {
                    const zoom = this.value;
                    document.documentElement.style.setProperty('--system-zoom', zoom);
                    updateZoomDisplay(zoom);
                    localStorage.setItem('systemZoom', zoom);
                    
                    // Fun visual feedback
                    zoomControl.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        zoomControl.style.transform = '';
                    }, 200);
                });
                
                // Add click-to-reset functionality
                zoomControl.addEventListener('dblclick', function() {
                    slider.value = '0.7';
                    document.documentElement.style.setProperty('--system-zoom', '0.7');
                    updateZoomDisplay('0.7');
                    localStorage.setItem('systemZoom', '0.7');
                    
                    // Fun reset animation
                    zoomControl.style.animation = 'none';
                    setTimeout(() => {
                        zoomControl.style.animation = 'zoomPulse 3s ease-in-out infinite';
                    }, 100);
                });
                
                // Add keyboard shortcuts
                document.addEventListener('keydown', function(e) {
                    if (e.ctrlKey && e.shiftKey) {
                        if (e.key === '=' || e.key === '+') {
                            e.preventDefault();
                            const currentZoom = parseFloat(slider.value);
                            const newZoom = Math.min(1.2, currentZoom + 0.1);
                            slider.value = newZoom;
                            document.documentElement.style.setProperty('--system-zoom', newZoom);
                            updateZoomDisplay(newZoom);
                            localStorage.setItem('systemZoom', newZoom);
                        } else if (e.key === '-') {
                            e.preventDefault();
                            const currentZoom = parseFloat(slider.value);
                            const newZoom = Math.max(0.3, currentZoom - 0.1);
                            slider.value = newZoom;
                            document.documentElement.style.setProperty('--system-zoom', newZoom);
                            updateZoomDisplay(newZoom);
                            localStorage.setItem('systemZoom', newZoom);
                        }
                    }
                });
            }
        }
        
        function updateZoomDisplay(zoom) {
            const valueDisplay = document.getElementById('zoomValue');
            const percentage = Math.round(zoom * 100);
            
            // Fun emoji based on zoom level
            let emoji = '🔍';
            if (percentage >= 100) emoji = '🚀';
            else if (percentage >= 80) emoji = '🎯';
            else if (percentage <= 40) emoji = '🔬';
            
            valueDisplay.textContent = `${emoji} ${percentage}%`;
            
            // Add sparkle effect for certain zoom levels
            if (percentage === 100 || percentage === 50) {
                valueDisplay.style.animation = 'twinkle 0.5s ease-in-out';
                setTimeout(() => {
                    valueDisplay.style.animation = '';
                }, 500);
            }
        }

        // Initialize zoom control when DOM is loaded
        document.addEventListener('DOMContentLoaded', initializeZoomControl);
    </script>

    <!-- Fix for client names and images -->
    <link rel="stylesheet" href="{% static 'css/table-fix.css' %}">
    <script src="{% static 'js/table-fix.js' %}" defer></script>
    
    {% block extra_css %}{% endblock %}
</head>

<body class="bg-gray-50 fade-in">

    <!-- Fixed Branch Name Display Bar — HIDDEN (branches not in use) -->
    <!--
    <div
        class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg lg:left-72">
        <div class="px-4 py-2 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                    <span class="font-semibold text-sm">Current Branch:</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-full px-3 py-1">
                    <span class="font-bold text-sm">
                        {% if selected_branch %}
                        {{ selected_branch.name }}
                        {% elif current_branch %}
                        {{ current_branch.name }}
                        {% elif request.branch %}
                        {{ request.branch.name }}
                        {% else %}
                        No Branch Selected
                        {% endif %}
                    </span>
                </div>
            </div>

            Branch Switcher and Zoom Control for Admin Users
            {% if user.is_authenticated and user.role == 'admin' and user_branches %}
            <div class="flex items-center space-x-3">
                Branch Switcher
                <div class="relative">
                    <button type="button"
                        class="flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-medium hover:bg-white/30 transition-colors duration-200"
                        onclick="toggleTopBranchDropdown()" id="top-branch-button">
                        <span>Switch Branch</span>
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </button>
                    <div id="top-branch-dropdown"
                        class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 hidden z-50">
                        <div class="py-1">
                            {% for branch in user_branches %}
                            <a href="{% url 'users:switch_branch' branch.id %}"
                                class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150">
                                {{ branch.name }}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
    -->
                
                <!-- Fun Admin Zoom Control -->
                {% if user.is_staff %}
                <div class="zoom-control-inline" id="zoomControl">
                    <div class="zoom-label-inline">
                        <i class="fas fa-magic"></i>
                        <span>Zoom</span>
                        <span>⭐</span>
                    </div>
                    <input type="range" 
                           id="zoomSlider" 
                           class="zoom-slider-inline" 
                           min="0.3" 
                           max="1.2" 
                           step="0.05" 
                           value="0.7">
                    <div class="zoom-value-inline" id="zoomValue">70%</div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Branch bar padding removed — branch bar is hidden -->
    <!-- <style>
        body {
            padding-top: 48px;
        }
        @media (max-width: 640px) {
            body { padding-top: 52px; }
        }
        @media (min-width: 1024px) {
            body { padding-top: 48px; }
        }
        .branch-display-bar {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
    </style> -->
    <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">
                                    <span>📈</span>
                                </div>
                                Haven Grazuri
                            </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">
                                        {% if user|has_module_access:'dashboard' %}
                                        <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 %}">
                                                <span>📈</span>
                                                Dashboard
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'clients' %}
                                        <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 %}">
                                                <span>👥</span>
                                                Clients
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'loans' %}
                                        <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 %}">
                                                <span>💵</span>
                                                Loans
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'repayments' %}
                                        <li>
                                            <a href="{% url 'loans:repayments' %}"
                                                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 == 'repayments' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <span>💰</span>
                                                All Repayments
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user.role in 'admin,team_leader,loan_officer' and user|has_module_access:'portfolio' %}
                                        <li>
                                            <a href="{% url 'users:portfolio_dashboard' %}"
                                                class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if 'portfolio' in request.resolver_match.url_name %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <i class="fas fa-briefcase h-6 w-6 shrink-0"></i>
                                                Portfolio
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user.role in 'admin,team_leader,loan_officer,secretary' %}
                                        <li>
                                            <a href="{% url 'expenses:expenses_list' %}"
                                                class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if 'expenses' in request.resolver_match.url_name %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <span>🧾</span>
                                                Expenses
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'reports_statements' %}
                                        <li>
                                            <div
                                                class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wider mb-2">
                                                Reports & Analytics</div>
                                            <ul class="space-y-1">
                                                <li>
                                                    <a href="{% url 'reports:reports_dashboard' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium 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-tachometer-alt h-5 w-5 shrink-0"></i>
                                                        Dashboard
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'reports:loans_due_report' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'loans_due_report' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <i class="fas fa-calendar-day h-5 w-5 shrink-0"></i>
                                                        Loans Due
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'reports:delinquent_loans_report' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'delinquent_loans_report' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <span>⚠️</span>
                                                        Delinquent Loans
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'reports:processing_fees_report' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'processing_fees_report' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <span>🪙</span>
                                                        Processing Fees
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'reports:interest_income_report' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'interest_income_report' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <i class="fas fa-percentage h-5 w-5 shrink-0"></i>
                                                        Interest Income
                                                    </a>
                                                </li>
                                                <!-- Remove the Registration Fees entry here -->
                                                <li>
                                                    <a href="{% url 'reports:customer_requests_list' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'customer_requests_list' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <i class="fas fa-headset h-5 w-5 shrink-0"></i>
                                                        Customer Requests
                                                    </a>
                                                </li>
                                                {% if user.role in 'admin,team_leader' %}
                                                <li>
                                                    <a href="{% url 'expenses:expense_analytics' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium leading-6 focus-ring {% if request.resolver_match.url_name == 'expense_analytics' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <span>🧾</span>
                                                        Expenses Report
                                                    </a>
                                                </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'documents' %}
                                        <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 %}">
                                                <span>📄</span>
                                                Documents
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'customer_documents' %}
                                        <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>
                                        {% endif %}
                                        {% if user|has_module_access:'payment_receipts' %}
                                        <li>
                                            <a href="{% url 'utils:receipts_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 == 'receipts_list' %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <span>🧾</span>
                                                Payment Receipts
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user|has_module_access:'notifications' %}
                                        <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 %}">
                                                <span>🔔</span>
                                                Notifications
                                                <span
                                                    class="notification-badge ml-auto text-white text-xs px-2 py-0.5 rounded-full hidden">0</span>
                                            </a>
                                        </li>
                                        {% endif %}
                                        <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">
                                                <span>🌙</span>
                                                <span>☀️</span>
                                                <span class="dark:hidden">Dark Mode</span>
                                                <span class="hidden dark:block">Light Mode</span>
                                            </button>
                                        </li>
                                        <li>
                                            <div
                                                class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wider mb-2">
                                                Settings</div>
                                            <ul class="space-y-1">
                                                <!-- Branch link hidden — branches not in use
                                                <li>
                                                    <a href="{% url 'users:branch_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 == 'branch_list' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                        <span>🏢</span>
                                                        Branch
                                                    </a>
                                                </li>
                                                -->
                                                <!-- Branch Selector hidden — branches not in use
                                                {% if user.role == 'admin' %}
                                                <li class="mt-2">
                                                    <div class="px-2 py-1">
                                                        <label
                                                            class="block text-xs font-medium text-gray-400 mb-1">Current
                                                            Branch</label>
                                                        <div class="relative">
                                                            <select id="desktop-branch-selector"
                                                                class="w-full bg-gray-800 text-white rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
                                                                {% for branch in user_branches %}
                                                                <option value="{{ branch.id }}" {% if branch.id|stringformat:'s' == request.session.selected_branch_id %}selected{% endif %}>{{ branch.name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                            <div
                                                                class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                                                <i
                                                                    class="fas fa-chevron-down text-gray-400 text-xs"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                {% endif %}
                                                End Branch Selector -->
                                                <li>
                                                    <a href="{% url 'utils:settings' %}"
                                                        class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium 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 %}">
                                                        <span>⚙️</span>
                                                        System Settings
                                                    </a>
                                                </li>
                                                <!-- Removed Registration Fees Settings entry here -->
                                            </ul>
                                        </li>
                                        {% if user.is_superuser or user.role == 'admin' %}
                                        <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>
                                                Staff Management
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'payments:developer_payments' %}"
                                                class="sidebar-item group flex gap-x-3 rounded-lg p-3 text-sm font-semibold leading-6 focus-ring {% if 'developer_payment' in request.resolver_match.url_name %}active bg-secondary text-white{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <span>💻</span>
                                                Developer Payments
                                            </a>
                                        </li>
                                        {% endif %}
                                    </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- Static sidebar for desktop -->
        <div class="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">
                            <span>📈</span>
                        </div>
                        Haven Grazuri
                    </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">
                                {% if user|has_module_access:'dashboard' %}
                                <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 %}">
                                        <span>📈</span>
                                        Dashboard
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'clients' %}
                                <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 %}">
                                        <span>👥</span>
                                        Clients
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'loans' %}
                                <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 %}">
                                        <span>💵</span>
                                        Loans
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'repayments' %}
                                <li>
                                    <a href="{% url 'loans:repayments' %}"
                                        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 == 'repayments' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <span>💰</span>
                                        All Repayments
                                    </a>
                                </li>
                                {% endif %}
                                {% if user.role in 'admin,team_leader,loan_officer' and user|has_module_access:'portfolio' %}
                                <li>
                                    <a href="{% url 'users:portfolio_dashboard' %}"
                                        class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if 'portfolio' in request.resolver_match.url_name %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <i class="fas fa-briefcase h-6 w-6 shrink-0"></i>
                                        Portfolio
                                    </a>
                                </li>
                                {% endif %}
                                {% if user.role in 'admin,team_leader,loan_officer,secretary' %}
                                <li>
                                    <a href="{% url 'expenses:expenses_list' %}"
                                        class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if 'expenses' in request.resolver_match.url_name %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <span>🧾</span>
                                        Expenses
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'reports_statements' %}
                                <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 %}">
                                        <span>📊</span>
                                        Reports & Statements
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'documents' %}
                                <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 %}">
                                        <span>📄</span>
                                        Documents
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'customer_documents' %}
                                <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>
                                {% endif %}
                                {% if user|has_module_access:'payment_receipts' %}
                                <li>
                                    <a href="{% url 'utils:receipts_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 == 'receipts_list' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <span>🧾</span>
                                        Payment Receipts
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'notifications' %}
                                <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 %}">
                                        <span>🔔</span>
                                        Notifications
                                        <span
                                            class="notification-badge ml-auto text-white text-xs px-2 py-0.5 rounded-full hidden">0</span>
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_module_access:'settings' or user|has_module_access:'branch_settings' or user|has_module_access:'system_settings' %}
                                <li>
                                    <div
                                        class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wider mb-2">
                                        Settings</div>
                                    <ul class="space-y-1">
                                        <!-- Branch link hidden — branches not in use
                                        {% if user|has_module_access:'branch_settings' %}
                                        <li>
                                            <a href="{% url 'users:branch_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 == 'branch_list' %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                                <span>🏢</span>
                                                Branch
                                            </a>
                                        </li>
                                        {% endif %}
                                        Branch Selector hidden — branches not in use
                                        {% if user.role == 'admin' %}
                                        <li class="mt-2">
                                            <div class="px-2 py-1">
                                                <label class="block text-xs font-medium text-gray-400 mb-1">Current
                                                    Branch</label>
                                                <div class="relative">
                                                    <select id="desktop-branch-selector"
                                                        class="w-full bg-gray-800 text-white rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
                                                        {% for branch in user_branches %}
                                                        <option value="{{ branch.id }}" {% if branch.id|stringformat:'s' == request.session.selected_branch_id %}selected{% endif %}>{{ branch.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <div
                                                        class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                                        <span>﹀</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        {% endif %}
                                        End Branch Selector -->
                                        {% if user|has_module_access:'system_settings' %}
                                        <li>
                                            <a href="{% url 'utils:settings' %}"
                                                class="sidebar-item group flex gap-x-3 rounded-lg p-2 text-sm font-medium 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 %}">
                                                <span>⚙️</span>
                                                System Settings
                                            </a>
                                        </li>
                                        {% endif %}
                                        <!-- Removed Registration Fees Settings entry here -->
                                    </ul>
                                </li>
                                {% endif %}
                                {% if user.is_superuser or user.role == 'admin' %}
                                <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>
                                        Staff Management
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'payments:developer_payments' %}"
                                        class="sidebar-item group flex gap-x-3 rounded-xl p-3 text-sm font-semibold leading-6 focus-ring {% if 'developer_payment' in request.resolver_match.url_name %}active bg-secondary text-white shadow-lg{% else %}text-text-light hover:bg-secondary/20 hover:text-white{% endif %}">
                                        <span>💻</span>
                                        Developer Payments
                                    </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">
                            <span>🔔</span>
                            <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>
                                {% if user.profile_image or user.selfie %}
                                <img class="h-10 w-10 rounded-full object-cover border-2 border-white shadow-lg"
                                    src="{{ user.get_profile_image_url }}" alt="Profile image">
                                {% else %}
                                <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_initials }}</span>
                                </div>
                                {% endif %}
                                <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>

                            <!-- User dropdown menu -->
                            <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden"
                                role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"
                                id="user-menu-dropdown">
                                <!-- Account Management -->
                                <a href="{% url 'users:profile' %}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                                    role="menuitem" tabindex="-1">Your Profile</a>

                                {% if user.role == 'admin' %}
                                <a href="{% url 'utils:settings' %}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                                    role="menuitem" tabindex="-1">Settings</a>
                                {% endif %}

                                <div class="border-t border-gray-200 dark:border-gray-700"></div>

                                <!-- Authentication -->
                                <form method="POST" action="{% url 'users:logout' %}">
                                    {% csrf_token %}
                                    <button type="submit"
                                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
                                        role="menuitem" tabindex="-1">Sign out</button>
                                </form>
                            </div>
                        </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">
                                    <span>⚠️</span>
                                </div>
                                {% elif message.tags == 'success' %}
                                <div
                                    class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center shadow-lg">
                                    <span>✓</span>
                                </div>
                                {% elif message.tags == 'warning' %}
                                <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center">
                                    <span>⚠️</span>
                                </div>
                                {% else %}
                                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                                    <span>ℹ️</span>
                                </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>
                                        <span>✕</span>
                                    </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');
            const userMenuDropdown = document.getElementById('user-menu-dropdown');

            if (userMenuButton && userMenuDropdown) {
                userMenuButton.addEventListener('click', function (e) {
                    e.preventDefault();
                    userMenuDropdown.classList.toggle('hidden');
                });

                // Close the dropdown when clicking outside
                document.addEventListener('click', function (event) {
                    if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) {
                        userMenuDropdown.classList.add('hidden');
                    }
                });
            }

            // 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/')
                .then(response => {
                    // Check if response is OK and has JSON content type
                    if (!response.ok) {
                        console.warn('[NOTIFICATIONS] Bad response status:', response.status, response.statusText);
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        console.warn('[NOTIFICATIONS] Response is not JSON, content-type:', contentType);
                        throw new Error('Response is not JSON');
                    }
                    
                    return response.json();
                })
                .then(data => {
                    const badges = document.querySelectorAll('.notification-badge');
                    const count = data.count || 0;

                    badges.forEach(badge => {
                        if (count > 0) {
                            badge.textContent = count;
                            badge.classList.remove('hidden');
                        } else {
                            badge.classList.add('hidden');
                        }
                    });
                })
                .catch(error => {
                    // Silently fail - don't show errors for notification badge updates
                    console.debug('[NOTIFICATIONS] Failed to update badge:', error.message);
                    // Hide badges on error
                    document.querySelectorAll('.notification-badge').forEach(badge => {
                        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>
    
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    {% block scripts %}{% endblock %}
</body>

</html>

<!-- Add this in the top navigation bar, before the user profile dropdown -->
{% if user.is_authenticated and user.role == 'admin' %}
<div class="relative ml-3">
    <div>
        <button type="button"
            class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100"
            aria-expanded="false" id="branch-button" onclick="toggleBranchDropdown()">
            <span>{{ request.branch.name|default:"Select Branch" }}</span>
            <svg class="h-5 w-5 flex-none 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>
        </button>
    </div>
    <div id="branch-dropdown"
        class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
        role="menu" aria-orientation="vertical" aria-labelledby="branch-button" tabindex="-1">
        {% for branch in user.accessible_branches.all %}
        <a href="{% url 'users:switch_branch' branch.id %}"
            class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
            role="menuitem" tabindex="-1">{{ branch.name }}</a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Add this JavaScript at the end of the file -->
<script>
    function toggleBranchDropdown() {
        const dropdown = document.getElementById('branch-dropdown');
        dropdown.classList.toggle('hidden');
    }

    function toggleTopBranchDropdown() {
        const dropdown = document.getElementById('top-branch-dropdown');
        dropdown.classList.toggle('hidden');
    }

    // Close the dropdowns when clicking outside
    window.addEventListener('click', function (event) {
        const dropdown = document.getElementById('branch-dropdown');
        const button = document.getElementById('branch-button');
        if (dropdown && button && !dropdown.contains(event.target) && !button.contains(event.target)) {
            dropdown.classList.add('hidden');
        }

        const topDropdown = document.getElementById('top-branch-dropdown');
        const topButton = document.getElementById('top-branch-button');
        if (topDropdown && topButton && !topDropdown.contains(event.target) && !topButton.contains(event.target)) {
            topDropdown.classList.add('hidden');
        }
    });
</script>
<!-- Add this before the closing </body> tag -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Branch selectors hidden — branches not in use
        // const mobileBranchSelector = document.getElementById('branch-selector');
        // if (mobileBranchSelector) {
        //     mobileBranchSelector.addEventListener('change', function () {
        //         const branchId = this.value;
        //         window.location.href = `/branches/${branchId}/switch/`;
        //     });
        // }
        // const desktopBranchSelector = document.getElementById('desktop-branch-selector');
        // if (desktopBranchSelector) {
        //     desktopBranchSelector.addEventListener('change', function () {
        //         const branchId = this.value;
        //         window.location.href = `/branches/${branchId}/switch/`;
        //     });
        // }

        // Branch bar padding removed — branch bar is hidden
        // if (document.querySelector('.fixed.top-0.left-0.right-0.z-50')) {
        //     document.body.classList.add('pt-10');
        // }
    });
</script>
<!-- Add this right after the user menu button -->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden"
    role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" id="user-menu-dropdown">
    <!-- Account Management -->
    <a href="{% url 'users:profile' %}"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
        role="menuitem" tabindex="-1">Your Profile</a>

    {% if user.role == 'admin' %}
    <a href="{% url 'utils:settings' %}"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
        role="menuitem" tabindex="-1">Settings</a>
    {% endif %}

    <div class="border-t border-gray-200 dark:border-gray-700"></div>

    <!-- Authentication -->
    <form method="POST" action="{% url 'users:logout' %}">
        {% csrf_token %}
        <button type="submit"
            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
            role="menuitem" tabindex="-1">Sign out</button>
    </form>
</div>

{% block extra_js %}{% endblock %}