/* Cargas in the Blazor app (Blazor only, wms-shipping section "Blazor: Cargas"; linked after the CSS of the React bundle): the orders of the load keep
   fixed column widths and break long destinations instead of overflowing the right panel; the candidate ticks and the volume chips wrap. */
.loads-page .shipping-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.loads-page .shipping-table td,
.loads-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). */
.loads-page .shipping-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}

/* Pedido, Destino (the room), Volumes, Peso · m³, ASN, the trash. */
.loads-page .load-orders th:nth-child(1) { width: 10%; }
.loads-page .load-orders th:nth-child(3) { width: 10%; }
.loads-page .load-orders th:nth-child(4) { width: 19%; }
.loads-page .load-orders th:nth-child(5) { width: 15%; }
.loads-page .load-orders th:nth-child(6) { width: 48px; }

/* Lists inside the decision panels (seal history, ASN created): the size of the other texts of the sheet, not the 16 px of the browser. */
.loads-page .shipping-decision > ul {
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* The ticks of the CHECKED orders found: the label text breaks under its own line; the global label margin of styles.css is replaced by the gap. */
.loads-page .shipping-candidates .stock-loose-toggle {
    align-items: flex-start;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.loads-page .shipping-candidates .stock-loose-toggle input {
    flex: none;
    margin-top: 2px;
}

/* The candidate search sits on its own line above "Buscar pedidos conferidos". */
.loads-page .shipping-decision .module-search {
    margin-bottom: 8px;
}

.loads-page .shipping-volume-grid .compact-status {
    max-width: 100%;
}