/* common/core.css：後台／超管共用樣式第 1／2 支「設計 token、基礎、卡片、表格、按鈕、徽章、表單、分頁、Modal、Toast、Loading、空狀態、工具類、響應式、RWD 工具類、觸控打底」（2026-10-12 由 common.css 第 1～992 行逐字切出；依 tenant/layout.html 的 link 順序串接＝原檔）---- 以下逐字搬自拆分前的 common.css ---- */
/**
 * 共用樣式
 *
 * 預約平台 - 共用 CSS（Apple 風格）
 */

/* ========================================
   CSS 變數
   ======================================== */

:root {
    /* 主要顏色 */
    --primary-color: #4361ee;
    --primary-hover: #3a56d4;
    --secondary-color: #86868b;
    /* 次要「文字」專用（2026-10-01 UI 稽核 M7）：#86868b 白底對比只有 3.62:1、頁底 #f5f5f7 上 3.33:1，
       不到 WCAG AA 小字 4.5:1。文字一律改用這個（白底 5.07:1、#f5f5f7 上 4.66:1、#f2f2f7 上 4.54:1）；
       --secondary-color 留給圖示、邊框、停用狀態與「已取消」狀態色（那些不是要讀的字）。 */
    --text-secondary: #6e6e73;
    --success-color: #34c759;
    --info-color: #5ac8fa;
    --warning-color: #ff9f0a;
    --danger-color: #ff3b30;
    --light-color: #f5f5f7;
    --dark-color: #1d1d1f;

    /* 背景漸層 */
    --bg-gradient-primary: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    --bg-gradient-success: linear-gradient(135deg, #34c759 0%, #30b350 100%);
    --bg-gradient-info: linear-gradient(135deg, #5ac8fa 0%, #32ade6 100%);
    --bg-gradient-warning: linear-gradient(135deg, #ff9f0a 0%, #ff8800 100%);
    --bg-gradient-danger: linear-gradient(135deg, #ff3b30 0%, #d70015 100%);

    /* 側邊欄寬度 */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 80px;

    /* 陰影 - 極簡柔和 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* 圓角 4 級收斂（2026-07-31 質感審計 #5：35px 高按鈕配 12px 圓角是玩具感主因）
       sm 6px（btn-sm/checkbox）/ md 8px（按鈕/input）/ lg 12px（卡片/modal）/ full 999px（膠囊） */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    /* 2026-10-01 UX 改版 1A：四級圓角的正式名稱。--radius-sm 在 tenant.css 被引用了三次卻從未定義（一直吃 6px 備援值），這裡補上。
       舊名 --border-radius／--border-radius-lg 照舊保留、數值相同（md＝8、lg＝12），新寫的樣式用下面這組。 */
    --radius-sm: 6px;     /* 徽章、勾選框、分段選擇裡的單格 */
    --radius-md: 8px;     /* 按鈕、輸入框、分段選擇外框、提示框 */
    --radius-lg: 12px;    /* 卡片、視窗、儲存列 */
    --radius-full: 999px; /* 只給 chip 與狀態徽章 */

    /* 字級階梯（2026-10-01 UX 改版 1A，依 09-30 後台報告「方向 2」：24／18／16／14／13／12，最小 12px）
       計畫書寫「五階」，報告實際列了六個尺寸；這裡照報告定義六個，最小字級 12px 不可再小。 */
    --fs-page-title: 1.5rem;       /* 24px 頁標題 */
    --fs-section-title: 1.125rem;  /* 18px 區塊標題 */
    --fs-card-title: 1rem;         /* 16px 卡片標題 */
    --fs-body: 0.875rem;           /* 14px 內文 */
    --fs-caption: 0.8125rem;       /* 13px 說明 */
    --fs-min: 0.75rem;             /* 12px 最小：KPI 標籤、表頭、徽章 */

    /* 狀態色的「深色字」與淺底（2026-10-01 UX 改版 1A）：狀態色本身（#34c759 等）放在淺底上當字不到 4.5:1，
       字一律用 *-text；對比由 tests/ui-components-check.js 實算（每一組 *-text 對 *-subtle 與白底都要 ≥4.5:1）。 */
    --primary-text: #2a3eb1;
    --success-text: #1f7a35;
    --warning-text: #9a5b00;
    /* 2026-10-15 由 #c4271d 加深：灰色提示框（Bootstrap alert-secondary #e2e3e5）裡的紅字只有 4.47:1（手機 axe 稽核）；
       #b3261e 白底 6.54、--danger-subtle 上 5.94、#e2e3e5 上 5.09 */
    --danger-text: #b3261e;
    /* 資訊色的深色字（2026-10-15）：#5ac8fa 只適合當底色／圖示 */
    --info-text: #0a6b87;
    --primary-subtle: #eef1fe;
    --success-subtle: #eafaf0;
    --warning-subtle: #fff6e5;
    --danger-subtle: #fff1f0;
    --neutral-subtle: #f5f5f7;
    --seg-bg: #f2f2f7;
    --border-color: #e5e5ea;

    /* 字體 */
    --font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ========================================
   基礎樣式
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: 0.875rem;
    background-color: var(--light-color);
    color: var(--dark-color);
}

/* 連結字走 --primary-text（2026-10-15 手機 axe 稽核）：#4361ee 白底 5.02 夠，但壓在灰色提示框（#e2e3e5）只有 3.90 */
a {
    color: var(--primary-text);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* 夾在一段文字裡的連結要有底線（WCAG 1.4.1「不能只靠顏色」，axe link-in-text-block，2026-10-12）：
   主色藍 #4361ee 跟說明文字的灰（#6e6e73）亮度幾乎一樣（對比 1.01），色弱的人分不出哪幾個字可以點。
   只管「直接」放在段落／清單項目／提示框／小字裡的連結；按鈕型、選單型、分頁型的連結各有外框，不加底線。 */
:where(p, li, dd, small, .small, .form-text, .alert, .text-muted, .text-secondary) > a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.badge):not(.stretched-link),
:where(.alert, .form-text) :where(div, span, strong) > a:not(.btn):not(.dropdown-item):not(.badge) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 側邊欄（店家後台與超管同一個類別）選單 ul 裡的分隔線外面包一層 li：ul 的直接子元素只能是 li（axe list 規則，2026-10-12）。
   放在 common.css 是因為 tenant.css 在大檔棘輪裡只准變短。 */
.sidebar-divider-item {
    list-style: none;
    flex-shrink: 0;
}

/* FullCalendar 上／下個月的日期：預設 opacity .3（灰到 #bbbbbc，對比 1.9，axe color-contrast，2026-10-12）。
   調成 .7：看得出比本月淡，對比仍過 4.5。後台行事曆與員工專屬頁都載本檔；沒有行事曆的頁面不受影響。 */
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top {
    opacity: 0.7;
}

/* ========================================
   卡片樣式
   ======================================== */

.card {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0.875rem 1.25rem;
}

.card-header h6 {
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.card-body {
    padding: 1.25rem;
}

/* 統計卡片 */
.stat-card {
    border: none !important;
    border-left: none !important;
    border-radius: var(--border-radius-lg);
}

.stat-card.border-primary,
.stat-card.border-success,
.stat-card.border-info,
.stat-card.border-warning {
    border: none !important;
}

.stat-card .stat-label {
    font-size: 0.75rem; /* 2026-07-31 質感審計次優先 #5：0.7rem → 12px（字階 7 級最小級） */
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
}

.stat-card .stat-icon {
    font-size: 2rem;
    color: #dddfeb;
}

/* ========================================
   表格樣式
   ======================================== */

.table {
    margin-bottom: 0;
}

.table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    padding: 0.75rem;
    letter-spacing: 0.01em;
}

.table tbody td {
    vertical-align: middle;
    padding: 0.75rem;
    border-color: rgba(0, 0, 0, 0.04);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ========================================
   按鈕樣式
   ======================================== */

.btn {
    font-size: 0.875rem;
    border-radius: var(--border-radius);
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
    /* 按鈕文字不折行（2026-10-01 UX 第 2 波 2H，稽核 C4）：Bootstrap 的 .btn 預設可以折行，
       放在 flex 列裡會被壓成「員工專屬頁連結」直排 6 行、「發布到 LINE」折兩行這種樣子。
       放不下時應該是「整顆換到下一行」（容器要 flex-wrap），而不是把字折斷。
       整寬的按鈕（.w-100、.d-grid 裡的、.btn-block）沒有地方可以換，照舊可以折，見下一條。 */
    white-space: nowrap;
}

/* 整寬按鈕與刻意要折行的按鈕：照舊可以折（不然字比容器長時會撐破邊框）。
   個別按鈕真的需要折行，加 .btn-wrap。 */
.btn.w-100,
.btn-block,
.d-grid > .btn,
.btn.btn-wrap {
    white-space: normal;
}

.btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
}

/* 成功綠／危險紅的實心按鈕是白字（2026-10-01 2H，稽核 C5）：#34c759 配白字只有 2.22:1、#ff3b30 配白字 3.55:1，
   都不到 WCAG AA 小字 4.5:1。改用深一階的 --success-text／--danger-text 當底色（白字 5.39／6.54；危險紅 2026-10-15 加深前是 5.75）。
   一律用 Bootstrap 的按鈕變數整組覆蓋（含 hover／active／disabled），只改 background-color 的話
   滑過、按下、停用三個狀態會漏回 Bootstrap 原廠色。
   ⚠️ 只改「一般語意色」。預約狀態色（根 CLAUDE.md 那張表：.bg-status-*、.fc-event.status-*）不動。 */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--success-text);
    --bs-btn-border-color: var(--success-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #18652b;
    --bs-btn-hover-border-color: #18652b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #135223;
    --bs-btn-active-border-color: #135223;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--success-text);
    --bs-btn-disabled-border-color: var(--success-text);
    --bs-btn-focus-shadow-rgb: 31, 122, 53;
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger-text);
    --bs-btn-border-color: var(--danger-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a51f16;
    --bs-btn-hover-border-color: #a51f16;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8a1a12;
    --bs-btn-active-border-color: #8a1a12;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--danger-text);
    --bs-btn-disabled-border-color: var(--danger-text);
    --bs-btn-focus-shadow-rgb: 196, 39, 29;
}

.btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   徽章樣式
   ======================================== */

.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 999px;
}

/* 狀態徽章 */
.badge-status-active {
    background-color: var(--success-text);
    color: white;
}

.badge-status-pending {
    background-color: var(--warning-color);
    color: #1f2d3d;
}

.badge-status-inactive,
.badge-status-suspended {
    background-color: var(--secondary-color);
    color: white;
}

.badge-status-cancelled,
.badge-status-rejected {
    background-color: var(--danger-text);
    color: white;
}

.bg-no-show {
    background-color: #ece2fb !important;   /* 爽約（紫相）— 2026-08-02 全域 tint 化 */
    color: #4d2b8c !important;
    border: 1px solid rgba(111, 66, 193, 0.4);
}

.bg-unprocessed {
    background-color: #fce0d0 !important;   /* 未處理（深橘相，前端虛擬狀態） */
    color: #9c3600 !important;
    border: 1px solid rgba(230, 81, 0, 0.45);
}

/* 預約狀態徽章：對齊 CLAUDE.md 狀態色表 + 行事曆 .fc-event.status-*
   （取代 Bootstrap 預設色，讓列表徽章與行事曆同色；定義位置同步見 tenant.js BOOKING_STATUS_MAP）*/
/* 2026-08-02：全域統一為 soft tint（原本只有 .data-table-body 內 tint 化，
   造成同一個後台裡「顧客/庫存是淡底徽章、商品訂單/點數是高飽和實心 pill」兩套視覺語言）。
   色相語意完全不變，只降飽和 + 補同色相邊框。
   行事曆事件（.fc-event.status-*）維持實心色塊——那裡色塊本身即主要辨識物。 */
.bg-status-pending {
    background-color: #fff1d6 !important;   /* 待確認（橘相） */
    color: #7a4f00 !important;
    border: 1px solid rgba(255, 159, 10, 0.45);
}
.bg-status-confirmed {
    background-color: #e4eaff !important;   /* 已確認（主色相） */
    color: #24358f !important;
    border: 1px solid rgba(67, 97, 238, 0.4);
}
.bg-status-completed {
    background-color: #ddf5e6 !important;   /* 已完成（綠相） */
    color: #146c37 !important;
    border: 1px solid rgba(52, 199, 89, 0.45);
}
.bg-status-cancelled {
    background-color: #eeeef0 !important;   /* 已取消（中性） */
    color: #55555b !important;
    border: 1px solid rgba(134, 134, 139, 0.4);
}

/* ========================================
   表單樣式
   ======================================== */

.form-control,
.form-select {
    font-size: 0.875rem;
    border-radius: var(--border-radius);
    border-color: #e8e8ed;
    background-color: #fafafa;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    background-color: #fff;
    /* 質感審計 #4：alpha .1 肉眼難辨 → .25 讓 focus 態清楚可見 */
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark-color);
}

.form-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ========================================
   分頁樣式
   ======================================== */

.pagination {
    margin-bottom: 0;
}

.pagination .page-link {
    color: var(--primary-color);
    border-color: #e8e8ed;
    border-radius: 8px;
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    /* 2026-09-30：上面 `.pagination .page-link{color:primary}` 與 Bootstrap 的 `.active>.page-link` 特異度相同且較晚載入，
       把目前頁碼的白字蓋成藍字＝藍字壓藍底，看不出自己在第幾頁（所有用 renderPagination 的列表頁都中）。 */
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--secondary-color);
}

