/* GBUY 전용 — 공용 style.css 에 없는 조각만 채운다 (다른 앱과 톤을 맞춘다). */

/* 상태 배지 색 */
.badge-blue   { background: rgba(59,130,246,0.14);  color: #3b82f6; }
.badge-green  { background: rgba(34,197,94,0.14);   color: #16a34a; }
.badge-amber  { background: rgba(245,158,11,0.16);  color: #d97706; }
.badge-red    { background: rgba(239,68,68,0.14);   color: #ef4444; }
.badge-purple { background: rgba(139,92,246,0.14);  color: #8b5cf6; }
.badge-teal   { background: rgba(20,184,166,0.14);  color: #14b8a6; }
.badge-gray   { background: rgba(148,163,184,0.16); color: var(--text-muted, #94a3b8); }

/* 상세 모달의 이름-값 줄 */
.kv-row { display: flex; gap: 12px; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px dashed var(--border-color, rgba(148,163,184,0.2)); }
.kv-key { color: var(--text-muted, #94a3b8); min-width: 96px; }
.kv-val { flex: 1; }

/* 품목표 합계 · 요약 상자 */
.items-sum { text-align: right; margin-top: 10px; color: var(--text-muted, #94a3b8); }
.items-sum b { color: var(--text-main, inherit); font-size: 1.05rem; }
.items-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.summary-box { padding: 10px 12px; border: 1px solid var(--border-color, rgba(148,163,184,0.25)); border-radius: 10px; margin-bottom: 14px; font-size: 0.9rem; }
.data-table.items input.form-control { padding: 5px 8px; }

/* 표 감싸기 · 빈 칸 · 행 동작 버튼 */
.table-wrap { overflow-x: auto; }
.empty-cell { text-align: center; color: var(--text-muted, #94a3b8); padding: 22px !important; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .btn { margin-left: 4px; }
.log-line { padding: 6px 0; border-bottom: 1px solid var(--border-color, rgba(148,163,184,0.2)); font-size: 0.85rem; color: var(--text-muted, #94a3b8); }

/* 통계 막대 그래프 (라이브러리 없이) */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.bar-label { width: 40px; color: var(--text-muted, #94a3b8); }
.bar-track { flex: 1; height: 14px; background: rgba(148,163,184,0.15); border-radius: 7px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 7px; }
.bar-amt { width: 110px; text-align: right; }

/* 별점 고르기 */
.star-pick { display: flex; gap: 6px; font-size: 1.6rem; }
.star-pick .star { cursor: pointer; color: rgba(148,163,184,0.4); user-select: none; }
.star-pick .star.on { color: #f59e0b; }

/* 구매 파이프라인 흐름 (현황판 상단) — 손봐야 할 단계로 바로 간다 */
.pipeline-flow { display: flex; align-items: stretch; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.pl-step { flex: 1; min-width: 132px; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pl-step:hover { transform: translateY(-2px); border-color: var(--color-primary, #3b82f6); box-shadow: var(--shadow-sm); }
.pl-step.has { border-color: rgba(59,130,246,0.45); }
.pl-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(59,130,246,0.12); color: #3b82f6; }
.pl-step.has .pl-icon { background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(139,92,246,0.9)); color: #fff; }
.pl-icon i { width: 20px; height: 20px; }
.pl-txt { display: flex; flex-direction: column; min-width: 0; }
.pl-n { font-size: 1.5rem; font-weight: 700; line-height: 1; font-family: 'Outfit', system-ui, sans-serif; }
.pl-step.has .pl-n { color: #3b82f6; }
.pl-l { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.pl-arrow { display: flex; align-items: center; color: var(--text-muted); opacity: 0.5; }
@media (max-width: 900px) { .pl-arrow { display: none; } .pl-step { min-width: 120px; } }

/* 손맛 — 클릭 가능한 통계 카드는 살짝 떠오른다 */
.stat-card[data-go] { cursor: pointer; }
.stat-card[data-go]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.18)); border-color: var(--color-primary, #3b82f6); }

/* 상세 모달 살짝 넓게, 표는 카드 톤 */
#detail-modal .modal-container { max-width: 720px; }
.data-table.items tbody tr:hover { background: transparent; }
.items-head .btn i { width: 14px; height: 14px; }

/* 파일 고르기 라벨 버튼 안 아이콘 정렬 */
label.btn i { width: 15px; height: 15px; vertical-align: -2px; }

/* 반입 모달의 나라장터 검색 영역 */
.import-source { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 12px; background: rgba(59,130,246,0.05); }
.import-source .subtitle { display: block; margin-top: 6px; }

/* ── 결재선 타임라인 ────────────────────────────────────────────────────────
   왜 표가 아니라 세로 줄인가
     결재는 '순서' 가 뜻이다. 표로 두었더니 3단계 중 지금 어디인지를 사람이
     한눈에 못 짚어 매번 되물었다. 왼쪽 눈금 하나로 지금 칸이 보이게 한다. */
.appr-line { display: flex; flex-direction: column; gap: 0; margin: 4px 0 8px; }
.appr-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 9px 0; position: relative; }
.appr-step:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: -6px;
  width: 1px; background: var(--border-color); }
.appr-pip { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); }
.appr-approved .appr-pip { background: rgba(34,197,94,0.15); border-color: transparent; color: #22c55e; }
.appr-rejected .appr-pip { background: rgba(239,68,68,0.15); border-color: transparent; color: #ef4444; }
.appr-pending .appr-pip { background: #3b82f6; border-color: transparent; color: #fff; }
.appr-who { font-size: 0.86rem; line-height: 1.45; }
.appr-who .subtitle { font-size: 0.76rem; }
.appr-when { font-size: 0.76rem; color: var(--text-muted); padding-top: 4px; white-space: nowrap; }

/* ── 3단계 대조 (발주 · 검수 · 계산서) ─────────────────────────────────────
   세 값을 나란히 두지 않으면 어느 쪽이 틀렸는지 사람이 못 고른다. */
.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
@media (max-width: 560px) { .match-grid { grid-template-columns: minmax(0, 1fr); } }
.match-cell { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-card); }
.match-cell b { display: block; margin-top: 2px; font-size: 1.05rem; font-family: 'Outfit', system-ui, sans-serif; }
.match-cell .subtitle { font-size: 0.72rem; }

/* 경고 상자 — 반려 사유 · 분할발주 · 대조 불일치처럼 그냥 지나치면 안 되는 것 */
.summary-box.warn { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.07); }