/* Japan Monitor - カスタムCSS (opioid-epidemic inspired teal/navy theme) */

/* 全体背景 */
body, #_dash-app-content, .dash-loading-callback {
    background-color: #131722 !important;
    color: #c8d8e8;
}

/* 地図コンテナの高さを確保 */
#map-container {
    height: calc(100vh - 56px);
    min-height: 500px;
    border-radius: 8px;
    overflow: hidden;
}

/* leaflet地図の背景をダークに */
.leaflet-container {
    background: #131722;
}

/* ─── Leaflet コントロール: コンパクト化 ─── */
.leaflet-control-attribution {
    font-size: 9px !important;
    padding: 1px 5px !important;
    background: rgba(19, 23, 34, 0.7) !important;
    color: #6a7a8a !important;
}
.leaflet-control-attribution a {
    color: #6a7a8a !important;
}
.leaflet-control-scale-line {
    font-size: 9px !important;
    padding: 0 4px !important;
    line-height: 16px !important;
    background: rgba(19, 23, 34, 0.7) !important;
    color: #6a7a8a !important;
    border-color: #6a7a8a !important;
}

/* ニュースカード */
.news-card {
    border-left: 3px solid #2cfec1;
    transition: border-color 0.2s;
}
.news-card:hover {
    border-left-color: #2cfec1;
}

/* 財政パネル: ScrollArea がスクロールを管理するため overflow 不要 */
#stats-panel {
    /* デスクトップでは dmc.ScrollArea が制御 / モバイルでは TabsPanel が制御 */
}

/* ScrollArea 内部の table レイアウトを無効化（Plotly チャートの初期幅ずれ防止） */
.mantine-ScrollArea-viewport > div {
    display: block !important;
    min-width: 0 !important;
}

/* ニュースパネル スクロール */
#news-panel {
    overflow-y: auto;
}

/* スクロールバー スタイル（WebKit） */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #1a2535;
}
::-webkit-scrollbar-thumb {
    background: #2a3d5a;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3a5070;
}

/* ヘッダー */
#app-header {
    border-bottom: 1px solid #1e2b3d;
}

/* アクティブタブの下線 */
[data-active] [class*="Tabs-tabSection"],
[class*="Tabs-tab"][data-active]::before,
[class*="Tabs-tab"][data-active] {
    --tabs-color: #2cfec1 !important;
    border-bottom-color: #2cfec1 !important;
    color: #2cfec1 !important;
}

/* リング進捗のラベル */
.ring-label {
    font-size: 11px;
    color: #7a90a8;
    text-align: center;
    margin-top: 4px;
}

/* Dash ローディングスピナーを非表示（地図上で邪魔） */
._dash-loading {
    display: none !important;
}

/* Leaflet インタラクティブ要素のフォーカスリング（クリック時の四角枠）を非表示 */
.leaflet-interactive:focus {
    outline: none;
}

/* ツールチップのダークモード対応 */
.leaflet-tooltip {
    background-color: #1a2535 !important;
    border: 1px solid #2a3d5a !important;
    color: #c8d8e8 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
.leaflet-tooltip::before {
    border-top-color: #2a3d5a !important;
}

/* 外国人比率マーカー ツールチップ（teal系） */
.fg20s-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.fg20s-tooltip::before {
    display: none !important;
}

/* ─────────────────────────────────────────────────────
   外国人比率(20代) スライダー — 右側ハイライト
   classNames prop で各パーツに fg20s-* クラスを付与
   ───────────────────────────────────────────────────── */

/* トラックレール全体 = bright（右側に見える） */
.fg20s-track::before {
    background-color: #2cfec1 !important;
    height: 2px !important;
}

/* bar（左側の fill） = dark（bright レールを上書きして暗くする） */
.fg20s-bar {
    background-color: #2a3d5a !important;
}

/* mark dot デフォルト（右側 = 選択範囲） = bright */
.fg20s-mark {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: #2cfec1 !important;
}

/* 左側の mark dot = タイトルと同色（DOM構造の違いに対応するため3パターン） */
.fg20s-mark-filled .fg20s-mark,
.fg20s-mark.fg20s-mark-filled,
#fg20s-slider [data-filled] .fg20s-mark,
#fg20s-slider [data-filled].fg20s-mark {
    background-color: #e8f0f8 !important;
}

/* mark ラベル デフォルト（右側） = bright */
.fg20s-mark-label {
    color: #2cfec1 !important;
}

/* 左側の mark ラベル = dark */
.fg20s-mark-label.fg20s-mark-label-active {
    color: #2a3d5a !important;
}

/* ─── 初期ローディングオーバーレイ ─── */
#initial-loading {
    position: fixed;
    inset: 0;
    background: #131722;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#initial-loading .il-spinner {
    width: 48px;
    height: 56px;
    border: 3px solid #1e2b3d;
    border-top-color: #2cfec1;
    border-radius: 50%;
    animation: il-spin 0.8s linear infinite;
    margin-bottom: 16px;
}
@keyframes il-spin {
    to { transform: rotate(360deg); }
}
#initial-loading .il-text {
    color: #7a90a8;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* 凡例 */
#map-legend {
    position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 1000;
    background: rgba(13, 23, 34, 0.92);
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #1e2b3d;
    font-size: 12px;
    color: #c8d8e8;
    pointer-events: none;
}

/* ─── PC/モバイル コンポーネント切替 ─── */
.mobile-only { display: none !important; }



/* ─── モバイルシート バックドロップ ─── */
#mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
#mobile-sheet-backdrop.visible {
    display: block;
}

/* ─── ポップアップドラッグハンドル（デスクトップ非表示） ─── */
#sheet-drag-handle {
    display: none;
}

