/*
 * SGSWMS responsive web UI V2.
 *
 * This file is intentionally scoped to the desktop application shell. PDF,
 * print-template, login, Help, and scanner layouts do not receive the
 * .wms-app-shell root and therefore cannot inherit these rules.
 */

.wms-app-shell {
    --wms-gap-xs: 4px;
    --wms-gap-sm: 8px;
    --wms-gap-md: 12px;
    --wms-gap-lg: 20px;
    --wms-safe-inline: 16px;
    --wms-control-min-height: 34px;
    --wms-sticky-top: 0px;
    --wms-action-sticky-top: 44px;
    --wms-modal-gap: 30px;
    background: #fff;
    min-width: 0;
}

.wms-app-shell,
.wms-app-shell *,
.wms-app-shell *::before,
.wms-app-shell *::after {
    box-sizing: border-box;
}

.wms-app-shell img,
.wms-app-shell video,
.wms-app-shell iframe {
    max-width: 100%;
}

.wms-app-shell #header,
.wms-app-shell #user-nav,
.wms-app-shell #nav-menu,
.wms-app-shell #content,
.wms-app-shell footer {
    max-width: 100%;
}

.wms-app-shell #header {
    margin-top: 0;
}

.wms-app-shell #user-nav > ul,
.wms-app-shell #user-nav form > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wms-app-shell #user-nav > ul > li,
.wms-app-shell #user-nav form > ul > li {
    float: none;
}

.wms-app-shell #nav-menu {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    min-height: 0;
    position: sticky !important;
    top: 0;
    width: 100%;
    z-index: 104;
}

.wms-app-shell.wms-legacy-header-fixed #nav-menu.wms-legacy-nav-fixed-element {
    left: 0;
    position: fixed !important;
    right: 0;
    top: 0;
    width: 100%;
}

.wms-app-shell.wms-legacy-header-fixed #content {
    margin-top: var(--wms-legacy-nav-height, 0px) !important;
}

.wms-app-shell #nav-menu > .container-fluid {
    flex: 1 1 980px;
    min-width: 0;
    order: 1;
    width: auto;
}

.wms-app-shell #nav-menu .navbar-collapse,
.wms-app-shell #nav-menu .navbar-nav {
    min-width: 0;
}

.wms-app-shell #nav-menu .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
}

.wms-app-shell #nav-menu .searchoptiongrp {
    flex: 1 1 560px;
    margin-left: auto;
    min-width: 0;
    order: 2;
    padding: 7px 10px;
}

.wms-app-shell #search {
    align-items: center;
    display: flex !important;
    float: none;
    flex-wrap: wrap;
    gap: var(--wms-gap-xs);
    margin: 0;
    max-width: 100%;
    position: static;
    width: 100%;
}

.wms-app-shell #search select,
.wms-app-shell #search input,
.wms-app-shell #search button,
.wms-app-shell #search .searchtargetdiv {
    margin: 0;
    max-width: 100%;
    position: static;
    right: auto;
    top: auto;
}

.wms-app-shell #search .searchoptiontype {
    flex: 0 1 130px;
}

.wms-app-shell #search .searchtargetdiv {
    flex: 0 1 170px;
}

.wms-app-shell #search .searchtarget {
    max-width: 100%;
    width: 100%;
}

.wms-app-shell #search input.searchterm[type="text"] {
    border-width: 1px;
    flex: 1 1 180px;
    height: 32px;
    min-width: 120px;
    width: auto;
}

.wms-app-shell #search .searchtermtype {
    flex: 0 0 52px;
}

.wms-app-shell #search button {
    flex: 0 0 auto;
    margin-top: 0;
    min-height: 32px;
}

.wms-app-shell #content {
    margin-left: 0 !important;
    margin-right: 0;
    margin-top: 0 !important;
    min-width: 0;
    padding-bottom: 25px;
    width: 100%;
}

.wms-app-shell #content > .container-fluid,
.wms-app-shell .wms-page > .container-fluid,
.wms-app-shell .wms-page .row,
.wms-app-shell .wms-page .row-fluid,
.wms-app-shell .wms-page [class*="col-"],
.wms-app-shell .wms-page [class*="span"] {
    min-width: 0;
}

.wms-app-shell #content-header {
    margin-top: 0;
    position: relative;
    width: 100%;
}

.wms-app-shell #breadcrumb {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}

