#appSidebar {
    overflow-x: hidden;
}

#appContent {
    margin-left: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar-label {
    transition: opacity 0.2s ease, width 0.2s ease;
}

.sidebar-logo-img {
    flex-shrink: 0;
}

.dark .sidebar-logo-img {
    filter: invert(1);
}

#appSidebar .sidebar-item .remix-icon,
#appSidebar nav .remix-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 769px) {
    #appSidebar {
        width: 240px;
        transition: width 0.3s ease-in-out;
    }

    #appContent {
        margin-left: 240px;
        transition: margin-left 0.3s ease-in-out;
    }

    html.sidebar-collapsed #appSidebar,
    #appSidebar.collapsed {
        width: 64px;
    }

    html.sidebar-collapsed #appContent,
    #appSidebar.collapsed ~ #appContent {
        margin-left: 64px;
    }

    #appSidebar.collapsed .sidebar-label,
    html.sidebar-collapsed #appSidebar .sidebar-label {
        opacity: 0;
        width: 0;
        overflow: hidden;
        display: none !important;
    }

    #appSidebar.collapsed .sidebar-header,
    html.sidebar-collapsed #appSidebar .sidebar-header {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    #appSidebar.collapsed .sidebar-logo-link,
    html.sidebar-collapsed #appSidebar .sidebar-logo-link {
        flex: none;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #appSidebar.collapsed .sidebar-item,
    #appSidebar.collapsed nav a,
    #appSidebar.collapsed nav button,
    html.sidebar-collapsed #appSidebar .sidebar-item,
    html.sidebar-collapsed #appSidebar nav a,
    html.sidebar-collapsed #appSidebar nav button {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0;
    }

    #appSidebar.collapsed > .flex-shrink-0,
    html.sidebar-collapsed #appSidebar > .flex-shrink-0 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #appSidebar.collapsed .sidebar-item .rounded-full,
    html.sidebar-collapsed #appSidebar .sidebar-item .rounded-full {
        width: 1.25rem;
        height: 1.25rem;
    }

    #appSidebar.collapsed .sidebar-item .rounded-full .remix-icon,
    html.sidebar-collapsed #appSidebar .sidebar-item .rounded-full .remix-icon {
        width: 0.75rem;
        height: 0.75rem;
    }
}

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    #appSidebar {
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    #appSidebar.mobile-open {
        transform: translateX(0);
    }

    #appContent {
        margin-left: 0;
        transition: margin-left 0.3s ease-in-out;
    }

    #appSidebar.mobile-open ~ #appContent {
        margin-left: 240px;
    }

    #sidebarOverlay {
        display: none !important;
    }
}

.dark #appSidebar .sidebar-item:hover,
.dark #appSidebar a[style],
.dark #appSidebar a.bg-gray-100,
.dark #appSidebar .bg-gray-100 {
    background-color: #222224 !important;
}

.dark #appSidebar,
.dark #appSidebar .border-b,
.dark #appSidebar .border-t,
.dark #appSidebar .border-r {
    border-color: #222224 !important;
}