/* Shipping tables of the Blazor app (Blazor only; wms-shortage, wms-box-check, wms-ship-check; linked after the CSS of the React bundle; measured with headless
   Chrome at 1440 px, 2026-10-05): the tables of Conferência de caixas and Conferência de expedição keep fixed column widths and break long texts instead of overflowing the
   right panel (~700 px with the list, ~1100 px without). */
.outbound-page .shipping-table {
    table-layout: fixed;
}

.outbound-page .shipping-table td,
.outbound-page .shipping-table th {
    overflow-wrap: anywhere;
    vertical-align: top;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-align: left;
}

/* .inventory-table has no rule of its own in the React CSS (browser defaults: 16 px, centered bold headers); here the cells follow the size of the
   other grids of the screens. */
.outbound-page .shipping-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}

.outbound-page .shipping-table {
    border-collapse: collapse;
}

/* Comparison tables ("Separado × contado"): the address and the product take the room, the four numbers stay narrow; the caption on one line. */
.outbound-page .outbound-compare th:nth-child(1) { width: 18%; }
.outbound-page .outbound-compare th:nth-child(2) { width: 34%; }
.outbound-page .outbound-compare caption { white-space: nowrap; }

/* Faltas e sobras (2026-10-22, the screen out of the pattern): both tabs use the grid of the registration screens (wms-ui: .stock-grid in
   .stock-grid-wrap, 9 px headers on --primary-faint, 11 px cells, the second line of a cell in <small>) under a .profile-list-title heading with the
   description, like the report panels. Long texts (product, reason, origins) wrap inside their cell; the short ones (order, address, quantity, when, status) stay on one line. */
.shortage-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.shortage-panel-title {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.shortage-panel-title h2 {
    letter-spacing: 0;
}

.shortage-filter {
    width: 220px;
    margin: 0;
}

.shortage-grid-wrap {
    max-height: 60vh;
}

.shortage-grid td {
    white-space: normal;
    vertical-align: top;
}

.shortage-grid td:first-child,
.shortage-grid td:last-child,
.shortage-table td:nth-child(3),
.shortage-table td:nth-child(4),
.shortage-table td:nth-child(6),
.shortage-table td:nth-child(7) {
    white-space: nowrap;
}

.shortage-table td:nth-child(2) { min-width: 180px; }
.shortage-table td:nth-child(5) { min-width: 140px; }
.shortage-leftovers td:nth-child(2) { min-width: 220px; }
.shortage-leftovers td:nth-child(4) { min-width: 200px; }

/* "Encontrada" over "Baixar (perda)", same width: the row keeps the height of its two-line cells and the grid fits the panel. */
.shortage-actions {
    display: grid;
    gap: 6px;
    justify-items: stretch;
}

.shortage-actions .inventory-action {
    justify-content: flex-start;
}

.shortage-old {
    margin-left: 6px;
}

/* Fields inside a shipping confirmation (Shared/ShippingConfirm: the readings of "Encontrada", the note): the generic rule ".address-confirm div"
   (components.css: flex, right-aligned, for the buttons) would put each label beside its input and push them to the right. */
.shipping-confirm .user-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    justify-content: stretch;
    margin-bottom: 12px;
}

.shipping-confirm .user-field {
    display: block;
}

.shipping-confirm .user-field label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}