/* Unidades de armazenagem (wms-storage-units, phase 1, Blazor only): the layout of the registration screens (like Lotes), list of 400px with the chips of the print state
   and the checkbox of the selection to print; the detail with the history. Colors only from the tokens of theme.css (wms-ui). */
.storage-units-layout {
    grid-template-columns: minmax(400px, 1fr) minmax(0, 1.6fr)
}

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

.storage-unit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0
}

.storage-unit-filters select {
    max-width: 180px
}

.storage-unit-print-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px
}

/* A row of the list: the checkbox of the selection (only units "A imprimir") next to the compact row. */
.storage-unit-pick {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 6px
}

.storage-unit-pick > input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary)
}

.compact-chip.is-to-print {
    background: var(--warning-soft);
    color: var(--warning-text)
}

.storage-unit-history {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px
}

.storage-unit-history li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted)
}

.storage-unit-history strong {
    color: var(--text)
}

/* Estoque: the chip of the unit of a row and the form "Criar UA" under the grid. */
.stock-chip.is-unit {
    background: var(--info-soft);
    color: var(--info-text)
}

.stock-unit-form {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-top: 10px;
    display: grid;
    gap: 8px
}

/* Phase 2: "Formar paletes" (the grid of the dock lines with the quantity of the pallet and its two actions). */
.storage-unit-pallet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.storage-unit-pallet-actions input {
    width: 96px
}

.storage-unit-pallet-grid td small {
    display: block;
    color: var(--text-muted)
}

/* Phase 3 (etiquetagem do estoque existente): the decision of a difference (reason + actions) in the line of the list. */
.storage-unit-difference-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%
}

.storage-unit-difference-decision input {
    flex: 1 1 220px;
    min-width: 0
}