@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   1. ADMIN VARIABLES & RESET
   ========================================= */
:root {
    --nu-green: #086A39;
    --nu-green-light: rgba(8, 106, 57, 0.1);
    --nu-gold: #C88124;
    
    --bg-admin: #f0f4f8;
    --card-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --danger: #ff3b30;
    --success: #34c759;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: var(--bg-admin); color: var(--text-main); overflow: hidden; height: 100vh; display: flex; width: 100vw; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c1c6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--nu-green); }

/* =========================================
   2. GLASSMORPHISM UTILITIES
   ========================================= */
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.rounded-box { border-radius: 24px; }
.pill-shape { border-radius: 100px; }

/* Abstract Background Blobs */
.admin-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
.blob-1, .blob-2 { position: absolute; filter: blur(100px); border-radius: 50%; opacity: 0.4; }
.blob-1 { background: var(--nu-green); width: 500px; height: 500px; top: -100px; left: -100px; animation: float 10s infinite alternate; }
.blob-2 { background: var(--nu-gold); width: 400px; height: 400px; bottom: -100px; right: -50px; animation: float 8s infinite alternate reverse; }

@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 30px); } }

/* =========================================
   3. ADMIN LAYOUT (FLOATING ISLANDS)
   ========================================= */
.admin-layout {
    display: flex; width: 100%; height: 100vh; padding: 20px; gap: 20px;
}

/* SIDEBAR */
.admin-sidebar {
    width: 280px; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
    flex-shrink: 0;
}
.sidebar-header { padding: 25px 20px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.sidebar-logo { height: 40px; }

.sidebar-menu { flex: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; gap: 8px; }
.menu-item {
    display: flex; align-items: center; gap: 15px; padding: 14px 18px; border-radius: 16px;
    font-weight: 600; font-size: 0.95rem; color: var(--text-muted); transition: all 0.3s ease;
}
.menu-item i { font-size: 1.4rem; }
.menu-item:hover { background: var(--nu-green-light); color: var(--nu-green); transform: translateX(5px); }
.menu-item.active { background: var(--nu-green); color: white; box-shadow: 0 8px 20px rgba(8, 106, 57, 0.3); }

/* MAIN CONTENT AREA */
.admin-main { flex: 1; display: flex; flex-direction: column; gap: 20px; overflow: hidden; min-width: 0; /* Penting untuk mencegah overflow grid */ }

/* TOPBAR */
.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; padding: 15px 25px;
}
.topbar-left { display: flex; align-items: center; gap: 15px; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--text-main); }
.page-title { font-size: 1.3rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-right { display: flex; align-items: center; gap: 20px; }
.admin-profile { display: flex; align-items: center; gap: 12px; padding: 6px 15px 6px 6px; background: rgba(255,255,255,0.5); border: 1px solid var(--glass-border); cursor: pointer; transition: 0.3s; }
.admin-profile:hover { background: white; }
.admin-name { font-size: 0.9rem; font-weight: 600; color: var(--text-main); }
.avatar { width: 36px; height: 36px; background: var(--nu-green); color: white; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; }

/* CONTENT CANVAS */
.admin-content {
    flex: 1; overflow-y: auto; padding: 30px; display: flex; flex-direction: column; gap: 25px;
}

/* =========================================
   4. DASHBOARD WIDGETS & FORMS
   ========================================= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card { padding: 25px; display: flex; align-items: center; gap: 20px; transition: transform 0.3s; }
.stat-card:hover { transform: translateY(-5px); }
.stat-icon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--nu-green-light); color: var(--nu-green); flex-shrink: 0; }
.stat-info h4 { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.stat-info h2 { font-size: 2rem; font-weight: 800; color: var(--text-main); line-height: 1; }

/* Form Login Specific */
.login-wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; position: relative; z-index: 10; padding: 20px; }
.login-box { width: 100%; max-width: 400px; padding: 40px; text-align: center; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text-muted); }
.form-control { width: 100%; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); font-size: 0.95rem; outline: none; transition: 0.3s; color: var(--text-main); }
.form-control:focus { background: white; border-color: var(--nu-green); box-shadow: 0 0 0 4px var(--nu-green-light); }
.btn-login { width: 100%; padding: 14px; background: var(--nu-green); color: white; border: none; border-radius: 100px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn-login:hover { background: #06532d; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8, 106, 57, 0.3); }

/* =========================================
   5. RESPONSIVE DESIGN (MOBILE ADMIN)
   ========================================= */
@media (max-width: 992px) {
    /* Merubah layout utama agar terasa seperti Native App di Mobile */
    .admin-layout { padding: 0; gap: 0; flex-direction: column; }
    
    /* Memunculkan tombol hamburger menu */
    .menu-toggle { display: block; padding: 5px; }
    
    /* Mengubah Sidebar menjadi Drawer (Laci) */
    .admin-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 2000;
        width: 280px; max-width: 85vw; /* Agar saat sidebar terbuka, masih ada ruang untuk klik overlay */
        border-radius: 0 24px 24px 0;
        transform: translateX(-100%); /* Disembunyikan di luar layar kiri */
        margin: 0;
        box-shadow: 20px 0 50px rgba(0,0,0,0.1);
        background: rgba(255, 255, 255, 0.9); /* Dibuat lebih solid agar teks tidak menabrak background layar */
    }
    
    /* Class saat tombol menu ditekan */
    .admin-sidebar.show { transform: translateX(0); }
    
    /* Latar Hitam Transparan saat Sidebar Terbuka */
    .sidebar-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        z-index: 1999;
        opacity: 0; visibility: hidden; transition: all 0.3s ease;
    }
    .sidebar-overlay.show { opacity: 1; visibility: visible; }
    
    /* Penyesuaian Ruang Konten */
    .admin-main { padding: 15px; height: 100vh; gap: 15px; }
    
    /* Sembunyikan Jam Live di Topbar agar tidak sesak */
    .topbar-right .live-time-admin { display: none; }
}

@media (max-width: 576px) {
    /* Penyesuaian khusus untuk layar Handphone (Potrait) */
    .admin-topbar { padding: 12px 20px; border-radius: 20px; }
    .page-title { font-size: 1.1rem; }
    
    /* Sembunyikan Nama Admin di pojok kanan atas, sisakan hanya Foto/Avatar */
    .admin-name { display: none; }
    .admin-profile { padding: 6px; border-radius: 50%; }
    
    /* Konten Admin lebih merapat ke tepi layar */
    .admin-content { padding: 20px 15px; border-radius: 20px; }
    
    /* Memaksa Grid Statistik menjadi 1 kolom vertikal */
    .stat-grid { grid-template-columns: 1fr; }
    
    /* Memperbesar target klik (Touch Target) tombol form di mobile */
    .btn-action { width: 40px; height: 40px; font-size: 1.3rem; }
}