/* tenant/layout.css：店家後台樣式第 1／6 支「版面配置、側邊欄（群組、收合飛出）、頂部導航、頁面標題、頁尾、登入頁、儀表板、行事曆」（2026-10-12 由 tenant.css 第 1～995 行逐字切出；依 tenant/layout.html 的 link 順序串接＝原檔）---- 以下逐字搬自拆分前的 tenant.css ---- */
/**
 * Tenant 店家後台樣式
 *
 * 預約平台 - 店家後台專用 CSS
 */

/* ========================================
   版面配置
   ======================================== */

/* ⚠️ 2026-09-30：#wrapper／#content-wrapper 必須用 overflow-x:clip，不可改回 hidden。
   hidden 會讓瀏覽器把 overflow-y 算成 auto ⇒ 它們變成「捲動容器」，而真正在捲的是 window，
   於是 #sidebar 的 position:sticky 永遠以 #wrapper 為基準、從來沒黏住過
   （生產 1440 實測：捲到 scrollY=1461 時側邊欄 top=-1461，整條選單跟著捲走，只剩下面這塊黑底；
   手機頂列 .topbar 同樣 top=-1461）。#wrapper::before 那塊黑底原本就是為了遮這個症狀。
   clip 一樣裁掉橫向溢出，但不建立捲動容器。rich-menu-design.html 2026-09-24 已在頁內證實，現收成全域。
   ⚠️ #sidebar 仍是 display:block（見根 CLAUDE.md 踩坑表），這裡沒動它。 */
#wrapper {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
}

/* 側邊欄背景延伸：只給不支援 overflow-x:clip 的舊瀏覽器（Safari 15 以前、Chrome 89 以前）。
   ⚠️ 2026-10-16：支援 clip 的瀏覽器上側邊欄自己就黏得住（#sidebar 自帶 #1d1d1f、高 100dvh、sticky），
   這塊偽元素在畫面上完全看不到，卻讓 axe 的色彩對比整個失明——axe 遇到祖先有絕對定位、有底色的偽元素就判不出背景，
   桌機每一頁的內容區文字都被列成「判不出」（2026-10-16 staging 1440 實測 35 頁共 3485 筆，全部是 pseudoContent）。
   所以只在 hidden 退路生效（＝sticky 真的會壞）的瀏覽器才畫它。不要把它搬回 @supports 外面，也不要改畫在
   #wrapper 的其他偽元素上（同一個原因）；離線守衛 tests/sidebar-bg-pseudo-check.js 會擋。 */
@supports not (overflow-x: clip) {
    #wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        background: #1d1d1f;
        pointer-events: none;
        z-index: 0;
        transition: width 0.3s ease;
    }

    #wrapper:has(#sidebar.collapsed)::before {
        width: var(--sidebar-collapsed-width);
    }
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
    background-color: var(--light-color);
    position: relative;
    z-index: 1;
}

#content {
    flex: 1 0 auto;
    padding: 1.5rem;
}

/* ========================================
   側邊欄
   ======================================== */

#sidebar {
    display: block;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: #1d1d1f;
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

/* nav 列表：跟隨 sidebar 整體捲動（不獨立捲動） */
#sidebar .nav.flex-column {
    display: block;
    overflow: visible;
}

/* 收合模式：允許飛出選單溢出 */
#sidebar.collapsed .nav.flex-column {
    overflow: visible;
}

#sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Logo */
.sidebar-brand {
    height: 4.375rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-decoration: none;
}

.sidebar-brand-icon {
    font-size: 1.5rem;
    color: white;
}

/* 品牌標記（2026-08-02 美感）：原本直接放 logo 圖，在深色側欄上是一塊直角白方塊，
   像未經處理的素材。包成圓角容器 + 內距後讀起來是刻意的 app mark。 */
.sidebar-brand img {
    background: #fff;
    border-radius: 7px;
    padding: 4px 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.sidebar-brand-text {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
    margin-left: 0.5rem;
}

#sidebar.collapsed .sidebar-brand-text {
    display: none;
}

/* 分隔線 */
.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0 1rem 0.5rem;
    flex-shrink: 0;
}

