/* =========================================
   1. VARIABLE & RESET
   ========================================= */
   :root {
    --sidebar-width: 250px;       
    --sidebar-mini-width: 70px;   
    --topbar-height: 60px;
    --primary-color: #4e73df;
    --hover-bg: #f8f9fc;
    --text-color: #5a5c69;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6;
    overflow-x: hidden;
    font-size: 0.9rem;
}

/* =========================================
   2. SIDEBAR (FIXED POSITION)
   ========================================= */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh; /* Full tinggi layar */
    position: fixed; /* KUNCI: Biar dia diam saat discroll */
    top: 0;
    left: 0;
    background: #fff;
    border-right: 1px solid #e3e6f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1040; /* Di atas konten tapi di bawah modal bootstrap */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Bisa discroll sendiri kalau menunya panjang */
    scrollbar-width: thin; /* Scrollbar tipis (Firefox) */
}

/* Styling Scrollbar Sidebar (Chrome/Edge) */
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Branding Header */
.sidebar .sidebar-heading {
    height: 70px;
    min-height: 70px; /* Fix tinggi biar gak gepeng */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e3e6f0;
    padding: 0 1rem;
    overflow: hidden;
}

.sidebar .sidebar-brand-icon i { font-size: 1.8rem; margin-right: 10px; transition: margin 0.3s; }
.sidebar .sidebar-brand-text h5 { font-size: 1rem; margin-bottom: 0; white-space: nowrap;}

/* Menu Items */
.sidebar .nav-link {
    padding: 0.7rem 1rem;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    position: relative; /* Penting untuk tooltip */
}

.sidebar .nav-link i {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    margin-right: 10px;
}

/* Hover & Active */
.sidebar .nav-link:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color);
}
.sidebar .nav-link.active {
    background-color: #f0f4ff;
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 700;
}

/* Category */
.sidebar-category {
    padding: 1rem 1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: #b7b9cc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Footer Sidebar */
.sidebar-footer {
    margin-top: auto;
    padding: 15px;
    border-top: 1px solid #e3e6f0;
    text-align: center;
    font-size: 0.75rem;
}

/* =========================================
   3. MAIN PANEL (CONTENT)
   ========================================= */
.main-panel {
    width: 100%;
    min-height: 100vh;
    /* KUNCI: Margin kiri sebesar lebar sidebar agar konten tidak ketutup */
    padding-left: var(--sidebar-width); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.main-content {
    padding: 20px; /* Jarak aman konten */
    flex: 1;
}

/* =========================================
   4. LOGIKA TOGGLE & HOVER TOOLTIP
   ========================================= */

/* --- A. DESKTOP (Layar > 768px) --- */
@media (min-width: 769px) {

    /* SAAT MINI MODE (TOGGLED) */
    
    /* 1. Kecilkan Sidebar */
    .wrapper.toggled .sidebar {
        width: var(--sidebar-mini-width);
    }

    /* 2. Sesuaikan Margin Konten (Biar rapi compact) */
    .wrapper.toggled .main-panel {
        padding-left: var(--sidebar-mini-width);
    }

    /* 3. Sembunyikan Teks & Elemen Lain */
    .wrapper.toggled .sidebar .sidebar-brand-text,
    .wrapper.toggled .sidebar .sidebar-category,
    .wrapper.toggled .sidebar .sidebar-footer span,
    .wrapper.toggled .sidebar .nav-link span {
        display: none; /* Default sembunyi */
    }

    /* 4. Atur Icon ke Tengah */
    .wrapper.toggled .sidebar .sidebar-brand-icon i { margin-right: 0; }
    .wrapper.toggled .sidebar .nav-link { 
        justify-content: center; 
        padding-left: 0; 
        padding-right: 0; 
    }
    .wrapper.toggled .sidebar .nav-link i { margin-right: 0; }

    /* --- FITUR TOOLTIP SAAT HOVER (Magic Happens Here) --- */
    
    /* Saat nav-link di-hover PADA KONDISI toggled */
    .wrapper.toggled .sidebar .nav-link:hover span {
        display: block !important; /* Munculkan kembali */
        position: fixed; /* Melayang bebas dari parent */
        left: 70px; /* Muncul tepat di sebelah kanan sidebar mini */
        background-color: #333; /* Warna hitam elegan */
        color: #fff;
        padding: 5px 15px;
        border-radius: 0 5px 5px 0;
        font-size: 0.85rem;
        white-space: nowrap;
        z-index: 9999;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        
        /* Trik agar tooltip lurus dengan icon yang dihover */
        /* Kita pakai JS dikit nanti atau biarkan CSS handle approximate location. 
           Karna position fixed sulit mendeteksi Y item, kita pakai position absolute relative nav-item 
           tapi sidebar overflow hidden sering motong.
           
           SOLUSI CSS MURNI TERBAIK: */
        position: absolute; 
        left: 60px; /* Geser keluar sidebar */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Biar gak ganggu klik */
    }

    /* Karena sidebar punya overflow-y: auto, tooltip absolute bisa terpotong.
       Kita harus akali overflow sidebar visible saat hover? Tidak bisa.
       Maka sidebar saat toggled harus overflow visible untuk tooltip CSS murni. */
       
    .wrapper.toggled .sidebar {
        overflow: visible; 
    }
    
    /* Sembunyikan scrollbar saat mini mode biar tooltip gak aneh */
    .wrapper.toggled .sidebar::-webkit-scrollbar { display: none; }
}

/* --- B. MOBILE (Layar <= 768px) --- */
@media (max-width: 768px) {
    /* Mobile Sidebar Sembunyi ke Kiri */
    .sidebar { left: -100%; width: var(--sidebar-width); }
    
    /* Mobile Konten Full Width */
    .main-panel { padding-left: 0; }

    /* Saat Tombol Klik -> Sidebar Muncul */
    .wrapper.toggled .sidebar { left: 0; }
    
    /* Overlay Gelap */
    .wrapper.toggled .main-panel::before {
        content: ""; position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); z-index: 1030;
    }
}