/* tenant/polish.css：店家後台樣式第 5／6 支「PWA 安裝橫幅、其他圖片縮圖列、視覺質感精修、表單易讀性、手機可用性、勾選框開關單選鈕、觸控目標放大、儀表板橫幅與統計卡」（2026-10-12 由 tenant.css 第 3704～4568 行逐字切出；依 tenant/layout.html 的 link 順序串接＝原檔）---- 以下逐字搬自拆分前的 tenant.css ---- */
/* ========================================
   PWA 安裝橫幅
   ======================================== */

.pwa-install-banner {
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    animation: pwaSlideUp 0.3s ease;
}

@keyframes pwaSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* modal 開著時先收起底部橫幅（2026-09-11 QA0911E／J）：橫幅 z-index 9999 高過 modal，
   手機上它正好蓋在 modal 頁尾的「儲存」上，點下去實際點到的是「立即開啟」。
   頁面本體的底部按鈕由 tenant.js syncBottomBannerSpace 讓出同樣高度。 */
body.modal-open .pwa-install-banner {
    display: none !important;
}

/* ===== 後台「其他圖片」縮圖橫向可滑列 =====
   用於商品 / 服務 / 作品編輯 Modal：上傳多張後橫向滾動，不換行堆高 */
.extra-images-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.extra-images-strip::-webkit-scrollbar {
    height: 6px;
}
.extra-images-strip::-webkit-scrollbar-thumb {
    background: #c8c8c8;
    border-radius: 3px;
}
.extra-images-strip > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}
.extra-images-strip .text-muted.align-self-center {
    margin-left: 4px;
}

/* ========================================
   視覺質感精修（2026-08-01「美觀程度」專項）
   目標：從「稱職的 Bootstrap 後台」推到「2026 年的專業 SaaS」。
   全為視覺層（邊框/陰影/字距/過渡/焦點），不動版型結構與任何 id/class 行為。
   ======================================== */

/* 1) 卡片邊緣：純陰影浮空 → 髮絲邊框 + 更輕的陰影。
      邊框讓卡片在淺灰底上有明確、銳利的邊界（Linear/Stripe 系的作法），
      陰影退居輔助，整體更乾淨、不糊。 */
.card,
.data-table-container,
.detail-header,
.settings-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* 1b) Bootstrap `.shadow-sm` 工具類帶 !important，會蓋掉上面的設計 token
       → 同一頁上出現兩種卡片陰影（reports 16 處、pos 7 處、portfolio 5 處…）。
       這裡把「內容區的卡片」統一回 token，不動 Modal / 下拉等其他 .shadow-* 用途。 */
#content .card.shadow-sm,
#content .card.shadow,
#content .data-table-container.shadow-sm {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

/* 2) 互動過渡：卡片與列的狀態變化給 150ms 緩動，滑過時「有回應」而不是硬切 */
.card,
.data-table-body table > tbody > tr,
.btn,
.nav-link,
.badge {
    transition: background-color 0.15s ease, box-shadow 0.15s ease,
                border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* 3) 字體階層精修：標題收緊字距（中英混排在 700 字重下預設偏鬆），
      副標降一階灰度拉開層次 */
.page-title {
    letter-spacing: -0.015em;
}

.page-subtitle {
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}

.data-table-title,
.card-title,
h5.modal-title {
    letter-spacing: -0.01em;
}

/* 4) 統一焦點樣式：鍵盤操作時有清楚一致的主色焦點環（原本各元件不一致，
      有些甚至只有瀏覽器預設藍框，與設計語言衝突） */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.nav-link:focus-visible,
.page-eyebrow a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
    border-color: var(--primary-color);
}

/* 5) 主要按鈕質感：略減圓角雜訊 + hover 時輕微抬升，點擊回彈 */
.btn {
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary:hover {
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.28);
}

.btn:active {
    transform: translateY(1px);
}

/* 6) 表格列 hover 更柔和（原本直接換底色，過渡後更順） */
.data-table-body table > tbody > tr:hover {
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, 0.06);
}

/* 7) Modal 質感：加大圓角 + 更柔的陰影，與卡片語言一致 */
.modal-content {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18);
}

/* ========================================
   表單頁易讀性（2026-08-01 UX 評審）
   ======================================== */

/* 1) 短欄位不要在 1440px 拉滿 ~800px：Email/電話/代號/時間這類固定長度輸入限寬，
      閱讀行長回到合理範圍。長文欄（textarea）與需要全寬的元件不受影響。 */