/* 標題（已改用群組收合選單，保留向後相容） */
.sidebar-heading {
    padding: 0 1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

#sidebar.collapsed .sidebar-heading {
    display: none;
}

/* 導航項目 */
.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    margin: 0.1rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* 當前頁：唯一帶彩度的導航狀態（2026-08-01 UX 評審 — 原本 active/hover/群組展開三層白霧亮度接近，
   店家要盯著看才知道自己在哪一頁）。主色底 + 左側指示條，收合側欄時指示條仍可見。
   ⚠️ 必須 scope 在 #sidebar 內：`.nav-link.active` 是 Bootstrap 通用 class，
   不限定會污染全站 tab（settings/shop-design/rich-menu-design 的分頁都吃到左指示條與白字，
   2026-08-01 複評實測 settings tab 出現 inset 3px #8ea4ff）。 */
#sidebar .nav-link.active {
    color: white;
    font-weight: 700;
    background: rgba(67, 97, 238, 0.32);
    box-shadow: inset 3px 0 0 #8ea4ff;
}

.nav-link i {
    font-size: 1rem;
    width: 1.5rem;
    margin-right: 0.75rem;
    text-align: center;
}

#sidebar.collapsed .nav-link span {
    display: none;
}

#sidebar.collapsed .nav-link i {
    margin-right: 0;
}

#sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.75rem;
}

/* ===== 側邊欄群組（可收合選單） ===== */

.sidebar-group {
    position: relative;
}

/* 群組標題按鈕 */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    margin: 0.1rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.sidebar-group-toggle:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* 當前群組高亮 */
/* 群組展開態刻意壓低（展開與否已由箭頭旋轉表達），不要跟「當前頁」搶注意力 */
.sidebar-group-toggle:not(.collapsed) {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.05);
}

/* 當前頁「所屬群組」的層級標記（2026-08-01 複評）：
   子項清單一長（店家營運有 12 項），父群組列一捲出視窗就不知道自己在哪個群組。
   用比子項指示條淡一階的左側條，形成「群組 → 當前頁」兩層可讀的階層。 */
.sidebar-group-toggle.has-active {
    box-shadow: inset 3px 0 0 rgba(142, 164, 255, 0.45);
}

/* 群組展開箭頭 */
.sidebar-group-arrow {
    font-size: 0.65rem;
    margin-left: auto;
    transition: transform 0.25s ease;
    width: auto !important;
    margin-right: 0 !important;
}

.sidebar-group-toggle:not(.collapsed) .sidebar-group-arrow {
    transform: rotate(180deg);
}

/* 子選單項目 */
.sidebar-sub-nav {
    padding-left: 0;
    list-style: none;
}

.sidebar-sub-nav .nav-link {
    padding: 0.5rem 1rem 0.5rem 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
}

.sidebar-sub-nav .nav-link:hover {
    color: white;
}

.sidebar-sub-nav .nav-link.active {
    color: white;
    font-weight: 700;
    background: rgba(67, 97, 238, 0.32);
    box-shadow: inset 3px 0 0 #8ea4ff;
}

.sidebar-sub-nav .nav-link i {
    font-size: 0.85rem;
    width: 1.25rem;
    margin-right: 0.5rem;
}

/* ===== 收合側邊欄：群組飛出選單 ===== */

#sidebar.collapsed .sidebar-group-arrow {
    display: none;
}

#sidebar.collapsed .sidebar-group-toggle {
    justify-content: center;
    padding: 0.75rem;
}

#sidebar.collapsed .sidebar-group-toggle span {
    display: none;
}

#sidebar.collapsed .sidebar-group-toggle > i:first-child {
    margin-right: 0;
}

