/* P313: 1080p/1440p/2160p retain the same proportions around the 2K baseline. */
:root {
    --ui-scale: .71;
    --page-width: 1065px;
    --ui-border-width: calc(1px * var(--ui-scale));
    --ui-control-height: calc(38px * var(--ui-scale));
    --ui-modal-gap: calc(16px * var(--ui-scale));
    --ui-viewport-gap: calc(32px * var(--ui-scale));
    --ui-modal-max-height: calc(100vh - var(--ui-viewport-gap));
}

@media (min-width: 2200px) {
    :root { --ui-scale: .946667; --page-width: 1420px; }
}

@media (min-width: 3200px) {
    :root { --ui-scale: 1.42; --page-width: 2130px; }
}

@media (min-width: 768px) {
    html { font-size: calc(16px * var(--ui-scale)); }

    body:not([data-mobile-mode="true"]) {
        min-width: 0;
    }

    /* Legacy security cells use pixels; keep their 2K size as the baseline. */
    body .security-center-page { font-size: calc(14px * var(--ui-scale) / .946667); }
    body .security-table { min-width: calc(1100px * var(--ui-scale) / .946667); }
    body .security-table th,
    body .security-table td { font-size: calc(13.5px * var(--ui-scale) / .946667); }
    body .security-role-name-form { min-width: calc(180px * var(--ui-scale) / .946667); }

    body:not([data-mobile-mode="true"]) .main-wrap {
        width: var(--page-width);
        max-width: calc(100vw - 32px);
        padding-right: calc(20px * var(--ui-scale));
        padding-left: calc(20px * var(--ui-scale));
        padding-bottom: calc(264px * var(--ui-scale));
    }

    /* Short desktop pages: keep the existing 264px scaled padding, but make it
       actually scrollable on 1K/2K/4K instead of sitting inside unused viewport. */
    body:not([data-mobile-mode="true"]) .main-wrap.wms-need-bottom-scroll {
        min-height: calc(100vh - (220px * var(--ui-scale)) + (264px * var(--ui-scale)));
    }

    /* Shared navigation frame. */
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .nav-top-row {
        min-height: calc(58px * var(--ui-scale));
        gap: calc(14px * var(--ui-scale));
        padding-top: calc(8px * var(--ui-scale));
        padding-bottom: calc(8px * var(--ui-scale));
        padding-left: max(calc(20px * var(--ui-scale)), calc((100% - var(--page-width)) / 2 + calc(20px * var(--ui-scale))));
        padding-right: max(calc(20px * var(--ui-scale)), calc((100% - var(--page-width)) / 2 + calc(20px * var(--ui-scale))));
    }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .nav-right-block {
        max-width: var(--page-width);
        padding: calc(14px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(16px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .nav-main-links {
        gap: calc(8px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .nav-card {
        min-height: calc(96px * var(--ui-scale));
        gap: calc(6px * var(--ui-scale));
        padding: calc(8px * var(--ui-scale)) calc(5px * var(--ui-scale));
        border-radius: calc(12px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .nav-card svg {
        width: calc(34px * var(--ui-scale));
        height: calc(34px * var(--ui-scale));
        padding: calc(6px * var(--ui-scale));
        border-radius: calc(9px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .brand-mark {
        width: calc(38px * var(--ui-scale));
        height: calc(38px * var(--ui-scale));
        flex-basis: calc(38px * var(--ui-scale));
        border-radius: calc(10px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .brand-mark svg { width: calc(22px * var(--ui-scale)); height: calc(22px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .brand-name { font-size: calc(18px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .brand-subtitle { font-size: calc(11px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-icon-button,
    body:not([data-mobile-mode="true"]) .nav-account-button,
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .navbar-toggler,
    body:not([data-mobile-mode="true"]) .nav-referral-button,
    body:not([data-mobile-mode="true"]) .nav-workspace-button {
        min-height: calc(40px * var(--ui-scale));
        border-radius: calc(10px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .nav-icon-button,
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .navbar-toggler { width: calc(40px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-icon-button svg { width: calc(19px * var(--ui-scale)); height: calc(19px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-referral-button,
    body:not([data-mobile-mode="true"]) .nav-account-button,
    body:not([data-mobile-mode="true"]) .nav-workspace-button { padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-workspace-menu { min-width: calc(280px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-workspace-option { gap: calc(9px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .nav-account-avatar { width: calc(25px * var(--ui-scale)); height: calc(25px * var(--ui-scale)); flex-basis: calc(25px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .dropdown-menu { min-width: calc(240px * var(--ui-scale)); margin-top: calc(7px * var(--ui-scale)) !important; padding: calc(8px * var(--ui-scale)); border-radius: calc(10px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .navbar.nav-bar-main .navigation-list .nav-link { min-height: calc(40px * var(--ui-scale)); gap: calc(12px * var(--ui-scale)); padding: calc(9px * var(--ui-scale)) calc(10px * var(--ui-scale)); }

    body:not([data-mobile-mode="true"]) .wms-page-navigation {
        min-height: calc(44px * var(--ui-scale));
        gap: calc(12px * var(--ui-scale));
        margin-bottom: calc(14px * var(--ui-scale));
        padding: calc(7px * var(--ui-scale)) calc(10px * var(--ui-scale));
        border-radius: calc(6px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .wms-page-navigation-brand,
    body:not([data-mobile-mode="true"]) .wms-page-navigation-actions { gap: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .wms-page-navigation-brand i { width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .wms-page-navigation-action { min-height: calc(30px * var(--ui-scale)); gap: calc(5px * var(--ui-scale)); padding: 0 calc(9px * var(--ui-scale)); border-radius: calc(5px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .wms-page-navigation-action i { width: calc(15px * var(--ui-scale)); height: calc(15px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .platform-public-footer { padding: calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(22px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .platform-public-footer-inner { max-width: var(--page-width); padding-top: calc(14px * var(--ui-scale)); gap: calc(8px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .platform-public-footer-links { gap: calc(7px * var(--ui-scale)) calc(15px * var(--ui-scale)); }

    /* Bootstrap controls and tables use rem after the root size is changed. These rules cover legacy px-based pages. */
    body:not([data-mobile-mode="true"]) input[type="date"],
    body:not([data-mobile-mode="true"]) input[type="datetime-local"],
    body:not([data-mobile-mode="true"]) input[type="month"],
    body:not([data-mobile-mode="true"]) input[type="week"],
    body:not([data-mobile-mode="true"]) input[type="time"] {
        min-width: calc(148px * var(--ui-scale));
        height: var(--ui-control-height);
    }
    body:not([data-mobile-mode="true"]) .form-control,
    body:not([data-mobile-mode="true"]) .form-select,
    body:not([data-mobile-mode="true"]) .btn,
    body:not([data-mobile-mode="true"]) .input-group-text {
        border-width: var(--ui-border-width);
    }
    body:not([data-mobile-mode="true"]) table th,
    body:not([data-mobile-mode="true"]) table td { min-height: calc(36px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .table-pagination-footer { min-height: calc(48px * var(--ui-scale)); gap: calc(12px * var(--ui-scale)); padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .table-pagination-actions { gap: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .table-pagination-size { min-width: calc(76px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .table-pagination-jump { width: calc(72px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .app-version-bar { padding: calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale)); }

    /* All regular Bootstrap dialogs are centered and kept inside the viewport. Floating editors have their own drag/resize behavior. */
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog {
        margin: var(--ui-modal-gap) auto;
        max-width: calc(500px * var(--ui-scale));
        min-height: calc(100% - calc(32px * var(--ui-scale)));
        display: flex;
        align-items: center;
    }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-sm { max-width: calc(300px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-lg { max-width: calc(800px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-xl { max-width: calc(1140px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-content {
        width: 100%;
        max-height: calc(100vh - calc(32px * var(--ui-scale)));
    }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-body { overflow: auto; }
    body:not([data-mobile-mode="true"]) .modal-backdrop { opacity: .5; }
    body:not([data-mobile-mode="true"]) .modal-backdrop.wms-float-backdrop-off,
    body:not([data-mobile-mode="true"]):has(.modal.wms-float-host.show) .modal-backdrop {
        display: none !important;
        opacity: 0 !important;
    }
    body:not([data-mobile-mode="true"]) .offcanvas { width: min(calc(400px * var(--ui-scale)), 100vw); }
    body:not([data-mobile-mode="true"]) .toast-container { padding: calc(12px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .toast { max-width: calc(350px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .renewal-reminder-dialog {
        width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }
    body:not([data-mobile-mode="true"]) .renewal-reminder-content {
        height: min(calc(600px * var(--ui-scale)), var(--ui-modal-max-height));
        min-height: min(calc(360px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) .feedback-trigger {
        right: calc(22px * var(--ui-scale));
        bottom: calc(22px * var(--ui-scale));
        min-height: calc(38px * var(--ui-scale));
        padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
        gap: calc(7px * var(--ui-scale));
        font-size: calc(13px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .feedback-drawer {
        width: min(calc(420px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }
    body:not([data-mobile-mode="true"]) .feedback-drawer-header { padding: calc(16px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .feedback-drawer-body { padding: calc(18px * var(--ui-scale)); }

    /* Common fixed windows and resize handles. */
    body:not([data-mobile-mode="true"]) .support-chat-launcher { left: calc(18px * var(--ui-scale)); width: calc(48px * var(--ui-scale)); height: calc(48px * var(--ui-scale)); border-radius: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .support-chat-window { left: calc(76px * var(--ui-scale)); width: min(calc(440px * var(--ui-scale)), calc(100vw - 32px)); height: min(calc(640px * var(--ui-scale)), calc(100vh - 32px)); min-width: calc(320px * var(--ui-scale)); min-height: calc(360px * var(--ui-scale)); border-radius: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .support-chat-window-header { height: calc(42px * var(--ui-scale)); padding: 0 calc(7px * var(--ui-scale)) 0 calc(12px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .support-chat-frame { height: calc(100% - calc(42px * var(--ui-scale))); }
    body:not([data-mobile-mode="true"]) .support-shell { max-width: min(calc(1480px * var(--ui-scale)), var(--page-width)); }
    body:not([data-mobile-mode="true"]) .support-form { top: calc(88px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .thread-list,
    body:not([data-mobile-mode="true"]) .chat-panel {
        height: calc(100vh - calc(232px * var(--ui-scale)) - calc(264px * var(--ui-scale)));
        max-height: calc(100vh - calc(232px * var(--ui-scale)) - calc(264px * var(--ui-scale)));
        min-height: calc(420px * var(--ui-scale));
    }
    body:not([data-mobile-mode="true"]) .chat-messages { min-height: 0; }
    body:not([data-mobile-mode="true"]) .chat-send { flex-shrink: 0; }
    body:not([data-mobile-mode="true"]) .edc-floating-window,
    body:not([data-mobile-mode="true"]) .company-floating-window { left: calc(40px * var(--ui-scale)); top: calc(70px * var(--ui-scale)); width: min(var(--page-width), calc(100vw - calc(40px * var(--ui-scale)))); height: min(calc(760px * var(--ui-scale)), calc(100vh - calc(100px * var(--ui-scale)))); min-width: calc(420px * var(--ui-scale)); min-height: calc(320px * var(--ui-scale)); border-radius: calc(8px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .edc-floating-header { height: calc(42px * var(--ui-scale)); padding: 0 calc(7px * var(--ui-scale)) 0 calc(12px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .wms-float-content { min-width: calc(420px * var(--ui-scale)); min-height: calc(280px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) .wms-float-resize { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) [data-desktop-scroll-15].desktop-table-scroll-active::-webkit-scrollbar { width: calc(14px * var(--ui-scale)); height: calc(14px * var(--ui-scale)); }
    body:not([data-mobile-mode="true"]) [data-desktop-scroll-15].desktop-table-scroll-active::-webkit-scrollbar-thumb { min-height: calc(38px * var(--ui-scale)); border-width: calc(3px * var(--ui-scale)); border-radius: calc(8px * var(--ui-scale)); }

    /* Fixed-size desktop dialogs use the same scale as the page. Inline sizes written after a user resize remain authoritative. */
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog {
        width: min(calc(500px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(500px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-height: var(--ui-modal-max-height);
    }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-sm {
        width: min(calc(300px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(300px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-lg {
        width: min(calc(800px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(800px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }
    body:not([data-mobile-mode="true"]) .modal:not(.wms-float-host) .modal-dialog.modal-xl {
        width: min(calc(1140px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1140px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }

    /* Known desktop editors and settings windows. Mobile rules are intentionally excluded. */
    body:not([data-mobile-mode="true"]) #orderEditModal .modal-dialog {
        width: min(calc(1500px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1500px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        min-width: min(calc(900px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        height: min(calc(800px * var(--ui-scale)), var(--ui-modal-max-height));
        min-height: min(calc(520px * var(--ui-scale)), var(--ui-modal-max-height));
        margin: var(--ui-modal-gap) auto;
    }
    body:not([data-mobile-mode="true"]) #orderColumnModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #colSettingsModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #supplierColumnModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #purchaseColumnModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #customerColumnModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #turnoverColumnsModal .modal-dialog {
        width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        min-width: min(calc(520px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-height: var(--ui-modal-max-height);
    }
    body:not([data-mobile-mode="true"]) #orderColumnModal .modal-dialog,
    body:not([data-mobile-mode="true"]) #colSettingsModal .modal-dialog {
        min-height: min(calc(360px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) #orderColumnModal .modal-content,
    body:not([data-mobile-mode="true"]) #colSettingsModal .modal-content {
        min-height: min(calc(600px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) #colSettingsModal .modal-dialog.settings-dialog {
        width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        height: min(calc(600px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) #colSettingsModal .modal-content.settings-content {
        min-width: min(calc(720px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        min-height: min(calc(420px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) #supplierDetailModal .modal-dialog {
        width: min(calc(1540px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1540px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        height: min(calc(900px * var(--ui-scale)), var(--ui-modal-max-height));
        margin: var(--ui-modal-gap) auto;
    }
    body:not([data-mobile-mode="true"]) .security-permission-modal .modal-dialog {
        width: min(calc(1400px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1400px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        height: min(calc(800px * var(--ui-scale)), var(--ui-modal-max-height));
        margin: var(--ui-modal-gap) auto;
    }
    body:not([data-mobile-mode="true"]) .security-permission-modal .modal-content {
        min-width: min(calc(640px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        min-height: min(calc(420px * var(--ui-scale)), var(--ui-modal-max-height));
    }
    body:not([data-mobile-mode="true"]) #turnoverImageModal .modal-dialog {
        width: min(calc(1140px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: min(calc(1140px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }

    /* Standalone company and developer pages use the same viewport contract. */
    body.ce-body,
    body.dev-body { min-width: 0; font-size: calc(14px * var(--ui-scale)); }
    body.ce-body .ce-shell {
        width: var(--page-width);
        max-width: calc(100vw - var(--ui-viewport-gap));
        margin: 0 auto;
    }
    body.ce-body .ce-shell--embedded { width: 100%; max-width: 100%; margin: 0; }
    body.ce-body .ce-header { min-height: calc(58px * var(--ui-scale)); padding-left: calc(18px * var(--ui-scale)); padding-right: calc(18px * var(--ui-scale)); }
    body.ce-body .ce-tabs { gap: calc(5px * var(--ui-scale)); padding: calc(7px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
    body.ce-body .ce-tab { min-width: calc(122px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); padding-left: calc(14px * var(--ui-scale)); padding-right: calc(14px * var(--ui-scale)); }
    body.ce-body .ce-page { max-width: var(--page-width); padding-top: calc(18px * var(--ui-scale)); padding-bottom: calc(264px * var(--ui-scale)); }
    body.ce-body dialog.ce-dialog {
        width: min(calc(1160px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        max-width: calc(100vw - var(--ui-viewport-gap));
        max-height: var(--ui-modal-max-height);
    }
    body.ce-body .ce-dialog-form { max-height: var(--ui-modal-max-height); }
    body.ce-body .ce-dialog-header,
    body.ce-body .ce-dialog-toolbar,
    body.ce-body .ce-dialog-footer { padding: calc(12px * var(--ui-scale)) calc(15px * var(--ui-scale)); }
    body.ce-body .ce-dialog-body { padding: calc(14px * var(--ui-scale)) calc(15px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
    body.ce-body .ce-permission-grid { gap: calc(7px * var(--ui-scale)); }

    body.dev-body .dev-shell {
        width: var(--page-width);
        max-width: calc(100vw - var(--ui-viewport-gap));
        padding: calc(18px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(264px * var(--ui-scale));
    }
    body.dev-body .dev-header { min-height: calc(58px * var(--ui-scale)); padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale)); gap: calc(18px * var(--ui-scale)); }
    body.dev-body .dev-brand-mark { width: calc(34px * var(--ui-scale)); height: calc(34px * var(--ui-scale)); }
    body.dev-body .dev-nav { gap: calc(6px * var(--ui-scale)); }
    body.dev-body .dev-nav a,
    body.dev-body .dev-nav button { min-height: calc(32px * var(--ui-scale)); padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale)); }
    body.dev-body .dev-context { margin-top: calc(18px * var(--ui-scale)); margin-bottom: calc(12px * var(--ui-scale)); }
    body.dev-body .dev-card-head { padding: calc(15px * var(--ui-scale)) calc(16px * var(--ui-scale)); }
    body.dev-body .dev-card-body { padding: calc(16px * var(--ui-scale)); }
    body.dev-body .dev-stat-grid,
    body.dev-body .dev-action-groups { gap: calc(12px * var(--ui-scale)); margin-bottom: calc(14px * var(--ui-scale)); }
    body.dev-body .dev-stat { padding: calc(14px * var(--ui-scale)); }
    body.dev-body .dev-table { min-width: calc(890px * var(--ui-scale)); }

    body:not([data-mobile-mode="true"]) .license-embed {
        min-height: calc(920px * var(--ui-scale));
        max-width: 100%;
    }

    /* Drag/resizable floating dialogs keep their behavior while their default frame and handles scale. */
    body:not([data-mobile-mode="true"]) .wms-float-dialog {
        max-width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
        width: min(calc(960px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }
    body:not([data-mobile-mode="true"]) #orderColumnModal .wms-float-dialog,
    body:not([data-mobile-mode="true"]) #colSettingsModal .wms-float-dialog {
        width: min(calc(1200px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap)));
    }

    /* Standalone EDC is not based on base.html; rem-based Tailwind controls scale through html font-size. */
    body:not([data-mobile-mode="true"]) #dimensionModal > div { width: min(calc(672px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap))); max-width: none; }
    body:not([data-mobile-mode="true"]) #addDimensionModal > div,
    body:not([data-mobile-mode="true"]) #downloadModal > div { width: min(calc(448px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap))); max-width: none; }
    body:not([data-mobile-mode="true"]) #importModal > div { width: min(calc(512px * var(--ui-scale)), calc(100vw - var(--ui-viewport-gap))); max-width: none; }

    /* The standalone desktop mall uses the same page-width contract. */
    .mall-shell,
    .mall-topbar-inner,
    .mall-header-inner,
    .mall-nav-inner,
    .mall-footer-inner {
        width: var(--page-width) !important;
        max-width: calc(100vw - 32px);
    }
    body:has(.mall-shell) { min-width: 0; }
    .mall-header-inner { grid-template-columns: calc(220px * var(--ui-scale)) minmax(0, 1fr) calc(180px * var(--ui-scale)) !important; gap: calc(24px * var(--ui-scale)) !important; }
    .mall-top-links { gap: calc(16px * var(--ui-scale)); }
    .mall-topbar-inner { min-height: calc(32px * var(--ui-scale)); }
    .mall-header { padding: calc(18px * var(--ui-scale)) 0 calc(12px * var(--ui-scale)); }
    .mall-logo { gap: calc(10px * var(--ui-scale)); }
    .mall-logo-mark { width: calc(48px * var(--ui-scale)); height: calc(48px * var(--ui-scale)); font-size: calc(18px * var(--ui-scale)); }
    .mall-logo strong { font-size: calc(22px * var(--ui-scale)); }
    .mall-search { grid-template-columns: 1fr calc(92px * var(--ui-scale)); }
    .mall-search input, .mall-cart { height: calc(40px * var(--ui-scale)); }
    .mall-search input { padding: 0 calc(16px * var(--ui-scale)); }
    .mall-nav-inner { min-height: calc(36px * var(--ui-scale)); gap: calc(22px * var(--ui-scale)); }
    .mall-nav-cat { padding: calc(9px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
    .mall-main { padding: calc(12px * var(--ui-scale)) 0 calc(28px * var(--ui-scale)); }
    .mall-hero { grid-template-columns: calc(220px * var(--ui-scale)) minmax(0, 1fr) calc(230px * var(--ui-scale)); gap: calc(10px * var(--ui-scale)); }
    .mall-cats, .mall-banner { min-height: calc(360px * var(--ui-scale)); }
    .mall-cats a { padding: calc(9px * var(--ui-scale)) calc(16px * var(--ui-scale)); }
    .mall-slide { padding: calc(42px * var(--ui-scale)) calc(36px * var(--ui-scale)); }
    .mall-slide h2 { font-size: calc(32px * var(--ui-scale)); margin-bottom: calc(12px * var(--ui-scale)); }
    .mall-side { gap: calc(10px * var(--ui-scale)); }
    .mall-user, .mall-news, .mall-section { padding: calc(16px * var(--ui-scale)); }
    .mall-grid { gap: calc(12px * var(--ui-scale)); }
    .mall-card { min-height: calc(188px * var(--ui-scale)); padding: calc(14px * var(--ui-scale)); }
}

@media (max-width: 767.98px) {
    .mall-shell,
    .mall-topbar-inner,
    .mall-header-inner,
    .mall-nav-inner,
    .mall-footer-inner { width: 100% !important; max-width: none; }
    body:has(.mall-shell) { min-width: 0; }
}

#orderEditModal .modal-content {border:2px solid #438bd5;box-shadow:0 16px 54px rgba(0,0,0,.45)}
#orderEditModal .modal-header {border-bottom:2px solid #438bd5}