:is(.filters-card, .sm-filters, .filter-bar) {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

:is(.table, .sm-table) {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: var(--font-size-label);
}

:is(.table, .sm-table) :is(th, td) {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
}

:is(.table, .sm-table) th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

:is(.table, .sm-table) tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

:is(.table-wrap, .sm-table-wrap, .table-responsive) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

:is(.section-card, .sm-card, .card, .panel) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-surface);
}

:is(.badge, .status-badge) {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-inline: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
}