/*
 * ADM-11(/admin/esg) — 상태 필터 · 전체 현황(체인 어긋남 경고) · 계약 목록 · 무통장 입금 대기(P5-S8-T1)
 * 색은 tokens.css 의 var(--…) 로만 씁니다.
 *
 * 이 파일은 layouts/_head.html.erb 의 stylesheet_link_tag(:app) 가 app/assets/**\/*.css 를
 * 자동으로 모두 읽어 들이므로(Propshaft::Helper#stylesheet_link_tag :app), application.css 에
 * 다시 @import 하지 않습니다.
 */

.esg-contracts {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.esg-contracts-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--color-background);
}

/* ── 상태 필터(탭) · 입금 대기/갱신 예정/갱신 실패 토글 ─────────────── */
.esg-contracts-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.esg-contracts-filters__tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.esg-contracts-filters__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
}

.esg-contracts-filters__tab.is-selected {
  background: var(--color-indigo-50);
  border-color: var(--color-primary);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.esg-contracts-filters__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.esg-contracts-filters__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.esg-contracts-filters__toggle {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
}

.esg-contracts-filters__toggle.is-selected {
  border-color: var(--color-secondary);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* ── 전체 현황 요약 + 체인 어긋남 경고 ──────────────────────────── */
.esg-contracts-overview__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
}

.esg-contracts-overview__list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.esg-contracts-overview__list dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.esg-contracts-overview__chain {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-surface);
}

/* ── 계약 목록 · 입금 대기 표의 액션 칸 ───────────────────────────── */
.esg-contracts-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── 승인 · 보류 · 거절 모달(confirm_modal 과 같은 톤) ─────────────── */
.esg-contracts-modal {
  border: none;
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-width: 480px;
}

.esg-contracts-modal__summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0;
}

.esg-contracts-modal__summary dt {
  color: var(--color-text-muted);
}

.esg-contracts-modal__warning {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-status-warning) 16%, var(--color-background));
  color: var(--color-text);
}

.esg-contracts-modal textarea,
.esg-contracts-modal input[type="number"] {
  width: 100%;
  margin-bottom: var(--space-3);
}

.esg-contracts-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}