/* ==========================================================================
   QRPASS Event — 行動端版面層（App 員工端／Staff 現場人員端共用）
   依賴 qrpass-theme.css
   ========================================================================== */

body.qp-mobile { background: var(--qp-outer); }

/* --- 手機畫框 --- */
.qp-screen {
  width: 100%; max-width: 430px;
  height: 100vh;
  height: 100dvh;   /* 手機瀏覽器網址列／工具列伸縮時，以實際可視高度為準，底部導覽不被蓋住 */
  margin: 0 auto;
  background: var(--qp-bg);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  box-shadow: var(--qp-shadow-screen);
}

/* --- 假狀態列 --- */
.qp-statusbar {
  height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 0 34px; color: #fff; flex: none;
}
.qp-statusbar .qp-time { font-weight: 700; font-size: 15px; }
.qp-statusbar .qp-sigs { display: flex; align-items: center; gap: 7px; }
.qp-statusbar .qp-sigs .msi { font-size: 17px; }
.qp-statusbar .qp-sigs .msi:last-child { font-size: 19px; }
/* 深色狀態列（白底頁面用） */
.qp-statusbar-dark { color: var(--qp-ink); }

/* --- 紅色 App Bar --- */
.qp-appbar { background: var(--qp-grad); flex: none; position: relative; }
.qp-appbar-pad { padding-bottom: 22px; }
.qp-appbar-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 22px 0;
}
.qp-appbar-logo { height: 26px; width: auto; display: block; }
/* 登入後各頁統一之 logo 列（logo ＋ 報到碼）；其下接頁面標題列 */
.qp-appbar-row { min-height: 42px; }            /* 無 QR 按鈕之頁面（出示報到碼）同高 */
.qp-appbar-row + .qp-appbar-title { padding-top: 12px; min-height: 50px; }   /* 有無返回鍵，標題列一律同高 */
.qp-appbar-actions { display: flex; gap: 10px; }
.qp-appbar-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
}
.qp-appbar-btn .msi { font-size: 21px; color: #fff; }
.qp-appbar-btn .qp-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--qp-gold);
}