@media (min-width: 992px) {
    .settings-card input[type="email"],
    .settings-card input[type="tel"],
    .settings-card input[type="url"],
    .settings-card input[type="number"],
    .settings-card input[type="date"],
    .settings-card input[type="time"],
    .tab-pane input[type="email"],
    .tab-pane input[type="tel"],
    .tab-pane input[type="number"],
    .tab-pane input[type="date"],
    .tab-pane input[type="time"] {
        max-width: 22rem;
    }
    /* 名稱/代號類單行文字欄：限寬但比上面寬一些 */
    .tab-pane .form-control-shortish {
        max-width: 28rem;
    }
}

/* 2) 表單區塊底部的主要儲存鈕：手機版釘在底部（長設定頁改完 toggle 不用盲捲到底找按鈕） */
@media (max-width: 991.98px) {
    .tab-pane > form > .btn-primary,
    .tab-pane form > .btn-primary[id^="save"] {
        position: sticky;
        bottom: 0.75rem;
        width: 100%;
        z-index: 5;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        box-shadow: 0 6px 20px rgba(67, 97, 238, 0.28);
    }
}

/* 3) 桌機：儲存鈕與上方欄位拉開距離並加分隔線，避免「混在欄位裡看不到」 */
@media (min-width: 992px) {
    .tab-pane form > .btn-primary[id^="save"] {
        margin-top: 1.25rem;
    }
}

/* ========================================
   手機後台可用性強化（2026-06-25 RWD 體檢）
   ======================================== */

/* FullCalendar 操作按鈕放大到觸控規範（原 32~33px < 44pt 易點錯）*/
@media (max-width: 767.98px) {
    .fc .fc-button {
        min-height: 44px;
        padding: 6px 12px;
    }
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        gap: 6px;
        row-gap: 8px;
    }
    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }
}

/* 手機行事曆月檢視可讀性（2026-08-01 UX 評審）：
   390px 下每格寬約 50px，事件同時塞「時間 + 顧客名」→ 標題被切成「15:0」「10:0」這種讀不懂的殘字。
   月檢視改「只顯示顧客名、隱藏時間」——時間點進去看詳情即可，格子裡認人比認時間有用；
   週/日檢視格子夠寬，維持顯示時間不動。 */
/* 月檢視事件標題在桌機也會被切，但 FullCalendar 預設是 text-overflow:clip →
   字被切在半個字元上、沒有任何「還有後續」的提示（1280 實測「⏳ 林柏諺 - 拉花課程（一對一）」
   內容 175px 只顯示 69px，少了 106px；1440 少 83px；連 1920 都還少 14px）。
   補省略號讓店家看得出來被截斷了，滑過有 title 提示、點開有完整內容。 */
/* 月檢視事件標題：允許折成兩行再省略，而不是單行切掉。
   實測 1024 下「✓ 陳映蓉 - 下午茶座位預約」內容 143px 只顯示 35px（約 2 個字），
   1440 也只有 92px——單行永遠塞不下「顧客名 + 服務名」。格子寬約 140px，
   折兩行就看得完整。搭配 dayMaxEvents 收斂成「+N」，列高不會失控。 */
.fc-dayGridMonth-view .fc-event .fc-event-title {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    word-break: break-word;
}

/* 手機月檢視（非預設，店家自己切過去）格子只有約 50px 寬，折行也放不下 →
   維持單行 + 省略號，靠點擊看詳情。 */
