/* ==========================================================
   PROJECT-WIDE VERTICAL SCROLL / HOST JITTER FIX
   Applies to the whole application. Horizontal scrolling is
   only allowed inside intentionally scrollable components.
   ========================================================== */

html {
    width: 100%;
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior-x: none;
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior-x: none;
}

/* Never let wrappers create a second page-width scrollbar. */
main,
.main-wrapper,
.content-body,
.page-wrapper,
.site-wrapper,
.container,
.container-fluid {
    max-width: 100%;
    box-sizing: border-box;
}

/* Bootstrap rows can extend by gutters; contain them inside their
   parent without changing normal responsive behavior. */
main .row,
.content-body .row,
.page-wrapper .row,
.site-wrapper .row {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Flex/grid children must be shrinkable. */
main [class*="col-"],
main .d-flex > *,
main .d-grid > *,
.content-body [class*="col-"],
.content-body .d-flex > *,
.content-body .d-grid > * {
    min-width: 0;
    box-sizing: border-box;
}

/* Long content must wrap instead of increasing viewport width. */
main a,
main p,
main span,
main strong,
main small,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main td,
main th,
main label,
.content-body a,
.content-body p,
.content-body span,
.content-body strong,
.content-body small,
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6,
.content-body td,
.content-body th,
.content-body label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Forms/media cannot enlarge a page. */
main img,
main video,
main iframe,
main canvas,
main input,
main select,
main textarea,
main .form-control,
main .form-select,
main .card,
.content-body img,
.content-body video,
.content-body iframe,
.content-body canvas,
.content-body input,
.content-body select,
.content-body textarea,
.content-body .form-control,
.content-body .form-select,
.content-body .card {
    max-width: 100%;
    box-sizing: border-box;
}

/* Only components designed for horizontal scrolling may scroll
   horizontally. The document itself never does. */
.table-responsive,
.overflow-auto,
[data-overflow="horizontal"],
.horizontal-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Keep the vertical page scrollbar stable on desktop so appearance/
   disappearance does not cause a horizontal micro-shift. */
@media (min-width: 768px) {
    html {
        scrollbar-gutter: stable;
    }

    body {
        scrollbar-gutter: stable;
    }

    main,
    .content-body {
        min-width: 0;
        overflow-x: hidden !important;
    }
}

/* Avoid viewport-width rounding errors at smaller sizes. */
@media (max-width: 767.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
    }
}

/* Existing Admin/UserDetails learning-card spacing:
   desktop only, as requested earlier. */
@media (min-width: 992px) {
    .admin-user-doctype .learning-item {
        margin-bottom: 16px;
    }
}