/* 共用搜尋列 —— 全站唯一的搜尋列樣式
 *
 * 為什麼有這個檔（2026-09-01）：
 *   powerline / airspace / notam / flight-wx / aerial-pricing 各自寫了一套搜尋列，
 *   輸入框高度漂到 38/40/42 三種、圓角 10/12 兩種、按鈕有純色也有漸層、icon 顏色
 *   四個不同 token。統一以 **powerline 的視覺** 為準收斂到這裡，之後改一次全站生效。
 *
 * 用法：
 *   固定式（浮在地圖上，工具頁）
 *     <div id="search-bar">
 *       <div class="search-inner">
 *         <i class='bx bx-search search-icon'></i>
 *         <input type="text" id="…" aria-label="…">
 *         <button class="search-btn">查詢</button>
 *       </div>
 *     </div>
 *   內嵌式（頁面流內，如 aerial-pricing）：只用 .search-inner 那層，不要 #search-bar。
 *   旁邊要掛別的按鈕（flight-wx 的定位鈕）就放在 .search-inner 外面，由該頁自理。
 *
 * 版面高度沿用各頁既有變數：--header-h / --header-height 都吃得到（兩種命名並存，
 * 各工具的 #map top calc 也還在用自己的那個，這裡不強迫改名）。
 */

:root {
    --searchbar-h: 50px;        /* 整條列高（與各頁 --search-h / --search-height 對齊） */
    --searchbar-field-h: 38px;  /* 輸入框高 */
}

/* --- 固定式搜尋列 --- */
#search-bar {
    position: fixed;
    top: var(--header-h, var(--header-height, 54px));
    left: 0;
    right: 0;
    height: var(--searchbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 12px;
    background: var(--bar-glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
    /* 1050：要蓋過 Leaflet 控制項（400–1000），又要低於結果面板與 toast */
    z-index: 1050;
}

/* --- 輸入框（固定式與內嵌式共用） --- */
.search-inner {
    position: relative;      /* 下拉建議（.ds-suggest）以此為定位基準 */
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: var(--searchbar-field-h);
    padding: 0 12px;
    background: var(--field-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-field);
    transition: border-color 0.2s;
}
.search-inner:focus-within { border-color: var(--primary); }

.search-icon {
    flex-shrink: 0;
    margin-right: var(--space-1);
    color: var(--text-secondary);
    font-size: 18px;
}

.search-inner input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-white);
    font-family: inherit;
    font-size: 14px;
}
.search-inner input::placeholder { color: var(--text-secondary); }

.search-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    background: var(--primary);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
.search-btn:hover { opacity: 0.88; }
.search-btn:disabled { cursor: default; opacity: 0.6; }
.search-btn:disabled:hover { opacity: 0.6; }

/* 查詢中：按鈕脈動。防連點是 JS 的事（DSSearch），這裡只負責讓人看得出在跑 */
.search-btn.is-loading { animation: search-pulse 1.1s ease-in-out infinite; }
@keyframes search-pulse { 50% { opacity: 0.4; } }

/* --- 下拉建議（選用；只有傳了 DSSearch.wire({suggest}) 的頁面才會有這個 DOM） ---
 * 定位在 .search-inner 內部 top:100%，寬度自動跟輸入框對齊；搜尋列是 fixed，
 * 這裡就不必自己算視窗座標。色點的實際顏色由各工具自行指定（見 airspace/style.css
 * 的 .tone-red/.tone-yellow/.tone-blue/.tone-purple），本檔只管幾何與排版。 */
.ds-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    right: -1px;
    z-index: 1;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bar-glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-field);
    box-shadow: var(--glass-shadow);
    overscroll-behavior: contain;
}

.ds-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
}
.ds-suggest-item:last-child { border-bottom: none; }
.ds-suggest-item:hover,
.ds-suggest-item.is-active { background: var(--field-bg); }

.ds-suggest-item.is-disabled {
    cursor: default;
    color: var(--text-secondary);
}
.ds-suggest-item.is-disabled:hover { background: none; }

.ds-suggest-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.ds-suggest-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ds-suggest-label {
    color: var(--text-white);
    font-size: 13px;
    line-height: 1.35;
    /* 空域名稱最長 30+ 字（嘉縣121 長庚…綜合醫學大樓），兩行後截斷 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ds-suggest-sub {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* toast 樣式 2026-10-26 搬到 /assets/css/toast.css（沒有搜尋列的頁面也要用） */