/*
@File: runway-gap/stats（空檔統計熱力圖）頁面樣式
@Note: 2026-09-28 由 stats/index.html 的 144 行 inline <style> 搬出（全覽審查 E6）。
       stats/ 目錄是伺服器產生區（部署腳本擋），所以放在 runway-gap/assets/css/。
       顏色／間距一律先用 tokens.css；下列 page-local 變數是 tokens.css 沒有對應值的
       （熱力圖色階、次要文字 0.45、表格尺寸），為維持畫面不變而保留原值。
*/
:root {
    --header-h: 54px;
    --muted: rgba(255,255,255,.45);      /* 無對應 token（--text-secondary .65／--text-decorative .4），沿用原值 */
    /* 熱力圖色階（資料視覺化，非狀態語意）：紅／黃／綠＝--status-danger／--status-warn／--status-ok 的 85% 透明度 */
    --c-none:   #1e2a3a;
    --c-red:    rgba(231,76,60,.85);
    --c-orange: rgba(233,123,62,.85);
    --c-yellow: rgba(240,185,11,.85);
    --c-ltgrn:  rgba(122,201,67,.85);
    --c-green:  rgba(46,204,113,.85);
    --cell: 28px;
    --label-w: 26px;

    /* 2026-10-26 D4：原本散在各規則裡的色碼字面值（--rg- 前綴） */
    --rg-bg-top:         #2a2d38;  /* 頁面底色漸層：頂（中段即 --surface）；與 runway-gap/assets/css/style.css 同值 */
    --rg-bg-bottom:      #2f323d;  /* 頁面底色漸層：底 */
    --rg-header-bg:      rgba(55, 58, 70, 0.88);  /* 頂部列：--surface 88% 玻璃 */
    --rg-controls-bg:    rgba(55, 58, 70, 0.9);  /* 篩選列：--surface 90% 玻璃 */
    --rg-chip-bg:        rgba(255, 255, 255, 0.08);  /* 返回鈕底 */
    --rg-heat-ink:       #111;  /* 亮色熱力格（黃／淡綠／綠）上的深字 */
    --rg-prelim-outline: rgba(255, 255, 255, 0.3);  /* 「未滿一週」格的虛線框 */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Noto Sans TC', -apple-system, sans-serif;
    background: linear-gradient(160deg, var(--rg-bg-top), var(--surface) 40%, var(--rg-bg-bottom));
    color: var(--text-white);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    background: var(--rg-header-bg); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center; padding: 0 16px; gap: 12px; z-index: 100;
}
.header-logo img { height: 30px; }
.header-title { font-size: 15px; font-weight: 700; flex: 1; }
.back-btn {
    background: var(--rg-chip-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: 22px; text-decoration: none;
}

/* ── Controls ── */
.controls {
    margin-top: var(--header-h);
    padding: 12px 16px;
    background: var(--rg-controls-bg);
    border-bottom: 1px solid var(--hairline);
    display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
}
.airport-sel {
    flex: 1; min-width: 160px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px; color: var(--text-white); font-size: 14px;
    padding: 8px 12px; font-family: inherit; outline: none;
}
.airport-sel option, .airport-sel optgroup { background: var(--surface); color: var(--text-white); }
.metric-note {
    padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    border: 1px solid var(--hairline); color: var(--primary); white-space: nowrap;
}

/* ── Two-panel grid ── */
.panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}
@media (max-width: 680px) {
    .panels { grid-template-columns: 1fr; }
}

.panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
}
.panel-head {
    padding: 10px 12px 4px;
    display: flex; align-items: baseline; gap: var(--space-1);
}
.panel-label {
    font-size: 12px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: .5px;
}
.panel-info { font-size: 11px; color: var(--muted); }
.panel-scroll { overflow-x: auto; padding: 4px 8px 10px; }

/* ── Heatmap table ── */
.hm-table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 auto;
}
.hm-corner { width: var(--label-w); }
.hm-day-th {
    width: var(--cell);
    text-align: center;
    padding: 4px 0 6px;
    font-size: 10px; font-weight: 700; color: var(--muted);
    white-space: nowrap;
}
.hm-hour-td {
    width: var(--label-w); height: var(--cell);
    text-align: right; padding-right: 5px;
    font-size: 10px; color: var(--muted);
    vertical-align: middle;
}
.hm-cell {
    width: var(--cell); height: var(--cell);
    text-align: center; vertical-align: middle;
    font-size: 11px; font-weight: 700;
    border-radius: 3px;
    transition: transform .1s; position: relative;
}
.hm-cell:hover { transform: scale(1.12); z-index: 5; }
.c-none   { background: var(--c-none); color: var(--muted); font-weight: 400; }
.c-red    { background: var(--c-red);    color: var(--text-white); }
.c-orange { background: var(--c-orange); color: var(--text-white); }
.c-yellow { background: var(--c-yellow); color: var(--rg-heat-ink); }
.c-ltgrn  { background: var(--c-ltgrn);  color: var(--rg-heat-ink); }
.c-green  { background: var(--c-green);  color: var(--rg-heat-ink); }
/* * mark for preliminary weekly max (< 1 complete week) */
.hm-cell.prelim { outline: 1px dashed var(--rg-prelim-outline); }

/* ── Legend ── */
.legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
    padding: 6px 16px 0; font-size: 11px; color: var(--muted);
}
.leg-item { display: flex; align-items: center; gap: 4px; }
.leg-sw { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.leg-note { margin-left: 4px; }

/* ── 靜態說明：不依賴 JSON（2026-09-13 GSC：資料檔被 robots 擋，Googlebot 只看得到這段） ── */
.about { max-width: 760px; margin: var(--space-3) auto 0; padding: 0 var(--space-2) 80px; line-height: 1.8; }
.about h2 { font-size: 16px; color: var(--primary); margin: var(--space-3) 0 var(--space-1); }
.about h3 { font-size: 14px; color: var(--text-white); margin: var(--space-2) 0 4px; }
.about p, .about li { font-size: 13px; color: var(--text-secondary); }
.about ul { padding-left: 1.2em; }
.about a { color: var(--primary); }