/* Column widths are personal presentation preferences; the authored grid is the default. */
[data-column-resize-target~="headerRow"] > [data-column-resize-key],
.clients-page .client-sheet-table > thead > tr > th[data-column-resize-key],
.inventory-sheet > thead > tr > th[data-column-resize-key] { position: relative; overflow: hidden; white-space: nowrap; }
.sales-table-header > [data-column-resize-key],
.approval-queue-header > [data-column-resize-key] { height: 100%; align-content: center; }

.column-resize-handle {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  width: var(--space-2);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.column-resize-handle::after {
  content: "";
  position: absolute;
  inset: var(--space-2) 0;
  border-right: 2px solid transparent;
}
.column-resize-handle:is(:hover, :focus-visible)::after,
.column-resize-active .column-resize-handle:focus::after { border-color: var(--accent); }
.column-resize-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.column-resize-active { cursor: col-resize; user-select: none; }
@media (pointer: coarse) {
  .column-resize-handle { width: var(--space-4); }
}