/* ============================================================
   Report - KPI, Charts, Rankings
   ============================================================ */

/* 상단 툴바 — 기간 탭(좌) + 날짜 범위 조회(우) */
.rpt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.rpt-date-search { display: flex; align-items: center; gap: var(--space-2); }
.rpt-date-in {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
  background: var(--white);
  color: var(--text);
}
.rpt-date-in:focus { outline: none; border-color: var(--ad-primary); }
.rpt-date-sep { color: var(--text-muted); font-weight: 600; }
.rpt-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.rpt-search-btn:hover { border-color: var(--ad-primary); color: var(--ad-primary); }
.rpt-search-btn.active { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }
/* 엑셀 다운로드 — 초록 강조, 조회 그룹과 약간 떨어뜨림 */
.rpt-excel-btn { background: var(--success); border-color: var(--success); color: #fff; margin-left: var(--space-3); }
.rpt-excel-btn:hover { background: #0e9f6e; border-color: #0e9f6e; color: #fff; }
.rpt-excel-btn:disabled { opacity: 0.6; cursor: default; }

/* KPI Summary Strip */
.rpt-summary-card {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.rpt-summary-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-1);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.rpt-summary-val {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.rpt-summary-val span { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); margin-left: 2px; }

.rpt-summary-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Main grid */
.rpt-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.rpt-full { grid-column: 1 / -1; }

/* Panel — .section-card로 마이그레이션됨 (components.css 참조).
   리포트 한정 컴팩트: 헤더/바디 세로 padding 줄임 + grid item이므로
   카드의 margin-bottom 제거(grid gap만으로 카드 사이 간격 결정). */
.rpt-main .section-card { margin-bottom: 0; }
.rpt-main .section-card__header { padding: var(--space-2) var(--space-5); }
.rpt-main .section-card__body { padding: var(--space-3) var(--space-5); }

/* Alert type distribution — 막대그래프(Chart.js) 영역 */
.rpt-alert-chart-wrap { position: relative; height: 280px; }

/* Resolve rate bar */
.resolve-rate {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.resolve-rate .label { font-size: var(--text-base); color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.resolve-rate .value { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em; }

.progress-bar-bg { flex: 1; height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* 인라인 스타일 클래스화 (시각 변화 없음) */
.rpt-toolbar .tab-bar { margin: 0; }                              /* layout .tab-bar 마진 상쇄 */
.rpt-mgr-name { font-weight: 700; }                              /* 관리자 통계표 이름 셀 */
.rpt-rate-row { display: flex; align-items: center; gap: 8px; }  /* 처리율 셀(바+값) */
.rpt-rate-row .progress-bar-bg { width: 80px; }
.rpt-rate-val { font-weight: 700; font-size: 13px; }

/* Stat boxes */
.rpt-stat-row { display: flex; gap: var(--space-3); }

.rpt-stat-box {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: center;
}

.rpt-stat-box .num { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.rpt-stat-box .lbl { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; }

/* Danger zone cards */
.rpt-zone-grid {
  display: grid;
  /* 열 방향 흐름 + 가로 스크롤. 카드 폭 260~320px 균일.
     기본은 1줄(카드 적을 때). 카드가 많으면 JS가 .is-two-rows를 붙여 2줄로. */
  grid-auto-flow: column;
  grid-template-rows: auto;
  grid-auto-columns: minmax(260px, 320px);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);   /* 스크롤바 여백 */
}

.rpt-zone-grid.is-two-rows { grid-template-rows: repeat(2, auto); }

.rpt-zone-grid .danger-zone-card { scroll-snap-align: start; }

.danger-zone-card {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  min-height: 90px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.danger-zone-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.danger-zone-card.high { background: var(--danger-bg); }   /* 빨강: danger 4회+ */
.danger-zone-card.medium { background: #ffedd5; } /* 주황: danger 1~3회 */
.danger-zone-card.low { background: var(--amber-bg); }    /* 노랑: caution만 */

.danger-zone-card .zone-name { font-weight: 800; font-size: var(--text-md); padding-right: var(--space-8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-zone-card .zone-stats { font-size: var(--text-sm); display: flex; gap: var(--space-4); font-weight: 600; color: var(--text-secondary); }
.danger-zone-card .zone-workers { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: break-word; }
.danger-zone-card .zone-visit { position: absolute; right: var(--space-4); top: var(--space-4); font-size: var(--text-xl); font-weight: 800; color: var(--text-muted); }
.danger-zone-card .zone-visit .unit { font-size: var(--text-sm); font-weight: 600; margin-left: 1px; }

/* Manager stats table (admin) */
.mgr-stats-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.mgr-stats-table thead th { text-align: center; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); background: var(--bg); position: relative; }
.mgr-stats-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--border-light); vertical-align: middle; text-align: center; position: relative; }
/* 세로 구분선 — 셀 padding 안쪽으로만 그려서 위·아래 빈공간 (다른 표와 동일 톤) */
.mgr-stats-table th::after, .mgr-stats-table td::after {
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 1px;
  background: var(--border);
}
.mgr-stats-table th:last-child::after, .mgr-stats-table td:last-child::after { display: none; }
.mgr-stats-table tbody tr:last-child td { border-bottom: none; }

/* === Responsive — 태블릿 이하에서 메인 2단을 세로로 === */
@media (max-width: 1024px) {
  .rpt-main { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rpt-summary-card { flex-wrap: wrap; }
  .rpt-summary-item { min-width: calc(50% - var(--space-4)); }
}