/*
 * This layer is loaded after page-local styles. Mobile and tablet pages grow
 * below the viewport without a lower height limit. The document owns vertical
 * scrolling, while tablet pages in both orientations retain their safe gutter.
 */
@media (max-width: 1199.98px),
       (any-pointer: coarse) and (max-width: 1440px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        height: auto !important;
        min-height: var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh)) !important;
        max-height: none !important;
        grid-template-rows: var(--app-header-height) auto var(--app-footer-height) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body > header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1100;
    }

    .admin-layout {
        height: auto !important;
        min-height: calc(
            var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
            - var(--app-header-height)
            - var(--app-footer-height)) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #dashboard {
        position: fixed !important;
        top: var(--app-header-height) !important;
        right: auto !important;
        bottom: var(--app-footer-height) !important;
        left: 0 !important;
        height: auto !important;
        max-height: none !important;
        z-index: 1200 !important;
        isolation: isolate;
    }

    /* In compact mode the collapsed edge is a dedicated menu opener. Keep the
       menu controls out of hit-testing and provide a full touch-size target so
       the opening tap cannot reach a link or field behind the narrow strip. */
    #dashboard.collapsed,
    .dashboard-state-collapsed #dashboard {
        overflow: visible !important;
    }

    #dashboard:not(.collapsed),
    html.dashboard-mobile-open #dashboard {
        overflow: visible !important;
    }

    /* Keep the page visible behind the open drawer, but contain every page-local
       stacking context below the dashboard. Cards can use any internal z-index
       without escaping above the menu or its handle. */
    html.dashboard-mobile-open .admin-layout {
        isolation: isolate;
    }

    html.dashboard-mobile-open #main-area.main-content {
        position: relative;
        z-index: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html.dashboard-mobile-open #dashboard {
        z-index: 1200 !important;
    }

    #dashboard.collapsed .dashboard-scroll-content,
    .dashboard-state-collapsed #dashboard .dashboard-scroll-content {
        pointer-events: none !important;
    }

    #dashboard.collapsed .sidebar-handle,
    .dashboard-state-collapsed #dashboard .sidebar-handle {
        right: -24px;
        width: 44px;
        border-left: 0;
        background: transparent;
        z-index: 30;
        touch-action: manipulation;
    }

    #dashboard:not(.collapsed) .sidebar-handle,
    html.dashboard-mobile-open #dashboard .sidebar-handle {
        right: -24px;
        width: 44px;
        border-left: 0;
        background: transparent;
        z-index: 1201 !important;
        touch-action: manipulation;
    }

    #dashboard.collapsed .sidebar-handle,
    .dashboard-state-collapsed #dashboard .sidebar-handle {
        z-index: 1201 !important;
    }

    #dashboard .sidebar-handle::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 4px;
        width: 16px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05));
        pointer-events: none;
    }

    #dashboard .sidebar-handle:hover::before {
        inset-inline-start: 0;
        width: 20px;
        background: rgba(255, 255, 255, 0.15);
    }

    #sidebarToggle:focus,
    #sidebarToggle:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] #dashboard .sidebar-handle::before {
        border-left-color: #b9cbd4;
        background: linear-gradient(to right, transparent, rgba(8, 127, 150, 0.12));
    }

    .main-content {
        height: auto !important;
        min-height: calc(
            var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
            - var(--app-header-height)
            - var(--app-footer-height)) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Universal content reflow for touch/mobile layouts. Every page element is
       allowed to shrink within the viewport, while text and control groups grow
       vertically instead of forcing horizontal overflow or compressed content. */
    html body #main-area.main-content[data-page],
    html body #main-area.main-content[data-page] * {
        box-sizing: border-box;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }

    html body #main-area.main-content[data-page] :where(
        h1, h2, h3, h4, h5, h6,
        p, label, legend, button, a,
        th, td, dt, dd, strong, span, small,
        .btn, .card-title, .modal-title
    ) {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-orientation: mixed !important;
        writing-mode: horizontal-tb !important;
    }

    html body #main-area.main-content[data-page] :where(
        .d-flex,
        [class*="-actions"],
        [class*="-buttons"],
        [class*="-toolbar"],
        [class*="-filters"],
        [class*="-header"]
    ) {
        flex-wrap: wrap !important;
        block-size: auto !important;
        min-block-size: min-content !important;
    }

    html body #main-area.main-content[data-page] :where(
        main, section, article, form, fieldset,
        .row, .card,
        [class*="-shell"],
        [class*="-panel"],
        [class*="-grid"],
        [class*="-wrap"],
        [class*="-content"]
    ) {
        min-block-size: min-content !important;
    }

    html body #main-area.main-content[data-page] :where(
        button,
        .btn,
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ) {
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }

    html body #main-area.main-content[data-page] :where(button, .btn) {
        block-size: auto !important;
        min-block-size: 44px !important;
        white-space: normal !important;
    }

    html body #main-area.main-content[data-page] :where(img, video) {
        inline-size: auto;
        block-size: auto !important;
        object-fit: contain;
    }

    html body #main-area.main-content[data-page] :where(canvas, svg, iframe) {
        max-inline-size: 100% !important;
    }

    /* Tables use wrapping rows in compact layouts. Headers and data cells share
       the same flexible basis, so wide tables continue on the following visual
       line and increase their height until every value and action is visible. */
    html body #main-area.main-content[data-page] :is(
        .table-responsive,
        [class*="-table-wrap"],
        [class*="-table-container"],
        [class*="-table-scroll"],
        [class*="-table-shell"]
    ) {
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: min-content !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    html body #main-area.main-content[data-page] table {
        display: block !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
        table-layout: fixed !important;
    }

    html body #main-area.main-content[data-page] :where(thead, tbody, tfoot) {
        display: block !important;
        inline-size: 100% !important;
        block-size: auto !important;
    }

    html body #main-area.main-content[data-page] tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: min-content !important;
    }

    html body #main-area.main-content[data-page] :where(th, td) {
        display: block !important;
        flex: 1 1 clamp(9rem, 18vw, 13rem) !important;
        inline-size: auto !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: min-content !important;
        padding: clamp(0.55rem, 1.5vw, 1rem) !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        vertical-align: top;
    }

    html body #main-area.main-content[data-page] :where(th[colspan], td[colspan]) {
        flex-basis: 100% !important;
        inline-size: 100% !important;
    }

    html body #main-area.main-content[data-page]
        tr[data-order-progress-row] > td {
        min-block-size: 0 !important;
        padding: 0 !important;
    }

    html,
    body,
    body * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    body *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Compact tables show the value directly below its own header label. In wider
   landscape layouts the fields may share a visual row; on phones each field is
   promoted to its own full-width row below. */
