/*
 * 대시보드 페이지(ui/pages/dashboard.py) 전용 CSS
 *
 * 서버 프로세스 생애주기 동안 딱 한 번만 <link rel="stylesheet"> 태그로 주입된다
 * (dashboard.py의 _ensure_dashboard_css() 참고) - 예전엔 render_content() 호출마다
 * ui.add_css()/ui.add_head_html()로 반복 주입했는데, NiceGUI의 이 함수들은 호출
 * 시점에 그 클라이언트의 소켓이 이미 연결돼 있었는지에 따라 "최초 HTML 응답에
 * 포함" 경로와 "연결된 클라이언트에 JS로 즉시 실행" 경로 중 하나를 타는 구조라
 * (nicegui/functions/style.py, html.py 소스 확인), 렌더링 타이밍에 따라 간헐적으로
 * 한쪽 경로가 씹히는 문제가 실측으로 반복 확인됐다(그리드 행 클릭 시 파란 테두리
 * 강조 표시, 결합모드 열 숨김이 둘 다 이 문제로 간헐적으로 사라졌었다). 외부 CSS
 * 파일 + 최초 1회 주입으로 이 타이밍 의존성 자체를 없앤다.
 */

/* ── 실시간 그리드(.realtime-grid) ───────────────────────────────────────── */

.realtime-grid table {
    table-layout: auto !important;
    width: 100% !important;
}
/* 그리드 행 클릭으로 지도에 포커스한 장비 강조 표시 - 상태 색상(row_color)은
   그대로 배경으로 깔리고, 이 테두리/그림자가 그 위에 덧씌워져서 선택 여부를
   구분한다 */
