/* DynamicTable — centralized table styling.
   Plain CSS served as a first-party stylesheet (CSP-clean: no injected <style>,
   no inline style attributes). Themed with the app's design tokens
   (var(--color-*) emitted by Tailwind) and dark-mode aware via the .dark class
   on <html>, so it matches the rest of the UI: blue header, warmgray borders,
   gold/blue accents, status colours. */

.dt-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl, 10px);
  border: 1px solid var(--color-warmgray-200);
  background: #fff;
}
.dark .dt-wrapper { border-color: var(--color-warmgray-700); background: var(--color-warmgray-800); }

/* The grid sizes to its content (the sum of column widths) but never narrower
   than the wrapper. This lets the blue header and the manage-columns button span
   the *full* table width — including the part revealed by horizontal scroll —
   instead of stopping at the visible right edge. */
.dt-grid { display: flex; flex-direction: column; width: max-content; min-width: 100%; font-size: .875rem; }

/* Every cell is border-box so a fixed width is the *total* width — this keeps
   header and body columns aligned in all selection modes (fixes the prior
   single-selection header/body shift, where fixed body cells were content-box). */
.dt-th, .dt-th-fixed, .dt-td, .dt-td-fixed { box-sizing: border-box; }

/* ----- header (matches the app's blue table headers) ----- */
.dt-thead { background: var(--color-blue-500); color: #fff; }
.dt-header-row { display: flex; align-items: stretch; width: 100%; position: relative; }
.dt-th {
  padding: 0; text-align: left; position: relative; flex-shrink: 0;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  box-sizing: border-box;
}
.dt-th-fixed { padding: 0 12px; flex-shrink: 0; display: flex; align-items: center; }
.dt-th-inner { display: flex; align-items: stretch; height: 42px; user-select: none; min-width: 0; flex: 1; }
.dt-th-label {
  flex: 1; display: flex; align-items: center; padding: 0 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; cursor: grab; overflow: hidden; text-overflow: ellipsis;
  border-radius: 6px; margin: 4px 4px; transition: background .12s;
}
.dt-th-label:hover  { background: rgba(255, 255, 255, .15); }
.dt-th-label:active { cursor: grabbing; }
/* When column reordering is disabled the label is static: no grab cursor, no
   hover affordance that would imply it can be dragged. */
.dt-th-label-static,
.dt-th-label-static:active { cursor: default; }
.dt-th-label-static:hover  { background: transparent; }

.dt-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
.dt-resize-handle::after {
  content: ''; position: absolute; right: 2px; top: 22%; bottom: 22%; width: 1px;
  background: rgba(255, 255, 255, .35); border-radius: 1px; transition: background .15s, width .15s;
}
.dt-resize-handle:hover::after, .dt-resize-handle.resizing::after { background: #fff; width: 3px; }

/* ----- body ----- */
.dt-tbody { background: #fff; display: flex; flex-direction: column; }
.dark .dt-tbody { background: var(--color-warmgray-800); }
.dt-tr { display: flex; align-items: stretch; width: 100%; transition: background .1s; }
.dt-tr:not(:last-child) { border-bottom: 1px solid var(--color-warmgray-100); }
.dark .dt-tr:not(:last-child) { border-bottom-color: var(--color-warmgray-700); }
.dt-tr:hover { background: var(--color-warmgray-50); }
.dark .dt-tr:hover { background: color-mix(in srgb, var(--color-warmgray-700) 40%, transparent); }
.dt-tr.selected { background: var(--color-blue-50) !important; }
.dark .dt-tr.selected { background: color-mix(in srgb, var(--color-blue-900) 35%, transparent) !important; }
.dt-tr.dragging { opacity: .35; }

.dt-td {
  padding: 10px 12px; color: var(--color-warmgray-700); flex-shrink: 0;
  display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; box-sizing: border-box;
}
.dark .dt-td { color: var(--color-warmgray-100); }
.dt-td-fixed { padding: 10px 12px; flex-shrink: 0; display: flex; align-items: center; box-sizing: border-box; }

/* ----- drag / drop indicators (blue accent) ----- */
.dt-row-spacer { pointer-events: none; }
.dt-row-spacer-inner {
  height: 3px; background: var(--color-blue-500); border-radius: 2px; margin: 0 6px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 25%, transparent);
  animation: dt-pulse .5s ease infinite alternate;
}
@keyframes dt-pulse { from { opacity: .7 } to { opacity: 1 } }
.dt-col-drop-line {
  position: absolute; top: 0; bottom: 0; width: 3px; background: var(--color-gold-500);
  border-radius: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold-500) 25%, transparent);
  pointer-events: none; z-index: 20; animation: dt-pulse .5s ease infinite alternate;
}
.dt-col-drop-line.left  { left: -2px; }
.dt-col-drop-line.right { right: -2px; }
.dt-drag-ghost {
  position: fixed; top: -200px; left: -200px; z-index: 9999; background: #fff;
  border-radius: 8px; padding: 8px 16px; font-size: .8rem; font-weight: 600;
  color: var(--color-blue-600); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  border: 2px solid var(--color-blue-500); pointer-events: none; white-space: nowrap;
}
.dark .dt-drag-ghost { background: var(--color-warmgray-800); color: var(--color-blue-200); }

