* { scrollbar-width: thin; }

.sphish-sidebar {
    width: 52px;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60;
}

.sphish-sidebar.sphish-sidebar-expanded {
    width: 240px;
}

/* Collapsed: hide text, center icons */
.sphish-sidebar .sphish-label {
    opacity: 0;
    width: 0;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 100ms ease, width 220ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-label {
    opacity: 1;
    width: auto;
    flex-grow: 1;
    pointer-events: auto;
}

/* Hide group title h2 completely when collapsed */
.sphish-sidebar h2.sphish-label {
    display: none;
}

.sphish-sidebar.sphish-sidebar-expanded h2.sphish-label {
    display: flex;
}

/* Nav item icon spacing */
.sphish-sidebar .sphish-nav-icon {
    margin-right: 0;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-nav-icon {
    margin-right: 0.75rem;
}

/* User info: hidden when collapsed */
.sphish-sidebar .sphish-user-info {
    display: none;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-user-info {
    display: block;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-user-info.flex {
    display: flex;
}

/* Center nav items when collapsed using flex justify */
.sphish-sidebar #nav-sidebar-apps a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sphish-sidebar.sphish-sidebar-expanded #nav-sidebar-apps a {
    justify-content: flex-start;
    padding-left: 0.75rem;
}

/* Center header icon when collapsed */
#nav-sidebar .sphish-header-outer {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

.sphish-sidebar .sphish-header-inner {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-header-outer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-header-inner {
    justify-content: flex-start;
    padding-left: 0.75rem;
    gap: 0.75rem;
}

/* User bottom section — collapsed: centered; expanded: left-aligned */
.sphish-sidebar .sphish-user-container {
    padding: 0;
}

.sphish-sidebar .sphish-user-row {
    justify-content: center;
}

.sphish-sidebar.sphish-sidebar-expanded .sphish-user-row {
    justify-content: flex-start;
}

/* Mobile: starts at 0, expands to full on open */
@media (max-width: 1279px) {
    .sphish-sidebar {
        width: 0;
    }

    .sphish-sidebar.sphish-sidebar-expanded {
        width: 240px;
    }
}

/* Custom sizing (arbitrary Tailwind values via CSS) */
.sphish-nav-spacer {
    width: 52px;
}

.sphish-site-badge {
    height: 28px;
    width: 28px;
}

.sphish-avatar {
    height: 28px;
    width: 28px;
    min-width: 28px;
}

.sphish-user-row {
    height: 52px;
}

.sphish-user-combined {
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    justify-content: center;
    border-radius: 0.375rem;
}

.sphish-sidebar-expanded .sphish-user-combined {
    flex: 1;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    padding-right: 0.5rem;
    border-radius: 0.375rem;
}

.sphish-search-btn {
    height: 36px;
    width: 36px;
    flex-shrink: 0;
}

/* Account dropdown popup positioning */
.sphish-user-container > nav {
    bottom: 52px;
    min-width: 200px;
}

/* Page topbar height — matches collapsed sidebar width */
.sphish-topbar-inner {
    height: 52px;
}

/* Logo image in sidebar header */
.sphish-header-inner img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}