/* --- 基本設定とダークモードの色の定義 --- */
/* :rootで、アプリ全体で使う色の変数（--bgなど）を定義しています。 */
/* html[data-theme="dark"] の部分で、ダークモードの時の色を上書きしています。 */
:root {
  --bg: #f8f9fa; --panel: #ffffff; --text: #212529; --muted: #6c757d;
  --accent: #0d6efd; --accent-text: #ffffff; --shadow-color: rgba(0,0,0,0.1);
  --border-color: #dee2e6;
}
html[data-theme="dark"] {
  --bg: #121212; --panel: #1e1e1e; --text: #e8eaed; --muted: #9aa0a6;
  --accent: #8ab4f8; --accent-text: #202124; --shadow-color: rgba(0,0,0,0.4);
  --border-color: #5f6368;
}

/* --- ページ全体の基本スタイル --- */
html,body{
  height:100%; margin:0; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Meiryo",sans-serif;
  color:var(--text); background:var(--bg); 
  transition: background-color 0.3s, color 0.3s; /* 色が滑らかに変わるアニメーション */
}
#map{
  height:100vh; width:100%; background: var(--bg);
}

/* --- 右上のUI（ダークモードボタン）のスタイル --- */
#top-ui { 
  position: absolute; top: 10px; right: 10px; z-index: 1400; 
}

/* --- 画面下部の操作パネルのスタイル --- */
#controls{ 
  position:absolute; bottom:12px; left:12px; right:12px; z-index:1400; 
  display:flex; gap:8px; align-items:center; 
  background:var(--panel); padding:8px; border-radius:12px; box-shadow:0 6px 20px var(--shadow-color);
}
#search-box{ 
  padding:12px; border-radius:8px; border:1px solid var(--border-color); 
  background: var(--bg); color: var(--text); flex:1; 
}
.btn{ 
  padding:12px 16px; border-radius:8px; border:none; 
  background:var(--panel); color: var(--text); cursor:pointer; 
  text-align:center; font-size:1em; font-weight:500;
}
.btn:active { 
  transform: scale(0.96); background-color: rgba(0,0,0,0.1); /* ボタンを押した時のエフェクト */
}
#theme-toggle { 
  font-size: 1.2em; box-shadow: 0 4px 12px var(--shadow-color); 
}

/* --- サイドバーのスタイル --- */
#sidebar{ 
  position:absolute; right:0; top:0; z-index:1500; 
  width:360px; height:100%; overflow:auto; 
  background:var(--panel); padding:12px; box-shadow:-8px 0 30px var(--shadow-color); 
  transform:translateX(100%); transition:transform .26s; visibility:hidden; /* 初期状態では画面外に隠す */
}
#sidebar.is-open{ 
  transform:translateX(0); visibility:visible; /* is-openクラスが付くと画面内に出てくる */
}
#places-list, #match-list { 
  list-style:none; padding:0; margin:0; 
}

/* --- サイドバー内のリストアイテムのスタイル --- */
.list-item { 
  padding:10px; border-radius:8px; border-bottom:1px solid var(--border-color);
  margin-bottom:2px; cursor:pointer; display: flex; gap: 10px; align-items: center;
}
.list-item:hover { 
  background-color: rgba(0,0,0,0.05); /* マウスを乗せると色が変わる */
}
.list-item-thumb { 
  width: 60px; height: 60px; object-fit: cover; 
  border-radius: 6px; background-color: var(--bg); flex-shrink: 0;
}
.list-item-info { 
  flex: 1; min-width: 0; 
}
.list-item-comment { 
  font-size: 0.85em; color: var(--muted); margin-top: 4px; 
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* コメントを2行で省略表示 */
}

/* --- ポップアップウィンドウのスタイル --- */
.leaflet-popup-content-wrapper { 
  border-radius: 12px; background: var(--panel); color: var(--text); 
}
.leaflet-popup-content { 
  width: calc(90vw - 38px) !important; max-width: 320px; 
}
.leaflet-popup-tip { 
  background: var(--panel); 
}
.popup-action-buttons { 
  display: flex; gap: 8px; margin-top: 8px; 
}
.popup-action-buttons button { 
  flex: 1; padding: 8px; border-radius: 6px; border: none; color: white; cursor: pointer; 
}
.route-button { background:#28a745; } 
.edit-button { background:#ffc107; color: #111;} 
.delete-button { background:#dc3545; }

/* --- 登録フォーム内のカテゴリボタンのスタイル --- */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.category-btn {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text);
  border-radius: 16px;
  cursor: pointer;
}
.category-btn.selected {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
/* --- style.cssの末尾にこれを追記 --- */

/* --- 他者評価ボタンのスタイル --- */
.feedback-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}
.feedback-buttons button {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s, border-color 0.2s; /* スタイルが滑らかに変わるアニメーションを追加 */
}
.feedback-buttons button:hover {
  background: var(--border-color);
}

/* ★ 新規追加: 投票済みボタンのスタイル */
.feedback-buttons button.voted {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
/* ★ 削除: 以前の :disabled スタイルは不要になります */

.feedback-buttons .count {
  font-size: 0.8em;
  font-weight: bold;
}