/* @TASK P4-S9-T1 - ADM-09 서포터 메시지 검수 화면(필터 탭 · 검수 큐 표 · 막기 모달)
 * @SPEC specs/screens/adm-09-supporter-messages.yaml
 * propshaft 의 stylesheet_link_tag :app 이 app/assets/**​/*.css 를 모두 자동으로 불러오므로
 * application.css 를 고치지 않아도 됩니다(다른 담당이 함께 쓰는 파일을 건드리지 않기 위함).
 * 색은 늘 tokens.css 변수를 씁니다(hex 직접 쓰지 않기).
 */

.admin-messages-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-messages-filters__tabs {
  display: flex;
  gap: var(--space-2);
}

.admin-messages-filters__tab {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
}

.admin-messages-filters__tab[aria-current="page"] {
  border-color: var(--color-primary);
  /* 대비 4.5:1 이상을 맞추려고 --color-primary 대신 더 짙은 --color-primary-pressed 를 씁니다. */
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.admin-messages-filters__range fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border: none;
  padding: 0;
}

.admin-messages-table-wrapper {
  overflow-x: auto;
}

.admin-messages-approve,
.admin-messages-reject {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}