/*
 * QALAM - shared mobile layout fix
 * 2026-08-09
 *
 * The admin shell historically reserved 239px for the RTL sidenav with an
 * inline margin on #content. That desktop-only offset squeezed every module
 * on phones. This file centralizes the shell spacing and releases it on
 * mobile without changing module logic or desktop behavior.
 */

body.attendance-shell #content.qalam-main-content {
    margin-right: 239px;
    margin-left: 3px;
    margin-top: 74px;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * max-device-width is intentionally included as a fallback for Android
 * in-app/custom-tab browsers that can expose a desktop-like layout viewport
 * while still running on a phone-sized device.
 */
@media (max-width: 991.98px), (max-device-width: 991.98px) {
    html,
    body.attendance-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.attendance-shell .wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.attendance-shell .app-topbar {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.attendance-shell .app-topbar .topbar-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.attendance-shell #content.qalam-main-content,
    body.attendance-shell #content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.attendance-shell #content > *,
    body.attendance-shell #content .container,
    body.attendance-shell #content .container-fluid,
    body.attendance-shell #content .row,
    body.attendance-shell #content [class*="col-"] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Make the shared RTL sidenav a real off-canvas panel on mobile. */
    body.attendance-shell .sidenav-menu {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: var(--ins-sidenav-width, 235px) !important;
        max-width: 88vw;
        margin-right: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .25s ease-in-out, opacity .25s ease-in-out, visibility .25s ease-in-out;
        z-index: 1055;
    }

    html.sidebar-enable body.attendance-shell .sidenav-menu,
    body.attendance-shell.sidebar-enable .sidenav-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    body.attendance-shell .button-close-offcanvas {
        display: block;
    }
}