/* 
 * hazard2026_step5_style.css
 * ステップ5 断面図パネル (#elevationChart) および関連ボタンの専用スタイル
 */

/* 1. パネルの基本設定（リサイズ・アニメーション・配置） */
#elevationChart {
    display: none; /* 初期は非表示 */
    position: fixed;
    bottom: 80px; /* ボタンの上に配置 */
    left: 10px;
    right: 10px;
    height: 300px; /* 固定高さを確保 */
    background: white;
    z-index: 2100;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: height 0.15s ease-out, width 0.15s ease-out;
    min-height: 40px;
}

/* 堅ろう建物リストのスクロールエリア */
#sturdyBuildingList {
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.sturdy-list-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.sturdy-list-item:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-1px);
}


/* 2. 最小化時のレイアウト制御 */
#elevationChart.minimized {
    height: 42px !important;  /* 強制的にバー表示にする */
    width: 260px !important;  /* 幅を固定 */
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 3. 最小化中も「ヘッダー」だけは表示し続ける */
/* .panel-header は動的生成時に使用される可能性のあるクラス */
#elevationChart.minimized .panel-header,
#elevationChart.minimized .elevation-header {
    display: flex !important;
    visibility: visible !important;
    height: 40px !important;
}

/* 4. 最小化中に隠す要素（グラフ本体、スライダー、情報量） */
#elevationChart.minimized .chart-container,
#elevationChart.minimized .elevation-body,
#elevationChart.minimized #elevationBody,
#elevationChart.minimized #chartWaterLevelSlider,
#elevationChart.minimized #step7TimelineSlider,
#elevationChart.minimized .slider-labels,
#elevationChart.minimized .chart-info {
    display: none !important;
}

/* 5. 最小化・最大化切り替えボタンのデザイン・操作性 */
#minimizeElevationBtn {
    cursor: pointer !important;
    padding: 0 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    color: #334155 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    transition: background 0.2s ease;
}

#minimizeElevationBtn:hover {
    background: #e2e8f0 !important;
}

/* 6. ステップ5で使用される3種のボタンデザイン */
/* ナビゲーションおよび判定時に使用 */

.nav-btn-ideal {
    background: linear-gradient(135deg, #f06292 0%, #ec407a 100%) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-btn-outline {
    background: #ffffff !important;
    color: #ec407a !important;
    border: 2px solid #ec407a !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    width: 100% !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-btn-sub {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* 7. 一次避難場所決定ボタン専用スタイル */
#confirmPrimaryEvacBtn {
    background: #e11d48 !important;
    color: white !important;
    border: none;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(225,29,72,0.3);
    cursor: pointer;
    margin-top: 10px;
}

#confirmPrimaryEvacBtn:hover {
    background: #be123c !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(225,29,72,0.4);
}

#confirmPrimaryEvacBtn:disabled,
#confirmPrimaryEvacBtn.confirmed {
    background: #64748b !important;
    cursor: default;
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

/* 🏆 点滅表示：浸水継続時間を重ねた際の、対象施設マーカーの視覚強調 */
.blink-marker { animation: marker-blink 0.8s infinite alternate !important; }
@keyframes marker-blink {
    from { opacity: 1.0; filter: brightness(1.2) drop-shadow(0 0 8px red); }
    to { opacity: 0.4; filter: brightness(0.8); }
}

/* 🌊 浸水継続時間トグルの際のハイライト */
#btn-toggle-flood-analysis.active {
    background: #ef4444 !important;
    border: 2px solid #991b1b !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5) !important;
}

/* 断面図パネルの初期高さ潰れ防止 */
#elevationChart:not(.minimized) {
    min-height: 280px !important;
}
#elevationChart:not(.minimized) #elevationBody {
    min-height: 240px !important;
}
#elevationChart:not(.minimized) #elevationCanvas {
    min-height: 240px !important;
}