/**
 * 簽核中心 — 手機版（表格卡片化）
 *
 * 比照 `responsive/audit-log.css`：8 欄的表格在 375px 一定溢出，
 * 所以在 48rem 以下把每一列轉成卡片，用 `data-label` 帶出欄位名。
 *
 * ⚠ 同樣 scope 到 `#page-approvals`。`src/lib/assets.ts` 的 RESPONSIVE_STYLES
 * 會以 `media: BP.mobile` 載入本檔——條件不匹配時瀏覽器不以它阻塞首次繪製。
 */

@media (max-width: 48rem) {
    /* ── 橫幅與分頁 ────────────────────────────────────────────────── */
    #page-approvals .approval-emergency-banner {
        flex-wrap: wrap;
        font-size: 0.875rem;
    }

    #page-approvals .approval-scope-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #page-approvals .approval-scope-tabs::-webkit-scrollbar {
        display: none;
    }

    #page-approvals .approval-scope-tab {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* ── 工具列改單欄 ──────────────────────────────────────────────── */
    #page-approvals .approval-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    #page-approvals .approval-toolbar .filter-group,
    #page-approvals .approval-toolbar .search-box {
        width: 100%;
    }

    #page-approvals .approval-date-group {
        flex-wrap: wrap;
    }

    #page-approvals .approval-date-group .form-input {
        flex: 1 1 8rem;
        min-width: 0;
    }

    /* ── 批次列 ────────────────────────────────────────────────────── */
    #page-approvals .approval-batch-actions {
        width: 100%;
        margin-left: 0;
    }

    #page-approvals .approval-batch-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* ── 表格卡片化 ────────────────────────────────────────────────── */
    #page-approvals .history-table-wrapper {
        overflow: visible;
    }

    #page-approvals #approvalTable thead {
        display: none;
    }

    #page-approvals #approvalTable,
    #page-approvals #approvalTable tbody,
    #page-approvals #approvalTable tr,
    #page-approvals #approvalTable td {
        display: block;
        width: 100%;
    }

    #page-approvals #approvalTable tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem 0.875rem;
        border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
        border-radius: 0.5rem;
        background: var(--card-bg, rgba(30, 41, 59, 0.5));
    }

    #page-approvals #approvalTable td {
        padding: 0.25rem 0;
        border: none;
        text-align: left;
    }

    /* 欄位名由 data-label 帶出；JS 在拼接每一列時就寫上去 */
    #page-approvals #approvalTable td[data-label]::before {
        content: attr(data-label) "：";
        display: inline-block;
        min-width: 4.5rem;
        color: var(--text-secondary, #94a3b8);
        font-size: 0.8125rem;
    }

    /* 單號與說明是卡片的主體，不加欄位名前綴。
       勾選欄則是根本沒有 data-label（見 approvals/batch.js），不會產生 ::before。 */
    #page-approvals #approvalTable td.approval-no::before,
    #page-approvals #approvalTable td.approval-summary::before {
        content: none;
    }

    /*
     * 卡片模式下每個 td 都是 block，勾選框會自己佔掉一整行。
     * 這兩條把它與單號拉回同一行——卡片的第一行是「□ #123」，
     * 與桌機版「最左邊勾選、右邊單號」的閱讀順序一致。
     *
     * 特異度 (2,1,1) 壓得過上面 `#page-approvals #approvalTable td` 的 (2,0,1)，
     * 但低於 pages/approvals.css 收整欄用的 `.is-selection-hidden td.approval-check`
     * (2,2,1)——沒有核准權時仍然整欄不見，不會被這裡救回來。
     */
    #page-approvals #approvalTable td.approval-check {
        display: inline-block;
        width: auto;
        padding-right: 0.5rem;
        vertical-align: middle;
    }

    #page-approvals #approvalTable td.approval-no {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    /*
     * 卡片化用的 `#page-approvals #approvalTable td` 帶兩個 id，特異度高過
     * pages/approvals.css 的 `#page-approvals .approval-summary`，會把說明欄的
     * flex 直排壓回 `display: block`——主敘述、模組、理由於是擠成同一行並溢出
     * 卡片右緣。這裡以同等特異度把直排補回來。
     */
    #page-approvals #approvalTable td.approval-summary {
        display: flex;
        flex-direction: column;
        gap: 0.1875rem;
        max-width: none;
    }

    #page-approvals .approval-summary-reason {
        white-space: normal;
    }

    /* 空狀態列在卡片化之後仍要置中 */
    #page-approvals #approvalTable td.history-empty-state {
        text-align: center;
        padding: 1.5rem 0;
    }

    #page-approvals #approvalTable td.history-empty-state::before {
        content: none;
    }

    /* ── 詳情 modal ────────────────────────────────────────────────── */

    /*
     * ⚠ 這一段的選擇器一律多帶一個 `.modal`（`#approvalDetailModal.modal`）。
     *
     * 本檔在 `RESPONSIVE_STYLES` 裡，而 `pages/approvals.css` 由 page-styles.js
     * 注入到 `#pageStyleAnchor`（admin-overrides.css）之前——也就是**排在本檔之後**。
     * 同特異度時後到者贏，所以 `#approvalDetailModal .approval-detail-label`
     * 這種寫法在手機上完全不會生效（改版前的 `flex: none` 就是這樣被吃掉的，
     * 結果是欄位列改直排後，`flex-basis` 從寬度變成高度，標籤與值之間裂出 6rem 空白）。
     * 多帶一個 class 把特異度拉到 (1,2,0)，才壓得過 pages 的 (1,1,0)。
     */
    #approvalDetailModal.modal .modal-content {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
    }

    #approvalDetailModal.modal .modal-body {
        padding: 0.875rem;
    }

    /* 桌機是雙欄；窄螢幕一定要壓回單欄，否則兩欄各自被擠到讀不了 */
    #approvalDetailModal.modal .approval-detail-grid {
        grid-template-columns: 1fr;
    }

    #approvalDetailModal.modal .approval-detail-row {
        flex-direction: column;
        gap: 0.125rem;
    }

    #approvalDetailModal.modal .approval-detail-label {
        flex: none;
    }

    #approvalDetailModal.modal .approval-detail-json {
        max-height: 11rem;
    }

    #approvalDetailModal.modal .approval-detail-card-body.is-scroll {
        max-height: 14rem;
    }

    #approvalDetailModal.modal .approval-timeline-time {
        margin-left: 0;
        width: 100%;
    }

    /* 按鈕列在窄螢幕改成整排，避免被擠成兩個字一行 */
    #approvalDetailModal.modal .approval-detail-footer {
        flex-direction: column-reverse;
    }

    #approvalDetailModal.modal .approval-detail-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── 批次結果 modal ───────────────────────────────────────────── */
    /* 同樣多帶一個 .modal 把特異度拉到 (1,2,0)，理由見上一段 */
    #approvalBatchResultModal.modal .modal-content {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
    }

    #approvalBatchResultModal.modal .approval-result-list {
        max-height: 60vh;
    }
}