/* ═══════════════════════════════════════════════════════════════
   IoT 모니터링 — 디자인 토큰 + Tabler 커스텀 레이어
   규칙: 색은 아래 토큰 또는 Tabler 변수(--tblr-*)만 쓴다.
   컴포넌트에 새 hex 값을 직접 쓰지 않는다. 상세 규칙: web/DESIGN.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* light-dark()의 라이트 기준. 다크는 아래 [data-bs-theme="dark"]가 dark로 덮는다.
     (Tabler도 다크에 color-scheme:dark를 주지만, 우리 :root가 나중에 로드돼 이기므로 직접 명시한다) */
  color-scheme: light;

  /* 브랜드 — 라이트/다크 값이 다르면 light-dark(라이트, 다크) 한 줄로 쌍을 이룬다.
     다크 값을 따로 덮어쓰지 않는다 (한 곳만 고치면 되게) */
  --iot-brand: light-dark(#1a3a5c, #1f2021);      /* 상단 바 전용 — 다크에선 무채색 */
  --iot-nav-accent: light-dark(#1a3a5c, #7ea6d8); /* 활성 탭 — 다크에선 네이비가 안 보여 밝힘 */
  --iot-identity: #2f7d4f;     /* 아바타 초록 — 사용자 아이덴티티 전용 */

  /* 카테고리 색 — gicon 원형 아이콘 전용 팔레트 (여기 외 용도 금지) */
  --iot-cat-purple: #7c5cd6;
  --iot-cat-green:  #4c9a52;
  --iot-cat-blue:   #3f8cd8;
  --iot-cat-pink:   #d86ba2;
  --iot-cat-orange: #e0913f;
  --iot-cat-teal:   #38a3a5;
  --iot-cat-red:    #d65c5c;
  --iot-cat-indigo: #5c7cd6;
  --iot-cat-gray:   #6b7280;

  /* 형태 — 바깥 모서리 lg, 그룹 안쪽 모서리 sm, 버튼 pill 3단계만 사용 */
  --iot-radius-lg: 16px;
  --iot-radius-sm: 6px;
  --iot-radius-pill: 999px;

  /* 필터 행(구글형 검색·칩) 전용 색 — 검색 채움 배경, 필터 적용 칩의 파란 톤.
     포커스 그림자는 색이 아니라 light-dark()를 못 쓰므로 라이트 값만 여기 두고
     다크 블록에서 링 형태로 덮는다 */
  --iot-field-bg: light-dark(#f1f3f4, #2a2b2c);
  --iot-chip-active-bg: light-dark(#e8f0fe, rgba(116, 169, 226, 0.16));
  --iot-chip-active-fg: light-dark(#174ea6, #a8c7ec);
  --iot-search-focus-shadow: 0 1px 6px rgba(32, 33, 36, 0.22);

  /* 표면·텍스트 — Tabler 변수에 위임해 다크모드 자동 대응 */
  --iot-surface: var(--tblr-bg-surface);
  --iot-surface-hover: var(--tblr-bg-surface-tertiary);
  --iot-border: var(--tblr-border-color-translucent);
  --iot-text-secondary: var(--tblr-secondary);

  /* Noto Sans KR 셀프호스팅(static/fonts/noto-sans-kr) — 상용서버에서도 동일 렌더 */
  --tblr-font-sans-serif: "Noto Sans KR Variable", "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
  color-scheme: dark; /* light-dark()가 다크 값을 고르는 기준 */

  /* 다크에서 대비를 맞춘 색 — 여기서 한 번만 정의하고 아래 규칙들이 참조한다.
     Tabler의 -rgb 짝(rgba 합성용)은 hex에서 계산할 수 없어 손으로 맞춰야 한다 */
  --iot-dark-blue: #74a9e2;        /* 링크·파랑 배지·외곽선 버튼 글자 */
  --iot-dark-blue-hover: #93bdeb;
  --iot-dark-blue-border: #4d7db3;
  --iot-dark-red: #e88a8a;
  --iot-dark-muted: #a8b3c2;

  /* 검색 포커스: 다크에선 그림자가 안 보여 파란 링으로 대체 */
  --iot-search-focus-shadow: 0 0 0 1px var(--iot-dark-blue-border);

  /* 무채색 톤 (구글 다크 참고): 검정 배경 / 회색 표면 / 흰 텍스트.
     하이라이트(파랑)·아이콘·배지 색은 그대로 둔다 */
  --tblr-body-bg: #131314;
  --tblr-bg-surface: #1e1f20;           /* 카드·리스트 표면 */
  --tblr-bg-surface-secondary: #131314; /* body 배경 */
  --tblr-bg-surface-tertiary: #2a2b2c;  /* hover */
  --tblr-border-color: #3c4043;
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.08);
  --tblr-body-color: #e8eaed;
  --tblr-body-color-rgb: 232, 234, 237;

  /* 가시성 교정: Tabler 다크 기본 보조색·링크색이 WCAG AA(4.5:1) 미달이라 밝힘 */
  --tblr-secondary: #9aa0a6;
  --tblr-secondary-rgb: 154, 160, 166;
  --tblr-secondary-color: rgba(154, 160, 166, 0.85);
  --tblr-link-color: var(--iot-dark-blue);
  --tblr-link-color-rgb: 116, 169, 226;
  --tblr-link-hover-color: var(--iot-dark-blue-hover);
  --tblr-link-hover-color-rgb: 147, 189, 235;
}

/* 다크모드 배지: -lt 글자색이 라이트용 본색 그대로 와서 어두움 (red 3.15:1 등) */
[data-bs-theme="dark"] .bg-red-lt       { color: var(--iot-dark-red) !important; }
[data-bs-theme="dark"] .bg-blue-lt      { color: var(--iot-dark-blue) !important; }
[data-bs-theme="dark"] .bg-secondary-lt { color: var(--iot-dark-muted) !important; }

/* 다크모드 외곽선 버튼: 본색 파랑(3.14:1)이 어두워 글자·테두리만 밝힘 (hover 채움색은 유지) */
[data-bs-theme="dark"] .btn-outline-primary {
  --tblr-btn-color: var(--iot-dark-blue);
  --tblr-btn-border-color: var(--iot-dark-blue-border);
}

/* ── 레이아웃 골격 ─────────────────────────────────── */
body { background: var(--tblr-bg-surface-secondary); }

/* 컨테이너 좌우 여백: Tabler 기본(8px)이 좁아 데스크톱 24px, 모바일 16px */
.container-xl { --tblr-gutter-x: 3rem; }
@media (max-width: 576px) {
  .container-xl { --tblr-gutter-x: 2rem; }
}

.page-title { font-size: 1.375rem; font-weight: 500; }

/* 제목 위 여백: Tabler 기본(page-body 24px + page-header 24px = 48px)이 과해서 축소 */
.page-body { margin-top: 1rem; }
.page-wrapper .page-header { margin-top: 0; }

/* 설정형 페이지의 좁은 본문 폭 (구글 계정 스타일) */
.page-narrow { max-width: 560px; margin-inline: auto; }

/* Tabler .page-header 기본값(column + justify-center)이 flex-row로 쓸 때
   가로 중앙 정렬로 새어나오므로 초기화 */
.page-header.flex-row { justify-content: flex-start; }

/* 2뎁스 페이지 뒤로가기 화살표 — 페이지 제목 왼쪽, 원형 hover */
.iot-back {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; flex: none;
}
.iot-back:hover { background: var(--iot-surface-hover); color: inherit; }
.iot-back svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 읽기 전용 필드 표식 — datagrid 라벨 옆 자물쇠 (출처는 title 툴팁) */
.iot-lock {
  width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px;
  stroke: var(--iot-text-secondary); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 편집 모달 — 바깥 radius 3단계 규칙(16px)에 맞춘다 */
.modal-content { border-radius: var(--iot-radius-lg); }

/* ── 상단 브랜드 바 + 보조 내비 ────────────────────── */
.iot-navbar {
  background: var(--iot-brand);
  min-height: 0;
}
.iot-navbar-user { color: rgba(255, 255, 255, 0.78); }
.iot-subnav {
  min-height: 0;
  background: var(--iot-surface);
  border-bottom: 1px solid var(--iot-border);
}
/* 탭이 헤더 높이를 꽉 채우게 — 활성 밑줄이 하단 경계선에 밀착 */
.iot-subnav,
.iot-subnav .container-xl,
.iot-subnav .navbar-nav { align-items: stretch; }
.iot-subnav .nav-item { display: flex; }
/* 선택자를 .navbar-nav까지 명시해야 Tabler(.navbar .navbar-nav .nav-link)를 이김 */
.iot-subnav .navbar-nav .nav-link {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  color: var(--iot-text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 0; /* Tabler 기본 4px가 활성 밑줄 양끝을 휘게 만듦 */
}
.iot-subnav .nav-link.active {
  color: var(--iot-nav-accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--iot-nav-accent);
}
.iot-subnav .nav-link:hover { color: var(--iot-nav-accent); }

/* ── 버튼: 구글식 알약 형태 + 넉넉한 좌우 패딩 ─────── */
.btn {
  --tblr-btn-border-radius: var(--iot-radius-pill);
  --tblr-btn-padding-x: 1.25rem;
}
.btn-sm {
  --tblr-btn-border-radius: var(--iot-radius-pill);
  --tblr-btn-padding-x: 0.875rem;
  --tblr-btn-padding-y: 0.25rem;
}

/* ── 셀렉트: 알약형 ─────────────────────────────────── */
.form-select {
  border-radius: var(--iot-radius-pill);
  padding-left: 1rem;
}

/* 커스텀 셀렉트(.iot-select, _macros.html month_select) —
   메뉴가 버튼 바로 아래에 뜨고 글씨 크기·서체가 페이지와 동일하게 유지된다 */
.iot-select .dropdown-toggle {
  border: 1px solid var(--tblr-border-color);
  background: var(--iot-surface);
}
.iot-select .dropdown-menu {
  border-radius: var(--iot-radius-sm);
  border-color: var(--iot-border);
  font-size: 0.875rem;
  min-width: 100%;
}
.iot-select .dropdown-item { padding: 0.5rem 1rem; }

/* ── 필터 행: 구글형 채움 검색 + 칩 셀렉트 (DESIGN.md '필터 행') ──
   행은 좌우를 꽉 채우지 않는다 — 검색은 200~300px 가변, 칩은 내용 맞춤 폭.
   칩은 .iot-select 위에 얹는 변형이고, 필터가 적용되면 컨테이너에 .active가 붙어
   파란 톤 채움 + '지역: 김포' 라벨이 된다 (라벨·상태는 화면 JS의 syncChip이 관리) */
.iot-filter-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--iot-border);
}
.iot-search { position: relative; flex: 0 1 300px; min-width: 200px; }
.iot-search > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  stroke: var(--iot-text-secondary); fill: none;
  stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.iot-search input {
  width: 100%; height: 38px;
  border: none; border-radius: var(--iot-radius-pill);
  background: var(--iot-field-bg); color: inherit;
  padding: 0 16px 0 42px; font-size: 0.875rem; font-family: inherit;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.iot-search input::placeholder { color: var(--iot-text-secondary); }
.iot-search input:focus {
  outline: none;
  background: var(--iot-surface);
  box-shadow: var(--iot-search-focus-shadow);
}
.iot-chip .dropdown-toggle {
  height: 34px; padding: 0 12px 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 400;
  background: transparent;
}
.iot-chip .dropdown-toggle::after { margin-left: 0; } /* 라벨-화살표 간격은 gap이 담당 */
.iot-chip .dropdown-toggle:hover { background: var(--iot-surface-hover); }
.iot-chip.active .dropdown-toggle {
  background: var(--iot-chip-active-bg);
  border-color: transparent;
  color: var(--iot-chip-active-fg);
  font-weight: 500;
}
.iot-chip .dropdown-menu { max-height: 320px; overflow-y: auto; }
@media (max-width: 576px) {
  .iot-search { flex-basis: 100%; } /* 모바일: 검색만 한 줄 전체, 칩은 다음 줄에 나란히 */
}

/* ── 카드 (구글 계정 스타일) ───────────────────────── */
.card {
  border: none;
  border-radius: var(--iot-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card .card-header { border-bottom-color: var(--iot-border); }
.card .card-footer { border-top-color: var(--iot-border); }

/* 의견 등 여러 줄 텍스트 박스 */
.opinion-box {
  white-space: pre-line;
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--iot-radius-sm);
  padding: 12px 14px;
}

/* ── 카드 제목 좌측 원형 아이콘 ────────────────────── */
.gicon {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  background: var(--iot-cat-gray);
}
.gicon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-title { display: flex; align-items: center; gap: 10px; }

/* 아이콘 카테고리 색 — _macros.html 의 icon() 이름과 1:1 */
.gicon-calendar { background: var(--iot-cat-purple); }
.gicon-building { background: var(--iot-cat-green); }
.gicon-clock    { background: var(--iot-cat-blue); }
.gicon-send     { background: var(--iot-cat-pink); }
.gicon-mail     { background: var(--iot-cat-orange); }
.gicon-file     { background: var(--iot-cat-teal); }
.gicon-person   { background: var(--iot-cat-red); }
.gicon-edit     { background: var(--iot-cat-indigo); }
.gicon-logout   { background: var(--iot-cat-gray); }
.gicon-moon     { background: var(--iot-cat-indigo); }

/* ── 그룹 리스트: 항목 사이 좁은 간격, 안쪽 sm / 바깥 lg 모서리 ── */
.ggroup { display: flex; flex-direction: column; gap: 3px; }
.gitem {
  background: var(--iot-surface); display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--iot-radius-sm); color: inherit; text-decoration: none;
  border: none; width: 100%; text-align: left; font: inherit;
}
.ggroup > .gitem:first-child { border-radius: var(--iot-radius-lg) var(--iot-radius-lg) var(--iot-radius-sm) var(--iot-radius-sm); }
.ggroup > .gitem:last-child { border-radius: var(--iot-radius-sm) var(--iot-radius-sm) var(--iot-radius-lg) var(--iot-radius-lg); }
.ggroup > .gitem:only-child { border-radius: var(--iot-radius-lg); }
button.gitem { cursor: pointer; }
a.gitem:hover, button.gitem:hover { background: var(--iot-surface-hover); }
a.gitem:focus-visible, button.gitem:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: -2px;
}
.gitem .gitem-label { font-size: 13px; color: var(--iot-text-secondary); }
.gitem .gitem-value { font-weight: 500; }

/* ── 프로필 아바타 ─────────────────────────────────── */
.avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--iot-identity); color: #fff; font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.35);
}
.avatar-btn:hover { color: #fff; filter: brightness(1.1); }
.avatar-big {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--iot-identity); color: #fff; font-weight: 700; font-size: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 표 ────────────────────────────────────────────── */
/* 행 상하 간격: 모든 표·모든 화면 동일 — Tabler 기본 0.75rem의 1.2배.
   좌우는 Tabler 기본 0.75rem 그대로 — table-sm(좌우 0.25rem)은 쓰지 않는다 */
.table > :not(caption) > * > * {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* 유연 열(폭 미지정 주 텍스트 열)의 td에 사용 — 남는 폭만 차지하고 넘치는 글자는 말줄임.
   나머지 열은 전부 w-1(내용 맞춤) 또는 w-25(보조 유연 열)로 폭을 지정한다 (DESIGN.md 표 규칙) */
.table .cell-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 목록 표의 보조 열 폭 — 폭 미지정 주 열(사업장명)이 남는 폭을 독식하지 않게
   보조 열에 고정 폭을 줘 여백을 나눈다. w-1(내용 맞춤) 대신 쓰고,
   '유연 열 1개 원칙'은 그대로다 (주 열만 폭 미지정, td 에 cell-truncate) */
.table th.col-w-sm { width: 92px; }   /* 지역·담당·상태·배출구 */
.table th.col-w-md { width: 112px; }  /* 코드 */
.table th.col-w-lg { width: 158px; }  /* 날짜 + 배지 */

/* ── 행 전체 클릭(.row-link) ────────────────────────
   목록 표는 행 어디를 눌러도 그 줄의 주 링크(.row-link-main)로 이동한다.
   이동은 base.html 의 위임 핸들러가 맡고, 행 안의 링크·버튼은 자기 동작이 우선한다.
   주 링크에 링크색을 쓰지 않는 이유: 행 전체가 링크이므로 한 칸만 파랄 이유가 없다.
   hover 채움은 Tabler .table-hover 와 같은 방식(--tblr-table-bg-state)으로 넣는다 */
.table tbody tr.row-link { cursor: pointer; }
.table tbody tr.row-link > * { transition: box-shadow 0.12s ease; }
.table tbody tr.row-link:hover > *,
.table tbody tr.row-link:focus-within > * {
  --tblr-table-bg-state: var(--iot-surface-hover);
}
.row-link-main {
  color: inherit;
  text-decoration: none;
  font-weight: 500; /* 링크색을 뺀 자리를 굵기로 대신한다 — gitem-value 와 같은 단계 */
}
.row-link-main:hover { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .table tbody tr.row-link > * { transition: none; }
}

/* ── 진행 단계 표시 (사업장 상세 '월별 보고서 이력') ──
   점+라벨 파이프라인. 배지 색 의미와 동일: 초록=완료 / 노랑=다음 대기 / 회색=미도달 */
.iot-steps { display: inline-flex; align-items: center; }
.iot-step { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.iot-step::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.iot-step.done { color: var(--tblr-green); }
.iot-step.done::before { background: var(--tblr-green); }
.iot-step.wait { color: var(--tblr-yellow); }
.iot-step.wait::before { background: var(--tblr-yellow); }
.iot-step.off { color: var(--iot-text-secondary); }
.iot-step.off::before { box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.55; }
.iot-step-bar { width: 16px; height: 2px; margin: 0 6px; border-radius: 1px; background: var(--iot-border); flex: none; }
.iot-step-bar.done { background: var(--tblr-green); opacity: 0.45; }

/* ── 정렬 헤더 (대시보드·사업장 목록 공용) ─────────── */
.biz-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.biz-sort:hover { color: var(--tblr-body-color); }
.biz-sort::after { content: "↕"; margin-left: 4px; font-size: 0.8em; opacity: 0.3; }
.biz-sort.sort-asc::after { content: "↑"; opacity: 1; }
.biz-sort.sort-desc::after { content: "↓"; opacity: 1; }

/* ── 모바일: 터치 타깃 확보 ────────────────────────── */
@media (max-width: 576px) {
  .btn { min-height: 38px; }
  .page-body { margin-top: 0.75rem; }
}