/* ============================================================
   Monthly Forecast
   1か月降水予報
   ============================================================ */


/* ============================================================
   全体
   ============================================================ */

#rain-forecast-container {
    position: relative;
    width: 100%;
}


/* ============================================================
   地図
   ============================================================ */

#monthly-map {
    width: 100%;
    height: 700px;
}


/* ============================================================
   コントロール
   ============================================================ */

#monthly-control {
    position: absolute;

    top: 10px;
    left: 60px;

    z-index: 500;

    background: rgba(230,230,230,0.95);

    padding: 4px 6px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 12px;

    line-height: 1.1;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.2);
}


/* ============================================================
   コントロール ボタン
   ============================================================ */

#monthly-control button {

    padding: 2px 6px;

    font-size: 11px;

    line-height: 1.1;

    cursor: pointer;
}


/* 再生ボタン */

#monthly-playBtn {

    padding: 2px 10px;

    font-weight: bold;
}


/* ============================================================
   アンサンブルスライダー
   ============================================================ */

.monthly-ensemble-control {

    display: flex;

    align-items: center;

    gap: 3px;

    white-space: nowrap;
}


#monthly-prevEnBtn,
#monthly-nextEnBtn {

    width: 24px;

    height: 24px;

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

}


#monthly-enLabel {

    display: inline-block;

    min-width: 135px;

    text-align: center;

    font-size: 12px;

    white-space: nowrap;

}

/* ============================================================
   マップ内 1か月予報案内
   ============================================================ */

#monthly-precInfo {

    position: absolute;

    top: 60px;
    left: 30px;

    z-index: 1000;

    background: rgba(255,255,255,0.95);

    padding: 10px 15px;

    border-radius: 5px;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.3);

    font-size: 12px;

    line-height: 1.6;

    min-width: 250px;

}


#monthly-precTitle {

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 6px;

}


/* ============================================================
   ラベル
   ============================================================ */

#monthly-control span {

    line-height: 1.1;
}


#monthly-timeLabel {

    font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 12px;

    font-weight: bold;

    color: #333333;

    white-space: nowrap;
}


#monthly-enLabel {

    font-size: 12px;

    white-space: nowrap;
}


/* ============================================================
   区切り
   ============================================================ */

.control-separator {

    border-left: 1px solid #ccc;

    margin: 0 5px;

    height: 20px;
}


/* ============================================================
   気象情報パネル
   ============================================================ */

#precInfo {

    position: absolute;

    top: 60px;
    left: 30px;

    z-index: 1000;

    background: rgba(255,255,255,0.95);

    padding: 10px 15px;

    border-radius: 5px;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.3);

    font-size: 10px;

    line-height: 1.6;

    min-width: 250px;
}


#precTitle {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 8px;
}


/* ============================================================
   免責事項
   ============================================================ */

#disclaimer {

    position: absolute;

    bottom: 10px;
    right: 10px;

    z-index: 1000;

    background: rgba(255,255,255,0.9);

    padding: 4px 6px;

    font-size: 10px;

    line-height: 1.1;

    max-width: 400px;
}


/* ============================================================
   カラーバー
   ============================================================ */

.legend {

    background: rgba(255,255,255,0.95);

    padding: 10px;

    border-radius: 5px;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.3);

    font-size: 12px;

    line-height: 1.0;
}


/* ============================================================
   Leaflet 凡例位置
   ============================================================ */

.leaflet-bottom.leaflet-right {

    bottom: 20px;

    right: 10px;

    margin-bottom: 80px;
}


/* ============================================================
   テスト版表示
   ============================================================ */

.test-banner {

    position: absolute;

    top: 140px;
    left: 50px;

    z-index: 1000;

    background: rgba(220,0,0,0.9);

    color: white;

    font-size: 18px;

    font-weight: bold;

    padding: 8px 16px;

    border-radius: 5px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.3);

    pointer-events: none;
}


/* ============================================================
   TEST ウォーターマーク
   ============================================================ */

.test-watermark {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-30deg);

    font-size: 90px;

    font-weight: bold;

    color: rgba(255,0,0,0.15);

    z-index: 999;

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   1か月予報 ポップアップ
   ============================================================ */

.monthly-popup {

    font-size: 12px;

    line-height: 1.5;

    min-width: 260px;
}

/* ポップアップの内容が長い場合は内部スクロール */
.leaflet-popup-content {

    max-height: 60vh;

    overflow-y: auto;

    overflow-x: hidden;
}



.monthly-popup-title {

    font-size: 16px;

    font-weight: bold;

    margin-bottom: 6px;

    border-bottom: 1px solid #ccc;

    padding-bottom: 4px;
}


.monthly-popup-section {

    margin-top: 8px;

    margin-bottom: 4px;

    font-weight: bold;
}


.monthly-popup table {

    width: 100%;

    border-collapse: collapse;
}


.monthly-popup th,
.monthly-popup td {

    padding: 2px 4px;

    border-bottom: 1px solid #eee;

    text-align: right;
}


.monthly-popup th:first-child,
.monthly-popup td:first-child {

    text-align: left;
}


/* ============================================================
   類似年
   ============================================================ */

.monthly-analog {

    margin-top: 4px;
}


.monthly-analog-row {

    display: flex;

    justify-content: space-between;

    gap: 10px;
}

/* Leafletのポップアップを操作パネルより前面に表示 */
.leaflet-popup-pane {
    z-index: 2000 !important;
}



/* ============================================================
 *    タブレット対応
 *       481px ～ 1024px
 *          ============================================================ */

