/**
 * Mobile scroll fixes — Android / iOS (320px–768px+)
 * Vertical scroll allowed; horizontal overflow clipped.
 */

:root {
    --app-vh: 100vh;
    --app-vh: 100dvh;
    --vh: 1vh; /* updated by scroll-lock.js for legacy iOS */
}

html {
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
}

body {
    overflow-x: clip;
    overflow-y: auto;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: var(--app-vh);
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Main app shell — do not trap vertical scroll */
.wrapper {
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: var(--app-vh);
    overflow-x: clip;
    overflow-y: visible;
}

.main-content {
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: var(--app-vh);
    overflow-x: clip;
    overflow-y: visible;
}

.content-area {
    overflow-x: clip;
    overflow-y: visible;
}

.top-navbar .container-fluid {
    overflow-x: clip;
}

/* Sidebar: fixed panel scrolls internally if menu is long */
.sidebar {
    height: calc(var(--vh, 1vh) * 100);
    height: var(--app-vh);
    max-height: var(--app-vh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Login — allow page scroll when keyboard opens (iOS) */
.login-page {
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: var(--app-vh);
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.login-card {
    overflow-x: clip;
    overflow-y: visible;
}

/* Modals — dynamic viewport height */
.modal-dialog-scrollable .modal-content {
    max-height: calc(var(--app-vh) - 2rem);
    max-height: calc(100vh - 2rem);
}

@media (max-width: 767.98px) {
    .modal-fullscreen-sm-down .modal-content {
        min-height: var(--app-vh);
        min-height: calc(var(--vh, 1vh) * 100);
        max-height: var(--app-vh);
        display: flex;
        flex-direction: column;
    }

    .modal-fullscreen-sm-down .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: clip;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal-dialog-scrollable.modal-fullscreen-sm-down .modal-content {
        max-height: var(--app-vh);
    }

    .modal-dialog-task-fit.modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
        overflow-x: clip;
        -webkit-overflow-scrolling: touch;
    }
}

/* Bootstrap: ensure page scroll restores when no overlay is open */
body:not(.modal-open):not(.offcanvas-open) {
    overflow-y: auto !important;
    padding-right: 0 !important;
}

/* PWA: allow document scroll (bottom nav adds padding, not a scroll trap) */
body.pwa-standalone {
    overscroll-behavior-x: none;
}

body.pwa-has-bottom-nav {
    overflow-y: auto;
}

/* Narrow phones 320px–360px */
@media (max-width: 360px) {
    .content-area {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .pwa-bottom-nav-item span {
        font-size: 0.58rem;
    }
}

/* Prevent horizontal bleed without blocking vertical scroll */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-card .card-body > .table-responsive:not(.mobile-table-keep) {
        overflow-x: visible;
    }
}