@media (max-width: 575.98px) {
    .fc-dayGridMonth-view .fc-event .fc-event-title {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575.98px) {
    /* ⚠️ 這裡曾經寫過 `.fc-view-harness { height: auto !important }`（v67），想讓容器隨內容長高，
       結果**把容器壓成 0px**（FullCalendar 的子層是絕對定位，靠 harness 的實高撐開）→
       清單與月檢視的內容整片溢出、被頁尾蓋住，比原本的問題更嚴重。v68 已移除。
       月檢視原本的溢出改由 `dayMaxEvents: true` 解決（106px → 10px），
       且手機預設已改清單檢視。**不要再嘗試用 height:auto 覆蓋 FullCalendar 的高度計算。** */
    .fc-dayGridMonth-view .fc-event .fc-event-time {
        display: none;
    }
    .fc-dayGridMonth-view .fc-event .fc-event-title {
        font-size: 0.7rem;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fc-dayGridMonth-view .fc-event {
        padding: 1px 3px;
    }
    /* 「+N 則」連結放大到可點（原本疊在事件下方很難命中） */
    .fc-daygrid-more-link {
        font-size: 0.7rem;
        padding: 2px 4px;
        display: inline-block;
    }
}

/* 手機版資料表格密化：縮 padding/字級，讓「操作」欄盡量落在畫面內、減少橫捲 */
@media (max-width: 575.98px) {
    .data-table-body .table > :not(caption) > * > * {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .data-table-body .table {
        /* 2026-08-01 UX 評審：目標客群含中高齡店主，13.6px 偏小 → 提到 14.4px */
        font-size: 0.9rem;
    }
    /* 操作欄按鈕緊湊排列，避免被推出 viewport */
    .data-table-body .table td .btn-sm,
    .data-table-body .table td .btn {
        padding: 0.25rem 0.4rem;
    }

    /* ❌ 手機「釘住操作欄」已移除（2026-08-02 第三輪複評後的根本修正）
       它是連續三輪 regression 的共同根因：390px 放不下整張表，釘住的那一欄就會「浮」在
       資料上面 —— 依序蓋掉過狀態徽章（切成「已確」「待確」）、售價（$450 顯示成「$4」，
       這種「看起來像正常數字的錯值」比截斷更危險）、甚至表頭本身（「操作」只印出「作」）。
       我先前用「調 max-width」試圖閃避重疊，本質是打地鼠：修好 A 欄就壓壞 B 欄。
       手機改為單純橫向捲動：所有欄位都完整可讀，捲一下就看得到操作鈕，沒有任何資料被遮蓋。
       （桌機保留 sticky —— 那裡表格塞得下容器，不會產生重疊。） */
    .data-table-body table > tbody > tr {
        --row-bg: #fff;
    }

    /* 手機不再壓縮欄寬（壓縮正是截斷金額的元兇），改讓表格自然寬度 + 橫捲 */
    .data-table-body td {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 160px;
    }

    /* 🔒 數字欄永不截斷：金額被截成「$4」會被誤讀為正確數字，是資料正確性問題不是版面問題 */
    .data-table-body td.text-end,
    .data-table-body td .num,
    .data-table-body td.num {
        max-width: none !important;
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* 🔒 狀態徽章永不折行/截斷 */
    .data-table-body td .badge {
        white-space: nowrap;
    }

    /* 名稱類欄位優先給寬度：不折成單字，最多兩行 */
    .data-table-body td:nth-child(2) {
        min-width: 7.5rem;
    }

    /* 編號/訂單號這類不該折行的識別碼：單行 + 省略號（折兩行會讓一屏少看 2 筆） */
    .data-table-body td.cell-id,
    .data-table-body td .text-nowrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 狀態欄不壓縮，確保徽章完整顯示 */
    .data-table-body td:has(> .badge),
    .data-table-body td .badge {
        white-space: nowrap;
    }
    /* 但「操作欄」與明確標記 nowrap 的欄位維持單行 */
    .data-table-body td:last-child,
    .data-table-body td.text-nowrap {
        white-space: nowrap;
    }

    /* 次要文字（電話/時間等）字級回到可讀範圍 */
    .data-table-body .small,
    .data-table-body small {
        font-size: 0.8rem;
    }
}

/* ========================================
   手機後台可用性強化 批次1（2026-06-25 多 agent 體檢後）
   ======================================== */

/* H1：Modal 內容可獨立捲動 + footer 固定可見（修「儲存鈕跑出畫面看不到」）
   等同對所有 modal 套用 modal-dialog-scrollable，並補 iOS 安全區。
   2026-06-26 升級 pointer:coarse——iPad（820/橫向）的長表單 Modal footer 一樣會跑出畫面 */
/* 2026-08-02 修正兩點（實測後）：
   ① 扣的高度不夠：`100dvh - 1rem` = 752，但 .modal-dialog 自己有上下各 1.75rem 邊距，
      752 + 28 = **780** —— 正好等於量到的「頁尾掉出畫面 12px」（vh 768）。改扣 3.5rem。
   ② 只套 pointer:coarse，桌機完全沒保護：1440 實測 services 表單頁尾在 1288（畫面才 900）、
      products 在 1025，長表單的「儲存」按鈕開啟時根本看不到。改成所有裝置都套用。 */
.modal-content {
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
}
.modal-body {
    overflow-y: auto;
}

/* 手機分頁列改換行，不要橫捲（2026-08-02 量測）：
   分頁在可橫捲容器裡「滑得到但預設看不到」——
   選單設計的第二個分頁「Flex 主選單」右緣 493（畫面 390）完全在畫面外，
   而 LINE 稽核指出「店家改了選單怎麼沒生效」的頭號原因正是**沒人點過第二個分頁**
   （Rich Menu 與 Flex 主選單各有各的發布鈕）；設定頁也有 4 個分頁（通知/點數/行事曆同步/帳號安全）
   在畫面外。換行後全部一眼看得到，代價只是分頁列多佔一兩行高度。 */
@media (max-width: 991px) {
    #content .nav-tabs,
    #content .nav-pills {
        flex-wrap: wrap;
    }
}

/* WCAG 2.5.8（AA）目標尺寸最低 24×24 —— **不分輸入裝置**，桌機滑鼠一樣適用。
   下面的 pointer:coarse 區塊把主要控制項再拉到 44px（Apple HIG），這一區是全裝置的底線。
   2026-08-02 桌機實測仍有 109 個低於 24px（keyword-replies 的 chip 51 個、
   預約列表的勾選框 14×14、開關 25×12）。 */
/* ========================================
   勾選框／開關／單選鈕：尺寸與排版的單一來源（2026-09-30 P0）
   ────────────────────────────────────────
   ⚠️ 事故：這裡原本只把 .form-check-input 放大成 1.5rem（觸控 1.625rem），
   留給它的位置卻還是 Bootstrap 的 `.form-check{padding-left:1.5em}`＋
   `.form-check-input{float:left;margin-left:-1.5em}`（em 跟著字級走，14px 時只有 21px）：
   ① 框比位置寬 → 框直接貼住／壓進文字（gap 0，開關則蓋掉第一個字）
   ② 浮動的框（24px＋上邊距）比一列高 → 下一列的框被上一列擋住往右推，
      逐列累積成階梯（生產 1440 實測「編輯員工 → 可承接的服務項目」框的 left 依序
      336→339→342…354）
   ③ 觸控裝置上長標籤整段掉到框的下一行。
   這不是某一頁的問題，是全站每一個 .form-check（當時量到 84 處以上）。

   修法：不再靠 float＋負邊距，改成兩欄 grid——
     第 1 欄＝框（寬度 auto，自動等於勾選框或開關的實寬，放大多少都不會再壓字）
     第 2 欄＝標籤；說明文字（.form-text／.small）自動排在標籤下一列、與標籤左緣對齊。
   框固定在第 1 列（grid-row:1），標籤寫在框前面的樣板也不會錯位。
   尺寸只在這裡的變數改（--fc-w／--fc-h），觸控放大只改變數，排版不必跟著動。
   守衛：tests/suite/253-form-check-layout.spec.ts（自動掃每頁、每個分頁、每個展開的 <details>、
   每個打開的視窗裡看得見的 .form-check，含裸文字與只有框的形狀）
   ======================================== */
:root {
    --fc-w: 1.5rem;
    --fc-h: 1.5rem;
    --fc-gap: 0.5rem;
}
.form-switch {
    --fc-w: 2.5rem;
    --fc-h: 1.5rem;
}
/* `.form-switch .form-check-input` 不可省：common.css 的觸控區塊有同特異度（0,2,0）的 2.4em×1.3em，
   只寫 `.form-check-input`（0,1,0）會輸給它，觸控裝置上的開關縮回 31×16。 */
.form-check-input,
.form-switch .form-check-input {
    width: var(--fc-w);
    height: var(--fc-h);
}
.form-check,
.form-check.form-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--fc-gap);
    align-items: start;
    padding-left: 0;
    min-height: 0;
}
.form-check-inline,
.form-check.form-check-inline {
    display: inline-grid;
    vertical-align: middle;
}
.form-check .form-check-input,
.form-switch .form-check-input {
    float: none;
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
    /* 框的中線對齊標籤第一行的中線（標籤行高 1.5em）。框比一行高時為負值，
       由下面標籤的 padding-top 補回，所以整列不會往上凸。 */
    margin-top: max(0px, calc((1.5em - var(--fc-h)) / 2));
}
.form-check > :not(.form-check-input) {
    grid-column: 2;
}
.form-check > .form-check-label {
    padding-top: max(0px, calc((var(--fc-h) - 1.5em) / 2));
}
/* 「看起來只有框」的容器（列表批次勾選）：不留空的第 2 欄。
   ⚠️ :has 看不到文字節點——`<label class="form-check"><input>不顯示圖示</label>`（文字沒有元素包著）
   也會命中這條。第一版寫成單欄 grid，裸文字就被排到框的下一列（2026-10-01 審查抓到：
   選單設計「每格設定 → 外觀」的「不顯示圖示」「去背」開關，文字掉到開關正下方；當時的
   「全站 11 個只有框的容器都沒有裸文字」普查是錯的——那兩個開關是 JS 產生、而且收在 <details> 裡）。
   現在的保證：顯式欄只有 1 欄＋grid-auto-flow:column ⇒ 任何多出來的東西（含裸文字）自動長出
   同一列的第 2 欄，欄距照樣是 --fc-gap（單欄時不會產生欄距，所以純勾選框仍然沒有多餘空白）。
   仍建議文字一律包 <label class="form-check-label">（才有 padding-top 對齊與點擊區）。
   守衛：tests/suite/253-form-check-layout.spec.ts 的裸文字正向對照。 */
.form-check:not(:has(> :not(.form-check-input))) {
    display: inline-grid;
    grid-template-columns: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, auto);
    align-items: center;
}
.kw-chip,
.badge.kw-chip {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}
.btn-sm {
    min-height: 24px;
    /* 寬度也要有底線：「使用小提醒」的收合箭頭帶 p-0，量到只有 14px 寬 */
    min-width: 24px;
}
/* 麵包屑連結（量到 48×18）：加上下 padding 撐到 24px，不改字級。
   ⚠️ 本專案的麵包屑實際是 `.page-eyebrow`（不是 Bootstrap 的 .breadcrumb），
   只寫 .breadcrumb 會完全打不到——這就是為什麼 28 頁「每頁都還剩 1 個」。 */
