<!DOCTYPE html>

<html lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Admin Dashboard - Kesbangpol Kab. Bogor</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#4634ff",
                        "primary-container": "#e0e7ff",
                        secondary: "#5a4bd1",
                        "secondary-container": "#f3f4f6",
                        background: "#f8f9fc",
                        surface: "#ffffff",
                        "surface-container-lowest": "#ffffff",
                        "surface-container-low": "#f8f9fc",
                        "surface-container": "#f1f5f9",
                        "surface-container-high": "#e2e8f0",
                        error: "#ef4444",
                        "error-container": "#fee2e2",
                        "on-background": "#1e293b",
                        "on-surface": "#0f172a",
                        "on-surface-variant": "#64748b",
                        outline: "#cbd5e1",
                        "outline-variant": "#e2e8f0"
                    },
                    fontFamily: {
                        "headline-md": ["Plus Jakarta Sans", "sans-serif"],
                        "display-lg": ["Plus Jakarta Sans", "sans-serif"],
                        "body-md": ["Plus Jakarta Sans", "sans-serif"],
                        "caption": ["Plus Jakarta Sans", "sans-serif"],
                        "title-lg": ["Plus Jakarta Sans", "sans-serif"],
                        "body-lg": ["Plus Jakarta Sans", "sans-serif"],
                        "headline-lg-mobile": ["Plus Jakarta Sans", "sans-serif"],
                        "headline-lg": ["Plus Jakarta Sans", "sans-serif"],
                        "label-md": ["Plus Jakarta Sans", "sans-serif"]
                    },
                    fontSize: {
                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
                        "display-lg": ["48px", { "lineHeight": "60px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "body-md": ["15px", { "lineHeight": "24px", "fontWeight": "400" }],
                        "caption": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
                        "title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
                        "body-lg": ["18px", { "lineHeight": "28px", "fontWeight": "400" }],
                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
                        "headline-lg": ["32px", { "lineHeight": "40px", "fontWeight": "700" }],
                        "label-md": ["14px", { "lineHeight": "20px", "fontWeight": "500" }]
                    },
                    boxShadow: {
                        'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
                        'hover': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05)'
                    }
                }
            }
        }
    </script>
<style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .icon-filled {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        /* Custom Shadows & Transitions */
        .shadow-level-1 {
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
        }
        .shadow-level-2 {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-4px);
        }
        
        /* Alpine transitions */
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="bg-background text-on-background font-body-md antialiased h-screen flex overflow-hidden">
<!-- SideNavBar -->
<?php echo $__env->make('partials.sidebar_kesbangpol_stitch', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<!-- Main Content Area -->
<main class="flex-1 md:ml-72 flex flex-col h-screen overflow-hidden bg-background">
<!-- TopAppBar -->
<header class="h-16 flex-shrink-0 bg-surface-container-lowest dark:bg-surface-container-low shadow-sm z-40 sticky top-0">
<div class="flex justify-between items-center px-4 md:px-8 w-full h-full">
<div class="flex items-center">
<span class="md:hidden material-symbols-outlined mr-4 cursor-pointer text-on-surface">menu</span>
<h2 class="text-title-lg font-title-lg font-semibold text-on-surface"><?php echo e(auth()->user()->nama ?? "Admin Kesbangpol"); ?></h2>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center bg-surface-container-high rounded-full px-3 py-1 border border-outline-variant/30 focus-within:border-primary-container focus-within:ring-2 focus-within:ring-primary-container/20 transition-all">
<span class="material-symbols-outlined text-outline mr-1 text-[16px]">search</span>
<input class="bg-transparent border-none focus:outline-none text-caption font-caption text-on-surface w-56 placeholder-on-surface-variant" placeholder="Cari data..." type="text"/>
</div>
<div class="flex items-center gap-2">
<button class="w-10 h-10 rounded-full hover:bg-surface-container-high transition-colors flex items-center justify-center text-on-surface-variant cursor-pointer active:scale-95">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="w-10 h-10 rounded-full hover:bg-surface-container-high transition-colors flex items-center justify-center text-on-surface-variant cursor-pointer active:scale-95">
<span class="material-symbols-outlined">help</span>
</button>
<div class="ml-2 w-10 h-10 rounded-full overflow-hidden border border-outline-variant cursor-pointer active:scale-95 transition-transform">
<img alt="Admin Profile" class="w-full h-full object-cover" data-alt="A professional headshot of a government administrator, wearing neat business attire, against a light gray modern office background. The lighting is soft and flattering, projecting authority and competence in a corporate setting. The colors are neutral and high-quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD6WNVNvrX2-ilAFOvbZVqVVHAaUrJE-H0OXvJgrNEbgOze19X2TPziCkwBYIa9Wsvlb7uR6rXRwnzn0Vvs8uaRp9dkQD3AZRzXF3K7Ak1TWb8pEKMfHBB6VB47Mu62CKKghkTy2OSHiOmm6slxDvHti14Griss0PLZZfUdpGtqKLhQRE2_KhSU4a2oUJof-4qWPCoVDzYLNk8owV-wRZquv5JbM3wn_iAyaYTPkqBK_Zh6KGBpohn2"/>
</div>
</div>
</div>
</div>
</header>
<!-- Scrollable Canvas -->
<div class="flex-1 overflow-y-auto p-6 md:p-8 lg:p-10 bg-background" x-data="{ pageLoad: false }" x-init="setTimeout(() => pageLoad = true, 100)">
    <div x-show="pageLoad" x-transition.opacity.duration.600ms.translate.y.20px x-cloak>
        <?php echo $__env->yieldContent('content'); ?>
    </div>
</div>
</main>
</body>
</html><?php /**PATH C:\Users\arjun\Documents\Magang\Project Magang\simalam\resources\views/layouts/kesbangpol_stitch.blade.php ENDPATH**/ ?>