    <!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', 'Dashboard') - MedData</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
        <style>
            [x-cloak] { display: none !important; }
        </style>
        <style>
            :root {
                --sidebar-bg: #4A538F;
                --sidebar-hover: #424B84;
                --sidebar-active-bg: #E9EBF5;
                --content-bg: #F4F6FF;
                --card-white: #FFFFFF;
                --border-color: #E5E7F2;
                --text-primary: #2F347A;
                --text-secondary: #7A7FAE;
            }
            body {
                background-color: var(--content-bg);
            }
            .sidebar {
                background-color: var(--sidebar-bg);
                width: 260px;
            }
            .sidebar-link {
                color: white;
                transition: all 0.2s;
            }
            .sidebar-link:hover {
                background-color: var(--sidebar-hover);
            }
            .sidebar-link.active {
                background-color: var(--sidebar-active-bg);
                color: var(--sidebar-bg);
            }
            .content-area {
                margin-left: 260px;
                background-color: var(--content-bg);
                min-height: 100vh;
            }
            .card-custom {
                background-color: var(--card-white);
                border: 1px solid var(--border-color);
            }
            .text-primary-custom {
                color: var(--text-primary);
            }
            .text-secondary-custom {
                color: var(--text-secondary);
            }
            .table-header-custom {
                background-color: var(--sidebar-bg);
                color: white;
            }
            .badge-aman {
                background-color: #C9F7E3;
                color: #1F9254;
            }
            .badge-waspada {
                background-color: #FEF9C3; /* yellow-100 */
                color: #A16207; /* yellow-700 */
            }
            .badge-awas {
                background-color: #FFEDD5; /* orange-100 */
                color: #C2410C; /* orange-700 */
            }
            .badge-kritis {
                background-color: #DC2626; /* red-600 */
                color: #FFFFFF; /* white */
            }
        </style>
    </head>
    <body class="font-sans antialiased">
        <!-- Sidebar -->
        <x-sidebar />

        <!-- Main Content -->
        <div class="content-area">
            <!-- Navbar -->
            <x-navbar />

            <!-- Page Content -->
            <main class="p-6">
                {{ $slot }}
            </main>
        </div>

        <!-- Notification Modal -->
        <x-notification-modal />

        @stack('scripts')
    </body>
    </html>
