@inherits LayoutComponentBase
@namespace LayoutLib
@using Common

<DaisyToastContainer />

<div class="flex h-screen bg-base-100 overflow-hidden">
    <!-- Sidebar -->
    <AdminSidebar />

    <!-- Main Content -->
    <main class="flex-1 flex flex-col min-w-0 overflow-hidden relative">
        <!-- Top Navigation / Header -->
        <header
            class="h-20 flex items-center justify-between px-8 bg-base-100/50 backdrop-blur-md border-b border-base-300 sticky top-0 z-30">
            <div class="flex items-center gap-4">
                <h2 class="text-sm font-black uppercase tracking-widest text-base-content/50">Admin Panel</h2>
                <div class="w-1 h-1 rounded-full bg-base-300"></div>
                <div class="flex items-center gap-2">
                    <span class="text-sm font-bold">MassTech</span>
                    <div class="badge badge-outline badge-primary badge-xs">v1.0</div>
                </div>
            </div>

            <div class="flex items-center gap-4">
                <button class="btn btn-ghost btn-circle btn-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <div class="h-8 w-[1px] bg-base-300"></div>
                <button class="btn btn-primary btn-sm px-6 rounded-xl shadow-lg shadow-primary/20">
                    Notifications
                </button>
            </div>
        </header>

        <!-- Page Content -->
        <div class="flex-1 overflow-y-auto custom-scrollbar p-0 bg-base-200/30">
            <div class="p-8 pb-32">
                @Body
            </div>
        </div>

        <!-- Glass Overlay (Optional Decorative) -->
        <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-primary/5 rounded-full blur-[100px] pointer-events-none">
        </div>
        <div class="absolute -top-20 -left-20 w-80 h-80 bg-secondary/5 rounded-full blur-[100px] pointer-events-none">
        </div>
    </main>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: hsl(var(--bc) / 0.1);
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: hsl(var(--bc) / 0.2);
        border: 2px solid transparent;
        background-clip: content-box;
    }
</style>