/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-whnxmmu4xz],
.components-reconnect-repeated-attempt-visible[b-whnxmmu4xz],
.components-reconnect-failed-visible[b-whnxmmu4xz],
.components-pause-visible[b-whnxmmu4xz],
.components-resume-failed-visible[b-whnxmmu4xz],
.components-rejoining-animation[b-whnxmmu4xz] {
    display: none;
}

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


#components-reconnect-modal[b-whnxmmu4xz] {
    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-whnxmmu4xz 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-whnxmmu4xz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-whnxmmu4xz 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

@keyframes components-rejoining-animation-b-whnxmmu4xz {
    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;
    }
}
/* /Components/Pages/簡易建檔.razor.rz.scp.css */
/* 簡易建檔樣式。
   一律維持表格版面（含平板與手機）：DataGrid 的 Responsive 已關閉，窄螢幕不會改成
   標籤在上、欄位在下的堆疊式閱讀。寬度不夠由這個容器做水平捲動。 */

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

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

.simp-cell-written[b-agbbh1oqkx]::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-agbbh1oqkx] {
    margin: 0;
    font-size: 1.4rem;
}
/* /Components/Pages/零用金建檔.razor.rz.scp.css */
/* 零用金建檔樣式。
   桌機顯示表格，手機與平板（≤991px）顯示卡片清單；純 CSS media query 切換，
   不需 JS interop，兩邊共用同一份篩選結果（版型沿用 客戶資料維護）。
   表格的 Responsive 已關閉，桌機上寬度不夠由容器做水平捲動。 */

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

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

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

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

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

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

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

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

.cash-kv-value[b-l5svgdpyyq] {
    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-l5svgdpyyq]  .cash-header {
    min-width: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* 標題在窄螢幕縮一級，騰出空間給徽章同列 */
    .cash-top[b-l5svgdpyyq]  h1 {
        font-size: 1.15rem;
    }
}