/* /Layout/LoginLayout.razor.rz.scp.css */
/* 登入頁版面：卡片往上移，不再垂直置中。 */
.login-layout[b-uv28lo8euu] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 8vh;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* 右上角登入者姓名：跟著佈景主題走，而且要夠明顯。

   做法是「把 header 自己的前景／背景互換」：
     膠囊底色 = var(--rz-header-color)          （header 的字色）
     膠囊字色 = var(--rz-header-background-color) （header 的底色）
   兩個值都是主題 token，所以換主題自動跟著變；而 Radzen 定義
   --rz-header-color 本來就是「壓在 --rz-header-background-color 上要看得見的色」，
   互換後對比值必然不低於主題原本的 header 文字對比 —— 每一個主題都是最高對比，
   不需要逐一調參數。

   走過的兩個錯路，都別再回頭：
   1. 用 --rz-primary 調半透明：material（預設）主題的 header 底色就是
      --rz-primary 本身，同色相疊等於沒混，膠囊整個看不見。
   2. 用 --rz-header-color 調 20% tint：#ffffff 20% 疊在 #4340D2 上只得到
      #6966DB，跟底色差沒多少 —— 有邊框但「不明顯」。
      tint 這個手法本身就不適合拿來做「要跳出來」的東西。 */
.user-name[b-wpyiyg4s3x] {
    color: var(--rz-header-background-color);
    background-color: var(--rz-header-color);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
    /* 同一組 token 調出的陰影，把膠囊從 header 平面抬起一點（不影響對比） */
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-header-background-color) 40%, transparent);
    white-space: nowrap;
    /* F5 防抖：預渲染時姓名還沒讀到（空膠囊），互動接管後才填入，
       沒預留寬度右邊的登出/設定鈕會被往右擠一下。inline-block + 最小寬
       讓空膠囊先佔位，填入短名時幾乎不動。 */
    display: inline-block;
    min-width: 4em;
    text-align: center;
}
/* /Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g6crh335x7],
.components-reconnect-repeated-attempt-visible[b-g6crh335x7],
.components-reconnect-failed-visible[b-g6crh335x7],
.components-pause-visible[b-g6crh335x7],
.components-resume-failed-visible[b-g6crh335x7],
.components-rejoining-animation[b-g6crh335x7] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-retrying[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-failed[b-g6crh335x7],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g6crh335x7] {
    display: block;
}


#components-reconnect-modal[b-g6crh335x7] {
    background-color: var(--rz-dialog-background-color);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--rz-dialog-border-radius);
    box-shadow: var(--rz-dialog-shadow);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g6crh335x7 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-g6crh335x7 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g6crh335x7 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

}

#components-reconnect-modal[b-g6crh335x7]::backdrop {
    background-color: var(--rz-dialog-mask-background-color);
    animation: components-reconnect-modal-fadeInOpacity-b-g6crh335x7 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-g6crh335x7 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-g6crh335x7 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-g6crh335x7 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-g6crh335x7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-g6crh335x7] {
    margin: 0;
    text-align: center;
}

.components-rejoining-animation[b-g6crh335x7] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-g6crh335x7] {
        position: absolute;
        border: 3px solid var(--rz-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-g6crh335x7 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-g6crh335x7] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-g6crh335x7 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Pages/API連線記錄查詢.razor.rz.scp.css */
/* API 連線記錄查詢樣式。
   整頁只有一個 RadzenDataGrid，桌機與手機共用；
   手機另有一份卡片清單，兩者由 CSS media query 切換。（版型沿用 行動保log查詢） */

/* ── 標題列（.api-top）─────────────────────────────────────
   版型參照 零用金建檔 的 .cash-top：標題放在表格上方的卡片裡，
   不放在 DataGrid 的 HeaderTemplate —— HeaderTemplate 在 .api-grid 內，
   而 .api-grid 在窄螢幕是 display:none，標題會跟著不見。

   ::deep 的理由同 .cash-top：.api-top / .api-header / .api-badge 經參數傳進
   Radzen 元件後，算繪出的元素不帶本頁 scope，寫成 .api-header 會被編成
   .api-header[b-xxxx] 而永遠對不上。用「有 scope 的 literal div 當錨點 +
   ::deep 後綴」才兩邊都成立。 */
.api-top[b-di0qu7w9ol]  .api-header {
    min-width: 0;
}

.api-top[b-di0qu7w9ol]  h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* 徽章不參與壓縮：被壓扁會變成看不出數字的小方塊 */
.api-top[b-di0qu7w9ol]  .api-badge {
    flex: none;
}

/* 標題列右側那組（最後更新時間＋重新整理鈕）：不參與壓縮。
   沒設 flex:none 的話，標題那組一變長，這組會被壓到寬度不足、
   時間戳先換行、鈕被擠扁。換行時由父層的 SpaceBetween 靠左放。 */
.api-top[b-di0qu7w9ol]  .api-actions {
    flex: none;
}

/* 篩選列（卡片第二列）：跟上一列的標題用一條細線分開，
   否則標題、徽章、時間戳、勾選框會糊成同一排。 */
.api-top[b-di0qu7w9ol]  .api-filters {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-border-color);
}

/* 「最後更新 HH:mm:ss」：小字灰字、不換行。
   存在的理由是「按重新整理要看出有動作」——同條件重查常查回同幾列，
   沒有時間戳會被當成按鈕壞掉。 */
.api-updated[b-di0qu7w9ol] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 等寬字才對得齊（時間、IP） */
.api-time[b-di0qu7w9ol] {
    font-family: Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* 查詢耗時：小字灰字，不換行 */
.api-loadtime[b-di0qu7w9ol] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 詳細視窗：直式 label/value，長文字自動換行，不需橫向捲動。 */
.api-detail-row[b-di0qu7w9ol] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.api-detail-label[b-di0qu7w9ol] {
    flex: 0 0 8rem;
    color: var(--rz-text-secondary-color);
}

.api-detail-value[b-di0qu7w9ol] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長錯誤訊息 / 唯一序號不撐破視窗 */
    overflow-wrap: anywhere;
}

