/* ============================================================
   운송관리 관리자 모듈 전용 스타일.

   모듈 안에서만 쓰이므로 Blazor Common 으로 올리지 않는다 —
   올리면 이 스타일이 모든 모듈의 결합 지점이 된다.
   두 번째 모듈이 같은 모양을 쓰게 되면 그때 app.css 로 올린다.
   ============================================================ */

/* 대시보드 · 통계에서 조각을 가르는 머리글. 화면 제목이 아니다 —
   화면 이름은 사이드바와 브레드크럼이 이미 말한다. */
.ca-subhead {
  margin: 1.25rem 0 0.6rem;
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
}

/* 누르면 해당 목록으로 건너가는 통계 타일. 링크의 밑줄 · 파란 글씨를 걷어내야
   다른 타일과 같은 모양이 된다 — 안 걷으면 숫자만 링크색으로 떠 보인다. */
a.ca-stat-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.ca-stat-link:hover .jsini-stat__value,
a.ca-stat-link:focus-visible .jsini-stat__value {
  text-decoration: underline;
}

/* 처리할 것이 남아 있는 타일. 색 하나만 바꾼다 — 판정이 아니라 「여기 할 일이
   있다」는 표시다(설계안 12). */
.ca-stat--due .jsini-stat__value {
  color: #b26a00;
}

/* 결제 상태별 건수. 딱지와 숫자를 한 쌍으로 늘어놓는다. 좁은 화면에서는 줄을 바꾼다. */
.ca-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.ca-counts__item {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

/* 의심(FLAGGED) 거래의 까닭 한 줄. 표 안에서 눈에 걸려야 해서 색을 준다. */
.ca-flag {
  color: #d32f2f;
  font-size: var(--jsini-fs-sm);
}

/* 긴 글(후기 · 신고 내용)을 표 칸에서 두 줄까지만 보인다. 전부 펴면 한 줄이
   화면 절반을 먹고, 한 줄로 자르면 무슨 말인지 모른다. 전문은 상세 줄에 있다. */
.ca-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* 표의 상세 줄 · 처리 창에서 원문을 보이는 자리. 줄바꿈을 살린다. */
.ca-text {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 0.5rem;
}

/* 감사 기록의 전·후 비교. 나란히 두어야 무엇이 바뀌었는지 눈으로 대조된다.
   좁은 화면에서는 위아래로 쌓는다 — 나란히 두면 칸마다 가로로 굴러야 한다. */
.ca-json {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.ca-json__label {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
  margin-bottom: 0.25rem;
}

.ca-json pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  max-height: 22rem;
  overflow: auto;
  font-size: var(--jsini-fs-sm);
  background: var(--jsini-surface-muted);
  border: 1px solid var(--jsini-border, #e0e0e0);
  white-space: pre;
}

/* 처리 창 맨 위의 「무엇을 처리하는가」 요약. 창을 연 줄을 다시 확인하게 한다. */
.ca-subject {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--jsini-surface-muted);
}

/* 대시보드 · 통계는 CommCont 로 감싸지 않는다(키 큰 조각이 여럿). 대신 표가
   페이지를 따라 늘어나도록 두고, 조각 사이만 띄운다. */
.ca-section {
  margin-bottom: 1rem;
}