/* Resize handles sit beside sorting controls and remain usable with pointer, touch, or keyboard. */
table.column-resizable > thead > tr > th { position: relative; padding-right: 22px; }
.table-column-resize { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--primary, #087f73); cursor: col-resize; touch-action: none; }
.table-column-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 2px; border-radius: 2px; background: var(--border, #cedbdf); }
.table-column-resize:hover::after, .table-column-resize:focus-visible::after { background: currentColor; }
.table-column-resize:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* Fixed column sizing starts only after a saved layout or an explicit drag, preserving default layouts. */
table.column-resized { table-layout: fixed !important; }
/* Narrow columns truncate text instead of wrapping names, emails, and numbers into taller rows. */
table.column-resized > :is(thead, tbody, tfoot) > tr > :is(th, td) { white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
table.column-resized td > :is(span, div, a) { min-width: 0; max-width: 100%; }
table.column-resized td :is(strong, small, p, .table-cell-text) { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
/* Nested identity details retain their separate lines, with each line independently shortened. */
table.column-resized :is(.client-table-copy, .client-table-detail, .client-agent-cell) { min-width: 0; max-width: 100%; overflow: hidden; }
table.column-resized .client-agent-cell > i { flex-shrink: 0; }
table.column-resized :is(.table-status, .status-badge, .side-badge, .client-trading-status) { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.column-resized .table-sort-button { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-resize-scroll { max-width: 100%; overflow-x: auto; }
body.table-resize-active, body.table-resize-active * { cursor: col-resize !important; user-select: none !important; }