/* ========================================
   Modal 樣式
   ======================================== */

.modal-content {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-title {
    font-weight: 700;
    color: var(--dark-color);
}

/* ========================================
   Toast 通知樣式
   ======================================== */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    /* 容器不吃點擊：它是 fixed 且會隨內容變寬，實測在 1024 蓋住 line-settings 的 25 個控制項
       （含 webhook 網址欄與它的測試按鈕）——提示訊息本身是暫時的，但那幾秒內店家點不到底下的東西。
       容器改成穿透，只有 toast 本體接受點擊（仍可點關閉）。 */
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
}

/* 視窗（modal）開著時，提示訊息改到左上角（2026-10-01 UX 第 2 波 2H）：
   原本在右上角，正好蓋住視窗右上角的 ×。逐顆點擊稽核在三種裝置、11 個表單量到「×
   點不到」——存檔失敗跳一則紅字，店家想關掉視窗卻按不到，而那幾秒內關不掉視窗，
   後面整頁也被視窗攔下（班表頁「請假」視窗之後的「輪休」「請假」鈕點不到就是這樣來的）。
   改到左上角只會蓋到視窗標題（不能點的字）；刻意不移到底部——手機上視窗底部就是
   「儲存／重試」鈕，蓋住它更糟。手機版的寬度規則在下方 ≤575.98 那一段。 */
