/* 결재 요약바·이력 탭 — kolas-approval-meta-header Design §5
 *
 * 문서 본문(form-sheet)은 원 서식 준거라 흑백 인쇄 대상이다. 여기 정의된 것은
 * 전부 **화면 전용 크롬**이며, `.fs-no-print`(static/kolas/form-sheet.css)가
 * 인쇄에서 걷어낸다 — 이 파일에 @media print 규칙을 새로 만들지 않는다.
 *
 * 색상은 templates/base.html :root 토큰과 DASHBOARD_UI_SKILL §4-1 배지 팔레트
 * 에서만 가져온다. 새 색을 만들지 않는다.
 */

/* form-sheet 와 같은 폭(static/kolas/form-sheet.css 의 max-width:1040px).
   폭이 다르면 요약바·문서·이력이 계단처럼 어긋난다. */
.ap-bar-wrap,
.ap-history-wrap {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.ap-bar-wrap { margin-bottom: 1rem; }
.ap-history-wrap { margin-top: 1.25rem; }

/* approval_detail 의 문서 카드 — form-sheet 를 쓰지 않는 유일한 결재 화면이라
   같은 폭을 여기서 직접 준다(KOLAS 20개와 세로 정렬을 맞추기 위해). */
.ap-doc-card {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 요약바 ─────────────────────────────────────────────── */
.ap-bar {
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, .04));
  overflow: hidden;
}

.ap-row {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.ap-row:last-child { border-bottom: none; }

.ap-row-ident {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ap-doc-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-primary, #1e293b);
  margin-left: 0.15rem;
}

/* ── 칩 ─────────────────────────────────────────────────── */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}

/* 중립 칩 — 문서번호·개정·적용일자·주기 */
.ap-chip--meta {
  background: #f1f5f9;
  color: var(--text-secondary, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
}
.ap-chip--meta.ap-chip--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 상태 칩 — DASHBOARD_UI_SKILL §4-1 팔레트 */
.ap-chip--approved { background: #d1fae5; color: #047857; }
.ap-chip--pending  { background: #fef3c7; color: #b45309; }
.ap-chip--progress { background: #e0f2fe; color: #0369a1; }
.ap-chip--rejected { background: #fee2e2; color: #b91c1c; }
.ap-chip--revising { background: #fef3c7; color: #b45309; }
.ap-chip--void     { background: #f1f5f9; color: #475569; }

/* ── 결재선 행 ───────────────────────────────────────────── */
.ap-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
}
.ap-line-step { white-space: nowrap; }
.ap-line-role {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  margin-right: 0.2rem;
}
.ap-line-who { font-weight: 600; color: var(--text-primary, #1e293b); }
.ap-line-when { font-size: 0.72rem; color: var(--text-muted, #94a3b8); margin-left: 0.2rem; }
.ap-line-sep { color: var(--text-muted, #94a3b8); }
.ap-line-wait { color: var(--text-muted, #94a3b8); }

/* ── 최종 개정 행 ────────────────────────────────────────── */
.ap-rev {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
}
.ap-rev-no { font-weight: 700; color: var(--text-primary, #1e293b); }

/* ── 액션 행 ─────────────────────────────────────────────── */
.ap-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  background: #f8fafc;
  padding: 0.55rem 0.9rem;
}

/* ── 이력 탭 ─────────────────────────────────────────────── */
.ap-history-wrap .ap-tab-body {
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.9rem;
}
.ap-history-wrap .nav-tabs { border-bottom-color: var(--border-color, #e2e8f0); }
.ap-history-wrap .nav-link { font-size: 0.8125rem; font-weight: 600; }

.ap-history-wrap .history-timeline { font-size: 0.8125rem; }
.ap-history-wrap .history-item {
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border-color, #e2e8f0);
}
.ap-history-wrap .history-item:last-child { border-bottom: none; }

.ap-history-wrap .comment-bubble {
  background: #f8fafc;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
}
.ap-history-wrap .comment-bubble .author {
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  font-size: 0.8125rem;
}
.ap-history-wrap .comment-bubble .meta { color: var(--text-muted, #94a3b8); font-size: 0.7rem; }
.ap-history-wrap .comment-bubble .text {
  color: #334155;
  white-space: pre-wrap;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
}

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ap-line { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .ap-line-sep { display: none; }
  .ap-actions { justify-content: stretch; }
  .ap-actions > * { flex: 1 1 45%; }
  .ap-doc-name { flex-basis: 100%; margin-left: 0; }
}