/* ===== Ofucos 後台彈窗（modal）視覺 SSOT ＝ 順序 7 批 4-B（2026-09-15，user 拍板「做」）=====
   一份皮、全站同一種彈窗。改彈窗外觀只改這一個檔。
   開關與行為在 ui-modal.js（OFUCOS_modalOpen / OFUCOS_modalClose）；本檔只管長相。

   【為什麼另起 .ofx-modal-* 命名、不沿用 style.css 的 .modal-overlay/.modal】
   收斂前 13 頁各自長出 12 種彈窗（.modal-overlay／.modal-bg／.cp-modal-bg／.cm-modal-bg／.eq-modal-bg／
   .match-modal-bg／#dayModal／#modalBox…），其中 .modal-overlay 這個名字**同時**存在 style.css（正典）
   與 5 頁的 <style>（各自蓋一份）⇒ 同名不同義、誰後載誰贏。沿用它＝把新皮疊在舊皮上、下一個人一樣看不懂。
   ⇒ 新命名空間 ofx-（與 topbar.js 的 #ofxTopbarUser 同一個前綴）：零撞名、零繼承舊 CSS、
      沒換過來的頁（no-show／orders 仍用 style.css 那份）一個字不受影響。

   【設計語言】Apple 風（CLAUDE.md UI 規範）：白底、大圓角、淡陰影、微彈入場；手機底部貼齊。
   token 一律帶 fallback —— events／kol 兩頁沒載 style.css、沒有 --radius-lg 那組變數。 */

.ofx-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 1000;                       /* 高於側欄(100)／頂列(50)／各頁 sticky 工具列 */
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ofxModalFade .18s ease-out;
}
/* 關閉＝加 hidden。這條寫在本檔（不靠 style.css 的 .hidden）⇒ 沒載 style.css 的頁一樣關得掉。 */
.ofx-modal-bg.hidden { display: none !important; }

.ofx-modal {
  background: #fff;
  color: #1d1d1f;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .04);
  width: 100%;
  max-width: 560px;
  /* ═══ 2026-09-16 iOS Safari：彈窗標題列與 × 被推到螢幕上方看不見（user 手機截圖：設定 → ＋新增活動，
     第一眼只看到「活動名稱」起的表單、沒有白底圓角頭、沒有 ×；往下滑到網址列縮起來才露出來）═══
     為什麼：iOS 的 vh **永遠**用「網址列縮起來」的大視窗算（iPhone 直立 852），但外層 .ofx-modal-bg 是
            position:fixed; inset:0 ⇒ 高度只有「網址列展開」的小視窗（852−106−82＝664）。
            手機版 max-height:92vh＝784 > 664、又貼底對齊（align-items:flex-end）⇒ 頂端 120px 被推出螢幕外、
            正好是整條標題列＋第一格。網址列一縮、視窗變 812 ⇒ 露出來＝user 第三張截圖。
     最底層：vh 是「靜態視窗」單位、跟 fixed 容器的實際高度不是同一把尺；dvh（動態視窗）才是。
     治法：兩段 max-height 各補一行 dvh；舊瀏覽器不認 dvh 會跳過那一行、留下原本的 vh（行為與改前一字不差）。
     桌面 dvh＝vh、computed 逐字相同。守門：app-shell-collapse-lists.test.js 比對每條 max-height:…vh 後面都跟著 dvh。 */
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ofxModalIn .22s cubic-bezier(.2, .9, .3, 1.2);
}
.ofx-modal.ofx-modal-wide { max-width: 860px; }
.ofx-modal.ofx-modal-narrow { max-width: 440px; }
/* 2026-09-21 R6b-3（業主拍板「D 全換」）：orders 訂單詳情是兩欄（主欄＋340px 側欄）＋商品明細表，
   原頁內皮 max-width 1100 是量過的內容寬；換正典皮時尺寸留在正典（不准在頁內覆寫 .ofx-modal），
   所以正典多一個尺寸檔位。860 以上的內容才用它。 */
.ofx-modal.ofx-modal-xwide { max-width: 1100px; }

/* 有些彈窗整個包在 <form> 裡（送出鍵要 type=submit）：讓 form 接手 flex 直欄，body 才捲得動 */
.ofx-modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* 三段式：頭（標題＋×）／身（會捲）／腳（按鈕靠右） */
.ofx-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 12px;
  flex-shrink: 0;
}
.ofx-modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1d1d1f;
}
.ofx-modal-x {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: none; border-radius: 980px;
  background: rgba(0, 0, 0, .05);
  color: #6e6e73;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ofx-modal-x:hover { background: rgba(0, 0, 0, .1); color: #1d1d1f; }

.ofx-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 18px;
  font-size: .9rem;
  line-height: 1.55;
}
/* 沒有 head 的簡單彈窗（body 直接開頭）補回上內距 */
.ofx-modal-body:first-child { padding-top: 20px; }

.ofx-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  flex-shrink: 0;
}

@keyframes ofxModalFade { from { opacity: 0; } }
@keyframes ofxModalIn { from { opacity: 0; transform: scale(.96) translateY(12px); } }

/* 手機：貼齊底部、滿寬、上圓角（iOS sheet 的手感）。斷點 768 同 mk-responsive.css，不自己發明數字。 */
@media (max-width: 768px) {
  .ofx-modal-bg { padding: 0; align-items: flex-end; }
  .ofx-modal {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh; /* iOS：跟 fixed 外層同一把尺（見上方 2026-09-16 註） */
    border-radius: 18px 18px 0 0;
    animation-name: ofxModalUp;
  }
  .ofx-modal-head { padding: 16px 18px 10px; }
  .ofx-modal-body { padding: 4px 18px 16px; }
  .ofx-modal-actions { padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ofx-modal-actions > button { flex: 1; }
}
@keyframes ofxModalUp { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  .ofx-modal-bg, .ofx-modal { animation: none; }
}