/* DMS 工具專屬樣式 — 六點 → 五點（DJI 解禁申請），2026-09-22
 *
 * 為什麼獨立成檔而不是加進 style.css：
 *   style.css 全站共用，改它就得把每一頁的 <link ?v=> 一起換掉並手動上傳
 *   （本站是 cPanel 手動部署）。這批樣式只有 dms.html 用得到，獨立成檔可以
 *   把這次部署收斂成「dms.html + dms.css + geo.js + dms.js + sw.js」。
 *   若日後有第二頁要用，再依 CLAUDE.md 規則搬進共用樣式表。
 *
 * 顏色/間距/圓角一律取 tokens.css 的 token，不寫死 hex/rgba。
 */
/* =========================================
   7b. DMS 六點 → 五點（DJI 解禁申請）
   ========================================= */
.dji-section {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--hairline);
}
/* 地圖座標點的配色（2026-09-23）。
 * 藍＝全站的空域藍 --zone-blue（tokens.css，2026-10-26 升為全站 token；
 *   原本這裡寫死 #4DA6FF，與 airspace／ops／aerial-pricing 各抄一份）。
 * 黃框＝品牌主色 --primary。不用 --status-warn 有兩個理由：它是狀態色（代表警示，
 *   拿來當裝飾外框會稀釋訊號），且在藍底上對比只有 1.42:1、框線會糊掉
 *   （--primary 為 2.19:1）。
 * dms.js 用 getComputedStyle 讀 --map-point-fill／--map-point-stroke 餵給 Leaflet
 * （SVG 屬性讀不到 var()），custom property 的 var() 在計算值就已展開，讀到的仍是 #4DA6FF。 */
:root {
    --map-point-fill: var(--zone-blue);
    --map-point-stroke: var(--primary);
}

.dji-section > h3 { margin-bottom: var(--space-2); }
.dji-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    cursor: pointer;
    color: var(--text-white);
    font-weight: 700;
}
.dji-switch input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.dji-hint {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: 0.875em;
    line-height: 1.6;
}
.dji-hint strong { color: var(--primary); }

/* 工具列：模式分段鈕 ＋ 刪除／復原／重設 */
.dji-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-2) 0 var(--space-1);
}
.dji-modeswitch {
    display: inline-flex;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-field);
    background: var(--field-bg);
    overflow: hidden;
}
.dji-seg {
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--text-white-80);
    font-size: 0.9375em;
    cursor: pointer;
}
.dji-seg + .dji-seg { border-left: 1px solid var(--hairline); }
.dji-seg.is-active { background: var(--primary); color: var(--on-accent); font-weight: 700; }
.dji-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 頂點標記。視覺圓點 18px，外圈透明補到 32px 讓手機點得到（命中範圍 ≥ 32px）。
 * 基準樣式與 eaip-map/assets/css/style.css 的 .vertex-marker 一致。 */
/* 選擇器刻意帶上 .leaflet-marker-icon（0,2,0）而不是只寫 .vertex-marker（0,1,0）：
 * leaflet.css 有 `.leaflet-marker-icon, .leaflet-marker-shadow { display: block; }`，
 * 與單一 class 的 .vertex-marker 同優先級，誰後載入誰贏。
 * dms.html 的 leaflet.css 載在 dms.css 之後 → block 覆蓋 flex → 置中失效 →
 * 框內 20px 圓點貼到 32×32 框左上角，中心由 16,16 變 10,10，畫面上偏 −6,−6
 *（2026-09-24 實測：六個頂點一致偏移，外框錨點與座標都是對的，只有畫出來的圓偏）。
 * 提高優先級後不論 <link> 順序都贏。**不要改回只寫 .vertex-marker。** */
.leaflet-marker-icon.vertex-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.vertex-marker:active { cursor: grabbing; }
.vertex-marker span {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-accent);
    border: 2px solid var(--text-white);
    font-size: 10px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--glass-shadow);
    transition: transform 0.12s, background 0.12s;
}
.vertex-marker.is-selected span {
    background: var(--accent);
    transform: scale(1.35);
}

