/* Collapsible icon-only sidebar with header burger toggle. */

:root,
.admin-interface:not(.login):not(.popup) {
    --panel-sidebar-width-expanded: 228px;
    --panel-sidebar-width-collapsed: 76px;
    --panel-sidebar-motion: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --panel-sidebar-icon-size: 16px;
    --panel-sidebar-icon-size-collapsed: 22px;
    --panel-sidebar-toggle-icon-size: 22px;
    --panel-sidebar-toggle-offset-y: 0px;
}

html.panel-sidebar-collapsed,
html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) {
    --panel-sidebar-width: var(--panel-sidebar-width-collapsed);
}

.admin-interface:not(.login):not(.popup) #toggle-nav-sidebar {
    display: none !important;
}

.admin-interface:not(.login):not(.popup) #header #branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
}

.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 11px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    color: var(--panel-accent, #2a5fad);
    cursor: pointer;
    transform: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.16s ease;
}

.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle:hover,
.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle:focus,
.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle:focus-visible,
.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle:active,
.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle:hover:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.admin-interface.login .panel-sidebar-toggle {
    display: none !important;
}

.admin-interface:not(.login):not(.popup) #header #branding .panel-sidebar-toggle-icon {
    display: block;
    width: var(--panel-sidebar-toggle-icon-size, 24px);
    height: var(--panel-sidebar-toggle-icon-size, 24px);
}

/* Branding layout is finalized in panel_header_branding.css */

/* Collapsed sidebar: branding/logo unchanged (see panel_header_branding.css). */

.admin-interface:not(.login):not(.popup) #header,
.admin-interface:not(.login):not(.popup) #nav-sidebar,
.admin-interface:not(.login):not(.popup) #main > main.content,
.admin-interface:not(.login):not(.popup) #main > #nav-sidebar + .content,
.admin-interface.change-list:not(.popup) #main > #nav-sidebar + .content,
.admin-interface.change-form:not(.popup) #main > #nav-sidebar + .content,
.admin-interface.change-list:not(.popup) #main.shifted > #nav-sidebar + .content,
.admin-interface.change-form:not(.popup) #main.shifted > #nav-sidebar + .content {
    transition:
        width var(--panel-sidebar-motion),
        max-width var(--panel-sidebar-motion),
        flex-basis var(--panel-sidebar-motion),
        grid-template-columns var(--panel-sidebar-motion),
        background var(--panel-sidebar-motion);
}

.admin-interface:not(.login):not(.popup) #nav-sidebar {
    transition:
        width var(--panel-sidebar-motion),
        max-width var(--panel-sidebar-motion),
        flex-basis var(--panel-sidebar-motion),
        padding var(--panel-sidebar-motion);
}

.admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-label {
    opacity: 1;
    max-width: 12rem;
    transition:
        opacity 0.18s ease,
        max-width var(--panel-sidebar-motion),
        margin var(--panel-sidebar-motion),
        padding var(--panel-sidebar-motion);
}

.admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon,
.admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon svg {
    transition:
        width var(--panel-sidebar-motion),
        height var(--panel-sidebar-motion),
        transform var(--panel-sidebar-motion),
        color 0.16s ease;
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .module th a.panel-sidebar-tab-link {
    justify-content: center;
    gap: 0;
    padding: 11px 8px;
    margin: 0;
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-label {
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 0;
    pointer-events: none;
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon {
    width: var(--panel-sidebar-icon-size-collapsed);
    height: var(--panel-sidebar-icon-size-collapsed);
    transform: scale(1.04);
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon svg {
    width: var(--panel-sidebar-icon-size-collapsed);
    height: var(--panel-sidebar-icon-size-collapsed);
}

html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .current-model .panel-sidebar-tab-icon {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .admin-interface:not(.login):not(.popup) #header,
    .admin-interface:not(.login):not(.popup) #nav-sidebar,
    .admin-interface:not(.login):not(.popup) #main > main.content,
    .admin-interface:not(.login):not(.popup) #main > #nav-sidebar + .content,
    .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-label,
    .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon,
    .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-sidebar-tab-icon svg,
    .panel-sidebar-toggle {
        transition: none !important;
    }
}