.wms-app-shell #breadcrumb a {
    overflow-wrap: anywhere;
}

.wms-app-shell .content-header-fixed {
    background: #fff;
    border-bottom: 1px solid #c8d0d8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .10);
    position: sticky !important;
    top: var(--wms-sticky-top) !important;
    width: 100% !important;
}

.wms-app-shell.wms-legacy-header-fixed #content-header.content-header-fixed.wms-legacy-fixed-element {
    top: var(--wms-legacy-nav-height, 0px) !important;
}

.wms-app-shell .savegrp-fixed {
    background: #fff;
    border: 1px solid #c8d0d8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .10);
    left: auto !important;
    max-width: calc(100vw - (2 * var(--wms-safe-inline)));
    padding: 4px;
    position: fixed !important;
    right: var(--wms-safe-inline) !important;
    top: calc(var(--wms-legacy-nav-height, var(--wms-sticky-top)) + 4px) !important;
    width: auto !important;
    z-index: 103 !important;
}

/* Reusable page and component profiles. */
.wms-app-shell .wms-page {
    min-width: 0;
}

.wms-app-shell .wms-form-grid {
    display: grid;
    gap: var(--wms-gap-md);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wms-app-shell .wms-form-field {
    min-width: 0;
}

.wms-app-shell .wms-form-field label,
.wms-app-shell .wms-form-label {
    display: block;
    height: auto;
    white-space: normal;
}

.wms-app-shell .wms-form-field .form-control,
.wms-app-shell .wms-form-control,
.wms-app-shell .wms-form-field .select2-container {
    max-width: 100%;
    width: 100% !important;
}

.wms-app-shell .wms-form-span-2 {
    grid-column: span 2;
}

.wms-app-shell .wms-form-span-full {
    grid-column: 1 / -1;
}

.wms-app-shell .wms-action-bar,
.wms-app-shell .wms-page .savegrp {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    max-width: 100%;
}

.wms-app-shell .wms-action-bar .btn,
.wms-app-shell .wms-page .savegrp .btn {
    float: none;
    margin: 0;
    white-space: normal;
}

.wms-app-shell .wms-action-primary {
    order: 1;
}

.wms-app-shell .wms-action-secondary,
.wms-app-shell .wms-action-overflow {
    order: 2;
}

.wms-app-shell .wms-table-viewport,
.wms-app-shell .wms-table-responsive,
.wms-app-shell .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.wms-app-shell .wms-table-viewport > table,
.wms-app-shell .wms-table-responsive > table,
.wms-app-shell .table-responsive > table {
    margin-bottom: 0;
}

.wms-app-shell .wms-table-key-column {
    font-weight: 700;
}

.wms-app-shell .wms-table-actions {
    white-space: normal;
}

.wms-app-shell .wms-table-actions .btn-group,
.wms-app-shell .wms-table-actions .btn {
    margin-bottom: var(--wms-gap-xs);
}

.wms-app-shell .wms-summary-grid {
    display: grid;
    gap: var(--wms-gap-md);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wms-app-shell .wms-split-panels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wms-gap-md);
}

.wms-app-shell .wms-split-panels > * {
    flex: 1 1 420px;
    min-width: 0;
}

/* Restore Bootstrap 3 modal geometry after Bootstrap Responsive 2.x. */
.wms-app-shell .modal {
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: 0;
    box-shadow: none;
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    right: 0;
    top: 0;
    width: auto;
}

.wms-app-shell .modal-dialog {
    margin: var(--wms-modal-gap) auto;
    max-width: calc(100vw - (2 * var(--wms-safe-inline)));
}

.wms-app-shell .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - (2 * var(--wms-modal-gap)));
    max-width: 100%;
}

.wms-app-shell .modal-body {
    max-height: calc(100vh - 190px);
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
}

@supports (height: 100dvh) {
    .wms-app-shell .modal-content {
        max-height: calc(100dvh - (2 * var(--wms-modal-gap)));
    }

    .wms-app-shell .modal-body {
        max-height: calc(100dvh - 190px);
    }
}

/* Priority complex-page profiles. */
.wms-app-shell .wms-page-billing .billingbox .widget-title {
    flex-wrap: wrap;
    gap: var(--wms-gap-sm);
}

.wms-app-shell .wms-page-billing .widget-content {
    max-width: 100%;
    overflow-x: auto;
}

