﻿/* = = = = = = 全域遮罩  = = = = = = */
#mapOverlay {
    position: absolute; /* 關鍵：絕對定位，不遮 MasterPage */
    top: 0;
    left: 0;
    width: 100%; /* 填滿父容器寬度 */
    height: 100%; /* 填滿父容器高度 */
    background-color: rgba(0, 0, 0, 0.6); /* 您偏好的透明黑 */
    z-index: 2000; /* 確保在地圖之上，但低於 MasterPage 的 z-index */
    cursor: wait;
    /* 置中邏輯 */
    justify-content: center;
    /*align-items: center;*/
}
    /* 定義一個顯示用的 Class */
    #mapOverlay.hide {
        display: none !important;
    }

/* 確保內容容器有定位基準，這裡要填入你 .aspx 渲染出來的最外層 ID */
#mainContentArea {
    position: relative;
}

.loading-box p {
    text-align: center; /* 內部的文字跟圖也要置中 */
    color: #ffffff !important; /* 文字顏色設為白色，在黑背景才看得見 */
    font-size: 1.2rem; /* 字體稍微大一點點 */
    font-weight: bold;
    /*margin-top: 10px;*/ /* 增加一點點與 Spinner 的距離 */
    /* 往下移動的關鍵：增加頂部間距 */
    /* 您可以根據需求調整 50px 這個數值，越大就越往下 */
    padding-top: 200px;
}

.loading-box {
    text-align: center;
    padding-top: 200px;
}

/* 簡單的旋轉動畫 (選配，無障礙審查建議有視覺動態) */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin: 0 auto 15px; /* 置中並與文字留間距 */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* = = = = = = 地圖  = = = = = = */

/* 讓地圖上所有的圓點 marker 維持手掌樣式 */
.leaflet-interactive {
    cursor: grab !important;
}


/* 讓行政區邊界永遠處於較低的 z-index */
.district-boundary {
    z-index: 100 !important;
}
/* 讓你的校園點位處於較高的 z-index */
.leaflet-interactive {
    z-index: 500 !important;
}

/* 1. 整個 Popup 外框 */
.custom-popup .leaflet-popup-content-wrapper {
    background: #ffffff;
    color: #333;
    border-radius: 4px;
    padding: 5px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4); /* 增加陰影讓它在圖資上更顯眼 */
    /*border: 1px solid #ccc;*/
}

/* 2. 箭頭樣式 */
.custom-popup .leaflet-popup-tip {
    background: #ffffff;
}

/* 3. 內容區域設定 (最重要) */
.custom-popup .leaflet-popup-content {
    margin: 1rem;
    font-size: 14px;
    font-family: "Microsoft JhengHei", sans-serif; /* 微軟正黑體 */
    /* 強制處理捲軸樣式 */
    overflow-y: auto !important;
}


    /* 4. 優化捲軸外觀 (Webkit 瀏覽器) */
    .custom-popup .leaflet-popup-content::-webkit-scrollbar {
        width: 6px;
    }

    .custom-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
        background-color: #bbb;
        border-radius: 10px;
    }




/*讓點位先畫邊框再畫填滿 */
.leaflet-interactive {
    paint-order: stroke;
}

