/* Etiquetas do pedido (wms-order-boxes, J6A of stage 14, Blazor only): the screen (layout of the registration screens with a list of 420px), the facts of the order, the
   holder, the boxes with their labels and items, and the reconciliation. Colors and radii only from the tokens of theme.css (wms-ui). The label sheet itself is printed
   with the classes of the volume label (components/printing.css). */
.order-labels-layout {
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.6fr)
}

@media(max-width:1000px) {
    .order-labels-layout {
        grid-template-columns: 1fr
    }
}

.order-labels-tabs {
    flex-wrap: wrap;
    margin: 8px 0
}

.order-labels-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin: 0 0 10px
}

.order-labels-holder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin-top: 10px
}

.order-labels-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    margin: 0 0 10px
}

.order-labels-new {
    min-width: 220px
}

.order-boxes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.order-box-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 8px 10px;
    display: grid;
    gap: 4px
}

.order-box-card.is-cancelled {
    opacity: .6
}

.order-box-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.order-box-head .inventory-action {
    margin-left: auto
}

.order-box-label {
    font-weight: 600;
    letter-spacing: .04em;
    background: var(--surface-2);
    border-radius: var(--radius-xs);
    padding: 1px 6px
}

.order-box-meta {
    color: var(--text-muted)
}

.order-box-items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    display: grid;
    gap: 2px;
    color: var(--text-2)
}

.order-labels-reconcile {
    margin: 10px 0 0;
    color: var(--success-text)
}

.order-labels-reconcile.is-diff {
    color: var(--danger-text)
}

/* J6B: manager panel (reorganize and cancel a box). */
.order-box-manage {
    display: grid;
    gap: 10px;
    max-width: 460px;
    margin-top: 10px
}