.breadcrumb a,
.breadcrumb-item a,
.page-eyebrow a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
}
/* Bootstrap 關閉鈕預設 1em（量到 21×21） */
.btn-close {
    width: 24px;
    height: 24px;
    background-size: 12px;
}
/* 行事曆「+N more」（量到 51×16） */
.fc-daygrid-more-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}
/* 月檢視事件方塊（1920 量到 13 個 218×22，差 2px）。
   這條原本只寫在 pointer:coarse 區塊，桌機滑鼠吃不到——WCAG 24px 不分輸入裝置。 */
.fc-daygrid-event {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* ========================================
   觸控目標放大（2026-08-02 三尺寸量測：390 有 221 個、1024 有 239 個控制項低於 40×40，
   最小的只有 7.6px）。
   ⚠️ 刻意「放大實際控制項」而不是用 ::after 偽元素擴大點擊範圍——後者會蓋住相鄰元素，
   製造新的遮擋問題（今天已有一條 bug 正是元素被自己的外框蓋住）。
   內文中的行內小連結不強制拉到 44px（會把版面撐鬆、一頁看到的資料變少），
   改成給足上下 padding 提高到可穩定點按的高度。
   ======================================== */
@media (pointer: coarse) {
    /* 勾選框／開關的觸控尺寸改由本區塊下方的 --fc-w／--fc-h 變數統一決定
       （2026-09-30：這裡原本還有一組 1.375rem／2.75rem×1.5rem，被同一個 media query 更後面的
       1.625rem／2.75rem×1.75rem 蓋掉＝死宣告，已刪除）。 */
    /* ⚠️ 2026-09-04 更正：這行原本的註解「.btn-sm 已有 min-height:44px」是**錯的**，
       而且錯了之後只補了寬度、高度就這樣漏了一整年。
       事實鏈：common.css（先載入）`@media (hover:none) and (pointer:coarse){ .btn{min-height:44px} }`
       ↔ tenant.css 上面那條**沒有包 media query** 的 `.btn-sm{min-height:24px}`（WCAG 24px 底線）。
       兩者特異度相同（都是單一 class），tenant.css 在後 → **24px 贏**。
       生產實測（390×844 觸控，/tenant/dashboard）：立即設定／前往收款方式／複製／開啟／
       查看全部／新增預約／詳細／詳細報表 八顆的 computed min-height 全是 24px、實高 25.2px。
       這裡補回 44px（同特異度、更後面 → 蓋過那條 24px），不動「不分裝置的 24px 底線」，
       桌機滑鼠仍維持 24px。守衛：tests/suite/242-rwd-btn-sm-touch-height.spec.ts */
    .btn-sm {
        min-height: 44px;
        min-width: 40px;
    }
    /* ⚠️ 色票類「固定尺寸方塊」要排除：它們是 24px 的顏色樣本，被 min-width 撐成 40px 後
       整排擠出畫面（v67 實測 line-settings 的「暗黑」色票右緣 403 > 畫面 390 且無可捲容器
       ＝真的點不到，v67 之前這頁是乾淨的——是我加的規則造成的）。
       旁邊本來就有精確選色器，色票只是快捷樣本。 */
    /* ⚠️ 2026-09-04 補 min-height：同一條註解記載的事故發生了第二次。
       上面那段講的是 v67 用 min-width 把色票撐寬「整排擠出畫面」；
       這次是為了修觸控高度給 .btn-sm 加了 min-height:44px，而 **min-height 永遠壓過
       height**（不同屬性，樣板寫死的 inline `style="width:24px;height:24px"` 擋不住）
       → line-settings 的 5 顆標題底色色票被拉成 24×44 的直條。
       這次只有觀感（沒擠出畫面、還點得到），但清單漏了一半就是漏了。
       **這份排除清單以後新增任何尺寸相關的觸控放大規則都要一起 reset。**
       守衛：tests/suite/242-rwd-btn-sm-touch-height.spec.ts「色票必須維持正方形」那組。 */
    .flex-header-preset,
    .color-swatch,
    input[type="color"].form-control-color {
        min-width: 0;
        min-height: 0;
    }
    /* 麵包屑、內文小連結、chip、行事曆「+N」：給足上下 padding 撐開可點高度 */
    .breadcrumb-item a,
    a.small,
    .btn-link.btn-sm,
    .fc-daygrid-more-link,
    .fc-list-day-text {
        display: inline-block;
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 1.4;
    }
    /* 行事曆圖例 chip（量到 19.2px） */
    .legend-toggle {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* ↓ 以下針對 2026-08-02 量測列出的實際元素逐項處理。
       採用的標準：主要控制項 44px（Apple HIG），其餘至少 24×24（WCAG 2.5.8 AA 最低要求）。
       **句子中的行內連結刻意不強制放大**——WCAG 2.5.8 對它明文豁免，硬撐成 44px 會毀掉排版。 */

    /* 行事曆工具列按鈕（上／下個月、今天、月／週／日）。
       ⚠️ 2026-09-09 更正：原註解「量到 39×44，只差 1px」的**高度那半已經漂移**——
       實測（iPad Pro 11 橫向／Galaxy Tab S4 橫向／768／1280／桌機 1440）一律是
       **上下月 36px、今天與月週日 34px**，不是 44。只補 `min-width` 讓高度漏了。
       為什麼 767.98px 那條 `min-height:44px` 救不到：它是 `max-width: 767.98px`，
       而 iPad 直向就有 810 ⇒ **768 以上的觸控裝置整段落空**（與 `#currentTenantChip`、
       與 2026-08-02 M1 註解記的側欄連結，是同一個形狀的第三次）。
       這裡補高度，範圍是整個 `pointer: coarse`（含 <768，與那條同值不衝突）；桌機滑鼠不受影響。 */
    .fc .fc-button {
        min-width: 40px;
        min-height: 44px;
    }
    /* 月檢視日期數字（1024 量到 28 個 28×29）與星期標題 */
    .fc-daygrid-day-number,
    .fc-col-header-cell-cushion {
        padding: 6px 8px !important;
        display: inline-block;
    }
    /* 月檢視事件（1024 量到 16 個高 22px）與清單檢視的日期列 */
    .fc-daygrid-event {
        min-height: 26px;
        display: flex;
        align-items: center;
    }
    .fc-list-day-text,
    .fc-list-day-side-text {
        min-height: 32px;
    }
    /* 關鍵字 chip（22px）與範本分類鈕（28px） */
    .kw-chip,
    .sample-cat-btn {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }
    /* 勾選框／單選鈕拉到 26px、開關 44×28px。只改變數——排版（上面的 grid）自動跟著寬度走，
       不必再另外調 padding／負邊距（那正是 2026-09-30 之前階梯與壓字的成因）。 */
    :root {
        --fc-w: 1.625rem;
        --fc-h: 1.625rem;
    }
    /* 開關 52×32（2026-10-20 QA：44×28 在手機上低於 32px 觸控下限；與 iOS 原生開關同尺寸） */
    .form-switch {
        --fc-w: 3.25rem;
        --fc-h: 2rem;
    }
}

@media (pointer: coarse) {
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    /* Modal footer 按鈕達觸控標準（原 31px）*/
    .modal-footer .btn {
        min-height: 44px;
    }
}

/* H2：手機列表「操作」欄固定在右側，橫向捲動時永遠可見（不必滑到底才點得到）
   覆蓋 bookings/staff/services/products/membership 等列表 */
/* A3（2026-06-26 升級）：改 pointer:coarse 涵蓋 iPad（820 也會溢出）；排除 #shiftsTable
   （班表最後一欄是「週日」不是操作欄，且它有自己的員工欄 sticky，套右 sticky 會錯位）*/
/* ⚠️ 2026-08-02：本區塊的「手機/平板釘住最後一欄」已停用（僅保留大螢幕版；斷點 2026-09-30 起是 ≥1200px，見下）。
   它是第三輪複評三個 regression 的真正來源——我先前只改 max-width 區塊，完全沒碰到這條
   2026-06-26 的舊規則，所以「釘住的操作欄浮在資料上」一直存在：
   狀態徽章被切成「已確」、售價 $450 顯示成「$4」（看起來像正常數字的錯值）、表頭「操作」只剩「作」。
   小螢幕塞不下整張表時，釘住任何一欄都必然覆蓋資料；正解是單純橫捲，所有值都完整可讀。
   ⚠️ 若未來要恢復，必須先確保表格總寬 ≤ 容器寬（否則就是重演這個 bug）。 */
/* ⚠️ 2026-09-30：這條原本是 (min-width: 992px)，而且特異度（:not(#id) 算 1,x,x）還高過 992~1199 帶
   那條「不釘」的規則 ⇒ 觸控平板橫向（1024／1180）操作欄照樣釘住、蓋掉「狀態」欄（2026-09-25 以為修好了，
   其實只修到滑鼠）。改成 ≥1200 才釘，與非觸控的斷點一致。 */
@media (pointer: coarse) and (min-width: 1200px) {
    .table-responsive > .table:not(#shiftsTable) > thead > tr > th:last-child,
    .table-responsive > .table:not(#shiftsTable) > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        background-color: #fff;
        box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.08);
    }
    .table-responsive > .table:not(#shiftsTable) > thead > tr > th:last-child {
        background-color: var(--bs-table-bg, #f8f9fa);
    }
}

/* M1：觸控目標放大到 44pt（漢堡鍵 40→44、店家 chip、側欄子選單連結 37→44）*/
@media (max-width: 991.98px) {
    .btn-sidebar-toggle {
        width: 44px;
        height: 44px;
    }
    /* ⚠️ 2026-09-11 QA-J 更正：這裡原本對 #currentTenantChip 寫 padding-top/bottom:10px，
       而那顆 button 的 inline style 有 `padding:6px 14px`——inline 永遠贏過樣式表，
       這兩行從來沒生效過（平板直向實測 35px，不是下面舊註解說的 53px）。
       chip 的觸控高度改由檔尾那條不分寬度的 (hover:none),(pointer:coarse) min-height 負責。 */
    #sidebar .sidebar-sub-nav .nav-link {
        padding-top: 10.5px;
        padding-bottom: 10.5px;
    }
}

/* M1 補漏（2026-08-02）：上面那條寫死 max-width:991.98px，**iPad 橫向（1024 寬）整個吃不到**
   → 側欄連結在觸控裝置上量到 234×37，比 44px 觸控標準矮一截，而它出現在每一頁。
   改用 pointer:coarse 補上寬螢幕觸控裝置（桌機滑鼠不受影響）。 */
@media (pointer: coarse) and (min-width: 992px) {
    #sidebar .nav-link,
    #sidebar .sidebar-sub-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    #tenantSwitcherSidebar {
        min-height: 44px;
    }
    /* 「當前店家」chip 的觸控高度已搬到檔尾「觸控目標 ≥44px（2026-09-11 QA-J）」那一段，
       不分寬度（這裡的 min-width:992px 讓 <992 的平板直向整段落空，而那一段的 padding 規則又被 inline 蓋掉）。 */
}

/* M2 已由 common.css 的 @media(pointer:coarse) .btn-sm{min-height:44px} 取代（涵蓋手機+iPad+觸控桌面）。
   原本「排除表格內按鈕」的規則移除——5 輪深掃確認列表操作鈕 30px 不可點是 HIGH，應一律 44px（列變高可接受）*/

/* A4（2026-06-26 升級 pointer:coarse）：班表員工欄固定左側（手機+iPad 橫滑看整週仍知道是哪位員工）*/
@media (pointer: coarse) {
    #shiftsTable thead th:first-child,
    #shiftsTable tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.08);
    }
    #shiftsTable thead th:first-child {
        background-color: #f1f3f5;
    }
}

