/* Mobile compatibility layer for the Admin and User consoles. */
html {
    -webkit-text-size-adjust: 100%;
}

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

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

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

.mobile-sidebar-backdrop {
    display: none;
}

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        min-width: 0 !important;
    }

    body.gray-bg {
        overflow-x: hidden;
    }

    .wrapper,
    .wrapper-content {
        padding: 10px 8px;
    }

    .row {
        margin-right: -8px;
        margin-left: -8px;
    }

    [class*="col-xs-"],
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        padding-right: 8px;
        padding-left: 8px;
    }

    .ibox {
        margin-bottom: 12px;
    }

    .ibox-title {
        min-height: 44px;
        padding: 11px 10px 7px;
    }

    .ibox-content,
    .panel-body,
    .modal-body {
        padding: 12px 10px;
    }

    .ibox-title h5,
    .panel-title,
    .layui-elem-quote {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    .pull-left,
    .pull-right {
        max-width: 100%;
    }

    /* Keep the complete menu available as an off-canvas drawer. */
    body.fixed-sidebar #page-wrapper,
    body.fixed-sidebar.mini-navbar #page-wrapper,
    body.body-small.fixed-sidebar.mini-navbar #page-wrapper {
        width: 100%;
        margin-left: 0 !important;
        padding-right: 8px;
        padding-left: 8px;
    }

    body.fixed-sidebar .navbar-static-side,
    body.fixed-sidebar.body-small .navbar-static-side {
        display: none !important;
        width: min(86vw, 280px) !important;
        box-shadow: 4px 0 18px rgba(0, 0, 0, .28);
    }

    body.fixed-sidebar.mini-navbar .navbar-static-side,
    body.fixed-sidebar.body-small.mini-navbar .navbar-static-side {
        display: block !important;
        width: min(86vw, 280px) !important;
    }

    body.mini-navbar .profile-element,
    body.mini-navbar .nav-label,
    body.mini-navbar .navbar-default .nav li a span {
        display: inline;
    }

    body.mini-navbar .logo-element {
        display: none;
    }

    body.mini-navbar .nav-header {
        padding: 18px 16px;
    }

    body.fixed-sidebar.mini-navbar .navbar-default .nav > li > a {
        padding: 12px 16px;
        font-size: 14px;
    }

    body.fixed-sidebar.mini-navbar .nav li > .nav-second-level,
    body.fixed-sidebar.mini-navbar .nav li:hover > .nav-second-level {
        position: static;
        width: auto;
        min-width: 0;
        margin-left: 0;
    }

    .nav-close {
        display: block;
    }

    .mobile-sidebar-backdrop {
        position: fixed;
        z-index: 2000;
        inset: 0;
        background: rgba(15, 23, 42, .48);
        touch-action: none;
    }

    body.mini-navbar .mobile-sidebar-backdrop {
        display: block;
    }

    .navbar-static-top {
        min-height: 50px;
    }

    .minimalize-styl-2 {
        min-width: 42px;
        min-height: 40px;
        margin: 5px !important;
        padding: 10px 13px;
    }

    .navbar-top-links {
        float: right;
        margin-right: 4px;
    }

    .navbar-top-links > li > a {
        min-height: 44px;
        padding: 12px 8px;
    }

    .navbar-top-links > li.mobile-visible {
        display: inline-block !important;
    }

    .navbar-top-links > li.mobile-visible > a {
        font-size: 0;
    }

    .navbar-top-links > li.mobile-visible > a .fa {
        font-size: 17px;
    }

    .footer {
        display: none;
    }

    #content-main {
        height: calc(100% - 52px) !important;
    }

    /* Legacy login screens used a fixed 700px desktop canvas. */
    .login-layout {
        top: 50% !important;
        left: 12px !important;
        width: calc(100% - 24px) !important;
        margin: 0 !important;
        transform: translateY(-50%);
    }

    .login-layout .top {
        height: auto !important;
        margin-bottom: 20px !important;
    }

    .login-layout .top h2 {
        height: auto !important;
        font-size: 25px !important;
        line-height: 34px !important;
    }

    .login-layout .lock-holder .form-group {
        float: none !important;
        width: 100% !important;
        margin-bottom: 12px;
    }

    .login-layout .input-text,
    .login-layout .input-password {
        box-sizing: border-box;
        width: 100% !important;
        height: 42px;
    }

    .login-layout .avatar,
    .login-layout .dot-left,
    .login-layout .dot-right {
        display: none !important;
    }

    .login-layout .submit {
        margin-top: 14px !important;
    }

    .login-layout .bottom,
    .bottom {
        right: 0;
        bottom: 12px;
        left: 0;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .myapp-login,
    .myapp-login-logo-block,
    .tpl-login-max {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 8px;
        padding-left: 8px;
        box-sizing: border-box;
    }

    #addyqm {
        width: 100% !important;
        height: auto !important;
    }

    /* Forms become a readable single column on narrow screens. */
    .form-horizontal .control-label,
    .layui-form-label {
        float: none;
        width: auto !important;
        max-width: none;
        padding: 7px 0 !important;
        text-align: left;
        white-space: normal;
    }

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

    .layui-form-item .layui-inline,
    .layui-form-item .layui-input-inline {
        display: block;
        float: none;
        width: 100% !important;
        max-width: none !important;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .layui-input-block,
    .layui-form-item .layui-input-block {
        width: 100%;
        margin-left: 0 !important;
    }

    .layui-input,
    .layui-textarea,
    .layui-select,
    .form-control,
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        max-width: 100% !important;
        min-height: 40px;
        font-size: 16px;
    }

    textarea,
    .layui-textarea {
        min-height: 88px;
    }

    .layui-form-select,
    .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .layui-btn,
    .btn,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 40px;
        touch-action: manipulation;
    }

    .layui-form-item .layui-btn,
    .form-group .btn {
        margin-bottom: 6px;
    }

    /* Tables keep every action/column and can be swiped horizontally. */
    .table-responsive,
    .mobile-table-scroll,
    .layui-table-main {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-table-view,
    .layui-table-box {
        max-width: 100%;
        overflow: hidden !important;
    }

    /* Layui implements fixed columns by cloning the table. The clone easily
       desynchronizes on narrow touch screens; the main table already contains
       the complete columns, so fixed clones are disabled only on mobile. */
    .layui-table-fixed,
    .layui-table-fixed-l,
    .layui-table-fixed-r {
        display: none !important;
    }

    .mobile-table-scroll > table,
    .table-responsive > table {
        width: max-content;
        min-width: 100%;
        white-space: nowrap;
    }

    /* User/channel configuration popups use cards instead of a desktop grid. */
    .mobile-popup-page .wrapper,
    .mobile-popup-page .wrapper-content {
        padding: 8px 6px;
    }

    .mobile-popup-page .text-danger {
        margin-bottom: 8px;
        padding: 8px !important;
        line-height: 1.6;
    }

    .mobile-table-scroll > table.mobile-card-table,
    table.mobile-card-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        border: 0;
        background: transparent;
        white-space: normal;
    }

    .mobile-card-table > colgroup,
    .mobile-card-table > thead {
        display: none;
    }

    .mobile-card-table > tbody {
        display: block;
        width: 100%;
    }

    .mobile-card-table > tbody > tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 4px 10px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }

    .mobile-card-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 10px 0 !important;
        border-width: 0 0 1px !important;
        border-color: #eef0f3 !important;
        white-space: normal;
        box-sizing: border-box;
    }

    .mobile-card-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .mobile-card-table > tbody > tr > td[data-label]::before {
        display: block;
        margin-bottom: 7px;
        color: #6b7280;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        content: attr(data-label);
    }

    .user-product-popup .layui-form-radio {
        margin: 0 10px 8px 0;
        padding-right: 0;
    }

    .user-product-popup .layui-form-select {
        margin-top: 4px;
    }

    .user-product-popup .channel-weight-table {
        width: 100% !important;
        min-width: 0;
        table-layout: fixed;
        white-space: normal;
    }

    .user-product-popup .channel-weight-table th,
    .user-product-popup .channel-weight-table td {
        padding: 6px 3px;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }

    .user-product-popup .channel-weight-table th:first-child,
    .user-product-popup .channel-weight-table td:first-child {
        width: 38px;
    }

    .user-product-popup .channel-weight-table th:last-child,
    .user-product-popup .channel-weight-table td:last-child {
        width: 64px;
    }

    .user-product-popup .channel-weight-table input.layui-input {
        width: 56px !important;
        min-height: 36px;
        padding: 0 5px;
        text-align: center;
    }

    .user-rate-popup .layui-input-inline {
        margin-bottom: 0 !important;
    }

    .mobile-popup-page form > .layui-form-item:last-child {
        position: sticky;
        z-index: 5;
        bottom: 0;
        margin: 0 -6px;
        padding: 9px 6px 3px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -2px 8px rgba(15, 23, 42, .08);
    }

    .mobile-popup-page form > .layui-form-item:last-child .layui-btn {
        width: 100%;
        margin-right: 0;
    }

    .layui-table-cell {
        height: auto;
        min-height: 28px;
        line-height: 28px;
        white-space: nowrap;
    }

    .layui-table-page,
    .pagination,
    .layui-laypage {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Dialogs must never open outside the viewport. */
    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px);
        margin: 10px;
    }

    .layui-layer {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

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

    .layui-layer-iframe .layui-layer-content,
    .layui-layer-iframe iframe {
        width: 100% !important;
    }

    pre,
    code,
    .well {
        max-width: 100%;
        overflow-x: auto;
        word-break: normal;
        -webkit-overflow-scrolling: touch;
    }

    .echarts,
    [id*="chart"],
    [id*="Chart"],
    .edui-editor,
    .edui-editor-iframeholder,
    .webuploader-container {
        max-width: 100% !important;
    }

    .edui-editor-toolbarbox,
    .edui-toolbar {
        max-width: 100%;
        overflow-x: auto;
        white-space: normal;
    }
}