/* 詳細內容是 JSON：保留原始換行與縮排，過長時在視窗內自己捲 */
.api-json[b-di0qu7w9ol] {
    margin: 0;
    padding: 0.5rem;
    max-height: 40vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    background: var(--rz-base-background-color, #f5f5f5);
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: 4px;
}

/* 窄螢幕（手機／平板）：表格收起改卡片清單，桌機維持 DataGrid */
.api-cards[b-di0qu7w9ol] {
    display: none;
}

@media (max-width: 1024px) {
    /* 標題在窄螢幕縮一級，騰出空間讓筆數徽章跟標題同列 */
    .api-top[b-di0qu7w9ol]  h1 {
        font-size: 1.15rem;
    }

    .api-grid[b-di0qu7w9ol] {
        display: none;
    }

    .api-cards[b-di0qu7w9ol] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .api-card[b-di0qu7w9ol] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.6rem 0.75rem;
        background: var(--rz-card-background-color, #fff);
        border: 1px solid var(--rz-border-color, #e0e0e0);
        border-radius: 8px;
    }

    .api-empty[b-di0qu7w9ol] {
        align-items: center;
        color: var(--rz-text-secondary-color);
    }

    .api-card-top[b-di0qu7w9ol] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .api-card-user[b-di0qu7w9ol] {
        margin-left: auto;
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
    }

    .api-card-main[b-di0qu7w9ol] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .api-card-sub[b-di0qu7w9ol] {
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
        overflow-wrap: anywhere;
    }

    .api-card-err[b-di0qu7w9ol] {
        font-size: 0.85rem;
        color: var(--rz-danger, #d32f2f);
        overflow-wrap: anywhere;
    }

    .api-card-actions[b-di0qu7w9ol] {
        display: flex;
        justify-content: flex-end;
    }

    /* 分頁器上下各一份（見 razor 的 CardPager）：
       桌機靠 DataGrid 的 PagerPosition.TopAndBottom，但 .api-grid 在窄螢幕是
       display:none，那兩顆 pager 會跟著不見，所以卡片區自己補。
       上方那顆貼在清單最上緣，給的間距小一點，免得看起來像浮在半空。 */
    .api-card-pager[b-di0qu7w9ol] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
    }

    .api-cards > .api-card-pager:first-child[b-di0qu7w9ol] {
        padding-top: 0;
    }

    .api-card-pageinfo[b-di0qu7w9ol] {
        font-size: 0.85rem;
        white-space: nowrap;
    }
}
/* /Pages/API連線記錄查詢_繼承.razor.rz.scp.css */
/* API 連線記錄查詢_繼承 樣式（實驗頁）。
   標題卡片與卡片區分頁器已抽成共用 QueryHeader / QueryCardPager，
   本檔只留表格、手機卡片、詳細視窗與篩選列小字。 */

/* 等寬字才對得齊（時間、IP） */
.api-time[b-a51sr8gjca] {
    font-family: Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* 查詢耗時：小字灰字，不換行 */
.api-loadtime[b-a51sr8gjca] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 詳細視窗：直式 label/value，長文字自動換行，不需橫向捲動。 */
.api-detail-row[b-a51sr8gjca] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.api-detail-label[b-a51sr8gjca] {
    flex: 0 0 8rem;
    color: var(--rz-text-secondary-color);
}

.api-detail-value[b-a51sr8gjca] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長錯誤訊息 / 唯一序號不撐破視窗 */
    overflow-wrap: anywhere;
}

/* 詳細內容是 JSON：保留原始換行與縮排，過長時在視窗內自己捲 */
.api-json[b-a51sr8gjca] {
    margin: 0;
    padding: 0.5rem;
    max-height: 40vh;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    background: var(--rz-base-background-color, #f5f5f5);
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: 4px;
}

/* 窄螢幕（手機／平板）：表格收起改卡片清單，桌機維持 DataGrid */
.api-cards[b-a51sr8gjca] {
    display: none;
}

@media (max-width: 1024px) {
    .api-grid[b-a51sr8gjca] {
        display: none;
    }

    .api-cards[b-a51sr8gjca] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .api-card[b-a51sr8gjca] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.6rem 0.75rem;
        background: var(--rz-card-background-color, #fff);
        border: 1px solid var(--rz-border-color, #e0e0e0);
        border-radius: 8px;
    }

    .api-empty[b-a51sr8gjca] {
        align-items: center;
        color: var(--rz-text-secondary-color);
    }

    .api-card-top[b-a51sr8gjca] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .api-card-user[b-a51sr8gjca] {
        margin-left: auto;
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
    }

    .api-card-main[b-a51sr8gjca] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .api-card-sub[b-a51sr8gjca] {
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
        overflow-wrap: anywhere;
    }

    .api-card-err[b-a51sr8gjca] {
        font-size: 0.85rem;
        color: var(--rz-danger, #d32f2f);
        overflow-wrap: anywhere;
    }

    .api-card-actions[b-a51sr8gjca] {
        display: flex;
        justify-content: flex-end;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* 登入頁專屬樣式。慣例：各頁 CSS 寫在自己的 .razor.css（scoped），
   非必要不寫全站 Server/wwwroot/css/site.css。
   要穿透到 Radzen 內部元素時，::deep 前必須有空格
   （.daily-grid ::deep ... —— 以前寫成 .daily-grid::deep 少空格，整條被瀏覽器忽略）。 */

/* 每日通報卡的抬頭：原本只有一顆 icon 加一個 <strong>，字級跟表格內文字差不多，
   掃過去看不出來那是區塊標題。改成整條帶底色＋左側主色豎線的橫幅，字級放大、
   加字距、字色吃 --rz-primary（切佈景自動跟著走，不寫死色碼）。
   .daily-head 與其內的 <strong> 都是 .razor 手寫元素，會帶本頁 scope，
   所以 scoped 選擇器直接命中，不用 ::deep。
   底色用 color-mix 取 --rz-primary 12%：Radzen 只提供 primary-dark/light/lighter
   等固定階梯，深色佈景下 lighter 底色反而刺眼，取 12% 透明度兩種佈景都安全。 */
.daily-head[b-jxxmgruq7h] {
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-left: 4px solid var(--rz-primary);
}

.daily-head strong[b-jxxmgruq7h] {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--rz-primary);
}

/* 手機：橫幅不要跟表格搶垂直空間，字級與內距各降一階。 */
@media (max-width: 767.98px) {
    .daily-head[b-jxxmgruq7h] {
        gap: 0.45rem;
        padding: 0.45rem 0.6rem;
    }

    .daily-head strong[b-jxxmgruq7h] {
        font-size: 1.1rem;
        letter-spacing: 0.04em;
    }
}

/* 每日通報：欄位與表頭不斷行，超寬改橫向捲動。
   Radzen 12 的 DataGrid 無 CssClass 參數，改以外層 .daily-grid div 定位；
   欄位級 CssClass（daily-time/daily-msg）是有效參數，會輸出在儲存格上。
   table-layout:auto + width:max-content 讓表格跟著最長訊息撐寬，
   min-width:100% 讓短訊息時仍撐滿；.rz-data-grid-data 本就是 overflow:auto，
   表格變寬即自動出現橫向捲軸。
   Radzen 12 預設格內包 .rz-cell-data.rz-text-truncate（超出顯示 ...），
   這裡明確關掉 truncate 讓訊息完整顯示。 */
.daily-grid[b-jxxmgruq7h]  .rz-grid-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.daily-grid[b-jxxmgruq7h]  .rz-grid-table th {
    white-space: nowrap;
}

.daily-grid[b-jxxmgruq7h]  td.daily-time,
.daily-grid[b-jxxmgruq7h]  td.daily-msg {
    white-space: nowrap;
    overflow: visible;
}

.daily-grid[b-jxxmgruq7h]  td.daily-time .rz-cell-data,
.daily-grid[b-jxxmgruq7h]  td.daily-msg .rz-cell-data {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* 最小手機寬度不斷版（<=767px）：訊息維持完整可滑（不斷行、不省略），
   超寬由格內橫向捲動承擔；卡片本體鎖在視窗內，頁面不爆版。
   .rz-pager 原生已 flex-wrap:wrap；外層 .rz-datatable overflow:hidden 只裁外框，
   內層 .rz-data-grid-data 照樣可捲。時間欄在窄螢幕略縮，多留一點給訊息欄。 */
@media (max-width: 767.98px) {
    /* 整頁鎖在視窗內：表格 max-content 會層層把 .login-page（fit-content）撐寬，
       再被 .login-layout 置中，左半直接出界。壓在 .login-page 這層，
       它的父層是滿版寬，100% 有明確對象；兩張卡片一次鎖回，表格照樣格內橫向捲。
       .login-page 與 .daily-grid 都是本頁自己的元素，不用 ::deep。 */
    .login-page[b-jxxmgruq7h],
    .daily-grid[b-jxxmgruq7h] {
        max-width: 100%;
    }

    .daily-grid[b-jxxmgruq7h]  td.daily-time {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .daily-grid[b-jxxmgruq7h]  td.daily-time .rz-cell-data {
        font-size: 0.8rem;
    }
}

/* 桌機（>=1200px）左右並排：左登入框固定 400px 置中群組內，右每日通報填滿剩餘寬度。
   手機與平板維持上下堆疊。依賴 markup 順序：登入框是 .login-page 的第一個
   .rz-card，通報卡是最後一個；都是本頁自己的元素，不用 ::deep。 */
@media (min-width: 1200px) {
    .login-page[b-jxxmgruq7h] {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 1.5rem;
        /* 整排撐滿並置中：fit-content 只包內容，flex:1 的通報卡在窄容器裡長不大、
           右側留空；改為滿版（上限 1600px 置中），通報卡才有空間吃滿右側。 */
        width: min(1600px, 100%);
        margin-inline: auto;
    }

    /* 堆疊用的 1rem 空白元素，並排時改由 gap 負責間距 */
    .login-gap[b-jxxmgruq7h] {
        display: none;
    }

    .login-page > .rz-card:first-child[b-jxxmgruq7h] {
        flex: 0 0 400px;
        max-width: 400px;
    }

    /* 注意：通報卡（RadzenCard 渲染的 div）不帶本頁 scope，這裡不能再加一條
       .login-page > .rz-card:last-child 去控它——編譯出的 [b-x] 永遠命中不了，
       之前因此被 site.css 的 max-width:400px 蓋掉、卡片縮成一團。
       通報卡尺寸改寫在 Login.razor 的 RadzenCard Style 參數（inline 蓋全域）。 */
}
/* /Pages/使用者權限設定.razor.rz.scp.css */
/* 使用者權限設定頁。
   規則見專案 AGENTS.md：各頁 CSS 寫在自己的 .razor.css（scoped），
   ::deep 前必須有空格。 */

/* 標題列。.perm-head 與其內的 <h1> 都是 .razor 手寫元素，會帶本頁 scope，
   scoped 選擇器直接命中，不用 ::deep。 */
.perm-head h1[b-3h890agtui] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.perm-head .rzi[b-3h890agtui] {
    font-size: 1.25rem;
    color: var(--rz-primary);
}

.perm-self[b-3h890agtui] {
    color: var(--rz-text-secondary-color);
}

/* 帳號選擇器：撐滿可用寬度，但不要寬到難以掃視。 */
.perm-picker[b-3h890agtui] {
    width: 100%;
    max-width: 420px;
    min-width: 220px;
}

.perm-copy-picker[b-3h890agtui] {
    width: 100%;
    max-width: 260px;
    min-width: 180px;
}

/* 下拉選項與選中後的顯示（<Template> / <ValueTemplate> 裡都是手寫元素，會帶 scope）。 */
.perm-option[b-3h890agtui] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.perm-account[b-3h890agtui] {
    font-weight: 600;
}

.perm-name[b-3h890agtui] {
    color: var(--rz-text-secondary-color);
}

/* 群組抬頭：帶底色＋左側主色豎線，掃過去看得出區塊分界。 */
.group-head[b-3h890agtui] {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-border-color);
}

/* 矩陣：固定結構的「頁面 × 五個動作」表格。
   刻意用表格語意元素而不是 RadzenDataGrid，理由見 .razor 內的註解。 */
.perm-matrix[b-3h890agtui] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.perm-matrix th[b-3h890agtui],
.perm-matrix td[b-3h890agtui] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--rz-border-color);
    text-align: center;
}

.perm-matrix thead th[b-3h890agtui] {
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.perm-matrix tbody tr:last-child th[b-3h890agtui],
.perm-matrix tbody tr:last-child td[b-3h890agtui] {
    border-bottom: none;
}

/* 頁名欄：佔掉多餘寬度，動作欄固定等寬。 */
.perm-matrix .col-page[b-3h890agtui] {
    width: auto;
    text-align: left;
}

.perm-matrix .col-flag[b-3h890agtui] {
    width: 72px;
}

.page-name[b-3h890agtui] {
    font-weight: 500;
}

/* 窄螢幕：動作欄縮窄，讓寬度留給頁名，避免整個表格被撐出橫向捲動。 */
@media (max-width: 767.98px) {
    .perm-matrix .col-flag[b-3h890agtui] {
        width: 56px;
    }
}
/* /Pages/員工資料建檔.razor.rz.scp.css */
/* 員工資料建檔樣式。
   桌機（≥768px）顯示 DataGrid，手機顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果。 */

.emp-no[b-0435e7zudy] {
    font-family: Consolas, monospace;
    font-weight: 600;
}

.emp-header h1[b-0435e7zudy] {
    margin: 0;
    font-size: 1.4rem;
}

.only-mobile[b-0435e7zudy] {
    display: none;
}

/* 手機卡片 */
.emp-card-title[b-0435e7zudy] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.emp-card-code[b-0435e7zudy] {
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.emp-kv[b-0435e7zudy] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.emp-kv-label[b-0435e7zudy] {
    flex: 0 0 6.5rem;
    color: var(--rz-text-secondary-color);
}

.emp-kv-value[b-0435e7zudy] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 離職者比照桌機表格的整列高亮 */
.emp-card-left[b-0435e7zudy] {
    border-inline-start: 3px solid var(--rz-danger);
}

@media (max-width: 767.98px) {
    .only-desktop[b-0435e7zudy] {
        display: none !important;
    }

    .only-mobile[b-0435e7zudy] {
        display: block;
    }

    /* 搜尋列改為獨佔一整行，避免按鈕擠壓 */
    .emp-actions[b-0435e7zudy] {
        width: 100%;
    }
}
/* /Pages/客戶出貨維護.razor.rz.scp.css */
/* 客戶出貨維護樣式。
   桌機（≥768px）顯示 DataGrid，手機顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果。 */

.ship-no[b-kme037nvkh] {
    font-family: Consolas, monospace;
    font-weight: 600;
}

.ship-header h1[b-kme037nvkh] {
    margin: 0;
    font-size: 1.4rem;
}

.only-mobile[b-kme037nvkh] {
    display: none;
}

/* 手機卡片 */
.ship-card-title[b-kme037nvkh] {
    font-family: Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.ship-card-code[b-kme037nvkh] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* 餘額徽章不被標題擠壓；Radzen 沒有 rz-flex-none 這個工具類別 */
.ship-card-badge[b-kme037nvkh] {
    flex: none;
}

.ship-kv[b-kme037nvkh] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ship-kv-label[b-kme037nvkh] {
    flex: 0 0 6.5rem;
    color: var(--rz-text-secondary-color);
}

.ship-kv-value[b-kme037nvkh] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長發票號碼不撐破畫面 */
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .only-desktop[b-kme037nvkh] {
        display: none !important;
    }

    .only-mobile[b-kme037nvkh] {
        display: block;
    }

    /* 搜尋列改為獨佔一整行，避免按鈕擠壓 */
    .ship-actions[b-kme037nvkh] {
        width: 100%;
    }
}
/* /Pages/客戶資料庫維護.razor.rz.scp.css */
/* 客戶資料庫維護：標題列＋工具列；窄螢幕時工具列換行。 */

.cdb-head[b-c08s4k2i3z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.cdb-title[b-c08s4k2i3z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cdb-title h2[b-c08s4k2i3z] {
    margin: 0;
    font-size: 1.25rem;
}

.cdb-count[b-c08s4k2i3z] {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.cdb-toolbar[b-c08s4k2i3z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cdb-alert[b-c08s4k2i3z] {
    margin-bottom: 0.75rem;
}

.cdb-result[b-c08s4k2i3z] {
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.cdb-muted[b-c08s4k2i3z] {
    color: var(--rz-text-secondary-color);
}
/* /Pages/客戶資料庫編輯.razor.rz.scp.css */
/* 客戶資料庫編輯對話框：雙欄表單，窄時單欄；開關群組橫排。 */

.dlg-alert[b-chw7cr7kfv] {
    margin-bottom: 0.75rem;
}

.dlg-grid[b-chw7cr7kfv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 0.875rem;
    padding-top: 0.25rem;
}

.dlg-field[b-chw7cr7kfv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.dlg-span[b-chw7cr7kfv] {
    grid-column: span 2;
}

.dlg-empty[b-chw7cr7kfv] {
    min-height: 1px;
}

.dlg-checks[b-chw7cr7kfv] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.375rem 0;
}

.check-item[b-chw7cr7kfv] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dlg-readonly[b-chw7cr7kfv] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.dlg-actions[b-chw7cr7kfv] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .dlg-grid[b-chw7cr7kfv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dlg-span[b-chw7cr7kfv] {
        grid-column: span 1;
    }
}
/* /Pages/客戶資料維護.razor.rz.scp.css */
/* 客戶資料維護樣式。
   桌機（≥992px）顯示 DataGrid，手機與平板顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果。 */

.cust-no[b-rec45zgxb6] {
    font-family: Consolas, monospace;
    font-weight: 600;
}

.cust-header h1[b-rec45zgxb6] {
    margin: 0;
    font-size: 1.4rem;
}

.only-mobile[b-rec45zgxb6] {
    display: none;
}

/* 手機卡片 */
.cust-card-title[b-rec45zgxb6] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.cust-card-code[b-rec45zgxb6] {
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* 餘額徽章不被標題擠壓；Radzen 沒有 rz-flex-none 這個工具類別 */
.cust-card-badge[b-rec45zgxb6] {
    flex: none;
}

.cust-kv[b-rec45zgxb6] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.cust-kv-label[b-rec45zgxb6] {
    flex: 0 0 6.5rem;
    color: var(--rz-text-secondary-color);
}

.cust-kv-value[b-rec45zgxb6] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長網址／地址不撐破畫面 */
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .only-desktop[b-rec45zgxb6] {
        display: none !important;
    }

    .only-mobile[b-rec45zgxb6] {
        display: block;
    }

    /* 搜尋列改為獨佔一整行，避免按鈕擠壓 */
    .cust-actions[b-rec45zgxb6] {
        width: 100%;
    }
}
/* /Pages/後端使用者管理.razor.rz.scp.css */
/* 後端使用者管理樣式。標題字級與客戶 / 出貨頁一致（1.4rem），
   避免瀏覽器預設 h1（2em）顯得過大。 */

.user-header h1[b-yiwmpbarrf] {
    margin: 0;
    font-size: 1.4rem;
    white-space: nowrap;
}
/* /Pages/推播發送記錄查詢.razor.rz.scp.css */
.pushlog-page[b-5tst3gq4b7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pushlog-filters .filter-row[b-5tst3gq4b7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.pushlog-filters .filter-field[b-5tst3gq4b7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pushlog-filters .filter-actions[b-5tst3gq4b7] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.pushlog-error[b-5tst3gq4b7] {
    margin-top: 12px;
}

.pushlog-meta[b-5tst3gq4b7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pushlog-meta .pushlog-time[b-5tst3gq4b7] {
    color: var(--rz-text-secondary-color, #666);
}

.pushlog-meta .pushlog-spacer[b-5tst3gq4b7] {
    flex: 1;
}

.pushlog-detail .detail-head[b-5tst3gq4b7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.pushlog-detail .detail-head span[b-5tst3gq4b7] {
    color: var(--rz-text-secondary-color, #666);
}

.pushlog-detail .detail-head .rz-button[b-5tst3gq4b7] {
    margin-left: auto;
}

.pushlog-detail .detail-body[b-5tst3gq4b7] {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 320px;
    overflow: auto;
}
/* /Pages/權限不足.razor.rz.scp.css */
/* 權限不足頁。
   .deny-head 與其內的 <h1> 是 .razor 手寫元素，會帶本頁 scope，scoped 選擇器直接命中。 */

.deny-head h1[b-cktmhm6l5r] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.deny-head .rzi[b-cktmhm6l5r] {
    font-size: 1.25rem;
    color: var(--rz-warning);
}

.mb-2[b-cktmhm6l5r] {
    margin-bottom: 0.5rem;
}
/* /Pages/簡易建檔.razor.rz.scp.css */
/* 簡易建檔樣式。
   一律維持表格版面（含平板與手機）：DataGrid 的 Responsive 已關閉，窄螢幕不會改成
   標籤在上、欄位在下的堆疊式閱讀。寬度不夠由這個容器做水平捲動。 */

.simp-grid-scroll[b-a98ya4pkrl] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 已寫入資料庫的欄位：右上角紅三角，跟官方 in-cell demo 的 table-cell-edited 相同手法。 */
.simp-cell-written[b-a98ya4pkrl] {
    position: relative;
}

.simp-cell-written[b-a98ya4pkrl]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10px solid #dc3545;
    border-left: 10px solid transparent;
}

.simp-header h1[b-a98ya4pkrl] {
    margin: 0;
    font-size: 1.4rem;
}
/* /Pages/行動保log查詢.razor.rz.scp.css */
/* 行動保記錄查詢樣式。
   整頁只有一個 RadzenDataGrid，桌機與手機共用；
   手機另有一份卡片清單，兩者由 CSS media query 切換。 */

/* ── 標題列（.log-top）─────────────────────────────────────
   版型參照 零用金建檔 的 .cash-top：標題放在表格上方的卡片裡，
   不放在 DataGrid 的 HeaderTemplate —— HeaderTemplate 在 .log-grid 內，
   而 .log-grid 在窄螢幕是 display:none，標題會跟著不見。

   ::deep 的理由同 .cash-top：.log-top / .log-header 經參數傳進 RadzenStack
   後，算繪出的元素不帶本頁 scope，寫成 .log-header 會被編成
   .log-header[b-xxxx] 而永遠對不上。用「有 scope 的 literal div 當錨點 +
   ::deep 後綴」才兩邊都成立。 */
.log-top[b-xjjo89axuj]  .log-header {
    min-width: 0;
}

.log-top[b-xjjo89axuj]  h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* 徽章不參與壓縮：被壓扁會變成看不出數字的小方塊 */
.log-top[b-xjjo89axuj]  .log-badge {
    flex: none;
}

/* 標題列右側那組（最後更新時間＋重新整理鈕）：不參與壓縮。
   沒設 flex:none 的話，標題那組一變長，這組會被壓到寬度不足、
   時間戳先換行、鈕被擠扁。換行時由父層的 SpaceBetween 靠左放。 */
.log-top[b-xjjo89axuj]  .log-actions {
    flex: none;
}

/* 篩選列（卡片第二列）：跟上一列的標題用一條細線分開，
   否則標題、徽章、時間戳、5 個篩選器會糊成同一排。 */
.log-top[b-xjjo89axuj]  .log-filters {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-border-color);
}

/* 「最後更新 HH:mm:ss」：小字灰字、不換行。
   存在的理由是「按重新整理要看出有動作」——同條件重查常查回同幾列，
   沒有時間戳會被當成按鈕壞掉。 */
.log-updated[b-xjjo89axuj] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 等寬字才對得齊 */
.log-time[b-xjjo89axuj] {
    font-family: Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* 查詢耗時：小字灰字，不換行 */
.log-loadtime[b-xjjo89axuj] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 詳細視窗：直式 label/value，長文字自動換行，不需橫向捲動。 */
.log-detail-row[b-xjjo89axuj] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.log-detail-label[b-xjjo89axuj] {
    flex: 0 0 8rem;
    color: var(--rz-text-secondary-color);
}

.log-detail-value[b-xjjo89axuj] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長錯誤內容 / 交換編號 / 唯一序號不撐破視窗 */
    overflow-wrap: anywhere;
}

/* 窄螢幕（手機／平板）：表格收起改卡片清單，桌機維持 DataGrid */
.log-cards[b-xjjo89axuj] {
    display: none;
}

@media (max-width: 1024px) {
    /* 標題在窄螢幕縮一級，騰出空間讓筆數徽章跟標題同列 */
    .log-top[b-xjjo89axuj]  h1 {
        font-size: 1.15rem;
    }

    .log-grid[b-xjjo89axuj] {
        display: none;
    }

    .log-cards[b-xjjo89axuj] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .log-card[b-xjjo89axuj] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.6rem 0.75rem;
        background: var(--rz-card-background-color, #fff);
        border: 1px solid var(--rz-border-color, #e0e0e0);
        border-radius: 8px;
    }

    .log-empty[b-xjjo89axuj] {
        align-items: center;
        color: var(--rz-text-secondary-color);
    }

    .log-card-top[b-xjjo89axuj] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .log-card-main[b-xjjo89axuj] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .log-card-sub[b-xjjo89axuj] {
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
        overflow-wrap: anywhere;
    }

    .log-card-err[b-xjjo89axuj] {
        font-size: 0.85rem;
        color: var(--rz-danger, #d32f2f);
        overflow-wrap: anywhere;
    }

    .log-card-actions[b-xjjo89axuj] {
        display: flex;
        justify-content: flex-end;
    }

    /* 分頁器上下各一份（見 razor 的 CardPager）：
       桌機靠 DataGrid 的 PagerPosition.TopAndBottom，但 .log-grid 在窄螢幕是
       display:none，那兩顆 pager 會跟著不見，所以卡片區自己補。
       上方那顆貼在清單最上緣，給的間距小一點，免得看起來像浮在半空。 */
    .log-card-pager[b-xjjo89axuj] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
    }

    .log-cards > .log-card-pager:first-child[b-xjjo89axuj] {
        padding-top: 0;
    }

    .log-card-pageinfo[b-xjjo89axuj] {
        font-size: 0.85rem;
        white-space: nowrap;
    }
}
/* /Pages/行動保參數維護.razor.rz.scp.css */
/* 行動保參數維護樣式。
   桌機（≥992px）顯示 DataGrid，手機與平板顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果。（版型沿用 客戶資料維護） */

.param-code[b-o5f0lfmrke] {
    font-family: Consolas, monospace;
    font-weight: 600;
}

.param-header h1[b-o5f0lfmrke] {
    margin: 0;
    font-size: 1.4rem;
}

.only-mobile[b-o5f0lfmrke] {
    display: none;
}

/* 手機卡片 */
.param-card-title[b-o5f0lfmrke] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.param-card-code[b-o5f0lfmrke] {
    font-family: Consolas, monospace;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* 金鑰徽章不被標題擠壓；Radzen 沒有 rz-flex-none 這個工具類別 */
.param-card-badge[b-o5f0lfmrke] {
    flex: none;
}

.param-kv[b-o5f0lfmrke] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.param-kv-label[b-o5f0lfmrke] {
    flex: 0 0 6.5rem;
    color: var(--rz-text-secondary-color);
}

.param-kv-value[b-o5f0lfmrke] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長備註不撐破畫面 */
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .only-desktop[b-o5f0lfmrke] {
        display: none !important;
    }

    .only-mobile[b-o5f0lfmrke] {
        display: block;
    }

    /* 搜尋列改為獨佔一整行，避免按鈕擠壓 */
    .param-actions[b-o5f0lfmrke] {
        width: 100%;
    }
}
/* /Pages/變更密碼.razor.rz.scp.css */
/* 變更密碼：單欄窄版面，桌機手機同一套。 */

.pw-narrow[b-zugwpe6qpc] {
    max-width: 560px;
}

.pw-header h1[b-zugwpe6qpc] {
    margin: 0;
    font-size: 1.4rem;
}
/* /Pages/資料庫連線紀錄查詢.razor.rz.scp.css */
/* 資料庫連線記錄查詢頁的版面與欄位樣式。

   scoped CSS 只作用於這個組件（Blazor 會加 b-xxxx 的屬性限定），
   所以 class 名稱不必怕跟別頁撞。 */

/* ── 篩選列 ────────────────────────────────────────────────
   篩選欄位用 grid 排而不是 RadzenRow/Column：
   篩選區沒有「某一欄要跟別欄對齊」的語意需求，只是要自動換行，
   CSS grid 的 auto-fit + minmax 一行就解決，還不必為每個欄位算 12 分割。 */
.filter-grid[b-we5gvxmurw] {
    display: grid;
    /* 每欄最小 190px：RadzenDatePicker 的日期字串在 zh-TW 格式下約 150px，
       再留一點給清除鈕，190px 是不會把「yyyy-MM-dd」截掉的窄度。 */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

/* 篩選列下半：只看失敗開關 + 快捷日期 + 清除。
   篩選-spacer 把「清除篩選」推到最右，與上方篩選欄位區隔開。 */
.filter-actions[b-we5gvxmurw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-border-color);
}

.filter-spacer[b-we5gvxmurw] {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

/* RadzenSwitch 本身只畫滑塊，文字要自己配一個 Label；
   讓兩者靠在一起並共用 baseline，開關才不會看起來比文字高一截。 */
.switch-label[b-we5gvxmurw] {
    margin-right: 0.5rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    user-select: none;
}

/* ── 標題列（.conn-top）─────────────────────────────────────
   版型參照 零用金建檔 的 .cash-top：標題放在卡片裡，h1 才是整頁唯一的大標。

   ::deep 的理由同 .cash-top：.conn-top / .conn-header / .conn-badge 經參數傳進
   Radzen 元件後，算繪出的元素不帶本頁 scope，寫成 .conn-header 會被編成
   .conn-header[b-xxxx] 而永遠對不上。用「有 scope 的 literal div 當錨點 +
   ::deep 後綴」才兩邊都成立。 */
.conn-top[b-we5gvxmurw]  .conn-header {
    min-width: 0;
}

.conn-top[b-we5gvxmurw]  h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* 徽章不參與壓縮：被壓扁會變成看不出數字的小方塊 */
.conn-top[b-we5gvxmurw]  .conn-badge {
    flex: none;
}

.conn-filter[b-we5gvxmurw] {
    margin-bottom: 0.85rem;
}

.conn-grid[b-we5gvxmurw] {
    /* 表格寬度吃滿容器：欄位少時右邊不會留一大片空白。 */
    width: 100%;
}

/* ── keyset 導覽列 ─────────────────────────────────────────
   沒有數字頁碼：keyset 只能順序往回走（游標是上一頁最後一筆），
   「跳至第 N 頁」在 1000 萬筆上等於要掃 N 筆，撐不住。
   深跳請用上面的日期範圍，那才是能走索引的跳法。 */
.conn-pager[b-we5gvxmurw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-secondary-background-color);
}

.pager-info[b-we5gvxmurw] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 「第 N 頁（ 本頁 M 筆 ）」裡的次要說明。 */
.pager-sub[b-we5gvxmurw] {
    margin-left: 0.25rem;
    font-size: 0.85em;
}

/* 筆數統計：有上限時顯示「N+ 筆」，附一句說明避免被當成精确值。 */
.pager-count[b-we5gvxmurw] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 查詢耗時：小字灰字、不換行（版型參照 行動保記錄查詢 的 .log-loadtime）。 */
.conn-loadtime[b-we5gvxmurw] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* 下拉選項在背景載入時的提示列：只是告知，不是錯誤。 */
.options-hint[b-we5gvxmurw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    font-size: 0.85em;
    color: var(--rz-text-secondary-color);
}

/* ── 欄位樣式 ───────────────────────────────────────────────
   IP / 統編 / 時間都是等寬字型：這幾欄是要「逐筆比對」的字串
   （比對兩台機器的時間差、核對統編），等寬才能一眼看出位數對不齊。 */
.cell-mono[b-we5gvxmurw] {
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* 沒有值的欄位用淡灰的「-」：資料庫本來就允許 NULL，
   留白會讓人以為是渲染失敗，顯示一個明確的破折號較不會誤會。 */
.cell-muted[b-we5gvxmurw] {
    color: var(--rz-text-disabled-color);
}

/* 結果著色走 danger / success token，跟著佈景主題走，
   深色主題下也維持對比（寫死紅綠色在深色底會刺眼且過不了對比）。 */
.cell-ok[b-we5gvxmurw] {
    color: var(--rz-success-text-color, var(--rz-success));
    font-weight: 600;
}

.cell-fail[b-we5gvxmurw] {
    color: var(--rz-danger-text-color, var(--rz-danger));
    font-weight: 700;
}

/* 窄螢幕時篩選欄位已是單欄，DatePicker 不會被擠到換行。 */
@media (max-width: 600px) {
    .filter-grid[b-we5gvxmurw] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/零用金建檔.razor.rz.scp.css */
/* 零用金建檔樣式。
   桌機顯示表格，手機與平板（≤991px）顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果（版型沿用 客戶資料維護）。
   表格的 Responsive 已關閉，桌機上寬度不夠由容器做水平捲動。 */

/* 這個 div 是 razor 裡的 literal 元素，會帶 scope 識別，scoped selector 直接命中。 */
.cash-grid-scroll[b-jd64pg9e72] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.only-mobile[b-jd64pg9e72] {
    display: none;
}

/* 手機卡片 */
.cash-card-title[b-jd64pg9e72] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.cash-card-code[b-jd64pg9e72] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* 手機卡片每筆底下的分隔線：卡片本來四邊都有細框，底邊加粗一級，
   列表滑下來一筆一筆有切開的感覺。 */
.only-mobile[b-jd64pg9e72]  .rz-card {
    border-bottom: 1px solid #b0b0b0;
}

/* 徽章是 RadzenBadge 的根元素，不帶本頁 scope，配 .only-mobile 錨點用 ::deep（同 cash-search） */
.only-mobile[b-jd64pg9e72]  .cash-card-badge {
    flex: none;
}

.cash-kv[b-jd64pg9e72] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.cash-kv-label[b-jd64pg9e72] {
    flex: 0 0 5rem;
    color: var(--rz-text-secondary-color);
}

.cash-kv-value[b-jd64pg9e72] {
    flex: 1 1 auto;
    min-width: 0;
    /* 長摘要不撐破畫面 */
    overflow-wrap: anywhere;
}

/* 以下目標全是 Radzen 元件的根元素（RadzenStack / RadzenTextBox / RadzenBadge）：
   class 經參數傳進元件後，算繪出來的元素不會帶本頁的 scope 識別，
   寫成一般的 .cash-actions 會被編成 .cash-actions[b-xxxx] 而永遠對不上。
   解法是 .cash-top ::deep …：.cash-top 是卡片裡的 literal div（有 scope，當錨點），
   編完變成 .cash-top[b-xxxx] .cash-actions —— 錨點對得上、後面不要求 scope，
   兩邊都成立才會命中。
   （::deep 開頭的寫法會被改編成 [b-xxxx] .cash-actions—— 要求「有 scope 的祖先」，
   卡片往上全是 Radzen 元件、沒有這種祖先，所以不能那樣寫。） */
.cash-top[b-jd64pg9e72]  .cash-header {
    min-width: 0;
}

.cash-top[b-jd64pg9e72]  h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* 徽章不參與壓縮：被壓扁會變成看不出數字的小方塊 */
.cash-top[b-jd64pg9e72]  .cash-badge {
    flex: none;
}

/* 期初餘額同一列：容器佔滿第二列（cash-header 有換行），裡面期初在前、餘額在後；
   徽章本身已有 flex:none，不會被壓扁，太窄時才換行。 */
.cash-top[b-jd64pg9e72]  .cash-totals {
    flex-basis: 100%;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cash-top[b-jd64pg9e72]  .cash-search {
    flex: 1 1 140px;
    min-width: 140px;
    max-width: 280px;
}

/* 月份導覽群組：桌機跟按鈕同列；下拉寬度寫在 class（不要寫 inline style，
   否則媒體查詢改不動它 —— 教訓見 cash-search）。 */
.cash-top[b-jd64pg9e72]  .cash-monthnav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cash-top[b-jd64pg9e72]  .cash-year {
    width: 96px;
    flex: none;
}

.cash-top[b-jd64pg9e72]  .cash-month {
    width: 96px;
    flex: none;
}

/* 這兩個 span 是 Template 裡的 literal 元素，scoped selector 直接命中，不用 ::deep。 */
/* 餘額為負：不是錯誤，是透支，但顏色要一眼看得出來 */
.cash-negative[b-jd64pg9e72] {
    color: var(--rz-danger);
    font-weight: 700;
}

.cash-balance[b-jd64pg9e72] {
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .only-desktop[b-jd64pg9e72] {
        display: none !important;
    }

    .only-mobile[b-jd64pg9e72] {
        display: block;
    }

    /* 搜尋列改為獨佔一整行，避免按鈕擠壓（版型沿用 客戶資料維護 / 行動保參數維護） */
    .cash-top[b-jd64pg9e72]  .cash-actions {
        width: 100%;
    }

    /* 搜尋框移到自己那一行：與兩顆按鈕同列時，手機上只剩 190px 左右可用，
       提示文字「搜尋科目 / 摘要 / 建檔者…」整個被切掉。order 把它推到按鈕之後。 */
    .cash-top[b-jd64pg9e72]  .cash-search {
        order: 1;
        flex-basis: 100%;
        max-width: none;
    }

    /* 月份導覽獨佔一行、保證同列不換行：‹ › 與年月字不壓縮，
       寬度不夠時只擠年份下拉（4 個數字切一點仍可辨認，月份絕不能切）。 */
    .cash-top[b-jd64pg9e72]  .cash-monthnav {
        flex-basis: 100%;
        flex-wrap: nowrap;
    }

    .cash-top[b-jd64pg9e72]  .cash-monthnav > :not(.cash-year):not(.cash-month) {
        flex: none;
    }

    .cash-top[b-jd64pg9e72]  .cash-year {
        flex: 1 1 96px;
        min-width: 0;
        width: auto;
    }

    .cash-top[b-jd64pg9e72]  .cash-month {
        flex: 0 0 96px;
    }

    /* 標題在窄螢幕縮一級，騰出空間給徽章同列 */
    .cash-top[b-jd64pg9e72]  h1 {
        font-size: 1.15rem;
    }
}
/* /Shared/QueryCardPager.razor.rz.scp.css */
/* QueryCardPager 樣式（來源：API連線記錄查詢 的 .api-card-pager）。
   上方那顆貼在清單最上緣，給的間距小一點，免得看起來像浮在半空。 */
.qcp-pager[b-ot2b65rwyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.qcp-pageinfo[b-ot2b65rwyy] {
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Shared/QueryHeader.razor.rz.scp.css */
/* QueryHeader 樣式（來源：API連線記錄查詢 的 .api-top，類別改名前綴 qh-）。
   ::deep 的理由：.qh-header / .qh-badge 經參數傳進 Radzen 元件後，
   算繪出的元素不帶本元件 scope，寫成 .qh-header 會被編成
   .qh-header[b-xxxx] 而永遠對不上。用「有 scope 的 literal div 當錨點 +
   ::deep 後綴」才兩邊都成立。 */
.qh-top[b-59y3duuyrn]  .qh-header {
    min-width: 0;
}

.qh-top[b-59y3duuyrn]  h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* 徽章不參與壓縮：被壓扁會變成看不出數字的小方塊 */
.qh-top[b-59y3duuyrn]  .qh-badge {
    flex: none;
}

/* 標題列右側那組（最後更新時間＋操作鈕）：不參與壓縮。
   沒設 flex:none 的話，標題那組一變長，這組會被壓到寬度不足、
   時間戳先換行、鈕被擠扁。換行時由父層的 SpaceBetween 靠左放。 */
.qh-top[b-59y3duuyrn]  .qh-actions {
    flex: none;
}

/* 篩選列（卡片第二列）：跟上一列的標題用一條細線分開，
   否則標題、徽章、時間戳、勾選框會糊成同一排。 */
.qh-top[b-59y3duuyrn]  .qh-filters {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-border-color);
}

/* 「最後更新 HH:mm:ss」：小字灰字、不換行。
   存在的理由是「按重新整理要看出有動作」——同條件重查常查回同幾列，
   沒有時間戳會被當成按鈕壞掉。 */
.qh-updated[b-59y3duuyrn] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
    /* 標題在窄螢幕縮一級，騰出空間讓筆數徽章跟標題同列 */
    .qh-top[b-59y3duuyrn]  h1 {
        font-size: 1.15rem;
    }
}