/* ==========================================================================
   ベース変数設定 (ダークモード / ライトモード対応)
   ========================================================================== */
:root[data-theme="dark"] {
  --bg-color: #0d1117; /* よりダークな色へ */
  --panel-bg: #161b22;
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --border-color: #30363d;
  --accent-color: #58a6ff;
  --accent-hover: #1f6feb;
  --danger-color: #f85149;
  --warning-color: #f0883e;
  --success-color: #3fb950;
  --switch-bg: #30363d;
}

:root[data-theme="light"] {
  --bg-color: #f6f8fa;
  --panel-bg: #ffffff;
  --text-primary: #24292f;
  --text-secondary: #57606a;
  --border-color: #d0d7de;
  --accent-color: #0969da;
  --accent-hover: #0344b1;
  --danger-color: #cf222e;
  --warning-color: #9a6700;
  --success-color: #1a7f37;
  --switch-bg: #d0d7de;
}

/* 基本スタイル */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s; /* 切り替え時のバグ防止用 transition */
}

/* 免責事項モーダル */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex; justify-content: center; align-items: center; z-index: 9999;
}
.modal-content {
  background-color: var(--panel-bg); padding: 32px; border-radius: 12px;
  max-width: 550px; width: 90%; border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.modal-content h2 { margin-bottom: 16px; font-size: 1.5rem; color: var(--danger-color); }
.modal-content p { color: var(--text-primary); font-size: 1rem; margin-bottom: 24px; line-height: 1.7; }

/* ヘッダー */
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; background-color: var(--panel-bg);
  border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 16px; }
h1 { font-size: 1.4rem; font-weight: 800; }
.status-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: bold; }
.status-badge.connecting { background-color: var(--warning-color); color: #fff; }
.status-badge.connected { background-color: var(--success-color); color: #fff; }
.status-badge.disconnected { background-color: var(--danger-color); color: #fff; }

.header-right { display: flex; align-items: center; gap: 20px; }
.date-time-box { font-size: 0.85rem; color: var(--text-secondary); text-align: right; line-height: 1.4; }

/* 【修正】トグルスイッチのデザイン */
.theme-switch-wrapper { display: flex; align-items: center; }
.theme-switch { display: inline-block; height: 26px; position: relative; width: 50px; }
.theme-switch input { display:none; }
.slider {
  background-color: var(--switch-bg); bottom: 0; cursor: pointer; left: 0;
  position: absolute; right: 0; top: 0; transition: .4s;
}
.slider:before {
  background-color: #fff; bottom: 4px; content: ""; height: 18px; left: 4px;
  position: absolute; transition: .4s; width: 18px;
}
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(24px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* ナビゲーションタブ */
.tab-nav { display: flex; background-color: var(--panel-bg); border-bottom: 1px solid var(--border-color); }
.tab-btn {
  padding: 14px 24px; background: none; border: none; color: var(--text-secondary);
  font-size: 0.95rem; cursor: pointer; border-bottom: 3px solid transparent;
  transition: all 0.2s; font-weight: 600;
}
.tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
.tab-btn:hover:not(.active) { color: var(--text-primary); }

/* メインコンテンツ */
.main-content { padding: 24px; max-width: 1300px; margin: 0 auto; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.monitor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 950px) { .monitor-grid { grid-template-columns: 1fr; } }

.panel { background-color: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; }
.panel h2 { font-size: 1.1rem; margin-bottom: 16px; color: var(--text-primary); }
.panel h3 { font-size: 1rem; margin-top: 20px; color: var(--text-secondary); }

.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #1f242c; }
:root[data-theme="light"] .info-row { border-bottom-color: #e2e8f0; }

.label { color: var(--text-secondary); font-size: 0.9rem; }
.scale-tag { font-weight: 800; padding: 4px 10px; border-radius: 6px; background-color: var(--switch-bg); color: #fff; font-size: 1.1rem;}
.scale-tag.wait { background-color: var(--switch-bg); color: var(--text-secondary); }

.scrollable-list { max-height: 250px; overflow-y: auto; margin-top: 12px; }
.empty-msg { text-align: center; color: var(--text-secondary); padding: 20px; font-size: 0.9rem; }

/* マップ描画キャンバス */
.map-container {
  position: relative; width: 100%; height: 400px; background-color: #000;
  border-radius: 8px; overflow: hidden; margin-top: 12px; pointer-events: none;
}
#wave-canvas { width: 100%; height: 100%; }
.map-overlay-info { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.7); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 0.85rem; }
.map-note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 8px; text-align: center; }

/* ボタンとUI部品 */
.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.95rem; transition: background-color 0.2s; font-weight: 600; }
.primary-btn { background-color: var(--accent-color); color: #fff; }
.primary-btn:hover { background-color: var(--accent-hover); }
.secondary-btn { background-color: var(--panel-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.secondary-btn:hover { background-color: var(--bg-color); }

.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.divider { border: none; border-top: 1px solid var(--border-color); margin: 24px 0; }
.log-list-container li { padding: 10px; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-secondary); list-style: none; }

.app-footer { text-align: center; padding: 30px; font-size: 0.8rem; color: var(--text-secondary); border-top: 1px solid var(--border-color); margin-top: 40px; }