/* ========================================
   公開型GIS スタイル : プラグイン拡張とページ個別（Leafletカスタム・ルート検索・ヘルプ・調査用ページ）
   （読み込み順が適用順です。index.html / survey/index.html の
     link 順を入れ替えると見た目が変わります）
   ======================================== */
/* ========================================
   Custom Leaflet styles
   ======================================== */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; min-width: 200px; }
/* 閉じるボタンは白背景のポップアップ（参照レイヤの属性など）でも見えるよう
   濃い色を既定にし、角いっぱいに寄せる。色付きヘッダーのポップアップだけ白にする。 */
.leaflet-popup-close-button {
  width: 26px !important;
  height: 26px !important;
  line-height: 24px !important;
  font-size: var(--icon-lg) !important;
  top: 2px !important;
  right: 2px !important;
  border-radius: 6px;
  color: var(--gray-600, #4a5568) !important;
  text-align: center;
}
.leaflet-popup-close-button:hover {
  background: var(--gray-100, #edf2f7);
  color: var(--gray-900, #1a202c) !important;
}
/* 色付きヘッダー（.popup-header）を持つポップアップは白抜きにする */
.leaflet-popup-content:has(.popup-header) ~ .leaflet-popup-close-button,
.leaflet-popup-content-wrapper:has(.popup-header) + .leaflet-popup-tip-container + .leaflet-popup-close-button,
.leaflet-popup:has(.popup-header) .leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.85) !important;
}
.leaflet-popup:has(.popup-header) .leaflet-popup-close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
}

/* Custom marker */
.custom-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}
.marker-pin {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.marker-pin i {
  transform: rotate(45deg);
  /* 地図上のピンは固定サイズの図形。文字サイズ切替には連動させない */
  font-size: 12px;
  color: #fff;
}

/* Drawing hint */
.leaflet-draw-tooltip {
  font-family: var(--font) !important;
  font-size: var(--fs-caption) !important;
}

/* ========================================
   Route Search
   ======================================== */
.route-mode-btns {
  display: flex;
  gap: 6px;
}
.route-mode-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--gray-700);
  text-align: center;
  transition: all 0.15s;
}
.route-mode-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.route-addr-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* 「地図から選ぶ」「現在地」は文字入りのボタンにして、押す前に何が起きるか分かるようにする */
.route-point-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.route-point-btns .btn {
  flex: 1;
  justify-content: center;
  min-height: 34px;
  font-size: var(--fs-body);
}

.route-addr-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-family: var(--font);
}
.route-addr-input:focus-visible { outline: none; border-color: var(--primary); }
.route-addr-results {
  margin-top: 4px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: none;
}
.route-addr-results.open { display: block; }
.route-addr-result-item {
  padding: 7px 10px;
  font-size: var(--fs-body);
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.route-addr-result-item:last-child { border-bottom: none; }
.route-addr-result-item:hover { background: var(--primary-light); color: var(--primary); }
.route-point-status {
  font-size: var(--fs-caption);
  color: var(--gray-500);
  margin-top: 3px;
  min-height: 16px;
}
.route-point-status.set { color: var(--secondary); }
.route-point-status.picking { color: var(--primary); }
.route-result {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  font-size: var(--fs-body);
  display: none;
}
.route-result.visible { display: block; }
/* 移動手段・距離・時間。パソコンは縦積み、スマホのシートでは横1行にする */
.route-result-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.route-result-mode {
  font-weight: 600;
  color: var(--primary);
}
.route-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.route-result-row i { color: var(--primary); width: 16px; text-align: center; }
.route-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--fs-caption);
}

/* ========================================
   モバイル用ルートシート
   スマホではルートタブの中身（#panel-route）を地図下部のシートへ移す。
   地図が常に見えるので、出発地→到着地を連続タップで指定できる。
   ======================================== */
#route-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1250;
  background: #fff;
  /* 境界は影で示す（属性シート #attribute-modal .modal と同じ手法）。
     角丸に片側だけ太いボーダーを付けると、角で帯が0へ細くなって不自然になる */
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.28);
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#route-sheet.visible { display: block; }
.route-sheet-head {
  display: flex;
  align-items: center;
  padding: 5px 84px 2px 12px;   /* 右はクリア・閉じるボタンの場所を空ける */
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--primary);
}
.route-sheet-close {
  position: absolute;
  top: 2px;
  right: 4px;
  border: none;
  background: none;
  font-size: var(--icon-lg);
  color: var(--gray-500);
  padding: 3px 10px;
  cursor: pointer;
}
/* 「クリア」はやり直しの入口なので、結果や入力を探さず押せる上部に置く
   （DOM順ではパネル末尾にあるため、位置だけをヘッダー右へ移す） */
