/* 프로젝트 관리(manage-projects) 화면: 워크스페이스 지표 카드
 * (.overview-metric*, .overview-metrics, .overview-detail*), 프로젝트
 * 목록·상세(.overview-project*, .project-*).
 *
 * .test-container-map(분석 실행 화면의 범위 표시)도 여기(먼저 링크되는 파일)에
 * 함께 둔다 -- staged.css 쪽에 이를 덮어쓰는 규칙은 없다.
 *
 * 반경은 css/tokens.css의 계단을 읽는다: 상세 카드는 --card-radius, 목록 행과
 * 사실 타일은 --row-radius, 탭·버튼은 --control-radius. 전부 8px 하나로 적혀
 * 있던 동안 프로젝트 행과 그 행이 여는 상세 카드가 같은 모서리로 서서, 무엇이
 * 무엇을 담고 있는지 모서리가 말해 주지 못했다. 컨테이너 알약(6px)은 계단 밖이다 --
 * 11px 행 안에 12px 여백을 두고 들어가는 태그라 남는 곡률이 없다. */

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.overview-projects {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.overview-projects-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.overview-projects-head small {
  color: var(--muted-strong);
  font-size: var(--fs-2);
  font-weight: 800;
}

.overview-projects-head h3 {
  margin: 4px 0 0;
  font-size: var(--fs-5);
}

.overview-projects-head span {
  color: var(--muted);
  font-size: var(--fs-3);
}
/* U-6: an empty-state's message is what tells the user what to do next --
 * same reasoning as .dashboard-empty > p (css/dashboard.css). */
.empty-projects p {
  color: var(--text);
  font-size: var(--fs-3);
}

.project-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.project-filter-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--muted-strong);
  padding: 7px 10px;
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 800;
  cursor: pointer;
}

.project-filter-tabs button:hover,
.project-filter-tabs button.active {
  border-color: rgba(10, 189, 163, .42);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.empty-projects p {
  margin: 0;
}

/* Above the breakpoint the detail opens in its own column beside the list, so the
   row you clicked stays exactly where it was. Below it, the panel is moved into
   the list by JS and expands directly under that row. The column only exists
   while something is open -- otherwise the list keeps the full width. */
.overview-projects-body {
  display: grid;
  gap: 10px;
  align-items: start;
}

/* U-10 (docs/plans/ROADMAP.md §2.1): snapped from 900px to 761px, the
 * complement of the console's ≤760px tier. */
@media (min-width: 761px) {
  .overview-projects[data-detail-open="true"] .overview-projects-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  }

  .overview-projects[data-detail-open="true"] .overview-project-detail-slot {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.overview-projects[data-detail-open="false"] .overview-project-detail-slot:empty,
.overview-projects[data-detail-open="false"] .overview-project-detail-slot {
  min-width: 0;
}

.overview-project-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* Inlined under its row on narrow screens: the panel is a list child there, so it
   picks up the row's full width and reads as an expansion of that card. */
.overview-project-list > .overview-project-detail {
  margin-top: 0;
  border-color: rgba(10, 189, 163, .38);
}

.overview-project {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--row-radius);
  color: var(--text);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.overview-project:last-child {
  border-bottom: 1px solid var(--line);
}

.overview-project:hover,
.overview-project.active {
  border-color: rgba(10, 189, 163, .38);
  background: var(--brand-soft);
}

.overview-project:focus-visible {
  outline: 2px solid rgba(10, 189, 163, .45);
  outline-offset: 2px;
}

.overview-project div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.overview-project b,
.overview-project small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.overview-project small {
  color: var(--muted);
  font-size: var(--fs-3);
}

.overview-project .project-container-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.project-container-pills span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-muted);
  padding: 4px 8px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
  line-height: 1.3;
}

.project-container-pills b {
  color: var(--muted);
  font-weight: 800;
}

.project-container-pills span[data-empty="true"] {
  border-color: var(--line);
  border-style: dashed;
  color: var(--muted);
  background: #fbfdfd;
}