/* 已刪除頂點的原位（2026-10-26 起帶編號）：紅色虛線圈＋刪除線編號，點一下還原。
 * 同 .vertex-marker 的理由帶上 .leaflet-marker-icon 提高優先級。
 * 編號用白字而非紅字：紅字 #e74c3c 在深底上只有約 3.6:1，不到資訊文字的 4.5:1。 */
.leaflet-marker-icon.vertex-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vertex-ghost span {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px dashed var(--status-danger);
    background: var(--bar-glass-bg);
    color: var(--text-white);
    font-size: 10px; font-weight: 700; line-height: 1;
    text-decoration: line-through;
    display: flex; align-items: center; justify-content: center;
}

/* 必保留點跑到編輯後的範圍外 */
.dji-req-list li.is-outside { border-color: var(--status-danger); }
.dji-req-warn {
    color: var(--status-danger);
    font-size: 0.75em;
    font-weight: 700;
    flex: none;
}
.dji-stat.is-warn { border-color: var(--status-warn); color: var(--status-warn); }
.dji-stat.is-warn strong { color: var(--status-warn); }

.dji-req-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
.dji-btn {
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--on-accent);
    font-size: 0.875em;
    font-weight: 700;
    cursor: pointer;
}
.dji-btn-ghost { background: transparent; border-color: var(--hairline); color: var(--text-white-80); }
.dji-req-tip { color: var(--text-secondary); font-size: 0.8125em; }

.dji-req-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.dji-req-list li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
}
.dji-req-list code { color: var(--text-white); font-size: 0.875em; flex: 1; }
.dji-req-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.75em;
    font-weight: 700;
    flex: none;
}
.dji-req-del {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.125em;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.dji-req-del:hover { color: var(--status-danger); }
.dji-req-empty { color: var(--text-secondary); font-size: 0.875em; border: none !important; background: none !important; }

.dji-result { margin-top: var(--space-3); }
.dji-summary { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.dji-stat {
    padding: 6px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    color: var(--text-white-80);
    font-size: 0.875em;
}
.dji-stat strong { color: var(--primary); }

/* 手機上讓表格橫向捲動（.table-responsive 負責），而不是把「座標點」擠成一字一行 */
.dji-result table th,
.dji-result table td { white-space: nowrap; }
/* DJI 表格的複製鈕：Bootstrap 的 btn-outline-secondary 在深底上幾乎看不見。
 * style.css 已為 #results-table-body 做過同樣的覆蓋，這裡沿用同一組值。 */
#dji-result .btn-outline-secondary {
    border-color: var(--text-secondary) !important;
    color: var(--text-white) !important;
    transition: all 0.2s;
}
#dji-result .btn-outline-secondary:hover {
    border-color: var(--text-white) !important;
    background: var(--glass-bg) !important;
}

/* =========================================
   DJI 批次匯入檔（2026-10-26）
   ========================================= */
/* 「編輯」鈕會把地圖捲到頂：讓開 56px 的固定 app-header */
#map-container { scroll-margin-top: calc(56px + var(--space-2)); }

.dji-editing {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--text-white-80);
}
.dji-editing strong { color: var(--primary); overflow-wrap: anywhere; }

.dji-export-head { max-width: 360px; margin: var(--space-2) 0; }
.dji-all { margin-bottom: var(--space-1); }

.dji-zone-list { list-style: none; margin: 0; padding: 0; }
.dji-zone {
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
}
.dji-zone.is-active { border-color: var(--primary); }
.dji-zone-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}
.dji-zone-pick {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    color: var(--text-white);
    cursor: pointer;
}
.dji-zone-pick input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; }
.dji-zone-pick input:disabled { cursor: not-allowed; opacity: 0.4; }
.dji-zone-meta { color: var(--text-secondary); font-size: 0.875em; }
.dji-zone-head .dji-modeswitch { margin-left: auto; }
.dji-zone-note {
    margin: var(--space-1) 0 0;
    color: var(--status-warn);
    font-size: 0.8125em;
    line-height: 1.6;
}
.dji-zone-note.is-bad { color: var(--status-danger); }

/* 一筆＝匯入檔裡的一列 */
/* 可換行：手機上 .dms-container 兩側各有 50px 內距，一列只剩約 200px，
 * 縮圖＋文字＋按鈕擠一行時文字欄會被壓成一字寬。換行後按鈕掉到下一行靠右。 */
