/*
 * This layer is loaded after page-local styles. Tablet pages in both
 * orientations keep a safe gutter and scroll inside the layout content row
 * instead of being clipped by a local fixed-height or overflow rule.
 */
@media (any-pointer: coarse) and (min-width: 600px) and (min-height: 500px) and (max-width: 1440px) and (max-height: 1440px) {
    :root {
        --tablet-layout-gutter: clamp(0.75rem, 1.6vw, 1.25rem);
        --tablet-popup-top-gap: clamp(2.25rem, 5dvh, 4rem);
    }

    /* One safe top offset for every tablet popup. Bootstrap's centered dialog
       must start below the offset instead of centering tall cards above it. */
    .modal {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal .modal-dialog {
        margin-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
        margin-right: auto !important;
        margin-bottom: max(var(--tablet-layout-gutter), env(safe-area-inset-bottom)) !important;
        margin-left: auto !important;
    }

    .modal .modal-dialog-centered {
        min-height: 0 !important;
        align-items: flex-start !important;
    }

    .modal .modal-content {
        max-height: calc(
            var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
            - var(--tablet-popup-top-gap)
            - var(--tablet-layout-gutter)) !important;
        overflow-y: auto !important;
    }

    /* Non-Bootstrap overlays use the same offset throughout the application. */
    body :where([class$="-modal"], [class*="-modal "]):not(.modal) {
        box-sizing: border-box;
        align-items: flex-start !important;
        padding-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body > header,
    #head {
        position: relative !important;
        top: auto !important;
    }

    .admin-layout {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .main-content {
        box-sizing: border-box;
        height: 100% !important;
        min-height: 0 !important;
        padding-top: max(var(--tablet-layout-gutter), env(safe-area-inset-top)) !important;
        padding-right: max(var(--tablet-layout-gutter), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--tablet-layout-gutter), env(safe-area-inset-bottom)) !important;
        padding-left: max(calc(20px + var(--tablet-layout-gutter)), env(safe-area-inset-left)) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-block: var(--tablet-layout-gutter);
    }

    /* Both wholesale and retail order editors use this shared shell class. */
    .main-content > .order-page-shell {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    .main-content > .order-page-shell > .order-page-grid {
        height: auto !important;
        min-height: 0 !important;
    }

    /* The dimensions form may be taller than a landscape tablet viewport. */
    .dimension-entry-modal {
        align-items: flex-start !important;
        box-sizing: border-box;
        padding-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
        padding-right: max(var(--tablet-layout-gutter), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--tablet-layout-gutter), env(safe-area-inset-bottom)) !important;
        padding-left: max(var(--tablet-layout-gutter), env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-block: var(--tablet-layout-gutter);
    }

    .dimension-entry-card {
        width: min(560px, 100%) !important;
        max-height: none !important;
        margin: auto !important;
        overflow: visible !important;
    }

    /* Retail measurements workspace: the modal itself owns vertical scrolling,
       so its title can never be pushed above the visible tablet viewport. */
    .retail-balconies-modal.retail-measures-modal {
        align-items: flex-start !important;
        box-sizing: border-box;
        padding-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
        padding-right: max(var(--tablet-layout-gutter), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--tablet-layout-gutter), env(safe-area-inset-bottom)) !important;
        padding-left: max(var(--tablet-layout-gutter), env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-block: var(--tablet-layout-gutter);
    }

    .retail-measures-modal-card {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: calc(
            var(--tentoset-viewport-height, 100dvh) - var(--tablet-popup-top-gap) - var(--tablet-layout-gutter)) !important;
        max-height: none !important;
        margin: 0 auto var(--tablet-layout-gutter) !important;
    }

    .retail-measures-modal-card > .retail-balconies-modal-header {
        position: sticky !important;
        top: 0;
        z-index: 20;
        flex: 0 0 auto;
    }

    .retail-measures-layout {
        flex: 0 0 auto !important;
        min-height: 760px !important;
    }

    .retail-measures-workspace {
        min-height: 760px !important;
        overflow: visible !important;
    }

    .retail-measures-canvas {
        flex: 0 0 auto !important;
        min-height: 760px !important;
    }

    /* Every product configurator opened from wholesale or retail Orders uses
       this shared modal/frame pair. Keep the header visible and make a short
       tablet viewport scroll around a full-height configurator. */
    .configurator-modal,
    .configurator-modal.is-sewing-config {
        align-items: flex-start !important;
        box-sizing: border-box;
        padding-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
        padding-right: max(var(--tablet-layout-gutter), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--tablet-layout-gutter), env(safe-area-inset-bottom)) !important;
        padding-left: max(var(--tablet-layout-gutter), env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-block: var(--tablet-layout-gutter);
    }

    .configurator-modal-card,
    .configurator-modal.is-sewing-config .configurator-modal-card {
        flex: 0 0 auto !important;
        width: min(1550px, 100%) !important;
        height: max(
            760px,
            calc(
                var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
                - var(--tablet-popup-top-gap)
                - var(--tablet-layout-gutter))) !important;
        min-height: 760px !important;
        max-height: none !important;
        margin: 0 auto var(--tablet-layout-gutter) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 18px !important;
    }

    .configurator-modal-header {
        flex: 0 0 auto !important;
        min-height: 54px;
    }

    .configurator-frame {
        flex: 1 0 700px !important;
        height: auto !important;
        min-height: 700px !important;
    }

    /* The remaining Order and retail-measurement popup types receive the same
       larger top breathing room, even when their content is compact. */
    .retail-balconies-modal,
    .order-accessories-modal,
    .order-warning-modal {
        box-sizing: border-box;
        padding-top: max(var(--tablet-popup-top-gap), env(safe-area-inset-top)) !important;
    }

    .retail-balconies-modal,
    .order-accessories-modal,
    .order-warning-modal {
        align-items: flex-start !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    .retail-balconies-modal-card,
    .order-accessories-card,
    .order-warning-card {
        flex: 0 0 auto !important;
        margin-right: auto !important;
        margin-bottom: var(--tablet-layout-gutter) !important;
        margin-left: auto !important;
    }
}

/* Sample-book detail cards stay compact and below the top edge on phones and
   tablets. These rules cover every current sample-book modal implementation. */
@media (max-width: 599.98px),
       (any-pointer: coarse) and (min-width: 600px) and (max-width: 1440px) {
    body[data-page^="/samplebooks/"] {
        --samplebook-popup-top-gap: clamp(1.5rem, 5dvh, 3.25rem);
        --samplebook-popup-bottom-gap: clamp(0.75rem, 2dvh, 1.25rem);
    }

    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) .modal-dialog {
        min-height: 0 !important;
        align-items: flex-start !important;
        margin-top: max(var(--samplebook-popup-top-gap), env(safe-area-inset-top)) !important;
        margin-right: auto !important;
        margin-bottom: max(var(--samplebook-popup-bottom-gap), env(safe-area-inset-bottom)) !important;
        margin-left: auto !important;
    }

    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) .modal-content {
        max-height: calc(
            100dvh
            - var(--samplebook-popup-top-gap)
            - var(--samplebook-popup-bottom-gap)) !important;
        overflow-y: auto !important;
    }

    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) .modal-body {
        padding: clamp(0.7rem, 1.8vw, 1rem) !important;
        font-size: clamp(0.78rem, 1.6vw, 0.9rem);
    }

    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal-image,
        .orchestra-modal-image,
        .poly-modal-image,
        .ammos-modal-image,
        .prisma-modal-image,
        .ral-classic-modal-image
    ) {
        width: 100% !important;
        height: auto !important;
        max-height: clamp(110px, 20dvh, 170px) !important;
        object-fit: contain !important;
    }
}

@media (max-width: 599.98px) {
    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) .modal-dialog {
        width: calc(100vw - 2rem) !important;
        max-width: 540px !important;
    }
}

@media (any-pointer: coarse) and (min-width: 600px) and (max-width: 1440px) {
    body[data-page^="/samplebooks/"] :is(
        .samplebook-modal,
        .orchestra-modal,
        .poly-modal,
        .ammos-modal,
        .prisma-modal,
        .ral-classic-modal
    ) .modal-dialog {
        width: min(76vw, 920px) !important;
        max-width: min(76vw, 920px) !important;
    }
}