/* ==========================================================================
   FloorMap CMS - カスタマイズ用CSS（styles.parts.css）
   --------------------------------------------------------------------------
   【使い方】
   1) まず「0) テーマ変数」の :root ブロックを編集する
      → 色・透明度・線の太さなどをここで一括管理

   2) 変数だけでは対応できない細かい調整は
      各セクションのコメントを参考に selector を追加する

   3) Tailwindのクラスが優先される場合は !important を付ける

   【背景画像の指定例】
   #root aside {
     background-image: url('/uploads/settings/sidebar-bg.png') !important;
     background-size: cover;
   }

   【このファイルで変えられる主な項目】
   - 背景色・背景画像
   - 文字色
   - ボーダー色・太さ
   - 透明度（opacity / rgba）
   - 角丸
   - 影
   ========================================================================== */


/* --------------------------------------------------------------------------
   0) テーマ変数（ここを変えるのが基本）
   -------------------------------------------------------------------------- */
:root {

  /* ── 全体 ── */
  --fm-bg-app:        #f8fafc;   /* アプリ全体の背景色          slate-50  */
  --fm-text:          #0f172a;   /* 基本テキスト色              slate-900 */
  --fm-text-muted:    #64748b;   /* 補助テキスト（件数など）    slate-500 */
  --fm-border:        #e2e8f0;   /* 汎用ボーダー色              slate-200 */
  --fm-border-width:  1px;       /* 汎用ボーダー太さ */

  /* ── アクセントカラー（青） ── */
  --fm-accent:        #2563eb;   /* blue-600 : リンク・ボタン・選択色 */
  --fm-accent-soft:   rgba(37, 99, 235, 0.10); /* 薄い青（タグhover背景など） */

  /* ── ヘッダー ── */
  --fm-bg-header:     #ffffff;   /* ヘッダー背景色 */
  --fm-header-shadow: 0 1px 3px rgba(0,0,0,0.08); /* ヘッダー下影 */

  /* ── フロアタブ ── */
  --fm-tab-bg:          #f1f5f9; /* 非アクティブタブ背景  slate-100 */
  --fm-tab-bg-active:   #ffffff; /* アクティブタブ背景    white     */
  --fm-tab-text:        #475569; /* タブ文字色            slate-600 */
  --fm-tab-text-active: #2563eb; /* アクティブタブ文字色  blue-600  */
  --fm-tab-border-active: #2563eb; /* アクティブタブ下線色 */

  /* ── サイドバー ── */
  --fm-bg-sidebar:     #ffffff;  /* サイドバー背景色 */
  --fm-sidebar-border: #e2e8f0;  /* サイドバー右ボーダー色  slate-200 */

  /* ── フィルタカード（絞り込みエリア） ── */
  --fm-bg-filters:        #f1f5f9; /* フィルタカード背景  slate-100 */
  --fm-bg-filters-border: #e2e8f0; /* フィルタカード枠線  slate-200 */

  /* ── リスト件数ヘッダー ── */
  --fm-bg-list-header:  #ffffff;   /* sticky帯の背景 */

  /* ── リストアイテム（SidebarPointItem） ── */
  --fm-bg-list-item:        #ffffff; /* 通常背景 */
  --fm-bg-list-item-hover:  #f8fafc; /* hover時背景   slate-50  */
  --fm-bg-list-item-active: #eff6ff; /* 選択中背景    blue-50   */
  --fm-border-list-item:    #f1f5f9; /* アイテム枠線  slate-100 */
  --fm-border-list-active:  #93c5fd; /* 選択中枠線    blue-300  */

  /* ── マップエリア ── */
  --fm-bg-main:          #f8fafc;  /* マップ背景（画像の外側余白）  slate-50 */
  --fm-bg-map-frame:     #ffffff;  /* マップ画像を囲む白枠の背景 */
  --fm-map-frame-border: #e2e8f0;  /* マップ枠のリング線色  slate-200 */
  --fm-map-frame-shadow: 0 20px 60px rgba(15,23,42,0.12); /* マップ枠の影 */

  /* ── ピン（MapPin）通常 ── */
  --fm-pin-bg:     #ffffff; /* ピン背景    white     */
  --fm-pin-border: #e2e8f0; /* ピン枠線    slate-200 */
  --fm-pin-icon:   #2563eb; /* ピンアイコン blue-600 */

  /* ── ピン（MapPin）アクティブ・hover時 ── */
  --fm-pin-bg-active:     #facc15; /* アクティブピン背景  yellow-400 */
  --fm-pin-border-active: #eab308; /* アクティブピン枠線  yellow-500 */
  --fm-pin-icon-active:   #ffffff; /* アクティブピンアイコン */

  /* ── 吹き出し（ピンhover時のポップアップ） ── */
  --fm-bubble-bg:        #ffffff;  /* 吹き出し背景色 */
  --fm-bubble-border:    #cbd5e1;  /* 吹き出し枠・しっぽ色  slate-300 */
  --fm-bubble-text:      #0f172a;  /* 吹き出し文字色  slate-900 */
  --fm-bubble-shadow:    0 2px 6px rgba(0,0,0,0.18); /* 吹き出し影 */
  --fm-bubble-radius:    12px;     /* 吹き出し角丸 */
  --fm-bubble-max-width: 200px;    /* 吹き出し最大幅 */

  /* ── 詳細パネル（PointDetailPanel）── */
  --fm-panel-bg:     #ffffff;  /* 詳細パネル背景色 */
  --fm-panel-radius: 2.5rem;   /* 詳細パネル右上角丸 */
  --fm-panel-shadow: 0 25px 60px rgba(99,102,241,0.10); /* indigo系の影 */

  /* ── モーダル（Share / AdminLogin / FloorSettings） ── */
  --fm-modal-bg:  #ffffff;           /* モーダルカード背景 */
  --fm-overlay:   rgba(0,0,0,0.40);  /* 画面暗幕（0.0=透明 〜 1.0=完全黒） */
}


