/* tenant/responsive.css：店家後台樣式第 3／6 支「響應式（手機、平板、圖示側欄帶、小平板、桌面）、側邊欄遮罩、行動版優化」（2026-10-12 由 tenant.css 第 1968～2647 行逐字切出；依 tenant/layout.html 的 link 順序串接＝原檔）---- 以下逐字搬自拆分前的 tenant.css ---- */
/* ========================================
   響應式 - 手機 (< 576px)
   ======================================== */

@media (max-width: 575.98px) {
    /* 手機版隱藏側邊欄背景延伸 */
    #wrapper::before {
        display: none;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 1000;
        transform: translateX(-100%);
        width: 260px;
    }

    #sidebar.show {
        transform: translateX(0);
    }

    /* 手機版 sidebar 打開時：暗化內容區 */
    #sidebar.show ~ #content-wrapper {
        opacity: 0.3;
        transition: opacity 0.3s ease;
    }

    /* 保留 topbar 的漢堡按鈕可點擊（關閉 sidebar 用） */
    #sidebar.show ~ #content-wrapper .topbar {
        pointer-events: auto;
        opacity: 1;
    }

    #sidebar .nav.flex-column {
        padding-bottom: 2rem;
    }

    /* 手機版隱藏進度環 */
    .sidebar-setup-progress {
        display: none !important;
    }

    /* 新手引導卡片手機版 */
    .onboarding-card {
        margin-bottom: 1rem;
    }

    .onboarding-header {
        padding: 1rem 1rem 0.5rem;
    }

    .onboarding-title {
        font-size: 0.95rem;
    }

    .onboarding-progress-bar {
        margin: 0 1rem;
    }

    .onboarding-body {
        padding: 0.75rem 1rem 1rem;
    }

    .onboarding-steps {
        gap: 0.5rem;
    }

    .onboarding-step {
        min-width: 140px;
        padding: 0.75rem;
    }

    /* 手機頂欄常駐（2026-08-01 UX 評審）：長頁面捲到底要回導航得滑幾十屏 */
    .topbar {
        height: 3.5rem;
        padding: 0 0.75rem;
        position: sticky;
        top: 0;
        z-index: 1030;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }

    /* 搜尋列不要被拆成 2-3 排：input-group 是一個整體，內部元素不可各自 100% 寬
       （原 .data-table-actions .form-control{width:100%} 會打到 input-group 內的 input） */
    .data-table-actions .input-group {
        width: 100%;
        flex-wrap: nowrap;
    }
    .data-table-actions .input-group > .form-control,
    .data-table-actions .input-group > .form-select {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    .data-table-actions .input-group > .btn {
        flex: 0 0 auto;
        width: auto;
    }

    /* 內容區底部留白：避免右下 AI 客服浮動鈕壓住分頁列與最後一列操作鈕 */
    #content {
        padding-bottom: 5.5rem;
    }

    #content {
        padding: 0.75rem;
    }

    .page-header {
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* 頁面標題旁的按鈕群組：手機版換行 + 全寬 */
    .page-header > .d-flex {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-header > .d-flex > .btn {
        flex: 1;
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }

    .page-title {
        font-size: 1.125rem;
    }

    .page-subtitle {
        font-size: 0.75rem;
    }

    .data-table-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .data-table-title {
        font-size: 0.875rem;
    }

    .data-table-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .data-table-actions .form-control,
    .data-table-actions .form-select {
        width: 100%;
    }

    .data-table-footer {
        flex-direction: column;
        padding: 0.75rem;
        gap: 0.5rem;
    }

    /* 表格內操作按鈕：手機版不溢出 */
    .table .btn-group {
        flex-wrap: nowrap;
    }

    .table .btn-group .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    /* 表格最小寬度，確保 table-responsive 滾動 */
    .table-responsive table {
        min-width: 0;
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .quick-action-btn {
        padding: 1rem;
    }

    .quick-action-btn i {
        font-size: 1.5rem;
    }

    .quick-action-btn span {
        font-size: 0.75rem;
    }

    .points-badge,
    .tenant-name,
    .user-name {
        display: none;
    }

    .detail-header {
        padding: 1rem;
    }

    .detail-title {
        font-size: 1rem;
    }

    .detail-section-body {
        padding: 0.875rem;
    }

    .info-list li {
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label {
        flex: none;
    }

    .settings-nav {
        margin-bottom: 1rem;
    }

    .settings-nav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .settings-content {
        padding: 1rem;
    }

    .feature-card-header,
    .feature-card-body {
        padding: 1rem;
    }

    .feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .feature-price {
        font-size: 1.25rem;
    }

    .login-card {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .login-header,
    .login-body {
        padding: 1.5rem;
    }

    /* 註冊頁「登入」連結增大觸控區域 */
    .login-footer a {
        padding: 0.5rem;
    }

    .calendar-container {
        padding: 0.5rem;
    }

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

    .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

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

@media (min-width: 576px) and (max-width: 767.98px) {
    /* 平板小螢幕隱藏側邊欄背景延伸 */
    #wrapper::before {
        display: none;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 1000;
        transform: translateX(-100%);
    }

    #sidebar.show {
        transform: translateX(0);
    }

    #sidebar.show ~ #content-wrapper {
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    #sidebar .nav.flex-column {
        padding-bottom: 2rem;
    }

    .topbar {
        padding: 0 1rem;
    }

    #content {
        padding: 1rem;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .data-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-table-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }

    .points-badge {
        display: none;
    }

    .tenant-name {
        display: none;
    }

    .info-list li {
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label {
        flex: none;
    }
}

/* ========================================
   響應式 - 圖示側欄帶（768px - 1199.98px）
   ======================================== */

/* 2026-10-01 UX 第 2 波 2H（稽核 C1）：原本只有 768–991 是圖示側欄，992–1199 是全寬側欄，
   iPad 橫向 1024 的內容區只剩約 770px（比直向 768 還難用：表格「狀態」「操作」欄被擠出畫面、
   按鈕直排、報表頁首擠成三行）。改成 768–1199.98 都走圖示側欄＋飛出選單，內容區多出約 170px。
   ⚠️ 這個斷點與 tenant.js 的 isSidebarIconOnly（飛出選單與搜尋設定共用的判準）、
   settings-search.css 的圖示模式斷點是同一件事，三處要一起改；只改 CSS 時 992–1199 的飛出選單
   點不開（JS 仍當成展開側欄）、搜尋框擠在 80px 裡。
   本區塊只放「側邊欄」相關；頂部列、內容區內距、快速操作格數、店名這些仍是 768–991 才套，見下一個區塊。 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* 平板版側邊欄背景寬度同步 */
    #wrapper::before {
        width: var(--sidebar-collapsed-width);
    }

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

    #sidebar .sidebar-brand-text,
    #sidebar .sidebar-heading,
    #sidebar .nav-link span {
        display: none;
    }

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

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

    /* 平板版：允許飛出選單溢出 */
    #sidebar .nav.flex-column {
        overflow: visible;
    }

    /* 平板版群組飛出選單（同 collapsed） */
    #sidebar .sidebar-group-arrow {
        display: none;
    }

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

    /* ⚠️ 與桌機收合帶同一套（fixed + max-height + 內捲），理由見上面「收合側邊欄：群組飛出選單」
       的長註解——absolute 會被 #sidebar 裁掉，而用 overflow 切換來救會讓 scrollTop 被夾成 0、
       tap 導到沒點的頁；12 項的「店家營運」在矮視窗會超出視窗底部，沒有 max-height 就進不去最後幾頁。
       此斷點 #sidebarToggle 被隱藏（側邊欄永遠是圖示模式），平板橫向的店家只有這條路徑可以進那些頁。 */
    #sidebar .sidebar-group > .collapse,
    #sidebar .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-07-31 iPad 直向修復：飛出選單原本只認 :hover——觸控裝置沒有 hover，
       JS（Bootstrap collapse）點擊加上的 .show 被上面的 display:none !important 壓死，
       導致 iPad 直向用手指「摸不到」任何群組子選單（WebKit 實測導航 0 成功）。
       補 .collapse.show 讓 tap 開啟的選單也顯示：點一下開、再點一下關，滑鼠 hover 行為不變 */
    /* 2026-10-02：:hover 只給會 hover 的裝置，理由見上方 #sidebar.collapsed 那組（兩處同步） */
    @media (hover: hover) {
        #sidebar .sidebar-group:hover > .collapse {
            display: block !important;
        }
    }
    #sidebar .sidebar-group > .collapsing,
    #sidebar .sidebar-group > .collapse.show {
        display: block !important;
    }

    /* 2026-08-25：上面 7/31 那條是假綠——Playwright tap 不做 hit-test、直接把 touch 事件派給元素，
       真手指其實落在 #content 上。這一帶的 #sidebar 同樣 z-index:1 + overflow-x:hidden，
       飛出選單被裁掉又被 #content-wrapper 蓋住（elementFromPoint 打點實測命中 #content）。
       抬 z-index 讓飛出選單畫在內容之上（fixed 也仍受 #sidebar 這個堆疊環境約束）。
       ⚠️ 2026-08-27 移除同批加的「:has(...) { overflow: visible }」兩條（900×640 平板帶只要
       捲動 43px 就重現：tap 群組 → scrollTop 被夾成 0、飛出選單沒開、點到別的東西）。 */
    #sidebar {
        z-index: 2;
    }

    /* 此斷點側邊欄寬度是寫死的（上方 width 規則不看 .collapsed）——摺疊按鈕按了 class 有切
       但畫面無反應＝死按鈕，直接隱藏避免「按了沒反應以為壞掉」 */
    #sidebarToggle {
        display: none;
    }

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

    /* :not(.badge)：同上，數量 0 的待處理徽章不可被強制顯示（2026-09-30） */
    #sidebar .sidebar-sub-nav .nav-link span:not(.badge) {
        display: inline !important;
    }

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

    /* 平板版隱藏進度環文字和 footer 文字 */
    .setup-progress-label,
    .sidebar-footer-name {
        display: none;
    }

    .setup-progress-link,
    .sidebar-footer-content {
        justify-content: center;
    }

    .setup-attention-dot {
        right: 6px;
        top: 8px;
        transform: none;
    }
}