/* ─── モバイルナビゲーション（ボトム固定） ─── */
#mobile-nav {
    display: none; /* デスクトップでは非表示 */
    height: 56px;
    background: #0d1118;
    border-top: 1px solid #1e2b3d;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #7a90a8;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-tab.mobile-nav-active {
    color: #2cfec1;
}

/* モバイルナビ SVG アイコン（CSS mask で color 継承） */
.mobile-nav-icon {
    width: 32px;
    height: 32px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-map   { mask-image: url('/assets/icon_map.svg');   -webkit-mask-image: url('/assets/icon_map.svg'); }
.icon-stats { mask-image: url('/assets/icon_stats.svg'); -webkit-mask-image: url('/assets/icon_stats.svg'); }
.icon-news  { mask-image: url('/assets/icon_news.svg');  -webkit-mask-image: url('/assets/icon_news.svg'); }

/* ─── レスポンシブ: スマートフォン (< 992px) ─── */
@media (max-width: 991px) {

    /* モバイル: ページ全体のスクロールを防止 */
    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* モバイル: 縮尺バーを非表示 */
    .leaflet-control-scale { display: none !important; }

    /* ナビを画面下部に固定表示 */
    #mobile-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9200 !important;
    }

    /* グリッド全体: ヘッダー(56px) + ボトムナビ(56px) + セーフエリア分を差し引く */
    #main-grid {
        height: calc(100dvh - 56px - 56px - env(safe-area-inset-top, 0px)) !important;
        margin-top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    }

    /* 地図コンテナの高さ調整 */
    #map-container {
        height: calc(100dvh - 56px - 56px - env(safe-area-inset-top, 0px)) !important;
        min-height: unset;
        border-radius: 0;
        overflow: hidden !important;
    }

    /* 地図カラム: フル幅表示 */
    #panel-map-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        height: calc(100dvh - 56px - 56px - env(safe-area-inset-top, 0px)) !important;
        overflow: hidden !important;
    }

    /* ニュース・統計カラム: デフォルト非表示、アクティブ時フルスクリーン */
    #panel-news-col,
    #panel-stats-col {
        display: none !important;
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top, 0px)) !important;
        bottom: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        z-index: 8000 !important;
        background: #131722 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* 統計カラム内のラッパー div も高さ制限 */
    #panel-stats-col > div {
        height: calc(100vh - 56px - 56px) !important;
        overflow: hidden !important;
    }

    /* アクティブなパネルを表示 */
    #panel-news-col.mobile-active,
    #panel-stats-col.mobile-active {
        display: block !important;
    }

    /* 統計パネル内: Mantine ScrollArea を無効化 → TabsPanel のネイティブスクロールに委譲 */
    #panel-stats-col .mantine-ScrollArea-root,
    #panel-stats-col .mantine-ScrollArea-root * {
        overflow: hidden !important;
        max-height: none !important;
    }
    #panel-stats-col .mantine-ScrollArea-root {
        height: auto !important;
    }
    #panel-stats-col .mantine-ScrollArea-viewport {
        height: auto !important;
    }
    #panel-stats-col .mantine-ScrollArea-viewport > div {
        display: block !important;
        min-width: 0 !important;
    }
    #panel-stats-col .mantine-ScrollArea-scrollbar {
        display: none !important;
    }
    /* Tabs コンテナと各パネルの高さ・スクロール */
    #stats-tabs {
        height: calc(100vh - 56px - 56px - 72px) !important;
        overflow: hidden !important;
    }
    #stats-tabs .mantine-Tabs-panel {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 56px - 56px - 72px - 36px) !important;
        padding-bottom: 60px !important;
    }

    /* ニュースパネル内のスクロールエリア */
    #news-panel {
        max-height: calc(100vh - 56px - 56px) !important;
        overflow-y: auto !important;
    }

    /* ポップアップ → モバイルボトムシートに変換
       display: flex で固定ヘッダー + スクロールコンテンツ */
    #map-pyramid-popup {
        display: flex !important;
        flex-direction: column !important;
        pointer-events: none;        /* 閉じている間はイベントを通さない */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 56px !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(75vh - 56px) !important;
        border-radius: 16px 16px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        z-index: 10001 !important;
        overflow: hidden !important;
        transform: translateY(calc(100% + 56px));
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #map-pyramid-popup.sheet-open {
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* ドラッグハンドル（pill形状） */
    #sheet-drag-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 28px;
        cursor: grab;
        flex-shrink: 0;
        touch-action: none;
    }
    #sheet-drag-handle::before {
        content: '';
        width: 40px;
        height: 4px;
        background: #2a3d5a;
        border-radius: 2px;
    }

    /* marker_strip を固定表示（ヘッダー直下） */
    #fg20s-strip {
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9050 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 地図表示オプションをマーカーストリップの下に配置 */
    #indicator-overlay {
        top: calc(110px + env(safe-area-inset-top, 0px)) !important;
    }

    /* 地図オプション内部のスクロール領域をボトムナビに重ならないように */
    #indicator-overlay {
        max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - 56px - 20px) !important;
    }

    /* ヘッダーを固定表示（上部に余白追加） */
    #app-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9100 !important;
        padding-top: 6px !important;
        height: 62px !important;
    }

    /* ヘッダーサブタイトルをスマホで非表示 */
    #app-header .mantine-Text-root[c="dimmed"]:not(#last-updated) {
        display: none;
    }

    /* モバイル: Plotly チャートを静的表示（タッチ操作無効・スクロール透過） */
    #panel-stats-col .js-plotly-plot,
    #panel-stats-col .js-plotly-plot *,
    #map-pyramid-popup .js-plotly-plot,
    #map-pyramid-popup .js-plotly-plot * {
        pointer-events: none !important;
    }

    /* PC/モバイル コンポーネント切替 */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}