<?php  
    include('loginsession.php');  
    error_reporting(E_ALL);  
    $filename = basename(__FILE__);  
    $save = mysqli_query($conn, "INSERT INTO novia_abc_user_logs (userid,filename) VALUES ('$userini_id','$filename')");  
//-------------  
$today = date("Y-m-d");  
//-------------  
?>  

<!DOCTYPE html>  
<html lang="id">  
<head>  
    <title>Administrasi - Dashboard</title>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    
    <!-- Bootstrap 5 CSS -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">  
    <!-- Bootstrap Icons -->  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">  
    <!-- Google Fonts -->  
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">  
    <link rel="icon" type="image/icon" href="images/balance.ico" />  
    
    <style>  
        :root {  
            --brown-50: #faf6f0;  
            --brown-100: #f0e6d3;  
            --brown-200: #ddd0b8;  
            --brown-300: #c4b094;  
            --brown-400: #a88d6e;  
            --brown-500: #8b7355;  
            --brown-600: #6d5a42;  
            --brown-700: #5a4834;  
            --brown-800: #4a3b2a;  
            --brown-900: #3c2f20;  
            --brown-950: #2a2015;  
        }  

        * {  
            margin: 0;  
            padding: 0;  
            box-sizing: border-box;  
        }  

        body {  
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  
            background: linear-gradient(135deg, var(--brown-50) 0%, var(--brown-100) 50%, var(--brown-200) 100%);  
            min-height: 100vh;  
            padding: 1rem;  
        }  

        .dashboard-wrapper {  
            max-width: 1200px;  
            margin: 0 auto;  
        }  

        /* Header / Hero Section */  
        .hero-section {  
            background: linear-gradient(145deg, var(--brown-800) 0%, var(--brown-900) 50%, var(--brown-950) 100%);  
            border-radius: 24px;  
            padding: 2rem;  
            margin-bottom: 1.5rem;  
            box-shadow: 0 20px 60px rgba(42, 32, 21, 0.3);  
            position: relative;  
            overflow: hidden;  
        }  

        .hero-section::before {  
            content: '';  
            position: absolute;  
            top: -50%;  
            right: -20%;  
            width: 400px;  
            height: 400px;  
            background: radial-gradient(circle, rgba(139, 115, 85, 0.15) 0%, transparent 70%);  
            border-radius: 50%;  
        }  

        .hero-section::after {  
            content: '';  
            position: absolute;  
            bottom: -30%;  
            left: -10%;  
            width: 300px;  
            height: 300px;  
            background: radial-gradient(circle, rgba(196, 176, 148, 0.1) 0%, transparent 70%);  
            border-radius: 50%;  
        }  

        .hero-content {  
            position: relative;  
            z-index: 1;  
        }  

        .hero-section img {  
            max-width: 280px;  
            height: auto;  
            filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.3));  
        }  

        .hero-section .brand-text {  
            color: var(--brown-100);  
            font-weight: 300;  
            letter-spacing: 2px;  
            text-transform: uppercase;  
            font-size: 0.85rem;  
        }  

        /* Section Title */  
        .section-title {  
            font-size: 1.1rem;  
            font-weight: 600;  
            color: var(--brown-800);  
            padding: 0.75rem 1.25rem;  
            border-radius: 12px;  
            background: linear-gradient(135deg, var(--brown-100) 0%, var(--brown-200) 100%);  
            display: inline-flex;  
            align-items: center;  
            gap: 0.5rem;  
            margin-bottom: 1.25rem;  
            border-left: 4px solid var(--brown-600);  
        }  

        .section-title i {  
            font-size: 1.3rem;  
            color: var(--brown-600);  
        }  

        /* Card Base */  
        .menu-card {  
            border: none;  
            border-radius: 16px;  
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
            height: 100%;  
            position: relative;  
            overflow: hidden;  
            cursor: pointer;  
            background: white;  
            box-shadow: 0 2px 8px rgba(74, 59, 42, 0.06);  
        }  

        .menu-card:hover {  
            transform: translateY(-4px);  
            box-shadow: 0 12px 28px rgba(74, 59, 42, 0.12);  
        }  

        .menu-card:active {  
            transform: translateY(-1px);  
        }  

        .menu-card .card-body {  
            padding: 1.25rem 1rem;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            text-align: center;  
            gap: 0.5rem;  
        }  

        .menu-card .card-icon {  
            width: 48px;  
            height: 48px;  
            border-radius: 12px;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            font-size: 1.4rem;  
            margin-bottom: 0.25rem;  
        }  

        .menu-card .card-title {  
            font-size: 0.8rem;  
            font-weight: 600;  
            margin: 0;  
            line-height: 1.3;  
            letter-spacing: 0.3px;  
        }  

        .menu-card .card-subtitle {  
            font-size: 0.65rem;  
            color: var(--brown-400);  
            margin: 0;  
            font-weight: 400;  
        }  

        /* Warna Variasi Kartu */  
        .card-brown-50 { background: var(--brown-50); }  
        .card-brown-100 { background: var(--brown-100); }  
        .card-brown-200 { background: var(--brown-200); }  
        .card-brown-300 { background: var(--brown-300); }  
        .card-brown-400 { background: var(--brown-400); }  
        .card-brown-500 { background: var(--brown-500); }  
        .card-brown-600 { background: var(--brown-600); }  
        .card-brown-700 { background: var(--brown-700); }  
        .card-brown-800 { background: var(--brown-800); }  
        .card-brown-900 { background: var(--brown-900); }  

        .text-brown-50 { color: var(--brown-50) !important; }  
        .text-brown-100 { color: var(--brown-100) !important; }  
        .text-brown-200 { color: var(--brown-200) !important; }  
        .text-brown-300 { color: var(--brown-300) !important; }  
        .text-brown-400 { color: var(--brown-400) !important; }  
        .text-brown-500 { color: var(--brown-500) !important; }  
        .text-brown-600 { color: var(--brown-600) !important; }  
        .text-brown-700 { color: var(--brown-700) !important; }  
        .text-brown-800 { color: var(--brown-800) !important; }  
        .text-brown-900 { color: var(--brown-900) !important; }  
        .text-brown-950 { color: var(--brown-950) !important; }  

        .bg-brown-50 { background-color: var(--brown-50); }  
        .bg-brown-100 { background-color: var(--brown-100); }  
        .bg-brown-200 { background-color: var(--brown-200); }  
        .bg-brown-300 { background-color: var(--brown-300); }  
        .bg-brown-400 { background-color: var(--brown-400); }  
        .bg-brown-500 { background-color: var(--brown-500); }  
        .bg-brown-600 { background-color: var(--brown-600); }  
        .bg-brown-700 { background-color: var(--brown-700); }  
        .bg-brown-800 { background-color: var(--brown-800); }  

        /* Kartu Gelap: teks putih */  
        .card-brown-500 .card-title,  
        .card-brown-600 .card-title,  
        .card-brown-700 .card-title,  
        .card-brown-800 .card-title,  
        .card-brown-900 .card-title {  
            color: white !important;  
        }  
        .card-brown-500 .card-subtitle,  
        .card-brown-600 .card-subtitle,  
        .card-brown-700 .card-subtitle,  
        .card-brown-800 .card-subtitle,  
        .card-brown-900 .card-subtitle {  
            color: rgba(255,255,255,0.7) !important;  
        }  
        .card-brown-500 .card-icon,  
        .card-brown-600 .card-icon,  
        .card-brown-700 .card-icon,  
        .card-brown-800 .card-icon,  
        .card-brown-900 .card-icon {  
            background: rgba(255,255,255,0.15);  
            color: white;  
        }  

        /* Kartu Terang: teks gelap */  
        .card-brown-50 .card-title,  
        .card-brown-100 .card-title,  
        .card-brown-200 .card-title,  
        .card-brown-300 .card-title,  
        .card-brown-400 .card-title {  
            color: var(--brown-800);  
        }  
        .card-brown-50 .card-icon,  
        .card-brown-100 .card-icon,  
        .card-brown-200 .card-icon,  
        .card-brown-300 .card-icon,  
        .card-brown-400 .card-icon {  
            background: rgba(74, 59, 42, 0.08);  
            color: var(--brown-600);  
        }  

        /* Link di dalam card */  
        .menu-card a {  
            text-decoration: none;  
            color: inherit;  
            display: block;  
            height: 100%;  
        }  

        /* Special Card: KOSONG */  
        .card-disabled {  
            opacity: 0.5;  
            cursor: default;  
            pointer-events: none;  
        }  

        /* Footer / Tanggal */  
        .footer-date {  
            text-align: center;  
            padding: 1.5rem 0 0.5rem;  
            color: var(--brown-400);  
            font-size: 0.75rem;  
            font-weight: 400;  
            letter-spacing: 0.5px;  
        }  

        /* Animasi */  
        @keyframes fadeInUp {  
            from {  
                opacity: 0;  
                transform: translateY(20px);  
            }  
            to {  
                opacity: 1;  
                transform: translateY(0);  
            }  
        }  

        .menu-card {  
            animation: fadeInUp 0.4s ease forwards;  
        }  

        /* Responsive breakpoints */  
        @media (max-width: 576px) {  
            body { padding: 0.75rem; }  
            .hero-section { padding: 1.25rem; border-radius: 18px; }  
            .hero-section img { max-width: 200px; }  
            .section-title { font-size: 0.95rem; padding: 0.5rem 1rem; }  
            .menu-card .card-body { padding: 1rem 0.75rem; }  
            .menu-card .card-icon { width: 40px; height: 40px; font-size: 1.1rem; }  
            .menu-card .card-title { font-size: 0.7rem; }  
            .menu-card .card-subtitle { font-size: 0.6rem; }  
        }  

        @media (min-width: 768px) {  
            .menu-card .card-body { padding: 1.5rem 1rem; }  
            .menu-card .card-title { font-size: 0.85rem; }  
        }  

        /* Scroll halus */  
        html {  
            scroll-behavior: smooth;  
        }
        
        /* =========================================================
           GREEN PALETTE - Elegant Modern Green
        ========================================================= */
        :root {
            --green-50: #f3faf5;
            --green-100: #dff1e5;
            --green-200: #bfe3cb;
            --green-300: #98d0aa;
            --green-400: #6fb786;
            --green-500: #4f9c68;
            --green-600: #3d7f53;
            --green-700: #326544;
            --green-800: #295238;
            --green-900: #21422e;
            --green-950: #14281c;
        }
        
        /* =========================================================
           CARD GREEN
        ========================================================= */
        .card-green-50  { background: var(--green-50); }
        .card-green-100 { background: var(--green-100); }
        .card-green-200 { background: var(--green-200); }
        .card-green-300 { background: var(--green-300); }
        .card-green-400 { background: var(--green-400); }
        .card-green-500 { background: var(--green-500); }
        .card-green-600 { background: var(--green-600); }
        .card-green-700 { background: var(--green-700); }
        .card-green-800 { background: var(--green-800); }
        .card-green-900 { background: var(--green-900); }
        .card-green-950 { background: var(--green-950); }
        
        /* =========================================================
           TEXT GREEN
        ========================================================= */
        .text-green-50  { color: var(--green-50) !important; }
        .text-green-100 { color: var(--green-100) !important; }
        .text-green-200 { color: var(--green-200) !important; }
        .text-green-300 { color: var(--green-300) !important; }
        .text-green-400 { color: var(--green-400) !important; }
        .text-green-500 { color: var(--green-500) !important; }
        .text-green-600 { color: var(--green-600) !important; }
        .text-green-700 { color: var(--green-700) !important; }
        .text-green-800 { color: var(--green-800) !important; }
        .text-green-900 { color: var(--green-900) !important; }
        .text-green-950 { color: var(--green-950) !important; }
        
        /* =========================================================
           BACKGROUND GREEN
        ========================================================= */
        .bg-green-50  { background-color: var(--green-50); }
        .bg-green-100 { background-color: var(--green-100); }
        .bg-green-200 { background-color: var(--green-200); }
        .bg-green-300 { background-color: var(--green-300); }
        .bg-green-400 { background-color: var(--green-400); }
        .bg-green-500 { background-color: var(--green-500); }
        .bg-green-600 { background-color: var(--green-600); }
        .bg-green-700 { background-color: var(--green-700); }
        .bg-green-800 { background-color: var(--green-800); }
        
        /* =========================================================
           KARTU GELAP : TEKS PUTIH
        ========================================================= */
        .card-green-500 .card-title,
        .card-green-600 .card-title,
        .card-green-700 .card-title,
        .card-green-800 .card-title,
        .card-green-900 .card-title,
        .card-green-950 .card-title {
            color: white !important;
        }
        
        .card-green-500 .card-subtitle,
        .card-green-600 .card-subtitle,
        .card-green-700 .card-subtitle,
        .card-green-800 .card-subtitle,
        .card-green-900 .card-subtitle,
        .card-green-950 .card-subtitle {
            color: rgba(255,255,255,0.75) !important;
        }
        
        .card-green-500 .card-icon,
        .card-green-600 .card-icon,
        .card-green-700 .card-icon,
        .card-green-800 .card-icon,
        .card-green-900 .card-icon,
        .card-green-950 .card-icon {
            background: rgba(255,255,255,0.15);
            color: white;
        }
        
        /* =========================================================
           KARTU TERANG : TEKS GELAP
        ========================================================= */
        .card-green-50 .card-title,
        .card-green-100 .card-title,
        .card-green-200 .card-title,
        .card-green-300 .card-title,
        .card-green-400 .card-title {
            color: var(--green-900);
        }
        
        .card-green-50 .card-subtitle,
        .card-green-100 .card-subtitle,
        .card-green-200 .card-subtitle,
        .card-green-300 .card-subtitle,
        .card-green-400 .card-subtitle {
            color: var(--green-700);
        }
        
        .card-green-50 .card-icon,
        .card-green-100 .card-icon,
        .card-green-200 .card-icon,
        .card-green-300 .card-icon,
        .card-green-400 .card-icon {
            background: rgba(33, 66, 46, 0.08);
            color: var(--green-700);
        }
        
        /* =========================================================
           GREEN HERO SECTION (OPSIONAL)
        ========================================================= */
        .hero-section-green {
            background: linear-gradient(
                145deg,
                var(--green-800) 0%,
                var(--green-900) 50%,
                var(--green-950) 100%
            );
            border-radius: 24px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 20px 60px rgba(20, 40, 28, 0.35);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section-green::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(
                circle,
                rgba(79, 156, 104, 0.18) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        .hero-section-green::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(
                circle,
                rgba(191, 227, 203, 0.12) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        /* =========================================================
           SECTION TITLE GREEN
        ========================================================= */
        .section-title-green {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--green-900);
            padding: 0.75rem 1.25rem;
            border-radius: 12px;
            background: linear-gradient(
                135deg,
                var(--green-100) 0%,
                var(--green-200) 100%
            );
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            border-left: 4px solid var(--green-600);
        }
        
        .section-title-green i {
            font-size: 1.3rem;
            color: var(--green-700);
        }
        
        /* =========================================================
           HOVER ELEGAN KHUSUS GREEN CARD
        ========================================================= */
        .card-green-50:hover,
        .card-green-100:hover,
        .card-green-200:hover,
        .card-green-300:hover,
        .card-green-400:hover,
        .card-green-500:hover,
        .card-green-600:hover,
        .card-green-700:hover,
        .card-green-800:hover,
        .card-green-900:hover,
        .card-green-950:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 14px 32px rgba(41, 82, 56, 0.18);
        }
        
        /* =========================================================
           BORDER GREEN
        ========================================================= */
        .border-green-100 { border-color: var(--green-100) !important; }
        .border-green-200 { border-color: var(--green-200) !important; }
        .border-green-300 { border-color: var(--green-300) !important; }
        .border-green-400 { border-color: var(--green-400) !important; }
        .border-green-500 { border-color: var(--green-500) !important; }
        .border-green-600 { border-color: var(--green-600) !important; }
        .border-green-700 { border-color: var(--green-700) !important; }
        .border-green-800 { border-color: var(--green-800) !important; }
        
        /* =========================================================
           SHADOW GREEN
        ========================================================= */
        .shadow-green {
            box-shadow: 0 8px 24px rgba(61, 127, 83, 0.18);
        }
        
        /* =========================================================
           GRADIENT GREEN
        ========================================================= */
        .gradient-green {
            background: linear-gradient(
                135deg,
                var(--green-500) 0%,
                var(--green-700) 100%
            );
            color: white;
        }

        /* =========================================================
           BLUE PALETTE - Elegant Modern Blue
        ========================================================= */
        :root {
            --blue-50: #f4f8ff;
            --blue-100: #dfeafe;
            --blue-200: #bfd5fd;
            --blue-300: #95b8fb;
            --blue-400: #6794f5;
            --blue-500: #4675ea;
            --blue-600: #345ed0;
            --blue-700: #2b4ca8;
            --blue-800: #243f87;
            --blue-900: #20356f;
            --blue-950: #152044;
        }
        
        /* =========================================================
           CARD BLUE
        ========================================================= */
        .card-blue-50  { background: var(--blue-50); }
        .card-blue-100 { background: var(--blue-100); }
        .card-blue-200 { background: var(--blue-200); }
        .card-blue-300 { background: var(--blue-300); }
        .card-blue-400 { background: var(--blue-400); }
        .card-blue-500 { background: var(--blue-500); }
        .card-blue-600 { background: var(--blue-600); }
        .card-blue-700 { background: var(--blue-700); }
        .card-blue-800 { background: var(--blue-800); }
        .card-blue-900 { background: var(--blue-900); }
        .card-blue-950 { background: var(--blue-950); }
        
        /* =========================================================
           TEXT BLUE
        ========================================================= */
        .text-blue-50  { color: var(--blue-50) !important; }
        .text-blue-100 { color: var(--blue-100) !important; }
        .text-blue-200 { color: var(--blue-200) !important; }
        .text-blue-300 { color: var(--blue-300) !important; }
        .text-blue-400 { color: var(--blue-400) !important; }
        .text-blue-500 { color: var(--blue-500) !important; }
        .text-blue-600 { color: var(--blue-600) !important; }
        .text-blue-700 { color: var(--blue-700) !important; }
        .text-blue-800 { color: var(--blue-800) !important; }
        .text-blue-900 { color: var(--blue-900) !important; }
        .text-blue-950 { color: var(--blue-950) !important; }
        
        /* =========================================================
           BACKGROUND BLUE
        ========================================================= */
        .bg-blue-50  { background-color: var(--blue-50); }
        .bg-blue-100 { background-color: var(--blue-100); }
        .bg-blue-200 { background-color: var(--blue-200); }
        .bg-blue-300 { background-color: var(--blue-300); }
        .bg-blue-400 { background-color: var(--blue-400); }
        .bg-blue-500 { background-color: var(--blue-500); }
        .bg-blue-600 { background-color: var(--blue-600); }
        .bg-blue-700 { background-color: var(--blue-700); }
        .bg-blue-800 { background-color: var(--blue-800); }
        
        /* =========================================================
           KARTU GELAP : TEKS PUTIH
        ========================================================= */
        .card-blue-500 .card-title,
        .card-blue-600 .card-title,
        .card-blue-700 .card-title,
        .card-blue-800 .card-title,
        .card-blue-900 .card-title,
        .card-blue-950 .card-title {
            color: white !important;
        }
        
        .card-blue-500 .card-subtitle,
        .card-blue-600 .card-subtitle,
        .card-blue-700 .card-subtitle,
        .card-blue-800 .card-subtitle,
        .card-blue-900 .card-subtitle,
        .card-blue-950 .card-subtitle {
            color: rgba(255,255,255,0.75) !important;
        }
        
        .card-blue-500 .card-icon,
        .card-blue-600 .card-icon,
        .card-blue-700 .card-icon,
        .card-blue-800 .card-icon,
        .card-blue-900 .card-icon,
        .card-blue-950 .card-icon {
            background: rgba(255,255,255,0.15);
            color: white;
        }
        
        /* =========================================================
           KARTU TERANG : TEKS GELAP
        ========================================================= */
        .card-blue-50 .card-title,
        .card-blue-100 .card-title,
        .card-blue-200 .card-title,
        .card-blue-300 .card-title,
        .card-blue-400 .card-title {
            color: var(--blue-900);
        }
        
        .card-blue-50 .card-subtitle,
        .card-blue-100 .card-subtitle,
        .card-blue-200 .card-subtitle,
        .card-blue-300 .card-subtitle,
        .card-blue-400 .card-subtitle {
            color: var(--blue-700);
        }
        
        .card-blue-50 .card-icon,
        .card-blue-100 .card-icon,
        .card-blue-200 .card-icon,
        .card-blue-300 .card-icon,
        .card-blue-400 .card-icon {
            background: rgba(32, 53, 111, 0.08);
            color: var(--blue-700);
        }
        
        /* =========================================================
           BLUE HERO SECTION (OPSIONAL)
        ========================================================= */
        .hero-section-blue {
            background: linear-gradient(
                145deg,
                var(--blue-800) 0%,
                var(--blue-900) 50%,
                var(--blue-950) 100%
            );
            border-radius: 24px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 20px 60px rgba(21, 32, 68, 0.35);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section-blue::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(
                circle,
                rgba(70, 117, 234, 0.18) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        .hero-section-blue::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(
                circle,
                rgba(191, 213, 253, 0.12) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        /* =========================================================
           SECTION TITLE BLUE
        ========================================================= */
        .section-title-blue {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--blue-900);
            padding: 0.75rem 1.25rem;
            border-radius: 12px;
            background: linear-gradient(
                135deg,
                var(--blue-100) 0%,
                var(--blue-200) 100%
            );
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            border-left: 4px solid var(--blue-600);
        }
        
        .section-title-blue i {
            font-size: 1.3rem;
            color: var(--blue-700);
        }
        
        /* =========================================================
           HOVER ELEGAN KHUSUS BLUE CARD
        ========================================================= */
        .card-blue-50:hover,
        .card-blue-100:hover,
        .card-blue-200:hover,
        .card-blue-300:hover,
        .card-blue-400:hover,
        .card-blue-500:hover,
        .card-blue-600:hover,
        .card-blue-700:hover,
        .card-blue-800:hover,
        .card-blue-900:hover,
        .card-blue-950:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 14px 32px rgba(36, 63, 135, 0.18);
        }
        
        /* =========================================================
           BORDER BLUE
        ========================================================= */
        .border-blue-100 { border-color: var(--blue-100) !important; }
        .border-blue-200 { border-color: var(--blue-200) !important; }
        .border-blue-300 { border-color: var(--blue-300) !important; }
        .border-blue-400 { border-color: var(--blue-400) !important; }
        .border-blue-500 { border-color: var(--blue-500) !important; }
        .border-blue-600 { border-color: var(--blue-600) !important; }
        .border-blue-700 { border-color: var(--blue-700) !important; }
        .border-blue-800 { border-color: var(--blue-800) !important; }
        
        /* =========================================================
           SHADOW BLUE
        ========================================================= */
        .shadow-blue {
            box-shadow: 0 8px 24px rgba(52, 94, 208, 0.18);
        }
        
        /* =========================================================
           GRADIENT BLUE
        ========================================================= */
        .gradient-blue {
            background: linear-gradient(
                135deg,
                var(--blue-500) 0%,
                var(--blue-700) 100%
            );
            color: white;
        }        

        /* =========================================================
           MOSSGREEN PALETTE - Elegant Modern Moss Green
        ========================================================= */
        :root {
            --mossgreen-50:  #f5f7f2;
            --mossgreen-100: #e4eadc;
            --mossgreen-200: #ccd7be;
            --mossgreen-300: #aebe97;
            --mossgreen-400: #8ea36f;
            --mossgreen-500: #728652;
            --mossgreen-600: #5d6e42;
            --mossgreen-700: #4b5936;
            --mossgreen-800: #3d482d;
            --mossgreen-900: #323b25;
            --mossgreen-950: #1e2417;
        }
        
        /* =========================================================
           CARD MOSSGREEN
        ========================================================= */
        .card-mossgreen-50  { background: var(--mossgreen-50); }
        .card-mossgreen-100 { background: var(--mossgreen-100); }
        .card-mossgreen-200 { background: var(--mossgreen-200); }
        .card-mossgreen-300 { background: var(--mossgreen-300); }
        .card-mossgreen-400 { background: var(--mossgreen-400); }
        .card-mossgreen-500 { background: var(--mossgreen-500); }
        .card-mossgreen-600 { background: var(--mossgreen-600); }
        .card-mossgreen-700 { background: var(--mossgreen-700); }
        .card-mossgreen-800 { background: var(--mossgreen-800); }
        .card-mossgreen-900 { background: var(--mossgreen-900); }
        .card-mossgreen-950 { background: var(--mossgreen-950); }
        
        /* =========================================================
           TEXT MOSSGREEN
        ========================================================= */
        .text-mossgreen-50  { color: var(--mossgreen-50) !important; }
        .text-mossgreen-100 { color: var(--mossgreen-100) !important; }
        .text-mossgreen-200 { color: var(--mossgreen-200) !important; }
        .text-mossgreen-300 { color: var(--mossgreen-300) !important; }
        .text-mossgreen-400 { color: var(--mossgreen-400) !important; }
        .text-mossgreen-500 { color: var(--mossgreen-500) !important; }
        .text-mossgreen-600 { color: var(--mossgreen-600) !important; }
        .text-mossgreen-700 { color: var(--mossgreen-700) !important; }
        .text-mossgreen-800 { color: var(--mossgreen-800) !important; }
        .text-mossgreen-900 { color: var(--mossgreen-900) !important; }
        .text-mossgreen-950 { color: var(--mossgreen-950) !important; }
        
        /* =========================================================
           BACKGROUND MOSSGREEN
        ========================================================= */
        .bg-mossgreen-50  { background-color: var(--mossgreen-50); }
        .bg-mossgreen-100 { background-color: var(--mossgreen-100); }
        .bg-mossgreen-200 { background-color: var(--mossgreen-200); }
        .bg-mossgreen-300 { background-color: var(--mossgreen-300); }
        .bg-mossgreen-400 { background-color: var(--mossgreen-400); }
        .bg-mossgreen-500 { background-color: var(--mossgreen-500); }
        .bg-mossgreen-600 { background-color: var(--mossgreen-600); }
        .bg-mossgreen-700 { background-color: var(--mossgreen-700); }
        .bg-mossgreen-800 { background-color: var(--mossgreen-800); }
        
        /* =========================================================
           KARTU GELAP : TEKS PUTIH
        ========================================================= */
        .card-mossgreen-500 .card-title,
        .card-mossgreen-600 .card-title,
        .card-mossgreen-700 .card-title,
        .card-mossgreen-800 .card-title,
        .card-mossgreen-900 .card-title,
        .card-mossgreen-950 .card-title {
            color: white !important;
        }
        
        .card-mossgreen-500 .card-subtitle,
        .card-mossgreen-600 .card-subtitle,
        .card-mossgreen-700 .card-subtitle,
        .card-mossgreen-800 .card-subtitle,
        .card-mossgreen-900 .card-subtitle,
        .card-mossgreen-950 .card-subtitle {
            color: rgba(255,255,255,0.75) !important;
        }
        
        .card-mossgreen-500 .card-icon,
        .card-mossgreen-600 .card-icon,
        .card-mossgreen-700 .card-icon,
        .card-mossgreen-800 .card-icon,
        .card-mossgreen-900 .card-icon,
        .card-mossgreen-950 .card-icon {
            background: rgba(255,255,255,0.15);
            color: white;
        }
        
        /* =========================================================
           KARTU TERANG : TEKS GELAP
        ========================================================= */
        .card-mossgreen-50 .card-title,
        .card-mossgreen-100 .card-title,
        .card-mossgreen-200 .card-title,
        .card-mossgreen-300 .card-title,
        .card-mossgreen-400 .card-title {
            color: var(--mossgreen-900);
        }
        
        .card-mossgreen-50 .card-subtitle,
        .card-mossgreen-100 .card-subtitle,
        .card-mossgreen-200 .card-subtitle,
        .card-mossgreen-300 .card-subtitle,
        .card-mossgreen-400 .card-subtitle {
            color: var(--mossgreen-700);
        }
        
        .card-mossgreen-50 .card-icon,
        .card-mossgreen-100 .card-icon,
        .card-mossgreen-200 .card-icon,
        .card-mossgreen-300 .card-icon,
        .card-mossgreen-400 .card-icon {
            background: rgba(50, 59, 37, 0.08);
            color: var(--mossgreen-700);
        }
        
        /* =========================================================
           MOSSGREEN HERO SECTION (OPSIONAL)
        ========================================================= */
        .hero-section-mossgreen {
            background: linear-gradient(
                145deg,
                var(--mossgreen-800) 0%,
                var(--mossgreen-900) 50%,
                var(--mossgreen-950) 100%
            );
            border-radius: 24px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 20px 60px rgba(30, 36, 23, 0.35);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section-mossgreen::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(
                circle,
                rgba(114, 134, 82, 0.18) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        .hero-section-mossgreen::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(
                circle,
                rgba(204, 215, 190, 0.12) 0%,
                transparent 70%
            );
            border-radius: 50%;
        }
        
        /* =========================================================
           SECTION TITLE MOSSGREEN
        ========================================================= */
        .section-title-mossgreen {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--mossgreen-900);
            padding: 0.75rem 1.25rem;
            border-radius: 12px;
            background: linear-gradient(
                135deg,
                var(--mossgreen-100) 0%,
                var(--mossgreen-200) 100%
            );
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            border-left: 4px solid var(--mossgreen-600);
        }
        
        .section-title-mossgreen i {
            font-size: 1.3rem;
            color: var(--mossgreen-700);
        }
        
        /* =========================================================
           HOVER ELEGAN KHUSUS MOSSGREEN CARD
        ========================================================= */
        .card-mossgreen-50:hover,
        .card-mossgreen-100:hover,
        .card-mossgreen-200:hover,
        .card-mossgreen-300:hover,
        .card-mossgreen-400:hover,
        .card-mossgreen-500:hover,
        .card-mossgreen-600:hover,
        .card-mossgreen-700:hover,
        .card-mossgreen-800:hover,
        .card-mossgreen-900:hover,
        .card-mossgreen-950:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 14px 32px rgba(61, 72, 45, 0.18);
        }
        
        /* =========================================================
           BORDER MOSSGREEN
        ========================================================= */
        .border-mossgreen-100 { border-color: var(--mossgreen-100) !important; }
        .border-mossgreen-200 { border-color: var(--mossgreen-200) !important; }
        .border-mossgreen-300 { border-color: var(--mossgreen-300) !important; }
        .border-mossgreen-400 { border-color: var(--mossgreen-400) !important; }
        .border-mossgreen-500 { border-color: var(--mossgreen-500) !important; }
        .border-mossgreen-600 { border-color: var(--mossgreen-600) !important; }
        .border-mossgreen-700 { border-color: var(--mossgreen-700) !important; }
        .border-mossgreen-800 { border-color: var(--mossgreen-800) !important; }
        
        /* =========================================================
           SHADOW MOSSGREEN
        ========================================================= */
        .shadow-mossgreen {
            box-shadow: 0 8px 24px rgba(93, 110, 66, 0.18);
        }
        
        /* =========================================================
           GRADIENT MOSSGREEN
        ========================================================= */
        .gradient-mossgreen {
            background: linear-gradient(
                135deg,
                var(--mossgreen-500) 0%,
                var(--mossgreen-700) 100%
            );
            color: white;
        }                
        
    </style>  
</head>  
<body>  

<div class="dashboard-wrapper">  

    <!-- HERO / HEADER -->  
    <div class="hero-section">  
        <div class="hero-content d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">  
            <div>  
                <p class="brand-text mb-1"><i class="bi bi-droplet-half me-1"></i> Klinik Dr. Rocky</p>  
                <h1 class="text-white fw-bold mb-0" style="font-size: clamp(1.4rem, 4vw, 2rem);">Dashboard Administrasi</h1>  
                <p class="text-brown-300 mb-0 mt-1" style="font-size: 0.85rem;">  
                    <i class="bi bi-calendar3 me-1"></i> <?php echo date("d M Y"); ?>  
                </p>  
            </div>  
            <img src="images/page/navigasi_02.png" alt="Logo" class="img-fluid"> 
        </div>  
    </div>  

    <!-- ===================== DATA PASIEN ===================== -->  
    <div class="section-title">  
        <i class="bi bi-people-fill"></i> Data Pasien  
    </div>  

    <!-- Baris 2: Pasien Tahunan, Bulanan, Harian -->  
    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-500">  
                <a href="visit-yearly.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pasien Tahunan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-clipboard-check"></i></div>  
                        <p class="card-title">PASIEN TAHUNAN</p>  
                        <p class="card-subtitle">Yearly</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-600">  
                <a href="visit-monthly.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pasien Bulanan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-calendar-month"></i></div>  
                        <p class="card-title">PASIEN BULANAN</p>  
                        <p class="card-subtitle">Monthly</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-700">  
                <a href="visit-daily.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pasien Harian">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-calendar-day"></i></div>  
                        <p class="card-title">PASIEN HARIAN</p>  
                        <p class="card-subtitle">Daily</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  
    
    <div class="row g-3 mb-4"> 
        <!-- Statistik -->  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-brown-300">  
                <a href="visit-stat.php" title="Statistik Kunjungan Pasien Perbulan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-bar-chart-line"></i></div>  
                        <p class="card-title">Statistik Pasien</p>  
                        <p class="card-subtitle">Kunjungan</p>  
                    </div>  
                </a>  
            </div>  
        </div>  

        <div class="col-6 col-md-6">  
            <div class="menu-card card-brown-600">  
                <a href="cash/stock.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">STOCK</p>  
                        <p class="card-subtitle">Inventory</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  



    <!-- Baris 3: Kelurahan, Data Lengkap, Terakhir -->  
    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-200">  
                <a href="_index_lengkap.php" title="Data Pasien Lengkap">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-list-ul"></i></div>  
                        <p class="card-title">Data Lengkap</p>  
                        <p class="card-subtitle">Semua Pasien</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-500">  
                <a href="online_view.php" title="Calon pasien yang daftar online">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-person-plus"></i></div>  
                        <p class="card-title">Calon Pasien</p>  
                        <p class="card-subtitle">Online</p>  
                    </div>  
                </a>  
            </div>  
        </div>  

        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-600">  
                <a href="visit-last.php" title="Terakhir Datang">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-clock-history"></i></div>  
                        <p class="card-title">Kunjungan Terbaru</p>  
                        <p class="card-subtitle">Last Visit</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  
<br>
 

    <!-- ===================== KEUANGAN ===================== -->  
    <div class="section-title-mossgreen">  
        <i class="fas fa-coins"></i> Keuangan  
    </div>  

    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-mossgreen-500">  
                <a href="cash/cash-stat.php?tanggal=<?php echo $today;?>" title="Lihat Statistik Keuangan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-graph-up-arrow"></i></div>  
                        <p class="card-title">STATISTIK</p>  
                        <p class="card-subtitle">Pengeluaran</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-mossgreen-600">  
                <a href="cash/cash-piutang.php?userid=1" title="Lihat Hutang Piutang">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-currency-dollar"></i></div>  
                        <p class="card-title">PIUTANG</p>  
                        <p class="card-subtitle">Hutang</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-mossgreen-700">  
                <a href="cash/cash-main.php" title="Tambah Belanja">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-cart-plus"></i></div>  
                        <p class="card-title">TAMBAH BELANJA</p>
                        <p class="card-subtitle">Transaksi</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  

    <!-- Baris Keuangan: Bulanan & Harian -->  
    <div class="row g-3 mb-4">  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-mossgreen-200">  
                <a href="cash/cash-view-monthly.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pengeluaran Bulan ini">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-calendar2-month"></i></div>  
                        <p class="card-title">KEUANGAN BULANAN</p>  
                        <p class="card-subtitle">Pengeluaran Bulan Ini</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-mossgreen-300">  
                <a href="cash/cash-view-daily.php?tanggal=<?php echo date("Y-m-d");?>" title="Lihat Pengeluaran Hari ini">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-calendar2-day"></i></div>  
                        <p class="card-title">KEUANGAN HARIAN</p>  
                        <p class="card-subtitle">Pengeluaran Hari Ini</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  
<br>
    <!-- ===================== PENGEMBANGAN DIRI ===================== -->  
    <div class="section-title-green">  
        <i class="fas fa-leaf"></i> Pengembangan Diri  
    </div>  

    <div class="row g-3 mb-4">  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-600">  
                <a href="aero/meditation.php" title="Meditasi">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-flower1"></i></div>  
                        <p class="card-title">MEDITASI</p>  
                        <p class="card-subtitle">Tenangkan Pikiran</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-700">  
                <a href="aero/aero_main.php" title="Aerobik">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-heart-pulse"></i></div>  
                        <p class="card-title">AEROBIK</p>  
                        <p class="card-subtitle">Sehat & Bugar</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  

    <!-- Baris: Rencana & Smoking -->  
    <div class="row g-3 mb-4">  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-400">  
                <a href="todo/todo.php" title="ToDo List">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-clipboard-check"></i></div>  
                        <p class="card-title">RENCANA</p>  
                        <p class="card-subtitle">To Do List</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-500">  
                <a href="aero/smoking.php?item=1" title="No Smoking">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="fas fa-smoking"></i></div>  
                        <p class="card-title">SMOKING</p>  
                        <p class="card-subtitle">No Smoking</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  

    <!-- Baris: Catatan Harian & Rutinitas -->  
    <div class="row g-3 mb-4">  
        <?php  
            if($userini_id == "3"){  
        ?>  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-200">  
                <a href="diary/index.php?check=1" title="Catatan Harian">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-journal-text"></i></div>  
                        <p class="card-title">CATATAN HARIAN</p>  
                        <p class="card-subtitle">Diary Pribadi</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <?php  
            }  
            if($userini_id != "3"){  
        ?>  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-200">  
                <a href="diary/index.php?check=0" title="Catatan Harian">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-journal-text"></i></div>  
                        <p class="card-title">CATATAN HARIAN</p>  
                        <p class="card-subtitle">Diary Pribadi</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <?php  
            }  
        ?>  
  
        <div class="col-6 col-md-6">  
            <div class="menu-card card-green-300">  
                <a href="todo/routine.php" title="Rutinitas Harian">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-list-check"></i></div>  
                        <p class="card-title">RUTINITAS HARIAN</p>  
                        <p class="card-subtitle">Daily Routine</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  


    <!-- ===================== ADMIN AREA ===================== -->  
    
    <?php  
        if($userini_id == 3){  
    ?> 
    <br>
    <div class="section-title">  
        <i class="bi bi-shield-lock-fill"></i> Admin Area  
    </div>  

    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-700">  
                <a href="todo/routine_edit.php" title="PDA Edit">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-pencil-square"></i></div>  
                        <p class="card-title">PDA EDIT</p>  
                        <p class="card-subtitle">Edit Data</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-800">  
                <a href="coding/coding_main.php" title="Coding">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-code-slash"></i></div>  
                        <p class="card-title">CODING</p>  
                        <p class="card-subtitle">Development</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-300">  
                <a href="userlog.php" title="User Log">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-activity"></i></div>  
                        <p class="card-title">ACTIVITY</p>  
                        <p class="card-subtitle">User Log</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  

    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="coding/page.php" title="Page">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-file-code"></i></div>  
                        <p class="card-title">Page</p>  
                        <p class="card-subtitle">Halaman</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-200">  
                <a href="coding/page-01.php" title="Page-01">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-file-earmark-code"></i></div>
                        <p class="card-title">Page-01</p>
                        <p class="card-subtitle">Halaman 01</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-4 col-md-4">
            <div class="menu-card card-brown-300">
                <a href="https://scr.drrocky.skin" title="scr.drrocky.skin">
                    <div class="card-body">
                        <div class="card-icon"><i class="bi bi-terminal"></i></div>
                        <p class="card-title">MY SCRIPT</p>
                        <p class="card-subtitle">scr.drrocky.skin</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-6">
            <div class="menu-card card-brown-400">
                <a href="https://form.drrocky.skin" title="Form Online">
                    <div class="card-body">
                        <div class="card-icon"><i class="bi bi-file-text"></i></div>
                        <p class="card-title">Online Form</p>
                        <p class="card-subtitle">form.drrocky.skin</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="menu-card card-brown-600">
                <a href="player/index.php" title="Player Utama">
                    <div class="card-body">
                        <div class="card-icon"><i class="bi bi-play-circle"></i></div>
                        <p class="card-title">Player Utama</p>
                        <p class="card-subtitle">Media Player</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-6">
            <div class="menu-card card-brown-500 card-disabled">
                <a href="#" title="Afirmasi">
                    <div class="card-body">
                        <div class="card-icon"><i class="bi bi-megaphone"></i></div>
                        <p class="card-title">KOSONG</p>
                        <p class="card-subtitle">Coming Soon</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="menu-card card-brown-700">
                <a href="player/player_01/index3.html" title="Player 01">
                    <div class="card-body">
                        <div class="card-icon"><i class="bi bi-music-note-beamed"></i></div>
                        <p class="card-title">PLAYER 01</p>
                        <p class="card-subtitle">Afirmasi</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    
    <div class="row g-3 mb-4">  
        <!-- Baris 1: Website & Home -->  
        <div class="col-6 col-md-3">  
            <div class="menu-card card-brown-50">  
                <a href="https://www.drrocky.skin" title="Web Dr Rocky">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-globe2"></i></div>  
                        <p class="card-title">WEBSITE</p>  
                        <p class="card-subtitle">drrocky.skin</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-6 col-md-3">  
            <div class="menu-card card-brown-100">  
                <a href="index.php" title="Halaman Awal">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-house-door"></i></div>  
                        <p class="card-title">HOME</p>  
                        <p class="card-subtitle">Beranda</p>  
                    </div>  
                </a>  
            </div>  
        </div>
    </div>
    
    <div class="row g-3 mb-4"> 
        <!-- Statistik -->  
        <div class="col-6 col-md-3">  
            <div class="menu-card card-brown-300">  
                <a href="visit-stat.php" title="Statistik Kunjungan Pasien Perbulan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-bar-chart-line"></i></div>  
                        <p class="card-title">Statistik Pasien</p>  
                        <p class="card-subtitle">Kunjungan</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-6 col-md-3">  
            <div class="menu-card card-brown-400">  
                <a href="cash/cash-stat.php?tanggal=<?php echo $today;?>" title="Statistik Keuangan Perbulan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-coin"></i></div>  
                        <p class="card-title">Statistik Keuangan</p>  
                        <p class="card-subtitle">Perbulan</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  

    <!-- Baris 4: Kosong, Calon Pasien Online, Stock -->  
    <div class="row g-3 mb-4">  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="online_view.php" title="Calon pasien yang daftar online">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-person-plus"></i></div>  
                        <p class="card-title">Calon Pasien</p>  
                        <p class="card-subtitle">Online</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-200">  
                <a href="_kelurahan.php" title="Reset Data Kelurahan">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-geo-alt"></i></div>  
                        <p class="card-title">Reset Kelurahan</p>  
                        <p class="card-subtitle">Reset Data</p>  
                    </div>  
                </a>  
            </div>  
        </div> 
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="administrasi-klasik.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">ADM 0</p>  
                        <p class="card-subtitle">ADM Asli</p>  
                    </div>  
                </a>  
            </div>  
        </div> 
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="administrasi1.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">ADM 1</p>  
                        <p class="card-subtitle">Coming Soon</p>  
                    </div>  
                </a>  
            </div>  
        </div> 

        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="administrasi2.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">ADM 2</p>  
                        <p class="card-subtitle">Coming Soon</p>  
                    </div>  
                </a>  
            </div>  
        </div> 
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="administrasi3.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">ADM 3</p>  
                        <p class="card-subtitle">Coming Soon</p>  
                    </div>  
                </a>  
            </div>  
        </div> 
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="administrasi4.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">ADM 4</p>  
                        <p class="card-subtitle">Coming Soon</p>  
                    </div>  
                </a>  
            </div>  
        </div> 
        
        <div class="col-4 col-md-4">  
            <div class="menu-card card-brown-100">  
                <a href="index-klasik.php" title="Stock">  
                    <div class="card-body">  
                        <div class="card-icon"><i class="bi bi-box-seam"></i></div>  
                        <p class="card-title">Index Asli</p>  
                        <p class="card-subtitle">Coming Soon</p>  
                    </div>  
                </a>  
            </div>  
        </div> 

    </div> 
    
    <div class="row g-3 mb-4">  
        <div class="col-12">  
            <div class="menu-card card-brown-500">  
                <a href="online_view.php" title="Calon pasien yang daftar online">  
                    <div class="card-body py-3 flex-row justify-content-center gap-3">    
                        <div class="card-icon" style="width: 36px; height: 36px; font-size: 1.1rem;"><i class="bi bi-person-plus"></i></div>  
                        <p class="card-title mb-0" style="font-size: 0.9rem;">Calon Pasien</p>  
                        <p class="card-subtitle mb-0" style="font-size: 0.7rem;">Online</p>  
                    </div>  
                </a> 
            </div>  
        </div>  
    </div> 

    <?php
    }
    ?>

    <!-- Baris 5: Logout -->  
    <div class="row g-3 mb-4">  
        <div class="col-12">  
            <div class="menu-card card-brown-900">  
                <a href="logout.php" title="Logout">  
                    <div class="card-body py-3 flex-row justify-content-center gap-3">  
                        <div class="card-icon" style="width: 36px; height: 36px; font-size: 1.1rem;"><i class="bi bi-box-arrow-right"></i></div>  
                        <p class="card-title mb-0" style="font-size: 0.9rem;">LOGOUT</p>  
                        <p class="card-subtitle mb-0" style="font-size: 0.7rem;">Keluar</p>  
                    </div>  
                </a>  
            </div>  
        </div>  
    </div>  


    <!-- FOOTER -->
    <div class="footer-date">
        <i class="bi bi-dot"></i> Sistem Administrasi Dr. Rocky <i class="bi bi-dot"></i>
    </div>

</div>
<!-- Jawaban sider.ai -->
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</body>
</html>