/* 收合模式：隱藏子選單，hover 時飛出
   ⚠️ position 必須是 fixed 不是 absolute（2026-08-27 修，勿改回）：
   #sidebar 是 `overflow-y:auto` 的捲動容器，absolute 飛出選單會被它裁掉——舊解法是
   「有飛出選單開著時把 #sidebar 改成 overflow:visible」（下面那條 :has 規則，已移除），
   但手指一碰群組圖示就套上 :hover ⇒ 捲動容器當場消失 ⇒ 瀏覽器把 scrollTop 夾成 0 ⇒
   整份 nav 瞬間往下位移（實測 188px），合成的 click 落在位移後的元素上：
   tap「系統設定」齒輪結果導到 /tenant/chat（顧客訊息），側邊欄還自己跳回頂端；
   滑鼠停在群組圖示上滾輪也完全捲不動（收合態 6/10 列是群組＝大部分表面都捲不動）。
   fixed 的 containing block 是視窗，祖先的 overflow 裁不到它 → #sidebar 可以永遠維持可捲。
   ⚠️ left/top 由 tenant.js `positionFlyout()` 依 toggle 的 rect 設定；這裡的 left/top 只是
   JS 還沒跑到時的保底值（fixed 之下 `left:100%` 是「視窗寬度」會把選單推出畫面，不可用）。
   ⚠️ max-height + overflow-y:auto 不可拿掉：「店家營運」12 項在視窗高 800px 以下會超出視窗底部，
   舊版沒有捲動、也沒有往上貼齊，平板橫向的店家等於從選單進不去最後 1~3 頁（庫存異動/關鍵字回覆/AI 客服設定）。
   overflow 要壓過 Bootstrap `.collapsing` 自帶的 overflow:hidden，故帶 !important。 */
#sidebar.collapsed .sidebar-group > .collapse,
#sidebar.collapsed .sidebar-group > .collapsing {
    display: none !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 16px);
    position: fixed;
    left: var(--sidebar-collapsed-width);
    top: 0;
    width: 200px;
    background: #2c2c2e;
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 0;
    z-index: 1100;
}

/* 2026-10-02 iPad 橫向「點了沒反應」（店家影片：橫向點群組圖示只亮底色、飛出選單沒出來，直向正常）：
   :hover 開選單只給真的會 hover 的裝置（滑鼠／觸控板）。觸控裝置上 :hover 會讓 iOS 把第一下 tap
   當成「hover 預覽」而不送 click → 選單只靠 :hover 顯示、沒人定位，停在 top:0 被 Safari 26 的
   半透明工具列蓋住。觸控一律走 click → .show（tenant.js 在 window 捕獲階段自己開關，不經 Bootstrap）。
   .collapsing 不分裝置都顯示：收合動畫那 350ms 不可以是 display:none（否則量不到高度、定位失敗）。
   ⚠️ 平板帶（768~1199.98）有同一組規則，兩處要一起改；守衛 tests/sidebar-flyout-touch-check.js。 */
@media (hover: hover) {
    #sidebar.collapsed .sidebar-group:hover > .collapse {
        display: block !important;
    }
}
#sidebar.collapsed .sidebar-group > .collapsing,
#sidebar.collapsed .sidebar-group > .collapse.show {
    display: block !important;
}

/* 2026-08-25 謙豐 Galaxy Tab A11+ 橫向（1280 CSS px＝桌機帶）＋按過「<」收合 → 六個群組全點不開：
   ① 上面那條只認 :hover，觸控沒有 hover；7/31 的 iPad 修復把 .collapse.show 只補在 768~991 帶，
      桌機帶的收合模式漏掉 → 已加到上方選擇器。
   ② 就算 display:block，飛出選單也被 #sidebar 的 overflow-x:hidden 裁掉、再被 #content-wrapper
      （同 z-index:1、DOM 在後）蓋住——桌機滑鼠 hover 其實也一直是壞的，只是收合模式沒人用。
      Playwright isVisible() 看不出「被裁／被蓋」，要用 elementFromPoint 打點才抓得到。
   z-index:2 仍必要：飛出選單雖然改成 fixed（不再被裁），但它仍在 #sidebar 這個堆疊環境內，
   不抬 z-index 就會被 DOM 在後、同 z-index:1 的 #content-wrapper 蓋住。
   ⚠️ 2026-08-27 移除「:has(...) { overflow: visible }」那兩條：切換捲動容器的 overflow 會把
   scrollTop 夾成 0，捲過側邊欄之後 tap 群組圖示會導到使用者沒點的功能頁（見上方 position:fixed 註解）。
   不要再用 overflow 切換來讓飛出選單溢出捲動容器——要溢出就用 fixed。 */
