/* Sidebar Transitions */
#main-nav {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base state for text labels */
.sidebar-text {
    transition: opacity 0.2s ease;
    display: inline-block;
    white-space: nowrap;
}

/* CLEAN ICON VIEW: When parent nav is collapsed (w-20) */
#main-nav.w-20 .sidebar-text {
    display: none !important; /* Physically remove from layout */
    opacity: 0;
    width: 0;
}

/* Ensure icons are perfectly centered when collapsed */
#main-nav.w-20 .flex.items-center {
    justify-content: center;
    gap: 0;
}

#main-nav.w-20 .p-4 {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

#main-nav.w-20 button {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Hide the "Crossa Hub" text but keep the logo centered */
#main-nav.w-20 h1.sidebar-text {
    display: none;
}

/* Ensure the profile section doesn't leak text */
#main-nav.w-20 .sidebar-text.flex.flex-col {
    display: none !important;
}

/* Ensure the hover menu remains clickable and doesn't flicker */
#main-nav .group:hover .absolute {
    display: block !important;
}

/* Adjust menu width when sidebar is collapsed */
#main-nav.w-20 .group .absolute {
    width: 200px; /* Expand horizontally since sidebar is too thin */
    left: 10px;
    border-radius: 0.5rem;
}