/* 內頁標題列（返回 + 標題） */
.qp-appbar-title {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 18px 0; color: #fff;
}
.qp-appbar-title .qp-back {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; border: none;
}
.qp-appbar-title .qp-back .msi { font-size: 22px; color: #fff; }
.qp-appbar-title h1 { font-size: 19px; font-weight: 900; margin: 0; flex: 1; }

/* 問候區 */
.qp-greet {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 0;
}
.qp-greet-hi { color: rgba(255,255,255,.78); font-size: 13px; }
.qp-greet-name { color: #fff; font-size: 20px; font-weight: 900; margin-top: 3px; }
.qp-pts-pill {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.16);
  padding: 8px 14px; border-radius: var(--qp-pill);
}
.qp-pts-pill .msi { font-size: 17px; color: var(--qp-gold); }
.qp-pts-pill b { color: #fff; font-weight: 700; font-size: 14px; }
.qp-pts-pill small { color: rgba(255,255,255,.7); font-size: 12px; }

/* --- 內容區 --- */
.qp-body { flex: 1; overflow: auto; padding: 18px 18px 0; }
.qp-body-flush { flex: 1; overflow: auto; }
.qp-body-end { height: 18px; }

/* --- 分頁籤（基礎樣式於 qrpass-theme.css） ---
   手機寬度有限，頁籤改為等分撐滿整列並置中，點擊區域亦較好按 */
.qp-mobile .qp-tab { flex: 1; text-align: center; padding: 11px 4px; font-size: 14px; }

/* --- 底部導覽 --- */
/* 白底與內容卡片同色，改以上緣陰影與分隔線區隔；未選取圖示加深、選取項目加上膠囊底色 */
.qp-bottomnav {
  background: var(--qp-surface);
  border-top: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 -6px 18px -8px rgba(40,6,12,.18);
  padding: 8px 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  flex: none; position: relative;
}
.qp-bottomnav-inner { display: flex; justify-content: space-around; align-items: flex-start; }
.qp-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 64px; cursor: pointer;
  background: none; border: none; padding: 0;
}
.qp-nav-item .msi {
  font-size: 23px; color: #6f6f78; line-height: 1;
  padding: 4px 18px; border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.qp-nav-item span:last-child { font-size: 10.5px; color: #6f6f78; font-weight: 500; }
.qp-nav-item:active .msi { background: rgba(0,0,0,.05); }
.qp-nav-item.active .msi { color: var(--qp-red); background: var(--qp-red-tint); font-variation-settings: 'FILL' 1; }
.qp-nav-item.active span:last-child { color: var(--qp-red); font-weight: 800; }

/* --- Sticky CTA --- */
.qp-sticky-cta {
  flex: none; background: var(--qp-surface);
  border-top: 1px solid var(--qp-line-3);
  padding: 12px 18px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* --- Overlay / Sheet --- */
.qp-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(20,12,14,.55);
  align-items: center; justify-content: center; padding: 30px;
}
.qp-overlay.open { display: flex; }
.qp-dialog {
  background: var(--qp-surface); border-radius: var(--qp-r-2xl);
  padding: 26px 24px 22px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: var(--qp-shadow-pop);
  max-height: 88vh; overflow: auto;
}
.qp-dialog-title { font-size: 19px; font-weight: 900; color: var(--qp-ink); }
.qp-dialog-sub { font-size: 13px; color: #86868c; margin-top: 7px; }

/* 由下往上的 sheet */
.qp-overlay-sheet { align-items: flex-end; padding: 0; }
.qp-sheet {
  background: var(--qp-surface); width: 100%; max-width: 430px;
  border-radius: var(--qp-r-2xl) var(--qp-r-2xl) 0 0;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--qp-shadow-pop);
}
.qp-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--qp-line-2); flex: none;
}
.qp-sheet-head h2 { font-size: 17px; font-weight: 900; color: var(--qp-ink); margin: 0; }
.qp-sheet-close {
  width: 32px; height: 32px; border-radius: 10px; background: var(--qp-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; flex: none;
}
.qp-sheet-close .msi { font-size: 20px; color: var(--qp-ink-2); }
.qp-sheet-body { flex: 1; overflow: auto; padding: 18px 22px; }
.qp-sheet-foot { flex: none; padding: 14px 22px 22px; border-top: 1px solid var(--qp-line-2); }

/* --- QR Code 展示框 --- */
.qp-qrbox {
  position: relative; margin: 18px auto 0;
  width: 230px; height: 230px;
  border: 1px solid var(--qp-line); border-radius: var(--qp-r-lg); padding: 14px;
}
.qp-qrbox canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qp-qrbox-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 13px;
  background: var(--qp-red); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(124,19,32,.6);
  color: #fff; font-size: 26px; font-weight: 900;
}

/* --- Toast --- */
/* 樣式已移至 qrpass-theme.css（三端共用），此處不再重複定義 */

/* --- 推播橫幅 --- */
.qp-push {
  position: fixed; top: 12px; left: 50%;
  z-index: 9999; width: calc(100% - 28px); max-width: 402px;
  background: #fff; border-radius: var(--qp-r-lg); color: #1c1c21;
  border: 1px solid rgba(0,0,0,.06);
  padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start;
  box-shadow: 0 14px 36px -14px rgba(0,0,0,.4); cursor: pointer; overflow: hidden;
  /* 收合狀態：藏於畫面上緣外，縮小、模糊 */
  transform: translate(-50%, calc(-100% - 24px)) scale(.92);
  opacity: 0; filter: blur(4px); visibility: hidden; pointer-events: none;
  transition: transform .38s cubic-bezier(.4,0,.9,.6), opacity .3s ease, filter .3s ease, visibility 0s linear .38s;
  touch-action: pan-x;
}
/* 展開：彈簧感落下（輕微過衝） */
.qp-push.open {
  transform: translate(-50%, 0) scale(1);
  opacity: 1; filter: none; visibility: visible; pointer-events: auto;
  transition: transform .62s cubic-bezier(.18,1.35,.4,1), opacity .25s ease, filter .35s ease, visibility 0s;
}
.qp-push.dragging { transition: none; }
.qp-push .qp-row-sub { color: #45454d; font-size: 12.5px; line-height: 1.5; white-space: normal; margin-top: 2px; }
.qp-push:active { transform: translate(-50%, 0) scale(.98); }
/* 圖示：落定後鈴鐺搖動 */
.qp-push.open .qp-tile-sm .msi { animation: qpBellRing .9s ease .45s both; transform-origin: 50% 15%; }
@keyframes qpBellRing {
  0%,100% { transform: rotate(0); }
  15% { transform: rotate(18deg); } 30% { transform: rotate(-15deg); }
  45% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); }
}
/* 內文依序淡入 */
.qp-push.open .flex-fill > * { animation: qpPushText .45s ease both; }
.qp-push.open .flex-fill > :nth-child(1) { animation-delay: .12s; }
.qp-push.open .flex-fill > :nth-child(2) { animation-delay: .2s; }
@keyframes qpPushText { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 自動收合倒數條 */
.qp-push::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--qp-red); opacity: .55; transform-origin: left; transform: scaleX(0);
}
.qp-push.open::after { animation: qpPushTimer var(--qp-push-dur, 4.2s) linear both; }
.qp-push.paused::after { animation-play-state: paused; }
@keyframes qpPushTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .qp-push, .qp-push.open { transition: opacity .2s ease, visibility 0s; filter: none; }
  .qp-push.open .qp-tile-sm .msi, .qp-push.open .flex-fill > * { animation: none; }
}

