/**
 * Merch admin styles.
 * All rules are scoped under .merch-* classes to avoid affecting other modules.
 */

/* --- Option groups (MerchOptionGroups) --- */

#myAjax .merch-option-group-edit.centered.medium,
.my-modal .merch-option-group-edit.centered.medium {
    width: 1100px;
    max-width: 95vw;
    min-height: 72vh;
}

.my-modal .merch-option-group-edit .portlet-body,
#myAjax .merch-option-group-edit .portlet-body {
    min-height: calc(72vh - 56px);
}

.merch-option-group-edit .option-group-right .table-scrollable {
    max-height: calc(72vh - 160px);
    overflow-y: auto;
}

@media screen and (max-width: 1150px) {
    #myAjax .merch-option-group-edit.centered.medium,
    .my-modal .merch-option-group-edit.centered.medium {
        width: auto;
        max-width: 95vw;
    }
}

.merch-option-group-edit .panel-heading {
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e7ecf1;
}

.merch-option-group-edit .option-group-left .form-group.input.checkbox {
    text-align: center;
}

.merch-option-group-edit .option-group-left .form-group.input.checkbox > label.control-label {
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

.merch-option-group-edit .option-group-left .form-group.input.checkbox > div[class*="col-"] {
    float: none;
    width: 100%;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}

.merch-option-group-edit .option-values-table th,
.merch-option-group-edit .option-values-table td {
    vertical-align: middle !important;
}

.merch-option-group-edit .option-values-table input[type="text"],
.merch-option-group-edit .option-values-table input[type="number"] {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.merch-option-group-edit .option-values-table tbody tr.option-values-placeholder td {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 14px 12px;
    background: #fafbfc;
}

.merch-option-group-edit .option-values-table tfoot tr.add-value-row td {
    background: #f3f8f4;
    border-top: 2px solid #c5e1c8;
    padding: 8px 6px;
}

.merch-option-group-edit .option-values-table tfoot tr.add-value-row .add-value-label {
    color: #3c763d;
    font-size: 14px;
}

.merch-option-group-edit .option-values-table tfoot tr.add-value-row input[type="text"],
.merch-option-group-edit .option-values-table tfoot tr.add-value-row input[type="number"] {
    background: #fff;
}

.merch-option-group-edit .option-values-table tfoot tr.add-value-row .btn {
    min-width: 64px;
}

.merch-option-group-edit .option-values-table th.col-id {
    width: 48px;
}

.merch-option-group-edit .option-values-table th.col-sort {
    width: 90px;
}

.merch-option-group-edit .option-values-table th.col-active {
    width: 70px;
}

.merch-option-group-edit .option-values-table th.col-actions {
    width: 130px;
}

.merch-option-group-edit .option-values-empty {
    color: #888;
    font-style: italic;
    padding: 24px 12px;
    text-align: center;
    border: 1px dashed #dce1e8;
    border-radius: 4px;
    background: #fafbfc;
}

@media (max-width: 991px) {
    .merch-option-group-edit .option-group-left {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e7ecf1;
    }
}

/* --- Merch variants (Merchs/edit) --- */

#myAjax .merch-variant-edit.centered.medium,
.my-modal .merch-variant-edit.centered.medium {
    width: 1200px;
    max-width: 96vw;
    min-height: 72vh;
}

.my-modal .merch-variant-edit .portlet-body,
#myAjax .merch-variant-edit .portlet-body {
    min-height: calc(72vh - 56px);
}

.merch-variant-edit .panel-heading {
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e7ecf1;
}

.merch-variant-edit .variant-details-top {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e7ecf1;
}

.merch-variant-edit .variant-details-top label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.merch-variant-edit .variant-details-top .form-group {
    margin-bottom: 0;
}

.merch-variant-edit .variant-details-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 8px;
}

.merch-variant-edit .variant-details-primary {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    align-items: flex-end;
    gap: 10px 8px;
    min-width: 0;
}

.merch-variant-edit .variant-details-qty {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 10px 8px;
}

.merch-variant-edit .variant-details-qty label,
.merch-variant-edit .variant-label-nowrap {
    white-space: nowrap;
}

.merch-variant-edit .variant-field--id {
    width: 72px;
    flex: 0 0 72px;
}

.merch-variant-edit .variant-field--sku {
    width: 120px;
    flex: 0 0 120px;
}

.merch-variant-edit .variant-field--reserve {
    width: 120px;
    flex: 0 0 120px;
}

.merch-variant-edit .variant-field--bp {
    width: 100px;
    flex: 0 0 100px;
}

.merch-variant-edit .variant-field--price {
    width: 120px;
    flex: 0 0 120px;
}

.merch-variant-edit .variant-field--qty {
    width: 80px;
    flex: 0 0 80px;
}

.merch-variant-edit .variant-field--qty-narrow {
    width: 64px;
    flex: 0 0 64px;
}

.merch-variant-edit .variant-field--hold {
    width: 96px;
    flex: 0 0 96px;
}

.merch-variant-edit .variant-field--active {
    width: 64px;
    flex: 0 0 64px;
}

