/* Calm Surface migration 4 -- shared calm chrome for the remaining simple/read
   table tabs, swept together. Reuses the data-active-tab hook (renderTable, 0.105.0).
   Scope is an EXPLICIT ALLOWLIST of vetted tabs only -- adding a tab here is a
   deliberate opt-in, so un-vetted tables (and the special-rendered ai_workers_live)
   are never touched. Triage/Keywords keep their own files (semantic button emphasis);
   this file is chrome-only for read-mostly tables. No app.js change. */

/* --- allowlist: branches_live, onboard_live, audit_live --- */

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

#table-wrapper[data-active-tab="branches_live"] thead,
#table-wrapper[data-active-tab="onboard_live"] thead,
#table-wrapper[data-active-tab="audit_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="branches_live"] thead th,
#table-wrapper[data-active-tab="onboard_live"] thead th,
#table-wrapper[data-active-tab="audit_live"] thead th { font-weight: var(--font-weight-semibold); }

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

/* Any stray row buttons -> consistent calm secondary; destructive -> error-tinted. */
#table-wrapper[data-active-tab="branches_live"] td button,
#table-wrapper[data-active-tab="onboard_live"] td button,
#table-wrapper[data-active-tab="audit_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="branches_live"] td button[data-onclick*="elete"],
#table-wrapper[data-active-tab="onboard_live"] td button[data-onclick*="elete"],
#table-wrapper[data-active-tab="audit_live"] td button[data-onclick*="elete"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

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