:root {
    --sa-navigation-topbar-gap: var(--sa-space-sm);
    --sa-navigation-toggle-size: var(--sa-size-field);
    --sa-navigation-toggle-border: var(--sa-border);
    --sa-navigation-toggle-radius: var(--sa-radius-md);
    --sa-navigation-toggle-color: var(--sa-color-sidebar-active);
    --sa-navigation-toggle-background: var(--sa-color-sidebar-hover);
    --sa-navigation-mobile-padding: var(--sa-space-sm);
    --sa-navigation-mobile-gap: var(--sa-space-xs);
    --sa-navigation-mobile-link-padding: var(--sa-space-sm);
    --sa-navigation-mobile-breakpoint: 56.25rem;
    --sa-navigation-compact-breakpoint: 30rem;
}

.superadmin-sidebar__topbar {
    display: contents;
}

.superadmin-navigation-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--sa-navigation-toggle-size);
    height: var(--sa-navigation-toggle-size);
    color: var(--sa-navigation-toggle-color);
    background: var(--sa-navigation-toggle-background);
    border: var(--sa-navigation-toggle-border);
    border-radius: var(--sa-navigation-toggle-radius);
    font: inherit;
    cursor: pointer;
}

.superadmin-navigation-toggle:focus-visible {
    outline: var(--sa-focus-ring);
    outline-offset: 0.1875rem;
    box-shadow: var(--sa-focus-shadow);
}

.superadmin-sidebar__nav a:focus-visible,
.superadmin-sidebar__logout:focus-visible,
.superadmin-brand:focus-visible {
    outline: var(--sa-focus-ring);
    outline-offset: 0.1875rem;
}

@media (max-width: 56.25rem) {
    .superadmin-sidebar {
        gap: var(--sa-navigation-mobile-gap);
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .superadmin-sidebar__topbar {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        gap: var(--sa-navigation-topbar-gap);
    }

    .superadmin-navigation-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .superadmin-sidebar__nav,
    .superadmin-sidebar__footer {
        display: none;
    }

    .superadmin-sidebar.is-menu-open .superadmin-sidebar__nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        gap: var(--sa-navigation-mobile-gap);
        max-height: min(60svh, 32rem);
        overflow-y: auto;
        padding: var(--sa-navigation-mobile-padding) 0 0;
        scrollbar-color: var(--sa-color-border-strong) transparent;
        scrollbar-gutter: stable;
    }

    .superadmin-sidebar.is-menu-open .superadmin-sidebar__nav-group + .superadmin-sidebar__nav-group {
        margin-top: var(--sa-space-sm);
    }

    .superadmin-sidebar.is-menu-open .superadmin-sidebar__nav-label {
        margin-top: var(--sa-space-xs);
    }

    .superadmin-sidebar.is-menu-open .superadmin-sidebar__nav a {
        justify-content: flex-start;
        padding: var(--sa-navigation-mobile-link-padding);
        white-space: normal;
    }

    .superadmin-sidebar.is-menu-open .superadmin-sidebar__footer {
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        margin: 0;
    }
}

@media (max-width: 30rem) {
    .superadmin-sidebar.is-menu-open .superadmin-sidebar__footer {
        display: grid;
        gap: var(--sa-navigation-mobile-gap);
    }
}