/* =========================================================
   ナイトモード（星景撮影の現場用・暗順応の保護）
   <html data-theme="night"> のときだけ有効。
   1) UI の色をすべて暗い赤系に置き換える
   2) 地図はグレースケール化してから減光する
   3) 最後に画面全体へ赤の乗算を重ね、緑・青の光を一切出さない
   ========================================================= */

html[data-theme="night"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0b0000;
  --surface-2: #140101;
  --surface-3: #220303;
  --border: #3a0707;
  --text: #ff4a3d;
  --text-dim: #b8302a;
  --text-faint: #7d1f1b;
  --accent: #e0362c;
  --accent-strong: #8f1b14;

  /* 判定色は明るさの差で区別する（色相はすべて赤） */
  --safe: #6e1410;
  --warn: #b8261d;
  --danger: #ff4a3d;
  --day-shade: rgba(255, 60, 40, 0.05);

  --c-cloud-total: #ff5a4d;
  --c-cloud-low: #a3211a;
  --c-cloud-mid: #d23a30;
  --c-cloud-high: #ff8a7a;
  --c-wind-10: #ff4a3d;
  --c-wind-80: #c8322a;
  --c-wind-120: #8f1b14;
  --c-gust: #ff7a6b;
  --c-grid: rgba(255, 60, 40, 0.12);
  --c-cursor: rgba(255, 74, 61, 0.8);

  --shadow: none;
}

html[data-theme="night"] body {
  background: var(--bg);
}

/* 状態バッジは塗りでなく文字の明るさ＋枠の太さで区別 */
html[data-theme="night"] .status-badge[data-status="SAFE"] {
  color: #9c1d16;
  border-style: dashed;
}

html[data-theme="night"] .status-badge[data-status="WARN"] {
  color: #d8352b;
}

html[data-theme="night"] .status-badge[data-status="DANGER"] {
  color: #ff5a4d;
  border-width: 3px;
}

html[data-theme="night"] .btn-night {
  border-color: var(--accent);
  background: var(--accent-strong);
  color: #ff8a7a;
}

html[data-theme="night"] .btn-night-dot {
  background: #ff4a3d;
  box-shadow: 0 0 8px #ff4a3d;
}

html[data-theme="night"] .switch input:checked + .switch-track::after {
  background: #ff6a5d;
}

/* ベースマップ: 白地のタイルは反転して暗地にする（白い地図で目を眩ませない） */
html[data-theme="night"] .leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(0.6) contrast(1.15);
}

/* 雨雲・風流線: 青や緑は赤の乗算で消えてしまうため、先に明るさだけの表現にする */
html[data-theme="night"] .leaflet-nowcast-pane,
html[data-theme="night"] .leaflet-cloud-pane,
html[data-theme="night"] .leaflet-wind-pane {
  filter: grayscale(1) brightness(1.25);
}

html[data-theme="night"] .map {
  background: #000;
}

html[data-theme="night"] .leaflet-bar a,
html[data-theme="night"] .leaflet-control-attribution {
  background: var(--surface-2) !important;
  color: var(--text-dim) !important;
  border-color: var(--border) !important;
}

html[data-theme="night"] .leaflet-control-attribution a {
  color: var(--text-dim);
}

html[data-theme="night"] .leaflet-popup-content-wrapper,
html[data-theme="night"] .leaflet-popup-tip {
  background: var(--surface-2);
  color: var(--text);
}

/* 画面全体に赤を乗算: 残るのは赤チャンネルだけになる */
html[data-theme="night"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgb(255, 0, 0);
  mix-blend-mode: multiply;
  pointer-events: none;
}