/* 장비 헬스체크 (health) 페이지 전용 스타일 — 사이클 26 Phase 2-B (Lane B).
   index.html <head> 에서 <link rel="stylesheet"> 으로 로드 — fragment innerHTML
   mount 와 무관하게 페이지 진입 직후 100% 적용 보장. inline <style> 금지
   (14차 교훈). 글로벌 styles.css 의 .page-head / .grid 와 충돌하지 않게
   네임스페이스 prefix (.health-page, .hp-, .hcard-) 일관 사용. */

/* ── 상태 색 토큰 (재사용 가능). styles.css 의 --ok/--err/--warn/--info 와
   동의어, 헬스 도메인 일관성용 별칭. */
.health-page{
  --sb-ok:   var(--ok);
  --sb-ok-bg:var(--ok-bg);
  --sb-warn: var(--warn);
  --sb-warn-bg:var(--warn-bg);
  --sb-err:  var(--err);
  --sb-err-bg:var(--err-bg);
  --sb-mute: var(--muted);
  --sb-mute-bg:var(--line-2);
  --sb-off:  var(--soft);
  --sb-off-bg:#f0f1f5;
}

.health-page{width:100%;max-width:1280px;margin:0 auto}

/* 사이클 32 Phase 3 — fragment 자체 헤더 제거 후 액션 버튼 strip.
   외부 _pageHead 자동 헤더와 중복 제거. */
.health-page .hp-actions{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:8px;
}
@media (max-width:640px){
  .health-page .hp-actions{justify-content:flex-start}
  .health-page .hp-actions .btn{flex:1 1 auto}
}

/* ── 503 배너 ──────────────────────────────────────────────────────── */
.hp-banner{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  background:var(--sb-err-bg);color:var(--sb-err);
  border:1px solid #f5c3d2;margin:12px 0;font-size:13px;font-weight:600;
}
.hp-banner-dot{
  width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(201,48,88,.16);
}

/* ── 카드 5개 (camera / zigbee / mqtt / go2rtc / system) ─────────── */
.health-cards{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;margin:12px 0 18px;
}
.hcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hcard:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.hcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hcard.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,56,92,.12)}
.hcard-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.hcard-title{font-size:13px;font-weight:700;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard-status{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.hcard-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sb-ok{color:var(--sb-ok);background:var(--sb-ok-bg)}
.sb-warn{color:var(--sb-warn);background:var(--sb-warn-bg)}
.sb-err{color:var(--sb-err);background:var(--sb-err-bg)}
.sb-mute{color:var(--sb-mute);background:var(--sb-mute-bg)}
.sb-off{color:var(--sb-off);background:var(--sb-off-bg)}
.sb-unknown{color:var(--soft);background:#f0f1f5}
.hcard-body{display:flex;align-items:baseline;gap:6px}
.hcard-count{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hcard-unit{font-size:12px;color:var(--muted);font-weight:600}
.hcard-foot{font-size:11px;color:var(--muted)}

@media (max-width:980px){
  .health-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
  .health-cards{grid-template-columns:1fr}
}
@media (max-width:380px){
  .hcard-body{font-size:0.9rem}
  .hcard-count{font-size:20px}
}

/* ── 도메인 상세 패널 ─────────────────────────────────────────────── */
/* cycleL77 — 누적 상세 카드 컨테이너 (mount 시 camera+zigbee 자동 추가) */
.hp-details{
  display:flex;flex-direction:column;gap:0;margin-top:16px;
}
.hp-detail{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;
}
.hp-detail-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line-2);
}
.hp-detail-title{font-size:15px;font-weight:700;margin:0}
.hp-detail-body{padding:14px 16px;display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media (max-width:980px){.hp-detail-body{grid-template-columns:1fr}}
/* cycleL78 — 세션 페이지의 .hp-detail-body 는 chart 없이 table 1개만 — 2col grid 에서 우측 컬럼(작업 버튼)이 잘리는 문제 회피 */
.health-page[data-page="session"] .hp-detail-body{grid-template-columns:1fr}
/* cycleL78 issue #4 — 로그인 장치 목록 15개 초과 시 세로 스크롤 (header 40 + row*40 ≈ 640px) */
.health-page[data-page="session"] .hp-table-wrap{max-height:640px;overflow-y:auto}
.hp-section-title{font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 8px}

/* SVG 차트 컨테이너 — 자작 SVG (Q1 결정) */
.hp-chart-wrap{min-width:0}
.hp-chart{
  position:relative;width:100%;height:200px;
  background:var(--line-2);border-radius:12px;overflow:hidden;
}
.hp-chart svg{width:100%;height:100%;display:block}
.hp-chart-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--muted);font-size:12px;
}
.hp-chart-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.hp-chart-area{fill:rgba(255,56,92,.10);stroke:none}
.hp-chart-grid{stroke:#cfd4dd;stroke-width:1;stroke-dasharray:2 4}
.hp-chart-axis{fill:var(--muted);font-size:10px;font-weight:600}

/* 도메인 장비 테이블 */
.hp-table-wrap{min-width:0;overflow-x:auto}
.hp-table{width:100%;border-collapse:collapse;font-size:13px}
.hp-table th{text-align:left;font-weight:700;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.hp-table td{padding:8px 6px;border-bottom:1px dashed var(--line-2);vertical-align:middle}
.hp-table tr.row-clickable{cursor:pointer}
.hp-table tr.row-clickable:hover{background:var(--line-2)}
.hp-table .col-status{width:90px}
.hp-table code{font-family:'JetBrains Mono','SF Mono',monospace;font-size:12px;color:var(--ink-2)}

/* ── Drawer (right slide) ─────────────────────────────────────────── */
.hp-drawer-mask{
  position:fixed;inset:0;background:rgba(17,24,39,.32);z-index:60;
  backdrop-filter:blur(2px);
}
.hp-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:420px;max-width:90vw;
  background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-12px 0 32px rgba(17,24,39,.12);
  display:flex;flex-direction:column;
  transform:translateX(0);
  animation:hp-drawer-in .18s ease-out;
}
@keyframes hp-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.hp-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line-2);flex-shrink:0;
}
.hp-drawer-title{font-size:15px;font-weight:700;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-drawer-close{padding:6px 10px;font-size:14px}
.hp-drawer-body{padding:14px 16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.hp-drawer-section{display:flex;flex-direction:column;gap:6px}
.hp-incident-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.hp-incident-list li{
  padding:8px 10px;border-radius:8px;background:var(--line-2);
  font-size:12px;color:var(--ink-2);
}
.hp-incident-list li.empty{background:transparent;color:var(--muted);padding:0}
.hp-drawer-raw{
  background:#0f1320;color:#e6edf6;border-radius:10px;padding:10px;
  font-family:'JetBrains Mono','SF Mono',monospace;font-size:11px;
  max-height:200px;overflow:auto;margin:0;line-height:1.45;
}
.hp-drawer-actions{
  display:flex;align-items:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--line-2);
  flex-wrap:wrap;
}
.hp-mute-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:600}
.hp-mute-field input{
  width:80px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-weight:500;color:var(--ink);background:#fff;
}
.hp-drawer-status{font-size:12px;min-height:18px;color:var(--muted)}
.hp-drawer-status.ok{color:var(--ok)}
.hp-drawer-status.err{color:var(--err)}

