/* Produtos (wms-products, Blazor only, 2026-10-06): what the React screen did not have or what the detail panel (~740 px) needs. */

/* Category of the master product (wms-categories), a row below code + description in the step "Identificação". */
.product-category {
    margin-top: 12px
}

/* Titles of the tree rows break instead of being cut (the chip of the pack and the status stay on the right). */
.products-layout .compact-title {
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere
}

/* ID ERP of the product (wms-products, 2026-10-08): a second line under the description of the row (CompactRow Detail), smaller and muted; a long
   code breaks anywhere instead of widening the list. */
.products-layout .compact-detail {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere
}

/* Grids of the steps "Códigos de barras" and "Endereços do produto": fixed columns, so a long code or a long audit text never pushes the grid wider
   than the panel; captions on one line. */
.product-barcode-grid,
.product-address-grid {
    table-layout: fixed;
    width: 100%
}

.product-barcode-grid th,
.product-address-grid th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.product-barcode-grid td,
.product-address-grid td {
    overflow-wrap: anywhere
}

/* The code column holds the EAN-13 image (170 px + its label box, product-barcodes.css, 2026-10-22). */
.product-barcode-grid th:nth-child(1),
.product-barcode-grid td:nth-child(1) {
    width: 210px
}

.product-barcode-grid th:nth-child(2),
.product-barcode-grid td:nth-child(2) {
    width: 120px
}

.product-barcode-grid th:nth-child(3),
.product-barcode-grid td:nth-child(3),
.product-barcode-grid th:nth-child(4),
.product-barcode-grid td:nth-child(4) {
    width: 20%
}

.product-barcode-grid th:nth-child(5),
.product-barcode-grid td:nth-child(5),
.product-address-grid th:nth-child(4),
.product-address-grid td:nth-child(4) {
    width: 84px
}

.product-barcode-grid td .profile-name-input {
    min-width: 0
}

.product-address-grid th:nth-child(2),
.product-address-grid td:nth-child(2) {
    width: 90px
}

.product-address-grid th:nth-child(3),
.product-address-grid td:nth-child(3) {
    width: 42%
}