.wms-app-shell .wms-page-billing .billingbox .service-name-title {
    overflow-wrap: anywhere;
    text-overflow: initial;
    white-space: normal;
}

.wms-app-shell .wms-page-map .toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wms-gap-sm);
}

.wms-app-shell .wms-page-map .toolbar > .pull-right {
    float: none !important;
    margin-left: auto;
}

.wms-app-shell .wms-page-map .warehouse-search-bar {
    flex: 1 1 260px;
    margin-left: 0;
    min-width: 0;
}

.wms-app-shell .wms-page-map .warehouse-search-bar .input-group {
    max-width: 100%;
    width: 100%;
}

.wms-app-shell .wms-page-map .warehouse-map-panel {
    overscroll-behavior: contain;
}

.wms-app-shell .wms-page-designer #realTemplatePreviewStage {
    max-height: calc(100vh - 180px);
    max-width: 100%;
    overflow: auto;
}

.wms-app-shell .wms-page-designer #realTemplatePreviewFrame {
    max-height: calc(100vh - 200px);
}

/* Diagnostics are opt-in through ?responsiveDebug=true. */
.wms-app-shell .wms-responsive-debug {
    background: rgba(17, 24, 39, 0.94);
    border-radius: 4px;
    bottom: 10px;
    color: #fff;
    font: 12px/1.4 Consolas, monospace;
    left: 10px;
    max-width: calc(100vw - 20px);
    padding: 8px 10px;
    pointer-events: none;
    position: fixed;
    white-space: pre-wrap;
    z-index: 20000;
}

.wms-app-shell [data-wms-overflow="true"] {
    outline: 2px solid #d9534f !important;
    outline-offset: -2px;
}

@media (max-width: 1599px) {
    .wms-app-shell #nav-menu > .container-fluid,
    .wms-app-shell #nav-menu .searchoptiongrp {
        flex-basis: 100%;
        width: 100%;
    }
}

@media (max-width: 1199px) {
    .wms-app-shell .wms-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wms-app-shell .table th,
    .wms-app-shell .table td,
    .wms-app-shell .btn {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .wms-app-shell #nav-menu .navbar-header {
        float: none;
        width: 100%;
    }

    .wms-app-shell #nav-menu .navbar-toggle {
        display: block;
    }

    .wms-app-shell #nav-menu .navbar-collapse {
        border-top: 1px solid #e7e7e7;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        width: 100%;
    }

    .wms-app-shell #nav-menu .navbar-collapse.collapse {
        display: none !important;
    }

    .wms-app-shell #nav-menu .navbar-collapse.collapse.in {
        display: block !important;
        max-height: calc(100vh - 150px);
        overflow-y: auto !important;
    }

    .wms-app-shell #nav-menu .navbar-nav {
        float: none !important;
        margin: 7.5px 0;
        width: 100%;
    }

    .wms-app-shell #nav-menu .navbar-nav > li {
        float: none;
    }

    .wms-app-shell #nav-menu .navbar-nav > li > a {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .wms-app-shell .wms-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wms-app-shell .wms-page-edit .row-fluid > .span3,
    .wms-app-shell .wms-page-edit .row-fluid > .span9 {
        display: block;
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .wms-app-shell .wms-page-map .warehouse-container {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .wms-app-shell .wms-page-map .warehouse-map-panel {
        flex: 0 0 58vh;
        height: 58vh;
        max-height: 58vh;
        min-height: 360px;
        overflow: auto;
    }

    .wms-app-shell .wms-page-map .unassigned-panel {
        max-height: 360px;
        width: 100%;
    }

    .wms-app-shell .wms-page-designer .col-md-4,
    .wms-app-shell .wms-page-designer .col-md-8 {
        float: none;
        width: 100%;
    }

    .wms-app-shell .wms-page-designer #realTemplatePreviewStage {
        overflow: auto;
    }

    .wms-app-shell .wms-page-designer #realTemplatePreviewFrame {
        min-width: 816px;
    }

    .wms-app-shell .wms-page-billing .billingbox .widget-content table {
        min-width: 760px;
    }
}