/* ========================================
   響應式 - 小平板/iPad 直向 (768px - 992px)：側邊欄以外的部分
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .topbar {
        padding: 0 1rem;
    }

    #content {
        padding: 1.25rem;
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    .tenant-name {
        display: none;
    }
}

/* ========================================
   響應式 - 大桌面側邊欄（>= 1200px）：可以展開／收合
   ======================================== */

/* 2026-10-01 2H：原本是 >= 992。992–1199 改成固定圖示側欄（見上方 768–1199.98 區塊），
   這兩條要搬到 1200，否則 #sidebar:not(.collapsed)（特異度 1,1,0）會蓋掉圖示寬度。 */
@media (min-width: 1200px) {
    #sidebar:not(.collapsed) {
        width: var(--sidebar-width);
    }

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

/* ========================================
   響應式 - 桌面 (>= 992px)
   ======================================== */

@media (min-width: 992px) {
    .quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* ========================================
   響應式 - 大桌面 (>= 1200px)
   ======================================== */

@media (min-width: 1200px) {
    #content {
        padding: 2rem;
    }

    .data-table-header,
    .data-table-footer {
        padding: 1rem 1.5rem;
    }
}

/* ========================================
   側邊欄遮罩
   ======================================== */

/* 手動 overlay 元素（JS toggle） */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.sidebar-overlay.show {
    display: block;
}

/* 手機版：sidebar 打開時 body 不可滾動 */
@media (max-width: 767.98px) {
    body:has(#sidebar.show) {
        overflow: hidden;
    }
}

/* ========================================
   行動版優化
   ======================================== */

/* 固定底部操作列 */
.mobile-bottom-actions {
    display: none;
}

@media (max-width: 575.98px) {
    .mobile-bottom-actions {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 0.75rem;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
        gap: 0.5rem;
    }

    .mobile-bottom-actions .btn {
        flex: 1;
    }

    /* 為底部操作列預留空間 */
    .has-bottom-actions #content {
        padding-bottom: 5rem;
    }
}

/* 卡片堆疊式佈局 (手機) */
@media (max-width: 575.98px) {
    .card-stack .card {
        margin-bottom: 0.75rem;
    }

    .card-stack .card:last-child {
        margin-bottom: 0;
    }
}

/* 滑動式分頁標籤 */
.nav-tabs-scroll {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.nav-tabs-scroll .nav-item {
    flex: 0 0 auto;
}

/* 響應式網格卡片 */
.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}