<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title') - Zakat Warga</title>
    {{-- DNS prefetch --}}
    <link rel="dns-prefetch" href="//cdn.tailwindcss.com">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    {{-- NProgress CSS (local) --}}
    <link rel="stylesheet" href="{{ asset('css/nprogress.css') }}">
    {{-- Tailwind CDN (diperlukan untuk utility classes) --}}
    <script src="https://cdn.tailwindcss.com"></script>
    {{-- Google Fonts & Bootstrap Icons: non-blocking --}}
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"></noscript>
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"></noscript>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#1a6b3c',
                        surface: '#f5f6fa',
                        panelGreen: '#356E52',
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #f8f9fc; }

        /* ===== SIDEBAR OVERLAY MOBILE ===== */
        #superSidebarOverlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.45); z-index: 49; opacity: 0;
            transition: opacity .25s ease;
        }
        #superSidebarOverlay.active { display: block; opacity: 1; }
        /* Custom scrollbar for sidebar */
        .sidebar-scroll::-webkit-scrollbar { width: 4px; }
        .sidebar-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

        /* ===== PAGE CONTENT & COMPONENTS (For Admin/Amil Views) ===== */
        :root {
            --green-primary: #1a6b3c;
            --green-light:   #e8f5ee;
            --green-mid:     #2e8b57;
            --green-hover:   #f0faf4;
            --text-dark:     #111827;
            --text-muted:    #6b7280;
            --border-color:  #e5e7eb;
            --bg-page:       #f9fafb;
            --white:         #ffffff;
            --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
            --shadow-md:     0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
            --radius:        12px;
        }
        .page-content { padding: 28px; flex: 1; }
        .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
        .page-header-left h1 { font-size: 26px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.5px; margin-bottom: 4px; }
        .page-header-left p { font-size: 13.5px; color: var(--text-muted); margin: 0; }
        .card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
        .stat-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
        .stat-card-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
        .stat-card-value { font-size: 28px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.5px; }
        .stat-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .stat-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
        .btn-primary-green { display: inline-flex; align-items: center; gap: 6px; background: var(--green-primary); color: white; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; }
        .btn-primary-green:hover { background: var(--green-mid); color: white; }
        .btn-outline { display: inline-flex; align-items: center; gap: 6px; background: white; color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s; }
        .btn-outline:hover { background: var(--bg-page); color: var(--text-dark); }
        .btn-outline-green { display: inline-flex; align-items: center; gap: 6px; background: white; color: var(--green-primary); border: 1px solid var(--green-primary); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; }
        .btn-outline-green:hover { background: var(--green-light); }
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--border-color); background: #fafafa; text-align: left; }
        .data-table thead th:first-child { border-radius: 0; }
        .data-table tbody td { padding: 14px 16px; font-size: 13.5px; color: var(--text-dark); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
        .data-table tbody tr:last-child td { border-bottom: none; }
        .data-table tbody tr:hover { background: var(--bg-page); }
        .avatar-initial { width: 34px; height: 34px; border-radius: 50%; background: var(--green-light); color: var(--green-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
        .avatar-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
        .badge-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .badge-fakir { background: #fee2e2; color: #dc2626; }
        .badge-miskin { background: #fef3c7; color: #d97706; }
        .badge-gharim { background: #dbeafe; color: #2563eb; }
        .badge-sabil { background: #d1fae5; color: #059669; }
        .badge-amil-cat { background: #ede9fe; color: #7c3aed; }
        .badge-green { background: var(--green-light); color: var(--green-primary); }
        .badge-orange { background: #fff7ed; color: #ea580c; }
        .badge-gray { background: #f3f4f6; color: #374151; }
        .badge-blue { background: #eff6ff; color: #2563eb; }
        .toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
        .toggle-switch input { display: none; }
        .toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; cursor: pointer; transition: .2s; }
        .toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
        .toggle-switch input:checked + .toggle-slider { background: var(--green-primary); }
        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
        .pagination-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-muted); }
        .pagination-btns { display: flex; gap: 6px; }
        .page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color); background: white; color: var(--text-dark); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; }
        .page-btn:hover { background: var(--bg-page); }
        .page-btn.active { background: var(--green-primary); color: white; border-color: var(--green-primary); }
        .page-btn:disabled { opacity: 0.4; cursor: default; }
        .form-ctrl { width: 100%; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13.5px; font-family: 'Inter', sans-serif; color: var(--text-dark); background: white; transition: border-color .15s; appearance: none; }
        .form-ctrl:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(26,107,60,.1); }
        .form-label-styled { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
        .banner-info { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; position: relative; }
        .banner-info-icon { color: var(--green-primary); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
        .banner-info-title { font-size: 14px; font-weight: 700; color: var(--green-primary); margin-bottom: 3px; }
        .banner-info-text { font-size: 13px; color: #166534; line-height: 1.5; }
        .banner-close { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
        .banner-close:hover { color: var(--text-dark); }
        .tab-list { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
        .tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
        .tab-btn.active { color: var(--green-primary); font-weight: 600; border-bottom-color: var(--green-primary); }
        .search-wrap { position: relative; }
        .search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; }
        .search-input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13.5px; font-family: 'Inter', sans-serif; color: var(--text-dark); background: white; transition: border-color .15s; }
        .search-input:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(26,107,60,.1); }
        .filter-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 14px; }
        .filter-grid-2 { grid-template-columns: 1fr 1fr; }
        .select-wrap { position: relative; }
        .select-wrap::after { content: '\F282'; font-family: 'Bootstrap-icons'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 12px; }
        .select-wrap select { padding-right: 32px; }
        .action-dots { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-color); background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text-muted); transition: all .15s; position: relative; }
        .action-dots:hover { background: var(--bg-page); color: var(--text-dark); }
        .action-icon-btn { width: 30px; height: 30px; border-radius: 6px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; transition: all .15s; text-decoration: none; }
        .action-icon-btn.edit { color: var(--green-primary); }
        .action-icon-btn.edit:hover { background: var(--green-light); }
        .action-icon-btn.del { color: #ef4444; }
        .action-icon-btn.del:hover { background: #fee2e2; }
        .dropdown-menu-custom { position: absolute; right: 0; top: 36px; background: white; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-md); min-width: 160px; z-index: 200; display: none; overflow: hidden; }
        .dropdown-menu-custom.show { display: block; }
        .dropdown-menu-custom a, .dropdown-menu-custom button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: var(--text-dark); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; transition: background .1s; }
        .dropdown-menu-custom a:hover, .dropdown-menu-custom button:hover { background: var(--bg-page); }
        .dropdown-menu-custom .del-item { color: #ef4444; }
        .dropdown-menu-custom .del-item:hover { background: #fee2e2; }
        .alert-success-custom { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: #166534; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }

        /* ===== TABLE RESPONSIVE ===== */
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .data-table { min-width: 600px; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .filter-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 768px) {
            /* Superadmin sidebar (Tailwind aside) — sembunyikan di mobile */
            aside.lg\:flex { display: none !important; }
            aside.lg\:flex.mobile-open { display: flex !important; position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; }
            .page-content { padding: 16px !important; }
            .filter-grid { grid-template-columns: 1fr !important; }
            .filter-grid-2 { grid-template-columns: 1fr !important; }
        }

        /* ===== PAGE TRANSITION (Superadmin) ===== */
        .superadmin-content {
            transition: opacity 0.15s ease;
        }

        /* ===== NPROGRESS CUSTOM ===== */
        #nprogress .bar {
            background: var(--green-primary) !important;
            height: 3px !important;
        }
        #nprogress .peg {
            box-shadow: 0 0 10px var(--green-primary), 0 0 5px var(--green-primary) !important;
        }
    </style>
    @stack('styles')
</head>
<body class="text-gray-800">

    <!-- Sidebar Overlay Mobile -->
    <div id="superSidebarOverlay" onclick="closeSuperSidebar()"></div>

    <div class="flex h-screen w-full bg-[#f8f9fc]">
        
        <!-- Sidebar -->
        <aside id="superSidebar" class="w-[260px] bg-white border-r border-gray-200 flex flex-col flex-shrink-0">

            <!-- Sidebar Navigation -->
            <div class="flex-1 overflow-y-auto sidebar-scroll py-6 px-4">
                
                <!-- Section 1 -->
                <div class="mb-6">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3 px-3">Manajemen Platform</p>
                    <nav class="space-y-1">
                        <a href="{{ url('/superadmin/dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('superadmin/dashboard') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-grid-1x2 {{ request()->is('superadmin/dashboard') ? 'text-primary' : 'text-gray-400' }} text-lg"></i>
                            <span class="text-[13px]">Dashboard</span>
                        </a>
                        <a href="{{ url('/superadmin/kelola-pengajuan') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('superadmin/kelola-pengajuan') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-card-checklist {{ request()->is('superadmin/kelola-pengajuan') ? 'text-primary' : 'text-gray-400' }} text-lg"></i>
                            <span class="text-[13px]">Kelola Pengajuan</span>
                        </a>
                        <a href="{{ url('/superadmin/kelola-masjid') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('superadmin/kelola-masjid') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-building {{ request()->is('superadmin/kelola-masjid') ? 'text-primary' : 'text-gray-400' }} text-lg"></i>
                            <span class="text-[13px]">Kelola Masjid</span>
                        </a>
                    </nav>
                </div>

                <!-- Section 2 -->
                <div>
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3 px-3">Akses Masjid</p>
                    <nav class="space-y-1">
                        <!-- Akses Masjid Links -->
                        <a href="{{ url('/admin/user') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('admin/user*') || request()->is('admin/wilayah*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-people {{ request()->is('admin/user*') || request()->is('admin/wilayah*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Data User & Wilayah</span>
                        </a>
                        <a href="{{ url('/amil/penerimaan') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('amil/penerimaan*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-box-arrow-in-down {{ request()->is('amil/penerimaan*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Penerimaan Zakat</span>
                        </a>
                        <a href="{{ url('/amil/distribusi') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('amil/distribusi*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-truck {{ request()->is('amil/distribusi*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Distribusi Zakat</span>
                        </a>
                        <a href="{{ url('/rt/data-warga') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('rt/data-warga*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-people-fill {{ request()->is('rt/data-warga*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Data KK & Mustahik</span>
                        </a>
                        <a href="{{ url('/amil/verifikasi') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('amil/verifikasi*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-patch-check {{ request()->is('amil/verifikasi*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Verifikasi Mustahik</span>
                        </a>
                        <a href="{{ url('/admin/laporan') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors {{ request()->is('admin/laporan*') || request()->is('admin/rekap-zakat*') ? 'bg-[#eef3f0] text-primary font-semibold' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium' }}">
                            <i class="bi bi-bar-chart-line {{ request()->is('admin/laporan*') || request()->is('admin/rekap-zakat*') ? 'text-primary' : 'text-gray-400' }} text-lg"></i> <span class="text-[13px]">Laporan & Rekap</span>
                        </a>
                    </nav>
                </div>

            </div>

            <!-- Sidebar Footer -->
            <div class="border-t border-gray-200 p-3">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-[13.5px] font-medium text-red-500 hover:bg-red-50 hover:text-red-600 transition-colors w-full">
                        <i class="bi bi-box-arrow-right text-[16px]"></i> Keluar
                    </button>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col h-screen overflow-hidden">
            
            <!-- Topbar -->
            <header class="h-20 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
                <div class="flex items-center gap-3">
                    <!-- Hamburger Button (Mobile) -->
                    <button onclick="openSuperSidebar()" class="md:hidden flex items-center justify-center w-9 h-9 border border-gray-200 rounded-lg text-gray-700 text-xl hover:bg-gray-50 transition-colors" aria-label="Buka menu">
                        <i class="bi bi-list"></i>
                    </button>
                    @yield('header_title')
                </div>
                
                <div class="flex items-center gap-6">
                    <div class="hidden md:flex items-center gap-3 text-sm">
                        @yield('header_actions')
                        <span class="bg-[#f0e6ff] text-[#7a4cc2] text-[10px] font-bold px-2.5 py-1 rounded-full tracking-wide">MODE SUPER ADMIN</span>
                        <div class="h-4 w-px bg-gray-300 mx-2"></div>
                        <span class="text-gray-500">{{ now()->format('d M Y') }}</span>
                    </div>
                    <div class="hidden lg:flex items-center gap-3 pl-4 border-l border-gray-200">
                        <div class="text-right leading-[1.3]">
                            <div class="text-[13px] font-semibold text-gray-900">Super Admin</div>
                            <div class="text-[11px] text-gray-500">System Administrator</div>
                        </div>
                        <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white text-[13px] font-bold overflow-hidden"><img src="https://avatar.iran.liara.run/public/boy" alt="Avatar" class="w-full h-full object-cover"></div>
                    </div>
                </div>
            </header>

            <!-- Page Content -->
            <div class="flex-1 overflow-y-auto p-8 superadmin-content" id="superadminContent">
                @if(session('success'))
                    <div class="bg-green-50 border border-green-100 text-green-700 p-4 rounded-xl mb-6 text-sm flex items-start gap-3">
                        <i class="bi bi-check-circle-fill text-lg mt-0.5"></i>
                        <div>{{ session('success') }}</div>
                    </div>
                @endif
                @if(session('error'))
                    <div class="bg-red-50 border border-red-100 text-red-700 p-4 rounded-xl mb-6 text-sm flex items-start gap-3">
                        <i class="bi bi-exclamation-triangle-fill text-lg mt-0.5"></i>
                        <div>{{ session('error') }}</div>
                    </div>
                @endif
                
                @yield('content')
                
                {{-- Modals rendered inside so fast-nav can update them --}}
                @yield('modals')
                
                {{-- Page-specific scripts rendered inside so fast-nav can evaluate them --}}
                @stack('scripts')
            </div>

        </main>
    </div>

    <script>
    // ===== Superadmin Sidebar Mobile Toggle =====
    function openSuperSidebar() {
        const sidebar = document.getElementById('superSidebar');
        const overlay = document.getElementById('superSidebarOverlay');
        sidebar.style.display = 'flex';
        sidebar.style.position = 'fixed';
        sidebar.style.left = '0';
        sidebar.style.top = '0';
        sidebar.style.bottom = '0';
        sidebar.style.zIndex = '50';
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    function closeSuperSidebar() {
        const sidebar = document.getElementById('superSidebar');
        const overlay = document.getElementById('superSidebarOverlay');
        sidebar.style.cssText = '';
        overlay.classList.remove('active');
        document.body.style.overflow = '';
    }
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeSuperSidebar();
    });
    // Reset sidebar style on resize to desktop
    window.addEventListener('resize', function() {
        if (window.innerWidth >= 768) closeSuperSidebar();
    });

    // ===== NProgress untuk form POST action =====
    // (NProgress sudah dimuat melalui stack atau tag script di bawah)
    </script>



{{-- NProgress + Fast Navigation (tanpa reload) --}}
<script src="{{ asset('js/nprogress.min.js') }}"></script>
<script>
// Superadmin menggunakan konten selector yang berbeda
window.__fastNavContentSelector = '#superadminContent';

// Tambahkan form POST progress setelah NProgress tersedia
document.addEventListener('submit', function(e) {
    var form = e.target;
    if (form.method && form.method.toLowerCase() === 'post') {
        if (typeof NProgress !== 'undefined') NProgress.start();
    }
});
</script>
<script src="{{ asset('js/fast-nav.js') }}"></script>
</body>
</html>
