/* TablePresenter styles — see public/shared/table-presenter.js and
   plan/ui/table-helper.md. Layers on top of shared/base.css's plain
   .data-table styling (kept as-is for tables that don't need any of
   this interactivity); .cr-table is always ALSO a .data-table. */

.cr-table-root { position: relative; display: flex; flex-direction: column; gap: 10px; }

.cr-table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cr-table-filter { max-width: 260px; }
.cr-table-column-filter-wrap { display: flex; align-items: center; gap: 8px; }
.cr-table-column-filter-label { font-size: 12px; color: var(--text-dim, #8a93a6); white-space: nowrap; }
.cr-table-column-filter-select { width: auto; }
.cr-table-sort-wrap { display: flex; align-items: center; gap: 8px; }
.cr-table-sort-label { font-size: 12px; color: var(--text-dim, #8a93a6); white-space: nowrap; }
.cr-table-sort-select { width: auto; }
.cr-table-columns-wrap { position: relative; margin-left: auto; }
.cr-table-columns-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--panel, #171a21);
  border: 1px solid var(--panel-border, #262b36);
  border-radius: var(--radius, 10px);
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-table-columns-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0;
  cursor: pointer;
}
.cr-table-columns-menu-item input { width: auto; }

.cr-table-th-draggable { cursor: grab; user-select: none; }

/* Column-reorder drop caret — a thin vertical line positioned at the
   exact boundary a drop would land on (left edge of the hovered header =
   "before," right edge = "after"), NOT an outline around the whole
   header. An outline can't convey which side a drop lands on at all;
   this can, at a glance. Positioned in JS (table-presenter.js's dragover
   handler) relative to .cr-table-root, which is why that has
   position: relative above. */
.cr-table-col-caret {
  position: absolute;
  width: 3px;
  margin-left: -1.5px; /* centers the 3px line exactly on the boundary rather than starting at it */
  background: var(--accent, #5b8cff);
  pointer-events: none;
  z-index: 15;
}
.cr-table-col-caret.hidden { display: none; }

.cr-table-drag-handle {
  width: 28px;
  text-align: center;
  cursor: grab;
  color: var(--text-dim, #9aa3b2);
  touch-action: none; /* pointer events drive this, not the browser's own scroll/gesture handling */
}
.cr-table-drag-handle:hover { color: var(--text, #e6e9ef); }

tr.cr-row-selected { background: rgba(91, 140, 255, 0.08); }
tr.cr-row-moving { opacity: 0.45; }

/* Applied only for the duration of an active drag-handle gesture (see
   _wireDragHandle in table-presenter.js) — not a permanent table-wide
   setting, so normal text selection/copy still works the rest of the
   time. Without this, moving the pointer across other cells mid-drag
   triggers the browser's native text-selection highlight as an
   unrelated side effect. */
.cr-table.cr-table-no-select,
.cr-table.cr-table-no-select * {
  user-select: none;
}

/* The drop-bar indicator — a real <tr> inserted between two rows (see
   _onDropBarMove in table-presenter.js), not an absolutely-positioned
   overlay, so it participates in ordinary table layout with zero
   coordinate math. */
tr.cr-drop-bar-row td {
  padding: 0;
  height: 3px;
  background: var(--accent, #5b8cff);
  border: none;
}

/* Design rule (CLAUDE.md): an anchored column never stretches to fill
   leftover width and never wraps its content onto a second line — an
   'end' column (almost always a row's action buttons, e.g. edit/delete)
   is additionally right-aligned, so a short action group never drags the
   whole column wide or sits oddly left-aligned next to empty space.
   Applied by table-presenter.js to every anchored column automatically —
   no consuming page needs its own scoped copy of this (a hand-copied
   version existed on the STUDIO dancer list before this was centralized
   here; it's gone now that every TablePresenter table gets this for
   free). */
.cr-table th.cr-table-th-anchor-end,
.cr-table td.cr-table-td-anchor-end,
.cr-table th.cr-table-th-anchor-start,
.cr-table td.cr-table-td-anchor-start {
  width: 1%;
  white-space: nowrap;
}
.cr-table th.cr-table-th-anchor-end,
.cr-table td.cr-table-td-anchor-end {
  text-align: right;
}

/* Shared wrapper for a cell that renders more than one action button
   (e.g. edit + delete) — flex row, right-aligned, tight gap. Use this
   instead of inventing a page-local equivalent (the design rule above
   only controls the CELL's own width/alignment; this controls how
   multiple buttons sit inside it). */
.cr-table-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}