/*
=====================================
  CSS HEADER (Style Dropdown User Baru)
=====================================
*/

/* 1. Mengganti background header dropdown */
.user-header-bg {
    /* Ganti warna background di sini */
    background-color: #F5F1E9 !important; /* Contoh: Light Beige */
    padding: 1rem; /* Padding agar lebih luas */
    margin: 0;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

/* 2. Style untuk Avatar (gambar profil) */
.dropdown-avatar {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%; /* Membuat gambar bulat */
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 3. Style untuk Nama User */
.dropdown-username {
    font-size: 1.1rem;
    font-weight: 700;
    /* Ganti warna nama di sini */
    color: #073C57; /* Contoh: Primary Navy */
}

/* 4. Style untuk Role User */
.dropdown-user-role {
    font-weight: 600;
    /* Ganti warna role di sini */
    color: #C75128; /* Contoh: Warm Orange */
}

/* Specific style for the danger link (Logout) hover */
/* Target the <li> containing the .text-danger link on hover */
.dropdown-menu li:has(> .text-danger):hover {
    background-color: #dc3545; /* Red background for the LI */
}

/* Ensure the text inside the LI stays white on hover */
.dropdown-menu li:has(> .text-danger):hover a,
.dropdown-menu li:has(> .text-danger):hover button {
    color: white !important; 
}

/* 1. Target the logout button/link specifically */
.dropdown-menu li form button.text-danger, /* If it's a button inside a form */
.dropdown-menu li a.text-danger { /* If it's a direct link */
    display: block; /* Make it fill the width */
    width: 100%;
    /* Ensure default padding is consistent if needed */
    /* padding: 0.25rem 1rem; /* Adjust padding to match other dropdown items if necessary */
    /* box-sizing: border-box; /* Include padding in width calculation */
}

/* 2. Apply the hover effect to the button/link itself */
.dropdown-menu li form button.text-danger:hover,
.dropdown-menu li a.text-danger:hover {
    background-color: #dc3545; /* Red background */
    color: white !important; /* White text */
    /* Remove default text-decoration if it appears */
    /* text-decoration: none; */
}