body.modal-open .toast-container {
    left: 1rem;
    right: auto;
}

.toast {
    min-width: 300px;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast-info {
    border-left: 4px solid var(--info-color);
}

/* ========================================
   Loading 樣式
   ======================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid var(--light-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   空狀態樣式
   ======================================== */

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

/* 只放大「空狀態本身的那個大圖示」（直接子層）。
   2026-09-11 正式站複驗 R4 N1：原本寫成後代選擇器，連空狀態裡按鈕的小圖示也一起放到 4rem——
   超管店家列表「清除篩選條件」鈕的 ⊗ 大到把按鈕撐成一個圓球（功能管理「初始化功能」鈕同型）。
   全站三處空狀態的大圖示都是 .empty-state 的直接子層，改成 > 不影響它們。 */
.empty-state > i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h5 {
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

/* ========================================
   工具類
   ======================================== */

/* flex 子項允許收窄（Bootstrap 5 沒有這個 utility，2026-09-25 前模板用了卻從未定義＝無作用）。
   配 overflow-wrap：沒有空白的長名稱（LINE 暱稱、英文店名）要能在子項內折行，
   否則會把同列的徽章／按鈕推出卡片（dashboard 最近活動在 iPad 768 實測）。
   text-truncate 的子元素不受影響（它自己 nowrap + ellipsis）。 */
.min-w-0 {
    min-width: 0 !important;
    /* 用 break-word 不用 anywhere：anywhere 會把 min-content 壓成一個字元，
       放在表格格子裡的 flex（dashboard 今日預約）會被自動版面擠成一字一行 */
    overflow-wrap: break-word;
}

/* 2026-10-15 手機 axe 稽核：#4361ee 當字在淡藍底（#cfe2ff 3.81、#e4eaff 4.18）不到 4.5，改深一階 --primary-text（白底 9.4） */
.text-primary {
    color: var(--primary-text) !important;
}

/* 語意文字色（2026-10-01 2H，稽核 C5）：#34c759／#ff9f0a／#ff3b30 當文字在白底只有 2.22／2.06／3.55:1，
   改用 --*-text（白底 5.39／5.43／6.54、頁底 #f5f5f7 上 4.95／4.98／6.00；危險紅 2026-10-15 由 #c4271d 加深）。 */
.text-success {
    color: var(--success-text) !important;
}

/* 2026-10-15：#5ac8fa 當字白底只有 1.89:1（報表、推薦頁的小標題），改 --info-text（白底 6.06、頁底 5.56） */
.text-info {
    color: var(--info-text) !important;
}

.text-warning {
    color: var(--warning-text) !important;
}

/* 圖示保留原本的亮橘（不是要讀的字）：「LINE 精選」星星的說明寫「黃色＝顯示」、小提醒燈泡、班別範本書籤，
   改成深色反而對不上說明。只套在圖示本身與「LINE 精選」星星按鈕（.btn-ghost.text-warning）上。 */
.bi.text-warning,
.btn-ghost.text-warning {
    color: var(--warning-color) !important;
}

.text-danger {
    color: var(--danger-text) !important;
}

/* 白字壓在成功綠／危險紅底上（卡片標頭、提示條）：底色換深一階才讀得清楚。
   只在同時寫了 .text-white 時才換，單獨的 .bg-success／.bg-danger（常配 .bg-opacity-10 當淡底）不動。 */
.bg-success.text-white {
    background-color: var(--success-text) !important;
}
.bg-danger.text-white {
    background-color: var(--danger-text) !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-gray-800 {
    color: var(--dark-color) !important;
}

.bg-gradient-primary {
    background: var(--bg-gradient-primary) !important;
}

.bg-gradient-success {
    background: var(--bg-gradient-success) !important;
}

.bg-gradient-info {
    background: var(--bg-gradient-info) !important;
}

.bg-gradient-warning {
    background: var(--bg-gradient-warning) !important;
}

.bg-gradient-danger {
    background: var(--bg-gradient-danger) !important;
}

.cursor-pointer {
    cursor: pointer;
}

.no-wrap {
    white-space: nowrap;
}

/* ========================================
   響應式 - 手機 (< 576px)
   ======================================== */

@media (max-width: 575.98px) {
    body {
        font-size: 0.8125rem;
    }

    .card-body {
        padding: 0.875rem;
    }

    .card-header {
        padding: 0.5rem 0.875rem;
    }

    .stat-card .stat-value {
        font-size: 1.125rem;
    }

    .stat-card .stat-icon {
        font-size: 1.25rem;
    }

    /* 2026-10-01 UI 稽核 M7：原本 0.625rem（10px）。後台最小字級 12px，KPI 標籤是店家每天第一眼讀的字 */
    .stat-card .stat-label {
        font-size: 0.75rem;
    }

    .table {
        font-size: 0.75rem;
    }

    .table thead th {
        font-size: 0.675rem;
        padding: 0.5rem;
    }

    .table tbody td {
        padding: 0.5rem;
    }

    .btn {
        font-size: 0.8125rem;
        padding: 0.3rem 0.6rem;
    }

    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .badge {
        font-size: 0.675rem;
        padding: 0.25em 0.5em;
    }

    .form-control,
    .form-select {
        font-size: 0.8125rem;
        padding: 0.3rem 0.6rem;
    }

    /* 2026-09-11 QA-F：上面那條把 .form-select 的 padding-right 也壓成 0.6rem，
       而 Bootstrap 的下拉箭頭是畫在右側的背景圖、原本靠 padding-right 2.25rem 讓位 ⇒
       寬度 auto 的下拉（儀表板「期間」、各頁 style="width:auto" 的篩選）在 390px 文字直接壓在箭頭底下。
       只把右側讓回來，左／上／下維持手機精簡；沒有箭頭的 multiple／size>1 維持原本的精簡右距。 */
    .form-select {
        padding-right: 2rem;
        background-position: right 0.5rem center;
    }

    .form-select[multiple],
    .form-select[size]:not([size="1"]) {
        padding-right: 0.6rem;
    }

    .form-label {
        font-size: 0.8125rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }

    .toast {
        min-width: 250px;
    }

    /* 手機（2026-09-25 QA）：toast 釘在頂端、左右留 0.5rem、壓縮高度，
       搭配 common.js 的 toastVisibleLimit（modal 開著時只留 1 則），只會蓋到 modal 標題列，不蓋輸入欄位 */
    /* width:auto（2026-10-01 UI 稽核 M1 附帶）：Bootstrap 的 .toast-container 自帶 width:max-content，
       子層 toast 又是 width:100%＝循環參照，實測只剩約 140px 擠在左上角。改由 left／right 撐滿。 */
    .toast-container {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
    }

    /* 視窗開著時右邊讓出 4rem 給視窗右上角的 ×（觸控裝置上 × 是 44px、右緣離視窗邊約 16px）。
       上面那條 body.modal-open 規則已把 right 改成 auto，這裡要再寫回來，否則全寬撐不開。 */
    body.modal-open .toast-container {
        left: 0.5rem;
        right: 4rem;
    }

    .toast-container .toast {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.25rem;
    }

    .toast-container .toast-header {
        padding: 0.25rem 0.6rem;
    }

    .toast-container .toast-body {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state > i {
        font-size: 2.5rem;
    }
}

/* ========================================
   響應式 - 平板 (576px - 768px)
   ======================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
    .stat-card .stat-value {
        font-size: 1.25rem;
    }

    .stat-card .stat-icon {
        font-size: 1.5rem;
    }

    .table {
        font-size: 0.8rem;
    }

    .table thead th {
        font-size: 0.7rem;
    }
}

/* ========================================
   響應式 - 小平板/大手機 (768px - 992px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .stat-card .stat-value {
        font-size: 1.375rem;
    }
}

/* ========================================
   RWD 工具類
   ======================================== */

/* 觸控裝置優化 */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    /* 2026-08-25：<a class="btn">（查看詳情的眼睛）被撐到 44px 後圖示浮在上緣——<button> 會自動
       垂直置中，<a> 不會，同一排四顆只有眼睛高一截（顧客卡片實看）。連結型按鈕改 inline-flex 置中。 */
    a.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    .nav-link {
        padding: 0.875rem 1rem;
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
    }
}

/* 隱藏捲軸但保持滾動 */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 文字截斷 */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 彈性間距 */
.gap-responsive {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1rem;
    }
}

/* 響應式表格捲動 */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* 響應式表格欄位隱藏 */
@media (max-width: 575.98px) {
    .table .hide-xs {
        display: none !important;
    }

    /* 手機版表格內按鈕群組垂直排列 */
    .table .btn-group-vertical-xs {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* 手機版：操作按鈕 2×2 網格排列（保留所有功能） */
    .table .btn-group {
        display: inline-grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .table .btn-group > .btn {
        border-radius: 6px !important;
    }
}

@media (max-width: 767.98px) {
    .table .hide-sm {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .table .hide-md {
        display: none !important;
    }
}

/* ========================================
   觸控裝置 UX 打底（2026-06-26 5輪深掃 A1+A2）
   用 pointer:coarse 而非 max-width：涵蓋所有觸控裝置（手機 + iPad），桌面滑鼠不受影響
   ======================================== */
@media (pointer: coarse) {
    /* A1：input 字體 ≥16px，防 iOS Safari focus 時整頁自動縮放跳動 */
    input.form-control,
    select.form-select,
    textarea.form-control,
    .input-group .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"] {
        font-size: 16px;
    }

    /* A2：觸控目標 ≥44px（btn-sm / 分頁 / 關閉鈕 / 色票 / checkbox / switch）*/
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 44px;
    }
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn-close {
        width: 44px;
        height: 44px;
        background-size: 16px;
        background-position: center;
    }
    .form-check {
        min-height: 28px;
    }
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
    }
    .form-switch .form-check-input {
        width: 2.4em;
        height: 1.3em;
    }
    input[type="color"],
    .form-control-color {
        min-width: 44px;
        min-height: 44px;
    }
}