#sidebar.collapsed {
    z-index: 2;
}

/* 飛出選單內項目樣式重置 */
#sidebar.collapsed .sidebar-sub-nav {
    padding-left: 0;
}

#sidebar.collapsed .sidebar-sub-nav .nav-link {
    padding: 0.5rem 1rem;
    justify-content: flex-start;
    font-size: 0.85rem;
}

/* :not(.badge)（2026-09-30）：tenant.js 在數量為 0 時用 inline display:none 藏起待處理徽章，
   這條 !important 會把它強制顯示成紅色「0」（飛出選單的預約列表／商品訂單），看起來像有東西要處理。 */
#sidebar.collapsed .sidebar-sub-nav .nav-link span:not(.badge) {
    display: inline !important;
}

#sidebar.collapsed .sidebar-sub-nav .nav-link i {
    margin-right: 0.5rem !important;
}

/* 待確認預約徽章 */
/* 脈動改用外圈光暈，不再淡出整顆徽章：opacity 0.6 那一刻白字對底只剩 4.47:1（2026-10-20 axe 實測），
   字永遠保持實心；偏好減少動態的使用者不閃。 */
.pending-badge {
    animation: pendingPulse 2s ease-in-out infinite;
}
@keyframes pendingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.55); }
    50% { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pending-badge { animation: none; }
}
#sidebar.collapsed .pending-badge {
    display: none !important;
}

/* 摺疊按鈕 */
.sidebar-toggle {
    width: 100%;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.sidebar-toggle:hover {
    color: white;
}

.sidebar-toggle i {
    /* 2026-08-25：<i> 是 inline，transform 對 inline 元素無效 → 收合後 rotate(180deg) 從來沒生效、
       箭頭永遠是「<」（老闆實看：收合了應該變「>」）。Bootstrap Icons 只把 ::before 設成 inline-block。 */
    display: inline-block;
    transition: transform 0.3s ease;
}

#sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* ========================================
   頂部導航
   ======================================== */

.topbar {
    height: 4.375rem;
    background-color: white;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.topbar-left {
    display: flex;
    align-items: center;
    /* 2026-09-25 RWD：讓當前店家 chip 可以縮、店名走省略號。
       沒有 min-width:0 時 flex 子項最小寬＝內容寬，長店名在 360~430 折成三行、768~1024 折成兩行。 */
    min-width: 0;
    gap: 0.5rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* 當前店家 chip：一行＋省略號（inline style 只管字色／padding／display，這裡不碰 display，JS 仍能切換顯示）
   底色與滑過變色在這裡（2026-10-02 CSP：原本是 inline onmouseover／onmouseout，script-src-attr 'none' 下不執行；
   底色不可再寫回 inline style，否則 :hover 蓋不過）。hover 只給會 hover 的裝置，觸控不會卡在變色狀態 */
#currentTenantChip {
    background: #f5f5f7;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#currentTenantChip > i {
    flex-shrink: 0;
}
@media (hover: hover) {
    #currentTenantChip:hover { background: #ececf0; }
    /* 店家選擇器視窗裡「不是目前這家」的卡片（tenant.js openTenantPickerModal 加的 class） */
    .tenant-card-selectable:hover { background: #f8f9fa; }
}
#currentTenantChipName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    #currentTenantChip { max-width: 260px; }
}
@media (max-width: 575.98px) {
    #currentTenantChip { max-width: 100%; }
}

/* 漢堡鈕上的未處理數徽章：原本 inline top/right 2px，壓在三條線上。
   只覆寫位置（!important 對 inline 位置值必要）；display 仍由 JS 以 inline 控制，這裡絕不碰。 */
#hamburgerPendingBadge {
    top: -4px !important;
    right: -6px !important;
}

/* 側邊欄切換按鈕 */
.btn-sidebar-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-sidebar-toggle:hover {
    background-color: var(--light-color);
}

/* 點數餘額顯示 */
.points-badge {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    font-weight: 600;
    color: var(--primary-color);
}

.points-badge i {
    margin-right: 0.5rem;
}

/* 用戶下拉選單 */
.user-dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease;
}

