{{-- Sidebar --}}
<aside id="sidebar" class="glass-sidebar w-64 flex-shrink-0 flex flex-col h-full fixed inset-y-0 left-0 z-50 transform -translate-x-full lg:translate-x-0 lg:relative transition-transform duration-300">
    <div class="p-6 pt-8 flex flex-col items-center justify-center border-b border-slate-100 bg-white/50 relative">
        <button onclick="window.toggleSidebar()" class="lg:hidden absolute top-4 right-4 text-slate-400 hover:text-rose-500 focus:outline-none transition">
            <i class="fas fa-times text-xl"></i>
        </button>

        <div class="w-20 h-20 mb-3 flex items-center justify-center transform hover:scale-105 transition duration-500">
            <img src="{{ asset('images/logo-bgn.png') }}" alt="Logo BGN" class="w-full h-full object-contain drop-shadow-md">
        </div>

        <h1 class="text-2xl font-black text-slate-800 tracking-tight text-center">Dapur Wiki</h1>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1 text-center">Badan Gizi Nasional</p>
    </div>

    <div class="overflow-y-auto flex-grow py-6 px-4 space-y-1.5 custom-scrollbar" id="sidebarMenu">
        {{-- Menu items akan di-render oleh JS (setupEnvironmentAndMenu) --}}
    </div>

    <div class="p-5 border-t border-slate-100 bg-slate-50/50">
        {{-- Dapur Switcher (Super Admin) --}}
        <div id="dapurSwitcherContainer" class="hidden flex-col bg-white p-3.5 rounded-2xl border border-slate-200 shadow-sm transition hover:shadow-md cursor-pointer group" onclick="window.openModalPilihDapur()">
            <label class="text-[10px] font-bold text-slate-400 mb-1.5 uppercase tracking-widest cursor-pointer pointer-events-none">
                <i class="fas fa-layer-group text-sky-600 mr-1"></i> Mode View
            </label>
            <div class="flex items-center justify-between pointer-events-none">
                <span id="dapurSwitcherText" class="text-sm font-bold text-slate-700 truncate group-hover:text-sky-600 transition">Mata Tuhan (All)</span>
                <div class="w-6 h-6 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-sky-50 transition">
                    <i class="fas fa-chevron-right text-slate-300 text-xs group-hover:text-sky-500 transition"></i>
                </div>
            </div>
        </div>

        {{-- Active Dapur Badge (Non-Super Admin) --}}
        <div id="activeDapurBadge" class="hidden items-center bg-gradient-to-r from-sky-50 to-blue-50 px-4 py-3 rounded-2xl border border-sky-100 text-sky-800 font-bold text-xs shadow-sm">
            <i class="fas fa-map-marker-alt mr-2.5 text-sky-600"></i>
            <span id="activeDapurText" class="truncate">Dapur Aktif</span>
        </div>
    </div>
</aside>