/* 表格橫向捲動提示（2026-09-25，tenant.js initTableScrollHints 依「真的溢出」切 d-none）。
   ⚠️ 不可對 display 加 !important（會蓋掉 d-none，藏不住）。 */
.table-scroll-hint {
    font-size: 0.8rem;
    /* 2026-10-16：#8a8a8e 對白底只有 3.43:1（axe serious）→ 共用 token（#6e6e73，約 5:1） */
    color: var(--text-secondary);
    text-align: right;
    padding: 4px 8px 2px;
}

/* 庫存異動頁篩選列（2026-09-25 RWD）：兩個下拉 inline 寫死 180／150px，360 手機合計比容器寬 3px。
   手機改成可折行、各自彈性分寬；寬度只能用 !important 蓋 inline width（不碰 display）。 */
@media (max-width: 575.98px) {
    #inventoryFilters {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }
    #inventoryFilters .form-select {
        flex: 1 1 140px;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
    }
}

/* 橫向捲動提示（班表等寬表格用，觸控裝置顯示）*/
.mobile-scroll-hint {
    display: none;
}
@media (pointer: coarse) {
    .mobile-scroll-hint {
        display: block;
        font-size: 0.82rem;
        /* 2026-10-16 手機儀表板 #staffPerfScrollHint 實測 3.43:1 → 共用 token */
        color: var(--text-secondary);
        text-align: center;
        padding: 4px 0;
    }
}

