@import '_content/SaVehicle.Client.Shared/SaVehicle.Client.Shared.uhvw3gyq04.bundle.scp.css';

/* /Features/VehiclePermit/Pages/VehiclePermitHistoryPage.razor.rz.scp.css */
/* 申請紀錄頁版面補強。
   頁首與面板沿用 base 設計系統元件（.page-title-bar / .card）與 token。
   本檔處理：操作欄按鈕群組、表格欄位輕重，以及這張 9 欄寬表的響應式（≤991.98px 走卡片式）。 */

/* 操作欄按鈕群組：flex-wrap + 一致 gap，取代原本 ms-1 串接造成的雜亂換行 */
.history-actions[b-9yqk9jc4wf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* 主要識別欄位（申請事件）加重、次要欄位（車證號碼）降躁，建立掃描層級 */
.history-table td.col-event[b-9yqk9jc4wf] {
    font-weight: var(--font-weight-bold);
    color: var(--text-heading);
}

.history-table td.col-muted[b-9yqk9jc4wf] {
    color: var(--text-muted);
}

/* 篩選列右側筆數標示 */
.history-count[b-9yqk9jc4wf] {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    white-space: nowrap;
}

/* 響應式：9 欄寬表在 ≤991.98px（手機 + 平板）改走卡片式，避免平板把寬表擠成直排按鈕；
   ≥992px 才用完整表格。卡片式由本檔自行定義，故 markup 不需再掛 .table-card-mobile。 */
@media (max-width: 991.98px) {
    .history-table thead[b-9yqk9jc4wf] {
        display: none;
    }

    .history-table tbody tr[b-9yqk9jc4wf] {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        background-color: var(--bg-white);
        box-shadow: var(--shadow-sm);
    }

    .history-table tbody td[b-9yqk9jc4wf] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-body);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* 資料欄：標籤 + 值靠左；標籤固定寬度，讓長短不一的標籤後面的值對齊成一欄 */
    .history-table tbody td:not(:last-child)[b-9yqk9jc4wf] {
        justify-content: flex-start;
        text-align: left;
    }

    .history-table tbody td:not(:last-child)[b-9yqk9jc4wf]::before {
        content: attr(data-label);
        width: 5.5em;
        flex-shrink: 0;
        font-weight: var(--font-weight-bold);
        color: var(--text-muted);
    }

    /* 操作欄（最後一格）：去底線、置中，按鈕群組換行 */
    .history-table tbody td:last-child[b-9yqk9jc4wf] {
        border-bottom: none;
        justify-content: center;
    }

    .history-actions[b-9yqk9jc4wf] {
        justify-content: center;
    }
}
/* /Shared/Layout/MainLayout.razor.rz.scp.css */
.main-content[b-vhcsbpc36y] {
    min-height: calc(100vh - 56px);
}

.skip-link[b-vhcsbpc36y] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary, #0d7377);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 var(--radius-xs) 0;
    transition: top 0.2s ease;
}

.skip-link:focus[b-vhcsbpc36y] {
    top: 0;
}