/* Shared responsive behaviour. Keep wide content scrollable, never clip the page. */
:root {
    --ow-viewport-height: 100vh;
}
@supports (height: 100dvh) {
    :root { --ow-viewport-height: 100dvh; }
}

body :is(main, .container, .container-fluid, .card, .card-body, .card-header, .card-footer),
body .row > *,
body :is(.d-flex, .d-inline-flex, .d-grid) > * {
    min-width: 0;
}
body :is(main, .modal, footer) :is(h1, h2, h3, h4, h5, h6, p, a, label, dd, code) {
    overflow-wrap: anywhere;
}
body :is(main, .modal) :is(img, video, iframe) {
    max-width: 100%;
}
body :is(main, .modal) img:not([height]) {
    height: auto;
}
body :is(main, .modal) pre {
    max-width: 100%;
    overflow: auto;
}
body :is(main, .modal) :is(.form-control, .form-select, .input-group) {
    min-width: 0;
    max-width: 100%;
}
body :is(.table-responsive, .ow-table-scroll) {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ow-table-scroll:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}
body .pagination {
    flex-wrap: wrap;
    row-gap: .4rem;
}
body .navbar :is(.navbar-brand, .navbar-collapse, .navbar-nav, .nav-item) {
    min-width: 0;
}
body .navbar > :is(.container, .container-fluid) {
    box-sizing: border-box;
    max-width: 100%;
}
body .navbar .navbar-brand {
    max-width: calc(100% - 4rem);
    white-space: normal;
    overflow-wrap: anywhere;
}
body .navbar .navbar-brand img {
    max-width: min(42vw, 220px);
    object-fit: contain;
}
body .navbar .navbar-nav .dropdown-menu,
body .navbar .navbar-nav .dropdown-menu.show {
    min-width: min(280px, calc(100vw - 2rem)) !important;
    max-width: min(28rem, calc(100vw - 2rem)) !important;
    max-height: calc(var(--ow-viewport-height) - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: normal;
}
body .navbar .navbar-nav .dropdown-item {
    min-width: 0;
    width: calc(100% - 1rem);
    white-space: normal;
    overflow-wrap: anywhere;
}
body .ow-support-strip :is(.d-inline-flex, .d-flex) {
    flex-wrap: wrap;
    justify-content: center;
}

/* Both standard and form-wrapped Bootstrap modals must fit a short screen. */
body .modal {
    --bs-modal-margin: .75rem;
    height: var(--ow-viewport-height);
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}
body .modal .modal-dialog {
    max-width: min(var(--bs-modal-width, 500px), calc(100% - 1.5rem));
    margin-left: auto;
    margin-right: auto;
}
body .modal .modal-content {
    min-width: 0;
    max-height: calc(var(--ow-viewport-height) - 1.5rem);
    overflow: auto;
    overscroll-behavior: contain;
}
body .modal .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}
body .modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body .modal :is(.modal-header, .modal-footer) {
    flex-shrink: 0;
    gap: .5rem;
}
body .modal .modal-header .btn-close {
    flex-shrink: 0;
}
body .modal .modal-footer {
    flex-wrap: wrap;
}
body .modal :is(.btn, .badge, .input-group-text) {
    white-space: normal;
    overflow-wrap: anywhere;
}
body .modal .modal-fullscreen {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    body .navbar .navbar-collapse {
        box-sizing: border-box;
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        max-height: calc(var(--ow-viewport-height) - 5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body .navbar .navbar-nav .dropdown-menu,
    body .navbar .navbar-nav .dropdown-menu.show {
        position: static !important;
        transform: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: .25rem 0;
        max-height: none;
        box-shadow: none;
    }
    body .navbar .navbar-nav .dropdown-item {
        padding: .7rem .8rem;
    }
}

@media (max-width: 767.98px) {
    body main > .d-flex,
    body :is(.card-header, .card-footer) > .d-flex,
    body .card-header.d-flex {
        flex-wrap: wrap;
        gap: .65rem;
    }
    body :is(main, .modal) :is(.btn, .badge, .input-group-text) {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body :is(main, .modal) .btn-group:not([role="group"][aria-label*="editor"]) {
        flex-wrap: wrap;
        max-width: 100%;
    }
    body .nav-tabs {
        flex-wrap: wrap;
    }
    body .active-services-redesign .service-command-shell > .card-body,
    body #activeServicesList.admin-active-services-redesign {
        max-height: none;
        overflow: visible;
    }
    body .as-tools-toolbar {
        position: static;
    }
    body .portal-nav > .container {
        gap: .75rem;
    }
    body .portal-nav .navbar-brand {
        max-width: 100%;
    }
    body .contextual-docs-helper {
        right: max(.65rem, env(safe-area-inset-right));
        bottom: max(.65rem, env(safe-area-inset-bottom));
    }
    body .contextual-docs-helper__panel {
        max-height: calc(var(--ow-viewport-height) - 7rem);
    }
}

@media (pointer: coarse) {
    body :is(.btn, .page-link, .navbar-toggler, .dropdown-item) {
        min-height: 44px;
    }
    body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
        font-size: max(1rem, 16px);
    }
}
/* A landscape phone can be wider than a tablet breakpoint but much shorter. */
@media (max-height: 600px) and (max-width: 1199.98px) {
    body .active-services-redesign .service-command-shell > .card-body,
    body #activeServicesList.admin-active-services-redesign {
        max-height: none;
        overflow: visible;
    }
    body .as-tools-toolbar {
        position: static;
    }
}
@media print {
    body .ow-table-scroll {
        overflow: visible;
        max-width: none;
    }
}