/* Calm Surface migration 2 -- re-skin the Triage table ONLY.
   Triage shares the generic table renderer (#table-wrapper > #dynamic-table), so
   the scope is the data-active-tab hook set in renderTable(): every rule is under
   #table-wrapper[data-active-tab="triage_live"]. Other table tabs (keywords,
   branches, ...) get a different data-active-tab value and are untouched.
   ID+attribute-scoped selectors out-specify the table's single-class Tailwind
   utilities, so no !important. */

#table-wrapper[data-active-tab="triage_live"] {
  font-family: var(--font-family-sans);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-md);
}
#table-wrapper[data-active-tab="triage_live"] #dynamic-table {
  color: var(--color-text-default);
  font-feature-settings: var(--font-feature-tabular);
}

/* Header: calm sunken (overrides bg-slate-100) */
#table-wrapper[data-active-tab="triage_live"] thead {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  border-block-end: 1px solid var(--color-border-default);
}
#table-wrapper[data-active-tab="triage_live"] thead th {
  font-weight: var(--font-weight-semibold);
}

/* Rows: subtle separators, calm hover */
#table-wrapper[data-active-tab="triage_live"] tbody tr {
  border-block-end: 1px solid var(--color-border-subtle);
}
#table-wrapper[data-active-tab="triage_live"] tbody tr:hover {
  background: var(--color-surface-2);
}
#table-wrapper[data-active-tab="triage_live"] tbody td {
  color: var(--color-text-default);
}

/* Row action buttons -> consistent calm. Dense table actions use the 24px AA
   floor (size.touch-min 44px is for primary touch targets, not per-row controls
   in a data grid -- keeping density). */
#table-wrapper[data-active-tab="triage_live"] td button {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-default);
  min-height: 1.75rem;
}
#table-wrapper[data-active-tab="triage_live"] td button:hover {
  background: var(--color-surface-2);
}

/* The consequential decisions: Approve/Accept = the one primary (accent);
   Reject = error-tinted, not a loud red fill. */
#table-wrapper[data-active-tab="triage_live"] td .td-decide[data-decision="approved"] {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border-color: transparent;
}
#table-wrapper[data-active-tab="triage_live"] td .td-decide[data-decision="approved"]:hover {
  background: var(--color-accent-primary-hover);
}
#table-wrapper[data-active-tab="triage_live"] td .td-decide[data-decision="rejected"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

#table-wrapper[data-active-tab="triage_live"] :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}