/* ============================================================
   Dashboard - Web-friendly design (참고 웹 기반)
   ============================================================ */

/* === Alert Banner === */
.alert-banner {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  animation: pulse-border 2.5s infinite;
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.alert-banner.danger { background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; }

.alert-banner .alert-head { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-3); }
.alert-banner .alert-title { font-size: var(--text-2xl); font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.alert-banner .alert-sub { font-size: var(--text-base); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* '처리'는 흰 배경·빨강 글씨 솔리드 버튼 (오른쪽 끝, alert-head flex:1이 밀어냄). */
/* 글자는 키우되(text-lg) 세로 패딩을 줄여(12→11px) 버튼=배너 높이는 원래대로 유지 */
.alert-banner .alert-action { display: inline-flex; align-items: center; margin-left: auto; padding: 11px var(--space-5); background: #fff; color: #dc2626; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 800; font-size: var(--text-lg); cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.alert-banner .alert-action:hover { background: #fff1f2; }

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* === Top 2-Column Grid === */
.dash-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* === Summary Panel === */
.dash-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-6);
  transition: all var(--transition);
  /* column flex — 헤더 아래 본문이 카드의 남은 세로 공간을 채워서
     본문(도넛+미니카드)이 헤더 아래 영역의 세로 중앙에 위치하도록.
     grid stretch로 카드가 늘어나도 본문 위·아래 여백이 균등하게 분포. */
  display: flex;
  flex-direction: column;
}
.dash-summary:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-summary-header { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }

.dash-summary-body { display: flex; align-items: center; gap: var(--space-6); flex: 1; }

/* Donut */
.dash-donut-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.dash-donut { width: 100%; height: 100%; }
.dash-donut circle { transition: stroke-dasharray 0.8s ease; }
.dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-donut-num { font-size: var(--text-3xl); font-weight: 800; line-height: 1; }
.dash-donut-num .unit { font-size: var(--text-sm); font-weight: 600; margin-left: 1px; }
.dash-donut-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-top: 2px; }

/* Stat Grid — 6-col, 행 1: 위험/주의/정상 (span 2씩), 행 2: 퇴근/미출근 (span 3씩) */
.dash-stat-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.dash-stat-mini.span-2 { grid-column: span 2; }
.dash-stat-mini.span-3 { grid-column: span 3; }

.dash-stat-mini {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg); transition: all var(--transition);
}
.dash-stat-mini.danger.has-value { background: var(--danger-light); }
.dash-stat-mini.caution.has-value { background: var(--caution-light); }
.dash-stat-icon { font-size: 16px; flex-shrink: 0; }
.dash-stat-mini.danger .dash-stat-icon { color: var(--danger); }
.dash-stat-mini.caution .dash-stat-icon { color: var(--caution); }
.dash-stat-mini.normal .dash-stat-icon { color: var(--success); }
.dash-stat-mini.off .dash-stat-icon { color: var(--info); }
.dash-stat-mini.absent .dash-stat-icon { color: var(--text-muted); }
.dash-stat-mini.holiday .dash-stat-icon { color: var(--text-secondary); }
.dash-stat-num { font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.dash-stat-num .unit { font-size: var(--text-xs); font-weight: 600; margin-left: 1px; color: var(--text-muted); }
.dash-stat-mini.danger .dash-stat-num { color: var(--danger); }
.dash-stat-mini.caution .dash-stat-num { color: var(--caution); }
.dash-stat-mini.normal .dash-stat-num { color: var(--success); }
.dash-stat-mini.off .dash-stat-num { color: var(--info); }
.dash-stat-mini.absent .dash-stat-num { color: var(--text-muted); }
.dash-stat-mini.holiday .dash-stat-num { color: var(--text-secondary); }
.dash-stat-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }

/* === Pending Alerts Panel === */
.dash-pending {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.dash-pending:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.dash-pending-header {
  padding: var(--space-3) var(--space-4); font-size: var(--text-xl); font-weight: 700; color: var(--caution);
  line-height: 1;
  background: var(--caution-light); border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: var(--space-2);
}
.dash-pending-header .count { font-size: var(--text-xl); font-weight: 800; margin-left: var(--space-1); }

/* 헤더 아래 영역을 고정 200px로 묶어, 더보기 버튼 유무와 무관하게
   카드 총 높이를 항상 일정(=기존 카드와 동일)하게 유지.
   버튼이 있으면 목록이 그만큼 줄고, 없으면 목록이 200px를 다 채운다. */
.dash-pending-body { height: 200px; display: flex; flex-direction: column; overflow: hidden; }
.dash-pending-list { flex: 1; overflow-y: auto; min-height: 0; }

.dash-pending-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); font-size: var(--text-base); cursor: pointer;
  transition: background var(--transition); border-bottom: 1px solid var(--border-light);
}
.dash-pending-item:last-child { border-bottom: none; }
.dash-pending-item:hover { background: var(--bg-subtle); }

.dash-pending-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-pending-item .dot.danger { background: var(--danger); }
.dash-pending-item .dot.caution { background: var(--caution); }
.dash-pending-item .dot.info { background: var(--info); }

.dash-pending-item .name { font-weight: 700; white-space: nowrap; }
.dash-pending-item .desc { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pending-item .time { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* 더보기 — 스크롤 목록 밖 하단 고정 푸터. 목록이 길어도 항상 같은 위치에서 클릭 가능. */
.dash-pending-more {
  flex-shrink: 0; width: 100%;
  padding: var(--space-3) var(--space-4); text-align: center;
  font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary);
  background: var(--white); border: none; border-top: 1px solid var(--border-light);
  cursor: pointer; font-family: inherit; transition: background var(--transition);
}
.dash-pending-more:hover { background: var(--bg-subtle); }
.dash-pending-more .more-count { color: var(--text-muted); font-weight: 500; margin-left: 2px; }

/* === Toolbar === */
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3);
}
/* 툴바 좌/우 그룹 — 셀렉트·탭·검색 묶음 */
.dash-toolbar-group { display: flex; gap: var(--space-3); align-items: center; }
.dash-toolbar .tab-bar { margin: 0; }

/* .dash-zone-chips / .zone-chip → 공통 .tab-bar / .tab-btn으로 마이그레이션됨 (layout.css 참조). */

/* 정렬 드롭다운만 연한 회색 테두리 (공유 .manager-select 진한 회색보다 우선) */
.manager-select.dash-sort-select { border-color: var(--border); }

.dash-search-box {
  display: flex; align-items: center; gap: var(--space-2);
  height: 36px;
  padding: var(--space-2) var(--space-4); background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); min-width: 200px;
}
.dash-search-box i { color: var(--text-muted); font-size: var(--text-md); }
.dash-search-box input { border: none; outline: none; font-size: var(--text-base); font-family: inherit; width: 100%; background: transparent; }

/* === 구역별 현황 패널 (section-card 본문) === */
.dash-zone-body { padding: var(--space-4) var(--space-5); background: var(--bg); }
.dash-zone-body .dash-toolbar { margin-bottom: var(--space-3); }

/* === Worker Card Grid === */
.worker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.wk-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-5); cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.wk-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.wk-card.absent { opacity: 0.55; }

.wk-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }

.wk-info { flex: 1; min-width: 0; }
.wk-name { font-weight: 700; font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2); }
.wk-sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
/* .wk-alert-tag/.wk-badge → .tag .tag--micro/--label로 마이그레이션됨 (components.css 참조).
   카드 안에서 줄어들지 않도록 한 flex-shrink는 부모(.wk-card) 영역에서 처리. */
.wk-name .tag--micro { padding-top: 3px; padding-bottom: 3px; }
.wk-card .wk-top > .tag--label { padding: 5px 10px; font-size: var(--text-sm); }

/* Vitals row in card */
.wk-vitals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3);
}
.wk-vital { display: flex; flex-direction: column; align-items: center; padding: var(--space-3) var(--space-2); position: relative; }
.wk-vital:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border); }
.wk-vital-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.wk-vital-val { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em; }
.wk-vital-val.danger { color: var(--danger); }
.wk-vital-val small { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-left: 1px; }

