/* Sleek Dark Scrollbar Styles */
#left_navbar::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

#left_navbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* Thumb color (light opacity for sleek look) */
    border-radius: 4px; /* Rounded edges */
}

#left_navbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4); /* Slightly brighter on hover */
}

#left_navbar::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.6); /* Brightest during active state */
}

#left_navbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5); /* Track color matching the dark theme */
    border-radius: 4px; /* Rounded edges for consistency */
}

/* For compatibility with non-Webkit browsers (Firefox) */
#left_navbar {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.5); /* Thumb/track colors */
}

.bg-secondary-custom {
    --bs-secondary-rgb: 36, 36, 36; /* Equivalent to #2E2E2E */
    --bs-bg-opacity: 1; /* Adjust opacity globally if needed */
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
}
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}