/* ===== 軍營區域地圖 /military/ — DRONESHOT.TW =====
 * 版面同加油站地圖（header＋共用搜尋列＋全頁地圖＋左下資訊面板），沒有篩選列。
 * 色值全走 tokens.css；地圖面的畫法與 popup 樣式在共用 /assets/js/military.js、/assets/css/military.css。 */

:root {
    --header-h: 54px;
    --search-h: 50px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans TC', sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    height: 100vh; overflow: hidden;
}

/* ===== Header ===== */
.app-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--bar-glass-bg);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center;
    padding: 0 var(--space-2); z-index: 1000; gap: 12px;
}
.header-logo img { height: 30px; display: block; }
.header-title { font-size: 15px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-btn {
    background: var(--field-bg); border: none; color: var(--text-white);
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 20px; flex-shrink: 0;
}
.header-btn:hover { background: var(--hairline); }

/* ===== Map ===== */
#map {
    position: fixed;
    top: calc(var(--header-h) + var(--search-h));
    left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* ===== 資訊面板（左下；底部位移由 nav.css 的 .info-panel 規則讓開導覽列）===== */
.info-panel {
    position: fixed;
    left: 12px; bottom: 16px;
    max-width: 360px;
    background: var(--bar-glass-bg);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 10px 14px;
    z-index: 1000;
    font-size: 13px;
}
.info-main { font-weight: 700; }
.info-main.is-error { color: var(--status-danger); }

/* 目前位置 */
.leaflet-marker-icon.mil-me {
    background: var(--primary);
    border: 3px solid var(--bg-dark);
    border-radius: 50%;
}

@media (max-width: 480px) {
    .info-panel { left: 8px; right: 8px; max-width: none; }
}