.user-dropdown:hover {
    background-color: var(--light-color);
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.user-name {
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--dark-color);
    /* 2026-10-01：長店名（例「VibeAI 測試租戶2（自動化測試專用）」）沒有上限時，.topbar-right（不准縮）
       整排壓到左邊的店家 chip 上，768 寬時 chip 只剩 30px 且正中間被「隱藏金額」鈕蓋住、點不到。
       1200 以上限寬省略；768～1199 直接不顯示（左邊 chip 已經寫了店名）。 */
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    .topbar .user-name { display: none !important; }
}
.user-dropdown { min-width: 0; }

.tenant-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* ========================================
   頁面標題
   ======================================== */

.page-header {
    margin-bottom: 1.5rem;
}

/* 頁面群組脈絡（2026-08-01 UX 評審）：深層頁只有一個 h1，看不出自己屬於哪個群組。
   放在 .page-title 正上方的一行灰色小字路徑。 */
.page-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.page-eyebrow a:hover {
    color: var(--primary-color);
}

.page-eyebrow i {
    font-size: 0.65rem;
    opacity: 0.6;
}

/* 當前頁 crumb（2026-08-02）：原本只有「父群組 ›」尾隨一個懸空 chevron，
   視覺上像被截斷的字串。補上當前頁名稱後路徑才完整。 */