/* --------------------------------------------------------------------------
   1) 全体
   -------------------------------------------------------------------------- */
body {
  background: var(--fm-bg-app);
  color: var(--fm-text);
}

#root > div.flex.h-screen {
  background: var(--fm-bg-app) !important;
  color: var(--fm-text) !important;
}


/* --------------------------------------------------------------------------
   2) ヘッダー（header.jsx）
   - <header className="bg-white border-b px-4 py-2 ..."> が対象
   -------------------------------------------------------------------------- */
#root header {
  background:    var(--fm-bg-header) !important;
  border-bottom: var(--fm-border-width) solid var(--fm-border) !important;
  box-shadow:    var(--fm-header-shadow) !important;
}

/* ── 背景画像を使う場合 ──
#root header {
  background-image: url('/uploads/settings/header-bg.png') !important;
  background-size: cover;
  background-position: center;
}
*/


/* --------------------------------------------------------------------------
   3) フロアタブ（floorTabs.jsx）
   - header内 <div className="flex gap-1 ... no-scrollbar"> が対象
   - アクティブタブはTailwindが bg-white text-blue-600 border-b-2 border-blue-600 を付ける
   -------------------------------------------------------------------------- */

/* タブ帯全体 */
#root header .no-scrollbar {
  /* background: transparent; */
}

/* 非アクティブタブ */
#root header .no-scrollbar button {
  /* color: var(--fm-tab-text) !important; */
}

/* アクティブタブ（Tailwindが bg-white text-blue-600 border-blue-600 を付ける） */
#root header .no-scrollbar button.bg-white {
  /* background: var(--fm-tab-bg-active) !important; */
  /* color:      var(--fm-tab-text-active) !important; */
  /* border-bottom-color: var(--fm-tab-border-active) !important; */
}


/* --------------------------------------------------------------------------
   4) サイドバー（sidebarPanel.jsx）
   - <aside className="bg-white border-r flex flex-col ..."> が対象
   -------------------------------------------------------------------------- */
#root aside {
  background:   var(--fm-bg-sidebar) !important;
  border-right: var(--fm-border-width) solid var(--fm-sidebar-border) !important;
}

/* サイドバー内スクロール領域 */
#root aside .custom-scrollbar {
  background: transparent;
}

/* ── 背景画像を使う場合 ──
#root aside {
  background-image: url('/uploads/settings/sidebar-bg.png') !important;
  background-size: cover;
  background-position: center;
}
*/


/* --------------------------------------------------------------------------
   5) フィルタカード（sidebarFilters.jsx）
   - <div className="m-3 p-4 bg-slate-100 border border-slate-200 rounded-2xl shadow-inner">
   -------------------------------------------------------------------------- */
#root aside .custom-scrollbar div.bg-slate-100 {
  background:   var(--fm-bg-filters) !important;
  border-color: var(--fm-bg-filters-border) !important;
}


/* --------------------------------------------------------------------------
   6) リスト件数ヘッダー（sidebarList.jsx）
   - <div className="sticky top-0 bg-white border-b ..."> が対象
   -------------------------------------------------------------------------- */
#root aside div.sticky {
  background:    var(--fm-bg-list-header) !important;
  border-bottom: var(--fm-border-width) solid var(--fm-border) !important;
}


/* --------------------------------------------------------------------------
   7) リストアイテム（sidebar.jsx / SidebarPointItem）
   - <div className="sidebar-item p-3 rounded-xl border ..."> が対象
   - .sidebar-item は明示クラスなので安定して当てられる
   -------------------------------------------------------------------------- */

/* 通常 */
#root .sidebar-item {
  background:   var(--fm-bg-list-item) !important;
  border-color: var(--fm-border-list-item) !important;
}

/* hover */
#root .sidebar-item:hover {
  background:   var(--fm-bg-list-item-hover) !important;
  border-color: var(--fm-border) !important;
}

/* アクティブ（Tailwindが bg-blue-50 border-blue-400 ring-2 ring-blue-100 を付ける） */
#root .sidebar-item.bg-blue-50 {
  background:   var(--fm-bg-list-item-active) !important;
  border-color: var(--fm-border-list-active) !important;
}


