/* Modern Sidebar Menu Styles */
#mn .selected a {
    background-color: var(--color-primary) !important;
    color: white !important;
}

#mn a {
    color: rgb(209 213 219); /* text-gray-300 */
    font-size: 16px; /* Base font size */
}

/* Keep sub-menu font size as is (text-xs = 12px) */
#mn .submenu a {
    font-size: 0.75rem; /* 12px - keep unchanged */
}

#mn a:hover {
    background-color: rgb(31 41 55); /* bg-gray-800 */
}

/* Suppress hover effect on logo link */
#mn .logo a.logo-link:hover {
    background-color: transparent !important;
}

/* Sidebar sections */
#mn .sidebar-header {
    flex-shrink: 0;
}

#mn .sidebar-footer {
    flex-shrink: 0;
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: none;
}

/* Search results positioning */
#mn .search {
    position: relative;
}

/* Search input styling - dark background with readable text */
#mn #id_lead_search {
    background-color: rgb(55 65 81) !important; /* gray-700 */
    border: 1px solid rgb(75 85 99) !important; /* gray-600 */
    color: rgb(243 244 246) !important; /* gray-100 - light text */
}

#mn #id_lead_search::placeholder {
    color: rgb(156 163 175) !important; /* gray-400 - readable placeholder */
    opacity: 1;
}

#mn #id_lead_search:focus {
    background-color: rgb(55 65 81) !important;
    border-color: var(--color-primary, #D34108) !important;
    color: rgb(243 244 246) !important;
}

#id_lead_search_results {
    max-height: calc(100vh - 140px) !important; /* Dynamic height based on viewport */
    overflow-y: auto;
}

/* User profile block styling */
#mn .user-profile-block {
    background-color: rgb(31 41 55); /* bg-gray-800 */
    cursor: pointer;
    transition: background-color 0.2s;
    overflow: visible; /* Ensure profile picture isn't clipped */
}

#mn .user-profile-block:hover {
    background-color: rgb(37 47 63); /* slightly lighter on hover */
}

/* Profile picture styling in sidebar */
#mn .user-profile-block .profile_pic {
    width: 2.5rem !important; /* w-10 = 40px */
    height: 2.5rem !important;
    border-radius: 50% !important;
    border: 2px solid rgb(75 85 99) !important; /* border-gray-600 */
    background-color: rgb(229 231 235) !important; /* bg-gray-200 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: visible !important; /* Ensure it's not clipped */
}

/* Status indicator positioning */
#mn .user-profile-block .relative {
    overflow: visible !important; /* Allow status indicator to show */
    margin-right: 0.75rem; /* Add gap between profile picture and name */
}

/* Remove margin from name/email block - circle margin is enough */
#mn .user-profile-block > .relative + .flex-1,
#mn .user-profile-block > .flex-1:first-child {
    margin-left: 0 !important;
    min-width: 0 !important; /* Allow flex item to shrink below content size */
    overflow: hidden !important; /* Prevent overflow */
}

/* Ensure name and email truncate with ellipsis */
#mn .user-profile-block p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* User menu dropdown in sidebar */
#mn #user-menu-dropdown {
    min-width: 200px;
    max-width: calc(100vw - 280px); /* Account for sidebar width + margin */
    max-height: calc(100vh - 20px) !important; /* Prevent going beyond viewport */
    overflow-y: auto; /* Allow scrolling if content exceeds max-height */
    bottom: 100% !important; /* Position above the profile block */
    top: auto !important; /* Override any top positioning */
}

/* Improve contrast for dropdown menu options */
#mn #user-menu-dropdown a {
    color: #374151 !important; /* Dark gray instead of light gray */
}

#mn #user-menu-dropdown a:hover {
    color: #1f2937 !important; /* Even darker on hover */
    background-color: #f3f4f6 !important;
}