/* 버전 2 — 4a단계: 서류 발급 화면(#view-documents) 신규 LMS 모양.
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css·React 번들은 건드리지 않는다.
   모든 규칙은 html[data-ui="v2"] #view-documents 아래 — 다른 분할 화면에는 영향 없다.
   상태 색 규칙(.doc-stat 왼쪽 막대, 상태 배지, 발급 완료/유관 소통/요청 취소 버튼 색)은 그대로 두고
   모양(둥글기·여백·글자)만 바꾼다. 출결/휴가(attendance.css)와 같은 방식.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* React 분할 화면이 쓰는 파랑 계열 토큰을 이 화면 안에서만 LMS 로즈로 */
html[data-ui="v2"] #view-documents {
  --sv-brand: var(--ds-primary);
  --sv-selected-bg: var(--ds-primary-soft);
  --sv-hover: var(--ds-muted);
}

/* ── 페이지 머리 ───────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-documents .document-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .document-sub {
  font-size: 12px;
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-documents .document-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}
html[data-ui="v2"] #view-documents .document-link:hover { background: var(--ds-muted); color: var(--ds-foreground); }

/* ── 상태 요약 타일 — 카드, 왼쪽 상태 색 막대 유지, 숫자는 크게 ───────────────── */
html[data-ui="v2"] #view-documents .document-summary { gap: 12px; }
html[data-ui="v2"] #view-documents .doc-stat {
  min-height: 60px;
  padding: 12px 16px;
  border-color: var(--ds-border);
  border-left-color: var(--doc-stat-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-documents .doc-stat:hover,
html[data-ui="v2"] #view-documents .doc-stat:focus-visible {
  border-color: var(--ds-border);
  border-left-color: var(--doc-stat-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-documents .doc-stat span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-documents .doc-stat strong {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-foreground);
}
/* 고른 타일: 로즈 링(상태 색 막대와 겹치지 않게) */
html[data-ui="v2"] #view-documents .doc-stat.active {
  border-color: var(--ds-primary);
  border-left-color: var(--doc-stat-border);
  background: var(--ds-primary-soft);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* ── 검색·필터 ─────────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-documents .doc-filter-toggle {
  min-height: 40px;
  padding: 0 14px;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-muted-foreground);
  font-size: 13px;
  font-weight: 600;
}
html[data-ui="v2"] #view-documents .doc-filter-toggle:hover,
html[data-ui="v2"] #view-documents .doc-filter-toggle:focus-visible,
html[data-ui="v2"] #view-documents .doc-filter-toggle.active {
  border-color: var(--ds-primary);
  background: var(--ds-card);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .doc-filter-popover {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
/* 상태 필터 = 분절 탭 */
html[data-ui="v2"] #view-documents .document-status-tabs {
  gap: 2px;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-documents .document-status-tabs button {
  border-radius: var(--ds-radius-md);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-documents .document-status-tabs button:hover:not(.active),
html[data-ui="v2"] #view-documents .document-status-tabs button:focus-visible:not(.active) {
  border-color: transparent;
  background: transparent;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .document-status-tabs button.active {
  border-color: transparent;
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-documents :is(.document-warn, .document-scope-note, .document-loading, .document-empty) {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면: 목록 상자(테두리 + 둥글기 24) ─────────────────────── */
html[data-ui="v2"] #view-documents #doc-list .dsv-root {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-documents .dsv-panel { background: var(--ds-card); }
html[data-ui="v2"] #view-documents .dsv-separator { background: var(--ds-border); }
html[data-ui="v2"] #view-documents .dsv-list-toolbar { padding: 10px 16px; border-bottom-color: var(--ds-border); }
/* 체크박스 라벨(미완료만 보기)은 버튼이 아니다 */
html[data-ui="v2"] #view-documents label.dsv-filter-toggle {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-ui="v2"] #view-documents .dsv-acc-trigger { padding-left: 16px; padding-right: 16px; }
html[data-ui="v2"] #view-documents .dsv-acc-title { font-size: 13px; font-weight: 600; }
html[data-ui="v2"] #view-documents .dsv-acc-count {
  border-radius: 999px;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-documents .dsv-list-item {
  padding-left: 24px;
  padding-right: 16px;
  border-bottom-color: var(--ds-border);
  background: var(--ds-card);
}
html[data-ui="v2"] #view-documents .dsv-list-item:hover { background: var(--ds-muted); }
html[data-ui="v2"] #view-documents .dsv-list-item--selected {
  padding-left: 21px;
  border-left: 3px solid var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .dsv-avatar {
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  font-weight: 700;
}
html[data-ui="v2"] #view-documents .dsv-detail-header { padding-left: 20px; padding-right: 20px; }
html[data-ui="v2"] #view-documents .dsv-detail-hname {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .dsv-empty-detail { color: var(--ds-muted-foreground); }

/* 상세: 메모 입력칸 = 공용 입력칸 */
html[data-ui="v2"] #view-documents .dsv-detail-memo-ta {
  border-color: var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-documents .dsv-detail-memo-ta:focus {
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* 상세 버튼 4종: 의미 색(완료 초록 / 유관 소통 주황 / 취소 빨강)은 그대로, 모양만 공용으로.
   메모 저장은 일반 저장 버튼이라 로즈 */
html[data-ui="v2"] #view-documents .dsv-btn {
  border-width: 1px;
  border-radius: var(--ds-radius-lg);
  font-weight: 600;
}
html[data-ui="v2"] #view-documents .dsv-btn:not(:disabled):hover,
html[data-ui="v2"] #view-documents .dsv-btn--active { box-shadow: none; }
html[data-ui="v2"] #view-documents .dsv-btn--memo {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}
html[data-ui="v2"] #view-documents .dsv-btn--memo:not(:disabled):hover {
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
}

/* 아바타 글자: 작은 크기에서도 읽히게 한 단계 진한 로즈 */
html[data-ui="v2"] #view-documents .dsv-avatar { color: var(--ds-primary-active); }

/* ── 다크: 라이트 색이 남던 곳(서류 유형 칩, 완료 숨김 토글) ─────────────────── */
:root[data-ui="v2"][data-theme="dark"] body #view-documents :is(.dsv-item-type-chip, .dsv-detail-chip) {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}
:root[data-ui="v2"][data-theme="dark"] body #view-documents .document-hidden-done-toggle {
  border-color: var(--ds-border);
  background: var(--ds-muted);
  color: var(--ds-foreground);
}

/* 유리 효과 겹침 제거(다크에서 고른 타일이 회색으로 보이던 문제) */
html[data-ui="v2"] #view-documents .doc-stat::before,
html[data-ui="v2"] #view-documents .doc-stat::after { display: none; }