.page-eyebrow-current {
    color: var(--dark-color);
    opacity: 0.75;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* 麵包屑 */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

/* ========================================
   頁尾
   ======================================== */

.footer {
    padding: 1rem 1.5rem;
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ========================================
   登入頁面
   ======================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient-primary);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* 2026-07-31 質感審計 #8：header/footer 灰帶拿掉（原本把卡片切成三段）、h1 改近黑 */
.login-header {
    padding: 2rem 2rem 0.5rem;
    text-align: center;
    background: transparent;
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.login-body {
    padding: 2rem;
}

.login-footer {
    padding: 0.5rem 2rem 1.5rem;
    text-align: center;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* 質感審計 #8：登入卡 input-group 一列三種框 → 內嵌成一個連續欄位
   （icon 方格與眼睛鈕融入輸入框，僅 CSS，不動 markup） */
.login-page .input-group-text {
    background-color: #fafafa;
    border-color: #e8e8ed;
    border-right: 0;
    color: var(--text-secondary);
}
.login-page .input-group .form-control {
    border-left: 0;
}
.login-page .input-group .btn-outline-secondary {
    background-color: #fafafa;
    border-color: #e8e8ed;
    border-left: 0;
    color: var(--text-secondary);
}
.login-page .input-group .btn-outline-secondary:hover {
    background-color: #f0f0f2;
    color: var(--dark-color);
}

/* ========================================
   儀表板
   ======================================== */

.dashboard-stats {
    margin-bottom: 1.5rem;
}

/* KPI 列版面（2026-08-01 美觀專項）：原本 5 張卡都用 col-xl-3（每列 4 張），
   第 5 張必定掉到第二行、右側留下 3/4 空白，是整個儀表板最顯眼的版面破綻。
   改用 col-xl 等分後桌機一行五張；此處統一數字與標籤的視覺節奏。 */
@media (min-width: 1200px) {
    .dashboard-stats .stat-value {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
    }
    .dashboard-stats .card-body {
        padding: 1rem 1.1rem;
    }
    /* 五等分後單卡變窄，圖示略縮避免擠壓數字 */
    .dashboard-stats .stat-icon-circle {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.95rem;
    }
}

/* 「系統推送額度」KPI 卡的兩條額度說明（2026-10-01 UI 稽核 M3）：
   xl 以下這張卡獨佔一列（col-12），說明照常顯示；≥1200 五張同一排時這三行會把整排撐到 190px、
   其他四張下半部全空 ⇒ 寬版藏起說明，改由卡片的 title 與標籤旁「?」圖示提示（滑鼠裝置才有 hover）。
   觸控大螢幕（iPad Pro 橫向 1366）看不到 title ⇒ 觸控裝置一律照常顯示。 */
.push-quota-explain {
    font-size: 0.75rem;
    line-height: 1.35;
}
.push-quota-explain-icon {
    display: none;
    font-size: 0.75rem;
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .push-quota-explain {
        display: none;
    }
    .push-quota-explain-icon {
        display: inline;
    }
}

/* 儀表板提醒卡統一長相（2026-10-01 UI 稽核 M3）：
   第一屏的提醒卡（行事曆同步、Bot 狀態、金流未開通、功能到期、低庫存…）原本各自一種長相——
   左邊框粗細不一、圖示 48px、卡片間距 1.5rem，四張就佔滿第一屏。
   只動樣式不動 DOM／id／顯示邏輯：同一條 4px 左色條（顏色沿用各卡既有的 border-* 等級）、36px 圖示、
   較緊的內距與間距。範圍限定在這幾個容器內，不碰 KPI 卡與其他卡片。 */
#alertCards > [class*="col"], #alertCardsTop > [class*="col"],
#lineBotStatusAlert > [class*="col"],
#richMenuPromoAlert > [class*="col"],
#richMenuFreeMenuAlert > [class*="col"] {
    margin-bottom: 0.75rem !important;
}
/* 左色條：沿用下方「提醒卡片列（#alertCards）同版式」那組（1px 淺框＋4px 左色條），
   這裡把同一個長相延伸到放在 #alertCards 外面的三張（Bot 狀態、專屬選單推廣兩張）與 border-primary。 */
#lineBotStatusAlert .card,
#richMenuPromoAlert .card,
#richMenuFreeMenuAlert .card {
    border: 1px solid #e8e8ed !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    box-shadow: var(--shadow-sm);
}
#lineBotStatusAlert .card.border-danger { border-left-color: var(--danger-color) !important; }
#lineBotStatusAlert .card.border-warning, #richMenuFreeMenuAlert .card.border-warning { border-left-color: var(--warning-color) !important; }
#lineBotStatusAlert .card.border-info { border-left-color: var(--info-color) !important; }
#alertCards .card.border-primary, #alertCardsTop .card.border-primary, #lineBotStatusAlert .card.border-primary, #richMenuPromoAlert .card.border-primary {
    border: 1px solid #e8e8ed !important;
    border-left: 4px solid var(--primary-color) !important;
}
#alertCards .card > .card-body, #alertCardsTop .card > .card-body,
#lineBotStatusAlert .card > .card-body,
#richMenuPromoAlert .card > .card-body,
#richMenuFreeMenuAlert .card > .card-body {
    padding: 0.75rem 1rem;
}
#alertCards .stat-icon-circle, #alertCardsTop .stat-icon-circle,
#lineBotStatusAlert .stat-icon-circle,
#richMenuPromoAlert .stat-icon-circle,
#richMenuFreeMenuAlert .stat-icon-circle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-right: 0.75rem !important;
}

/* KPI 卡片圖示（2026-08-01 UX 評審「一格一色」收斂）：
   原本五張並排卡片各配一顆 100% 飽和實心圓，整列像調色盤、數字反而被搶戲。
   改成同色相的淡底 + 深色圖示：色彩仍能區分卡片類別，但視覺重量讓給「數字」本身。 */
.stat-icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-circle.primary {
    background-color: rgba(67, 97, 238, 0.12);
    color: var(--primary-color);
}

.stat-icon-circle.success {
    background-color: rgba(52, 199, 89, 0.14);
    color: #1e7e43;
}

.stat-icon-circle.info {
    background-color: rgba(90, 200, 250, 0.18);
    color: #1a6b8f;
}

.stat-icon-circle.warning {
    background-color: rgba(255, 159, 10, 0.16);
    color: #a86400;
}

.stat-icon-circle.danger {
    background-color: rgba(255, 59, 48, 0.12);
    color: #c8271c;
}

/* ========================================
   行事曆
   ======================================== */

.calendar-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

/* FullCalendar 自訂樣式 */
.fc {
    font-family: var(--font-family);
}

.fc-toolbar-title {
    font-size: 1.25rem !important;
}

