/* ============================================================================
 * foreign-pop-styles.css - MAPRISE 外国人ヒートマップ機能 スタイルシート
 *   全クラス名 .fp- プレフィックス (設計書 §6.1.2 衝突回避)
 *   ASCII 互換文字のみ使用 (en-dash, U+2264 等の記号禁止)
 *   作成: 2026-05-04 (Phase E Step 3)
 *   P20  : サイドバー/凡例/ポップアップ上部の全テキストを #ffffff に白色化
 *          ポップアップを 3 セクション (校区 / 区 / チャート) に再構成
 * ========================================================================== */

/* セクション (P20: サイドバーセクション見出しを完全白色 #ffffff) */
.fp-section {
  border-top: 1px solid #2a2f3d;
  padding: 12px 14px;
  margin-top: 4px;
  background: rgba(15, 18, 27, 0.4);
}
.fp-section-title {
  font-size: 13px; font-weight: 600; color: #ffffff;
  margin: 0 0 8px 0; padding: 0;
}

/* レイヤートグル (P8: deep green ブランドカラー) */
/* P20: ラベル文字を #ffffff に白色化 */
.fp-toggle-row { margin-bottom: 8px; }
.fp-toggle-row label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #ffffff; cursor: pointer;
}
.fp-toggle-row input[type="checkbox"] {
  cursor: pointer; margin: 0;
  accent-color: var(--mh-primary, #0F6E56);
}
#fp-toggle-checkbox { accent-color: var(--mh-primary, #0F6E56); }

/* 表示モード選択 (P20: ラベルとセレクト文字を #ffffff に) */
.fp-mode-selector-row {
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px;
}
.fp-mode-selector-row label { font-size: 11px; color: #ffffff; }
.fp-mode-selector-row select {
  font-size: 12px; padding: 4px 6px;
  background: #1e293b; color: #ffffff;
  border: 1px solid #334155; border-radius: 3px; cursor: pointer;
}

/* 凡例 (P4: マップ右下フローティング、P10: 既存 .legend-panel と同位置・前面化) */
/* P5: 座標プロパティに !important を付与 (他 CSS との競合回避) */
/* P10: right 220px -> 10px、z-index 5 -> 15 (既存 .legend-panel z=5 を覆う) */
/* P14: 既存 .legend-panel と色調統一 (黒背景・白文字、backdrop-filter blur) */
/* P20: ベース color / title / labels すべて #ffffff に統一 */
.fp-legend-floating {
  position: absolute !important;
  bottom: 52px !important; right: 10px !important;
  z-index: 15;
  background: rgba(15, 17, 23, 0.92);
  border: 1px solid #2e3140; border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 180px; max-width: 240px;
  pointer-events: auto;
}
.fp-legend-floating-title {
  font-weight: 600; margin-bottom: 6px; color: #ffffff; font-size: 12px;
}
.fp-legend-floating-bar {
  height: 12px; width: 100%; border-radius: 2px; margin-bottom: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}
.fp-legend-floating-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #ffffff;
}
@media (max-width: 768px) {
  .fp-legend-floating {
    bottom: 80px !important; right: 12px !important;
    min-width: 160px; font-size: 10px;
  }
}

/* ポップアップ (P18: 既存 .maplibregl-popup-content は黒背景・白文字で強制統一済のため、
   .fp-popup 系も親パターン継承。chat-ui の .popup-row/key/val と同色調) */
/* P18-2: 全テキスト要素を白系強制 (Chart.js 内 canvas 以外、HTML テキスト全部) */
/* P20  : 上部 (校区情報・区情報) のキー/値を #ffffff 完全白色に */
.fp-popup,
.fp-popup * {
  color: #ffffff;
}
.fp-popup {
  font-family: inherit; min-width: 260px; max-width: 320px;
  max-height: 65vh; overflow-y: auto; overflow-x: hidden;
}
.fp-popup-title {
  font-size: 13px; font-weight: 600; margin: 0 0 2px 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: #ffffff;
}
.fp-popup-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 1px 0; border-bottom: 1px solid #2e3140;
}
.fp-popup-key { color: #ffffff; }
.fp-popup-value { font-weight: 500; color: #ffffff; }
/* P23-H (2026-05-10): 校名ヘッダの外国人比率インライン表示 */
.fp-rate-inline {
  font-size: 11px; font-weight: 700;
  color: #fbbf24; background: rgba(251,191,36,0.15);
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
}

/* P20: ポップアップ 3 セクション構成 (校区情報 / 区情報 / チャート) */
.fp-section-district {
  padding: 0 0 1px 0;
  border-bottom: 1px solid #2e3140;
  margin-bottom: 2px;
}
.fp-section-municipality-header {
  padding: 1px 0 1px 0;
  border-bottom: 1px solid #2e3140;
  margin-bottom: 1px;
}
.fp-section-charts {
  padding-top: 4px;
}
.fp-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 2px;
}
.fp-municipality-title {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: #ffffff;
}
.fp-municipality-note {
  font-size: 10px;
  font-style: italic;
  color: #ffffff;
  opacity: 0.85;
  margin: 0 0 2px 0;
  line-height: 1.3;
}

/* バッジは独自の文字色 (緑/青/黄背景に濃色) を維持、!important で .fp-popup * を上書き */
.fp-popup .fp-badge-measured    { color: #155724 !important; }
.fp-popup .fp-badge-estimated   { color: #004085 !important; }
.fp-popup .fp-badge-provisional { color: #856404 !important; }

/* データ品質バッジ (設計書 §1.2.3) */
.fp-badge {
  display: inline-block; font-size: 10px; padding: 2px 6px;
  border-radius: 3px; font-weight: 600; vertical-align: middle;
}
.fp-badge-measured    { background: #d4edda; color: #155724; }
.fp-badge-estimated   { background: #cce5ff; color: #004085; }
.fp-badge-provisional { background: #fff3cd; color: #856404; }

/* チャートコンテナ */
.fp-chart-container { margin-top: 2px; padding: 1px 0; }
.fp-chart-donut { width: 100%; max-width: 200px; max-height: 140px; height: 140px !important; margin: 0 auto; display: block; }
.fp-chart-bar   { width: 100%; max-width: 100%; max-height: 200px; height: 200px !important; display: block; }
.fp-chart-trend { width: 100%; max-width: 100%; max-height: 60px; height: 60px !important; display: block; }
.fp-chart-title { font-size: 11px; color: #cbd5e1; margin: 4px 0 2px 0; font-weight: 600; }
/* P22-X: ポップアップオーバーフロー対策 (2026-05-09):
   2カラムグリッドで横棒チャートに十分な幅が取れず横にはみ出すため 1カラムに変更。
   国籍別詳細（ドーナツ+横棒）は <details> で折りたたみ化。 */
.fp-section-charts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.fp-section-charts > .fp-chart-container,
.fp-section-charts > details.fp-collapsible,
.fp-section-charts > .fp-source-credit,
.fp-section-charts > .fp-scope-note { width: 100%; }

/* P22-X: 折りたたみユニット (<details>/<summary>) */
details.fp-collapsible { width: 100%; }
details.fp-collapsible > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 6px 10px; margin-top: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid #2e3140; border-radius: 4px;
  font-size: 12px; font-weight: 600; color: #ffffff;
  display: flex; justify-content: space-between; align-items: center;
}
details.fp-collapsible > summary::-webkit-details-marker { display: none; }
details.fp-collapsible > summary::after {
  content: '▼'; font-size: 9px; opacity: 0.7;
  transition: transform 0.2s;
}
details.fp-collapsible[open] > summary::after { transform: rotate(180deg); }
details.fp-collapsible > .fp-collapsible-body {
  padding: 8px 0 0 0; display: flex; flex-direction: column; gap: 8px;
}


/* フォールバック注記 (P20: チャートセクション内、白色維持) */
.fp-scope-note {
  margin-top: 6px; font-size: 11px; color: #ffffff; font-style: italic;
}

/* 出典表示 (P20: チャートセクション最下部、白色維持) */
.fp-source-credit { margin-top: 2px; font-size: 9px; color: #ffffff; opacity: 0.7; }