/* PWA 離線提示與安裝引導（移植自 ibus_tao static/css/pwa.css）
   前綴用 pwa-。雲林沒有 tao 的 --space-、--text-、--radius- 系列 token，間距與字級直接寫 tao token 的值；
   顏色用 yun.css 的 --yun-* 色階，雲林沒有的黃色另外寫色碼。 */

/* 頂部橫幅：掛在 sticky 的 .site-header 裡。
   底色比 tao 的 yellow-50 深一階：雲林頁首本身就是米色 #FFF7E1，太淺會跟頁首糊在一起 */
.pwa-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 8px 16px;
    font-size: 15px;
    text-align: center;
    background: #FAF0BD;
    color: #726206;  /* #FAF0BD 上 5.27:1 */
    border-top: 1px solid #E5D27A;
}
/* 雲林首頁不掛 Header（tao 有），offline.js 找不到 .site-header 就把橫幅放在 body 最前面；
   這時要自己黏在畫面頂端，否則往下捲就看不到離線提示（內頁的橫幅跟著 sticky 頁首走）。
   z-index 同 .site-header：高於首頁懸浮安裝卡(90)、低於 Bootstrap modal */
body > .pwa-banner {
    position: sticky;
    top: 0;
    z-index: 100;
}
.pwa-banner--online {
    background: var(--yun-green-50);
    color: var(--yun-green-700);  /* green-50 上 9.44:1 */
    border-top-color: var(--yun-green-100);
}
.pwa-banner__btn {
    padding: 4px 12px;
    font-size: 13px;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid currentColor;
    border-radius: 999px;
}

/* 即時資料區塊遮罩。isolation 讓區塊自成堆疊層：
   Leaflet 圖層 z-index 400～1000 會被關在區塊內，遮罩蓋得住地圖，也不會蓋過 sticky 頁首 */
.pwa-offline [data-pwa-live] {
    position: relative;
    isolation: isolate;
}
.pwa-live-mask {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;  /* 區塊可能很高，提示放上方才看得到 */
    justify-content: center;
    padding: 32px 16px;
    font-size: 17px;
    text-align: center;
    color: var(--yun-ink);
    background: rgba(255, 255, 255, 0.9);
}

/* 掃 QR 進來的落地卡片：安裝鍵放最上方，一眼看到、按一下就裝 */
.pwa-landing {
    padding: 24px 16px;
    margin-bottom: 16px;
    text-align: center;
    background: var(--yun-green-50);
    border-radius: 12px;
}
.pwa-landing__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
}

/* 首頁右下角的懸浮安裝卡（js/pwa_float.js 控制顯示與點擊行為） */
.pwa-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    cursor: grab;
    touch-action: none;  /* 手機拖動時不要跟著捲動頁面 */
    user-select: none;
    -webkit-user-drag: none;  /* Safari：連同內部圖片一起禁止原生拖放 */
    z-index: 90;  /* 低於 sticky 頁首(100)，不會蓋掉導覽 */
    padding: 12px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--yun-green-200);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.pwa-float[hidden] { display: none; }
.pwa-float__link {
    display: block;
    color: var(--yun-green-600);  /* 白底 7.27:1 */
}
.pwa-float__qr {
    display: block;
    width: 120px;
    height: 120px;
}
.pwa-float__text {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}
/* 放大後的 QR：盡量佔滿視窗寬度好掃（扣掉 modal 左右留白），桌機設上限避免過大 */
.pwa-qr-large {
    width: min(420px, 88vw);
    height: auto;
    margin: 12px 0;
}
.pwa-float__close,
.pwa-float__zoom {
    position: absolute;
    top: -10px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: var(--yun-ink-soft);
    background: #FFFFFF;
    border: 1px solid var(--yun-line);
    border-radius: 999px;
}
.pwa-float__close { right: -10px; }
.pwa-float__zoom { left: -10px; font-size: 13px; }
/* 手機：縮小避免擋住內容 */
@media (max-width: 991.98px) {
    .pwa-float { right: 8px; bottom: 8px; padding: 8px; }
    .pwa-float__qr { width: 84px; height: 84px; }
}

/* 掃 QR 自動跳出的安裝視窗 */
.pwa-modal__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
}

/* 安裝教學頁的一鍵安裝按鈕（js/pwa_install.js 切換狀態） */
.pwa-install__btn {
    margin-bottom: 8px;
    padding: 8px 24px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--yun-green-500);  /* 白字 5.11:1 */
    border: 0;
    border-radius: 999px;
}
.pwa-install__btn:hover,
.pwa-install__btn:focus {
    color: #FFFFFF;
    background: var(--yun-green-600);
}
.pwa-install__msg {
    font-size: 13px;
}

/* 離線頁（ibusWeb/templates/Offline.html） */
.pwa-offline-page {
    padding: 32px 16px;
    text-align: center;
}
.pwa-offline-page__title {
    font-size: 24px;
    margin-bottom: 12px;
}