/* Edit Count list (EditCountModel_Items_ListView, DxGridListEditor): Customer · one runtime column per
   item with the count typed in the cell · Total. EditCountItemsController puts .edit-count-grid on the
   grid and renders the cells below. */
/* Only the list scrolls: Reason, the search box and the column headers stay in view however many
   orders the route has. The cap goes on the dxbl-grid element itself — DxGrid scrolls its rows inside
   its own viewport, under a fixed header, only once the grid has a concrete height to measure against
   (see the same note in form-ui/wizard.css). 370px is what is left of the 650px modal (EditCountModel's
   PopupSize) after its title, Reason, search box and Save/Cancel, keeping a small gap above Save;
   shorter screens get less (320px of the viewport stays for the modal's chrome and margins).
   Matched by the grid's CSS class and, as a fallback, by the cells EditCountItemsController renders,
   so the cap holds even if another controller replaces the grid's class. */
dxbl-grid.edit-count-grid,
dxbl-grid:has(.edit-count-cell, .edit-count-order-reference) {
    max-height: min(370px, calc(100vh - 320px));
}

.edit-count-grid .edit-count-order-reference {
    font-size: 0.8em;
    opacity: 0.7;
}

.edit-count-grid .edit-count-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.edit-count-grid .edit-count-input {
    width: 80px;
}

.edit-count-grid .edit-count-input input {
    text-align: right;
}

.edit-count-grid .edit-count-changed .edit-count-input {
    font-weight: 600;
}

/* Same look as the previous count on the Routes list and the map. */
.edit-count-grid .edit-count-previous {
    opacity: 0.6;
    color: var(--site-red);
    text-decoration: line-through;
}

.edit-count-grid .edit-count-locked {
    opacity: 0.7;
    cursor: not-allowed;
}