<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Admin Panel - Group Savings Management{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #1f2937;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 2px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
    </style>
</head>
<body class="h-full">
    <div class="min-h-full">
        <!-- Mobile menu overlay -->
        <div id="mobile-overlay" class="relative z-50 lg:hidden hidden" role="dialog" aria-modal="true">
            <div class="fixed inset-0 bg-gray-900/80"></div>
            <div class="fixed inset-0 flex">
                <div class="relative mr-16 flex w-full max-w-xs flex-1">
                    <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
                        <button type="button" class="-m-2.5 p-2.5" onclick="toggleMobileSidebar()">
                            <span class="sr-only">Close sidebar</span>
                            <i class="fas fa-times h-6 w-6 text-white" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
                        <!-- Mobile sidebar content (same as desktop) -->
                        <div class="flex h-16 shrink-0 items-center">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-piggy-bank text-white text-lg"></i>
                                </div>
                                <div>
                                    <h1 class="text-white text-lg font-bold">Group Savings</h1>
                                    <p class="text-gray-400 text-xs">Admin Panel</p>
                                </div>
                            </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-1">
                                        <!-- Dashboard -->
                                        <li>
                                            <a href="{{ url_for('admin_dashboard') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_dashboard' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-tachometer-alt h-6 w-6 shrink-0"></i>
                                                Dashboard
                                            </a>
                                        </li>
                                        <!-- All Members -->
                                        <li>
                                            <a href="{{ url_for('admin_members') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint in ['admin_members', 'admin_edit_member'] %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-users h-6 w-6 shrink-0"></i>
                                                All Members
                                            </a>
                                        </li>
                                        <!-- Add Member -->
                                        <li>
                                            <a href="{{ url_for('admin_add_member') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_add_member' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-user-plus h-6 w-6 shrink-0"></i>
                                                Add Member
                                            </a>
                                        </li>
                                        <!-- All Contributions -->
                                        <li>
                                            <a href="{{ url_for('admin_contributions') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_contributions' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-dollar-sign h-6 w-6 shrink-0"></i>
                                                All Contributions
                                            </a>
                                        </li>
                                        <!-- Add Contribution -->
                                        <li>
                                            <a href="{{ url_for('admin_add_contribution') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_add_contribution' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-plus-circle h-6 w-6 shrink-0"></i>
                                                Add Contribution
                                            </a>
                                        </li>
                                        <!-- Member Balances -->
                                        <li>
                                            <a href="{{ url_for('admin_member_balances') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_member_balances' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-wallet h-6 w-6 shrink-0"></i>
                                                Member Balances
                                            </a>
                                        </li>
                                        <!-- All Events -->
                                        <li>
                                            <a href="{{ url_for('admin_events') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_events' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-calendar-alt h-6 w-6 shrink-0"></i>
                                                All Events
                                            </a>
                                        </li>
                                        <!-- Create Event -->
                                        <li>
                                            <a href="{{ url_for('admin_create_event') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_create_event' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-calendar-plus h-6 w-6 shrink-0"></i>
                                                Create Event
                                            </a>
                                        </li>
                                        <!-- Bulk Import -->
                                        <li>
                                            <a href="{{ url_for('admin_bulk_import') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_bulk_import' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-upload h-6 w-6 shrink-0"></i>
                                                Bulk Import
                                            </a>
                                        </li>
                                        <!-- Reports -->
                                        <li>
                                            <a href="{{ url_for('admin_reports') }}" 
                                               class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold 
                                                      {% if request.endpoint == 'admin_reports' %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800{% endif %}"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-chart-bar h-6 w-6 shrink-0"></i>
                                                Reports
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <!-- User Profile Section -->
                                <li class="mt-auto">
                                    <div class="bg-gray-800 rounded-lg p-3">
                                        <div class="flex items-center space-x-3">
                                            <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                                <span class="text-white text-sm font-semibold">{{ current_user.full_name[0] if current_user.full_name else 'A' }}</span>
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-medium text-white truncate">{{ current_user.full_name }}</p>
                                                <p class="text-xs text-gray-400 truncate">Administrator</p>
                                            </div>
                                        </div>
                                        <div class="mt-3 pt-3 border-t border-gray-700">
                                            <a href="{{ url_for('logout') }}" 
                                               class="group flex items-center space-x-2 text-sm text-gray-400 hover:text-white"
                                               onclick="toggleMobileSidebar()">
                                                <i class="fas fa-sign-out-alt h-4 w-4"></i>
                                                <span>Sign out</span>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- Desktop sidebar -->
        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-80 lg:flex-col">
            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gradient-to-b from-slate-900 to-slate-800 px-6 pb-4 shadow-xl">
                <!-- Logo/Brand -->
                <div class="flex h-16 shrink-0 items-center">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg">
                            <i class="fas fa-piggy-bank text-white text-lg"></i>
                        </div>
                        <div>
                            <h1 class="text-white text-xl font-bold tracking-tight">Savly</h1>
                            <p class="text-blue-200 text-xs font-medium">Group Savings</p>
                        </div>
                    </div>
                </div>

                <!-- Navigation -->
                <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">
                                <!-- Dashboard -->
                                <li>
                                    <a href="{{ url_for('admin_dashboard') }}" 
                                       class="group flex gap-x-3 rounded-xl p-3 text-sm leading-6 font-medium transition-all duration-200
                                              {% if request.endpoint == 'admin_dashboard' %}bg-gradient-to-r from-emerald-500 to-blue-500 text-white shadow-lg shadow-emerald-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700 hover:shadow-md{% endif %}">
                                        <i class="fas fa-tachometer-alt h-5 w-5 shrink-0"></i>
                                        Dashboard
                                    </a>
                                </li>

                                <!-- Members Section -->
                                <li class="pt-2">
                                    <div class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wide mb-2">Members</div>
                                    <ul class="space-y-1">
                                        <li>
                                            <a href="{{ url_for('admin_members') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint in ['admin_members', 'admin_edit_member'] %}bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-users h-4 w-4 shrink-0"></i>
                                                All Members
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_add_member') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_add_member' %}bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-user-plus h-4 w-4 shrink-0"></i>
                                                Add Member
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_member_balances') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_member_balances' %}bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-wallet h-4 w-4 shrink-0"></i>
                                                Member Balances
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <!-- Contributions Section -->
                                <li class="pt-2">
                                    <div class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wide mb-2">Contributions</div>
                                    <ul class="space-y-1">
                                        <li>
                                            <a href="{{ url_for('admin_contributions') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_contributions' %}bg-gradient-to-r from-green-500 to-teal-500 text-white shadow-lg shadow-green-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-dollar-sign h-4 w-4 shrink-0"></i>
                                                All Contributions
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_add_contribution') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_add_contribution' %}bg-gradient-to-r from-green-500 to-teal-500 text-white shadow-lg shadow-green-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-plus-circle h-4 w-4 shrink-0"></i>
                                                Add Contribution
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_bulk_import') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_bulk_import' %}bg-gradient-to-r from-green-500 to-teal-500 text-white shadow-lg shadow-green-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-upload h-4 w-4 shrink-0"></i>
                                                Bulk Import
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <!-- Events Section -->
                                <li class="pt-2">
                                    <div class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wide mb-2">Events</div>
                                    <ul class="space-y-1">
                                        <li>
                                            <a href="{{ url_for('admin_events') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_events' %}bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-calendar-alt h-4 w-4 shrink-0"></i>
                                                All Events
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_create_event') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_create_event' %}bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-calendar-plus h-4 w-4 shrink-0"></i>
                                                Create Event
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <!-- Analytics & Reports Section -->
                                <li class="pt-2">
                                    <div class="text-xs font-semibold leading-6 text-gray-400 uppercase tracking-wide mb-2">Analytics & Reports</div>
                                    <ul class="space-y-1">
                                        <li>
                                            <a href="{{ url_for('admin_analytics_dashboard') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_analytics_dashboard' %}bg-gradient-to-r from-indigo-500 to-purple-500 text-white shadow-lg shadow-indigo-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-chart-line h-4 w-4 shrink-0"></i>
                                                Advanced Analytics
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_notification_center') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_notification_center' %}bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg shadow-red-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-bell h-4 w-4 shrink-0"></i>
                                                Notifications
                                                <span class="ml-auto inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-red-100 bg-red-600 rounded-full animate-pulse">
                                                    !
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url_for('admin_reports') }}" 
                                               class="group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-medium transition-all duration-200
                                                      {% if request.endpoint == 'admin_reports' %}bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/25{% else %}text-gray-300 hover:text-white hover:bg-slate-700{% endif %}">
                                                <i class="fas fa-chart-bar h-4 w-4 shrink-0"></i>
                                                Standard Reports
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <!-- Admin Tools Section -->
                        <li>
                            <div class="text-xs font-semibold leading-6 text-gray-400">Admin Tools</div>
                            <ul role="list" class="-mx-2 mt-2 space-y-1">
                                <li>
                                    <a href="/init-data" 
                                       class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-400 hover:text-white hover:bg-gray-800">
                                        <i class="fas fa-database h-6 w-6 shrink-0"></i>
                                        Initialize Data
                                    </a>
                                </li>
                                <li>
                                    <a href="/bulk-add-members" 
                                       class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-400 hover:text-white hover:bg-gray-800">
                                        <i class="fas fa-users-cog h-6 w-6 shrink-0"></i>
                                        Bulk Add Members
                                    </a>
                                </li>
                                <li>
                                    <a href="/assign-custom-ids" 
                                       class="group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-400 hover:text-white hover:bg-gray-800">
                                        <i class="fas fa-id-badge h-6 w-6 shrink-0"></i>
                                        Assign Custom IDs
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <!-- User Profile Section -->
                        <li class="mt-auto">
                            <div class="bg-gray-800 rounded-lg p-3">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                        <span class="text-white text-sm font-semibold">{{ current_user.full_name[0] if current_user.full_name else 'A' }}</span>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-white truncate">{{ current_user.full_name }}</p>
                                        <p class="text-xs text-gray-400 truncate">
                                            {% if current_user.custom_id %}{{ current_user.custom_id }} • {% endif %}Administrator
                                        </p>
                                    </div>
                                </div>
                                <div class="mt-3 pt-3 border-t border-gray-700">
                                    <a href="{{ url_for('logout') }}" 
                                       class="group flex items-center space-x-2 text-sm text-gray-400 hover:text-white">
                                        <i class="fas fa-sign-out-alt h-4 w-4"></i>
                                        <span>Sign out</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="lg:pl-80">
            <!-- Enhanced Top Navigation Bar -->
            <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white/90 backdrop-blur-lg px-4 shadow-lg sm:gap-x-6 sm:px-6 lg:px-8">
                <!-- Mobile menu button -->
                <button type="button" class="-m-2.5 p-2.5 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200 lg:hidden" onclick="toggleMobileSidebar()">
                    <span class="sr-only">Open sidebar</span>
                    <i class="fas fa-bars h-5 w-5" aria-hidden="true"></i>
                </button>
                
                <!-- Enhanced Logo (visible on mobile) -->
                <div class="flex items-center space-x-3 lg:hidden">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 via-purple-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-md">
                        <i class="fas fa-piggy-bank text-white text-sm"></i>
                    </div>
                    <div>
                        <h1 class="text-gray-900 text-lg font-bold tracking-tight">Savly</h1>
                        <p class="text-xs text-gray-500 font-medium">Group Savings</p>
                    </div>
                </div>
                
                <!-- Separator -->
                <div class="h-6 w-px bg-gray-300 lg:hidden" aria-hidden="true"></div>
                
                <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
                    <!-- Enhanced Search Bar -->
                    <div class="relative flex flex-1 max-w-xl">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                            <i class="fas fa-search h-4 w-4 text-gray-400"></i>
                        </div>
                        <input type="text" 
                               class="block w-full rounded-xl border-0 py-2.5 pl-11 pr-20 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 focus:bg-white bg-gray-50 sm:text-sm sm:leading-6 transition-all duration-200"
                               placeholder="Search members, contributions, events..." 
                               autocomplete="off">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-4">
                            <kbd class="hidden sm:inline-flex items-center px-2 py-1 text-xs font-sans font-medium text-gray-500 bg-gray-200 rounded-md border border-gray-300 shadow-sm">
                                ⌘K
                            </kbd>
                        </div>
                    </div>
                    
                    <!-- Enhanced Right side items -->
                    <div class="flex items-center gap-x-1">
                        <!-- Quick Actions -->
                        <div class="hidden md:flex items-center gap-x-1">
                            <a href="{{ url_for('admin_add_member') }}" 
                               class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm">
                                <i class="fas fa-user-plus h-4 w-4 mr-2 text-blue-500"></i>
                                Add Member
                            </a>
                            <a href="{{ url_for('admin_add_contribution') }}" 
                               class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 shadow-md hover:shadow-lg">
                                <i class="fas fa-plus h-4 w-4 mr-2"></i>
                                Add Payment
                            </a>
                        </div>
                        
                        <!-- Analytics quick link -->
                        <a href="{{ url_for('admin_analytics_dashboard') }}" 
                           class="p-2.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200 group">
                            <span class="sr-only">Analytics</span>
                            <i class="fas fa-chart-line h-4 w-4 group-hover:scale-110 transition-transform duration-200"></i>
                        </a>
                        
                        <!-- Enhanced Notifications -->
                        <a href="{{ url_for('admin_notification_center') }}" 
                           class="relative p-2.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-200 group">
                            <span class="sr-only">View notifications</span>
                            <i class="fas fa-bell h-4 w-4 group-hover:animate-pulse"></i>
                            {% if notification_count is defined and notification_count > 0 %}
                            <span class="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center shadow-md animate-pulse">
                                <span class="text-xs font-bold text-white">{{ notification_count if notification_count < 10 else '9+' }}</span>
                            </span>
                            {% endif %}
                        </a>
                        
                        <!-- Enhanced Profile dropdown -->
                        <div class="relative ml-3">
                            <button type="button" 
                                    data-dropdown-toggle="profile-dropdown" 
                                    class="flex items-center text-sm rounded-xl hover:bg-gray-50 p-2 transition-all duration-200 border border-gray-200 hover:border-gray-300 shadow-sm hover:shadow-md">
                                <!-- Profile Avatar -->
                                <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 via-purple-500 to-indigo-600 flex items-center justify-center shadow-md">
                                    <span class="text-white text-sm font-bold">{{ current_user.full_name[0] if current_user.full_name else 'A' }}</span>
                                </div>
                                <!-- User Info -->
                                <span class="ml-3 hidden lg:block text-left">
                                    <span class="block text-sm font-semibold text-gray-900">{{ current_user.full_name or 'Admin User' }}</span>
                                    <span class="block text-xs text-gray-500 font-medium">{{ 'System Administrator' if current_user.is_superadmin else 'Group Administrator' }}</span>
                                </span>
                                <!-- Dropdown Icon -->
                                <i class="ml-2 h-4 w-4 text-gray-400 fas fa-chevron-down hidden lg:block transition-transform duration-200" id="dropdown-arrow"></i>
                            </button>
                            
                            <!-- Enhanced Dropdown menu -->
                            <div class="absolute right-0 z-50 mt-3 w-80 origin-top-right rounded-xl bg-white shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none hidden transform opacity-0 scale-95 transition-all duration-200" id="profile-dropdown">
                                <!-- User Info Header -->
                                <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-t-xl border-b border-gray-100">
                                    <div class="flex items-center space-x-3">
                                        <div class="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-500 via-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
                                            <span class="text-white text-lg font-bold">{{ current_user.full_name[0] if current_user.full_name else 'A' }}</span>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-semibold text-gray-900 truncate">{{ current_user.full_name or 'Admin User' }}</p>
                                            <p class="text-xs text-gray-600 truncate">{{ current_user.email or 'admin@amadersomity.com' }}</p>
                                            <div class="flex items-center mt-1">
                                                {% if current_user.custom_id %}
                                                <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
                                                    {{ current_user.custom_id }}
                                                </span>
                                                {% endif %}
                                                <span class="ml-2 inline-flex items-center px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                                    {{ 'Super Admin' if current_user.is_superadmin else 'Group Admin' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Quick Stats -->
                                <div class="px-6 py-3 bg-gray-50 border-b border-gray-100">
                                    <div class="grid grid-cols-2 gap-4 text-center">
                                        <div>
                                            <p class="text-lg font-bold text-gray-900">{{ current_user.group.name if current_user.group else 'No Group' }}</p>
                                            <p class="text-xs text-gray-500">Current Group</p>
                                        </div>
                                        <div>
                                            <p class="text-lg font-bold text-blue-600">{{ notification_count }}</p>
                                            <p class="text-xs text-gray-500">Active Members</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Menu Items -->
                                <div class="py-2">
                                    <a href="{{ url_for('admin_analytics_dashboard') }}" 
                                       class="flex items-center px-6 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200 group">
                                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-100 text-blue-600 mr-3 group-hover:bg-blue-200">
                                            <i class="fas fa-chart-line h-4 w-4"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium">Analytics Dashboard</p>
                                            <p class="text-xs text-gray-500">View detailed reports</p>
                                        </div>
                                    </a>
                                    
                                    <a href="{{ url_for('admin_notification_center') }}" 
                                       class="flex items-center px-6 py-3 text-sm text-gray-700 hover:bg-red-50 hover:text-red-700 transition-colors duration-200 group">
                                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 text-red-600 mr-3 group-hover:bg-red-200">
                                            <i class="fas fa-bell h-4 w-4"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium">Notifications</p>
                                            <p class="text-xs text-gray-500">View alerts and updates</p>
                                        </div>
                                    </a>
                                    
                                    {% if current_user.is_superadmin %}
                                    <a href="{{ url_for('superadmin_dashboard') }}" 
                                       class="flex items-center px-6 py-3 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition-colors duration-200 group">
                                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-purple-100 text-purple-600 mr-3 group-hover:bg-purple-200">
                                            <i class="fas fa-crown h-4 w-4"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium">Super Admin Panel</p>
                                            <p class="text-xs text-gray-500">System management</p>
                                        </div>
                                    </a>
                                    {% endif %}
                                    
                                    <div class="border-t border-gray-100 my-2"></div>
                                    
                                    <a href="{{ url_for('admin_profile_settings') }}" 
                                       class="flex items-center px-6 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-200 group">
                                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 text-gray-600 mr-3 group-hover:bg-gray-200">
                                            <i class="fas fa-user-cog h-4 w-4"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium">Profile Settings</p>
                                            <p class="text-xs text-gray-500">Update your information</p>
                                        </div>
                                    </a>
                                </div>
                                
                                <!-- Logout -->
                                <div class="border-t border-gray-100">
                                    <a href="{{ url_for('logout') }}" 
                                       class="flex items-center px-6 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200 group rounded-b-xl">
                                        <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 text-red-600 mr-3 group-hover:bg-red-200">
                                            <i class="fas fa-sign-out-alt h-4 w-4"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium">Sign out</p>
                                            <p class="text-xs text-red-500">End your session</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page content -->
            <main class="py-6">
                <div class="px-4 sm:px-6 lg:px-8">
                    <!-- Flash messages -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            <div class="mb-6">
                                {% for category, message in messages %}
                                    <div class="rounded-md p-4 mb-4 
                                                {% if category == 'error' %}bg-red-50 border border-red-200{% endif %}
                                                {% if category == 'success' %}bg-green-50 border border-green-200{% endif %}
                                                {% if category == 'warning' %}bg-yellow-50 border border-yellow-200{% endif %}
                                                {% if category == 'info' %}bg-blue-50 border border-blue-200{% endif %}">
                                        <div class="flex">
                                            <div class="flex-shrink-0">
                                                {% if category == 'error' %}
                                                    <i class="fas fa-exclamation-circle h-5 w-5 text-red-400"></i>
                                                {% elif category == 'success' %}
                                                    <i class="fas fa-check-circle h-5 w-5 text-green-400"></i>
                                                {% elif category == 'warning' %}
                                                    <i class="fas fa-exclamation-triangle h-5 w-5 text-yellow-400"></i>
                                                {% elif category == 'info' %}
                                                    <i class="fas fa-info-circle h-5 w-5 text-blue-400"></i>
                                                {% endif %}
                                            </div>
                                            <div class="ml-3">
                                                <p class="text-sm font-medium 
                                                          {% if category == 'error' %}text-red-800{% endif %}
                                                          {% if category == 'success' %}text-green-800{% endif %}
                                                          {% if category == 'warning' %}text-yellow-800{% endif %}
                                                          {% if category == 'info' %}text-blue-800{% endif %}">
                                                    {{ message }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endwith %}

                    <!-- Page content -->
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // Enhanced Profile dropdown functionality
        document.addEventListener('DOMContentLoaded', function() {
            const profileButton = document.querySelector('[data-dropdown-toggle="profile-dropdown"]');
            const dropdown = document.getElementById('profile-dropdown');
            const dropdownArrow = document.getElementById('dropdown-arrow');
            
            if (profileButton && dropdown) {
                profileButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    
                    const isHidden = dropdown.classList.contains('hidden');
                    
                    if (isHidden) {
                        // Show dropdown with animation
                        dropdown.classList.remove('hidden');
                        setTimeout(() => {
                            dropdown.classList.remove('opacity-0', 'scale-95');
                            dropdown.classList.add('opacity-100', 'scale-100');
                        }, 10);
                        
                        // Rotate arrow
                        if (dropdownArrow) {
                            dropdownArrow.classList.add('rotate-180');
                        }
                    } else {
                        // Hide dropdown with animation
                        dropdown.classList.remove('opacity-100', 'scale-100');
                        dropdown.classList.add('opacity-0', 'scale-95');
                        
                        setTimeout(() => {
                            dropdown.classList.add('hidden');
                        }, 200);
                        
                        // Reset arrow
                        if (dropdownArrow) {
                            dropdownArrow.classList.remove('rotate-180');
                        }
                    }
                });
                
                // Close dropdown when clicking outside
                document.addEventListener('click', function(e) {
                    if (!profileButton.contains(e.target) && !dropdown.contains(e.target)) {
                        dropdown.classList.remove('opacity-100', 'scale-100');
                        dropdown.classList.add('opacity-0', 'scale-95');
                        
                        setTimeout(() => {
                            dropdown.classList.add('hidden');
                        }, 200);
                        
                        // Reset arrow
                        if (dropdownArrow) {
                            dropdownArrow.classList.remove('rotate-180');
                        }
                    }
                });
            }
        });
        
        // Profile settings functionality is now implemented as a full page
        
        // Update current time
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('en-US', {
                hour12: true,
                hour: 'numeric',
                minute: '2-digit'
            });
            const dateString = now.toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric'
            });
            const timeElement = document.getElementById('current-time');
            if (timeElement) {
                timeElement.textContent = `${dateString}, ${timeString}`;
            }
        }
        
        // Update time immediately and then every minute
        updateTime();
        setInterval(updateTime, 60000);

        // Mobile sidebar toggle
        function toggleMobileSidebar() {
            const overlay = document.getElementById('mobile-overlay');
            if (overlay.classList.contains('hidden')) {
                overlay.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
            } else {
                overlay.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            }
        }
        
        // Close mobile sidebar when clicking outside
        document.addEventListener('DOMContentLoaded', function() {
            const overlay = document.getElementById('mobile-overlay');
            if (overlay) {
                overlay.addEventListener('click', function(e) {
                    if (e.target === overlay) {
                        toggleMobileSidebar();
                    }
                });
            }
        });
        
        // Enhanced search functionality with keyboard shortcuts
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('input[placeholder*="Search"]');
            if (searchInput) {
                // Keyboard shortcut (Cmd+K or Ctrl+K)
                document.addEventListener('keydown', function(e) {
                    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                        e.preventDefault();
                        searchInput.focus();
                    }
                });
                
                // Enhanced focus effects
                searchInput.addEventListener('focus', function() {
                    this.classList.add('ring-2', 'ring-blue-500', 'bg-white');
                    this.classList.remove('bg-gray-50');
                });
                
                searchInput.addEventListener('blur', function() {
                    this.classList.remove('ring-2', 'ring-blue-500', 'bg-white');
                    this.classList.add('bg-gray-50');
                });
            }
        });
    </script>
    
    <style>
        /* Enhanced animations and transitions */
        .group:hover .group-hover\\:scale-110 {
            transform: scale(1.1);
        }
        
        .group:hover .group-hover\\:animate-pulse {
            animation: pulse 1s infinite;
        }
        
        /* Search bar enhanced focus effect */
        input[type="text"]:focus {
            transform: translateY(-1px);
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15), 0 10px 10px -5px rgba(59, 130, 246, 0.1);
        }
        
        /* Notification badge enhancements */
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: .8;
                transform: scale(1.05);
            }
        }
        
        /* Backdrop blur enhancement */
        .backdrop-blur-lg {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        
        /* Enhanced dropdown animations */
        .rotate-180 {
            transform: rotate(180deg);
        }
        
        /* Smooth transform transitions */
        #dropdown-arrow {
            transition: transform 0.2s ease-in-out;
        }
        
        /* Profile dropdown enhanced styling */
        #profile-dropdown {
            transform-origin: top right;
        }
        
        /* Enhanced hover effects for profile items */
        .group:hover .group-hover\\:bg-blue-200 {
            background-color: rgb(191 219 254);
        }
        
        .group:hover .group-hover\\:bg-red-200 {
            background-color: rgb(254 202 202);
        }
        
        .group:hover .group-hover\\:bg-purple-200 {
            background-color: rgb(233 213 255);
        }
        
        .group:hover .group-hover\\:bg-gray-200 {
            background-color: rgb(229 231 235);
        }
    </style>
</body>
</html>