/* Mobile / tablet: off-canvas navigation drawer (Material-style slide-over). */

@media (max-width: 1279px) {
    .admin-interface:not(.login):not(.popup) {
        --panel-sidebar-drawer-width: min(288px, 88vw);
    }

    .admin-interface:not(.login):not(.popup) #header {
        position: sticky;
        top: 0;
        z-index: 250;
    }

    .admin-interface:not(.login):not(.popup) #header #user-tools {
        grid-column: 2;
        flex-shrink: 0;
        padding-right: 12px !important;
    }

    .admin-interface:not(.login):not(.popup) #nav-sidebar {
        display: block !important;
        position: fixed;
        top: var(--panel-header-height);
        left: 0;
        bottom: 0;
        width: min(288px, 88vw);
        max-width: 88vw;
        margin: 0 !important;
        flex: none !important;
        z-index: 240;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
        box-shadow: none;
        border-right: 1px solid var(--panel-chrome-border, #ced2de);
        transition: transform var(--panel-sidebar-motion, 240ms cubic-bezier(0.4, 0, 0.2, 1));
        will-change: transform;
        -webkit-overflow-scrolling: touch;
    }

    .admin-interface:not(.login):not(.popup) #nav-sidebar .panel-nav-sidebar-inner {
        max-height: calc(100svh - var(--panel-header-height));
    }

    html.panel-sidebar-drawer-open .admin-interface:not(.login):not(.popup) #nav-sidebar {
        transform: translate3d(0, 0, 0);
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.14);
    }

    /* Drawer always shows full labels, regardless of desktop collapse preference. */
    html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.panel-sidebar-collapsed .admin-interface:not(.login):not(.popup) #nav-sidebar .module th a.panel-sidebar-tab-link {
        justify-content: flex-start;
        gap: 10px;
        padding: 11px 14px;
    }

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

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

    .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 {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .admin-interface:not(.login):not(.popup) #main > #nav-sidebar {
        position: fixed;
        flex: none !important;
        width: min(288px, 88vw) !important;
        max-width: 88vw !important;
    }
}

.panel-sidebar-overlay {
    display: none;
}

@media (max-width: 1279px) {
    .panel-sidebar-overlay {
        display: block;
        position: fixed;
        top: var(--panel-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 230;
        border: 0;
        margin: 0;
        padding: 0;
        background: rgba(15, 23, 42, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--panel-sidebar-motion, 240ms cubic-bezier(0.4, 0, 0.2, 1));
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html.panel-sidebar-drawer-open .panel-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    html.panel-sidebar-drawer-open,
    html.panel-sidebar-drawer-open body.admin-interface:not(.login):not(.popup) {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

@media (max-width: 1279px) {
    [dir="rtl"] .admin-interface:not(.login):not(.popup) #nav-sidebar {
        left: auto;
        right: 0;
        transform: translate3d(100%, 0, 0);
        border-right: 0;
        border-left: 1px solid var(--panel-chrome-border, #ced2de);
    }

    [dir="rtl"] html.panel-sidebar-drawer-open .admin-interface:not(.login):not(.popup) #nav-sidebar {
        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
    }
}

@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
    .admin-interface:not(.login):not(.popup) #nav-sidebar,
    .panel-sidebar-overlay {
        transition: none !important;
    }
}