.realtime-grid tr.grid-row-focused td {
    box-shadow: inset 0 0 0 2px #2563eb;
}
.realtime-grid tbody tr {
    cursor: pointer;
}
.realtime-grid tbody tr:hover td {
    background-color: rgba(37, 99, 235, 0.06);
}
.realtime-grid th {
    border: 1px solid #e0e0e0 !important;
    text-align: center !important;
    padding: 4px 2px !important;
    background-color: #fafafa;
    font-size: 11px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.2 !important;
}
.realtime-grid td {
    border: 1px solid #e0e0e0 !important;
    text-align: center !important;
    padding: 6px 4px !important;
    white-space: nowrap !important;
}
.realtime-grid td:nth-child(1) {
    min-width: 133px;
    width: 133px;
    max-width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.realtime-grid td:nth-child(2) {
    min-width: 140px;
    width: 140px;
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.realtime-grid td:nth-child(3) { min-width: 55px; width: 55px; }
.realtime-grid td:nth-child(4) { min-width: 55px; width: 55px; }
.realtime-grid td:nth-child(5) { min-width: 55px; width: 55px; }
.realtime-grid td:nth-child(6) { min-width: 50px; width: 50px; }
.realtime-grid td:nth-child(7) { min-width: 50px; width: 50px; }
.realtime-grid td:nth-child(8) { min-width: 108px; width: 108px; }
.realtime-grid td:nth-child(9) { min-width: 50px; width: 50px; }
.realtime-grid td:nth-child(10) { min-width: 50px; width: 50px; }
.realtime-grid td:nth-child(11) { min-width: 50px; width: 50px; }
.realtime-grid td:nth-child(12) { min-width: 55px; width: 55px; }
/* nth-child(13)~(20) 너비는 관리자/비관리자 분기로 나뉘어 있었지만 실제 값은
   어느 쪽이든 전부 min-width/width: 36px로 동일하다(라벨 주석만 다름) - 그래서
   분기 자체가 불필요해 하나로 합쳤다. 결합모드 열 숨김도 관리자 열 번호(13~20,
   더 넓은 쪽)를 그대로 쓰면 비관리자 구조(13~17)도 포함하고, 존재하지 않는
   nth-child는 그냥 매치가 안 될 뿐이라 안전하다. */
.realtime-grid td:nth-child(13) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(14) { min-width: 55px; width: 55px; }
.realtime-grid td:nth-child(15) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(16) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(17) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(18) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(19) { min-width: 36px; width: 36px; }
.realtime-grid td:nth-child(20) { min-width: 36px; width: 36px; }
.dashboard-combined-mode .realtime-grid td:nth-child(13),
.dashboard-combined-mode .realtime-grid td:nth-child(14),
.dashboard-combined-mode .realtime-grid td:nth-child(15),
.dashboard-combined-mode .realtime-grid td:nth-child(16),
.dashboard-combined-mode .realtime-grid td:nth-child(17),
.dashboard-combined-mode .realtime-grid td:nth-child(18),
.dashboard-combined-mode .realtime-grid td:nth-child(19),
.dashboard-combined-mode .realtime-grid td:nth-child(20) {
    display: none !important;
}
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(1) th:nth-child(5),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(1) th:nth-child(6),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(1) th:nth-child(7),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(1) th:nth-child(8) {
    display: none !important;
}
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(11),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(12),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(13),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(14),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(15),
.dashboard-combined-mode .realtime-grid thead tr:nth-of-type(2) th:nth-child(16) {
    display: none !important;
}

/* ── 상단 뷰 토글 버튼(map/grid/combined) ────────────────────────────────── */

.seg-toggle { display: inline-flex; background: #d0d5dd; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-toggle .q-btn { border-radius: 8px !important; text-transform: none !important; font-weight: 600; letter-spacing: 0; transition: all 0.25s ease; font-size: 0.9rem !important; padding: 4px 14px !important; min-height: 34px !important; }
.seg-toggle .seg-active { background: #ffffff !important; color: #1a1a1a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.08); }
.seg-toggle .seg-active .q-btn__content, .seg-toggle .seg-active .q-btn__content .q-icon, .seg-toggle .seg-active .q-btn__content span { color: #1a1a1a !important; }
.seg-toggle .seg-inactive { background: transparent !important; color: #5a5a5a !important; box-shadow: none; }
.seg-toggle .seg-inactive:hover { color: #333333 !important; background: rgba(255,255,255,0.35) !important; }

/* ── 뷰 전환(map/grid/combined) 레이아웃 (!important로 NiceGUI 스타일 오버라이드) ── */

.dashboard-view-hidden { display: none !important; }
.dashboard-sidebar-hidden { display: none !important; }
/* 지도+그리드 결합 모드: 지도/그리드 컨테이너가 원래 서로 겹치는
   absolute 위치 지정이라(둘 다 top:0/left:0/w-full/h-full), 결합
   모드에서는 이를 풀고 가로로 나란히 배치한다. 두 컨테이너 모두
   dashboard-view-hidden이 없어야(즉 둘 다 보여야) 이 레이아웃이
   의미가 있다 - switch_view()가 결합 모드일 때 그렇게 처리한다. */
.dashboard-content-area.dashboard-combined-mode {
    display: flex !important;
    flex-direction: row !important;
}
.dashboard-content-area.dashboard-combined-mode .dashboard-map-container,
.dashboard-content-area.dashboard-combined-mode .dashboard-grid-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: 100% !important;
}
/* 그리드를 왼쪽, 지도를 오른쪽에 - DOM 순서(지도가 먼저)는 그대로 두고
   flex order만 바꿔서 시각적으로 재배치한다. 화면 비율(퍼센트)로 두되,
   그리드에서 지도중심/포집/추세/복합악취설정 열을 결합모드 전용으로
   숨겨(위 realtime-grid CSS 참고) 필요한 최소 폭을 관리자 기준
   약 770px까지 줄였기 때문에, 1440px 이상 데스크탑에서는 지도를 30%까지
   늘려도 그리드 가로 스크롤 없이 여유가 있다 */
.dashboard-content-area.dashboard-combined-mode .dashboard-grid-container {
    width: 70% !important;
    flex: 1 1 70%;
    min-width: 0;
    order: 1;
}
.dashboard-content-area.dashboard-combined-mode .dashboard-map-container {
    width: 30% !important;
    flex: 1 1 30%;
    order: 2;
    border-left: 1px solid #e0e0e0;
    /* 카카오 확대·축소 컨트롤이 좌측 경계에 바싹 붙어 보이는 문제를
       #map 컨테이너에 padding-left를 줘서 고치려 했으나(§git blame),
       이러면 #map의 실제 렌더 박스가 카카오 SDK가 초기화/relayout()
       시점에 인식하는 경계와 어긋나서(패딩만큼 안쪽으로 밀림) 줌
       컨트롤/지도타입 컨트롤 위치, 그리고 anchor<->화면좌표 변환에
       의존하는 연결선/마커클릭 동기화까지 전부 틀어지는 훨씬 심각한
       회귀가 실측으로 확인됐다. 사소한 여백 문제보다 핵심 기능이
       우선이라 되돌린다 - 지도 컨테이너는 카카오가 100% 그대로
       소유해야 한다(패딩/마진 없이).
    */
}