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

    /* --- ROOT & BASE --- */
    :root { 
        --primary-green: #064e3b; 
        --accent-gold: #fbbf24; 
    }
    
    body { 
        font-family: 'Plus Jakarta Sans', sans-serif; 
        background-color: #f8fafc; 
        overflow: hidden; 
    }

    /* --- SIDEBAR CORE --- */
    .sidebar-green { 
        background: linear-gradient(180deg, #064e3b 0%, #022c22 100%); 
        width: 280px; 
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        border-right: 1px solid rgba(251, 191, 36, 0.1); 
        display: flex;
        flex-direction: column;
    }

    /* --- LOGO AREA --- */
    .logo-container {
        margin-bottom: 1.5rem !important;
        transition: all 0.4s ease;
        display: flex;
        align-items: center;
    }

    .logo-text {
        transition: opacity 0.3s ease, transform 0.3s ease;
        white-space: nowrap; /* Mencegah teks tumpah saat transisi */
    }

    /* --- NAVIGATION ITEMS --- */
    .nav-item { 
        transition: all 0.3s ease; 
        cursor: pointer; 
        border-radius: 12px; 
        color: rgba(255, 255, 255, 0.6); 
        font-weight: 600; 
        display: flex; 
        align-items: center; 
        margin-bottom: 2px;
        padding: 10px 16px !important;
    }

    .nav-item:hover { 
        background: rgba(251, 191, 36, 0.08); 
        color: var(--accent-gold); 
    }

    .active-link { 
        background: rgba(251, 191, 36, 0.15) !important; 
        color: var(--accent-gold) !important; 
        box-shadow: inset 4px 0 0 0 var(--accent-gold); 
    }

    .nav-text {
        transition: opacity 0.3s ease;
        white-space: nowrap;
    }

    /* --- MODE SIDEBAR MINI (DESKTOP SPLIT) --- */
    .sidebar-mini { 
        width: 85px !important; 
    }

    .sidebar-mini .logo-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .sidebar-mini .logo-container img, 
    .sidebar-mini .logo-container .shrink-0 {
        margin: 0 auto !important;
        width: 45px !important;
        height: 45px !important;
        transform: rotate(0deg) !important; /* Luruskan logo saat mini */
    }

    .sidebar-mini .logo-text, 
    .sidebar-mini .nav-text, 
    .sidebar-mini .server-status { 
        display: none !important; 
        opacity: 0;
    }

    .sidebar-mini .nav-item {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar-mini .nav-item i {
        margin-right: 0 !important;
        font-size: 1.25rem;
    }

    /* --- MOBILE RESPONSIVE --- */
    @media (max-width: 768px) {
        .sidebar-green { 
            position: fixed; 
            left: -280px; 
            z-index: 100; 
            height: 100vh; 
        }
        .sidebar-open { 
            left: 0 !important; 
        }
        .mobile-bottom-nav { 
            display: flex !important; 
        }       
    }
    
    /* --- UI ELEMENTS --- */
    .profile-dropdown { 
        position: absolute; 
        top: calc(100% + 12px); 
        right: 0; 
        width: 220px; 
        background: white; 
        border-radius: 20px; 
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
        display: none; 
        z-index: 100; 
        border: 1px solid rgba(0,0,0,0.05); 
    }

    .profile-dropdown.show { 
        display: block; 
        animation: fadeIn 0.2s ease-out; 
    }

    .login-card { 
        background: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(10px); 
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); 
        border: 1px solid rgba(251, 191, 36, 0.2); 
    }

    /* --- MOBILE BOTTOM NAV --- */
    .mobile-bottom-nav {
        display: none; 
        position: fixed; 
        bottom: 0; left: 0; right: 0; 
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px); 
        height: 75px; 
        border-top: 1px solid #f1f5f9; 
        z-index: 90; 
        justify-content: space-around; 
        align-items: center; 
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    }

    .bottom-nav-item { 
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 4px; 
        color: #94a3b8; 
        transition: all 0.3s; 
    }

    .bottom-nav-item.active { color: var(--primary-green); }
    .bottom-nav-item i { font-size: 1.25rem; }
    .bottom-nav-item span { font-size: 10px; font-weight: 800; text-transform: uppercase; }

    /* --- UTILS --- */
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    
    #navMenu::-webkit-scrollbar { width: 0px; background: transparent; }
    
    .faq-floating {
        position: fixed;
        bottom: 85px;
        right: 20px;
        z-index: 80;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .faq-floating:hover { transform: scale(1.1); }

    @media (min-width: 769px) {
        .faq-floating { bottom: 30px; right: 30px; }
    }
/* --- PERBAIKAN CALL CENTER SAAT SPLIT --- */

/* Saat sidebar lebar (default) */
.call-center-wrapper {
    margin-left: -4px; /* Menyelaraskan dengan posisi icon menu di atasnya */
}

/* Saat sidebar mengecil (.sidebar-mini) */
.sidebar-mini .call-center-wrapper {
    width: 45px !important;  /* Ukuran kotak kuning saat split */
    height: 45px !important;
    margin-left: 0 !important; /* Reset margin agar tepat di tengah */
    border-radius: 12px !important;
}

.sidebar-mini .nav-item.mt-auto {
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important; /* Hilangkan background luar agar kotak kuning menonjol */
    border: none !important;
}

/* Memastikan icon di dalam kotak tetap proporsional */
.sidebar-mini .call-center-wrapper i {
    font-size: 1.2rem !important;
}
@media (max-width: 768px) {
    .sidebar-open { 
        box-shadow: 10px 0 50px rgba(0,0,0,0.5) !important; 
    }
}

    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
/* MENCEGAH SEMUA NOTIFIKASI MERUSAK LAYOUT */
html.swal2-shown, 
body.swal2-shown {
    height: 100vh !important; /* Paksa tetap setinggi layar */
    overflow: hidden !important; /* Mencegah scroll ganda */
    position: fixed !important; /* Mengunci posisi agar tidak 'melompat' */
    width: 100% !important;
}

/* Memastikan backdrop tidak menggeser konten */
.swal2-container {
    height: 100vh !important;
}
/* Tambahkan ini untuk memastikan body tidak menciut saat modal muncul */
body.swal2-height-auto {
    height: 100vh !important;
}

.swal2-container {
    overflow-y: auto; /* Biar modalnya saja yang bisa scroll kalau teksnya panjang */
}
/* PAKSA SWEETALERT DI ATAS SEMUA LAYER */
.swal2-container {
    z-index: 999999 !important;
}