/* airspace/assets/css/log.css — 禁限航區異動紀錄頁（/airspace/log/）
   2026-10-26 由 airspace/log/index.html 的 <style> 搬出。
   放在 airspace/assets/css/ 而不是 log/ 底下：部署腳本會擋名為 log 的目錄（伺服器產生區）。
   需先載 /assets/css/tokens.css。原本的 :root 重定義了 --bg-dark／--primary／--text-white
   （值相同），已刪；本頁專屬變數一律 --log- 前綴，不再沿用 --text-gray／--card-bg 這類容易
   與共用元件撞名的通用字。 */

:root {
    --log-text-gray:     rgba(255, 255, 255, 0.7);  /* 內文次要字 */
    --log-text-dim:      rgba(255, 255, 255, 0.45);  /* 日期、標籤、空狀態（原值，未動） */
    --log-card-bg:       rgba(255, 255, 255, 0.04);  /* 卡片底；.item 的分隔線也用同值 */
    --log-line-soft:     rgba(255, 255, 255, 0.08);  /* 頂部列底線、卡片邊框：比 --hairline(0.1) 淡一階 */
    --log-card-border:   1px solid var(--log-line-soft);
    --log-radius:        12px;
    --log-zone-red:      var(--status-danger);  /* 紅區色點 */
    --log-zone-yellow:   var(--status-warn);  /* 黃區色點 */
    --log-zone-gray:     #8e8e93;  /* 灰區色點（異動紀錄沿用舊灰；地圖上的灰區已於 2026-09-01 改藍） */
    --log-header-bg:     rgba(55, 58, 70, 0.88);  /* 頂部列：--surface 88% 玻璃 */
    --log-select-border: rgba(255, 255, 255, 0.15);  /* 月份下拉框 */
    --log-item-ink:      #eee;  /* 異動項目名稱 */
    --log-add-bg:        rgba(254, 238, 165, 0.18);  /* 「新增」徽章（--primary 淡底） */
    --log-add-line:      rgba(254, 238, 165, 0.3);
    --log-add-ink:       #F5E6B0;
    --log-danger-bg:     rgba(231, 76, 60, 0.18);  /* 「移除」「ID重編」徽章（--status-danger 淡底） */
    --log-danger-line:   rgba(231, 76, 60, 0.3);
    --log-rem-ink:       #ff6b6b;
    --log-warn-ink:      #ff8f7a;  /* 「ID重編」徽章與提示框文字 */
    --log-modify-bg:     rgba(240, 185, 11, 0.18);  /* 「範圍更動」徽章（--status-warn 淡底；字色即 --status-warn） */
    --log-modify-line:   rgba(240, 185, 11, 0.3);
    --log-rename-bg:     rgba(167, 139, 250, 0.18);  /* 「更名改色」徽章（紫） */
    --log-rename-line:   rgba(167, 139, 250, 0.3);
    --log-rename-ink:    #c4b5fd;
    --log-badge-none-bg: rgba(255, 255, 255, 0.06);  /* 無異動徽章 */
    --log-down-bg:       rgba(96, 165, 250, 0.18);  /* 變更標籤：縮小（藍） */
    --log-down-ink:      #7fb4f5;
    --log-warn-box-bg:   rgba(231, 76, 60, 0.1);  /* 警示框 */
    --log-warn-box-line: rgba(231, 76, 60, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 14px;
    background: var(--log-header-bg);
    border-bottom: 1px solid var(--log-line-soft);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: var(--blur);
}
.app-header img { height: 22px; opacity: 0.85; }
.app-header h1 { font-size: 1.05em; font-weight: 700; letter-spacing: 0.5px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 16px 14px 60px; }

.intro {
    font-size: 0.85em;
    color: var(--log-text-gray);
    background: var(--log-card-bg);
    border: var(--log-card-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.intro strong { color: var(--primary); }
.intro .updated { color: var(--log-text-dim); font-size: 0.92em; display: block; margin-top: 6px; }

/* Toolbar: 月份篩選 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.toolbar label { font-size: 0.82em; color: var(--log-text-dim); }
select {
    font-family: inherit;
    font-size: 0.88em;
    color: var(--text-white);
    background: var(--log-card-bg);
    border: 1px solid var(--log-select-border);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    outline: none;
}
select:focus { border-color: var(--primary); }
option { background: var(--bg-dark); }

.event {
    background: var(--log-card-bg);
    border: var(--log-card-border);
    border-radius: var(--log-radius);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: inherit;
    transition: background 0.15s;
}
.event:hover { background: var(--field-bg); }
.event-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 13px 15px;
    user-select: none;
}
.event-date { font-weight: 700; font-size: 0.93em; flex-shrink: 0; }
.event-total { font-size: 0.74em; color: var(--log-text-dim); margin-left: auto; }
.arrow { font-size: 0.7em; color: var(--log-text-dim); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
    font-size: 0.74em;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.badge.add  { background: var(--log-add-bg); color: var(--log-add-ink); border: 1px solid var(--log-add-line); }
.badge.rem  { background: var(--log-danger-bg); color: var(--log-rem-ink); border: 1px solid var(--log-danger-line); }
.badge.mg   { background: var(--log-modify-bg); color: var(--status-warn); border: 1px solid var(--log-modify-line); }
.badge.rn   { background: var(--log-rename-bg); color: var(--log-rename-ink); border: 1px solid var(--log-rename-line); }
.badge.warn { background: var(--log-danger-bg); color: var(--log-warn-ink); border: 1px solid var(--log-danger-line); }
.badge.none { background: var(--log-badge-none-bg); color: var(--log-text-dim); }
.dot.add { background: var(--primary); }
.dot.rem { background: var(--log-zone-red); }
.dot.mod { background: var(--log-zone-yellow); }

.item {
    font-size: 0.82em;
    padding: 6px 0;
    border-bottom: 1px solid var(--log-card-bg);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.item:last-child { border-bottom: none; }
.ztag { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.ztag.R { background: var(--log-zone-red); }
.ztag.Y { background: var(--log-zone-yellow); }
.ztag.G { background: var(--log-zone-gray); }
.item-name { color: var(--log-item-ink); font-weight: 500; word-break: break-word; flex: 1; min-width: 0; }
.item-date {
    font-size: 0.78em;
    color: var(--log-text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}
.change-tag {
    font-size: 0.85em;
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--field-bg);
    color: var(--log-text-gray);
}
.change-tag.up   { background: var(--log-add-bg); color: var(--log-add-ink); }
.change-tag.down { background: var(--log-down-bg); color: var(--log-down-ink); }

.warn-box {
    font-size: 0.82em;
    color: var(--log-warn-ink);
    background: var(--log-warn-box-bg);
    border: 1px solid var(--log-warn-box-line);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
}
.empty { text-align: center; color: var(--log-text-dim); padding: 40px 0; font-size: 0.9em; }
.sentinel-loading { text-align: center; color: var(--log-text-dim); font-size: 0.8em; padding: 16px 0; }
.footer {
    text-align: center;
    color: var(--log-text-dim);
    font-size: 0.72em;
    margin-top: 24px;
    line-height: 1.7;
}
.footer a { color: var(--log-text-gray); }
.header-back-btn {
    margin-left: auto;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--on-accent);
    border-radius: 8px;
    padding: 6px 13px;
    font-size: 0.82em;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.header-back-btn:hover { opacity: 0.88; }