.fc-button-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.fc-button-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.fc-event {
    border: none;
    padding: 2px 4px;
    font-size: 0.75rem;
}

/* 字色同時設 --fc-event-text-color：FullCalendar 區塊事件的文字（.fc-event-main）讀的是這個變數，只設 color 蓋不到。
   已完成／已取消改深字（2026-10-20 axe：#34c759 綠底白字 2.22:1、#86868b 灰底白字 3.62:1，AA 要 4.5:1）；
   底色不動、色相照舊。守衛 tests/booking-status-contrast-check.js（員工頁 STATUS_TEXT_COLORS 同一組）。 */
.fc-event.status-unprocessed {
    background-color: #c74600;
    color: #fff;
    --fc-event-text-color: #fff;
}

.fc-event.status-pending {
    background-color: var(--warning-color);
    color: #1d1d1f;
    --fc-event-text-color: #1d1d1f;
}

.fc-event.status-confirmed {
    background-color: var(--primary-color);
    color: #fff;
    --fc-event-text-color: #fff;
}

.fc-event.status-completed {
    background-color: var(--success-color);
    color: #1d1d1f;
    --fc-event-text-color: #1d1d1f;
}

.fc-event.status-cancelled {
    background-color: var(--secondary-color);
    color: #1d1d1f;
    --fc-event-text-color: #1d1d1f;
}

.fc-event.status-no-show {
    background-color: #6f42c1;
    color: #fff;
    --fc-event-text-color: #fff;
}

/* 事件前面的小圓點（月檢視「點狀事件」與清單檢視）吃的是 border-color，
   上面只設了底色 ⇒ 圓點一律是 FullCalendar 預設的藍色＝圖例上的「已確認」，
   於是「已完成」（綠底）前面是藍點，店家會誤以為這筆是已確認（2026-09-30 目視檢查）。 */
.fc-event.status-unprocessed, .status-unprocessed .fc-daygrid-event-dot, .status-unprocessed .fc-list-event-dot { border-color: #c74600; }
.fc-event.status-pending, .status-pending .fc-daygrid-event-dot, .status-pending .fc-list-event-dot { border-color: var(--warning-color); }
.fc-event.status-confirmed, .status-confirmed .fc-daygrid-event-dot, .status-confirmed .fc-list-event-dot { border-color: var(--primary-color); }
.fc-event.status-completed, .status-completed .fc-daygrid-event-dot, .status-completed .fc-list-event-dot { border-color: var(--success-color); }
.fc-event.status-cancelled, .status-cancelled .fc-daygrid-event-dot, .status-cancelled .fc-list-event-dot { border-color: var(--secondary-color); }
.fc-event.status-no-show, .status-no-show .fc-daygrid-event-dot, .status-no-show .fc-list-event-dot { border-color: #6f42c1; }

/* 行事曆配色與空狀態（2026-10-01 UI 稽核 M15）：
   FullCalendar 的日期數字、星期標題、清單日期列都是 <a>，吃 Bootstrap 的連結藍 ⇒ 整片月曆藍字很吵，
   而藍色在這張圖上本來是「已確認」的狀態色。改成深灰；今天用主色粗體（不畫圓底——手機精簡模式的日期格
   高度另有規則，硬加圓底會壓成橢圓）。
   清單檢視的「這段期間沒有預約」（也是員工專屬頁那段長說明的落點）原本貼著灰框左緣、只有上下 5em 外距。
   FullCalendar 的 CSS 由 JS 動態注入、排在本檔之後，所以選擇器一律以 .fc 起頭，且只寫它沒寫的屬性。 */
.fc a.fc-daygrid-day-number,
.fc a.fc-col-header-cell-cushion,
.fc a.fc-list-day-text,
.fc a.fc-list-day-side-text {
    color: var(--dark-color);
    text-decoration: none;
}
.fc .fc-day-today a.fc-daygrid-day-number {
    color: var(--primary-color);
    font-weight: 700;
}
.fc .fc-list-empty-cushion {
    padding: 1.5rem 1rem;
    text-align: center;
    line-height: 1.6;
}


/* 行事曆狀態圖例 */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #555;
}

.calendar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}