.dji-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}
.dji-row.is-current { background: var(--field-bg); }
.dji-row-info { flex: 1 1 96px; min-width: 0; }
.dji-row-name { color: var(--text-white); font-weight: 700; overflow-wrap: anywhere; }
.dji-row-tag {
    display: inline-block;
    margin-right: var(--space-1);
    padding: 0 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--text-white-80);
    font-size: 0.75em;
    font-weight: 400;
}
.dji-row-state { margin-top: 2px; color: var(--text-secondary); font-size: 0.8125em; }
.dji-row-state.is-warn { color: var(--status-warn); }
.dji-row .dji-btn { flex: none; margin-left: auto; }

/* 縮圖：虛線＝原空域、實心＝這一筆、紅圈＋刪除線編號＝刪掉的點 */
.dji-thumb {
    width: 96px; height: 96px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--field-bg);
}
.dji-thumb-src { fill: none; stroke: var(--text-white-80); stroke-width: 1.2; stroke-dasharray: 3 3; }
.dji-thumb-keep { fill: var(--primary); fill-opacity: 0.22; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.dji-thumb-pt { fill: var(--primary); }
.dji-thumb-drop { fill: var(--status-danger); fill-opacity: 0.3; stroke: var(--status-danger); stroke-width: 1.6; }
.dji-thumb-num {
    fill: var(--text-white);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}
.dji-thumb-num.is-drop { text-decoration: line-through; }
@media (max-width: 575.98px) {
    .dji-thumb { width: 72px; height: 72px; }
}

.dji-export-sum { margin: 0 0 var(--space-1); color: var(--text-white-80); font-size: 0.875em; }
.dji-export-sum.is-warn { color: var(--status-warn); }
.dji-export-btn { width: 100%; margin-top: var(--space-2); border-radius: var(--radius-field); }
.dji-export-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================
   NOTAM 編號帶入（2026-09-24）
   搜尋框本體用共用元件 .search-inner（內嵌式，不套 #search-bar —— 那是 position:fixed
   的地圖浮動列，卡片式頁面不適用。searchbar.css:17 已記載內嵌用法）。
   ========================================= */
.notam-src {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline);
}
.notam-src .section-title { margin-bottom: var(--space-2); }

.notam-summary { margin-top: var(--space-2); }
.notam-chip {
    display: inline-block;
    padding: 5px 11px;
    margin: 0 6px 6px 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    color: var(--text-white-80);
    font-size: 0.8125em;
}
.notam-chip strong { color: var(--primary); }
.notam-inset-note { color: var(--primary); font-weight: 700; }
.notam-precision {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.75em;
    line-height: 1.6;
}

/* 內縮勾選框 */
.notam-inset {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    cursor: pointer;
}
.notam-inset input {
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}
.notam-inset input:disabled { cursor: not-allowed; opacity: 0.4; }
.notam-inset span { display: block; }
.notam-inset strong {
    display: block;
    color: var(--text-white);
    font-size: 0.9375em;
}
.notam-inset em {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.8125em;
    font-style: normal;
    line-height: 1.6;
}

/* =========================================
   原 dms.html 標記裡的 style=""（2026-10-26 收斂）
   ========================================= */
/* 初始隱藏，之後由 dms.js 以 el.style.display 切換。
 * 刻意不用 Bootstrap 的 .d-none 或 [hidden]：兩者都是 !important，JS 設的行內 display 蓋不掉。
 * dms.js 一律寫入明確的 'block'／'flex'／'none'，不會用 '' 去清除，所以 class 版與原 inline 版行為相同。 */
.dms-initially-hidden { display: none; }
/* 「開始轉換」鈕：蓋掉 .default-btn-one 的膠囊圓角與上緣（style.css 先載入，這裡同級較晚者勝） */
.dms-convert-btn { width: 100%; border-radius: var(--radius-field); margin-top: 20px; }
.dms-zone-selector { margin-top: var(--space-2); }
/* 地圖預覽容器（Leaflet 要求容器有明確高度） */
.dms-map { height: 400px; width: 100%; border-radius: var(--radius-field); }
/* 頁尾 Instagram 圖示（其他頁用預設大小；dms 一直是 24px） */
.dms-footer-icon { font-size: 24px; color: var(--text-white); }