/*
 * 全后台移动端适配。
 * 桌面端仅补充安全的媒体/表格约束；主要布局调整限定在手机及窄屏平板。
 */

html,
body {
    max-width: 100%;
}

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

canvas {
    max-width: 100% !important;
}

.mobile-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-table-responsive > .table {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    .wrapper,
    .content-wrapper,
    #pjax-container {
        min-width: 0 !important;
        max-width: 100vw;
    }

    .content-wrapper {
        overflow-x: hidden;
    }

    .content,
    .content-header {
        padding: 8px !important;
    }

    .content > .row,
    #pjax-container > .row {
        margin-right: -4px;
        margin-left: -4px;
    }

    .content > .row > [class*="col-"],
    #pjax-container > .row > [class*="col-"] {
        padding-right: 4px;
        padding-left: 4px;
    }

    .box,
    .panel,
    .small-box,
    .info-box {
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    .box-header,
    .box-body,
    .box-footer,
    .panel-heading,
    .panel-body,
    .panel-footer {
        padding: 10px;
    }

    .box-title,
    .content-header > h1 {
        max-width: 100%;
        font-size: 18px !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* 搜索区、筛选区自动换行，覆盖模板里的固定宽度和 Select2 内联宽度。 */
    form.mobile-filter-form,
    .mobile-filter-form {
        display: flex !important;
        width: 100%;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

    .mobile-filter-form > .form-group,
    .mobile-filter-form > .input-group,
    .mobile-filter-form > input:not([type="hidden"]),
    .mobile-filter-form > select,
    .mobile-filter-form > textarea {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .mobile-filter-form .form-group {
        margin-bottom: 0;
    }

    .mobile-filter-form .form-control,
    .mobile-filter-form .select2-container,
    .mobile-filter-form .bootstrap-select,
    .mobile-filter-form .input-group,
    .mobile-filter-form input[type="date"],
    .mobile-filter-form input[type="datetime-local"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mobile-filter-form .form-group > label,
    .mobile-filter-form .form-group > span:not(.select2):not(.input-group-btn) {
        display: block;
        margin: 0 0 4px;
        white-space: normal;
    }

    .mobile-filter-form > .btn,
    .mobile-filter-form > a.btn,
    .mobile-filter-form > .btn-group,
    .mobile-filter-form > .form-group > .btn,
    .mobile-filter-form > .form-group > a.btn {
        min-height: 36px;
    }

    .mobile-filter-form > .btn,
    .mobile-filter-form > a.btn {
        flex: 1 1 92px;
        margin: 0 !important;
    }

    .mobile-filter-form .btn-group {
        max-width: 100%;
    }

    .mobile-filter-form .dropdown-menu,
    .customer-column-selector .dropdown-menu,
    .send-sample-column-selector .dropdown-menu {
        right: auto !important;
        left: 0 !important;
        width: calc(100vw - 36px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 36px) !important;
    }

    .customer-column-selector .dropdown-menu > li,
    .send-sample-column-selector .dropdown-menu > li {
        width: 100% !important;
    }

    /* 普通编辑表单。 */
    .form-horizontal .control-label {
        padding-top: 0;
        margin-bottom: 6px;
        text-align: left !important;
    }

    .form-horizontal .form-group {
        margin-right: 0;
        margin-left: 0;
    }

    .form-horizontal .form-control,
    .form-horizontal .select2-container,
    .form-horizontal .file-input,
    .form-horizontal .input-group,
    .dataForm .form-control,
    .dataForm .select2-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .form-horizontal .btn-group,
    .box-footer .btn-group {
        margin: 3px 4px 3px 0;
    }

    .dataFormSubmit,
    .dataFormReset {
        margin: 0 !important;
    }

    .radio-inline,
    .checkbox-inline {
        margin: 4px 12px 4px 0 !important;
    }

    /* 所有业务表格保留完整字段，通过横向滑动查看。 */
    .table-responsive,
    .mobile-table-responsive,
    .box-body.table-responsive,
    .panel-body.table-responsive {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    .table-responsive > .table,
    .mobile-table-responsive > .table {
        width: max-content !important;
        min-width: 100%;
        margin-bottom: 0;
    }

    .table th,
    .table td {
        max-width: 280px;
        vertical-align: middle !important;
        overflow-wrap: anywhere;
    }

    .table th {
        white-space: nowrap;
    }

    .table td .btn {
        margin: 1px;
        white-space: nowrap;
    }

    .pagination {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* 图表、富文本、文件上传和日期控件不得撑破视口。 */
    .chart,
    .chart-responsive,
    .file-input,
    .file-preview,
    .kv-file-content,
    .edui-editor,
    .daterangepicker,
    .datepicker,
    iframe {
        max-width: 100% !important;
    }

    .file-preview-frame,
    .file-preview-image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Bootstrap 与 layer 浮层在手机端使用接近全屏的可滚动布局。 */
    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    .modal-content {
        max-height: calc(var(--admin-mobile-vh, 1vh) * 96);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-layer-page,
    .layui-layer-iframe {
        right: auto !important;
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(var(--admin-mobile-vh, 1vh) * 96) !important;
    }

    .layui-layer-iframe iframe,
    .layui-layer-content {
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .layer-page-toolbar {
        padding: 7px 8px !important;
    }

    .login-box {
        width: auto !important;
        max-width: 420px;
        margin: 7vh 12px 0 !important;
    }

    .login-logo {
        font-size: 26px;
    }

    .main-header .logo-lg {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        right: 5px;
        left: auto;
        max-width: calc(100vw - 10px);
    }

    /* iPhone 安全区域。 */
    .main-header,
    .layer-page-toolbar {
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
    }

    .content,
    .login-box {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .content,
    .content-header {
        padding: 6px !important;
    }

    .box-header,
    .box-body,
    .box-footer,
    .panel-body {
        padding: 8px;
    }

    .btn {
        white-space: normal;
    }
}