/* --- 頭像 --- 已移至 qrpass-theme.css（後台頁面亦需使用） --- */

/* --- 統計小卡 --- */
.qp-stat {
  background: var(--qp-surface); border: 1px solid var(--qp-line);
  border-radius: var(--qp-r-lg); padding: 14px; text-align: center;
}
.qp-stat-num { font-size: 22px; font-weight: 900; color: var(--qp-red); }
.qp-stat-label { font-size: 11.5px; color: var(--qp-muted); margin-top: 3px; }

/* --- 桌面上仍以手機框呈現 --- */
@media (min-width: 431px) {
  .qp-screen { height: 100vh; height: 100dvh; }
}

/* --- 簡訊驗證碼 6 格輸入 --- */
.qp-otp { display: flex; gap: 8px; justify-content: space-between; }
.qp-otp input {
  width: 100%; min-width: 0; height: 54px; text-align: center;
  font-size: 22px; font-weight: 800; color: var(--qp-ink);
  border: 1.5px solid var(--qp-line-3); border-radius: 12px; background: #fff; outline: none;
  caret-color: var(--qp-red);
}
.qp-otp input:focus { border-color: var(--qp-red); box-shadow: 0 0 0 3px var(--qp-red-tint); }
.qp-otp input.filled { border-color: var(--qp-red-line); background: var(--qp-red-tint); }

/* --- 安裝提示（PWA，qrpass.js 動態插入） ---
   固定於畫面底部、底部導覽之上 */
