.order-table .sheet-cell:has(> .row-drag-handle) > .sheet-input { padding-left: calc(var(--control-height) + 12px); }
.row-drag-handle {
  position: absolute;
  z-index: 2;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}
.row-drag-handle:active { cursor: grabbing; }
.sheet-row-actions > .row-drag-handle { position: static; flex-shrink: 0; transform: none; }
/* Pinned cells stay opaque so scrolled data cannot show through while dragging. */
.order-table .row-is-dragging > td:not(.data-grid__actions, .data-grid__identity) { opacity: .55; }
.order-table .row-drop-before > td { box-shadow: inset 0 3px var(--accent); }
.order-table .row-drop-after > td { box-shadow: inset 0 -3px var(--accent); }
.order-table .row-drop-before > td:first-child::before,
.order-table .row-drop-after > td:first-child::after {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--accent);
  content: "";
}
.order-table .row-drop-before > td:first-child::before { top: -2px; }
.order-table .row-drop-after > td:first-child::after { bottom: -2px; }
@media (max-width: 760px) {
  .order-table .sheet-cell:has(> .row-drag-handle) { position: relative; }
}

@media (hover: hover) and (pointer: fine) {
  #order-sheet input[type="date"].sheet-input:not(:hover):not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus) { -moz-appearance: textfield; }
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus)::-webkit-inner-spin-button,
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus)::-webkit-outer-spin-button { opacity: 0; }
}

#order-sheet .sheet-cell--actions,
#order-sheet .sheet-actions-heading { width: 100px; min-width: 100px; max-width: 100px; }
#order-sheet .sheet-row-actions { gap: 0; padding: 2px; }
#order-sheet .sheet-cell--actions:has(.row-drag-handle) { width: 116px; min-width: 116px; max-width: 116px; }

@media (max-width: 760px), (pointer: coarse) {
  .row-drag-handle { left: 1px; width: 44px; height: 44px; }
  .order-table .sheet-cell:has(> .row-drag-handle) > .sheet-input { padding-left: 48px; }
  #order-sheet .sheet-cell--actions,
  #order-sheet .sheet-actions-heading { width: 96px; min-width: 96px; max-width: 96px; }
  #order-sheet .sheet-row-actions { padding: 0; }
  #order-sheet .sheet-cell--actions:has(.row-drag-handle) { width: 140px; min-width: 140px; max-width: 140px; }
}