/* ===== 문서함 (계약서·견적서) — business-documents inbox shell =====
   공용 프리미티브(.ui-panel / .ui-empty)와 work-surface(.ax-*)를 그대로 소비한다.
   이 시트는 문서함 고유 노드와 "한 번에 하나만 보인다" 배타 상태 계약만 소유한다.
   프리미티브 베이스는 여기서 재선언하지 않는다 — 형제 표면이 깨진다. */

.business-documents-page .business-documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 조회 실패 배너. display 를 선언하지 않아 [hidden] 이 그대로 동작한다.
   목록 실패와 상세 실패는 같은 어휘를 쓴다 — 두 사본이 생기면 색이 갈라진다. */
.business-documents-page .business-documents-error,
.business-documents-page .business-documents-detail-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--status-error-border);
  border-radius: var(--radius-md);
  background: var(--status-error-soft);
  color: var(--status-error);
  font-size: 13px;
  line-height: 1.5;
}

/* 배타 상태 계약: 로딩 / 0건 / 조회 실패 / 목록 중 하나만 보인다.
   .ui-empty(display:flex) 와 .ax-empty-state(display:grid) 는 author 선언이라
   UA 의 [hidden] 규칙을 이긴다. 프리미티브를 덧칠하지 않고 이 페이지 스코프에서만 복원한다. */
.business-documents-page .ui-empty[hidden],
.business-documents-page .ax-empty-state[hidden],
.business-documents-page .business-documents-list[hidden],
.business-documents-page .business-documents-error[hidden],
.business-documents-page .ax-detail-stack[hidden],
.business-documents-page .ax-detail-section[hidden],
.business-documents-page .business-documents-detail-error[hidden] {
  display: none;
}

/* 산출물 링크 줄. .ax-action-row 는 패널 하단 액션용이라 오른쪽 정렬이 기본이지만,
   여기서는 왼쪽 필드 라벨 아래에 붙는 본문이다. 프리미티브를 덧칠하지 않고
   이 표면 전용 클래스에서만 정렬을 되돌린다 — 색·여백은 그대로 쓴다. */
.business-documents-page .business-documents-output-links {
  justify-content: flex-start;
}

/* ===== 문서 행 =====
   한 행은 두 줄이다: 주요 줄(상태·유형·제목)과 메타 줄(번호·상대방·금액·날짜).
   목록은 훑는 표면이므로 카드가 아니라 조밀한 레코드 줄로 유지한다. */
.business-documents-page .business-documents-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  /* 행은 role="button" 이다 — 커서가 그 사실을 먼저 알린다. */
  cursor: pointer;
}

.business-documents-page .business-documents-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.business-documents-page .business-documents-row-type {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

.business-documents-page .business-documents-row-title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.business-documents-page .business-documents-row-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

/* 문서번호는 식별자다 — 본문 텍스트와 다른 글자꼴로 붙여야 눈이 바로 잡는다.
   선례: ax-work-surface.css:399. */
.business-documents-page .business-documents-row-number {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
}

.business-documents-page .business-documents-row-counterparty {
  flex: 1 1 auto;
}

/* 금액과 날짜는 행마다 자릿수가 달라 tabular 가 아니면 세로줄이 어긋난다. */
.business-documents-page .business-documents-row-amount {
  flex: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.business-documents-page .business-documents-row-date {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* 제목·상대방명에는 길이 상한이 없다(contracts.ts:79, :57-59) — 긴 값이 2단 레이아웃을
   밀어내지 않게 자른다. 선례: ax-work-surface-board.css:335-339. */
.business-documents-page .business-documents-row-title,
.business-documents-page .business-documents-row-counterparty {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 미채번 표기 — 실제 번호와 글자 모양이 같으면 사용자가 둘을 구분하지 못한다.
   상태별 의미 차이는 data-unassigned 가 나른다(expected / pending / anomaly). */
.business-documents-page .business-documents-row-number[data-unassigned],
.business-documents-page .business-documents-detail-number[data-unassigned] {
  font-family: inherit;
  font-style: italic;
  color: var(--muted);
}

/* pending: 승인은 끝났고 발행(채번)을 기다린다 — 곧 닫혀야 할 창이라 눈에 남아야 한다. */
.business-documents-page .business-documents-row-number[data-unassigned="pending"],
.business-documents-page .business-documents-detail-number[data-unassigned="pending"] {
  font-style: normal;
  color: var(--accent);
}

/* anomaly: 발행됐는데 번호가 없다(contracts.ts:368-373 norms 위반). 정상 부재가 아니다. */
.business-documents-page .business-documents-row-number[data-unassigned="anomaly"],
.business-documents-page .business-documents-detail-number[data-unassigned="anomaly"] {
  font-style: normal;
  font-weight: 600;
  color: var(--error);
}

/* ===== 상태 pill 변형 =====
   .ax-status-pill(ax-work-surface.css:407)의 어휘를 넓힌다 — 덧칠이 아니라 추가다.
   needs_input(warning)·approved(success)는 기존 정의를 그대로 재사용하므로 여기 없다.
   ui-primitives-guard.test.ts:27 이 .ax-status-pill 을 AX 고유 유지로 명시 제외한다. */

/* draft: 아직 아무 판단도 요청되지 않은 상태 — 소음을 내지 않는다. */
.ax-status-pill[data-state="draft"] {
  background: var(--surface-panel-soft);
  color: var(--muted);
}

/* review_pending: 지금 사람이 제어 가능한 다음 행동 — 인디케이터 액센트는 여기 예약이다. */
.ax-status-pill[data-state="review_pending"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* rendered: 실물 산출물이 존재한다 — 근거(evidence) 톤. */
.ax-status-pill[data-state="rendered"] {
  border-color: var(--status-success-border);
  background: var(--evidence-soft);
  color: var(--evidence);
}

/* void: 되돌릴 수 없이 폐기된 문서 — 읽는 사람이 유효 문서로 착각하면 안 된다. */
.ax-status-pill[data-state="void"] {
  border-color: var(--status-error-border);
  background: var(--error-soft);
  color: var(--error);
}

/* ===== 선택 상태 =====
   오른쪽 패널이 어느 행을 보여주는지 목록에서 즉시 읽혀야 한다.
   인디고 액센트는 "지금 제어 가능한 다음 행동" 에 예약돼 있으므로 hover 는 표면 톤만 바꾸고,
   확정된 선택에만 액센트를 쓴다. */
.business-documents-page .business-documents-row:hover {
  background: var(--surface-panel-soft);
}

.business-documents-page .business-documents-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.business-documents-page .business-documents-row[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ===== 상세 패널 ===== */

/* 상세의 문서번호도 식별자다 — 행과 같은 글자꼴이라야 눈이 같은 값으로 읽는다. */
.business-documents-page .business-documents-detail-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* 상세 값에는 길이 상한이 없다(반려 사유·상대방명·법인 id). 목록은 한 줄로 자르지만
   상세는 전문을 읽는 자리라 자르지 않고 접는다. 선례: chat-work-cards.css:68. */
.business-documents-page #business-documents-detail-content .field-value {
  overflow-wrap: anywhere;
}