/* ========================================
   儀表板 onboarding 橫幅統一版式（2026-07-31 質感審計次優先 #1）
   三種樣式（alert-success LINE 綁定 / alert-primary 行事曆推廣 / 白卡紅圈提醒卡）
   → 統一「白卡 + 左側 4px 色條」。只動 class/樣式，id 與 d-none 顯示機制不動。
   ======================================== */

.alert.onboard-banner {
    background-color: #fff;
    color: var(--dark-color);
    border: 1px solid #e8e8ed;
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}
.onboard-banner.onboard-primary { border-left-color: var(--primary-color); }
.onboard-banner.onboard-success { border-left-color: var(--success-color); }
.onboard-banner.onboard-danger  { border-left-color: var(--danger-color); }

/* 提醒卡片列（#alertCards）同版式：原 border-info/warning/danger 全框
   因 common.css .card{border:none} 實際上沒顯示（=白卡紅圈），改為左側 4px 色條。
   注意 pushQuotaWarningCard 的 class 由 JS 重設為 'card border-danger|warning'，
   故此處用 CSS 收編既有 class、不動 HTML/JS（JS 重設後樣式照樣命中）。 */
#alertCards .card.border-info, #alertCardsTop .card.border-info,
#alertCards .card.border-warning, #alertCardsTop .card.border-warning,
#alertCards .card.border-danger, #alertCardsTop .card.border-danger {
    border: 1px solid #e8e8ed !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}
