/* DataTable Organism - SPACING CONTRACT: No external margins */
.data-table-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.table-toolbar-left,
.table-toolbar-right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.table-wrapper {
  overflow: hidden;
  border: var(--border-width-1) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--text-sm);
  table-layout: auto;
}

.table-head {
  background-color: var(--bg-panel);
  border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.table-header-cell {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  position: relative;
  white-space: nowrap;
}

.header-cell-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
}

.header-cell-content > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-body .table-row {
  border-bottom: var(--border-width-1) solid var(--border-subtle);
  transition: background-color var(--duration-150) var(--easing-out);
}

.table-row:hover {
  background-color: var(--bg-surface-hover);
}

.table-row.selected {
  background-color: var(--primary-wash);
}

.table-cell {
  padding: var(--space-2) var(--space-3);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell-checkbox {
  width: var(--space-10);
  padding: var(--space-2);
}

.table-footer {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
}

.table-actions {
  display: flex;
  gap: var(--space-2);
}

.table-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.025em;
}

/* Column alignment */
.table-align-right { text-align: right; }
.table-align-center { text-align: center; }

/* Built-in action icons cell */
.table-cell-actions {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

/* Opt-in sortable column headers. Non-sortable headers are unaffected -- these
   rules only target the .table-header-cell--sortable variant, so at rest the table
   looks identical and only sortable headers gain a hover affordance + active chevron. */
.table-header-cell--sortable {
  cursor: pointer;
  transition: background-color var(--duration-150) var(--easing-out);
}

.table-header-cell--sortable:hover {
  background-color: var(--bg-surface-hover);
}

.header-sort-button {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* The indicator is ALWAYS visible (never hover-gated) so sortable columns are
   self-evident. Idle columns show a faint neutral up/down glyph; the active
   column shows its direction chevron in the primary text colour. Vertically
   centered via the flex row; sized xs so it stays subtle, not obstructive. */
.sort-indicator {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-light);
}

.sort-indicator.is-active {
  color: var(--text-primary);
}

/* Column resize handle. Rendered by DataTable only when the table opts into
   persistence via tableId; the drag itself is wired by TabModule._initTableResize.
   A transparent grab strip on the right edge of each header cell (the cell is
   position:relative), revealed on hover and while a drag is in progress. */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: var(--space-1);
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background-color: transparent;
}

.col-resize-handle:hover,
.data-table-container.is-resizing .col-resize-handle {
  background-color: var(--border-default);
}

.data-table-container.is-resizing {
  cursor: col-resize;
  user-select: none;
}