/* =========================================
   1. UTAMA & WARNA DASAR
   ========================================= */
body {
    overflow-x: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
}

/* Warna UIN (Hijau Tua) */
.bg-uin { background-color: #006A4E !important; }
.text-uin { color: #006A4E !important; }

/* =========================================
   2. SIDEBAR RESPONSIF CANGGIH
   ========================================= */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Sidebar Hijau UIN */
#sidebar-wrapper {
    background-color: #006A4E !important; /* Hijau Tua UIN */
    color: white;
}

#sidebar-wrapper .list-group-item {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
}

#sidebar-wrapper .list-group-item:hover, 
#sidebar-wrapper .list-group-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Spinner untuk tombol loading */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
#page-content-wrapper {
    width: 100%;
    padding-left: 0;
    transition: all 0.3s ease;
}

/* Isi Sidebar */
.sidebar-heading {
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* Mencegah teks turun */
    overflow: hidden;
}

.list-group-item {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 15px 20px;
    white-space: nowrap;
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.list-group-item i {
    min-width: 30px; /* Lebar tetap untuk icon */
    text-align: center;
    margin-right: 10px;
}

/* Spinner untuk tombol loading */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* --- LOGIKA TAMPILAN (Desktop vs Mobile) --- */

/* MODE DESKTOP (Layar Besar) */
@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0; /* Default Desktop: Muncul Full */
    }
    #page-content-wrapper {
        padding-left: 250px; /* Dorong konten ke kanan */
    }

    /* SAAT TOMBOL MENU DIKLIK DI DESKTOP (Mode Icon Only) */
    body.sb-sidenav-toggled #sidebar-wrapper {
        margin-left: 0;
        width: 70px; /* Kecilkan lebar */
    }
    
    body.sb-sidenav-toggled #page-content-wrapper {
        padding-left: 70px; /* Sesuaikan dorongan konten */
    }

    /* Sembunyikan Teks saat Mode Icon Only */
    body.sb-sidenav-toggled .sidebar-heading,
    body.sb-sidenav-toggled .list-group-item span {
        display: none;
    }
    
    body.sb-sidenav-toggled .list-group-item {
        padding: 15px 10px;
        text-align: center;
    }
    
    body.sb-sidenav-toggled .list-group-item i {
        margin-right: 0;
        font-size: 1.2rem;
    }
}

/* MODE MOBILE (Layar Kecil) */
@media (max-width: 767px) {
    /* Default: Sidebar Hilang (sudah diatur di atas margin-left: -250px) */
    
    /* SAAT TOMBOL MENU DIKLIK DI MOBILE (Muncul Full) */
    body.sb-sidenav-toggled #sidebar-wrapper {
        margin-left: 0;
    }
    
    /* Overlay Hitam saat menu terbuka di HP */
    body.sb-sidenav-toggled #page-content-wrapper {
        position: relative;
    }
    body.sb-sidenav-toggled #page-content-wrapper::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99;
    }
}

/* =========================================
   3. DASHBOARD CARD (PERBAIKAN WARNA)
   ========================================= */
.card-counter {
    box-shadow: 2px 2px 10px #038c24;
    padding: 20px 10px;
    background-color: #fff;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
}

/* Agar tulisan angka terlihat jelas (Putih Tebal) */
.card-body h2, 
.display-4, 
#count-mahasiswa, 
#count-dosen, 
#count-kelompok {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    font-weight: 800;
}

.card-body p, .card-body .card-title {
    color: #f8f9fa !important;
    font-weight: 500;
}

/* Warna Card Background */
.bg-primary-gradient { background: linear-gradient(45deg, #4099ff, #73b4ff); }
.bg-success-gradient { background: linear-gradient(45deg, #2ed8b6, #59e0c5); }
.bg-warning-gradient { background: linear-gradient(45deg, #FFB64D, #ffcb80); }
.bg-danger-gradient { background: linear-gradient(45deg, #FF5370, #ff869a); }

/* =========================================
   4. MENU KHUSUS SUPERADMIN
   ========================================= */

/* Sidebar Menu Superadmin */
.menu-superadmin {
    background-color: rgba(0,0,0,0.25);
    border-left: 4px solid #038c24; /* Biru muda */
}

/* Spinner Loading Button */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}