/* 권한 비활성 (operator/admin 미달) — 회색 + cursor */
.btn[disabled],
.btn[data-disabled="1"]{
  opacity:.55;cursor:not-allowed;pointer-events:auto;
}

/* topbar-health-pill 제거 (2026-06-06) — 로고 옆 헬스체크 칩 삭제. */

/* ── 모바일 최적화 (14차 교훈 — page-head + grid wrap 명시) ─────── */
@media (max-width:1024px){
  .health-page .page-head{flex-direction:column;align-items:flex-start;gap:8px}
  .health-page .page-actions{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .hp-detail-head{flex-direction:column;align-items:flex-start;gap:6px}
  .hp-detail-body{padding:12px}
  .hp-drawer{width:100%;max-width:100%}
}
@media (max-width:640px){
  .hp-chart{height:160px}
  .hp-drawer-actions{flex-direction:column;align-items:stretch}
  .hp-drawer-actions .btn{width:100%}
  .hp-mute-field{flex-direction:row;align-items:center;justify-content:space-between}
  .hp-mute-field input{width:100px}
}

/* ── 사이클 32 Phase 5 — Zigbee 카드 분리 표시 (브릿지 / 제어 장비 응답) ─── */
.hcard-zb-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
}
.hcard-zb-line {
  color: #6b7280;
}
.hcard-zb-line.zb-ok { color: #166534; }
.hcard-zb-line.zb-fail { color: #b91c1c; }
.hcard-zb-line.zb-warn { color: #92400e; }

/* ── M6 연동 토큰 (service-account) 카드 — ADMIN 전용 ────────────── */
/* 발급 1회용 평문 노출 박스: .hp-banner(에러 톤) 위에 중립 강조 톤 오버라이드 */
#sp-sat-reveal{
  background:#fff8e6;color:#7a5d00;border-color:#f0d98a;
  display:block;align-items:initial;
}
.sp-sat-reveal-inner{display:flex;flex-direction:column;gap:8px;width:100%}
.sp-sat-reveal-msg{font-weight:700;font-size:13px}
.sp-sat-reveal-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-sat-token{
  flex:1;min-width:200px;font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:12px;background:#fff;border:1px solid #e3d9a6;border-radius:8px;
  padding:8px 10px;word-break:break-all;color:#3a3000;font-weight:600;
}
/* 발급 폼 input — .hp-actions 내 라벨 입력 */
#sp-sat-label{flex:1;min-width:200px;max-width:360px}
/* 회수됨 상태 행 dim 처리 */
.sp-sat-row-revoked{opacity:.62}
.sp-sat-revoke-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── 구역별 장비 요약(그룹 헤더) — 칩/배지/카운트 한 줄 수직중앙 + 크기 통일 ── */
.hp-zone-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 4px}
.hp-zone-summary-item{display:inline-flex;align-items:center;gap:6px}
.hp-zone-summary-item .page-sub{margin:0;font-size:13px}
/* 그룹 헤더 한정 — 옆 state 배지(11px/2·8px/600)와 크기 맞춰 슬림(전역 공용 zone-chip 은 잠금칩 규격) */
.hp-zone-summary-item .chip.zone-chip{font-size:11px;padding:2px 8px;font-weight:600}
