/* Sidebar Collapsed State - Prevents Flash on Page Load */
/* This CSS is applied immediately via inline script before page renders */

html.sidebar-collapsed aside {
    width: 5rem !important;
    /* 80px = w-20 */
}

html.sidebar-collapsed header {
    left: 5rem !important;
}

html.sidebar-collapsed main {
    margin-left: 5rem !important;
}

/* Hide all text when collapsed - CRITICAL for preventing flash */
@media (min-width: 1024px) {
    html.sidebar-collapsed .sidebar-text {
        display: none !important;
    }

    html.sidebar-collapsed nav {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    html.sidebar-collapsed nav a {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }

    html.sidebar-collapsed .logo-area {
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    html.sidebar-collapsed #sidebar-user-card {
        display: none !important;
    }

    html.sidebar-collapsed .only-collapsed {
        display: flex !important;
    }

    html.sidebar-collapsed #sidebar-expand-icon {
        display: block !important;
    }

    html.sidebar-collapsed #sidebar-collapse-icon {
        display: none !important;
    }
}

/* Mobile: Reset all collapsed styles */
@media (max-width: 1024px) {
    html.sidebar-collapsed aside,
    html.sidebar-collapsed header,
    html.sidebar-collapsed main {
        width: auto !important;
        left: auto !important;
        margin-left: auto !important;
    }
}