@media screen and (min-width: 481px) and (max-width: 1024px) {


    /* --------------------------------------------------------
 *        操作パネル
 *               -------------------------------------------------------- */

    #monthly-control {
        position: absolute !important;

        top: 8px !important;
        left: 60px !important;
        right: 8px !important;

        width: auto !important;
        max-width: none !important;

        box-sizing: border-box !important;

        padding: 4px 6px !important;

        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        overflow: hidden !important;

        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
 *        スライダー
 *               -------------------------------------------------------- */

    #monthly-control input[type="range"] {

        width: auto !important;

        min-width: 100px !important;
        max-width: 300px !important;

        flex: 1 1 180px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
 *        ボタン
 *               -------------------------------------------------------- */

    #monthly-control button {

        flex: 0 0 auto !important;

        padding: 3px 6px !important;

        font-size: 10px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
 *        時刻・メンバー表示
 *               -------------------------------------------------------- */

    #monthly-timeLabel,
    #monthly-enLabel {

        flex: 0 1 auto !important;

        min-width: 0 !important;

        max-width: 90px !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;

        font-size: 9px !important;
    }
}

/* ============================================================
 *    スマートフォン対応
 *       ============================================================ */

@media screen and (max-width: 480px) {


    /* --------------------------------------------------------
 *        地図
 *               -------------------------------------------------------- */

    #monthly-map {
        height: 600px;
    }


    /* --------------------------------------------------------
 *        Leaflet ズームボタン
 *               -------------------------------------------------------- */

    .leaflet-top.leaflet-left {
        top: 0 !important;
        left: 0 !important;
    }

    .leaflet-control-zoom {
        margin-top: 7px !important;
        margin-left: 7px !important;
    }


    /* --------------------------------------------------------
 *        操作パネル
 *               画面内に必ず収める
 *                      -------------------------------------------------------- */

    #control {
        position: absolute !important;

        top: 8px !important;
        left: 42px !important;
        right: 5px !important;

        width: auto !important;
        max-width: none !important;

        box-sizing: border-box !important;

        padding: 3px 4px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 2px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
 *        スライダー
 *               パネル内で残った幅を使う
 *                      -------------------------------------------------------- */

    #control input[type="range"] {
        width: auto !important;

        min-width: 50px !important;
        max-width: 90px !important;

        flex: 1 1 70px !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
 *        操作ボタン
 *               -------------------------------------------------------- */

    #control button {
        flex: 0 0 auto !important;

        width: auto !important;

        padding: 2px 4px !important;

        font-size: 9px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
 *        時刻・メンバー表示
 *               -------------------------------------------------------- */

    #timeLabel,
    #enLabel {
        flex: 0 1 auto !important;

        min-width: 0 !important;
        max-width: 65px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 8px !important;
    }


/* ------------------------------------------------------------
 *    1か月予報案内パネル
 *       ------------------------------------------------------------ */

#monthly-precInfo {
    position: absolute !important;

    top: 85px !important;
    left: 8px !important;
    right: 80px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    padding: 7px 10px !important;

    font-size: 9px !important;
    line-height: 1.3 !important;

    z-index: 1000 !important;
}


/* タイトル */

#monthly-precTitle {
    font-size: 14px !important;
    line-height: 1.25 !important;

    margin-bottom: 4px !important;
}


/* ------------------------------------------------------------
 *    気象情報パネル
 *       ------------------------------------------------------------ */

#precInfo {
    position: absolute !important;

    top: 85px !important;
    left: 8px !important;
    right: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    padding: 7px 10px !important;

    font-size: 8px !important;
    line-height: 1.2 !important;

    z-index: 1000 !important;
}


#precTitle {
    font-size: 14px !important;
    line-height: 1.25 !important;

    margin-bottom: 4px !important;
}


/* ------------------------------------------------------------
 *    予報停止メッセージ
 *       ------------------------------------------------------------ */

.forecast-stop-message,
#forecast-stop-message,
.update-stop-message {

    position: absolute !important;

    top: 125px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: calc(100% - 30px) !important;

    min-width: 0 !important;
    max-width: 300px !important;

    box-sizing: border-box !important;

    padding: 8px 10px !important;

    font-size: 10px !important;
    line-height: 1.35 !important;

    z-index: 2000 !important;
}

    /* --------------------------------------------------------
 *        カラーバー
 *               -------------------------------------------------------- */

    .legend {
        font-size: 8px;
        padding: 7px 9px;
    }


    /* --------------------------------------------------------
 *        免責事項
 *               -------------------------------------------------------- */

    #disclaimer {
        font-size: 6px;
        line-height: 1.25;

        padding: 3px 5px;

        max-width: 250px;
    }


    /* --------------------------------------------------------
 *        TEST表示
 *               -------------------------------------------------------- */

    .test-banner {
        top: 125px;
        left: 20px;

        font-size: 14px;
        padding: 6px 10px;
    }

    .test-watermark {
        font-size: 55px;
    }

    #monthly-control {
        position: absolute !important;

        top: 5px !important;
        left: 45px !important;
        right: 5px !important;

        width: auto !important;
        max-width: none !important;

        box-sizing: border-box !important;

        padding: 3px 4px !important;

        display: flex !important;
        align-items: center !important;

        gap: 2px !important;

        /* 横スクロールさせない */
        overflow: hidden !important;

        white-space: nowrap !important;
    }


    /* スライダー */
    #monthly-control input[type="range"] {

        width: auto !important;

        min-width: 50px !important;
        max-width: 100px !important;

        flex: 1 1 70px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* ボタン */
    #monthly-control button {

        flex: 0 0 auto !important;

        padding: 2px 4px !important;

        font-size: 9px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* 時刻表示 */
    #monthly-timeLabel,
    #monthly-enLabel {

        min-width: 0 !important;
        max-width: 65px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        white-space: nowrap !important;

        font-size: 8px !important;

        flex: 0 1 auto !important;
    }
}