.wk-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; margin-top: auto; }
.wk-zone { padding: var(--space-1) var(--space-2); border-radius: 6px; font-size: var(--text-xs); font-weight: 700; background: var(--success-light); color: var(--success); }
.wk-zone.warn { background: var(--danger-bg); color: var(--danger); }
.wk-battery { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 600; }
.wk-battery.caution { color: var(--caution); }
.wk-battery.danger { color: var(--danger); }
.wk-battery.off { color: var(--text-muted); font-weight: 500; opacity: 0.8; }

/* === Admin Panels === */
/* .dash-panel*은 .section-card로 마이그레이션됨 (components.css 참조). */

/* === 워커 상세 모달 — 알림 이력 표 === */
.alert-history-row {
  display: grid;
  grid-template-columns: 80px 16px 1.6fr 0.7fr 0.7fr 80px;
  align-items: stretch;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-base);
}
.alert-history-row > * {
  position: relative;
  padding: var(--space-2) var(--space-2);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 세로 구분선 — 셀 padding 영역(위/아래 8px) 안쪽으로만 그려서 끝이 짧게 보이도록 */
.alert-history-row > *::after {
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 1px;
  background: var(--border);
}
.alert-history-row > *:last-child::after,
.alert-history-row > *:nth-child(2)::after { display: none; }
.alert-history-row > *:first-child,
.alert-history-row > *:nth-child(4),
.alert-history-row > *:nth-child(5),
.alert-history-row > *:last-child { justify-content: center; }
/* 색 점 셀(2번째) — 폭이 16px이라 padding이 들어가면 점이 잘림 */
.alert-history-row > *:nth-child(2) { padding: 0; justify-content: center; }
.alert-history-row.head {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Manager cards */
.dash-mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.dash-mgr-card { padding: var(--space-4); background: var(--bg); border-radius: var(--radius-sm); transition: all var(--transition); }
/* 관리자별 현황 페이저 — 그리드 아래, 카드 영역과 동일한 좌우 여백 */
.dash-mgr-pager { padding: 0 var(--space-5) var(--space-4); }
.dash-mgr-pager .stg-pager { margin-top: 0; }
.dash-mgr-card:hover { background: var(--bg-subtle); box-shadow: var(--shadow); }
.dash-mgr-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.dash-mgr-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ad-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--text-md); font-weight: 800; flex-shrink: 0; }
.dash-mgr-name { font-weight: 700; font-size: var(--text-md); }
.dash-mgr-meta { font-size: var(--text-sm); color: var(--text-muted); }
.dash-mgr-pending { color: var(--danger); font-weight: 700; }   /* 담당인원 옆 "미처리 N건" */
.tag--noshrink { flex-shrink: 0; }   /* 워커 행 상태 태그 — 폭 줄지 않게 */
/* 관리자별 현황 — 상태 미니 카드 (한 줄 6칸, 원래 높이 유지) */
.dash-mgr-statgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: var(--space-2); }
.dash-mgr-statcell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 1px; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.dash-mgr-statcell .num { font-size: var(--text-md); font-weight: 800; line-height: 1; }
.dash-mgr-statcell .lbl { font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dash-mgr-statcell.danger .num, .dash-mgr-statcell.danger .lbl i { color: var(--danger); }
.dash-mgr-statcell.caution .num, .dash-mgr-statcell.caution .lbl i { color: var(--caution); }
.dash-mgr-statcell.normal .num, .dash-mgr-statcell.normal .lbl i { color: var(--success); }
.dash-mgr-statcell.off .num, .dash-mgr-statcell.off .lbl i { color: var(--info); }
.dash-mgr-statcell.absent .num, .dash-mgr-statcell.absent .lbl i { color: var(--text-muted); }
.dash-mgr-statcell.holiday .num, .dash-mgr-statcell.holiday .lbl i { color: var(--text-secondary); }

/* 상태 라벨 도움말 — 구역별 현황 제목 옆 '상태 안내' 호버 설명 (건강살자 프로젝트 형식) */
.dash-help { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-1); color: var(--text-muted); cursor: help; font-size: var(--text-sm); font-weight: 600; vertical-align: middle; flex-shrink: 0; }
.dash-help i { font-size: var(--text-md); }
.dash-help:hover, .dash-help:focus { color: var(--ad-primary); outline: none; }
.dash-help-text { letter-spacing: -0.01em; }
.dash-help-pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: none; flex-direction: column; gap: 9px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--text); color: #fff; box-shadow: var(--shadow-md);
  white-space: normal; width: 290px; z-index: 50; font-size: 12px; font-weight: 600;
}
.dash-help:hover .dash-help-pop, .dash-help:focus .dash-help-pop, .dash-help:focus-within .dash-help-pop { display: flex; }
.dash-help-title { font-weight: 700; font-size: 12px; padding-bottom: 6px; margin-bottom: 1px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.dash-help-row { display: flex; align-items: flex-start; gap: 8px; }
.dash-help-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dash-help-label { font-weight: 700; min-width: 34px; flex-shrink: 0; }
.dash-help-desc { color: rgba(255, 255, 255, 0.78); font-weight: 500; line-height: 1.4; }

/* 근로자 상세 모달 — 반복되던 인라인 스타일 블록을 클래스로 (값 동일, 시각 변화 없음) */
.wk-detail-card { background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.wk-detail-vital { background: var(--bg); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; display: flex; flex-direction: column; justify-content: center; }
.wk-detail-trend { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.wk-detail-trend--last { margin-bottom: 14px; }   /* 마지막 트렌드(걸음수) */
/* 근로자 상세 모달 — 반복 인라인 스타일을 클래스화 (동적 색상만 inline 유지) */
.wk-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--border-light); padding-top: 10px; }
.wk-detail-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.wk-detail-value { font-size: 13px; font-weight: 700; margin-top: 3px; }
.wk-detail-vital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.wk-detail-vital-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.wk-detail-vital-num { font-size: 24px; font-weight: 800; margin-top: 6px; }
.wk-detail-vital-sev { font-size: 12px; font-weight: 600; margin-top: 4px; }
.wk-detail-chart { position: relative; height: 180px; }

/* 근로자 상세 — 연락처 버튼 (본인=기본, 보호자=danger) */
.wk-contact-btn {
  flex: 1; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
}
.wk-contact-btn--guardian { border: none; background: var(--danger); color: #fff; }

/* 근로자 상세 — 알림 이력 재처리 버튼 */
.wk-reprocess-btn {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--white); color: var(--text-muted);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* 근로자 상세 — 프로필 헤더 / 트렌드 섹션 반복 레이아웃 */
.wk-detail-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wk-detail-name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.wk-contact-row { display: flex; gap: 8px; margin-bottom: 16px; }
.wk-trend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wk-trend-label { font-size: 12px; font-weight: 700; }
.wk-trend-label--block { margin-bottom: 10px; }   /* head 밖 단독 라벨(스트레스) */

/* 근로자 상세 — 섹션 타이틀 (기본 mb:12, 변형은 modifier) */
.wk-detail-section-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.wk-detail-section-title--tight { margin-bottom: 10px; }   /* 실시간 건강 상태 */
.wk-detail-section-title--gap { margin-top: 8px; }          /* 알림 이력 */

/* 근로자 상세 — 에러/빈 상태 + 근무중 점 */
.wk-detail-error { text-align: center; padding: 40px; color: var(--danger); }
.wk-detail-empty { text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px; }
.wk-working-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: 4px; }

/* === Responsive — 태블릿 이하에서 다단 그리드 접기 === */
@media (max-width: 1024px) {
  .worker-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dash-top-grid { grid-template-columns: 1fr; }
  .worker-grid { grid-template-columns: 1fr; }
}

/* .worker-status-badge/.pending-badge → .tag .tag--label로 마이그레이션됨 (components.css 참조). */