@media (max-width: 1199.98px),
       (any-pointer: coarse) and (max-width: 1440px) {
    html body #main-area.main-content[data-page] {
        --responsive-table-label: #ffd04d;
    }

    html[data-theme="light"] body #main-area.main-content[data-page] {
        --responsive-table-label: #155a6d;
    }

    html body #main-area.main-content[data-page] table thead {
        position: absolute !important;
        inline-size: 1px !important;
        block-size: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) tr > :where(th, td) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        max-inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: min-content !important;
        text-align: start !important;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) :where(th, td)[data-responsive-label]::before {
        content: attr(data-responsive-label);
        display: block;
        inline-size: 100%;
        color: var(--responsive-table-label);
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1.25;
        text-align: start;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) :where(th, td):not([data-responsive-label])::before {
        display: none;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) :where(th, td) :where(
            [class*="-actions"],
            [class*="-buttons"],
            .btn-group,
            form:not([hidden]):not(.d-none)
        ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem;
        inline-size: 100% !important;
        min-inline-size: 100% !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) :where(th, td) :where(button, .btn) {
        display: flex !important;
        align-items: center;
        justify-content: center;
        inline-size: 100% !important;
        min-inline-size: 100% !important;
        max-inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: 44px !important;
        margin: 0 !important;
    }

    html body #main-area.main-content[data-page]
        tr[data-order-progress-row] > td {
        min-block-size: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 599.98px) {
    html body #main-area.main-content[data-page] :is(tbody, tfoot) tr {
        display: block !important;
        inline-size: 100% !important;
        block-size: auto !important;
        min-block-size: min-content !important;
    }

    html body #main-area.main-content[data-page]
        :is(tbody, tfoot) tr > :where(th, td) {
        flex: 0 0 100% !important;
        inline-size: 100% !important;
        min-inline-size: 100% !important;
        max-inline-size: 100% !important;
    }
}

@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 {
        position: sticky !important;
        top: 0 !important;
    }

    #head {
        position: relative !important;
        top: auto !important;
    }

    .admin-layout {
        height: auto !important;
        min-height: calc(
            var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
            - var(--app-header-height)
            - var(--app-footer-height)) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .main-content {
        box-sizing: border-box;
        height: auto !important;
        min-height: calc(
            var(--tentoset-visual-viewport-height, var(--tentoset-viewport-height, 100dvh))
            - var(--app-header-height)
            - var(--app-footer-height)) !important;
        max-height: none !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: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-x pan-y !important;
        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;
    }
}