/**
 * 後台響應式 - 異動紀錄：表格卡片式佈局
 *
 * 載入順序見 src/lib/assets.ts 的 RESPONSIVE_STYLES，順序即 cascade 順序。
 * 七欄的表格在手機上橫向捲動很難用，改成一筆一張卡片、欄名以 data-label 帶出，
 * 與品牌／使用者頁的既有做法一致。
 */

@media (max-width: 48rem) {
    #page-audit-log .audit-log-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

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

    #page-audit-log .audit-log-date-group .form-input {
        flex: 1;
        min-width: 0;
    }

    #page-audit-log .audit-log-section .table-container {
        overflow-x: visible;
    }

    #page-audit-log .history-table-wrapper {
        overflow-x: visible;
    }

    #page-audit-log #auditLogTable {
        min-width: unset;
        display: block;
    }

    #page-audit-log #auditLogTable thead {
        display: none;
    }

    #page-audit-log #auditLogTable tbody {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        padding: 0.75rem;
    }

    #page-audit-log #auditLogTable tbody tr {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.03);
    }

    .light-theme #page-audit-log #auditLogTable tbody tr {
        border-color: #e2e8f0;
        background: #fff;
    }

    #page-audit-log #auditLogTable tbody td {
        display: block;
        padding: 0;
        border: none;
    }

    /* 空狀態／載入中是單一 td 橫跨整列，不套卡片內的欄位排版 */
    #page-audit-log #auditLogTable tbody td.history-empty-state {
        text-align: center;
    }

    #page-audit-log .audit-log-summary {
        min-width: 0;
        font-weight: 600;
    }

    /* 儀表板近期異動：窄畫面下操作者換到第二行，避免把摘要擠成一個字 */
    .dashboard-audit-item {
        flex-wrap: wrap;
        gap: 0.375rem 0.5rem;
    }

    .dashboard-audit-summary {
        flex: 1 1 100%;
        order: 3;
        white-space: normal;
    }
}