.merch-variant-edit .variant-details-top .form-control {
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding: 5px 10px;
    line-height: 1.42857143;
    box-sizing: border-box;
}

.merch-variant-edit .variant-details-top input[type="number"].form-control {
    -moz-appearance: textfield;
}

.merch-variant-edit .variant-details-top input[type="number"].form-control::-webkit-inner-spin-button,
.merch-variant-edit .variant-details-top input[type="number"].form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.merch-variant-edit .checkbox-inline-wrap {
    text-align: left;
}

.merch-variant-edit .checkbox-inline-wrap .checkbox {
    margin-top: 0;
    padding-left: 0;
}

@media (min-width: 1200px) {
    .merch-variant-edit .variant-details-fields {
        flex-wrap: nowrap;
    }

    .merch-variant-edit .variant-details-primary {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1199px) {
    .merch-variant-edit .variant-details-primary {
        flex: 1 1 100%;
    }

    .merch-variant-edit .variant-details-qty {
        flex: 1 1 100%;
        max-width: 100%;
        overflow-x: auto;
    }
}

.merch-variant-edit .variant-options-bottom {
    margin-top: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e7ecf1;
}

.merch-variant-edit .variant-options-bottom > .table-scrollable {
    max-height: 220px;
    overflow-y: auto;
}

.merch-variant-edit .variant-inventory-history {
    margin-top: 8px;
}

.merch-variant-edit .variant-inventory-history > .table-scrollable {
    max-height: 220px;
    overflow-y: auto;
}

.merch-variant-edit .variant-inventory-empty {
    color: #888;
    font-style: italic;
    padding: 16px 8px;
}

.merch-variant-edit .variant-inventory-table th,
.merch-variant-edit .variant-inventory-table td {
    vertical-align: middle !important;
}

.merch-variant-edit .variant-inventory-table th.col-date {
    width: 130px;
}

.merch-variant-edit .variant-inventory-table th.col-type,
.merch-variant-edit .variant-inventory-table th.col-field {
    width: 88px;
}

.merch-variant-edit .variant-inventory-table th.col-change,
.merch-variant-edit .variant-inventory-table th.col-qty {
    width: 64px;
}

.merch-variant-edit .variant-inventory-table th.col-user {
    width: 90px;
}

.merch-variant-edit .variant-inventory-table .inv-change-plus {
    color: #3c763d;
    font-weight: 600;
}

.merch-variant-edit .variant-inventory-table .inv-change-minus {
    color: #a94442;
    font-weight: 600;
}

.merch-variant-edit .variant-inventory-notes {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merch-variant-edit .variant-options-table th,
.merch-variant-edit .variant-options-table td {
    vertical-align: middle !important;
}

.merch-variant-edit .variant-options-table select {
    width: 100%;
    min-width: 0;
}

.merch-variant-edit .variant-options-table th.col-actions {
    width: 100px;
}

.merch-variant-edit .variant-options-table tfoot tr.add-variant-option-row td {
    background: #f3f8f4;
    border-top: 2px solid #c5e1c8;
    padding: 8px 6px;
}

.merch-variant-edit .variant-options-table tbody tr.variant-options-placeholder td {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 14px 12px;
    background: #fafbfc;
}

.merch-variant-edit .variant-options-empty {
    color: #888;
    font-style: italic;
    padding: 16px 8px;
}

.merch-variant-edit .form-actions {
    margin-top: 16px;
    text-align: right;
}

.merch-variants-panel {
    padding: 8px 0;
}

.merch-variants-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.merch-variants-help {
    color: #666;
    margin: 0;
    flex: 1;
}

.merch-variants-empty,
.merch-variants-empty-row {
    color: #888;
    font-style: italic;
}

.merch-variants-empty {
    padding: 24px 12px;
    text-align: center;
    border: 1px dashed #dce1e8;
    border-radius: 4px;
    background: #fafbfc;
}

.merch-variants-list-table th,
.merch-variants-list-table td {
    vertical-align: middle !important;
}

.merch-variants-list-table th.col-id {
    width: 48px;
}

.merch-variants-list-table th.col-price {
    width: 90px;
}

.merch-variants-list-table th.col-qty {
    width: 72px;
}

.merch-variants-list-table th.col-active {
    width: 64px;
}

.merch-variants-list-table th.col-actions {
    width: 120px;
}

.merch-variant-list-options {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merch-variants-panel > .table-scrollable {
    max-height: 360px;
    overflow-y: auto;
}

.merch-discount-edit .discount-target-wrap.hidden {
    display: none;
}

.merch-discount-edit .select2-container {
    width: 100% !important;
}

.merch-discount-edit .select2-selection--multiple {
    min-height: 38px;
}

/* --- Merch edit reserve suggestions --- */

.merch-reserve-input-wrap {
    position: relative;
}

.merch-reserve-suggestions {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c2cad8;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.merch-reserve-suggestion {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    color: #333;
    cursor: pointer;
}

.merch-reserve-suggestion:hover,
.merch-reserve-suggestion:focus {
    background: #f5f8fa;
    outline: none;
}