@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap');

/* 基本レイアウト */
:root{
  --panel-w: 320px;
  --accent: #2b6cb0;
}
html,body,#app{ height:100%; margin:0; padding:0; font-family: "Noto Sans JP", system-ui, sans-serif; }
#app{ display:flex; }

/* サイドパネル */
.panel{
  width: var(--panel-w);
  min-width: 240px;
  background:#fff;
  border-right:1px solid #ddd;
  box-shadow: 2px 0 8px rgba(0,0,0,0.06);
  padding:10px;
  box-sizing:border-box;
  display:flex; flex-direction:column;
  height: 100vh;
}
.panel.hidden{ width:40px; min-width:40px; overflow:hidden; padding:6px; }
.panel-header{ display:flex; align-items:center; gap:8px; }
.panel-header h2{ margin:0; font-size:16px; flex:1; }
.btn{ background:var(--accent); color:#fff; border:none; padding:6px 8px; border-radius:6px; cursor:pointer; }
.btn.small{ padding:4px 6px; font-size:13px; }

/* タブ */
.tabs{ display:flex; gap:6px; margin:8px 0 10px 0; }
.tab-btn{ flex:1; padding:6px; border-radius:6px; border:1px solid #ddd; background:#f7f7f7; cursor:pointer; }
.tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* tab content */
.tab-content{ display:block; }
.tab-content.hidden{ display:none; }

/* basemap list */
.basemap-list{ display:flex; flex-direction:column; gap:8px; }
.basemap-item{ display:flex; align-items:center; justify-content:space-between; padding:6px; border:1px solid #eee; border-radius:6px; background:#fff; }
.basemap-item .meta{ font-size:13px; color:#333; }
.basemap-item .meta small{ display:block; color:#666; font-size:12px; }

/* 選択中の背景地図アイテムのスタイル */
.basemap-item.active {
  border-left: 4px solid var(--accent);
  background-color: #ebf8ff; /* 薄い青色 */
}
.basemap-item.active .btn {
  background-color: #a0aec0; /* グレーアウト */
  cursor: default;
}

/* レイヤリスト（ドラッグ可能） */
.layer-list{ display:flex; flex-direction:column; gap:6px; }
.layer-row{
  display:flex; align-items:center; gap:8px; padding:6px; border:1px solid #eee; border-radius:6px; background:#fff;
  cursor:grab;
}
.layer-row.dragging{ opacity:0.6; }
.layer-row .left{ display:flex; align-items:center; gap:8px; flex:1; }
.color-dot{ width:14px; height:14px; border-radius:50%; display:inline-block; }
.layer-row .controls{ display:flex; gap:6px; align-items:center; }

/* hint & credits */
.hint{ font-size:12px; color:#666; margin-top:8px; }
.credits{ margin-top:auto; font-size:12px; color:#666; }

/* 地図 */
#map{ flex:1; height:100vh; }

/* modal (info) */
.modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2000; }
.modal.hidden{ display:none; }
.modal-content{
  width: 360px;
  max-width: 90vw;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  position: relative;
  max-height: 70vh; /* ← コンテンツの高さを画面の70%に制限 */
  overflow-y: auto;  /* ← 縦方向にはみ出た場合にスクロールバーを表示 */
}
.close-btn{ position:absolute; right:8px; top:8px; background:#f2f2f2; color:#333; border-radius:6px; padding:4px 6px; }

/* modal (filter)  */
#hoikuenFilterModal .modal-content {
  width: 400px; /* フィルターモーダルの幅を調整 */
  padding: 20px;
}
#hoikuenFilterModal h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
#hoikuenFilterModal h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #333;
}
.filter-options label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.filter-options input[type="checkbox"] {
  margin-right: 5px;
}
.apply-btn {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: var(--accent); /* ボタンの背景色 */
  color: #fff; /* ボタンの文字色 */
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* small screens */
@media (max-width:800px){
  .panel{ position: absolute; z-index:1200; height:100vh; transform: translateX(0); transition: transform .2s ease; }
  #map{ margin-left:0; }
}

/* 折りたたみ時にボタン以外の要素を非表示にする */
.panel.hidden > *:not(.panel-header) {
  display: none;
}
.panel.hidden .panel-header h2 {
  display: none;
}

/* タイトル追加 */
.map-title {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 15px;
  border-radius: 8px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #2c5282;
  line-height: 1.1;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.map-title .small-text {
  font-size: 14px;
  font-weight: 800;
  display: block;
  color: #3b82f6;
}

/* ヘルプボタンのスタイルを追加 */
.maplibregl-ctrl-help {
  font-size: 1.2em;
  font-weight: bold;
  font-family: sans-serif;
}

/* 保育園開園時間ソート用 */
.filter-options-time > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.filter-options-time strong {
  width: 40px;
}
.filter-options-time select {
  flex: 1;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.credits {
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 1050; /* 他のUIより上に表示 */
}

.credits a {
  color: #0078A8;
  text-decoration: none;
}

.credits a:hover {
  text-decoration: underline;
}

/* レイヤーリストの画像アイコンのスタイル */
.layer-list-icon {
  width: 20px;
  height: 20px;
  object-fit: contain; /* 画像の比率を保ちながらフィットさせる */
  flex-shrink: 0; /* アイコンが縮まないようにする */
}

/* ============================
   スマホ表示向け調整
   ============================ */
@media (max-width: 800px) {

  /* --- サイドパネル内のボタンや文字を大きく --- */
  .btn {
    padding: 10px 12px; /* ボタンの上下左右の余白を広げる */
    font-size: 15px;    /* ボタンの文字を大きく */
  }

  .layer-row, .basemap-item {
    padding: 12px 8px; /* 各行の上下の余白を広げてタップしやすくする */
  }

  .layer-row .left strong, .basemap-item .meta {
    font-size: 15px; /* レイヤ名や背景地図名を大きく */
  }

  .layer-list-icon {
    width: 24px;   /* レイヤアイコンを大きく */
    height: 24px;
  }
  
  .color-dot {
    width: 18px;   /* 色の丸アイコンを大きく */
    height: 18px;
  }
  
  .panel.hidden {
    /* パネル全体のタッチ操作を無効にする */
    pointer-events: none;
  }

  /* ただし、パネルを再度開くためのボタンだけは操作できるようにする */
  .panel.hidden #toggle-panel {
    pointer-events: auto;
  }

  /* --- 地図右上のコントロールボタンを大きく --- */
  .maplibregl-ctrl-group button {
    width: 38px !important;  /* ボタンの幅を広げる */
    height: 38px !important; /* ボタンの高さを広げる */
    font-size: 1.5em;        /* +/- ボタンの記号を大きく */
  }
  
  .maplibregl-ctrl-help {
    font-size: 1.6em; /* ヘルプボタン(?)を大きく */
  }
  
  /* --- 地図左上のタイトルを少し調整 --- */
  .map-title {
    font-size: 22px;
    padding: 8px 16px;
    left: 55px; /* 左からの位置を調整 (閉じたパネル40px + 余白15px) */
    transition: left 0.3s ease; /* 位置が変わる際にスムーズに動かす */
  }
  .map-title .small-text {
    font-size: 12px;
  }
    /* パネルのz-indexを上げる */
  .panel {
    z-index: 1100 !important;
  }
  
  /* パネルが開いている時は出典情報を隠す */
  .panel:not(.hidden) ~ #map .credits {
    display: none;
  }
}

/* レイヤコントロールエリアのスタイル */
.layer-control-area {
  margin-bottom: 16px;
}


.layer-control-area h4, .layer-catalog-area h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.active-layers-list {
  min-height: 60px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 8px;
  background: #f8f9fa;
  margin-bottom: 8px;
}

.no-layers-message {
  color: #666;
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

.active-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 13px;
}

.active-layer-item:last-child {
  margin-bottom: 0;
}

.layer-control-buttons {
  display: flex;
  gap: 8px;
}

.layer-control-buttons .btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
}

.control-separator {
  border: none;
  border-top: 1px solid #ddd;
  margin: 16px 0;
}

/* レイヤカタログ（フォルダ表示）のスタイル */
.layer-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folder-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  background: #f8f9fa;
  border-radius: 6px 6px 0 0;
}

.folder-header:hover {
  background: #e9ecef;
}

.folder-icon {
  font-size: 16px;
}

.folder-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.folder-toggle {
  font-size: 12px;
  color: #666;
}

.folder-content {
  padding: 8px;
  border-top: 1px solid #e5e5e5;
  display: none;
}

.folder-content.expanded {
  display: block;
}

.catalog-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fafafa;
  font-size: 13px;
}

.catalog-layer-item:last-child {
  margin-bottom: 0;
}

.catalog-layer-item:hover {
  background: #f0f0f0;
}

.catalog-layer-item .btn {
  font-size: 11px;
  padding: 3px 6px;
}

/* スマホ対応 */
@media (max-width: 800px) {
  .layer-control-buttons {
    flex-direction: column;
  }
  
  .active-layers-list {
    max-height: 100px;
  }
  
  .layer-catalog-area h4, .layer-control-area h4 {
    font-size: 15px;
  }
}

/* =================================
   レイヤー一覧のスクロール修正（折りたたみ対応）
   ================================= */



/* パネルが開いていて、かつレイヤータブがアクティブな時のみ適用するスタイル */
.panel:not(.hidden) {
  display: flex; 
  flex-direction: column;
  height: 100vh;
}

/* レイヤータブが表示されている時のみflexboxを適用 */
.panel:not(.hidden) #layers:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.panel:not(.hidden) #layers:not(.hidden) .layer-catalog-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.panel:not(.hidden) #layers:not(.hidden) .layer-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* 折りたたみ時の確実な非表示設定を強化 */
.panel.hidden .layer-control-area,
.panel.hidden .control-separator,
.panel.hidden .layer-catalog-area,
.panel.hidden .hint {
  display: none !important;
}

/* タブが非表示の時は確実に隠す */
.tab-content.hidden {
  display: none !important;
}

.catalog-layer-item {
  cursor: pointer;
}

.catalog-layer-item:hover {
  background: #f0f8ff;
}

/* モーダルのz-indexを確実に最前面に */
.modal {
  z-index: 2000; /* 既存の値を維持 */
}

/* 情報モーダル（保育園フィルター）も最前面に */
#hoikuenFilterModal {
  z-index: 2100; /* モーダルより少し上 */
}

/* 地図コントロール（？ボタンなど）を適切な位置に */
.maplibregl-ctrl-group {
  z-index: 1200 !important; /* パネルより少し上 */
}

/* MapLibreのポップアップも前面に */
.maplibregl-popup {
  z-index: 1300 !important;
}

#map {
  cursor: default;
}

/* MapLibreのキャンバス要素 */
.maplibregl-canvas {
  cursor: default ;
}

/* インタラクティブな要素の上ではポインターに */
.maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas {
  cursor: default;
}