#alertCards .card.border-info, #alertCardsTop .card.border-info    { border-left-color: var(--info-color) !important; }
#alertCards .card.border-warning, #alertCardsTop .card.border-warning { border-left-color: var(--warning-color) !important; }
#alertCards .card.border-danger, #alertCardsTop .card.border-danger  { border-left-color: var(--danger-color) !important; }

/* 顧客詳情「儲值金」卡片標頭（2026-09-25）：768~1199 側欄＋右欄很窄，標題與三顆按鈕
   擠同一列被壓成直排兩字一行。允許折行：標題一列、按鈕組一列；字本身不斷行。 */
#storedValueCard > .card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}
#storedValueCard > .card-header > h6,
#storedValueCard > .card-header .btn-group > .btn {
    white-space: nowrap;
}

/* 提醒卡片在手機上折行（2026-09-25）：「圖示＋文字＋按鈕＋×」擠同一列時，
   360/390 文字只剩約 130px 寬（#paymentModeNoGatewayAlert 實測一行三四個字）。
   手機改成：第一列 圖示＋文字＋×、按鈕自己一列。只動版面不動文字。 */
@media (max-width: 575.98px) {
    #alertCards .card-body.d-flex, #alertCardsTop .card-body.d-flex {
        flex-wrap: wrap;
    }
    #alertCards .card-body.d-flex > .flex-grow-1, #alertCardsTop .card-body.d-flex > .flex-grow-1 {
        flex: 1 1 0;
        min-width: 0;
    }
    #alertCards .card-body.d-flex > .btn-close, #alertCardsTop .card-body.d-flex > .btn-close {
        order: 1;
        align-self: flex-start;
    }
    #alertCards .card-body.d-flex > .btn:not(.btn-close), #alertCardsTop .card-body.d-flex > .btn:not(.btn-close) {
        order: 2;
        flex-basis: 100%;
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}