@media (max-width: 767px) {
    .wms-app-shell {
        --wms-modal-gap: 10px;
        --wms-safe-inline: 10px;
    }

    .wms-app-shell #header {
        min-height: 62px;
    }

    .wms-app-shell #header h1 {
        left: 10px;
        margin: 0;
        max-width: calc(100% - 20px);
        top: 10px;
    }

    .wms-app-shell #user-nav {
        background: #2e363f;
        float: none;
        left: auto;
        margin: 0;
        position: static;
        right: auto;
        text-align: left;
        top: auto;
        width: 100%;
    }

    .wms-app-shell #user-nav form,
    .wms-app-shell #user-nav form > ul,
    .wms-app-shell #user-nav > ul {
        float: none !important;
        justify-content: flex-end;
        margin: 0 !important;
        position: static;
        width: 100%;
    }

    .wms-app-shell #user-nav > ul > li > a > span.text,
    .wms-app-shell #user-nav form > ul > li > a > span.text,
    .wms-app-shell #user-nav form > ul > li:first-child {
        display: inline !important;
    }

    .wms-app-shell #user-nav > ul > li > a,
    .wms-app-shell #user-nav form > ul > li > a {
        min-height: 40px;
        padding: 10px;
    }

    .wms-app-shell #nav-menu .searchoptiongrp {
        padding: 8px;
    }

    .wms-app-shell #search .searchoptiontype,
    .wms-app-shell #search .searchtargetdiv {
        flex: 1 1 calc(50% - 4px);
    }

    .wms-app-shell #search input.searchterm[type="text"] {
        flex-basis: calc(100% - 60px);
    }

    .wms-app-shell #content > .container-fluid,
    .wms-app-shell .wms-page > .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wms-app-shell .wms-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wms-app-shell .wms-form-span-2,
    .wms-app-shell .wms-form-span-full {
        grid-column: auto;
    }

    .wms-app-shell .wms-action-bar,
    .wms-app-shell .wms-page .savegrp {
        justify-content: flex-start;
    }

    .wms-app-shell .wms-page-billing .wms-action-bar {
        clear: both;
        float: none;
        width: 100% !important;
    }

    .wms-app-shell .wms-page-edit .row-fluid > [class*="span"] {
        display: block;
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .wms-app-shell .modal-dialog {
        margin: var(--wms-modal-gap) auto;
        width: auto;
    }

    .wms-app-shell .modal-body {
        max-height: calc(100vh - 150px);
    }

    .wms-app-shell .wms-page-map .toolbar > *,
    .wms-app-shell .wms-page-map .toolbar > .pull-right {
        margin-left: 0;
        max-width: 100%;
    }

    .wms-app-shell .wms-page-map .toolbar .btn-group {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 479px) {
    .wms-app-shell #user-nav > ul,
    .wms-app-shell #user-nav form > ul {
        justify-content: stretch;
    }

    .wms-app-shell #user-nav > ul > li,
    .wms-app-shell #user-nav form > ul > li {
        flex: 1 1 auto;
        text-align: center;
    }

    .wms-app-shell #search .searchoptiontype,
    .wms-app-shell #search .searchtargetdiv,
    .wms-app-shell #search input.searchterm[type="text"] {
        flex-basis: 100%;
        width: 100%;
    }

    .wms-app-shell #search .searchtermtype {
        flex: 1 1 auto;
    }
}

@media (max-height: 600px) {
    .wms-app-shell .modal-body {
        max-height: calc(100vh - 130px);
    }

    .wms-app-shell .wms-page-map .warehouse-map-panel {
        flex-basis: 48vh;
        height: 48vh;
        max-height: 48vh;
        min-height: 260px;
    }

    .wms-app-shell .wms-page-designer #realTemplatePreviewStage,
    .wms-app-shell .wms-page-designer #realTemplatePreviewFrame {
        max-height: calc(100vh - 130px);
    }
}

@media print {
    .wms-app-shell .wms-responsive-debug {
        display: none !important;
    }
}

/* Receiving identifier validation stays local to the edited field. */
.identifier-validation-status {
    display: block;
    margin-top: 4px;
    min-height: 16px;
    font-size: 11px;
    line-height: 1.35;
}

.identifier-validation-status.is-checking,
.identifier-validation-status.is-info { color: #2563eb; }
.identifier-validation-status.is-valid { color: #16803a; }
.identifier-validation-status.is-warning { color: #9a5a00; }
.identifier-validation-status.is-error { color: #b42318; }

.identifier-validation-dialog {
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
}

.identifier-validation-dialog ol {
    margin: 8px 0;
    padding-left: 22px;
}

.identifier-validation-dialog li {
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e5e7eb;
}

.identifier-validation-dialog li a {
    float: right;
    margin-left: 8px;
}