/* ================================================================
   手機版樣式
   ----------------------------------------------------------------
   整份檔案都包在 max-width: 767.98px 內，桌機不會套到任何一條規則，
   所以要調整手機的呈現一律加在這裡，不要去動 backstage.css。

   斷點與 index.html 的 ginderViewport.isMobile 一致，兩邊要改就一起改。
   ================================================================ */

@media (max-width: 767.98px) {

    /* ---- 版面留白 ----
       MainLayout 的 article 掛的是 px-4（左右各 1.5rem），
       在 375px 的螢幕上等於先扣掉 48px，內容剩不到 330px。
       手機上收成 0.75rem，一列多出 24px 可用 */
    .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        /* 捲到底時右下角的浮動錨點鈕會壓在最後一塊內容上（通常是分頁列），
           留一段空白讓內容先結束，順便給拇指一點操作空間 */
        padding-bottom: 76px;
    }

    /* ---- 標題 Banner ----
       原本一個 banner 連同下邊距要 180px 上下，Accounting 一頁有四個，
       光是標題就吃掉超過一整個螢幕。手機上壓成單行標題列 */
    .page-banner,
    .hero-banner {
        padding: 12px 16px;
        margin-bottom: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .banner-content h1,
    .hero-content h1 {
        font-size: 1.15rem !important;
        margin-bottom: 0 !important;
        text-shadow: none;
    }

    /* 「基本資料」這類副標在手機上沒有資訊量，只是佔高度 */
    .banner-content .lead,
    .hero-content .lead {
        display: none;
    }

    /* ---- 表格改成堆疊卡片 ----
       欄位多的表在窄螢幕一定要左右滑才看得完一列。這裡把每一列拆成一張小卡，
       欄位名稱改用 td 的 data-label 印在左邊，就不必再橫向捲。

       只作用在有 data-label 的表格：沒有標記的表（例如只有單一欄位的常用連結）
       維持原本的呈現 */
    .table-responsive:has(td[data-label]) {
        overflow-x: visible;
    }

    table:has(td[data-label]) {
        display: block;
    }

    table:has(td[data-label]) thead {
        display: none;
    }

    table:has(td[data-label]) tbody {
        display: block;
    }

    table:has(td[data-label]) tbody tr {
        display: block;
        padding: 10px 12px;
        border-bottom: 1px solid #e9ecef;
    }

    /* 桌機的 hover 會在列左側畫一條色條，但觸控點完之後 :hover 會一直留著，
       色條就卡在剛剛點過的那一列。卡片式呈現本來就有分隔線，這裡直接關掉 */
    .table-card tbody tr:hover {
        box-shadow: none;
    }

    table:has(td[data-label]) tbody tr:last-child {
        border-bottom: none;
    }

    table:has(td[data-label]) td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 3px 0 !important;
        border: none;
        font-size: 0.975rem;
        text-align: right;
        /* 值可能是長備註或沒有空白可斷的長字串。anywhere 與 break-word 不同，
           它會一起縮小這一格的最小寬度，長字串才不會把卡片整個撐開 */
        overflow-wrap: anywhere;
    }

    table:has(td[data-label]) td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #adb5bd;
        font-size: 0.78rem;
        font-weight: 500;
        text-align: left;
        /* 標籤寬度固定，右邊的值才會對齊在同一條線上 */
        min-width: 4.5em;
    }

    /* flex 子項的 min-width 預設是 auto，包在 span/div 裡的長值一樣會撐開卡片 */
    table:has(td[data-label]) td > :not(.badge) {
        min-width: 0;
    }

    /* data-label 留空的欄位（例如已經自帶說明的那種）不印標籤，值也改回靠左整行 */
    table:has(td[data-label]) td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }

    table:has(td[data-label]) td[data-label=""]::before {
        content: none;
    }

    .table-card {
        border-radius: 8px;
    }

    /* badge 在卡片裡不需要那麼大的內距 */
    .badge {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    /* ---- 表單 ---- */
    .search-card {
        padding: 14px;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    /* iOS 上 font-size 小於 16px 的輸入框一聚焦就會自動放大整頁，
       之後還得手動縮回去，所以表單元件維持 16px */
    .form-control,
    .form-select {
        font-size: 16px;
    }

    /* ---- 觸控目標 ----
       btn-sm 預設高度約 31px，低於觸控建議的 44px，容易點不準 */
    .btn-sm {
        min-height: 38px;
    }
}