/*
 * Phone-only responsive layer.
 * Keep the main breakpoint at 640px so desktop and normal iPad viewports stay unchanged.
 */

@media (max-width: 640px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

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

    body.full-height-layout #wrapper,
    body.full-height-layout #page-wrapper {
        min-height: 100%;
        height: auto;
    }

    #wrapper {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    #page-wrapper,
    body.mini-navbar #page-wrapper,
    body.fixed-sidebar.mini-navbar #page-wrapper,
    body.body-small.fixed-sidebar.mini-navbar #page-wrapper,
    body.canvas-menu #page-wrapper,
    body.canvas-menu.mini-navbar #page-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    body.fixed-sidebar .navbar-static-side,
    body.canvas-menu nav.navbar-static-side {
        display: none;
    }

    body.canvas-menu.mini-navbar nav.navbar-static-side {
        display: block;
        width: min(82vw, 260px) !important;
    }

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

    .navbar-header {
        display: inline-flex !important;
        float: left !important;
        min-height: 50px;
        align-items: center;
    }

    .minimalize-styl-2 {
        margin: 8px 4px 6px 4px !important;
        padding: 7px 10px !important;
    }

    .navbar-top-links {
        display: flex !important;
        float: right !important;
        max-width: calc(100% - 52px);
        margin: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-top-links > li,
    .nav.navbar-top-links li {
        flex: 0 0 auto;
        display: inline-flex;
    }

    .nav.navbar-top-links > li > a,
    .nav.navbar-right > li > a,
    .nav.navbar-left > li > a {
        min-height: 50px;
        height: 50px;
        padding: 15px 8px !important;
    }

    .navbar-top-links li:last-child {
        margin-right: 0 !important;
    }

    .content-tabs {
        display: none !important;
    }

    .mainContent,
    #content-main {
        height: calc(100vh - 50px) !important;
        min-height: calc(100vh - 50px) !important;
        margin-right: -8px !important;
        margin-left: -8px !important;
        overflow: hidden;
    }

    .GangYin_iframe {
        display: block;
        width: 100% !important;
        height: 100% !important;
    }

    .footer {
        display: none;
    }

    .wrapper,
    .wrapper-content,
    .container-div {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px !important;
    }

    .ibox-content,
    .panel-body,
    .well {
        max-width: 100%;
        padding: 12px !important;
        overflow-wrap: anywhere;
    }

    .row {
        margin-right: -5px !important;
        margin-left: -5px !important;
    }

    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .form-horizontal .form-group,
    .form-group {
        min-width: 0;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .form-horizontal .control-label,
    .control-label {
        float: none !important;
        display: block;
        width: 100% !important;
        padding-top: 0 !important;
        margin-bottom: 5px;
        text-align: left !important;
        white-space: normal !important;
    }

    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control,
    .input-group,
    .input-group .form-control,
    .select2,
    .select2-container,
    .select2-container--bootstrap,
    .bootstrap-select,
    .bootstrap-select > .dropdown-toggle {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    textarea.form-control {
        min-height: 86px;
    }

    .input-group {
        display: flex;
    }

    .input-group-addon,
    .input-group-btn {
        width: auto;
        flex: 0 0 auto;
    }

    label.error {
        max-width: 100%;
        white-space: normal;
    }

    .search-collapse {
        display: block !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .select-list ul,
    .layui-layer-content .select-list ul {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        margin: 0 !important;
    }

    .select-list li,
    .layui-layer-content .select-list li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .select-list li label,
    .select-list .select-time label {
        float: none !important;
        display: block;
        width: auto !important;
        margin: 0 0 4px !important;
        text-align: left;
    }

    .select-list input,
    .select-list select,
    .select-list .form-control,
    .select-list .select2-container,
    .select-list .select2-container--bootstrap,
    .select-list .select-time input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .select-time label,
    .select-time span,
    .select-time input {
        float: none !important;
    }

    .select-time span {
        display: block;
        margin: 4px 0 !important;
        text-align: center;
    }

    .btn-group-sm,
    #toolbar,
    .fixed-table-toolbar #toolbar {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    #toolbar .btn,
    .btn-group-sm .btn {
        flex: 1 1 calc(50% - 6px);
        min-height: 34px;
        margin: 0 !important;
        white-space: normal;
    }

    .select-table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 8px !important;
        overflow: hidden;
    }

    .bootstrap-table,
    .bootstrap-table .fixed-table-container,
    .bootstrap-table .fixed-table-body,
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .select-table .bootstrap-table table,
    .bootstrap-table .fixed-table-body table {
        min-width: 640px;
    }

    .table-responsive > table {
        min-width: 560px;
    }

    .bootstrap-table .fixed-table-container:not(.has-card-view) {
        background: #fff;
        border-radius: 8px;
    }

    .bootstrap-table .fixed-table-container:not(.has-card-view) .fixed-table-body {
        touch-action: pan-x pan-y;
    }

    .bootstrap-table .fixed-table-container:not(.has-card-view) .th-inner {
        min-height: 34px;
        padding: 8px 10px !important;
        line-height: 1.35;
        white-space: normal !important;
        word-break: break-word;
    }

    .bootstrap-table .fixed-table-container:not(.has-card-view) .table td,
    .bootstrap-table .fixed-table-container:not(.has-card-view) .table th {
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .bootstrap-table .fixed-table-toolbar {
        display: flex !important;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .bootstrap-table .fixed-table-toolbar:before,
    .bootstrap-table .fixed-table-toolbar:after {
        display: none !important;
    }

    .bootstrap-table .fixed-table-toolbar .bs-bars,
    .bootstrap-table .fixed-table-toolbar .search,
    .bootstrap-table .fixed-table-toolbar .columns,
    .bootstrap-table .fixed-table-toolbar .keep-open,
    .bootstrap-table .fixed-table-toolbar #toolbar {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .bootstrap-table .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    .bootstrap-table .table td,
    .bootstrap-table .table th {
        white-space: normal;
        word-break: break-word;
    }

    .bootstrap-table .table td:last-child {
        min-width: 160px !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view,
    .bootstrap-table .fixed-table-container.has-card-view .fixed-table-body {
        overflow-x: hidden !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0;
        background: transparent;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-views {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table thead,
    .bootstrap-table .fixed-table-container.has-card-view .table colgroup {
        display: none !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody {
        display: block;
        width: 100%;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody > tr {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        border: 1px solid #e3e8ef;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(31, 45, 61, .06);
        overflow: hidden;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody > tr.no-records-found {
        border-style: dashed;
        box-shadow: none;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody > tr.no-records-found > td {
        padding: 20px 12px !important;
        color: #7b8a9a;
        text-align: center !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody > tr > td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view {
        display: grid !important;
        grid-template-columns: minmax(72px, 30%) minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: 7px 10px;
        border-top: 1px solid #f0f3f7;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:empty {
        display: none !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:first-child {
        border-top: 0;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(> label input[type="checkbox"]),
    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(> label input[type="radio"]) {
        grid-template-columns: 1fr;
        padding-top: 8px;
        padding-bottom: 8px;
        background: #f8fafc;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view > label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 28px;
        margin: 0;
        color: #334155;
        font-weight: 600;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-title {
        width: auto !important;
        min-width: 0 !important;
        color: #607080;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.6;
        text-align: left !important;
        white-space: normal;
        word-break: break-word;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-title:empty {
        display: none !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value {
        width: auto !important;
        min-width: 0 !important;
        color: #263544;
        line-height: 1.6;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .label,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .badge {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 22px;
        white-space: normal;
        line-height: 1.35;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value:empty:before {
        content: "-";
        color: #9aa8b6;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value img {
        max-width: 112px;
        height: auto;
        object-fit: contain;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .btn-xs,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        margin: 2px 3px 2px 0 !important;
        padding: 5px 8px;
        white-space: normal;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) {
        grid-template-columns: 1fr;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-title {
        color: #334155;
        font-weight: 700;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-value {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 6px;
        width: 100% !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-value .btn-xs,
    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-value .btn-sm {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .table tbody tr .card-view:has(.btn) .card-view-value .btn i {
        margin-right: 4px;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operation,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operate,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-action,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-actions,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-undefined {
        grid-template-columns: 1fr;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operation .card-view-title,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operate .card-view-title,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-action .card-view-title,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-actions .card-view-title,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-undefined .card-view-title {
        color: #334155;
        font-weight: 700;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operation .card-view-value,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operate .card-view-value,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-action .card-view-value,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-actions .card-view-value,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-undefined .card-view-value {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 6px;
        width: 100% !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operation .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-operate .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-action .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-actions .card-view-value .btn,
    .bootstrap-table .fixed-table-container.has-card-view .card-view-field-undefined .card-view-value .btn {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    .bootstrap-table .fixed-table-container.has-card-view .card-view-value .gy-row-actions {
        width: 100%;
    }

    .bootstrap-table .table td .btn-xs,
    .bootstrap-table .table td .btn-sm,
    .gy-row-actions .btn {
        min-height: 28px;
        margin: 2px 1px !important;
        white-space: normal;
    }

    .gy-row-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0 !important;
        gap: 4px;
    }

    .fixed-table-pagination,
    .fixed-table-pagination .pull-left,
    .fixed-table-pagination .pull-right,
    .fixed-table-pagination .pagination-detail,
    .fixed-table-pagination .pagination {
        float: none !important;
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-align: left;
    }

    .fixed-table-pagination .pagination-detail,
    .fixed-table-pagination .pagination-info,
    .fixed-table-pagination .page-list {
        color: #607080;
        font-size: 12px;
        line-height: 1.7;
        white-space: normal;
    }

    .fixed-table-pagination .pagination {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    .fixed-table-pagination .pagination > li > a,
    .fixed-table-pagination .pagination > li > span {
        min-width: 32px;
        min-height: 32px;
        padding: 6px 9px;
        text-align: center;
    }

    .fixed-table-pagination .page-list .btn-group,
    .fixed-table-pagination .page-list .btn {
        max-width: 100%;
    }

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

    .layui-layer-title {
        padding-right: 42px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .layui-layer-content,
    .layui-layer-page .layui-layer-content,
    .layui-layer-iframe .layui-layer-content {
        max-height: calc(100vh - 96px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .layui-layer-iframe iframe {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 96px) !important;
    }

    .layui-layer-btn {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        padding: 8px 10px 10px !important;
    }

    .layui-layer-btn a {
        margin: 0 !important;
        min-height: 32px;
    }

    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }

    .modal-body {
        max-height: calc(100vh - 130px);
        padding: 14px !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .datetimepicker,
    .datepicker,
    .layui-laydate,
    .select2-dropdown {
        max-width: calc(100vw - 20px) !important;
    }

    .blockUI.blockMsg.blockPage {
        left: 50% !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px;
        transform: translateX(-50%);
    }

    .fd-page,
    .fd-follow-page,
    .fd-dashboard,
    .fd-purchase-reply-page,
    .pc-page,
    .storage-page,
    .share-page {
        width: 100%;
        max-width: 100%;
        padding: 10px !important;
    }

    .fd-section,
    .fd-shell,
    .fd-products,
    .fd-follow-head,
    .fd-reply-section,
    .fd-task-item,
    .fd-order-row,
    .fd-order-section,
    .fd-summary-card,
    .fd-metric,
    .fd-focus-card,
    .pc-head,
    .pc-panel,
    .storage-panel,
    .share-head,
    .share-section {
        max-width: 100%;
        padding: 12px !important;
        overflow-wrap: anywhere;
    }

    .fd-section-head,
    .fd-section-title,
    .fd-product-card-head,
    .fd-title-row,
    .fd-shell-head,
    .fd-task-item-head,
    .fd-order-toolbar,
    .fd-order-detail-head,
    .fd-reply-section-head,
    .fd-purchase-item-head,
    .fd-change-head,
    .storage-head,
    .section-head,
    .product-top,
    .fd-sync-dialog-head,
    .fd-inquiry-reply-summary,
    .fd-inquiry-reply-head {
        flex-direction: column;
        align-items: stretch !important;
    }

    .fd-head-actions,
    .fd-dashboard-source-actions,
    .fd-hero-actions,
    .fd-section-actions,
    .fd-card-actions,
    .fd-card-section-actions,
    .fd-toolbar,
    .fd-toolbar-left,
    .fd-toolbar-right,
    .fd-task-actions,
    .fd-order-filter-row,
    .fd-order-tags,
    .fd-product-title-actions,
    .fd-paper-actions,
    .fd-node-actions,
    .fd-side-actions,
    .fd-purchase-item-actions,
    .fd-summary-actions,
    .storage-actions,
    .pc-actions {
        display: flex !important;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 8px;
    }

    .fd-toolbar-right {
        margin-left: 0 !important;
    }

    .fd-head-actions .btn,
    .fd-dashboard-source-actions .btn,
    .fd-section-actions .btn,
    .fd-card-actions .btn,
    .fd-card-section-actions .btn,
    .fd-toolbar .btn,
    .fd-task-actions .btn,
    .fd-order-side a,
    .fd-paper-actions .btn,
    .fd-node-actions .btn,
    .fd-side-actions .btn,
    .fd-purchase-item-actions .btn,
    .storage-actions .btn,
    .pc-actions .btn {
        flex: 1 1 calc(50% - 8px);
        min-height: 34px;
        white-space: normal;
    }

    .gy-section-nav,
    .fd-product-tabs,
    .fd-task-tabs,
    .fd-summary-pills,
    .fd-order-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .gy-section-nav > *,
    .fd-product-tabs > *,
    .fd-task-tabs > *,
    .fd-summary-pills > *,
    .fd-order-filter-row > * {
        flex: 0 0 auto;
    }

    .fd-rule-strip,
    .fd-summary-grid,
    .fd-summary-strip,
    .fd-order-mix-grid,
    #projectWorkbenchOrderMix .fd-order-mix-grid,
    .fd-order-type-switch,
    .fd-order-head,
    .fd-order-detail-grid,
    .fd-focus-grid,
    .fd-type-summary-row,
    .fd-metric-grid,
    .fd-metric-grid.primary,
    .fd-metric-grid.summary,
    .fd-metric-grid.compact,
    .fd-progress-row,
    .fd-dual-grid,
    .fd-team-grid,
    .fd-product-body,
    .fd-product-top,
    .fd-sync-grid,
    .fd-sync-options,
    .fd-status-grid,
    .fd-project-file-list,
    .fd-file-upload-panel,
    .fd-project-file-list.show,
    .fd-purchase-file-panel,
    .fd-purchase-file-list,
    .fd-purchase-item-list,
    .pc-layout,
    .pc-current-page .pc-layout,
    .share-title,
    .product-card,
    .status-grid {
        grid-template-columns: 1fr !important;
    }

    .fd-kpis,
    .share-kpis,
    .fd-order-mix-grid-inner,
    .fd-type-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fd-workbench-filter,
    .pc-toolbar,
    .storage-mode {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
    }

    .fd-workbench-filter .form-control,
    .fd-workbench-filter .fd-custom-date,
    .pc-toolbar select,
    .pc-toolbar input,
    .storage-mode label {
        width: 100% !important;
        min-width: 0 !important;
    }

    .fd-order-main,
    .fd-order-col,
    .fd-product-info,
    .fd-task-main,
    .fd-purchase-file-main,
    .fd-project-file-main,
    .fd-sync-panel,
    .pc-panel,
    .share-title > *,
    .product-card > * {
        min-width: 0 !important;
    }

    .fd-order-side {
        justify-content: flex-start !important;
    }

    .fd-product-summary {
        align-items: flex-start !important;
    }

    .fd-product-img,
    .product-image,
    .product-image-empty {
        width: 100% !important;
        max-height: 260px;
        object-fit: contain;
    }

    .fd-uploader,
    .fd-project-file-upload {
        min-height: 118px !important;
    }

    .fd-project-file-upload-inner,
    .fd-project-file-row,
    .fd-purchase-file-card,
    .fd-purchase-file-card-head,
    .fd-project-file-card-head {
        align-items: flex-start !important;
    }

    .fd-project-file-upload-inner {
        flex-wrap: wrap;
        padding: 14px !important;
    }

    .fd-project-file-upload-badge,
    .fd-project-file-main,
    .fd-project-file-actions,
    .fd-purchase-file-main,
    .fd-purchase-file-actions {
        width: 100%;
    }

    .fd-process-list,
    .gy-process-list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .fd-process-option,
    .gy-process-option {
        width: 100%;
        min-width: 0 !important;
        justify-content: space-between;
    }

    .fd-color-row,
    .fd-detail-image-row {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .fd-color-image,
    .fd-size-info-layout,
    .fd-size-info-row,
    .fd-sync-options,
    .fd-inquiry-reply-meta {
        width: 100%;
        grid-template-columns: 1fr !important;
    }

    .fd-size-list,
    .size-chart-editor,
    .fd-sync-preview,
    .fd-timeline-snapshot-table,
    .fd-change-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .size-chart-editor table,
    .fd-sync-preview table {
        min-width: 560px;
    }

    .fd-change-table,
    .fd-timeline-snapshot-row {
        grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .fd-timeline-snapshot-row.detail {
        grid-template-columns: 78px minmax(0, 1fr) !important;
    }

    .fd-follow-page {
        padding: 10px !important;
    }

    .fd-product-tab {
        flex: 1 1 calc(50% - 6px) !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .fd-side {
        position: static !important;
        min-height: 0 !important;
    }

    .fd-status-column.is-done-collapsed,
    .fd-done-rail {
        min-height: 86px !important;
    }

    .fd-done-rail {
        flex-direction: row !important;
    }

    .fd-done-rail-title {
        writing-mode: horizontal-tb !important;
    }

    .fd-more-menu,
    .gy-action-list {
        right: auto !important;
        left: 0 !important;
        max-width: calc(100vw - 24px);
    }

    .fd-inquiry-reply-dialog {
        max-height: calc(100vh - 96px) !important;
    }

    .fd-inquiry-reply-summary > span {
        white-space: normal !important;
    }

    .fd-purchase-reply-form {
        max-width: 100%;
    }

    .fd-summary-grid {
        padding: 10px !important;
    }

    .fd-change-panel,
    .fd-reply-section-head,
    .fd-reference-field,
    .fd-purchase-content-field,
    .fd-purchase-files-field,
    .fd-result-field {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .fd-change-cell {
        padding: 8px !important;
    }

    .drawer-panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .dict-card,
    .drawer-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .dict-card-row,
    .dict-card-row:nth-child(3n),
    .dict-card-row:nth-last-child(-n+3) {
        border-right: 0 !important;
        border-bottom: 1px solid #f0f4f8 !important;
        grid-template-columns: 86px minmax(0, 1fr) !important;
    }

    .notice-page {
        max-width: 100%;
        padding: 18px 12px 36px !important;
    }

    .notice-body {
        padding: 18px 14px !important;
    }

    .notice-meta {
        gap: 8px;
    }

    .notice-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .share-progress-panel,
    .product-progress-number,
    .product-progress-label {
        text-align: left !important;
    }

    .invalid {
        min-height: 100vh;
        padding: 12px !important;
    }

    .order-preview-toolbar {
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        padding: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order-preview-status,
    .order-template-field,
    .order-text-tools,
    .order-annotation-tools {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .order-text-tools,
    .order-annotation-tools {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order-preview-toolbar > .btn {
        flex: 1 1 calc(50% - 6px);
        min-height: 34px;
        white-space: normal;
    }

    .order-preview-frame {
        padding: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order-history-dialog .modal-body {
        min-height: 0 !important;
        height: calc(100vh - 122px) !important;
    }

    .order-history-layout {
        flex-direction: column;
    }

    .order-history-list {
        width: 100% !important;
        max-height: 168px;
        border-right: 0 !important;
        border-bottom: 1px solid #d8dee8;
    }

    .signin .login-canvas {
        min-height: 100vh;
        padding: 12px !important;
        overflow: auto;
    }

    .signin .signinpanel {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .signin .brand-panel {
        display: none !important;
    }

    .signin .login-panel,
    .signin .login-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .signin .captcha-group {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .signin .captcha-box,
    .signin .captcha-box img,
    .signin .imgcode {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gy-register-page .signin-info,
    .gy-register-page .col-sm-7 {
        display: none !important;
    }

    .gy-register-page .col-sm-5,
    .gy-register-page .signupForm {
        width: 100% !important;
        max-width: 100% !important;
    }

    .lockscreen-wrapper,
    .gy-error-static .middle-box,
    .middle-box {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .lockscreen-item {
        width: 100% !important;
        max-width: 290px;
    }

    .skin-picker {
        width: 100%;
        max-width: 100%;
        padding: 12px !important;
    }

    .skin-picker-head,
    .skin-picker-actions,
    .theme-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .theme-card {
        width: 100%;
        min-width: 0 !important;
    }

    .gy-icon-picker-shell {
        padding: 10px !important;
    }

    .gy-icon-picker-head {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gy-icon-search,
    .gy-icon-search input {
        width: 100% !important;
    }

    .ico-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .ico-list i {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .ws-screen {
        padding: 10px !important;
    }

    .ws-shell {
        min-height: 0 !important;
        padding: 14px !important;
    }

    .ws-header,
    .ws-meta-strip,
    .ws-kpi-band,
    .ws-main,
    .ws-flow-board,
    .ws-status-row,
    .ws-action-row {
        grid-template-columns: 1fr !important;
    }

    .ws-main-left {
        padding-right: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--ws-line-strong);
    }

    .ws-title-block h1 {
        font-size: 30px !important;
    }

    .ws-kpi,
    .ws-meta-item,
    .ws-status-block {
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--ws-line);
    }

    .ws-flow-axis {
        display: none !important;
    }

    .ws-flow-point {
        top: 0 !important;
    }

    /* Legacy RuoYi panes, trees, editors and upload widgets */
    body.ui-layout-container,
    .ui-layout-container {
        position: relative !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .ui-layout-pane,
    .ui-layout-west,
    .ui-layout-center {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
    }

    .ui-layout-resizer,
    .ui-layout-toggler {
        display: none !important;
    }

    .ui-layout-content {
        width: 100% !important;
        height: auto !important;
        max-height: 260px;
        padding: 10px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .box-main {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 10px !important;
        overflow: hidden;
    }

    .box-main > .box-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px !important;
    }

    .box-main > .box-header .box-title,
    .box-main > .box-header .box-tools {
        float: none !important;
        margin: 0 !important;
    }

    .box-main > .box-header .box-tools {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
        top: auto !important;
    }

    .box-body,
    .box-footer {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .treeShowHideButton {
        margin-bottom: 8px !important;
    }

    .treeSearchInput {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .treeSearchInput label,
    .treeSearchInput input,
    .treeSearchInput .empty,
    .treeSearchInput .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .treeExpandCollapse {
        margin: 6px 0 8px !important;
        line-height: 1.8;
    }

    .ztree,
    .ztree-border,
    .treeselect {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 260px;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ztree li a {
        max-width: 100%;
        min-height: 26px;
        white-space: nowrap;
    }

    .bootstrap-tree-table,
    .bootstrap-tree-table .fixed-table-container,
    .bootstrap-tree-table .fixed-table-body,
    #bootstrap-tree-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .bootstrap-tree-table .treetable-bars {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .bootstrap-tree-table .treetable-bars .tool-left,
    .bootstrap-tree-table .treetable-bars .tool-right {
        float: none !important;
        width: 100%;
        margin: 0 !important;
    }

    .bootstrap-tree-table .treetable-table,
    #bootstrap-tree-table {
        min-width: 640px;
    }

    .bootstrap-tree-table .treetable-tbody td {
        white-space: normal !important;
        word-break: break-word;
    }

    .fixed-columns-right .fixed-table-body {
        overflow-x: auto !important;
    }

    .fixed-table-pagination .pagination {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    .select-list li .btn {
        width: calc(50% - 4px);
        min-height: 34px;
        margin: 2px 0 !important;
        white-space: normal;
    }

    .radio-box,
    .check-box,
    .checkbox-inline,
    .radio-inline {
        max-width: 100%;
        white-space: normal !important;
    }

    .form-horizontal .form-control-static {
        min-height: 0;
        padding-top: 0;
        word-break: break-word;
    }

    .form-horizontal .col-sm-offset-1,
    .form-horizontal .col-sm-offset-2,
    .form-horizontal .col-sm-offset-3,
    .form-horizontal .col-sm-offset-4 {
        margin-left: 0 !important;
    }

    .note-editor,
    .note-editor.note-frame,
    .summernote {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .note-editor .note-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .note-editor .note-toolbar .note-btn-group,
    .note-editor .note-toolbar .btn-group {
        float: none !important;
        margin: 0 2px 4px 0 !important;
    }

    .note-editor .note-editing-area,
    .note-editor .note-editable {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .note-editor .note-editable img {
        height: auto !important;
    }

    .file-input,
    .file-input .file-caption,
    .file-preview,
    .file-drop-zone,
    .file-preview-thumbnails,
    .file-preview-frame,
    .file-actions,
    .file-footer-buttons {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .file-drop-zone {
        margin: 8px 0 !important;
        padding: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .file-preview-frame {
        margin: 6px 0 !important;
    }

    .bootstrap-duallistbox-container {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .bootstrap-duallistbox-container .box1,
    .bootstrap-duallistbox-container .box2,
    .bootstrap-duallistbox-container .buttons,
    .bootstrap-duallistbox-container select,
    .bootstrap-duallistbox-container .filter {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bootstrap-duallistbox-container .btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        margin: 6px 0 !important;
    }

    .bootstrap-duallistbox-container .btn-group .btn {
        width: 100%;
        margin: 0 !important;
        white-space: normal;
    }

    body.white-bg .row.container,
    body.white-bg .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    .imageBox {
        width: 100% !important;
        max-width: 100% !important;
        height: min(58vh, 360px) !important;
        min-height: 240px;
        margin: 0 auto 10px !important;
    }

    .imageBox img {
        max-width: none;
    }

    .action {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0 !important;
    }

    .new-contentarea,
    a.upload-img {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .btn-custom {
        float: none !important;
        flex: 1 1 calc(25% - 8px);
        min-width: 44px;
        margin: 0 !important;
    }

    .cropped {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px;
        margin-top: 8px;
        overflow: hidden;
    }

    .cropped .preview-box {
        width: 100%;
        margin: 0 !important;
    }

    .cropped .img-preview {
        max-width: 100%;
    }

    .user-info-head,
    .user-info-head img {
        max-width: 110px;
    }

    .list-group-item .pull-right {
        float: none !important;
        display: block;
        width: auto !important;
        max-width: 100% !important;
        margin-top: 4px;
        text-align: left;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs > li {
        float: none !important;
        flex: 0 0 auto;
    }

    .theme-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .theme-preview {
        min-width: 0;
    }

    .gy-dialog,
    body.gy-modal-body .gy-dialog {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    .gy-dialog-header,
    body.gy-modal-body .gy-dialog-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
    }

    .gy-dialog-grid,
    body.gy-modal-body .gy-dialog-grid {
        grid-template-columns: 1fr !important;
    }

    .gy-summary,
    .gy-form-panel {
        min-width: 0 !important;
    }

    .gy-upload-action-bar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .gy-upload-trigger,
    .gy-upload-tip {
        width: 100%;
    }

    .gy-file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gy-file-thumb img {
        max-height: 180px;
    }

    .perm-tree,
    #menuTableWrap .perm-tree {
        display: grid !important;
        grid-template-columns: 1fr;
        max-height: 320px;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .tree-group,
    .user-card {
        width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    .tree-item,
    .tree-group-title,
    .user-search-count {
        white-space: normal !important;
    }

    .user-search-inner {
        max-width: 100% !important;
    }

    .user-card-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dept-children {
        padding-left: 10px !important;
        margin-left: 4px !important;
    }

    .fd-head,
    .fd-group-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .fd-group-head,
    .fd-group-body {
        padding: 12px !important;
    }

    .fd-group-actions,
    .fd-chip-row {
        justify-content: flex-start !important;
    }

    .fd-group-actions .btn {
        flex: 1 1 calc(50% - 8px);
        min-height: 34px;
        white-space: normal;
    }

    .fd-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .fd-table {
        min-width: 720px !important;
    }

    .fd-modal .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }

    .fd-composition-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fd-composition-table thead,
    .fd-composition-table tbody,
    .fd-composition-table tr {
        min-width: 420px;
    }

    .fd-image-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fd-image-card,
    .fd-image-preview-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .fd-image-card img,
    .fd-image-preview-item img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .fd-fabric-thumb {
        width: 54px !important;
        height: 54px !important;
        object-fit: cover;
    }

    .fd-fabric-preview {
        width: 100%;
        max-width: 100%;
        padding: 10px !important;
    }

    .fd-fabric-preview img {
        max-height: calc(100vh - 120px) !important;
    }
}

@media (max-width: 420px) {
    #toolbar .btn,
    .btn-group-sm .btn,
    .fd-head-actions .btn,
    .fd-dashboard-source-actions .btn,
    .fd-section-actions .btn,
    .fd-card-actions .btn,
    .fd-card-section-actions .btn,
    .fd-toolbar .btn,
    .fd-task-actions .btn,
    .fd-order-side a,
    .fd-paper-actions .btn,
    .fd-node-actions .btn,
    .fd-side-actions .btn,
    .fd-purchase-item-actions .btn,
    .storage-actions .btn,
    .pc-actions .btn,
    .order-preview-toolbar > .btn {
        flex-basis: 100%;
    }

    .fd-kpis,
    .share-kpis,
    .fd-order-mix-grid-inner,
    .fd-type-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .fd-product-tab {
        flex-basis: 100% !important;
    }

    .ico-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .select-list li .btn,
    .fd-group-actions .btn,
    .btn-custom {
        width: 100%;
        flex-basis: 100%;
    }

    .cropped,
    .gy-file-grid,
    .fd-image-grid {
        grid-template-columns: 1fr !important;
    }
}