/* ========================================
   手機 dashboard stat 卡 2×2（2026-07-31 質感審計次優先 #2）
   col 改 col-6（桌機欄寬不變），彩色大圓 icon 手機縮小、間距收緊防 390px 溢出。
   ======================================== */

@media (max-width: 767.98px) {
    .dashboard-stats .stat-icon-circle {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    .dashboard-stats > [class*="col-"] {
        margin-bottom: 1rem !important;
    }
    .dashboard-stats .card-body {
        padding: 0.875rem 0.75rem;
    }
    .dashboard-stats .stat-value {
        font-size: 1.125rem;
        word-break: break-all; /* 極端長金額不撐爆 col-6 卡片 */
    }
}

/* 使用小提醒收合標題列（services.html；純 Bootstrap collapse，chevron 隨展開狀態旋轉） */
.help-collapse-toggle .bi-chevron-down {
    display: inline-block;
    transition: transform 0.2s ease;
}
.help-collapse-toggle.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}
/* 2026-10-01 2H：標題列改成真的 <button>（div[role=button] 在 iPhone 點了不會產生 click）。
   原本靠裡面那顆 .btn 撐出觸控高度，拿掉之後由這裡補。 */
button.help-collapse-toggle {
    min-height: 2rem;
    color: inherit;
}
@media (hover: none), (pointer: coarse) {
    button.help-collapse-toggle {
        min-height: 44px;
    }
}