.overview-project[data-lifecycle="archived"] {
  opacity: .72;
}

.overview-metric {
  width: 100%;
  min-height: 96px;
  display: grid;
  align-content: start;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 14px 16px;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
}

.overview-metric:hover,
.overview-metric.active {
  border-color: rgba(10, 189, 163, .38);
  background: var(--brand-soft);
}

.overview-metric strong {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-6);
  line-height: 1;
}

.overview-metric-hint {
  display: block;
  width: fit-content;
  margin-top: 9px;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: var(--fs-1);
  line-height: 1.25;
}

.overview-metric[data-empty="true"] {
  border-style: dashed;
  background: #fbfdfd;
}

.overview-metric[data-empty="true"] strong {
  color: #9aa6a6;
}

.overview-metric[data-empty="true"] .overview-metric-hint {
  color: var(--warning);
  background: var(--warning-soft);
}

.overview-detail {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: #fff;
}

.overview-detail-head,
.overview-detail-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.overview-detail-head {
  margin-bottom: 10px;
}

/* The copy beside it is long enough to squeeze the action into a mid-word wrap ("새 프로젝 / 트"). */
.overview-detail-head > button,
.overview-detail-row > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.overview-detail-head h3 {
  margin: 0 0 4px;
  font-size: var(--fs-5);
}

.overview-detail-head p,
.overview-detail-row small,
.overview-detail-more {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-3);
}

.overview-detail-list {
  display: grid;
}

.overview-detail-row {
  min-height: 52px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.overview-detail-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.overview-detail-row b,
.overview-detail-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-detail-more {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.overview-project-detail {
  margin-top: 0;
}

.project-detail-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-detail-open {
  color: var(--brand-dark);
  font-size: var(--fs-2);
  font-weight: 800;
  white-space: nowrap;
  text-decoration: underline;
}

.project-detail-close {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--muted-strong);
  font: inherit;
  font-size: var(--fs-2);
  line-height: 1;
  cursor: pointer;
}

.project-detail-close:hover {
  border-color: rgba(10, 189, 163, .42);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.project-count-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: 1.45;
}

/* The panel is a narrow side column now, so a fixed 3-up grid squeezed the
   labels into mid-word wraps. Let the columns reflow to whatever fits. */
.project-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.project-fact-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-muted);
  padding: 10px;
  color: var(--muted-strong);
  font-size: var(--fs-3);
}

.project-fact-grid b {
  color: var(--muted);
  font-size: var(--fs-1);
}

.test-container-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.test-container-map {
  margin-top: 10px;
  margin-bottom: 0;
}

.test-container-map span {
  display: grid;
  gap: 3px;
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: #fff;
  padding: 9px 10px;
  color: var(--muted-strong);
  font-size: var(--fs-2);
}

.test-container-map b {
  color: var(--muted);
  font-size: var(--fs-1);
}

.test-container-map em {
  min-width: 0;
  color: var(--muted-strong);
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.project-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.project-detail-actions button {
  min-height: 38px;
  border-radius: var(--control-radius);
  padding: 8px 12px;
  font-weight: 800;
}

.project-linked-questions,
.project-linked-runs {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.project-linked-questions h4,
.project-linked-questions p,
.project-linked-runs h4,
.project-linked-runs p {
  margin: 0;
}

.project-linked-questions h4,
.project-linked-runs h4 {
  font-size: var(--fs-4);
}

.project-linked-questions article,
.project-linked-runs article {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface);
  padding: 10px;
}

.project-linked-questions b,
.project-linked-questions small,
.project-linked-runs b,
.project-linked-runs small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-linked-questions small,
.project-linked-runs small {
  color: var(--muted);
  font-size: var(--fs-3);
}
/* U-6: the <p> here is the empty-state fallback message (e.g. "질문
 * 관리에서 프로젝트를 지정해 저장하세요") -- an instruction, not a caption. */
.project-linked-questions p,
.project-linked-runs p {
  color: var(--text);
  font-size: var(--fs-3);
}