/* --------------------------------------------------------------------------
   8) マップエリア（mainPane.jsx）
   - 外枠: <div className="flex-1 flex flex-col bg-slate-50 ...">
   - マップ枠: <div className="bg-white shadow-2xl ring-1 ring-slate-200 ...">
   -------------------------------------------------------------------------- */

/* マップ背景（画像の外側の余白部分） */
#root > div.flex.h-screen > div.flex-1 {
  background: var(--fm-bg-main) !important;
}

/* マップ画像を囲む白枠 */
#root .ring-1.ring-slate-200 {
  background:   var(--fm-bg-map-frame) !important;
  border-color: var(--fm-map-frame-border) !important;
  box-shadow:   var(--fm-map-frame-shadow) !important;
}

/* ── マップ背景に画像を使う場合 ──
#root > div.flex.h-screen > div.flex-1 {
  background-image: url('/uploads/settings/map-bg.png') !important;
  background-size: cover;
  background-position: center;
}
*/


/* --------------------------------------------------------------------------
   9) ピン（map.jsx / MapPin）
   - 外枠: <div id="pin-<id>" class="absolute ...">
   - 丸部分: その直下の <div class="rounded-full shadow-lg border ...">
   -------------------------------------------------------------------------- */

/* ピン全体（位置・サイズを変えたい場合） */
#root div[id^="pin-"] {
  /* 例: ピンを少し大きくする
  transform: translate(-50%, -50%) scale(1.2) !important; */
}

/* 通常ピン（丸） Tailwindが bg-white border-slate-200 を付ける */
#root div[id^="pin-"] > div.bg-white {
  /* background:    var(--fm-pin-bg) !important; */
  /* border-color:  var(--fm-pin-border) !important; */
  /* border-width:  2px !important; */
}

/* アクティブ・hover時ピン（丸） Tailwindが bg-yellow-400 border-yellow-500 を付ける */
#root div[id^="pin-"] > div.bg-yellow-400 {
  /* background:   var(--fm-pin-bg-active) !important; */
  /* border-color: var(--fm-pin-border-active) !important; */
}


/* --------------------------------------------------------------------------
   10) 吹き出し（map.jsx）
   - ピンhover時に出るポップアップ
   - 本体: <div class="relative bg-white border border-slate-300 rounded-xl px-3 py-2">
   - しっぽ（三角形）は inline style のため border-top色はJSを変更する必要あり
   - 影は吹き出しを包む div の filter: drop-shadow で変更可能
   -------------------------------------------------------------------------- */

/* 吹き出し本体 */
#root div[id^="pin-"] .relative.bg-white.border-slate-300 {
  background:    var(--fm-bubble-bg) !important;
  border-color:  var(--fm-bubble-border) !important;
  border-radius: var(--fm-bubble-radius) !important;
  max-width:     var(--fm-bubble-max-width) !important;
}

/* 吹き出し文字 */
#root div[id^="pin-"] .relative.bg-white.border-slate-300 .text-slate-900 {
  color: var(--fm-bubble-text) !important;
}

/* 吹き出し全体の影（しっぽ含む） */
#root div[id^="pin-"] > div.absolute > div.z-50 {
  /* filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)) !important; */
}


/* --------------------------------------------------------------------------
   11) 詳細パネル（panels/pointDetail.jsx）
   - 左下から上にスライドインする固定パネル（暗幕オーバーレイなし）
   - <div class="bg-white rounded-tr-[2.5rem] shadow-2xl w-[400px] h-full ...">
   -------------------------------------------------------------------------- */
#root div.fixed.left-0.bottom-0 > div.bg-white {
  background: var(--fm-panel-bg) !important;
  box-shadow: var(--fm-panel-shadow) !important;
}


/* --------------------------------------------------------------------------
   12) モーダル（share.jsx / adminLogin.jsx / floorSettings.jsx）
   - 暗幕: <div class="fixed inset-0 z-[200] flex ... bg-black/40">
   - カード本体: 暗幕直下の bg-white rounded-2xl shadow-2xl
   -------------------------------------------------------------------------- */

/* 画面暗幕（値を下げると薄くなる。0=透明、1=真っ黒） */
#root .bg-black\/40 {
  background: var(--fm-overlay) !important;
}

/* モーダルカード本体 */
#root .fixed .bg-white.rounded-2xl {
  background: var(--fm-modal-bg) !important;
}


/* --------------------------------------------------------------------------
   13) 補助: アクセントカラーの一括変更
   - :root の --fm-accent を変えた場合、
     Tailwindの青系クラスもここで追随させる
   -------------------------------------------------------------------------- */
#root .text-blue-600 {
  color: var(--fm-accent) !important;
}
#root .bg-blue-600 {
  background: var(--fm-accent) !important;
}
#root .bg-blue-50 {
  background: var(--fm-accent-soft) !important;
}
#root .border-blue-600 {
  border-color: var(--fm-accent) !important;
}


/* ここまで */