/* =========================================================
   MATRIX 테마 — 선박관리사이트
   기존 style.css 는 건드리지 않는다. body.theme-matrix 일 때만
   :root 변수를 덮어써서 톤을 바꾸는 방식(=언제든 원복 가능).
   기본값은 기존 디자인이며, 우측 상단 토글로만 전환된다.
   ========================================================= */

body.theme-matrix {
  /* 전체 공통 */
  --bg-main: #000000;
  --bg-sub: #030b05;
  --bg-soft: #04140a;
  --bg-map: #000000;

  --panel-main: #030b05;
  --panel-soft: #04140a;

  --line-main: rgba(0, 255, 65, 0.22);
  --line-soft: rgba(0, 255, 65, 0.14);

  --text-main: #00ff41;
  --text-soft: #17c04a;
  --text-muted: #0f7a34;

  --primary: #0f7a34;
  --primary-hover: #17c04a;
  --secondary: #04140a;
  --secondary-hover: #0a2a14;

  --success: #00ff41;
  --warning: #ffb000;
  --danger: #ff3b30;
  --info: #17c04a;

  /* INDEX 좌측 입력화면 */
  --idx-sidebar-bg: #000000;
  --idx-sidebar-border: rgba(0, 255, 65, 0.22);
  --idx-page-title: #00ff41;
  --idx-page-text: #17c04a;
  --idx-page-text-soft: #0f7a34;

  --idx-card-bg: #030b05;
  --idx-card-border: rgba(0, 255, 65, 0.22);
  --idx-card-title: #00ff41;
  --idx-card-radius: 0px;

  --idx-accordion-bg: #030b05;
  --idx-accordion-border: rgba(0, 255, 65, 0.22);
  --idx-accordion-header-bg: #04140a;
  --idx-accordion-header-text: #00ff41;
  --idx-accordion-header-icon: #17c04a;
  --idx-accordion-content-bg: #030b05;

  --idx-label-text: #0f7a34;
  --idx-input-bg: #000000;
  --idx-input-border: rgba(0, 255, 65, 0.22);
  --idx-input-text: #00ff41;
  --idx-input-placeholder: #0a4d22;
  --idx-input-focus-border: #00ff41;
  --idx-input-focus-shadow: rgba(0, 255, 65, 0.18);
  --idx-input-radius: 0px;

  --idx-btn-primary-bg: #0a2a14;
  --idx-btn-primary-hover: #0f7a34;
  --idx-btn-primary-text: #00ff41;
  --idx-btn-secondary-bg: #04140a;
  --idx-btn-secondary-hover: #0a2a14;
  --idx-btn-secondary-text: #17c04a;

  --idx-filter-wrap-border: rgba(0, 255, 65, 0.22);
  --idx-filter-btn-bg: #030b05;
  --idx-filter-btn-text: #17c04a;
  --idx-filter-divider: rgba(0, 255, 65, 0.14);
  --idx-filter-active-progress-bg: #0f7a34;
  --idx-filter-active-progress-text: #000000;
  --idx-filter-active-done-bg: #00ff41;
  --idx-filter-active-done-text: #000000;

  --idx-dynamic-card-bg: #030b05;
  --idx-dynamic-card-border: rgba(0, 255, 65, 0.22);
  --idx-dynamic-card-title-text: #00ff41;
  --idx-dynamic-card-divider: rgba(0, 255, 65, 0.14);
  --idx-dynamic-card-meta-bg: #04140a;
  --idx-dynamic-card-meta-text: #17c04a;
  --idx-dynamic-input-bg: #000000;
  --idx-dynamic-input-border: rgba(0, 255, 65, 0.22);
  --idx-dynamic-input-text: #00ff41;
  --idx-dynamic-input-placeholder: #0a4d22;

  --idx-status-btn-bg: #030b05;
  --idx-status-btn-text: #17c04a;
  --idx-status-btn-divider: rgba(0, 255, 65, 0.14);
  --idx-status-active-progress-bg: #0f7a34;
  --idx-status-active-progress-text: #000000;
  --idx-status-active-done-bg: #00ff41;
  --idx-status-active-done-text: #000000;

  --idx-add-btn-bg: #0a2a14;
  --idx-add-btn-hover: #0f7a34;
  --idx-add-btn-text: #00ff41;

  --idx-critical-text: #ff3b30;
  --idx-critical-accent: #ff3b30;

  --idx-cost-card-bg: #030b05;
  --idx-cost-card-border: rgba(0, 255, 65, 0.22);
  --idx-cost-group-title: #00ff41;
  --idx-cost-subtitle: #17c04a;
  --idx-cost-divider: rgba(0, 255, 65, 0.14);
  --idx-cost-label: #0f7a34;
  --idx-cost-input-bg: #000000;
  --idx-cost-input-border: rgba(0, 255, 65, 0.22);
  --idx-cost-input-text: #00ff41;

  --idx-report-btn-bg: #0a2a14;
  --idx-report-btn-hover: #0f7a34;
  --idx-report-btn-text: #00ff41;
  --idx-external-link-bg: #04140a;
  --idx-external-link-hover: #0a2a14;
  --idx-external-link-text: #17c04a;

  --idx-vessel-item-bg: #030b05;
  --idx-vessel-item-border: rgba(0, 255, 65, 0.22);
  --idx-vessel-item-title: #00ff41;
  --idx-vessel-item-text: #17c04a;
  --idx-vessel-item-soft: #0f7a34;

  --idx-footer-text: #0f7a34;
  --idx-footer-border: rgba(0, 255, 65, 0.22);

  background: #000;
  color: #17c04a;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .03em;
}

