/* Opt-in layout for pages aligned with ReturnStockList/Index. */
.reference-page-layout,
.reference-page-layout .card-body,
.reference-page-layout .brand-search-form {
    min-width: 0;
    max-width: 100%;
}

.reference-page-layout .brand-search-form > .form-group:not(.brand-search-actions),
.reference-page-layout > form.view-input-standard > .card-body > .form-group.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
    margin: 0 0 1rem !important;
    padding: 0;
    row-gap: .75rem;
}

.reference-page-layout .brand-search-form > .form-group > [class*="col-"],
.reference-page-layout > form.view-input-standard > .card-body > .form-group.row > [class*="col-"] {
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0 !important;
}

/* Legacy empty columns reserve space between pairs of fields. */
.reference-page-layout .brand-search-form > .form-group > .hidden-xs.hidden-sm,
.reference-page-layout > form.view-input-standard > .card-body > .form-group.row > .hidden-xs.hidden-sm {
    display: none !important;
}

.reference-page-layout .brand-search-form > .form-group > .col-md-1:not(:has(*)) {
    display: none !important;
}

.reference-page-layout [data-testid="view-stock-index-frm-dashboard"] > .form-group > .col-md-2:not(:has(*)) {
    display: none !important;
}

.reference-page-layout .brand-search-actions {
    width: 100%;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
    margin: 1.5rem 0 !important;
}

.reference-page-layout .brand-search-form > .row.col-xs-12,
.reference-page-layout > .row.col-xs-12,
.reference-page-layout > .grid-buttom {
    width: 100%;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.reference-page-layout .container-job-grid {
    height: auto;
    min-height: 0;
}

/* The warehouse scanner nests its fields in a half-width wrapper. */
.reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}

.reference-page-layout #ScanOne > .form-group.row > [class*="col-"]:not(:has(*)) {
    display: none;
}

@media (min-width: 992px) {
    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-4 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-6 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-2:has(> button) {
        flex: 0 0 auto;
        width: auto;
        max-width: 50%;
    }

    .reference-page-layout .brand-search-form > .form-group > [class*="col-"]:has(> .label-style, > label),
    .reference-page-layout > form.view-input-standard > .card-body > .form-group.row > [class*="col-"]:has(> .label-style, > label) {
        flex: 0 0 16.666667%;
        width: 16.666667%;
        max-width: 16.666667%;
    }

    .reference-page-layout .brand-search-form > .form-group > :is(.col-md-2, .col-md-3):has(> input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry),
    .reference-page-layout > form.view-input-standard > .card-body > .form-group.row > :is(.col-md-2, .col-md-3):has(> input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry) {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-6 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > .col-md-2:has(> button) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .reference-page-layout .brand-search-form > .form-group > .col-sm-12:has(> .label-style, > label),
    .reference-page-layout > form.view-input-standard > .card-body > .form-group.row > .col-sm-12:has(> .label-style, > label) {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }

    .reference-page-layout .brand-search-form > .form-group > .col-sm-12:has(> input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry),
    .reference-page-layout > form.view-input-standard > .card-body > .form-group.row > .col-sm-12:has(> input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry) {
        flex: 0 0 66.666667%;
        width: 66.666667%;
        max-width: 66.666667%;
    }
}

@media (max-width: 575px) {
    .reference-page-layout #ScanOne > .form-group.row > .col-md-6:first-child > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .reference-page-layout .brand-search-form > .form-group > [class*="col-"]:has(> .label-style, > label, > input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry),
    .reference-page-layout > form.view-input-standard > .card-body > .form-group.row > [class*="col-"]:has(> .label-style, > label, > input, > select, > textarea, > .k-widget, > .k-picker, > .i-fg-data-entry) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}