/*
 * Mobile/iPad compatibility for the desktop-oriented admin UI.
 *
 * Keep one predictable desktop canvas on touch devices. The viewport scales
 * that canvas to the device, while users can still pinch-zoom and pan.
 */
:root {
    --desktop-canvas-width: 1180px;
}

html,
body {
    min-width: var(--desktop-canvas-width);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overscroll-behavior-x: none;
}

.layui-layout-admin .layui-body {
    right: 0;
}

.layui-layout-admin > .layui-tab {
    width: auto;
    right: 0;
}

a,
button,
input,
select,
textarea,
.layui-btn,
.layui-nav-item,
.layui-table-cell {
    touch-action: manipulation;
}

.layui-table-view,
.layui-table-box,
.layui-table-main,
.mobile-horizontal-scroll {
    -webkit-overflow-scrolling: touch;
}

.layui-table-main {
    overflow: auto;
}

img,
video,
canvas {
    max-width: 100%;
}

/* Do not let fixed-size dialogs escape the desktop canvas. */
.layui-layer {
    max-width: calc(100vw - 20px);
}

.layui-layer-content iframe {
    max-width: 100%;
}

@media screen and (max-width: 1180px), screen and (pointer: coarse) {
    .layui-table-page,
    .layui-table-tool,
    .layui-tab-title,
    .layui-nav {
        -webkit-overflow-scrolling: touch;
    }
}