/* 全站樣式改由 MudBlazor 提供，這裡只保留少量基礎設定。 */

html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* 右上角的帳號名稱（點了出現「修改密碼」）：照原樣顯示。按鈕預設會把英文變成全大寫，帳號 amy 會變成 AMY */
.account-menu .mud-button-root {
    text-transform: none;
}

/* 「上面一排篩選、下面一張表」的頁（操作紀錄、登入紀錄）：整頁剛好一個畫面高，表格吃掉剩下的高度，
   只有表身在捲、分頁列固定在最下面。篩選那一排在窄螢幕會折成兩三行——寫死表格高度的話，一折行分頁列就被推出畫面 */
.table-page {
    display: flex;
    flex-direction: column;
    /* 扣掉上面的選單列與內容區上下的留白 */
    height: calc(100dvh - var(--mud-appbar-height, 64px) - 32px);
}

.table-page > .mud-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.table-page > .mud-table > .mud-table-container {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
}

.table-page > .mud-table > .mud-table-pagination {
    flex: 0 0 auto;
}

/* 明細視窗（操作紀錄、登入紀錄；需求方 2026-10-05：清單上只寫一行，內容按「明細」另開視窗看）。
   上面一段：左邊一欄標題、右邊內容 */
.record-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0 0 20px;
}

.record-meta dt {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.record-meta dd {
    margin: 0;
    word-break: break-word;
}

/* 下面一張逐項的表。公告、簽名檔會有好幾行：照原樣換行；太長的字自己折，不把視窗撐出去 */
.record-fields {
    border-collapse: collapse;
    width: 100%;
}

.record-fields th,
.record-fields td {
    text-align: left;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.record-fields th {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.record-fields td {
    white-space: pre-wrap;
    word-break: break-word;
}

.record-fields th:first-child,
.record-fields td:first-child {
    white-space: nowrap;
    width: 1%;
}