/* ----- grip + manage-columns button ----- */
/* The drag handle cell + its SVG. Dimensions live here (not an inline style=""
   attribute) so the markup stays CSP-clean; the SVG fades in on row hover. */
.dt-grip-cell { width: 34px; cursor: grab; color: var(--color-warmgray-300); }
.dt-grip { width: 14px; height: 14px; margin: auto; display: block; opacity: 0; transition: opacity .15s; }
.dt-tr:hover .dt-grip { opacity: 1; }
.dt-sel-cell { width: 40px; cursor: pointer; }
/* Single-selection radio dot (CSP-clean: state via .on class, not inline style) */
.dt-sel-dot { display: block; width: 8px; height: 8px; border-radius: 50%; margin: auto;
  background: transparent; border: 1.5px solid var(--color-warmgray-300); transition: background .12s, border-color .12s; }
.dt-tr.selected .dt-sel-dot { background: var(--color-blue-500); border-color: var(--color-blue-500); }
.dt-checkbox { display: block; height: 1rem; width: 1rem; border-radius: 4px; cursor: pointer; accent-color: var(--color-blue-500); }
/* In-flow at the end of the header row (not absolutely positioned): `margin-left:
   auto` parks it at the far right when the table is narrower than its container,
   and places it immediately after the last column header — scrolling with the
   table — when the columns overflow, so it never overlaps a column. */
.dt-manage-cols-btn {
  display: flex; align-items: center; justify-content: center; align-self: center;
  flex-shrink: 0; margin-left: auto; margin-right: 8px; width: 28px; height: 28px;
  border-radius: 6px; border: none; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .8); transition: background .15s, color .15s; padding: 0;
}
.dt-manage-cols-btn:hover  { background: rgba(255, 255, 255, .15); color: #fff; }
.dt-manage-cols-btn:active { background: rgba(255, 255, 255, .25); }
.dt-manage-cols-btn svg { display: block; pointer-events: none; padding: 4px; }

/* ----- column-manager dropdown (vanilla, no Alpine) ----- */
.dt-colmgr {
  position: fixed; z-index: 50; width: 18rem; background: #fff;
  border-radius: var(--radius-xl, 10px); border: 1px solid var(--color-warmgray-200);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: .5rem 0;
  /* Flex column so the head and footer buttons stay pinned/visible while the
     field list scrolls; max-height is set inline (JS) to the available space. */
  display: flex; flex-direction: column; overflow: hidden;
}
.dark .dt-colmgr { background: var(--color-warmgray-800); border-color: var(--color-warmgray-700); }
.dt-colmgr[hidden] { display: none; }
.dt-colmgr-head {
  flex-shrink: 0;
  padding: .5rem 1rem; border-bottom: 1px solid var(--color-warmgray-200);
  font-weight: 600; color: var(--color-blue-900);
}
.dark .dt-colmgr-head { border-bottom-color: var(--color-warmgray-700); color: var(--color-blue-100); }
/* The scrollable field list. It flexes to fill the space left between the head
   and footer (which stay visible), capped at 16rem on tall screens; when space
   is tight it shrinks and scrolls. The scrollbar is hidden (still scrollable by
   wheel/touch/keys). */
.dt-colmgr-list {
  flex: 1 1 auto; min-height: 0; max-height: 16rem; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dt-colmgr-list::-webkit-scrollbar { display: none; }
.dt-colmgr-item {
  display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; cursor: pointer;
  font-size: .875rem; color: var(--color-warmgray-800);
}
.dark .dt-colmgr-item { color: var(--color-warmgray-100); }
.dt-colmgr-item:hover { background: var(--color-warmgray-50); }
.dark .dt-colmgr-item:hover { background: color-mix(in srgb, var(--color-warmgray-700) 50%, transparent); }
.dt-colmgr-foot { flex-shrink: 0; padding: .5rem 1rem 0; border-top: 1px solid var(--color-warmgray-200); margin-top: .25rem; }
.dark .dt-colmgr-foot { border-top-color: var(--color-warmgray-700); }
.dt-colmgr-apply {
  width: 100%; padding: .5rem 1rem; border: none; border-radius: 8px; cursor: pointer;
  background: var(--color-blue-500); color: #fff; font-size: .875rem; font-weight: 600;
  transition: background .12s;
}
.dt-colmgr-apply:hover { background: var(--color-blue-600); }
/* "Save to preference" — a quiet text link below Apply that persists the current
   column selection (recalled on the next load). */
.dt-colmgr-save {
  display: block; width: 100%; margin-top: .4rem; padding: .25rem .25rem;
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-size: .8rem; font-weight: 600; color: var(--color-blue-600);
  border-radius: 6px; transition: background .12s, color .12s;
}
.dt-colmgr-save:hover { background: var(--color-warmgray-50); color: var(--color-blue-700); }
.dt-colmgr-save:disabled { color: var(--color-status-success-fg, #15803d); cursor: default; background: transparent; }
.dark .dt-colmgr-save { color: var(--color-blue-300); }
.dark .dt-colmgr-save:hover { background: color-mix(in srgb, var(--color-warmgray-700) 50%, transparent); }
