/* Calm Surface migration 8 -- bespoke skin for the AI Workers live queue.
   Excluded from the table sweep because it is special-rendered with meaningful
   status colour. Scopes: the table via [data-active-tab="ai_workers_live"], plus
   the two elements unique to this tab (#ai-filter-bar, #ai-stats-panel). Status
   badges (queued/processing/done/failed) and the live progress bars/team colours
   are PRESERVED -- they are data encoding, not chrome (same rule as intent chips). */

/* --- table chrome (status badges left intact: they out-specify these rules) --- */
#table-wrapper[data-active-tab="ai_workers_live"] {
  font-family: var(--font-family-sans);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-md);
}
#table-wrapper[data-active-tab="ai_workers_live"] #dynamic-table {
  color: var(--color-text-default);
  font-feature-settings: var(--font-feature-tabular);
}
#table-wrapper[data-active-tab="ai_workers_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="ai_workers_live"] thead th { font-weight: var(--font-weight-semibold); }
#table-wrapper[data-active-tab="ai_workers_live"] tbody tr { border-block-end: 1px solid var(--color-border-subtle); }
#table-wrapper[data-active-tab="ai_workers_live"] tbody tr:hover { background: var(--color-surface-2); }

/* --- sticky filter bar --- */
#ai-filter-bar { color: var(--color-text-muted); font-family: var(--font-family-sans); }
#ai-filter-bar select {
  background: var(--color-surface-1);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  min-height: 2rem;
}
#ai-filter-bar select:focus-visible { border-color: var(--color-border-focus); }

/* --- stats panel: calm the card FRAMES only; preserve coloured bars/status --- */
#ai-stats-panel { font-family: var(--font-family-sans); }
#ai-stats-panel .bg-white {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-md);
}

#table-wrapper[data-active-tab="ai_workers_live"] :focus-visible,
#ai-filter-bar :focus-visible,
#ai-stats-panel :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}