/**
 * Leafletベースのインタラクティブマップ用CSS
 */

/* Leafletのデフォルトスタイルを調整 */
.leaflet-container {
  background: #f5f5f5;
  z-index: 1; /* ヘッダーより確実に下に配置 */
  position: relative;
  border: solid 2px #bbb;
  border-radius: 10px;
}

.leaflet-pane {
  z-index: 10; /* ヘッダーより低く設定 */
}

/* カスタムピンのスタイル */
.custom-pin {
  background: transparent;
  border: none;
}

.pin-marker {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pin-marker:hover {
  transform: scale(1.2);
}

/* Container Queriesを使用したピンサイズ調整 */
.pin-dot {
  display: none;  /* 丸いピンを非表示 */
}

.pin-label {
  position: absolute;
  top: 0;  /* ラベルを中央に配置 */
  left: 50%;
  transform: translate(-50%, -50%);  /* 完全中央配置 */
  transform-origin: center;  /* 中心から拡大・縮小 */
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;  /* 基本パディング（JavaScriptで動的調整） */
  border-radius: 6px;
  font-size: 12px;  /* 基本フォントサイズ（JavaScriptで動的調整） */
  font-weight: bold;
  white-space: nowrap;
  z-index: 3;
  border: 2px solid white;  /* 白い枠線（JavaScriptで太さ調整） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);  /* シャドウを追加 */
  transition: all 0.2s ease; /* サイズ変更時のスムーズなアニメーション */
}

/* エリア別のラベル色 */
.area1-theme .pin-red .pin-label {
  background-color: white;
  border-color: #E47705;
  color: #E47705;
}

.area2-theme .pin-blue .pin-label {
  background-color: white;
  border-color: #154B95;
  color: #154B95;
}

.area3-theme .pin-purple .pin-label {
  background-color: white;
  border-color: #cf2e2e;
  color: #cf2e2e;
}

/* ズームコントロール */
.zoom-controls button {
  background: white;
  border: 1px solid #ccc;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.zoom-controls button:hover {
  background: #f0f0f0;
}

/* 動的生成される日付ボタンのホバースタイル */
.hover-red:hover { 
  background-color: #fef2f2 !important; 
  border-color: #fca5a5 !important; 
}

.hover-blue:hover { 
  background-color: #eff6ff !important; 
  border-color: #93c5fd !important; 
}

.hover-purple:hover { 
  background-color: #faf5ff !important; 
  border-color: #c4b5fd !important; 
}

/* 動的生成される日付ボタンの基本スタイル */
.date-button {
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* 親要素の高さいっぱいに伸ばす */
}

/* 日付リストのグリッドレイアウト調整 */
#date-list {
  align-items: stretch; /* グリッドアイテムを縦方向に伸ばす */
}

#date-list li {
  display: flex; /* liを flexコンテナにして、子要素を伸ばす */
  align-items: start;
}

.date-button.active {
  font-weight: 900;
  background-color: #f3f4f6;
  border-color: #6b7280;
  border: solid 1px;
  outline: none;
}

/* テーマ別のアクティブスタイル */
.area1-theme .date-button.active {
  background-color: #fef2f2;
  border-color: #E47705;
  color: #E47705;
}

.area2-theme .date-button.active {
  background-color: #eff6ff;
  border-color: #154B95;
  color: #154B95  ;
}

.area3-theme .date-button.active {
  background-color: #faf5ff;
  border-color: #cf2e2e;
  color: #cf2e2e;
}

/* ポップアップスタイル */
#pin-popup {
  position: absolute;
  z-index: 11;
  max-width: 80%;
  max-height: 80%;
  min-width: 200px;
  overflow-y: auto; /* 内容が多い場合はスクロール可能に */
}

/* Leafletのズームコントロールを非表示 */
.leaflet-control-zoom {
  display: none;
}

/* Leafletのアトリビューションを調整 */
.leaflet-control-attribution {
  display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .pin-marker:hover {
    transform: scale(1.1);
  }
}

/* ポップアップ背景シェード */
.popup-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.popup-shade.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 出店なしメッセージ */
.no-exhibitions-message {
  background: transparent;
  border: none;
}

.no-exhibitions-content {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

/* 無効な日付ボタンのスタイル */
.date-button-disabled {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; /* 親要素の高さいっぱいに伸ばす */
}

.date-button-disabled:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

/* 出展カードのヘッダースタイル */
.exhibition-card-header {
  background-color: #fff8de;
  color: #e37500;
}

/* エリア別の出展カードヘッダー色 */
.area1-theme .exhibition-card-header {
  background-color: #fef2f2;
  color: #E47705;
}

.area2-theme .exhibition-card-header {
  background-color: #eff6ff;
  color: #154B95;
}

.area3-theme .exhibition-card-header {
  background-color: #faf5ff;
  color: #cf2e2e;
}