#route-sheet #btn-route-clear {
  position: absolute;
  top: 3px;
  right: 40px;
  width: auto;
  margin: 0 !important;
  padding: 3px 9px;
  font-size: var(--fs-caption);
  min-height: 0;
}
/* シート内ではパネルの中身を詰めて表示する（タブ状態のCSSに依存させない） */
#route-sheet #panel-route { display: block; padding: 0 12px 6px; }
#route-sheet .search-group { margin-bottom: 6px; }
#route-sheet .search-group-title { margin-bottom: 3px; font-size: var(--fs-caption); }
/* 「移動手段」の見出しはボタン自体（車・徒歩・自転車）が示しているので省く */
#route-sheet .search-group:not(.route-pt-group) > .search-group-title { display: none; }
#route-sheet .route-point-btns { margin-top: 4px; }
#route-sheet .route-point-btns .btn { min-height: 30px; font-size: var(--fs-caption); }
#route-sheet .route-point-status { margin-top: 2px; min-height: 14px; }
#route-sheet .route-result { margin: 0 0 6px; padding: 6px 10px; font-size: var(--fs-caption); }
/* 手段・距離・時間を1行にまとめる（縦に積むと地図が狭くなる） */
#route-sheet .route-result-main {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 14px;
}
#route-sheet .route-legend { gap: 6px; margin-top: 5px; font-size: var(--fs-caption); }

/* 出発地・到着地の入力欄は初期は隠す。地図をタップすれば決まるので、
   住所入力・現在地を使いたいときだけ「住所・現在地で指定する」で開く */
#route-sheet .route-pt-group { display: none; }
#route-sheet.details-open .route-pt-group { display: block; }
.route-sheet-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: none;
  border-top: 1px solid var(--gray-200);
  background: none;
  padding: 7px 0;
  font-family: var(--font);
  font-size: var(--fs-caption);
  color: var(--gray-600);
  cursor: pointer;
}
#route-sheet.details-open .route-sheet-more .fa-chevron-down { transform: rotate(180deg); }
/* シート表示中は下部の縮尺バー等と重なるため隠す */
body.route-sheet-open #map-info-bar { display: none; }
/* 拡大縮小ボタン・縮尺・出典・索引図はシートに隠れないよう上へ寄せる
   （--route-sheet-h はシートの実際の高さ。gis-common.js が反映する） */
body.route-sheet-open .leaflet-bottom { bottom: var(--route-sheet-h, 0px); }

/* ========================================
   Help Modal
   ======================================== */
.help-modal { max-width: 640px; }
.help-modal-body {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}
.help-section {
  border-bottom: 1px solid var(--gray-200);
}
.help-section:last-child { border-bottom: none; }
.help-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gray-900);
  font-family: var(--font);
  text-align: left;
  transition: background 0.15s;
}
.help-section-toggle:hover { background: var(--gray-50); }
.help-section-toggle span { display: flex; align-items: center; }
.help-chevron {
  font-size: var(--icon-sm);
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.help-section.open .help-chevron { transform: rotate(180deg); }
.help-section-body {
  display: none;
  padding: 0 20px 16px;
}
.help-section.open .help-section-body { display: block; }
.help-dl { margin: 0; }
.help-dl dt {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gray-800);
  margin-top: 12px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-dl dt:first-child { margin-top: 0; }
.help-dl dd {
  margin: 0 0 0 0;
  font-size: var(--fs-body);
  color: var(--gray-600);
  line-height: 1.65;
  padding-left: 20px;
}
kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: var(--fs-caption);
  font-family: monospace;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--gray-700);
}
/* ========================================
   調査用ページ（survey/）
   ======================================== */

#login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--gray-50);
}
.login-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 40px;
  width: 100%;
  max-width: 380px;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo i { font-size: var(--icon-2xl); color: var(--primary); }
.login-logo h1 { font-size: var(--fs-title); font-weight: 700; margin-top: 8px; }
.login-logo p { font-size: var(--fs-caption); color: var(--gray-400); margin-top: 4px; }
.login-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: var(--fs-body);
  margin-bottom: 12px;
  display: none;
}
.login-box .form-group { margin-bottom: 16px; }
.login-box .form-group label { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--gray-700); margin-bottom: 5px; }
.login-box .form-group input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-size: var(--fs-body); font-family: var(--font); outline: none;
}
.login-box .form-group input:focus { border-color: var(--primary); }

/* 編集タブ */
#panel-edit .search-group {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  margin-bottom: 10px;
}
#edit-layer-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-family: var(--font);
}
.form-hint { font-size: var(--fs-caption); color: var(--gray-500); margin-top: 6px; line-height: 1.5; }

/* 属性編集モーダル */
.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--gray-700); margin-bottom: 5px; }
.field-group input, .field-group select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-size: var(--fs-body); font-family: var(--font); outline: none;
}
.field-group input:focus, .field-group select:focus { border-color: var(--primary); }
.field-image-preview { margin-top: 8px; }
.field-image-preview img { max-width: 100%; max-height: 140px; border-radius: var(--radius); display: block; }

/* トースト通知 */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
}

/* ヘルプの節の冒頭に置く補足文（1箇所のみ）。
   色帯は付けない。gray-50 は白背景との差が小さく見えないため、
   help/help.css の .note と同じ「淡い背景＋1px の全周枠」で本文と区別する */
.help-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-100);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--gray-600);
}

.help-btn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
}