.qp-install {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 9990;
  width: calc(100% - 24px); max-width: 406px;
  display: flex; align-items: center; gap: 10px;
  background: var(--qp-surface); border-radius: var(--qp-r-lg);
  box-shadow: 0 12px 32px -10px rgba(20,12,14,.45); padding: 10px 10px 10px 12px;
}
.qp-install-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.qp-install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qp-install-txt b { font-size: 14px; }
.qp-install-txt span { font-size: 11.5px; color: var(--qp-muted); line-height: 1.4; }
.qp-install-go {
  flex: none; display: flex; align-items: center; gap: 4px;
  background: var(--qp-grad); color: #fff; border: none; border-radius: var(--qp-pill);
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.qp-install-go .msi { font-size: 18px; }
.qp-install-done {
  flex: none; background: var(--qp-red-tint); color: var(--qp-red); border: none;
  border-radius: var(--qp-pill); padding: 8px 12px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.qp-install-x { flex: none; background: none; border: none; padding: 4px; color: var(--qp-muted); }
.qp-install-x .msi { font-size: 20px; }

/* --- 以真實手機瀏覽時（窄螢幕或觸控裝置） ---
   假狀態列（9:41、訊號、電量）只用於桌面上模擬手機畫框；真機已有自己的狀態列，
   故隱藏其內容，只保留最小留白（加入主畫面全螢幕開啟時則讓出瀏海／狀態列高度）。
   真機狀態列之顏色由各頁 <meta name="theme-color"> 設為品牌紅。 */
@media (max-width: 500px), (hover: none) and (pointer: coarse) {
  /* 頁面最底層（html）塗品牌紅、內容區維持淺色底（.qp-screen 自帶背景）：
     iOS 主畫面 App 之狀態列顏色取自 html 背景（iOS 27 實測不理會 theme-color），
     塗紅後狀態列與紅色頁首接成一片；桌面 mockup 用之灰色外框亦不再露出。
     關閉整頁回彈，避免往下拉到底時露出一截紅色。 */
  html { background: var(--qp-red-1); overscroll-behavior: none; }
  body.qp-mobile { background: var(--qp-bg); }
  .qp-statusbar { height: max(12px, env(safe-area-inset-top)); padding: 0; }
  /* 內容延伸至系統狀態列下方時（安全區高度 > 0），以固定紅色條墊底，捲動時內容不從時間與電量底下透出；
     一般瀏覽器分頁安全區為 0 即不出現。
     ※ iOS 主畫面 App 之狀態列樣式設為 default（內容自狀態列下方開始）：新版 iOS 會在延伸至
       狀態列下方之內容上疊一層系統模糊漸層，網頁無法關閉，會壓住頁首 logo 與圖示。 */
  body.qp-mobile::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 9989;
    height: env(safe-area-inset-top, 0px); background: var(--qp-red-1);
  }
  .qp-statusbar .qp-time, .qp-statusbar .qp-sigs { display: none; }

  /* 頁首頂端與系統狀態列銜接：Android 狀態列以 theme-color 塗單一品牌紅，
     頁首卻是左上→右下之斜向漸層（右上角較深），交界處會出現色差。
     頁首最上方先以與狀態列相同之品牌紅起始，約 80px 內漸融入原本之斜向漸層。
     登入等整頁紅底之畫面（行內 style 設定 --qp-grad）一併處理。 */
  .qp-appbar,
  .qp-screen[style*="--qp-grad"] {
    background: linear-gradient(180deg, var(--qp-red) 0, rgba(176, 24, 44, 0) 80px), var(--qp-grad) !important;
  }   /* 權重須高於上方 .qp-statusbar .qp-sigs 之 display:flex */

  /* 改由整頁捲動：手機瀏覽器只有在「文件本身」往下捲時才會收起網址列與底部工具列；
     原本畫框固定一屏高、只捲 .qp-body，文件從未捲動，工具列便一直顯示。
     底部導覽與 Sticky CTA 改以 sticky 貼齊可視範圍底部。 */
  .qp-screen { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .qp-body, .qp-body-flush { flex: 1 0 auto; overflow: visible; }
  .qp-bottomnav, .qp-sticky-cta { position: sticky; bottom: 0; z-index: 50; }
  /* 紅色頁首亦以 sticky 貼齊可視範圍頂端，行為與桌面畫框一致（整頁捲動時頁首不隨之捲走） */
  .qp-appbar { position: sticky; top: 0; z-index: 60; }
}
@media (max-width: 430px) {
  .qp-screen { box-shadow: none; }
}

/* --- HTML 編輯器內文（3.2 年度主題、公告內文等由管理者上架之圖文） --- */
.qp-theme-body p  { font-size: 14px; line-height: 1.85; color: var(--qp-ink); margin: 0 0 12px; }
.qp-theme-body h3 { font-size: 15px; font-weight: 800; color: var(--qp-red); margin: 18px 0 9px; }
.qp-theme-body ul { padding-left: 20px; margin: 0 0 12px; }
.qp-theme-body li { font-size: 13.5px; line-height: 1.9; color: var(--qp-ink-2); }
.qp-theme-body b  { color: var(--qp-ink); }
.qp-theme-body a  { color: var(--qp-red); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* --- 現場人員端：目前操作之場次／任務（staff 共用，qrpass.js UI.staffCtxBar） --- */
/* 併入紅色頁首（置於標題列下方）：不加外框，僅以上方細線與標題列區隔 */
.st-ctx {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 18px 0; padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.25); color: #fff;
}
.st-ctx-body { flex: 1; min-width: 0; }
.st-ctx-t { font-size: 16px; font-weight: 900; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ctx-s { font-size: 12px; color: rgba(255,255,255,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.st-ctx-sw {
  flex: none; display: flex; align-items: center; gap: 3px; border: 0; border-radius: 999px;
  background: #fff; color: var(--qp-red); font-size: 12.5px; font-weight: 800; padding: 7px 12px;
}
.st-ctx-sw .msi { font-size: 17px; }
.st-pick-item {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; cursor: pointer;
  border: 1.5px solid var(--qp-line); border-radius: var(--qp-r-lg); background: var(--qp-surface);
}
.st-pick-item.on { border-color: var(--qp-red); background: var(--qp-red-tint); }
/* 多場次：依活動＋日期分組之組標題（捲動時黏在面板頂端） */
.st-pick-grp + .st-pick-grp { margin-top: 14px; }
.st-pick-gh { position: sticky; top: -18px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  background: var(--qp-surface); padding: 8px 2px 8px; margin: 0 0 4px; font-size: 13px; }
.st-pick-gh b { font-weight: 900; color: var(--qp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pick-gh span { flex: none; color: var(--qp-red); font-weight: 800; font-size: 12.5px; }
.st-pick-search { position: relative; padding: 12px 22px 0; flex: none; }
.st-pick-search .msi { position: absolute; left: 35px; top: 50%; transform: translateY(-30%); font-size: 19px; color: var(--qp-muted); }
.st-pick-search input { width: 100%; height: 42px; border: 1px solid var(--qp-line); border-radius: 12px; padding: 0 12px 0 40px;
  font-size: 14px; background: var(--qp-soft, #F6F5F4); outline: none; }
.st-pick-search input:focus { border-color: var(--qp-red-line); background: var(--qp-surface); }
/* 場次選擇面板固定佔畫面高度 3/5，內容於面板內捲動 */
#stPick .qp-sheet { height: 60vh; height: 60dvh; max-height: 60dvh; }