/* 모노스페이스는 화면 전체에 적용하되, 지도 라벨은 제외 */
body.theme-matrix :not(.leaflet-container):not(.leaflet-container *) {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* 각진 테두리 — 매트릭스 톤의 핵심 */
body.theme-matrix .card,
body.theme-matrix .panel,
body.theme-matrix button,
body.theme-matrix input,
body.theme-matrix select,
body.theme-matrix textarea,
body.theme-matrix .btn { border-radius: 0 !important; }

/* 흰 배경으로 하드코딩된 패널들(변수 미사용분) 보정 */
body.theme-matrix .position-table-panel,
body.theme-matrix .leaflet-popup-content-wrapper,
body.theme-matrix .leaflet-popup-tip {
  background: #030b05 !important;
  color: #00ff41 !important;
  border: 1px solid rgba(0, 255, 65, .35) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 14px rgba(0, 255, 65, .12) !important;
}

/* 지도: 위성 래스터 타일을 어두운 인광 녹색으로.
   밝기를 충분히 낮춰야 육지가 네온 덩어리로 번지지 않는다. */
body.theme-matrix .leaflet-tile-pane {
  filter: grayscale(1) brightness(.24) contrast(1.2) sepia(1) hue-rotate(66deg) saturate(5);
}
body.theme-matrix .leaflet-container { background: #000; }
/* 선박 마커·라벨은 원색 유지 — 상태 색(적/황/녹)이 정보이므로 덮지 않는다 */
body.theme-matrix .leaflet-marker-pane,
body.theme-matrix .leaflet-tooltip-pane { filter: none; }
body.theme-matrix .leaflet-tooltip {
  background: rgba(0, 0, 0, .72) !important;
  border: 1px solid rgba(0, 255, 65, .3) !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
}
body.theme-matrix .leaflet-control-attribution {
  background: rgba(0, 0, 0, .65) !important;
  color: #0f7a34 !important;
}
body.theme-matrix .leaflet-control-attribution a { color: #17c04a !important; }

/* 스크롤바 */
body.theme-matrix ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-matrix ::-webkit-scrollbar-thumb { background: #0a4d22; border-radius: 0; }
body.theme-matrix ::-webkit-scrollbar-track { background: #000; }

/* ── 테마 토글 버튼 (우측) ───────────────────────────── */
#theme-switch {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow: -2px 0 10px rgba(0, 0, 0, .35);
}
#theme-switch button, #theme-switch a {
  width: 34px;
  padding: 12px 0;
  border: 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  letter-spacing: .18em;
  background: #1f2937;
  color: #d1d5db;
  border-radius: 0;
  transition: background .15s, color .15s;
}
#theme-switch a { text-decoration: none; text-align: center; display: block; }
#theme-switch button:hover, #theme-switch a:hover { background: #374151; color: #fff; }
#theme-switch button.on, #theme-switch a.on { background: #2563eb; color: #fff; }
body.theme-matrix #theme-switch button, #theme-switch a { background: #030b05; color: #0f7a34; border: 1px solid rgba(0,255,65,.22); }
body.theme-matrix #theme-switch button:hover { color: #00ff41; }
body.theme-matrix #theme-switch button.on { background: rgba(0,255,65,.14); color: #00ff41; border-color: rgba(0,255,65,.55); }


/* ── 변수를 쓰지 않고 색이 하드코딩된 UI 보정 ───────────── */
/* 상단 선박수 칩 */
body.theme-matrix .map-toolbar { background: transparent; }
body.theme-matrix .toolbar-chip-btn {
  background: rgba(3, 11, 5, .92) !important;
  border: 1px solid rgba(0, 255, 65, .22) !important;
  color: #17c04a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.theme-matrix .toolbar-chip-btn:hover { border-color: rgba(0, 255, 65, .5) !important; color: #00ff41 !important; }
body.theme-matrix .toolbar-chip-btn.active {
  background: rgba(0, 255, 65, .12) !important;
  border-color: rgba(0, 255, 65, .6) !important;
  color: #00ff41 !important;
}
body.theme-matrix .toolbar-chip-label { color: #0f7a34 !important; }
body.theme-matrix .toolbar-chip-value { color: #00ff41 !important; }

/* 선박 검색창 */
body.theme-matrix .map-toolbar input,
body.theme-matrix input[type="search"] {
  background: rgba(3, 11, 5, .92) !important;
  border: 1px solid rgba(0, 255, 65, .22) !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
}

/* 사이드바 토글 · AI 분석 FAB */
body.theme-matrix .sidebar-toggle-btn,
body.theme-matrix .aia-fab {
  background: #030b05 !important;
  border: 1px solid rgba(0, 255, 65, .3) !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 12px rgba(0, 255, 65, .12) !important;
}

/* Leaflet 기본 컨트롤(줌·레이어·그리기 도구) */
body.theme-matrix .leaflet-bar a,
body.theme-matrix .leaflet-control-layers,
body.theme-matrix .leaflet-touch .leaflet-bar a {
  background: #030b05 !important;
  color: #00ff41 !important;
  border-color: rgba(0, 255, 65, .22) !important;
  border-radius: 0 !important;
}
body.theme-matrix .leaflet-bar a:hover { background: #0a2a14 !important; }
body.theme-matrix .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(90deg) brightness(1.1); }

/* 좌·우 아이콘 툴바(leaflet-bar 안의 커스텀 버튼) */
body.theme-matrix .leaflet-bar button,
body.theme-matrix .measure-control button {
  background: #030b05 !important;
  color: #00ff41 !important;
  border: 1px solid rgba(0, 255, 65, .22) !important;
  border-radius: 0 !important;
}
body.theme-matrix .leaflet-bar button:hover,
body.theme-matrix .measure-control button:hover {
  background: #0a2a14 !important;
  border-color: rgba(0, 255, 65, .5) !important;
}
/* 버튼 안의 컬러 아이콘(이모지·PNG)은 톤만 맞추고 형태는 유지 */
body.theme-matrix .leaflet-bar button img,
body.theme-matrix .measure-control button img { filter: brightness(.9) saturate(.6); }