/* ================================================================
   Scarlet Plugin – Resizable Table Columns
   Applies to: table.list.issues and table.list.time-entries
   ================================================================ */

/* Table width is managed entirely by JS (sum of col widths).
   Do NOT override width or min-width here — the autoscroll wrapper
   (overflow-x: auto) handles horizontal scrolling automatically.   */

/* th must be position:relative for the handle and overflow:visible
   so the handle is never clipped and always receives pointer events. */
table.list.scarlet-resizable > thead > tr > th {
  position: relative;
  overflow: visible;
}

/* Clip overflowing content in data rows only (not header cells) */
table.list.scarlet-resizable > tbody > tr > td,
table.list.scarlet-resizable > tfoot > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* required for text-overflow with table-layout:fixed */
}

/* Restore normal whitespace for explicitly "normal" cells */
table.list.scarlet-resizable td.whitespace-normal {
  white-space: normal;
  text-overflow: clip;
  max-width: none;
}

/* Checkbox and buttons columns: natural sizing, no overflow clipping */
table.list.scarlet-resizable > thead > tr > th.checkbox,
table.list.scarlet-resizable > thead > tr > th.buttons,
table.list.scarlet-resizable > tbody > tr > td.checkbox,
table.list.scarlet-resizable > tbody > tr > td.buttons,
table.list.scarlet-resizable > tfoot > tr > td.checkbox {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  max-width: none;
}

/* ── Resize handle ────────────────────────────────────────────── */

/* The handle is positioned entirely WITHIN the right edge of its own th
   (right: 0, not right: -Npx). This prevents it from being covered by
   the next column's stacking context, which always paints above the
   previous column when cells overlap — the root cause of handles
   stopping to work with many columns.

   8px wide click target + 2px ::after visual line at the right edge.  */
.scarlet-col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}

/* Visible 2px line at the rightmost edge of the handle
   (= the column's right border), always-on indicator.    */
.scarlet-col-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  width: 2px;
  height: 100%;
  background-color: rgb(0 0 0 / 11%);
  transition: background-color 0.15s ease;
  pointer-events: none;
}

.scarlet-col-resize-handle:hover::after {
  background-color: rgba(9, 116, 221, 0.60);
}

.scarlet-col-resize-handle.active::after {
  background-color: rgba(9, 116, 221, 0.90);
}

/* ── Drag-in-progress state ──────────────────────────────────── */

body.scarlet-col-resizing,
body.scarlet-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


table.list,
.table-list{
  width: 100% !important;
}