/* /Components/Layout/AuthLayout.razor.rz.scp.css */
    .page[b-gxuqk93gma] {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    main[b-gxuqk93gma] {
        flex: 1;
    }
    
    .content[b-gxuqk93gma] {
        height: 100vh;
        padding: 0;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-rsgt74rq4p] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 確保頁面至少有視口高度 */
}

main[b-rsgt74rq4p] {
    flex: 1;
}

.sidebar[b-rsgt74rq4p] {
    background: var(--nav-bg);
}

.top-row[b-rsgt74rq4p] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row a[b-rsgt74rq4p], .top-row .btn-link[b-rsgt74rq4p] {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row a:hover[b-rsgt74rq4p], .top-row .btn-link:hover[b-rsgt74rq4p] {
    text-decoration: underline;
}

.top-row a:first-child[b-rsgt74rq4p] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 全域搜尋列（基底樣式，必須在 media query 之前） */
.global-search-bar[b-rsgt74rq4p] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--nav-bg);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-rsgt74rq4p] .global-search-bar > :first-child {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640.98px) {
    /* 手機模式：sidebar 不佔流式空間，NavMenu 子元素自行處理 fixed 定位 */
    .sidebar[b-rsgt74rq4p] {
        height: 0;
        overflow: visible;
        position: static;
    }

    /* 主內容下方留出：頂部搜尋列(3rem) + 常駐橫向群組列(3rem) = 6rem */
    .main-content[b-rsgt74rq4p] {
        margin-top: 6rem;
        overflow-x: hidden;
    }

    /* 搜尋列嵌入手機版頂部固定列：左側 3rem 留給帳戶頭像，右側貼齊邊緣（滿版） */
    .global-search-bar[b-rsgt74rq4p] {
        position: fixed;
        top: 0;
        left: 3rem;
        right: 0;
        height: 3rem;
        z-index: 1046; /* 在頁面 sticky 表頭(≤1045)之上、modal backdrop(1049)之下，確保 modal 開啟時被蓋住 */
        display: flex;
        align-items: center;
        background-color: var(--nav-bg);
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0.5rem;
    }
}

@media (min-width: 641px) {
    .page[b-rsgt74rq4p] {
        flex-direction: row;
        min-height: 100vh; /* 確保頁面至少有視口高度 */
        max-height: 100vh; /* 限制頁面最大高度為視口高度 */
        overflow: hidden; /* 防止頁面整體滾動 */
    }

    .sidebar[b-rsgt74rq4p] {
        width: var(--sidebar-width);
        flex-shrink: 0; /* 防止側邊欄被壓縮 */
        display: flex; /* 使用 flex 讓 NavMenu 能夠填充 */
        flex-direction: column;
        height: 100vh; /* 固定 sidebar 高度為視口高度 */
        overflow: hidden; /* 防止 sidebar 本身滾動 */
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main-content[b-rsgt74rq4p] {
        flex: 1;
        min-width: 0; /* 允許內容收縮 */
        overflow-y: auto; /* 允許主內容垂直滾動 */
        height: 100vh; /* 固定主內容高度為視口高度 */
    }

    .top-row[b-rsgt74rq4p] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth a:first-child[b-rsgt74rq4p] {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-rsgt74rq4p], article[b-rsgt74rq4p] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* 內容區域樣式 */
.content[b-rsgt74rq4p] {
    padding-top: 1.1rem;
}

/* Blazor 錯誤邊界樣式 */
.blazor-error-boundary[b-rsgt74rq4p] {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary[b-rsgt74rq4p]::after {
    content: "An error has occurred."
}

/* ===== 行事曆提醒 Toast ===== */
.calendar-reminder-container[b-rsgt74rq4p] {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
}

.calendar-reminder-toast[b-rsgt74rq4p] {
    display: flex;
    align-items: center;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-left: 4px solid var(--primary-blue, #0d6efd);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toastSlideIn-b-rsgt74rq4p 0.3s ease-out;
}

.reminder-title[b-rsgt74rq4p] {
    font-weight: 500;
    color: var(--text-primary, #212529);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-time[b-rsgt74rq4p] {
    color: var(--text-secondary, #6c757d);
    flex-shrink: 0;
}

.reminder-dismiss-btn[b-rsgt74rq4p] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6c757d);
    padding: 0 0 0 8px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.reminder-dismiss-btn:hover[b-rsgt74rq4p] {
    opacity: 1;
}

@keyframes toastSlideIn-b-rsgt74rq4p {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-bs-theme=dark] .calendar-reminder-toast[b-rsgt74rq4p] {
    background: #21262d;
    border-color: #30363d;
    border-left-color: #58a6ff;
}

/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* === Navigation Menu Layout Styles === */

/* ========================================= */
/* 使用者資訊區（側邊欄頂部）                */
/* ========================================= */

.nav-user-section[b-j0ob96mjo6] {
    border-bottom: none;
    padding: 0.625rem 0.75rem 0.5rem;
    margin-bottom: 0.25rem;
}

.nav-user-toggle[b-j0ob96mjo6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease;
    user-select: none;
}

.nav-user-toggle:hover[b-j0ob96mjo6] {
    background-color: var(--nav-hover-bg);
}

.nav-user-avatar[b-j0ob96mjo6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--nav-avatar-bg);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-white);
    font-weight: 600;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.nav-user-toggle:hover .nav-user-avatar[b-j0ob96mjo6],
.nav-user-toggle:hover .nav-user-avatar-photo[b-j0ob96mjo6] {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 3px var(--nav-avatar-hover-shadow);
}

/* 當頭像是照片時，補充 object-fit 讓圖片正確填滿圓形 */
img.nav-user-avatar-photo[b-j0ob96mjo6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    object-fit: cover;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: block;
}

.nav-user-name[b-j0ob96mjo6] {
    flex: 1;
    min-width: 0;
    color: var(--nav-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-chevron[b-j0ob96mjo6] {
    color: var(--nav-text-dim);
    transition: transform 0.25s ease, color 0.2s;
    flex-shrink: 0;
}

.nav-user-toggle:hover .nav-user-chevron[b-j0ob96mjo6] {
    color: var(--nav-text);
}

.nav-user-chevron.open[b-j0ob96mjo6] {
    transform: rotate(180deg);
}

/* 向下展開的下拉選單 */
.nav-user-dropdown[b-j0ob96mjo6] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease;
    margin-left: 0.5rem;
    margin-top: 0.125rem;
}

.nav-user-dropdown.show[b-j0ob96mjo6] {
    max-height: 200px;
    opacity: 1;
}

.nav-user-dropdown-item[b-j0ob96mjo6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.75rem;
    color: var(--nav-dropdown-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.nav-user-dropdown-item:hover[b-j0ob96mjo6] {
    background-color: var(--nav-hover-bg);
    color: var(--nav-text);
    text-decoration: none;
}

/* ========================================= */
/* 停用模組樣式                               */
/* ========================================= */

.nav-module-disabled[b-j0ob96mjo6] {
    opacity: 0.45;
    pointer-events: none;
    position: relative;
}

.nav-module-disabled[b-j0ob96mjo6]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.03) 4px,
        rgba(0, 0, 0, 0.03) 8px
    );
    border-radius: var(--radius-lg);
    pointer-events: none;
}

[data-bs-theme=dark] .nav-module-disabled[b-j0ob96mjo6]::after {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.03) 4px,
        rgba(255, 255, 255, 0.03) 8px
    );
}

.nav-module-disabled .nav-menu-dropdown-toggle-btn[b-j0ob96mjo6] {
    color: var(--nav-text);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-lg);
    min-height: 2.75rem;
    height: auto;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    cursor: not-allowed;
    padding: 0.375rem 1rem;
    box-sizing: border-box;
    font-weight: normal;
}

.nav-module-disabled .nav-menu-dropdown-toggle-btn span[aria-hidden="true"][b-j0ob96mjo6] {
    font-size: var(--fs-lg);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.nav-module-disabled .nav-menu-item-text[b-j0ob96mjo6] {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.nav-module-disabled-badge[b-j0ob96mjo6] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--nav-hover-bg);
    color: var(--nav-text-dim);
    flex-shrink: 0;
}

/* ========================================= */
/* 主導航容器                                 */
/* ========================================= */

.nav-menu-container[b-j0ob96mjo6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.navbar-toggler[b-j0ob96mjo6] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ========================================= */
/* 頂部列（手機版固定 Header）                */
/* ========================================= */

.top-row[b-j0ob96mjo6] {
    display: none; /* 桌面版隱藏 */
}

/* ========================================= */
/* 漢堡按鈕                                  */
/* ========================================= */

.navbar-toggler-label[b-j0ob96mjo6] {
    display: none; /* 桌面版隱藏 */
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--nav-divider);
    border-radius: var(--radius-md);
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s ease;
    align-items: center;
    justify-content: center;
}

.navbar-toggler-label .bi-list[b-j0ob96mjo6] {
    font-size: var(--fs-lg);
    color: var(--nav-text);
    line-height: 1;
    display: block;
}

/* ========================================= */
/* 遮罩（手機版）                             */
/* ========================================= */

.nav-backdrop[b-j0ob96mjo6] {
    display: none;
}

/* ========================================= */
/* 導航滾動區域                               */
/* ========================================= */

.nav-scrollable[b-j0ob96mjo6] {
    background-color: var(--nav-bg);
    position: relative;
    z-index: 100;
}

/* ========================================= */
/* 響應式設計 - 手機版 (≤640px)               */
/* ========================================= */

/* 手機版隱藏桌面收合切換按鈕 */
@media (max-width: 640px) {
    .nav-collapse-toggle[b-j0ob96mjo6] {
        display: none;
    }
}

@media (max-width: 640px) {

    /* 容器回歸靜態流（子元素各自 fixed 定位） */
    .nav-menu-container[b-j0ob96mjo6] {
        position: static;
        height: auto;
        max-height: none;
        flex: none;
        display: block;
    }

    /* ---- 固定頂部 Header ---- */
    .top-row[b-j0ob96mjo6] {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3rem;
        z-index: 1060;
        padding: 0 0.875rem;
        gap: 0.75rem;
        background-color: var(--nav-bg);
        border-bottom: 1px solid var(--nav-divider);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    /* ---- 漢堡按鈕 ---- */
    .navbar-toggler-label[b-j0ob96mjo6] {
        display: flex;
    }

    .navbar-toggler-label:hover[b-j0ob96mjo6] {
        background: var(--nav-hover-bg);
    }

    .navbar-toggler:checked ~ .top-row .navbar-toggler-label[b-j0ob96mjo6] {
        background: var(--nav-active-bg);
    }

    /* ---- 半透明遮罩 ---- */
    .nav-backdrop[b-j0ob96mjo6] {
        display: block;
        position: fixed;
        inset: 0;
        top: 3rem; /* 從 Header 下方開始 */
        background: rgba(0, 0, 0, 0);
        z-index: 1049;
        pointer-events: none;
        transition: background 0.3s ease;
    }

    .navbar-toggler:checked ~ .nav-backdrop[b-j0ob96mjo6] {
        background: rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        cursor: pointer;
    }

    /* ---- 手機版改用 NavMenuMobileBar 橫向群組列，桌機側邊欄（抽屜）整個隱藏 ---- */
    .nav-scrollable[b-j0ob96mjo6] {
        display: none;
    }

    /* 觸控優化 */
    .nav-scrollable .nav-item[b-j0ob96mjo6] {
        min-height: 40px;
    }

    .nav-scrollable[b-j0ob96mjo6]  .dropdown-item {
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    /* 手機版滾動條 */
    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-thumb {
        background: var(--nav-scrollbar);
        border-radius: 2px;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-thumb:hover {
        background: var(--nav-scrollbar-hover);
    }

    /* 手機版頭像稍小 */
    .nav-user-avatar[b-j0ob96mjo6] {
        width: 28px;
        height: 28px;
    }

    img.nav-user-avatar-photo[b-j0ob96mjo6] {
        width: 28px;
        height: 28px;
    }
}

/* ========================================= */
/* 響應式設計 - 桌面版 (≥641px)               */
/* ========================================= */

@media (min-width: 641px) {

    /* 桌面版隱藏手機版元素 */
    .top-row[b-j0ob96mjo6] {
        display: none;
    }

    .navbar-toggler-label[b-j0ob96mjo6] {
        display: none;
    }

    .nav-backdrop[b-j0ob96mjo6] {
        display: none !important;
    }

    /* 桌面版導航：block 佈局，整體可捲動 */
    .nav-scrollable[b-j0ob96mjo6] {
        display: block;
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem;
        scroll-behavior: smooth;
    }

    /* 導航選單內容間距 */
    .nav-scrollable .nav[b-j0ob96mjo6] {
        padding: 0.375rem 0.5rem 0 0.5rem;
        gap: 2px;
    }

    /* 收合切換按鈕（桌面版顯示） */
    .nav-collapse-toggle[b-j0ob96mjo6] {
        cursor: pointer;
        padding: 0.5rem;
        margin: 0.25rem 0.5rem 0.5rem;
        border-radius: var(--radius-md);
        color: var(--nav-text-dim);
        text-align: center;
        transition: background-color 0.15s ease, color 0.15s ease;
        user-select: none;
        flex-shrink: 0;
    }

    .nav-collapse-toggle:hover[b-j0ob96mjo6] {
        background-color: var(--nav-hover-bg);
        color: var(--nav-text);
    }

    /* 桌面版滾動條 */
    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar {
        width: 5px;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-thumb {
        background: var(--nav-scrollbar);
        border-radius: 3px;
    }

    .nav-scrollable[b-j0ob96mjo6]::-webkit-scrollbar-thumb:hover {
        background: var(--nav-scrollbar-hover);
    }
}
/* /Components/Layout/NavMenuMobileBar.razor.rz.scp.css */
/* === 手機版常駐橫向群組導覽列 === */
/* 桌機版完全隱藏；僅 max-width:640px 顯示，與 NavMenu 既有斷點一致 */

@media (min-width: 641px) {
    .nav-mobile-root[b-ypvcmhcuhj] {
        display: none !important;
    }
}

@media (max-width: 640px) {

    /* ---------- 頂列左側固定「帳戶」頭像按鈕 ---------- */
    .nav-mobile-account-fixed[b-ypvcmhcuhj] {
        position: fixed;
        top: 0;
        left: 0;
        width: 3rem;
        height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: var(--nav-bg); /* 與右側搜尋列 --nav-bg 一致，避免露出較深的頁面底色 */
        color: var(--nav-text);
        cursor: pointer;
        z-index: 1047; /* 在頁面 sticky 表頭(≤1045)之上、modal backdrop(1049)之下，確保 modal 開啟時被蓋住；高於搜尋列 1046 */
    }

    .nav-mobile-account-fixed.active[b-ypvcmhcuhj] {
        color: var(--primary-blue);
    }

    .nav-mobile-account-avatar[b-ypvcmhcuhj] {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .nav-mobile-account-icon[b-ypvcmhcuhj] {
        font-size: var(--fs-lg);
        line-height: 1;
    }

    /* ---------- 常駐橫向群組列（頂部第二列） ---------- */
    .nav-mobile-bar[b-ypvcmhcuhj] {
        position: fixed;
        top: 3rem; /* 在頂部搜尋列（3rem）下方 */
        left: 0;
        right: 0;
        height: 3rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        z-index: 1046; /* 在頁面 sticky 表頭(≤1045)之上、modal backdrop(1049)之下，確保 modal 開啟時被蓋住 */
        background-color: var(--nav-bg);
        border-bottom: 1px solid var(--nav-divider);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .nav-mobile-bar[b-ypvcmhcuhj]::-webkit-scrollbar {
        display: none;
    }

    /* ---------- 單個群組 tab ---------- */
    .nav-mobile-tab[b-ypvcmhcuhj] {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0 0.85rem;
        height: 100%;
        border: none;
        background: transparent;
        color: var(--nav-text);
        white-space: nowrap;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
        position: relative;
    }

    .nav-mobile-tab:hover[b-ypvcmhcuhj],
    .nav-mobile-tab:active[b-ypvcmhcuhj] {
        background-color: var(--nav-hover-bg);
    }

    .nav-mobile-tab.active[b-ypvcmhcuhj] {
        color: var(--primary-blue);
        border-bottom-color: var(--primary-blue);
        font-weight: 600;
    }

    .nav-mobile-tab-icon[b-ypvcmhcuhj] {
        font-size: var(--fs-lg);
        line-height: 1;
        flex-shrink: 0;
    }

    .nav-mobile-tab-text[b-ypvcmhcuhj] {
        font-size: 0.9rem;
    }

    .nav-mobile-tab-avatar[b-ypvcmhcuhj] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    /* 通知未讀徽章 */
    .nav-mobile-tab-badge[b-ypvcmhcuhj] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.1rem;
        height: 1.1rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background-color: #dc3545;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1;
    }

    /* 待設定會計科目：amber 第二徽章（與紅色未讀區隔；tab 的 gap 已提供間距） */
    .nav-mobile-tab-badge--accent[b-ypvcmhcuhj] {
        background-color: #ffc107;
        color: #212529;
    }

    /* 停用模組 tab */
    .nav-mobile-tab-disabled[b-ypvcmhcuhj] {
        opacity: 0.45;
        pointer-events: none;
        cursor: not-allowed;
    }

    .nav-mobile-tab-lock[b-ypvcmhcuhj] {
        font-size: 0.7rem;
        color: var(--nav-text-dim);
        margin-left: 0.1rem;
    }

    /* ---------- 向下展開的子項面板 ---------- */
    .nav-mobile-sheet[b-ypvcmhcuhj] {
        position: fixed;
        top: 6rem; /* 搜尋列 3rem + 群組列 3rem */
        left: 0;
        right: 0;
        max-height: calc(100vh - 6rem - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1057;
        background-color: var(--nav-bg);
        border-bottom: 1px solid var(--nav-divider);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        padding: 0.30rem 0;
        transform: translateY(-8px);
        opacity: 0;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
    }

    .nav-mobile-sheet.show[b-ypvcmhcuhj] {
        transform: translateY(0);
        opacity: 1;
    }

    /* 帳戶面板：開在頂列(3rem)下方，蓋住第二列群組列 */
    .nav-mobile-sheet--account[b-ypvcmhcuhj] {
        top: 3rem;
        max-height: calc(100vh - 3rem - 1rem);
        z-index: 1062; /* 帳戶面板只在點 nav 時出現、不會與 modal 同時存在；高於群組列(1046)與帳戶遮罩(1059) */
    }

    /* ---------- 子項目 ---------- */
    .nav-mobile-sheet-item[b-ypvcmhcuhj] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        min-height: 2.4rem;
        padding: 0.15rem 1.25rem;
        border: none;
        background: transparent;
        color: var(--nav-dropdown-text, var(--nav-text));
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-mobile-sheet-item:hover[b-ypvcmhcuhj],
    .nav-mobile-sheet-item:active[b-ypvcmhcuhj] {
        background-color: var(--nav-hover-bg);
        color: var(--nav-text);
        text-decoration: none;
    }

    .nav-mobile-sheet-item.active[b-ypvcmhcuhj] {
        background-color: var(--nav-active-bg);
        color: var(--primary-blue);
        font-weight: 600;
    }

    .nav-mobile-sheet-icon[b-ypvcmhcuhj] {
        font-size: var(--fs-lg);
        flex-shrink: 0;
        width: 1.25rem;
        text-align: center;
    }

    /* 應收對帳單圖示顏色（綠色＝收入進帳） */
    .nav-mobile-sheet-icon.nav-icon-receivable[b-ypvcmhcuhj] {
        color: #16a34a;
    }

    /* 應付對帳單圖示顏色（紅色＝支出付款） */
    .nav-mobile-sheet-icon.nav-icon-payable[b-ypvcmhcuhj] {
        color: #dc2626;
    }

    [data-bs-theme=dark] .nav-mobile-sheet-icon.nav-icon-receivable[b-ypvcmhcuhj] {
        color: #4ade80;
    }

    [data-bs-theme=dark] .nav-mobile-sheet-icon.nav-icon-payable[b-ypvcmhcuhj] {
        color: #f87171;
    }

    .nav-mobile-sheet-text[b-ypvcmhcuhj] {
        flex: 1;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .nav-mobile-sheet-divider[b-ypvcmhcuhj] {
        margin: 0.1rem 1.25rem;
        border: none;
        border-top: 1px solid var(--nav-divider);
        opacity: 1;
    }

    /* 停用子項 */
    .nav-mobile-sheet-item-disabled[b-ypvcmhcuhj] {
        opacity: 0.45;
        pointer-events: none;
        cursor: not-allowed;
    }

    .nav-mobile-sheet-lock[b-ypvcmhcuhj] {
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--nav-text-dim);
    }

    /* ---------- 半透明遮罩 ---------- */
    .nav-mobile-backdrop[b-ypvcmhcuhj] {
        position: fixed;
        inset: 0;
        top: 6rem;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1056;
        cursor: pointer;
    }

    /* 帳戶遮罩：需蓋住第二列群組列 */
    .nav-mobile-backdrop--account[b-ypvcmhcuhj] {
        top: 3rem;
        z-index: 1059; /* 介於群組列(1046) 與帳戶面板(1062) 之間 */
    }
}
/* /Components/Pages/Accounting/AccountChartUploadModalComponent.razor.rz.scp.css */
/* 會計準則 Excel 匯入 Modal — 深色模式適配樣式
   依 [README_個人化設定_顯示設定.md] DARK_DESIGN / BOOTSTRAP_TRAPS 規範：
   - 使用 CSS 變數（colors.css :root / [data-bs-theme=dark]）
   - 不硬編 hex
   - .table-light / .bg-light / .alert-* / .card-header 等 Bootstrap utility 在 dark 不適配，改用 acu-* 類別 */

/* ── 卡片 header — 取代 .card-header 預設灰底（--bs-card-cap-bg 未被全域覆寫）── */
.acu-card-header[b-90tfmd3813] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ── 表頭 — 取代 <thead class="table-light"> ── */
.acu-table-head th[b-90tfmd3813] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.acu-table-head.sticky-top th[b-90tfmd3813] {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Row state — 取代 .table-success / .table-info / .table-danger ── */
.acu-row-ok td[b-90tfmd3813] {
    background-color: rgba(var(--success-color-rgb), 0.10) !important;
}

.acu-row-mapped td[b-90tfmd3813] {
    background-color: rgba(var(--primary-blue-rgb), 0.10) !important;
}

.acu-row-error td[b-90tfmd3813] {
    background-color: rgba(var(--danger-color-rgb), 0.10) !important;
}

/* ── Alert — 取代 .alert-info / .alert-danger / .alert-warning ──
   colors.css 已定義 --alert-*-bg 變數但從未綁定到 .alert-* 選擇器，
   這裡直接用 var(--alert-*-bg) 套上去 */
.acu-alert-info[b-90tfmd3813],
.acu-alert-danger[b-90tfmd3813],
.acu-alert-warning[b-90tfmd3813] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
}

.acu-alert-info[b-90tfmd3813] {
    background-color: var(--alert-info-bg);
    border-left: 4px solid var(--info-color);
}

.acu-alert-danger[b-90tfmd3813] {
    background-color: var(--alert-danger-bg);
    border-left: 4px solid var(--danger-color);
}

.acu-alert-warning[b-90tfmd3813] {
    background-color: var(--alert-warning-bg);
    border-left: 4px solid var(--warning-color);
}

/* alert 內的連結 / 列表項繼承 text-primary，避免淺色 alert 內出現深色 fixed text */
.acu-alert-danger a[b-90tfmd3813],
.acu-alert-warning a[b-90tfmd3813],
.acu-alert-info a[b-90tfmd3813] {
    color: var(--primary-blue);
}

/* ── Badge — 取代 .badge.bg-light.text-dark / .badge.bg-warning.text-dark ──
   text-dark 在 dark mode 被強制成黑字會看不清楚 */
.acu-badge-neutral[b-90tfmd3813] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.acu-badge-warning[b-90tfmd3813] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: rgba(var(--warning-color-rgb), 0.15);
    color: var(--warning-text-dark);
    border: 1px solid rgba(var(--warning-color-rgb), 0.30);
}

/* ── 深色模式覆寫 — 卡片頭 / 表頭 / neutral badge 用 bg-tertiary 增加對比 ── */
[data-bs-theme=dark] .acu-card-header[b-90tfmd3813],
[data-bs-theme=dark] .acu-table-head th[b-90tfmd3813] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-bs-theme=dark] .acu-badge-neutral[b-90tfmd3813] {
    background-color: var(--bg-tertiary);
}
/* /Components/Pages/Accounting/OpeningBalancePage.razor.rz.scp.css */
/* 合計列 — 使用 CSS 變數以支援深色模式 */
.totals-row > tr > td[b-yaac5cqx3e] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
    .min-vh-100[b-d4uhw548ym] {
        min-height: 100vh;
    }
    
    .card[b-d4uhw548ym] {
        border-radius: 1rem;
    }
    
    .form-control-lg[b-d4uhw548ym] {
        border-radius: 0.5rem;
    }
    
    .btn-lg[b-d4uhw548ym] {
        border-radius: 0.5rem;
        padding: 0.75rem 1.5rem;
    }
    
    .input-group .btn[b-d4uhw548ym] {
        border-left: none;
    }
    
    .input-group .form-control:focus + .btn[b-d4uhw548ym] {
        border-color: #86b7fe;
    }
/* /Components/Pages/Communication/NotificationIndex.razor.rz.scp.css */
/* ===== 篩選列 ===== */

.notification-filters[b-a5ardkvscq] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.5rem;
}

.filter-btn[b-a5ardkvscq] {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-btn:hover[b-a5ardkvscq] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.filter-btn.active[b-a5ardkvscq] {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.filter-count[b-a5ardkvscq] {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 0 6px;
    border-radius: 10px;
    font-weight: 600;
}

.filter-btn.active .filter-count[b-a5ardkvscq] {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.filter-count.unread[b-a5ardkvscq] {
    background-color: #dc3545;
    color: white;
}

.filter-btn.active .filter-count.unread[b-a5ardkvscq] {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 待設定科目提示：amber 藥丸（與篩選頁籤區隔，非篩選而是動作提示） */
.filter-btn-accent[b-a5ardkvscq] {
    border-color: #ffc107;
    color: #9a7400;
}

.filter-btn-accent:hover[b-a5ardkvscq] {
    border-color: #ffc107;
    background-color: #fff8e1;
    color: #9a7400;
}

.filter-count.accent[b-a5ardkvscq] {
    background-color: #ffc107;
    color: #212529;
}

/* ===== 載入中 / 空白狀態 ===== */

.notification-page-empty[b-a5ardkvscq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    color: var(--text-secondary);
    gap: 10px;
}

.notification-page-empty .bi[b-a5ardkvscq] {
    font-size: var(--fs-lg);
    opacity: 0.5;
}

/* ===== 表格：未讀行樣式 ===== */

[b-a5ardkvscq] .notification-row-unread {
    background-color: color-mix(in srgb, var(--primary-blue) 5%, transparent) !important;
    font-weight: 600;
}

[b-a5ardkvscq] .notification-row-unread:hover {
    background-color: color-mix(in srgb, var(--primary-blue) 10%, transparent) !important;
}

/* ===== 狀態 Badge ===== */

[b-a5ardkvscq] .badge-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

[b-a5ardkvscq] .badge-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}

[b-a5ardkvscq] .badge-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

[b-a5ardkvscq] .badge-primary {
    background-color: #cce5ff;
    color: #004085;
    border: 1px solid #007bff;
}

[b-a5ardkvscq] .badge-secondary {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #6c757d;
}

/* ===== 動畫 ===== */

.spin[b-a5ardkvscq] {
    animation: spin-b-a5ardkvscq 1s linear infinite;
}

@keyframes spin-b-a5ardkvscq {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 響應式 ===== */

@media (max-width: 640.98px) {
    .notification-page[b-a5ardkvscq] {
        padding: 0 8px;
    }

    /* 篩選列：不換行、允許水平滑動、隱藏捲軸（比照 .form-tab-btn-group 滑動機制，保留藥丸外觀） */
    .notification-filters[b-a5ardkvscq] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 慣性滑動 */
        scrollbar-width: none;             /* Firefox 隱藏捲軸 */
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .notification-filters[b-a5ardkvscq]::-webkit-scrollbar {
        display: none;                     /* WebKit 隱藏捲軸 */
    }

    .filter-btn[b-a5ardkvscq] {
        white-space: nowrap;
        flex-shrink: 0;                    /* 關鍵：藥丸不被壓縮，才會真正溢出觸發橫向捲動 */
    }
}
/* /Components/Pages/Customers/CustomerTransactionTable.razor.rz.scp.css */
/* 篩選列背景 */
.tx-filter-bar[b-42c4rmsa73] {
    background-color: var(--bg-secondary);
}

/* 統計摘要列背景 */
.tx-stats-bar[b-42c4rmsa73] {
    background-color: var(--bg-primary);
}

/* 淨銷售額儲存格背景 */
.tx-net-sales-cell[b-42c4rmsa73] {
    background-color: var(--bg-secondary);
}
/* /Components/Pages/CustomTables/CustomTableDataPage.razor.rz.scp.css */
/* 自訂資料表資料頁面 — 草稿/正式 Tab 樣式（複製自 GenericIndexPageComponent） */

.index-draft-tab-btn-group[b-pjhcsju1qq] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.15rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    margin-right: 0.5rem;
}

.index-draft-tab-btn[b-pjhcsju1qq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

.index-draft-tab-btn:hover[b-pjhcsju1qq] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    border-color: rgba(var(--primary-blue-rgb), 0.4);
}

.index-draft-tab-btn.active[b-pjhcsju1qq] {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    font-weight: 600;
}

.index-draft-tab-btn.active:hover[b-pjhcsju1qq] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}

@media (max-width: 576px) {
    .index-draft-tab-btn-group[b-pjhcsju1qq] {
        margin-right: 0.25rem;
    }

    .index-draft-tab-btn[b-pjhcsju1qq] {
        padding: 0.2rem 0.5rem;
    }
}

[data-bs-theme=dark] .index-draft-tab-btn.active[b-pjhcsju1qq] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
/* /Components/Pages/Employees/EmployeeEditModal/EmployeePermissionTab.razor.rz.scp.css */
.permission-tile[b-mjtombng96] {
    cursor: pointer;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    user-select: none;
}

.permission-tile:hover[b-mjtombng96] {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

.permission-tile.selected[b-mjtombng96] {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

.permission-ring[b-mjtombng96] {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-color) calc(var(--ring-pct, 0) * 1%),
        var(--bs-gray-200) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.permission-ring[b-mjtombng96]::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
}

.permission-ring > i[b-mjtombng96] {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    color: var(--bs-body-color);
}

.permission-detail-header[b-mjtombng96] {
    background-color: var(--bg-tertiary);
}

.permission-detail-placeholder[b-mjtombng96] {
    background-color: var(--bg-secondary);
}

@media (min-width: 768px) {
    .permission-detail-divider[b-mjtombng96] {
        border-right: 1px solid var(--bs-border-color);
    }
}
/* /Components/Pages/Employees/EmployeeIndex.razor.rz.scp.css */
[b-lf4f3nmj34] .account-badge-wrapper {
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

[b-lf4f3nmj34] .account-badge-wrapper:hover .badge {
    background-color: var(--table-hover-bg-striped) !important;
    color: var(--table-hover-text) !important;
}
/* /Components/Pages/Employees/PersonalPreference/DatabaseExportModalComponent.razor.rz.scp.css */
/* ===== 步驟指示器 ===== */

.step-indicator[b-nvndkddr4w] {
    padding: 0 1rem;
}

.step-item[b-nvndkddr4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.step-circle[b-nvndkddr4w] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.2s;
}

.step-item.active .step-circle[b-nvndkddr4w] {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.step-item.completed .step-circle[b-nvndkddr4w] {
    background: #198754;
    color: #fff;
}

.step-label[b-nvndkddr4w] {
    margin-top: 4px;
    color: var(--text-secondary);
}

.step-item.active .step-label[b-nvndkddr4w] {
    color: #0d6efd;
    font-weight: 600;
}

.step-item.completed .step-label[b-nvndkddr4w] {
    color: #198754;
}

.step-connector[b-nvndkddr4w] {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 16px 8px 0;
    transition: background 0.2s;
}

.step-connector.completed[b-nvndkddr4w] {
    background: #198754;
}


/* ===== Step 1：表選取清單（多選） ===== */

.table-select-list[b-nvndkddr4w] {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--bg-primary);
}

.table-select-item[b-nvndkddr4w] {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
    color: var(--text-primary);
}

.table-select-item:hover[b-nvndkddr4w] {
    background: var(--bg-secondary);
}

.table-select-item.selected[b-nvndkddr4w] {
    background: #e7f1ff;
    border-left: 3px solid #0d6efd;
}

.table-select-item:last-child[b-nvndkddr4w] {
    border-bottom: none;
}

.table-select-item .form-check-input[b-nvndkddr4w] {
    cursor: pointer;
}


/* ===== Step 2：預覽確認表格 ===== */

.preview-confirm-table th[b-nvndkddr4w] {
    white-space: nowrap;
}

.preview-confirm-table td[b-nvndkddr4w] {
    vertical-align: middle;
}


/* ===== 通用 ===== */

.step-content[b-nvndkddr4w] {
    min-height: 300px;
}

.database-export-wizard[b-nvndkddr4w] {
    max-height: 70vh;
    overflow-y: auto;
}


/* 表頭背景 — 使用 CSS 變數以支援深色模式 */
.thead-themed > tr > th[b-nvndkddr4w] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}


/* ===== 深色模式覆寫 ===== */

[data-bs-theme=dark] .table-select-item.selected[b-nvndkddr4w] {
    background: #1c3353;
    border-left-color: #58a6ff;
}
/* /Components/Pages/Employees/PersonalPreference/DatabaseImportModalComponent.razor.rz.scp.css */
/* ===== 步驟指示器 ===== */

.step-indicator[b-qdrjt5tsxc] {
    padding: 0 1rem;
}

.step-item[b-qdrjt5tsxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.step-circle[b-qdrjt5tsxc] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.2s;
}

.step-item.active .step-circle[b-qdrjt5tsxc] {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.step-item.completed .step-circle[b-qdrjt5tsxc] {
    background: #198754;
    color: #fff;
}

.step-label[b-qdrjt5tsxc] {
    margin-top: 4px;
    color: var(--text-secondary);
}

.step-item.active .step-label[b-qdrjt5tsxc] {
    color: #0d6efd;
    font-weight: 600;
}

.step-item.completed .step-label[b-qdrjt5tsxc] {
    color: #198754;
}

.step-connector[b-qdrjt5tsxc] {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 16px 8px 0;
    transition: background 0.2s;
}

.step-connector.completed[b-qdrjt5tsxc] {
    background: #198754;
}


/* ===== Step 1：表選取清單 ===== */

.table-select-list[b-qdrjt5tsxc] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--bg-primary);
}

.table-select-item[b-qdrjt5tsxc] {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
    color: var(--text-primary);
}

.table-select-item:hover[b-qdrjt5tsxc] {
    background: var(--bg-secondary);
}

.table-select-item.selected[b-qdrjt5tsxc] {
    background: #e7f1ff;
    border-left: 3px solid #0d6efd;
}

.table-select-item:last-child[b-qdrjt5tsxc] {
    border-bottom: none;
}

/* ===== 欄位資訊面板（Step 1 / Step 2）===== */

.properties-panel[b-qdrjt5tsxc] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}


/* ===== Step 3：對應表格 ===== */

.mapping-table th[b-qdrjt5tsxc] {
    white-space: nowrap;
}

.mapping-table td[b-qdrjt5tsxc] {
    vertical-align: middle;
}

.mapping-table .form-select-sm[b-qdrjt5tsxc],
.mapping-table .form-control-sm[b-qdrjt5tsxc] {
}


/* ===== Step 4：預覽表格 ===== */

.preview-table th[b-qdrjt5tsxc],
.preview-table td[b-qdrjt5tsxc] {
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.preview-table-header[b-qdrjt5tsxc] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.preview-table .table-danger[b-qdrjt5tsxc] {
    background-color: #f8d7da !important;
}

.preview-table .row-excluded[b-qdrjt5tsxc] {
    opacity: 0.45;
}

.preview-table .row-excluded td[b-qdrjt5tsxc] {
    text-decoration: line-through;
    color: var(--text-secondary);
}


/* ===== 通用 ===== */

.step-content[b-qdrjt5tsxc] {
    min-height: 300px;
}

.database-import-wizard[b-qdrjt5tsxc] {
    max-height: 70vh;
    overflow-y: auto;
}


/* ===== 深色模式覆寫 ===== */

[data-bs-theme=dark] .table-select-item.selected[b-qdrjt5tsxc] {
    background: #1c3353;
    border-left-color: #58a6ff;
}

[data-bs-theme=dark] .preview-table .table-danger[b-qdrjt5tsxc] {
    background-color: #3b1a1a !important;
    color: var(--text-primary);
}

[data-bs-theme=dark] .preview-table .row-excluded td[b-qdrjt5tsxc] {
    color: var(--text-secondary);
}
/* /Components/Pages/Employees/PersonalPreference/DisplayTab.razor.rz.scp.css */
/* ===== 區段容器 - 水平並排 ===== */
.display-sections-container[b-4oxg82ncci] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.display-section-column[b-4oxg82ncci] {
    flex: 1 1 calc(33.333% - 0.67rem);
    max-width: calc(33.333% - 0.67rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Zoom / PageSize 預覽文字 ===== */
.option-preview-text[b-4oxg82ncci] {
    font-weight: 600;
    line-height: 1;
    display: block;
}

/* 手機版：區段垂直堆疊 */
@media (max-width: 576px) {
    .display-sections-container[b-4oxg82ncci] {
        flex-direction: column;
    }

    .display-section-column[b-4oxg82ncci] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* /Components/Pages/Employees/PersonalPreference/DownloadsTab.razor.rz.scp.css */
/* 深色模式下覆寫 Bootstrap alert-warning 使用專案 GitHub Dark 調色盤
   （Bootstrap 5.3 預設的深褐色背景與本專案色系不合） */
[data-bs-theme=dark] .alert-warning[b-zba8hxxdp3] {
    --bs-alert-bg: var(--alert-warning-bg);
    --bs-alert-color: var(--warning-text-dark);
    --bs-alert-border-color: rgba(var(--warning-color-rgb), 0.4);
}

/* 偵測中 badge — 以專案變數取代 Bootstrap bg-light（bg-light 的 !important 無法被深色模式覆寫） */
.status-badge-checking[b-zba8hxxdp3] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}
/* /Components/Pages/Employees/PersonalPreference/ImportHistoryDetailModalComponent.razor.rz.scp.css */
/* 匯入歷史詳細 Modal — 樣式
   stat-card 因 fallback summary 用到,從 MultiSheetImport 同步;
   shared 元件 MultiSheetImportResultViewComponent.razor.css 內有自己的同名 class (Blazor scoped CSS 兩邊 hash 不衝突)。
 */

.import-history-detail[b-f2flt1m0kp] {
    color: var(--text-primary);
}

.history-detail-meta-header[b-f2flt1m0kp] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* fallback summary 用的 stat-card */
.fallback-summary .stat-card[b-f2flt1m0kp] {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.fallback-summary .stat-card .stat-value[b-f2flt1m0kp] {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-top: 0.25rem;
}

.fallback-summary .stat-card.stat-insert[b-f2flt1m0kp] { border-left: 4px solid var(--bs-success); }
.fallback-summary .stat-card.stat-update[b-f2flt1m0kp] { border-left: 4px solid var(--bs-info); }
.fallback-summary .stat-card.stat-skip[b-f2flt1m0kp]   { border-left: 4px solid var(--bs-secondary); }
.fallback-summary .stat-card.stat-fail[b-f2flt1m0kp]   { border-left: 4px solid var(--bs-danger); }

.fallback-summary .stat-card.stat-insert .stat-value[b-f2flt1m0kp] { color: var(--bs-success); }
.fallback-summary .stat-card.stat-update .stat-value[b-f2flt1m0kp] { color: var(--bs-info); }
.fallback-summary .stat-card.stat-skip   .stat-value[b-f2flt1m0kp] { color: var(--text-secondary); }
.fallback-summary .stat-card.stat-fail   .stat-value[b-f2flt1m0kp] { color: var(--bs-danger); }

[data-bs-theme=dark] .history-detail-meta-header[b-f2flt1m0kp] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .fallback-summary .stat-card[b-f2flt1m0kp] {
    background-color: var(--bg-tertiary);
}
/* /Components/Pages/Employees/PersonalPreference/ImportHistoryModalComponent.razor.rz.scp.css */
/* 匯入歷史 Modal — CSS 變數規範 */

.import-history-modal[b-9irwo9wggo] {
    color: var(--text-primary);
}

.history-thead[b-9irwo9wggo] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.history-thead th[b-9irwo9wggo] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* 可點列 — 點擊開啟詳細 modal */
.history-table .clickable-row[b-9irwo9wggo] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.history-table .clickable-row:hover[b-9irwo9wggo] {
    background-color: var(--bg-secondary);
}

/* 深色模式 */
[data-bs-theme=dark] .history-thead[b-9irwo9wggo],
[data-bs-theme=dark] .history-thead th[b-9irwo9wggo] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-bs-theme=dark] .history-table .clickable-row:hover[b-9irwo9wggo] {
    background-color: var(--bg-tertiary);
}
/* /Components/Pages/Employees/PersonalPreference/MultiSheetImportModalComponent.razor.rz.scp.css */
/* 資料庫匯入工具 Modal — 顯示樣式
   依 [Readme_文字規則.md] 與 [README_個人化設定_顯示設定.md] 規範：
   - 字型：default (1rem) / var(--fs-md) / var(--fs-lg)
   - 色彩：使用 CSS 變數，不硬編 hex（含 fallback hex 也禁）
   - 深色模式覆寫：[data-bs-theme=dark] selector
 */

.multi-sheet-import[b-kbdw7z9kx5] {
    color: var(--text-primary);
}

/* ===== 匯入進度條 Overlay =====
   參考 ReportPreviewModalComponent 的 export-progress-overlay,但因為本 modal 是 Desktop
   且 .modal-body 有 overflow:auto + isolation:isolate,absolute 定位會被困住 + 受捲動影響。
   改用 position:fixed,直接黏 viewport;markup 已從 BodyContent 移到兄弟層,跳脫 modal-body
   stacking context。z-index 2050 高於 BaseModalComponent 最多四層 modal stack (max 1080)。
 */
.import-progress-overlay[b-kbdw7z9kx5] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2050;
}

.import-progress-card[b-kbdw7z9kx5] {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: min(420px, 90vw);
    max-width: 600px;
    text-align: center;
}

.import-progress-message[b-kbdw7z9kx5] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: var(--fs-md);
}

.import-progress-bar[b-kbdw7z9kx5] {
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
}

.import-progress-bar .progress-bar[b-kbdw7z9kx5] {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
}

.import-progress-hint[b-kbdw7z9kx5] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

@media (max-width: 576px) {
    .import-progress-card[b-kbdw7z9kx5] {
        min-width: auto;
        padding: 1.5rem 1rem;
        margin: 0 1rem;
    }
}

[data-bs-theme=dark] .import-progress-overlay[b-kbdw7z9kx5] {
    background: rgba(0, 0, 0, 0.78);
}

[data-bs-theme=dark] .import-progress-card[b-kbdw7z9kx5] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ─── 卡片 header — 取代 bg-light ─── */
.import-card-header[b-kbdw7z9kx5] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.import-card-header-info[b-kbdw7z9kx5],
.import-card-header-success[b-kbdw7z9kx5] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

/* ─── 表格 thead — 取代 table-light / bg-light ─── */
.import-thead[b-kbdw7z9kx5] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.import-thead th[b-kbdw7z9kx5] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* ─── Sheet 卡片列（可拖曳排序） ─── */
.sheet-row[b-kbdw7z9kx5] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background-color: var(--bg-primary);
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.sheet-drag-handle[b-kbdw7z9kx5] {
    cursor: grab;
    color: var(--text-secondary);
    padding: 0 0.25rem;
    user-select: none;
}

.sheet-drag-handle:active[b-kbdw7z9kx5] {
    cursor: grabbing;
}

.sheet-row--dragging[b-kbdw7z9kx5] {
    opacity: 0.5;
    transform: scale(0.98);
}

.sheet-row--drag-over[b-kbdw7z9kx5] {
    border-color: var(--color-primary);
    background-color: var(--bg-secondary);
}

.sheet-order[b-kbdw7z9kx5] {
    /* 順序徽章 — 使用 fs-md 而非 inline fs-5 */
    font-size: var(--fs-md);
    width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── 統計卡片 — 取代 alert-success/info/etc inline fs-3 寫法 ─── */
.stat-card[b-kbdw7z9kx5] {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.stat-card .stat-value[b-kbdw7z9kx5] {
    /* 大標題尺寸 — 數值醒目 */
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* 邊框色彩語意化（純使用 Bootstrap CSS 變數，無 fallback hex） */
.stat-card.stat-insert[b-kbdw7z9kx5] { border-left: 4px solid var(--bs-success); }
.stat-card.stat-update[b-kbdw7z9kx5] { border-left: 4px solid var(--bs-info); }
.stat-card.stat-skip[b-kbdw7z9kx5]   { border-left: 4px solid var(--bs-secondary); }
.stat-card.stat-fail[b-kbdw7z9kx5]   { border-left: 4px solid var(--bs-danger); }

.stat-card.stat-insert .stat-value[b-kbdw7z9kx5] { color: var(--bs-success); }
.stat-card.stat-update .stat-value[b-kbdw7z9kx5] { color: var(--bs-info); }
.stat-card.stat-skip   .stat-value[b-kbdw7z9kx5] { color: var(--text-secondary); }
.stat-card.stat-fail   .stat-value[b-kbdw7z9kx5] { color: var(--bs-danger); }

/* ─── nav-tabs 微調，深色模式調整文字色 ─── */
[b-kbdw7z9kx5] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[b-kbdw7z9kx5] .nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--border-color) var(--border-color) var(--bg-primary);
}

/* ─── 深色模式覆寫 ─── */
[data-bs-theme=dark] .sheet-row[b-kbdw7z9kx5] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .sheet-row--drag-over[b-kbdw7z9kx5] {
    background-color: var(--bg-secondary);
}

[data-bs-theme=dark] .stat-card[b-kbdw7z9kx5] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .import-card-header[b-kbdw7z9kx5],
[data-bs-theme=dark] .import-card-header-info[b-kbdw7z9kx5],
[data-bs-theme=dark] .import-card-header-success[b-kbdw7z9kx5],
[data-bs-theme=dark] .import-thead[b-kbdw7z9kx5],
[data-bs-theme=dark] .import-thead th[b-kbdw7z9kx5] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
/* /Components/Pages/Employees/PersonalPreference/NotificationSettingsTab.razor.rz.scp.css */
/* NotificationSettingsTab — 無額外自訂樣式，按鈕樣式由 OptionSelectorButton 元件管理 */
/* /Components/Pages/Employees/PersonalPreference/PersonalDataTab.razor.rz.scp.css */
.avatar-preview-wrapper[b-2b45vo2o5k] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--border-color, #dee2e6);
    transition: border-color 0.2s;
}

.avatar-preview-wrapper:hover[b-2b45vo2o5k] {
    border-color: var(--bs-primary);
}

.avatar-preview-img[b-2b45vo2o5k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-preview-placeholder[b-2b45vo2o5k] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
    font-size: var(--fs-lg);
}

[data-bs-theme=dark] .avatar-preview-placeholder[b-2b45vo2o5k] {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

/* 區段標題 — 與 GenericFormComponent 的 form-section-header 一致 */
.section-header[b-2b45vo2o5k] {
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.section-title[b-2b45vo2o5k] {
    font-weight: 600;
    color: var(--primary-blue);
}
/* /Components/Pages/Employees/PersonalPreference/ShortcutKeysTab.razor.rz.scp.css */
/* ===== 快捷鍵設定 Tab 樣式 ===== */

/* 整體表格容器 */
.shortcut-editor-table[b-hz299lfj0r] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

/* 每一行 */
.shortcut-row[b-hz299lfj0r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease;
}

.shortcut-row:last-child[b-hz299lfj0r] {
    border-bottom: none;
}

.shortcut-row:hover:not(.shortcut-row--fixed)[b-hz299lfj0r] {
    background-color: var(--bg-secondary);
}

/* 擷取模式高亮 */
.shortcut-row--capturing[b-hz299lfj0r] {
    background-color: rgba(var(--bs-warning-rgb), 0.08);
}

/* 固定快捷鍵（Esc）行 */
.shortcut-row--fixed[b-hz299lfj0r] {
    background-color: var(--bg-secondary);
    opacity: 0.75;
}

/* 功能名稱欄 */
.shortcut-label[b-hz299lfj0r] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.shortcut-label span[b-hz299lfj0r] {
    font-weight: 500;
}

/* 快捷鍵顯示欄 */
.shortcut-display[b-hz299lfj0r] {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcut-keys-display[b-hz299lfj0r] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* kbd 樣式（與 ShortcutKeysModalComponent 一致） */
kbd[b-hz299lfj0r] {
    display: inline-block;
    padding: 3px 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    background-color: #1a1a2e;
    color: #e8e8e8;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
    white-space: nowrap;
}

[data-bs-theme=dark] kbd[b-hz299lfj0r] {
    background-color: var(--bg-tertiary, #21262d);
    color: var(--text-primary);
    border-color: var(--bs-border-color);
}

/* 擷取中 badge 動畫 */
.capturing-badge[b-hz299lfj0r] {
    animation: pulse-warning-b-hz299lfj0r 1.2s ease-in-out infinite;
}

@keyframes pulse-warning-b-hz299lfj0r {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* 操作按鈕欄 */
.shortcut-actions[b-hz299lfj0r] {
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* ===== 手機版排版 ===== */
@media (max-width: 576px) {
    .shortcut-row[b-hz299lfj0r] {
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;
    }

    /* 取消固定寬度，依內容自動縮小，讓 label 有足夠空間 */
    .shortcut-display[b-hz299lfj0r] {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .shortcut-actions[b-hz299lfj0r] {
        flex: 0 0 auto;
    }

    /* 手機上隱藏「預設值」提示文字，避免 label 被撐寬而換行 */
    .shortcut-label small[b-hz299lfj0r] {
        display: none;
    }
}

/* 深色模式適配 */
[data-bs-theme=dark] .shortcut-row:hover:not(.shortcut-row--fixed)[b-hz299lfj0r] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .shortcut-row--fixed[b-hz299lfj0r] {
    background-color: var(--bg-secondary);
}

[data-bs-theme=dark] .shortcut-row--capturing[b-hz299lfj0r] {
    background-color: rgba(255, 193, 7, 0.1);
}
/* /Components/Pages/Employees/PersonalPreference/SuperAdminDebugTab.razor.rz.scp.css */
/* ===== SuperAdmin Debug Tab 樣式 ===== */

/* SuperAdmin 標識 Badge */
.debug-identity-badge[b-ekg4brsenz] {
    background: #1a1a2e;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-family: monospace;
    letter-spacing: 0.03em;
}

.debug-superadmin-label[b-ekg4brsenz] {
    color: #f8c8a0;
}

.debug-subtitle[b-ekg4brsenz] {
    color: #7ec8e3;
    margin-left: 0.5rem;
}

/* 顏色指示標記 */
.debug-color-badge[b-ekg4brsenz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: monospace;
    background: #1a1a2e;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.debug-color-dot[b-ekg4brsenz] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── 以下為 shortcut-editor-table 樣式（從 ShortcutKeysTab.razor.css 複製，scoped 至此組件）── */

.shortcut-editor-table[b-ekg4brsenz] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

.shortcut-row[b-ekg4brsenz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.shortcut-row:last-child[b-ekg4brsenz] {
    border-bottom: none;
}

.shortcut-row--fixed[b-ekg4brsenz] {
    background-color: var(--bg-secondary);
    opacity: 0.85;
}

.shortcut-label[b-ekg4brsenz] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.shortcut-label span[b-ekg4brsenz] {
    font-weight: 500;
}

.shortcut-display[b-ekg4brsenz] {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcut-keys-display[b-ekg4brsenz] {
    display: flex;
    align-items: center;
    gap: 4px;
}

kbd[b-ekg4brsenz] {
    display: inline-block;
    padding: 3px 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    background-color: #1a1a2e;
    color: #e8e8e8;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
    white-space: nowrap;
}

[data-bs-theme=dark] kbd[b-ekg4brsenz] {
    background-color: var(--bg-tertiary, #21262d);
    color: var(--text-primary);
    border-color: var(--bs-border-color);
}

.shortcut-actions[b-ekg4brsenz] {
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* ===== 手機版排版 ===== */
@media (max-width: 576px) {
    /* Header badge：subtitle 換行顯示而非溢出 */
    .debug-identity-badge[b-ekg4brsenz] {
        padding: 0.5rem 0.75rem;
    }

    .debug-subtitle[b-ekg4brsenz] {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    /* 每行：縮小 gap 和 padding，讓三欄擠進一列 */
    .shortcut-row[b-ekg4brsenz] {
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;
        align-items: center;
    }

    /* 取消固定寬度，依內容自動縮小，讓 label 有足夠空間 */
    .shortcut-display[b-ekg4brsenz] {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .shortcut-actions[b-ekg4brsenz] {
        flex: 0 0 auto;
    }

    /* 隱藏功能說明小字，避免 label 換行造成每行過高 */
    .shortcut-label small[b-ekg4brsenz] {
        display: none;
    }
}

/* 深色模式適配 */
[data-bs-theme=dark] .shortcut-row--fixed[b-ekg4brsenz] {
    background-color: var(--bg-secondary);
}

[data-bs-theme=dark] .debug-identity-badge[b-ekg4brsenz] {
    border-color: #30363d;
}
/* /Components/Pages/Employees/RoleEditModalComponent.razor.rz.scp.css */
/* 縮小權限搜尋框兩側按鈕（左側放大鏡 / 右側清除 X），避免比輸入欄位高 */
.role-perm-search-wrapper[b-8aj48olsl8]  .input-group-text,
.role-perm-search-wrapper[b-8aj48olsl8]  .btn {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1;
}

.role-perm-search-wrapper[b-8aj48olsl8]  .input-group-text .bi,
.role-perm-search-wrapper[b-8aj48olsl8]  .btn .bi {
    line-height: 1;
}

/* flexbox 子項截斷需要 min-width:0 才能讓 text-truncate 生效 */
.mw0[b-8aj48olsl8] {
    min-width: 0;
}

/* 頂部白話摘要列 */
.role-perm-summary[b-8aj48olsl8] {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
}

/* ===== 左側模組清單（業務超分群） =====
   高度跟著 Desktop modal（≈ 100dvh - 3rem）一起變：不再固定 30rem，
   改用視窗相對高度填滿到接近 modal 底部，視窗放大/縮小自動跟著調整。
   dvh/svh/vh 三層 fallback 對齊 BaseModalComponent 既有寫法。 */
.role-perm-sidebar[b-8aj48olsl8] {
    min-height: 12rem;
    max-height: calc(100vh - 20rem);   /* fallback */
    max-height: calc(100svh - 20rem);  /* iOS 15.4+：小視窗高度 */
    max-height: calc(100dvh - 20rem);  /* iOS 16+ / Chrome 108+：動態調整 */
    overflow-y: auto;
    padding-right: 0.25rem;
}

@media (max-width: 767.98px) {
    .role-perm-sidebar[b-8aj48olsl8] {
        min-height: 0;
        max-height: 14rem;
    }
}

.role-perm-supergroup-header[b-8aj48olsl8] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    padding: 0.6rem 0.6rem 0.25rem;
}

.role-perm-supergroup-header:first-child[b-8aj48olsl8] {
    padding-top: 0.1rem;
}

.role-perm-module-item[b-8aj48olsl8] {
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.role-perm-module-item:hover[b-8aj48olsl8] {
    background-color: var(--bs-secondary-bg);
}

.role-perm-module-item.active[b-8aj48olsl8] {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* 模組覆蓋率細長條 */
.role-perm-coverage[b-8aj48olsl8] {
    height: 4px;
    background-color: var(--bs-secondary-bg);
}

/* ===== 右側權限明細（溫暖清單） =====
   同樣跟 modal 高度連動；比 sidebar 多扣 ≈ 2.5rem 給卡片標題列，讓兩側底部對齊。 */
.role-perm-detail-scroll[b-8aj48olsl8] {
    min-height: 12rem;
    max-height: calc(100vh - 22.5rem);   /* fallback */
    max-height: calc(100svh - 22.5rem);  /* iOS 15.4+ */
    max-height: calc(100dvh - 22.5rem);  /* iOS 16+ / Chrome 108+ */
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .role-perm-detail-scroll[b-8aj48olsl8] {
        min-height: 0;
        max-height: 24rem;
    }
}

.role-perm-list-item[b-8aj48olsl8] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    user-select: none;
}

.role-perm-list-item:last-child[b-8aj48olsl8] {
    border-bottom: 0;
}

.role-perm-list-item:hover[b-8aj48olsl8] {
    background-color: var(--bs-tertiary-bg);
}

/* 動作圖示尺寸對齊 */
.role-perm-action-icon[b-8aj48olsl8] {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
    margin-top: 0.1rem;
}

/* 開關放大,更易點選 */
.role-perm-switch[b-8aj48olsl8] {
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

/* 勾選列的淡色背景（取代鮮綠 table-success）；使用 Bootstrap subtle CSS 變數,
   深色模式自動切換,符合 README 規則。 */
.role-perm-row-checked-normal[b-8aj48olsl8] {
    background-color: var(--bs-success-bg-subtle);
}

.role-perm-row-checked-sensitive[b-8aj48olsl8] {
    background-color: var(--bs-danger-bg-subtle);
}
/* /Components/Pages/ErrorHandling/ErrorPage.razor.rz.scp.css */
.error-page[b-9s0d7luk0b] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.error-container[b-9s0d7luk0b] {
    max-width: 600px;
    width: 100%;
}

.error-content[b-9s0d7luk0b] {
    background: white;
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e3e6f0;
}

.error-icon[b-9s0d7luk0b] {
    margin-bottom: 2rem;
}

.error-icon i[b-9s0d7luk0b] {
    font-size: 4rem;
    color: #f6c23e;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.error-title[b-9s0d7luk0b] {
    color: #5a5c69;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.75rem;
}

.error-message[b-9s0d7luk0b] {
    margin-bottom: 2rem;
}

.error-message .lead[b-9s0d7luk0b] {
    color: #6c757d;
    font-size: var(--fs-md);
}

.error-actions[b-9s0d7luk0b] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.error-actions .btn[b-9s0d7luk0b] {
    min-width: 140px;
}

.technical-details .card[b-9s0d7luk0b] {
    text-align: left;
    border: 1px solid #d1ecf1;
    background-color: #d1ecf1;
}

.technical-details .card-header[b-9s0d7luk0b] {
    background-color: #bee5eb;
    border-bottom: 1px solid #b8d4da;
}

.technical-details .card-title[b-9s0d7luk0b] {
    color: #0c5460;
    font-weight: 600;
}

.technical-details .card-body[b-9s0d7luk0b] {
    background-color: white;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .error-content[b-9s0d7luk0b] {
        padding: 2rem 1.5rem;
    }
    
    .error-icon i[b-9s0d7luk0b] {
        font-size: var(--fs-lg);
    }
    
    .error-title[b-9s0d7luk0b] {
        font-size: var(--fs-lg);
    }
    
    .error-actions[b-9s0d7luk0b] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .error-actions .btn[b-9s0d7luk0b] {
        min-width: auto;
        width: 100%;
    }
}

/* 動畫效果 */
@keyframes fadeInUp-b-9s0d7luk0b {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-content[b-9s0d7luk0b] {
    animation: fadeInUp-b-9s0d7luk0b 0.6s ease-out;
}

.error-icon i[b-9s0d7luk0b] {
    animation: pulse-b-9s0d7luk0b 2s infinite;
}

@keyframes pulse-b-9s0d7luk0b {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 按鈕 hover 效果 */
.error-actions .btn[b-9s0d7luk0b] {
    transition: all 0.3s ease;
}

.error-actions .btn:hover[b-9s0d7luk0b] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 警告框樣式 */
.error-message .alert[b-9s0d7luk0b] {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-message .alert-info[b-9s0d7luk0b] {
    background-color: #e7f3ff;
    color: #004085;
}

.error-message .alert-secondary[b-9s0d7luk0b] {
    background-color: #f8f9fa;
    color: #6c757d;
}
/* /Components/Pages/FinancialManagement/FixedAssetEditModalComponent.razor.rz.scp.css */
/* 會計資訊分頁表頭：對齊 GenericAccountingTabComponent（CSS 變數支援深色模式，禁用 Bootstrap table-light） */
.accounting-thead th[b-ndrq4w46vx] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 保養分頁：依 README_文字規則.md，連結設備名稱屬「強調文字」→ 中級字（var(--fs-md)） */
.maint-equipment-name[b-ndrq4w46vx] {
    font-size: var(--fs-md);
    font-weight: 600;
}
/* /Components/Pages/FinancialManagement/PartyStatementView.razor.rz.scp.css */
/* 期初/期末彙整列 — 主題感知(取代 Bootstrap table-secondary;深色模式不適配)。
   直接走 CSS 變數即自動隨深/淺色切換,毋須 [data-bs-theme=dark] 覆寫(也避開 ::deep 陷阱)。 */
.statement-summary-row > td[b-i0spiyme8e] {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===== 面板容器 ===== */
.dashboard-panel[b-uq99wu06vr] {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.dashboard-panel:hover[b-uq99wu06vr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 面板標題列 */
.panel-header[b-uq99wu06vr] {
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-light);
}

/* 面板內容區域 - CSS Grid 自適應佈局 */
.panel-content[b-uq99wu06vr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    padding-top: 0.25rem;
}

/* ===== 新增捷徑卡片 ===== */
.add-shortcut-card[b-uq99wu06vr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 0.5rem 0.7rem;
    background-color: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 88px;
    color: var(--text-secondary);
}

.add-shortcut-card:hover[b-uq99wu06vr] {
    background-color: rgba(var(--primary-blue-rgb), 0.06);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.add-shortcut-card i[b-uq99wu06vr] {
    font-size: var(--fs-lg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.add-shortcut-card:hover i[b-uq99wu06vr] {
    transform: scale(1.15);
}

.add-shortcut-card span[b-uq99wu06vr] {
    font-weight: 600;
    white-space: nowrap;
}

/* ===== 新增面板卡片 ===== */
.add-panel-card[b-uq99wu06vr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--text-secondary);
    font-weight: 600;
}

.add-panel-card:hover[b-uq99wu06vr] {
    background-color: rgba(var(--primary-blue-rgb), 0.06);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.add-panel-card i[b-uq99wu06vr] {
    font-size: var(--fs-md);
    transition: transform 0.25s ease;
}

.add-panel-card:hover i[b-uq99wu06vr] {
    transform: scale(1.15);
}

/* ===== 面板空狀態 ===== */
.empty-panel-state[b-uq99wu06vr] {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-panel-icons[b-uq99wu06vr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.empty-panel-icons > i:first-child[b-uq99wu06vr] {
    font-size: var(--fs-lg);
    color: var(--border-color);
}

.empty-panel-icons .empty-panel-plus[b-uq99wu06vr] {
    position: absolute;
    bottom: 0;
    right: -4px;
    color: var(--primary-blue);
    background: var(--bg-primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 全域空狀態 ===== */
.global-empty-state[b-uq99wu06vr] {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.empty-state-illustration[b-uq99wu06vr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.empty-state-illustration > i:first-child[b-uq99wu06vr] {
    font-size: var(--fs-lg);
    color: var(--border-color);
}

.empty-state-illustration .empty-state-cursor[b-uq99wu06vr] {
    position: absolute;
    bottom: 0;
    right: -6px;
    font-size: var(--fs-lg);
    color: var(--primary-blue);
}

/* ===== 響應式調整 - 平板 ===== */
@media (max-width: 768px) {
    .dashboard-panel[b-uq99wu06vr] {
        padding: 0.75rem 0.85rem 1rem;
    }

    .panel-content[b-uq99wu06vr] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.6rem;
    }

    .add-shortcut-card[b-uq99wu06vr] {
        min-height: 84px;
        padding: 0.7rem 0.4rem 0.55rem;
    }

    .add-shortcut-card i[b-uq99wu06vr] {
        font-size: var(--fs-md);
    }

    .add-shortcut-card span[b-uq99wu06vr] {
    }
}

/* ===== 響應式調整 - 手機 =====
   .container-fluid 與 article.content.px-4 的 padding 歸零是 layout 跨切面 fix，
   放在 wwwroot/css/app.css 全域 ≤576px 段，這裡不重複。 */
@media (max-width: 576px) {
    .dashboard-panel[b-uq99wu06vr] {
        /* L/R padding 歸零讓 panel 內容完全貼齊螢幕邊；border-radius 也設 0，避免 panel 邊緣鋸齒於螢幕邊看起來怪 */
        padding: 0.5rem 0 0.6rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .panel-header[b-uq99wu06vr] {
        /* dashboard-panel 不再給 L/R padding，header 自己加回 0.5rem 讓標題列不貼齊螢幕邊（不貼齊只是視覺習慣，按鈕仍在合理位置）*/
        padding: 0 0.5rem 0.5rem;
        margin-bottom: 0.55rem;
    }

    /* 卡片區域填滿 panel 全寬：auto-fill + 較寬 minmax，讓 360px 螢幕 4 欄但每張卡片變寬 */
    .panel-content[b-uq99wu06vr] {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 0.25rem;
    }

    .add-shortcut-card[b-uq99wu06vr] {
        min-height: 72px;
        padding: 0.3rem 0.1rem 0.3rem;
        gap: 0.15rem;
        border-radius: 0.5rem;
    }

    /* 「新增區塊」改成低調次要按鈕，不再全寬虛線卡片 */
    .add-panel-card[b-uq99wu06vr] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-width: 1px;
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
    }

    .add-panel-card i[b-uq99wu06vr] {
        font-size: 0.95rem;
    }
}

/* ===== 面板圖示編輯按鈕 ===== */
.panel-icon-edit[b-uq99wu06vr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    background-color: transparent;
}

.panel-icon-edit:hover[b-uq99wu06vr] {
    background-color: rgba(var(--primary-blue-rgb), 0.1);
}

.panel-icon-edit .icon-edit-badge[b-uq99wu06vr] {
    position: absolute;
    bottom: -2px;
    right: 0;
    color: var(--primary-blue);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.panel-icon-edit:hover .icon-edit-badge[b-uq99wu06vr] {
    opacity: 1;
}
/* /Components/Pages/Items/ItemPickerModal.razor.rz.scp.css */
/* 列狀態 — 使用 CSS 變數以支援深色模式（::deep 因表格在子組件內渲染） */

/* 已加入的品項（不可選） */
[b-5a4lhwmh54] .row-already-added > td {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* 目前選取的品項 */
[b-5a4lhwmh54] .row-selected > td {
    background-color: var(--alert-info-bg);
}
/* /Components/Pages/Items/ProductionBoard/ProductionBoardDayColumn.razor.rz.scp.css */
.board-day-column[b-pms8vwpts1] {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    flex: 1;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: border-color 0.15s, background 0.15s;
    min-height: 400px;
}

.board-day-column.is-today[b-pms8vwpts1] {
    background: rgba(13, 110, 253, 0.04);
    border-color: rgba(13, 110, 253, 0.2);
}

.board-day-column.drag-over[b-pms8vwpts1] {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
}

.day-header[b-pms8vwpts1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.day-name[b-pms8vwpts1] {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.day-number[b-pms8vwpts1] {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.today-badge[b-pms8vwpts1] {
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-count[b-pms8vwpts1] {
    margin-left: auto;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1px 7px;
}

.day-items[b-pms8vwpts1] {
    padding: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.day-empty-hint[b-pms8vwpts1] {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px 8px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    opacity: 0.5;
}

.drag-over .day-empty-hint[b-pms8vwpts1] {
    border-color: #0d6efd;
    opacity: 1;
    color: #0d6efd;
}

/* 日內排序插槽 — 拖曳時固定顯示，不依賴 hover 展開 */
.sort-dropzone[b-pms8vwpts1] {
    height: 20px;
    margin: 2px 0;
    border-radius: 4px;
    border: 2px dashed rgba(13, 110, 253, 0.25);
    background: rgba(13, 110, 253, 0.04);
    display: flex;
    align-items: center;
    transition: border-color 0.1s, background 0.1s;
    cursor: copy;
}

.sort-dropzone-active[b-pms8vwpts1] {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.12);
}

.sort-dropzone-indicator[b-pms8vwpts1] {
    flex: 1;
    height: 2px;
    background: transparent;
    border-radius: 1px;
    margin: 0 6px;
}

.sort-dropzone-active .sort-dropzone-indicator[b-pms8vwpts1] {
    background: #0d6efd;
}

[data-bs-theme=dark] .sort-dropzone[b-pms8vwpts1] {
    border-color: rgba(88, 166, 255, 0.25);
    background: rgba(88, 166, 255, 0.05);
}

[data-bs-theme=dark] .sort-dropzone-active[b-pms8vwpts1] {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.12);
}

[data-bs-theme=dark] .sort-dropzone-active .sort-dropzone-indicator[b-pms8vwpts1] {
    background: #58a6ff;
}

/* Dark mode */
[data-bs-theme=dark] .board-day-column[b-pms8vwpts1] {
    background: #161b22;
}

[data-bs-theme=dark] .board-day-column.is-today[b-pms8vwpts1] {
    background: rgba(88, 166, 255, 0.06);
    border-color: rgba(88, 166, 255, 0.25);
}

[data-bs-theme=dark] .board-day-column.drag-over[b-pms8vwpts1] {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.1);
}

[data-bs-theme=dark] .item-count[b-pms8vwpts1] {
    background: #0d1117;
    border-color: #30363d;
}
/* /Components/Pages/Items/ProductionBoard/ProductionBoardItemCard.razor.rz.scp.css */
.board-item-card[b-k1z7sxyix9] {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: grab;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.1s;
    user-select: none;
}

.board-item-card:hover[b-k1z7sxyix9] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.board-item-card:active[b-k1z7sxyix9] {
    cursor: grabbing;
}

/* 狀態色條（左邊框） */
.card-status-bar[b-k1z7sxyix9] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.status-waitingmaterial .card-status-bar[b-k1z7sxyix9] { background: #fd7e14; }
.status-inprogress .card-status-bar[b-k1z7sxyix9]      { background: #0d6efd; }
.status-completed .card-status-bar[b-k1z7sxyix9]       { background: #198754; }
.status-paused .card-status-bar[b-k1z7sxyix9]          { background: #6c757d; }
.status-aborted .card-status-bar[b-k1z7sxyix9]         { background: #dc3545; }

.card-body-inner[b-k1z7sxyix9] {
    padding: 6px 8px 6px 12px;
}

.card-header-row[b-k1z7sxyix9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.card-product[b-k1z7sxyix9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-name[b-k1z7sxyix9] {
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.product-code[b-k1z7sxyix9] {
    color: var(--text-secondary);
    font-weight: 400;
}

.card-divider[b-k1z7sxyix9] {
    margin: 4px 0;
    border-color: var(--border-color);
    opacity: 0.5;
}

.card-info-row[b-k1z7sxyix9] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 2px;
}

.info-label[b-k1z7sxyix9] {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.info-value[b-k1z7sxyix9] {
    color: var(--text-primary);
    word-break: break-word;
}

.qty-done[b-k1z7sxyix9] {
    color: #198754;
    font-weight: 600;
}

.qty-sep[b-k1z7sxyix9] {
    color: var(--text-secondary);
    margin: 0 2px;
}

.qty-total[b-k1z7sxyix9] {
    font-weight: 600;
}

.due-urgent[b-k1z7sxyix9]  { color: #fd7e14; }
.due-overdue[b-k1z7sxyix9] { color: #dc3545; font-weight: 600; }

.card-status-badge[b-k1z7sxyix9] {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.card-progress[b-k1z7sxyix9] {
    margin-top: 5px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.card-progress-bar[b-k1z7sxyix9] {
    height: 100%;
    background: #198754;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.status-waitingmaterial .card-status-badge[b-k1z7sxyix9] { background: #fd7e1422; color: #fd7e14; }
.status-inprogress .card-status-badge[b-k1z7sxyix9]      { background: #0d6efd22; color: #0d6efd; }
.status-completed .card-status-badge[b-k1z7sxyix9]       { background: #19875422; color: #198754; }
.status-paused .card-status-badge[b-k1z7sxyix9]          { background: #6c757d22; color: #6c757d; }
.status-aborted .card-status-badge[b-k1z7sxyix9]         { background: #dc354522; color: #dc3545; }


/* 日內拖曳中的卡片（半透明淡化） */
.board-item-card.sort-dragging[b-k1z7sxyix9] {
    opacity: 0.35;
    pointer-events: none;
}

/* Dark mode */
[data-bs-theme=dark] .board-item-card[b-k1z7sxyix9] {
    background: #1c2128;
    border-color: #30363d;
}

[data-bs-theme=dark] .customer-name[b-k1z7sxyix9],
[data-bs-theme=dark] .order-code[b-k1z7sxyix9] {
    background: #0d1117;
    border-color: #30363d;
}
/* /Components/Pages/Items/ProductionBoard/ProductionBoardItemEditModal.razor.rz.scp.css */
/* A. 三欄統計列 */
.stats-row[b-ga6tz1zeif] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.stat-item[b-ga6tz1zeif] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    gap: 1px;
}

.stat-divider[b-ga6tz1zeif] {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    flex-shrink: 0;
}

.stat-label[b-ga6tz1zeif] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.stat-value[b-ga6tz1zeif] {
    font-weight: 600;
    color: var(--text-primary);
}

.stat-done[b-ga6tz1zeif] {
    color: #198754;
}

.stat-remaining[b-ga6tz1zeif] {
    color: #0d6efd;
}

/* B. Modal 內進度條 */
.modal-progress[b-ga6tz1zeif] {
    height: 5px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.modal-progress-bar[b-ga6tz1zeif] {
    height: 100%;
    background: #198754;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* 確認入庫區塊底色 */
.complete-section[b-ga6tz1zeif] {
    background: var(--bg-secondary, #f8f9fa);
}

/* 本次入庫數量 input */
.input-qty[b-ga6tz1zeif] {
    max-width: 120px;
}

/* 入庫倉庫 select */
.select-warehouse[b-ga6tz1zeif] {
    max-width: 140px;
}

/* 庫位 / 退料倉庫 select */
.select-location[b-ga6tz1zeif] {
    max-width: 130px;
}

/* 實際用量 / 退料量 / 損耗量 input */
.settlement-input[b-ga6tz1zeif] {
    max-width: 90px;
}

/* 損耗備註 input */
.settlement-reason[b-ga6tz1zeif] {
    max-width: 160px;
}

/* 組件領料表格表頭 */
.material-table-thead[b-ga6tz1zeif] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-bs-theme=dark] .material-table-thead[b-ga6tz1zeif] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* /Components/Pages/Items/ProductionBoard/ProductionBoardPendingSidebar.razor.rz.scp.css */
.pending-sidebar[b-xh892nmjvf] {
    display: flex;
    flex-direction: column;
    width: 220px;
    min-width: 200px;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .pending-sidebar[b-xh892nmjvf] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        min-width: unset;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
    }

    .pending-sidebar.mobile-open[b-xh892nmjvf] {
        transform: translateX(0);
    }
}

.sidebar-header[b-xh892nmjvf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-title[b-xh892nmjvf] {
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-count[b-xh892nmjvf] {
    background: #0d6efd;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-weight: 600;
}

.sidebar-search[b-xh892nmjvf] {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-search .form-control[b-xh892nmjvf] {
}

.sidebar-items[b-xh892nmjvf] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sidebar-loading[b-xh892nmjvf],
.sidebar-empty[b-xh892nmjvf] {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px 8px;
    opacity: 0.7;
}

.sidebar-item-wrapper[b-xh892nmjvf] {
    cursor: grab;
    margin-bottom: 6px;
    border-radius: 6px;
    transition: opacity 0.15s;
}

.sidebar-item-wrapper:active[b-xh892nmjvf] {
    cursor: grabbing;
}

.sidebar-item-wrapper.dragging[b-xh892nmjvf] {
    opacity: 0.4;
}

.sidebar-item-wrapper.highlighted .sidebar-card[b-xh892nmjvf] {
    border-left-color: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
    background: rgba(13,110,253,0.06);
}

.sidebar-card[b-xh892nmjvf] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 7px 9px;
    border-left: 3px solid #6c757d;
}

.sidebar-item-wrapper:hover .sidebar-card[b-xh892nmjvf] {
    border-color: #0d6efd;
    border-left-color: #0d6efd;
    box-shadow: 0 1px 4px rgba(13,110,253,0.15);
}

.scard-product[b-xh892nmjvf] {
    display: flex;
    flex-direction: column;
    margin-bottom: 3px;
}

.scard-code[b-xh892nmjvf] {
    color: var(--text-secondary);
}

.scard-name[b-xh892nmjvf] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.scard-customer[b-xh892nmjvf] {
    color: var(--text-secondary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scard-footer[b-xh892nmjvf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scard-qty[b-xh892nmjvf] {
    color: var(--text-secondary);
}

.scard-due[b-xh892nmjvf] {
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.scard-due.due-urgent[b-xh892nmjvf]  { color: #fd7e14; border-color: #fd7e14; }
.scard-due.due-overdue[b-xh892nmjvf] { color: #dc3545; border-color: #dc3545; background: rgba(220,53,69,0.08); }

.scard-order[b-xh892nmjvf] {
    color: var(--text-secondary);
    margin-top: 3px;
}

/* Drop target state（拖曳看板卡片時） */
.pending-sidebar.drop-target[b-xh892nmjvf] {
    border-right-color: #fd7e14;
    background: rgba(253,126,20,0.04);
    transition: border-color 0.15s, background 0.15s;
}

.pending-sidebar.drag-over[b-xh892nmjvf] {
    border-right-color: #fd7e14;
    background: rgba(253,126,20,0.12);
    box-shadow: inset 0 0 0 2px rgba(253,126,20,0.35);
}

.sidebar-drop-hint[b-xh892nmjvf] {
    padding: 6px 12px;
    color: #fd7e14;
    font-weight: 600;
    text-align: center;
    background: rgba(253,126,20,0.08);
    border-bottom: 1px solid rgba(253,126,20,0.25);
    animation: pulse-hint-b-xh892nmjvf 1.2s ease-in-out infinite;
}

@keyframes pulse-hint-b-xh892nmjvf {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* Dark mode */
[data-bs-theme=dark] .pending-sidebar[b-xh892nmjvf] {
    background: #0d1117;
}

[data-bs-theme=dark] .sidebar-card[b-xh892nmjvf] {
    background: #1c2128;
    border-color: #30363d;
}

/* 待審核訂單灰化樣式 */
.sidebar-item-wrapper.not-approved[b-xh892nmjvf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.sidebar-item-wrapper.not-approved .sidebar-card[b-xh892nmjvf] {
    border-style: dashed;
}

.scard-pending-badge[b-xh892nmjvf] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #ffc107;
    color: #333;
    margin-bottom: 4px;
}
/* /Components/Pages/Items/ProductionBoard/ProductionBoardWeekView.razor.rz.scp.css */
.board-week-view[b-xg0z1uuxcj] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.board-toolbar[b-xg0z1uuxcj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.toolbar-row[b-xg0z1uuxcj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-divider[b-xg0z1uuxcj] {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 4px;
    flex-shrink: 0;
}

.week-label[b-xg0z1uuxcj] {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

.board-body[b-xg0z1uuxcj] {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 手機版 sidebar 遮罩（桌面隱藏） */
.board-sidebar-backdrop[b-xg0z1uuxcj] {
    display: none;
}

/* 手機版左側頁簽把手（桌面隱藏） */
.sidebar-tab-handle[b-xg0z1uuxcj] {
    display: none;
}

@media (max-width: 767px) {
    .board-toolbar[b-xg0z1uuxcj] {
        padding: 6px 10px;
    }

    .week-label[b-xg0z1uuxcj] {
        min-width: 100px;
    }

    /* 窄螢幕用 wrap 自然斷行替代分隔線語意 */
    .toolbar-divider[b-xg0z1uuxcj] {
        display: none;
    }

    .board-sidebar-backdrop[b-xg0z1uuxcj] {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 99;
        cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */
    }

    /* 左側頁簽把手 */
    .sidebar-tab-handle[b-xg0z1uuxcj] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 98;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-left: none;
        border-radius: 0 8px 8px 0;
        padding: 10px 6px;
        cursor: pointer;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
        line-height: 1;
    }

    .sidebar-tab-handle i[b-xg0z1uuxcj] {
        color: var(--text-secondary);
    }

    .sidebar-tab-label[b-xg0z1uuxcj] {
        font-weight: 600;
        color: var(--text-primary);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: 1px;
    }

    .sidebar-tab-count[b-xg0z1uuxcj] {
        font-weight: 700;
        background: #0d6efd;
        color: #fff;
        border-radius: 8px;
        padding: 1px 4px;
        min-width: 16px;
        text-align: center;
    }
}

[data-bs-theme=dark] .sidebar-tab-handle[b-xg0z1uuxcj] {
    background: #1c2128;
    border-color: #30363d;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35);
}

.board-week-columns[b-xg0z1uuxcj] {
    display: flex;
    flex: 1;
    gap: 6px;
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
}

/* 日模式：單欄置中，限制寬度避免過寬 */
.board-week-columns.view-day[b-xg0z1uuxcj] {
    justify-content: center;
}

.board-week-columns.view-day > :deep(*)[b-xg0z1uuxcj] {
    max-width: 480px;
    flex: 0 0 480px;
}

/* ── 9.1 摘要列 ── */
.board-summary-bar[b-xg0z1uuxcj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.summary-item[b-xg0z1uuxcj] {
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.summary-item:hover[b-xg0z1uuxcj] {
    filter: brightness(0.95);
}

.summary-item:focus-visible[b-xg0z1uuxcj] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.summary-item.is-zero[b-xg0z1uuxcj] {
    opacity: 0.55;
}

.summary-item.is-active[b-xg0z1uuxcj] {
    font-weight: 700;
}

.summary-total[b-xg0z1uuxcj] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.summary-total.is-active[b-xg0z1uuxcj] {
    border-color: var(--text-secondary);
}

.summary-waiting[b-xg0z1uuxcj] {
    background: #fff3cd;
    color: #856404;
}

.summary-waiting.is-active[b-xg0z1uuxcj] {
    border-color: #ffc107;
}

.summary-inprogress[b-xg0z1uuxcj] {
    background: #cfe2ff;
    color: #084298;
}

.summary-inprogress.is-active[b-xg0z1uuxcj] {
    border-color: #0d6efd;
}

.summary-completed[b-xg0z1uuxcj] {
    background: #d1e7dd;
    color: #0f5132;
}

.summary-completed.is-active[b-xg0z1uuxcj] {
    border-color: #198754;
}

/* ── 9.5 交期預警 badge ── */
.board-alert-badge[b-xg0z1uuxcj] {
}

/* ── 深色模式覆寫 ── */
[data-bs-theme=dark] .summary-total[b-xg0z1uuxcj] {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme=dark] .summary-waiting[b-xg0z1uuxcj] {
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
}

[data-bs-theme=dark] .summary-inprogress[b-xg0z1uuxcj] {
    background: rgba(13, 110, 253, 0.18);
    color: #6ea8fe;
}

[data-bs-theme=dark] .summary-completed[b-xg0z1uuxcj] {
    background: rgba(25, 135, 84, 0.18);
    color: #75b798;
}

[data-bs-theme=dark] .summary-item:hover[b-xg0z1uuxcj] {
    filter: brightness(1.15);
}
/* /Components/Pages/Payroll/AttendanceDailyDetailModal.razor.rz.scp.css */
/* ── 日曆容器 ─────────────────────────────────────────────────── */
.attendance-calendar[b-ecg7pfqkyw] {
    user-select: none;
}

.cal-week-header[b-ecg7pfqkyw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 3px;
}

.cal-weekday[b-ecg7pfqkyw] {
    text-align: center;
    font-weight: 600;
    padding: 2px 0;
    color: var(--text-secondary, #6c757d);
}

.cal-grid[b-ecg7pfqkyw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

/* ── 格子基本樣式 ───────────────────────────────────────────── */
.cal-cell[b-ecg7pfqkyw] {
    position: relative;
    min-height: 56px;
    border-radius: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: box-shadow .12s, border-color .12s;
}

.cal-cell:hover[b-ecg7pfqkyw] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13,110,253,.15);
}

.cal-empty[b-ecg7pfqkyw] {
    cursor: default;
    pointer-events: none;
}

.cal-selected[b-ecg7pfqkyw] {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,.25) !important;
}

/* ── 格子內容 ───────────────────────────────────────────────── */
.cal-day-num[b-ecg7pfqkyw] {
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary, #6c757d);
}

.cal-status-badge[b-ecg7pfqkyw] {
    font-weight: 600;
    text-align: center;
    border-radius: 3px;
    padding: 1px 3px;
    margin-top: 2px;
    line-height: 1.3;
}

.cal-hours[b-ecg7pfqkyw] {
    text-align: center;
    color: #0d6efd;
    font-weight: 600;
}

.cal-dirty-dot[b-ecg7pfqkyw] {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fd7e14;
}

/* ── 狀態顏色 — 格子背景 ────────────────────────────────────── */
.cal-unset[b-ecg7pfqkyw]   { background: var(--bg-secondary, #f8f9fa); }
.cal-present[b-ecg7pfqkyw] { background: #d1e7dd; }
.cal-makeup[b-ecg7pfqkyw]  { background: #cfe2ff; }
.cal-absent[b-ecg7pfqkyw]  { background: #f8d7da; }
.cal-sick[b-ecg7pfqkyw]    { background: #fff3cd; }
.cal-personal[b-ecg7pfqkyw]{ background: #fde8cf; }
.cal-annual[b-ecg7pfqkyw]  { background: #d3f4e3; }
.cal-rest[b-ecg7pfqkyw]    { background: #e9ecef; }
.cal-national[b-ecg7pfqkyw]{ background: #e2d9f3; }

/* ── 狀態徽章 ───────────────────────────────────────────────── */
.badge-unset[b-ecg7pfqkyw]    { background:#dee2e6; color:#495057; }
.badge-present[b-ecg7pfqkyw]  { background:#198754; color:#fff; }
.badge-makeup[b-ecg7pfqkyw]   { background:#0d6efd; color:#fff; }
.badge-absent[b-ecg7pfqkyw]   { background:#dc3545; color:#fff; }
.badge-sick[b-ecg7pfqkyw]     { background:#ffc107; color:#212529; }
.badge-personal[b-ecg7pfqkyw] { background:#fd7e14; color:#fff; }
.badge-annual[b-ecg7pfqkyw]   { background:#20c997; color:#fff; }
.badge-rest[b-ecg7pfqkyw]     { background:#adb5bd; color:#fff; }
.badge-national[b-ecg7pfqkyw] { background:#6f42c1; color:#fff; }

/* ── 深色模式 ───────────────────────────────────────────────── */
[data-bs-theme=dark] .cal-unset[b-ecg7pfqkyw]    { background: #2b3035; }
[data-bs-theme=dark] .cal-present[b-ecg7pfqkyw]  { background: #0d3b26; }
[data-bs-theme=dark] .cal-makeup[b-ecg7pfqkyw]   { background: #082840; }
[data-bs-theme=dark] .cal-absent[b-ecg7pfqkyw]   { background: #3b0d12; }
[data-bs-theme=dark] .cal-sick[b-ecg7pfqkyw]     { background: #3b2d00; }
[data-bs-theme=dark] .cal-personal[b-ecg7pfqkyw] { background: #3b1a00; }
[data-bs-theme=dark] .cal-annual[b-ecg7pfqkyw]   { background: #083b29; }
[data-bs-theme=dark] .cal-rest[b-ecg7pfqkyw]     { background: #343a40; }
[data-bs-theme=dark] .cal-national[b-ecg7pfqkyw] { background: #1e1240; }
[data-bs-theme=dark] .cal-day-num[b-ecg7pfqkyw]  { color: #adb5bd; }
/* /Components/Pages/Payroll/PayrollSettings/AttendanceTab.razor.rz.scp.css */
/* 列狀態 — 使用 CSS 變數以支援深色模式 */

/* 已修改但未儲存（dirty） */
.row-dirty > td[b-it4y9elhys] {
    background-color: var(--alert-warning-bg);
}

/* 鎖定（不可編輯） */
.row-locked > td[b-it4y9elhys] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}
/* /Components/Pages/PerformanceReview/Form/PerformanceReviewFormEditorComponent.razor.rz.scp.css */
.performance-form-editor[b-d7pt2x5ifi] {
    padding: 0.5rem 0.25rem;
}

[b-d7pt2x5ifi] .template-info-card {
    border-left: 4px solid var(--primary-blue);
}

[b-d7pt2x5ifi] .template-info-header {
    background-color: var(--bg-tertiary);
}

[b-d7pt2x5ifi] .section-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--text-secondary);
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[b-d7pt2x5ifi] .section-card.section-ungrouped {
    background: var(--bg-tertiary);
    border-left-color: var(--border-color);
}

[b-d7pt2x5ifi] .section-card.section-dragging {
    opacity: 0.5;
    transform: scale(0.99);
}

[b-d7pt2x5ifi] .section-card.section-drop-target {
    border: 2px dashed var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.15);
}

[b-d7pt2x5ifi] .section-title-input {
    font-weight: 600;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding-left: 0;
}

[b-d7pt2x5ifi] .section-title-input:focus {
    border-bottom-color: var(--primary-blue);
    background: var(--bg-primary);
}

[b-d7pt2x5ifi] .section-description-input {
    border: none;
    border-bottom: 1px dotted var(--border-color);
    background: transparent;
    padding-left: 0;
}

[b-d7pt2x5ifi] .section-description-input:focus {
    border-bottom-color: var(--primary-blue);
    background: var(--bg-primary);
}

[b-d7pt2x5ifi] .question-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

[b-d7pt2x5ifi] .question-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    cursor: grabbing;
}

[b-d7pt2x5ifi] .question-card.drop-target {
    border: 2px dashed var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.20);
}

[b-d7pt2x5ifi] .drag-handle {
    cursor: grab;
    user-select: none;
    font-size: 1.1rem;
}

[b-d7pt2x5ifi] .drag-handle:active {
    cursor: grabbing;
}

[b-d7pt2x5ifi] .question-type-select {
    min-width: 120px;
}

[b-d7pt2x5ifi] .btn-square {
    width: 2rem;
    padding: 0.25rem 0;
}
/* /Components/Pages/PerformanceReview/Form/PerformanceReviewPreviewComponent.razor.rz.scp.css */
.preview-section-header[b-vg6tnviz7i] {
    background-color: var(--bg-tertiary);
    border-left-color: var(--primary-blue) !important;
}
/* /Components/Pages/PerformanceReview/Form/PerformanceReviewSectionCardComponent.razor.rz.scp.css */
.empty-section-hint[b-5ux05qt76p] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
/* /Components/Pages/Sales/OrderInventoryCheckModal.razor.rz.scp.css */
.inventory-item[b-n2jpou31kz] {
    border: 1px solid var(--bs-border-color);
    transition: box-shadow 0.15s ease;
}

.inventory-item:hover[b-n2jpou31kz] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.inventory-item.item-insufficient[b-n2jpou31kz] {
    border-left: 3px solid var(--bs-danger);
}

.inventory-item.item-warning[b-n2jpou31kz] {
    border-left: 3px solid var(--bs-warning);
}

.inventory-item.item-sufficient[b-n2jpou31kz] {
    border-left: 3px solid var(--bs-success);
}

.item-header[b-n2jpou31kz] {
    cursor: pointer;
    user-select: none;
}

.item-header:hover[b-n2jpou31kz] {
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.375rem 0.375rem 0 0;
}

.expand-btn[b-n2jpou31kz] {
    width: 18px;
    flex-shrink: 0;
}

.status-icon[b-n2jpou31kz] {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
}

.qty-info[b-n2jpou31kz] {
    min-width: 140px;
    flex-shrink: 0;
}

.bom-child-row[b-n2jpou31kz] {
    border-radius: 0.25rem;
    margin-bottom: 2px;
}

.cursor-pointer[b-n2jpou31kz] {
    cursor: pointer;
}

/* === 品項照片條 === */
.item-photo-strip[b-n2jpou31kz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.item-photo-thumb[b-n2jpou31kz] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    transform-origin: center center;
}

@media (hover: hover) {
    .item-photo-thumb:hover[b-n2jpou31kz] {
        transform: scale(2);
        position: relative;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* 確保父容器允許 overflow，否則 hover 放大會被裁切 */
.bom-children[b-n2jpou31kz],
.inventory-item[b-n2jpou31kz] {
    overflow: visible;
}

/* 預設讓 row 可被定位（不建立 stacking context，因 z-index 為 auto） */
.inventory-item[b-n2jpou31kz],
.bom-child-row[b-n2jpou31kz] {
    position: relative;
}

/* 任何 row 內的縮圖被 hover 時，把整個 row 升到後續 row 之上，
   避免放大圖的延伸部分被下方 row 覆蓋 */
.inventory-item:has(.item-photo-thumb:hover)[b-n2jpou31kz],
.bom-child-row:has(.item-photo-thumb:hover)[b-n2jpou31kz] {
    z-index: 100;
}

/* Dark mode */
[data-bs-theme=dark] .inventory-item[b-n2jpou31kz] {
    border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .inventory-item:hover[b-n2jpou31kz] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .item-header:hover[b-n2jpou31kz] {
    background-color: var(--bs-tertiary-bg);
}
/* /Components/Pages/Sales/QuotationCompositionEditModal.razor.rz.scp.css */
/* ====================================================
   BOM 配方選擇 — 三區段 (快速套用 / 客製化 / 自定義)
   風格與 FilterSectionColumn 對齊
   ==================================================== */

/* ===== 區段容器（水平排列） ===== */
.composition-sections-container[b-f8jslxhy93] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 0.25rem;
}

/* ===== 單一區段 ===== */
.composition-section[b-f8jslxhy93] {
    flex: 1 1 200px;
    min-width: 0;
}

/* ===== 區段標題列 ===== */
.composition-section-header[b-f8jslxhy93] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 4px 4px 0 0;
}

.composition-section-header.section-standard[b-f8jslxhy93] {
    background-color: rgba(var(--primary-blue-rgb), 0.07);
    border-bottom: 2px solid rgba(var(--primary-blue-rgb), 0.3);
}

.composition-section-header.section-customer[b-f8jslxhy93] {
    background-color: rgba(245, 158, 11, 0.07);
    border-bottom: 2px solid rgba(245, 158, 11, 0.35);
}

.composition-section-header.section-custom[b-f8jslxhy93] {
    background-color: rgba(124, 58, 237, 0.07);
    border-bottom: 2px solid rgba(124, 58, 237, 0.3);
}

.composition-section-icon[b-f8jslxhy93] {
    flex-shrink: 0;
}

.composition-section-header.section-standard .composition-section-icon[b-f8jslxhy93],
.composition-section-header.section-standard .composition-section-title[b-f8jslxhy93] {
    color: var(--primary-blue);
}

.composition-section-header.section-customer .composition-section-icon[b-f8jslxhy93],
.composition-section-header.section-customer .composition-section-title[b-f8jslxhy93] {
    color: #b45309;
}

.composition-section-header.section-custom .composition-section-icon[b-f8jslxhy93],
.composition-section-header.section-custom .composition-section-title[b-f8jslxhy93] {
    color: #7c3aed;
}

.composition-section-title[b-f8jslxhy93] {
    font-weight: 600;
    white-space: nowrap;
}

/* ===== 區段內容 ===== */
.composition-section-body[b-f8jslxhy93] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.1rem 0;
}

/* ===== Pill 按鈕基礎樣式 ===== */
.composition-pill[b-f8jslxhy93] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.composition-pill:hover[b-f8jslxhy93] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.06);
    border-color: rgba(var(--primary-blue-rgb), 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 選中狀態 */
.composition-pill.active[b-f8jslxhy93] {
    color: #fff;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(var(--primary-blue-rgb), 0.3);
}

.composition-pill.active:hover[b-f8jslxhy93] {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
    color: #fff;
}

.composition-pill.active .composition-pill-tag[b-f8jslxhy93] {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ===== 客戶變體（統一藍色，靠 tag 區分） ===== */

/* 當前客戶 / 其他客戶 / 自訂模式 — 未選中時皆用基礎樣式，無需額外覆寫 */

/* ===== Pill 內部元素 ===== */
.composition-pill-name[b-f8jslxhy93] {
    font-weight: inherit;
}

/* 客戶標籤 */
.composition-pill-tag[b-f8jslxhy93] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 1rem;
    border: 1px solid transparent;
}

.composition-pill-tag.tag-current[b-f8jslxhy93] {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0a58ca;
    border-color: rgba(13, 110, 253, 0.2);
}

.composition-pill-tag.tag-other[b-f8jslxhy93] {
    background-color: rgba(180, 83, 9, 0.1);
    color: #92400e;
    border-color: rgba(180, 83, 9, 0.15);
}

/* ===== RWD ===== */
@media (max-width: 768px) {
    .composition-sections-container[b-f8jslxhy93] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .composition-section[b-f8jslxhy93] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Sales/SalesTargetManagementModal.razor.rz.scp.css */
/* ════════════════════════════════════════════════
   年份 Tab 捲動區
   ════════════════════════════════════════════════ */
.year-tabs-wrapper[b-edr18enkgz] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
    scrollbar-width: thin;
    align-items: center;
}

.year-tabs-wrapper[b-edr18enkgz]::-webkit-scrollbar {
    height: 4px;
}

.year-tabs-wrapper[b-edr18enkgz]::-webkit-scrollbar-track {
    background: transparent;
}

.year-tabs-wrapper[b-edr18enkgz]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* ── 年份 Tab 按鈕（modal-action-bar 背景為 var(--bg-secondary)，使用 CSS 變數自動適配） ── */
.year-tab-btn[b-edr18enkgz] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 3px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.year-tab-btn:hover[b-edr18enkgz] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-blue);
}

.year-tab-btn.active[b-edr18enkgz] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
    font-weight: 600;
}

.year-tab-btn.add-year-btn[b-edr18enkgz] {
    border-style: dashed;
    padding: 3px 8px;
}

/* ── 新增年度輸入框 ── */
.year-input[b-edr18enkgz] {
    width: 72px !important;
    padding: 2px 6px !important;
    height: auto !important;
}

/* ════════════════════════════════════════════════
   公司整體目標列（使用 CSS 變數，深色模式自動適配）
   ════════════════════════════════════════════════ */
.company-target-row[b-edr18enkgz] {
    background-color: var(--bg-tertiary) !important;
    font-weight: 700;
}

.company-target-row td:first-child[b-edr18enkgz] {
    border-left: 3px solid var(--primary-blue) !important;
}

/* ════════════════════════════════════════════════
   個人目標 toggle 按鈕
   ════════════════════════════════════════════════ */
.personal-toggle-btn[b-edr18enkgz] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 10px;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.personal-toggle-btn:hover[b-edr18enkgz] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── 有資料 badge ── */
.has-data-badge[b-edr18enkgz] {
    background-color: var(--primary-blue) !important;
    padding: 2px 5px;
}

/* ════════════════════════════════════════════════
   未儲存提示
   ════════════════════════════════════════════════ */
.unsaved-indicator[b-edr18enkgz] {
    color: var(--bs-warning, #ffc107);
}

/* ════════════════════════════════════════════════
   Body 容器
   ════════════════════════════════════════════════ */
.target-body-container[b-edr18enkgz] {
    padding: 4px 0;
}
/* /Components/Pages/Suppliers/SupplierEditModal/SupplierTransactionTable.razor.rz.scp.css */
/* 篩選列背景 */
.tx-filter-bar[b-9z2wilberc] {
    background-color: var(--bg-secondary);
}

/* 淨採購額儲存格背景 */
.tx-net-purchase-cell[b-9z2wilberc] {
    background-color: var(--bg-secondary);
}
/* /Components/Pages/Systems/AdvancedRulesModal.razor.rz.scp.css */
/* 進階規則 Modal — 顯示樣式（CSS 變數規範） */

.advanced-rules-modal[b-u28wus78pr] {
    color: var(--text-primary);
}

/* 取代 alert-light（違規 utility） */
.advanced-preset-bar[b-u28wus78pr] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

/* 取代 thead 的 table-light / bg-light */
.advanced-thead[b-u28wus78pr] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.advanced-thead th[b-u28wus78pr] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* 深色模式覆寫 */
[data-bs-theme=dark] .advanced-preset-bar[b-u28wus78pr] {
    background-color: var(--bg-tertiary);
}
/* /Components/Pages/Systems/DatabaseBackup/BackupDestinationEditModal.razor.rz.scp.css */
/* 配合 GenericFormComponent 的 ::deep .form-control { height: 32px } 規則，
   讓本機路徑 input-group 內的「瀏覽」按鈕與 input 等高。
   參見：Components/Pages/Systems/SystemParameter/CodeSettingsTab.razor.css 的相同模式 */
[b-8rhux4j7xr] .input-group .btn {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/Pages/Systems/ErrorLogDetailViewModal.razor.rz.scp.css */
/* ErrorLogDetailViewModal — 深色模式相容樣式 */
/* 禁止使用 bg-light / bg-dark / bg-success 等 Bootstrap 背景 utility */

/* ===== Pre 區塊 ===== */

/* 通用 pre 區塊（錯誤訊息、內部例外、額外資料） */
.error-pre-block[b-2g3ab6vert] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 0;
}

/* 堆疊追蹤 pre 區塊（視覺上與一般 pre 區分） */
.error-pre-block-code[b-2g3ab6vert] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 0;
}

/* ===== 其他元件 ===== */

/* 解決備註區塊 */
.error-note-block[b-2g3ab6vert] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem;
    border-radius: var(--radius-md);
}

/* UserAgent 次要文字 */
.error-text-secondary[b-2g3ab6vert] {
    color: var(--text-secondary);
}
/* /Components/Pages/Systems/ReportDesigner/DesignerBlockWrapper.razor.rz.scp.css */
.block-wrapper[b-c0mfnbyhzm] {
    position: relative;
    margin: 2px 0;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.block-wrapper:hover[b-c0mfnbyhzm] {
    border-color: var(--bg-tertiary);
}

.block-wrapper.selected[b-c0mfnbyhzm] {
    border-color: var(--primary-blue);
    background: rgba(30, 100, 200, 0.04);
    box-shadow: 0 0 0 1px rgba(30, 100, 200, 0.15);
}

/* 控制列 */
.block-controls[b-c0mfnbyhzm] {
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 22px;
    padding: 0 4px;
    z-index: 5;
}

.block-type-label[b-c0mfnbyhzm] {
    color: var(--primary-white);
    background: var(--primary-blue);
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    line-height: 1.4;
}

.block-actions[b-c0mfnbyhzm] {
    display: flex;
    gap: 2px;
}

.block-action-btn[b-c0mfnbyhzm] {
    border: none;
    background: var(--primary-blue);
    color: var(--primary-white);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
}

.block-action-btn:hover[b-c0mfnbyhzm] {
    opacity: 0.85;
}

.block-action-btn.block-delete-btn[b-c0mfnbyhzm] {
    background: transparent;
    color: var(--bs-danger, #dc3545);
    border: 1px solid var(--bs-danger, #dc3545);
    font-weight: bold;
}

.block-action-btn.block-delete-btn:hover[b-c0mfnbyhzm] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
    opacity: 1;
}

.block-content[b-c0mfnbyhzm] {
    min-height: 20px;
}

/* 拖拉排序視覺反饋 */
.block-wrapper.drag-over[b-c0mfnbyhzm] {
    border-top: 3px solid var(--primary-blue);
    margin-top: -1px;
}

/* 欄位拖入提示（可接受欄位 drop 的區塊） */
.block-wrapper.field-drop-target[b-c0mfnbyhzm] {
    outline: 2px dashed rgba(30, 100, 200, 0.4);
    outline-offset: -2px;
    background: rgba(30, 100, 200, 0.03);
}

.block-wrapper[draggable="true"][b-c0mfnbyhzm] {
    cursor: grab;
}

.block-wrapper[draggable="true"]:active[b-c0mfnbyhzm] {
    cursor: grabbing;
    opacity: 0.7;
}
/* /Components/Pages/Systems/ReportDesigner/DesignerContextMenu.razor.rz.scp.css */
/* ===== 右鍵選單（固定定位）— 風格對齊 GenericTableComponent ===== */

.ctx-overlay[b-uo39d39vqk] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}

.ctx-menu[b-uo39d39vqk] {
    position: fixed;
    z-index: 1041;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
    user-select: none;
}

.ctx-item[b-uo39d39vqk] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    line-height: 1.4;
    transition: background-color 0.12s;
}

.ctx-item:hover:not(:disabled):not(.disabled)[b-uo39d39vqk] {
    background: var(--bg-secondary);
}

.ctx-item:disabled[b-uo39d39vqk],
.ctx-item.disabled[b-uo39d39vqk] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.ctx-icon[b-uo39d39vqk] {
    width: 18px;
    text-align: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.ctx-label[b-uo39d39vqk] {
    flex: 1;
}

.ctx-arrow[b-uo39d39vqk] {
    margin-left: 12px;
    opacity: 0.5;
}

.ctx-divider[b-uo39d39vqk] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 子選單 */
.ctx-submenu[b-uo39d39vqk] {
    display: none;
    position: absolute;
    left: 100%;
    top: -4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
}

.ctx-has-sub:hover > .ctx-submenu[b-uo39d39vqk] {
    display: block;
}

/* 深色模式 */
[data-bs-theme=dark] .ctx-menu[b-uo39d39vqk],
[data-bs-theme=dark] .ctx-submenu[b-uo39d39vqk] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* /Components/Pages/Systems/ReportDesigner/DesignerFieldPanel.razor.rz.scp.css */
.field-panel-header[b-d4lhhgc7rw] {
    padding: 8px 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.field-panel-search[b-d4lhhgc7rw] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.field-panel-empty[b-d4lhhgc7rw] {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-secondary);
}

.field-section-header[b-d4lhhgc7rw] {
    padding: 4px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-item[b-d4lhhgc7rw] {
    padding: 5px 12px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--bg-tertiary);
    transition: background 0.15s;
}

.field-item:hover[b-d4lhhgc7rw] {
    background: var(--bg-tertiary);
}

.field-item:active[b-d4lhhgc7rw] {
    cursor: grabbing;
    opacity: 0.8;
}

.field-item-name[b-d4lhhgc7rw] {
    font-weight: 500;
}

.field-item-type[b-d4lhhgc7rw] {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
}
/* /Components/Pages/Systems/ReportDesigner/DesignerPropertyPanel.razor.rz.scp.css */
.property-panel-header[b-dmmalzhb55] {
    padding: 8px 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.property-panel-body[b-dmmalzhb55] {
    padding: 8px 12px;
}

.prop-group[b-dmmalzhb55] {
    margin-bottom: 10px;
}

.prop-label[b-dmmalzhb55] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: block;
}

.col-prop-item[b-dmmalzhb55] {
    padding: 4px;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    border-radius: 3px;
}

.kv-row-divider[b-dmmalzhb55] {
    border-top: 1px dashed var(--border-color);
    margin: 6px 0 4px;
    padding-top: 2px;
}

.kv-row-divider-label[b-dmmalzhb55] {
    color: var(--text-secondary);
    font-weight: 600;
}
/* /Components/Pages/Systems/ReportDesigner/HeaderBlockView.razor.rz.scp.css */
/* 標頭左側內容 */
.header-left-image-placeholder[b-u48ljy2j6m] {
    width: 60px;
    height: 40px;
    border: 1px dashed #999;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    margin-bottom: 4px;
    background: #f8f8f8;
}

.header-left-line[b-u48ljy2j6m] {
    white-space: nowrap;
    color: #555;
}

/* === Inline editing: ghost inputs that blend with preview === */

.header-line-wrapper[b-u48ljy2j6m] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.5em;
}

.header-center-line[b-u48ljy2j6m] {
    justify-content: center;
}

/* 透明輸入框 — 平時看起來像純文字 */
.header-ghost-input[b-u48ljy2j6m] {
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0 1px;
    margin: 0;
    outline: none;
    background: transparent;
    color: #000;
    font-family: inherit;
    line-height: 1.4;
}

.header-ghost-input[b-u48ljy2j6m]::placeholder {
    color: #bbb;
    font-style: italic;
}

/* hover 時顯示底線提示可編輯 */
.header-ghost-input:hover[b-u48ljy2j6m] {
    border-bottom-color: #ccc;
}

/* focus 時顯示藍色底線 */
.header-ghost-input:focus[b-u48ljy2j6m] {
    border-bottom-color: var(--primary-blue, #1e64c8);
    background: rgba(30, 100, 200, 0.02);
}

.header-ghost-center[b-u48ljy2j6m] {
    text-align: center;
}

/* === 行操作按鈕 — 預設隱藏，hover 才出現 === */

.header-line-tools[b-u48ljy2j6m] {
    display: none;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 1px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 1px 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 2;
}

.header-center-tools[b-u48ljy2j6m] {
    position: static;
    transform: none;
    display: none;
    justify-content: center;
    margin-top: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.header-line-wrapper:hover .header-line-tools[b-u48ljy2j6m],
.header-line-wrapper:focus-within .header-line-tools[b-u48ljy2j6m] {
    display: flex;
}

.header-line-del[b-u48ljy2j6m] {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-line-del:hover[b-u48ljy2j6m] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

.header-size-input[b-u48ljy2j6m] {
    width: 36px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0 2px;
    text-align: center;
    background: #fff;
    color: #333;
    font-size: 8pt;
}

.header-size-input:focus[b-u48ljy2j6m] {
    border-color: var(--primary-blue, #1e64c8);
    outline: none;
}

.header-bold-toggle[b-u48ljy2j6m] {
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: transparent;
    color: #666;
    font-size: 9pt;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-bold-toggle.active[b-u48ljy2j6m] {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* === 新增行按鈕 — 低調 === */

.header-add-line-btn[b-u48ljy2j6m] {
    border: 1px dashed #ccc;
    border-radius: 3px;
    background: transparent;
    color: #aaa;
    width: 100%;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.header-add-line-btn:hover[b-u48ljy2j6m] {
    border-color: var(--primary-blue, #1e64c8);
    color: var(--primary-blue, #1e64c8);
    background: rgba(30, 100, 200, 0.03);
}

/* 空區域提示 */
.header-empty-zone[b-u48ljy2j6m] {
    color: #ccc;
    font-size: 8pt;
    font-style: italic;
}
/* /Components/Pages/Systems/ReportDesigner/InsertTableModal.razor.rz.scp.css */
.insert-table-form[b-lwj7xtqr1x] {
    padding: 4px 0;
}
/* /Components/Pages/Systems/ReportDesigner/KeyValueBlockView.razor.rz.scp.css */
/* 畫布內的編輯控件 — 畫布始終為白底，需固定背景色 */
.kv-inline-input[b-7rfvvbrojw] {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 3px;
    outline: none;
    background: #fff;
    color: #000;
}

.kv-inline-input:focus[b-7rfvvbrojw] {
    border-color: var(--primary-blue);
}

.kv-inline-select[b-7rfvvbrojw] {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 3px;
    width: 100%;
    outline: none;
    background: #fff;
    color: #000;
}

.kv-actions[b-7rfvvbrojw] {
    text-align: right;
}

.kv-remove-btn[b-7rfvvbrojw] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 50%;
    background: #fff;
    color: var(--bs-danger, #dc3545);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.kv-remove-btn:hover[b-7rfvvbrojw] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

.kv-empty-hint[b-7rfvvbrojw] {
    text-align: center;
    color: #999;
    padding: 8px;
    font-size: 9pt;
    border: 1px dashed #ccc;
    border-radius: 3px;
}

.kv-row-add-pair-btn[b-7rfvvbrojw] {
    width: 18px;
    height: 18px;
    border: 1px dashed #aaa;
    border-radius: 3px;
    background: transparent;
    color: #888;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.kv-row-add-pair-btn:hover[b-7rfvvbrojw] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    opacity: 1;
}
/* /Components/Pages/Systems/ReportDesigner/ReportDesignerContent.razor.rz.scp.css */
/* ===== 報表設計器佈局 ===== */

.report-designer[b-c4koiqj538] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-tertiary);
    overflow: hidden;
}

/* 頂部列 */
.designer-topbar[b-c4koiqj538] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.designer-name-input[b-c4koiqj538] {
    width: 200px;
    font-weight: 600;
}

/* 工具列 */
.designer-toolbar[b-c4koiqj538] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.toolbar-label[b-c4koiqj538] {
    color: var(--text-secondary);
    margin-right: 4px;
}

/* 主要區域 */
.designer-main[b-c4koiqj538] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左側欄位面板 */
.designer-field-panel[b-c4koiqj538] {
    width: 200px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

/* 中間畫布容器 */
.designer-canvas-container[b-c4koiqj538] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    justify-content: center;
}

/* 文件畫布（模擬紙張，始終為白底黑字以模擬列印效果，寬高/padding 由 inline style 動態控制） */
.designer-canvas[b-c4koiqj538] {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    outline: none;
}

/* 頁面設定面板 */
.designer-page-settings[b-c4koiqj538] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.designer-page-settings label[b-c4koiqj538] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.designer-page-settings .form-select[b-c4koiqj538],
.designer-page-settings .form-control[b-c4koiqj538] {
    width: auto;
    display: inline-block;
}

.designer-page-settings .margin-input[b-c4koiqj538] {
    width: 70px;
}

/* 屬性面板空狀態 */
.property-panel-placeholder-header[b-c4koiqj538] {
    padding: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.property-panel-placeholder-body[b-c4koiqj538] {
    padding: 16px 12px;
    color: var(--text-secondary);
}

.shortcut-tips[b-c4koiqj538] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.shortcut-tip[b-c4koiqj538] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.shortcut-tip kbd[b-c4koiqj538] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: monospace;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}

[data-bs-theme=dark] .designer-canvas[b-c4koiqj538] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.designer-empty-hint[b-c4koiqj538] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
}

/* 右側屬性面板 */
.designer-property-panel[b-c4koiqj538] {
    width: 260px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

/* Debug Badge */
.designer-debug-badge[b-c4koiqj538] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tertiary);
    color: var(--color-primary);
    font-family: monospace;
    padding: 2px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    z-index: 9999;
    cursor: pointer;
    user-select: text;
}
/* /Components/Pages/Systems/ReportDesigner/ReportDesignerPage.razor.rz.scp.css */
/* 獨立頁面模式下確保設計器填滿視窗 */
[b-6q2nwiymi9] .report-designer {
    height: 100vh;
}
/* /Components/Pages/Systems/ReportDesigner/SignatureBlockView.razor.rz.scp.css */
/* 畫布內的編輯控件 — 畫布始終為白底 */
.sig-label-input[b-16t9v8z215] {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 4px;
    text-align: center;
    width: 80%;
    outline: none;
    background: #fff;
    color: #000;
}

.sig-label-input:focus[b-16t9v8z215] {
    border-color: var(--primary-blue);
}

.sig-remove-btn[b-16t9v8z215] {
    position: absolute;
    top: -4px;
    right: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 50%;
    background: #fff;
    color: var(--bs-danger, #dc3545);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

.sig-remove-btn:hover[b-16t9v8z215] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}
/* /Components/Pages/Systems/ReportDesigner/TableBlockView.razor.rz.scp.css */
.table-block[b-pdjb78dm24] {
    min-height: 40px;
}

.table-empty-hint[b-pdjb78dm24] {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

/* === 表格工具列 === */

.table-toolbar[b-pdjb78dm24] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    margin-bottom: 3px;
    background: #f0f4fa;
    border: 1px solid #d5dde8;
    border-radius: 4px;
    flex-wrap: wrap;
}

.table-toolbar-btn[b-pdjb78dm24] {
    border: 1px solid #c5cdd8;
    border-radius: 3px;
    background: #fff;
    color: #444;
    font-size: 8pt;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.table-toolbar-btn:hover[b-pdjb78dm24] {
    background: #e8eef6;
    border-color: #a0b0c8;
}

.table-toolbar-btn.primary[b-pdjb78dm24] {
    background: var(--primary-blue, #1e64c8);
    color: #fff;
    border-color: var(--primary-blue, #1e64c8);
}

.table-toolbar-btn.primary:hover[b-pdjb78dm24] {
    opacity: 0.9;
}

.table-toolbar-btn.danger[b-pdjb78dm24] {
    color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
}

.table-toolbar-btn.danger:hover[b-pdjb78dm24] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

.table-toolbar-hint[b-pdjb78dm24] {
    font-size: 8pt;
    color: #888;
}

.table-scroll-wrapper[b-pdjb78dm24] {
    position: relative;
}

/* 表格框線模擬列印輸出，固定黑色（畫布始終為白底） */
.designer-table.with-border th[b-pdjb78dm24],
.designer-table.with-border td[b-pdjb78dm24] {
    border: 1px solid #000;
}

.table-header-cell[b-pdjb78dm24] {
    position: relative;
    cursor: pointer;
}

.table-header-cell:hover[b-pdjb78dm24] {
    background-color: rgba(30, 100, 200, 0.05);
}

/* 畫布內的編輯控件 */
.table-header-input[b-pdjb78dm24] {
    width: 100%;
    border: 1px solid var(--primary-blue);
    outline: none;
    padding: 0 2px;
    font-weight: bold;
    background: #fff;
    color: #000;
}

/* === 欄位 Resize Handle === */

.col-resize-handle[b-pdjb78dm24] {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    background: transparent;
}

.col-resize-handle[b-pdjb78dm24]::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 2px;
    width: 2px;
    height: 60%;
    background: transparent;
    border-radius: 1px;
    transition: background 0.15s;
}

.col-resize-handle:hover[b-pdjb78dm24]::after,
.col-resize-handle.active[b-pdjb78dm24]::after {
    background: var(--primary-blue, #1e64c8);
}

.col-resize-handle:hover[b-pdjb78dm24],
.col-resize-handle.active[b-pdjb78dm24] {
    background: rgba(30, 100, 200, 0.08);
}

/* === 按鈕 === */

.col-add-btn[b-pdjb78dm24] {
    border: 1px dashed var(--primary-blue);
    background: transparent;
    color: var(--primary-blue);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-add-btn:hover[b-pdjb78dm24] {
    background: var(--bg-tertiary);
}

/* 欄位綁定選擇器 */
.col-field-selector[b-pdjb78dm24] {
    margin-top: 2px;
}

.col-field-select[b-pdjb78dm24] {
    width: 100%;
    padding: 0 2px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: #fff;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
}

.col-field-select:focus[b-pdjb78dm24] {
    border-color: var(--primary-blue);
    outline: none;
}

/* 拖放高亮 */
.table-header-cell.col-drag-over[b-pdjb78dm24] {
    background-color: rgba(30, 100, 200, 0.15) !important;
    outline: 2px dashed var(--primary-blue);
    outline-offset: -2px;
}

/* 未綁定欄位警示 */
.col-unbound[b-pdjb78dm24] {
    background-color: rgba(255, 193, 7, 0.1);
}

.col-unbound-icon[b-pdjb78dm24] {
    color: #ffc107;
    margin-left: 3px;
    vertical-align: middle;
}

/* 欄位選取高亮 */
.table-header-cell.col-selected[b-pdjb78dm24] {
    background-color: rgba(30, 100, 200, 0.15) !important;
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

/* 合併徽章 */
.col-merge-badge[b-pdjb78dm24] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--primary-blue);
    color: #fff;
    font-weight: bold;
    margin-left: 3px;
    padding: 0 2px;
    vertical-align: middle;
}
/* /Components/Pages/Systems/ReportDesigner/TextBlockView.razor.rz.scp.css */
.text-block-display[b-ft5q92rfnp] {
    padding: 2px 4px;
    min-height: 1.2em;
    cursor: text;
}

.text-block-display:hover[b-ft5q92rfnp] {
    background: #f0f0f0;
}

/* 畫布內的編輯控件 — 畫布始終為白底 */
.text-block-input[b-ft5q92rfnp] {
    width: 100%;
    border: 1px solid var(--primary-blue);
    outline: none;
    padding: 2px 4px;
    background: #fff;
    color: #000;
    border-radius: 2px;
}
/* /Components/Pages/Systems/SystemParameter/ApiIntegrationSettingsTab.razor.rz.scp.css */
/* 到期天數輸入框固定寬度（rem，跟隨字級縮放；不用 px） */
.key-expiry-input[b-d41ya8mbwq] {
    width: 10rem;
}

/* 權限範圍動作 pill — 用 CSS 變數確保深色/淺色皆可讀（比照 module-page-badge 慣例） */
.scope-action-badge[b-d41ya8mbwq] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0 .25rem .25rem 0;
    padding: .25rem .6rem;
    border-radius: 1rem;
    cursor: pointer;
    user-select: none;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.scope-action-badge.is-granted[b-d41ya8mbwq] {
    background-color: var(--bs-success);
    color: #fff;
    border-color: var(--bs-success);
}

.scope-action-badge.is-disabled[b-d41ya8mbwq] {
    cursor: not-allowed;
    opacity: .6;
}
/* /Components/Pages/Systems/SystemParameter/CodeSettingsTab.razor.rz.scp.css */
/* 停用狀態的列 — 使用 CSS 變數以同時支援淺色與深色模式 */
.row-disabled > td[b-a06j0y02zf] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* 工具列：搜尋 + 全部啟用 / 全部停用，sticky 在 Tab 按鈕列下方
   top: 2.5rem 略小於 Tab 列高度（桌面 ~2.7rem、行動版 ~2.9rem），讓工具列上緣與 Tab 列底部重疊；
   Tab 列 z-index: 20 高於工具列 z-index: 10，會覆蓋重疊區，視覺上看起來工具列剛好接在 Tab 列下方，
   完全沒有縫隙能讓底下捲動的資料露出。
   背景色使用 --bs-modal-bg（Bootstrap modal body 的實際背景），確保與下方 .modal-body 一致，
   不會因深淺色差讓使用者誤以為是半透明。 */
.code-settings-toolbar[b-a06j0y02zf] {
    position: sticky;
    top: 2.5rem;
    z-index: 10;
    background-color: var(--bs-modal-bg, var(--bg-primary, #fff));
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.code-settings-toolbar .code-settings-search[b-a06j0y02zf] {
    flex: 1 1 220px;
    min-width: 200px;
}

/* 暗色模式下圖示框背景與輸入框融合，視覺對齊 */
.code-settings-toolbar[b-a06j0y02zf]  .input-group-text {
    background-color: transparent;
}

/* 工具列三個控件（搜尋框 / 全部啟用 / 全部停用）的高度一致性,
   由 SearchInputComponent.razor.css 的高度契約 + GenericButtonComponent Normal 標準高
   共同保證(皆 ≈ 38px),本檔不再逐元素 pin 高度,改以 align-items: center 置中對齊。 */
/* /Components/Pages/Systems/SystemParameter/ModuleManagementTab.razor.rz.scp.css */
/* 頂部搜尋列：sticky 固定於 modal body 捲動容器頂端；
   背景用 --bs-modal-bg 與 .modal-body 一致（勿用 bg-body，避免深淺色差顯半透明） */
.module-search-bar[b-1f168ytmem] {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--bs-modal-bg, var(--bg-primary, #fff));
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.module-search-input[b-1f168ytmem] {
    max-width: 360px;
}

/* 暗色模式下放大鏡框背景與輸入框融合 */
.module-search-bar[b-1f168ytmem]  .input-group-text {
    background-color: transparent;
}

/* 三元素（放大鏡 / 輸入框 / X）統一 32px 高度，消除左右比輸入框高的落差 */
.module-search-bar[b-1f168ytmem]  .input-group-text,
.module-search-bar[b-1f168ytmem]  .btn {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.module-search-bar[b-1f168ytmem]  .form-control {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}

.module-pages-list[b-1f168ytmem] {
    line-height: 1.3;
}

/* 子頁面 badge — 使用 CSS 變數以同時支援淺色／深色主題 */
.module-page-badge[b-1f168ytmem] {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
    font-weight: normal;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* 已停用的子頁面：刪除線 + 較淡顏色（仍可讀） */
.module-page-badge.is-disabled[b-1f168ytmem] {
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.75;
}

/* 危險頁面：紅色邊框 */
.module-page-badge.is-danger[b-1f168ytmem] {
    border-color: var(--bs-danger);
}

/* 模組整體停用時，子頁面 badge 整體變淡（視覺暗示「需先開啟模組」） */
.module-page-badge.is-module-off[b-1f168ytmem] {
    opacity: 0.5;
}
/* /Components/Pages/Warehouse/MaterialIssueOrderSourceTab.razor.rz.scp.css */
/* ===== 訂單來源表格 ===== */

.order-source-table thead th[b-p6fxv5ew29] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
    font-weight: 600;
}

.order-source-table tbody td[b-p6fxv5ew29] {
    color: var(--text-primary);
    border-color: var(--border-color);
    vertical-align: middle;
}

.product-code[b-p6fxv5ew29] {
    color: var(--primary-blue);
}

/* ===== 空白狀態 ===== */

.empty-state[b-p6fxv5ew29] {
    color: var(--text-secondary);
}

/* ===== 深色模式 ===== */

[data-bs-theme=dark] .order-source-table tbody tr:hover td[b-p6fxv5ew29] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-bs-theme=dark] .order-source-table[b-p6fxv5ew29] {
    --bs-table-bg: var(--bg-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--bg-tertiary);
}
/* /Components/Shared/BusinessFlow/BusinessFlowModalComponent.razor.rz.scp.css */
.business-flow-container[b-qxf23r05j1] {
    min-height: 200px;
    max-height: 75vh;
    display: flex;
    /* safe 關鍵字: 內容 fit 時走 center, 超出時自動退回 start,
       避免 SystemOverview (19 節點) 等大圖頂部被推出可視範圍 (G-BizFlow-10) */
    justify-content: safe center;
    align-items: safe center;
    overflow: auto;
}

/* Mermaid SVG 動態 inject,Blazor scoped CSS 無法穿透;
   若要客製樣式須用 mermaid themeVariables 或 global CSS。

   ⚠️ max-width: none (Round 4 修正, G-BizFlow-11):
   原本用 max-width:100% 會把 SystemOverview 等大圖縮放成 fit 容器寬度,
   SVG transform 連帶把所有文字按比例縮小,造成「字型不符 1rem」視覺錯覺。
   實際 themeVariables 與 global CSS 設的 font-size:1rem 都正確,只是被 SVG 縮放掩蓋。
   改 max-width:none 後 Mermaid 用自然尺寸渲染, 大圖橫向溢出,
   容器既有 overflow:auto 提供水平捲動。文字終於以 1rem 真實大小顯示。 */
.business-flow-container > svg[b-qxf23r05j1] {
    max-width: none;
    height: auto;
}

/* Phase 12-D (2026-05-28):
   搜尋區與按鈕區合併到單列 (HeaderButtons slot), SearchContent slot 不再使用,
   故 Phase 12-C 加的 ::deep .modal-search-bar 灰底 rule 已移除。

   覆寫 .modal-action-bar 的 justify-content: 預設 BaseModal 是 flex-end (按鈕靠右),
   本元件要 flex-start (搜尋容器置左 + ms-auto wrapper 推按鈕到右), 用 !important 強制蓋過
   (BaseModalComponent.razor.css 既有 ::deep .modal-action-bar 同特異度 0,1,1, scoped CSS 載入順序不保證)。
   align-items: center 維持與 BaseModal 一致。 */
[b-qxf23r05j1] .modal-action-bar {
    justify-content: flex-start !important;
    align-items: center;
}

/* 手機版 dropdown 不被裁切:
   BaseModalComponent.razor.css 在 @media (max-width: 576px) 內套 overflow-y: hidden, 會把 dropdown menu 裁掉。
   本元件 scoped override 改 overflow-y: visible (僅 BusinessFlow 內 modal 生效, 不影響其他 modal)。
   overflow-x 維持 auto 保留橫向捲動單列工具列行為。 */
@media (max-width: 576px) {
    [b-qxf23r05j1] .modal-action-bar {
        overflow-y: visible !important;
        overflow-x: auto;
    }
}
/* /Components/Shared/Chart/ChartExportColumnPickerModal.razor.rz.scp.css */
/* ===== 詳細式 CSV 匯出欄位挑選 ===== */
.cpk-list[b-fohxlcpnvk] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 50vh;
    overflow-y: auto;
}

.cpk-row[b-fohxlcpnvk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    background-color: var(--bg-primary);
}

.cpk-check[b-fohxlcpnvk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.cpk-check span[b-fohxlcpnvk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpk-lock[b-fohxlcpnvk] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.cpk-actions[b-fohxlcpnvk] {
    display: inline-flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

.cpk-btn[b-fohxlcpnvk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cpk-btn:hover:not(:disabled)[b-fohxlcpnvk] {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.08);
}

.cpk-btn:disabled[b-fohxlcpnvk] {
    opacity: 0.4;
    cursor: default;
}
/* /Components/Shared/Chart/GenericChartModalComponent.razor.rz.scp.css */
/* ===== 圖表 Modal 樣式 ===== */

/* ===== 頁籤 - 單行水平滾動 + 箭頭導覽 ===== */
.chart-tab-scroll-wrapper[b-m2hng3xjgf] {
    position: relative;
    margin-bottom: 0.75rem;
}

.chart-tab-btn-group[b-m2hng3xjgf] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chart-tab-btn-group[b-m2hng3xjgf]::-webkit-scrollbar {
    display: none;
}

/* 左右箭頭按鈕 */
.chart-scroll-arrow[b-m2hng3xjgf] {
    position: absolute;
    top: 0;
    bottom: 0.5rem; /* 對齊 border-bottom 上方 */
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 2;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 0;
}

.chart-scroll-arrow.visible[b-m2hng3xjgf] {
    opacity: 1;
    visibility: visible;
}

.chart-scroll-arrow-left[b-m2hng3xjgf] {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary) 60%, transparent);
    padding-right: 0.5rem;
}

.chart-scroll-arrow-right[b-m2hng3xjgf] {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary) 60%, transparent);
    padding-left: 0.5rem;
}

/* Tab 按鈕基礎樣式 */
.chart-tab-btn[b-m2hng3xjgf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-tab-btn:hover[b-m2hng3xjgf] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    border-color: var(--primary-blue);
}

.chart-tab-btn.active[b-m2hng3xjgf] {
    color: #fff;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 600;
}

.chart-tab-btn.active:hover[b-m2hng3xjgf] {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
    color: #fff;
}

/* ===== 圖表面板 ===== */
.chart-panel[b-m2hng3xjgf] {
    position: relative;
}

/* ===== 圖表頂部工具列（類型切換 + 圖片匯出） ===== */
.chart-top-toolbar[b-m2hng3xjgf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    min-height: 2rem;
}

/* ===== 圖表類型切換 - 輕量圖標按鈕 ===== */
.chart-type-switcher[b-m2hng3xjgf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

/* ===== 期間選擇器（CSV 匯出用） ===== */
.chart-period-row[b-m2hng3xjgf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.chart-period-label[b-m2hng3xjgf] {
    color: var(--text-secondary);
    white-space: nowrap;
    margin: 0;
}

.chart-period-select[b-m2hng3xjgf] {
    max-width: 220px;
}

/* ===== 下鑽面板右側工具（下載類型 + 下載 + 欄位 + 關閉） ===== */
.chart-detail-tools[b-m2hng3xjgf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chart-export-select[b-m2hng3xjgf] {
    width: auto;
    min-width: 88px;
}

.chart-export-btn[b-m2hng3xjgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chart-type-btn[b-m2hng3xjgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chart-type-btn:hover[b-m2hng3xjgf] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.08);
    border-color: var(--primary-blue);
}

.chart-type-btn.active[b-m2hng3xjgf] {
    color: #fff;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.chart-type-btn.active:hover[b-m2hng3xjgf] {
    background-color: var(--primary-blue-hover);
}

/* ===== 圖表本體 ===== */
.chart-body[b-m2hng3xjgf] {
    height: 280px;
}

/* ===== 點擊提示 - 浮層 ===== */
.chart-click-hint[b-m2hng3xjgf] {
    text-align: right;
    color: var(--text-light);
    margin-top: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.chart-click-hint:hover[b-m2hng3xjgf] {
    opacity: 1;
}

/* ===== Drill-down 明細面板 ===== */
.chart-detail-panel[b-m2hng3xjgf] {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
    animation: chartDetailSlideIn-b-m2hng3xjgf 0.2s ease-out;
}

@keyframes chartDetailSlideIn-b-m2hng3xjgf {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-detail-header[b-m2hng3xjgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.chart-detail-title[b-m2hng3xjgf] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chart-detail-title i[b-m2hng3xjgf] {
    color: var(--primary-blue);
}

.chart-detail-count[b-m2hng3xjgf] {
    font-weight: 400;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.25rem;
}

.chart-detail-close[b-m2hng3xjgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chart-detail-close:hover[b-m2hng3xjgf] {
    background-color: var(--bg-tertiary);
    color: var(--danger-color);
}

/* 明細表格容器 - 覆寫 InteractiveTableComponent 的沉重樣式 */
.chart-detail-table[b-m2hng3xjgf] {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.375rem;
    border: 1px solid var(--border-light);
}

/* 覆寫 InteractiveTableComponent 在 drill-down 內的樣式 */
.chart-detail-table[b-m2hng3xjgf]  .interactive-table-container {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.chart-detail-table[b-m2hng3xjgf]  .table thead th {
    padding: 0.25rem 0.5rem;
}

.chart-detail-table[b-m2hng3xjgf]  .table tbody td {
    padding: 0.2rem 0.5rem;
}

/* 明細表格自訂 scrollbar */
.chart-detail-table[b-m2hng3xjgf]::-webkit-scrollbar {
    width: 5px;
}

.chart-detail-table[b-m2hng3xjgf]::-webkit-scrollbar-track {
    background: transparent;
}

.chart-detail-table[b-m2hng3xjgf]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chart-detail-table[b-m2hng3xjgf]::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ===== 手機版響應式 ===== */
@media (max-width: 576px) {
    .chart-tab-btn[b-m2hng3xjgf] {
        padding: 0.2rem 0.6rem;
    }

    /* 手機版隱藏箭頭，觸控滑動即可 */
    .chart-scroll-arrow[b-m2hng3xjgf] {
        display: none;
    }

    .chart-type-btn[b-m2hng3xjgf] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .chart-body[b-m2hng3xjgf] {
        height: 240px;
    }

    .chart-detail-table[b-m2hng3xjgf] {
        max-height: 160px;
    }
}
/* /Components/Shared/Communication/NotificationBell.razor.rz.scp.css */
/* ===== 通知鈴鐺按鈕 ===== */

.notification-bell-container[b-pownso9n94] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-bell-btn[b-pownso9n94] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: var(--fs-md);
    transition: background-color 0.2s, color 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-bell-btn:hover[b-pownso9n94] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.notification-bell-badge[b-pownso9n94] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 1px 5px;
    font-weight: bold;
    min-width: 16px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* ===== 背景遮罩 ===== */

.notification-backdrop[b-pownso9n94] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    cursor: default;
}

/* ===== 通知面板 ===== */

.notification-panel[b-pownso9n94] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 520px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1041;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notificationPanelIn-b-pownso9n94 0.2s ease;
}

@keyframes notificationPanelIn-b-pownso9n94 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 面板標頭 ===== */

.notification-panel-header[b-pownso9n94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.panel-title[b-pownso9n94] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.unread-count-text[b-pownso9n94] {
    font-weight: 400;
    color: var(--text-secondary);
}

.panel-header-actions[b-pownso9n94] {
    display: flex;
    gap: 4px;
}

.panel-action-btn[b-pownso9n94] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.panel-action-btn:hover[b-pownso9n94] {
    background-color: var(--bg-primary);
    color: var(--primary-blue);
}

/* ===== 面板內容 ===== */

.notification-panel-body[b-pownso9n94] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.notification-empty-state[b-pownso9n94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    color: var(--text-secondary);
    gap: 8px;
}

.notification-empty-state .bi[b-pownso9n94] {
    font-size: var(--fs-lg);
    opacity: 0.6;
}

/* ===== 通知項目 ===== */

.notification-item[b-pownso9n94] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
}

.notification-item:hover[b-pownso9n94] {
    background-color: var(--bg-secondary);
}

.notification-item.unread[b-pownso9n94] {
    background-color: color-mix(in srgb, var(--primary-blue) 5%, transparent);
}

.notification-item.unread:hover[b-pownso9n94] {
    background-color: color-mix(in srgb, var(--primary-blue) 10%, transparent);
}

.notification-item-icon[b-pownso9n94] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.notification-item.unread .notification-item-icon[b-pownso9n94] {
    background-color: color-mix(in srgb, var(--primary-blue) 12%, transparent);
    color: var(--primary-blue);
}

.notification-item-content[b-pownso9n94] {
    flex: 1;
    min-width: 0;
}

.notification-item-title[b-pownso9n94] {
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item.unread .notification-item-title[b-pownso9n94] {
    font-weight: 600;
}

.notification-item-text[b-pownso9n94] {
    color: var(--text-secondary);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-meta[b-pownso9n94] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: var(--text-secondary);
}

.notification-item-type[b-pownso9n94] {
    opacity: 0.8;
}

.notification-item-time[b-pownso9n94] {
    opacity: 0.6;
}

.notification-item-dot[b-pownso9n94] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-blue);
    margin-top: 4px;
}

/* ===== 分組標題（GroupByType） ===== */

.notification-group-header[b-pownso9n94] {
    padding: 6px 16px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary, #f3f4f6);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.notification-group-count[b-pownso9n94] {
    font-weight: 400;
    color: var(--text-muted, #9ca3af);
    margin-left: auto;
}

/* ===== 面板底部 ===== */

.notification-panel-footer[b-pownso9n94] {
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.view-all-btn[b-pownso9n94] {
    width: 100%;
    background: none;
    border: none;
    color: var(--primary-blue);
    cursor: pointer;
    font-weight: 500;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-all-btn:hover[b-pownso9n94] {
    background-color: color-mix(in srgb, var(--primary-blue) 8%, transparent);
}

/* ===== 動畫 ===== */

.spin[b-pownso9n94] {
    animation: spin-b-pownso9n94 1s linear infinite;
}

@keyframes spin-b-pownso9n94 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 響應式 ===== */

@media (max-width: 640.98px) {
    .notification-panel[b-pownso9n94] {
        position: fixed;
        top: 3.5rem;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - 4rem);
    }
}
/* /Components/Shared/Dashboard/DashboardSearchBar.razor.rz.scp.css */
/* ===== 搜尋列容器 ===== */
.dashboard-search-bar[b-zwdlcfh1iq] {
    position: relative;
    width: 100%;
}

/* ===== 輸入框外框 ===== */
.search-input-wrapper[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 0.5rem 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-input-wrapper:focus-within[b-zwdlcfh1iq] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(var(--primary-blue-rgb), 0.1);
}

.search-icon[b-zwdlcfh1iq] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-input[b-zwdlcfh1iq] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    min-width: 0;
}

.search-input[b-zwdlcfh1iq]::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-clear-btn[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 50%;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.search-clear-btn:hover[b-zwdlcfh1iq] {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.search-shortcut-hint[b-zwdlcfh1iq] {
    color: var(--text-secondary);
    opacity: 0.6;
    background: var(--bg-tertiary);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== 下拉結果面板 ===== */
.search-dropdown[b-zwdlcfh1iq] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

/* ===== 結果統計列 ===== */
.search-results-meta[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.85rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.25rem;
}

.search-keyboard-hint[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-primary);
}

.search-keyboard-hint kbd[b-zwdlcfh1iq] {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.2rem;
    line-height: 1.4;
}

/* ===== 分組標題 ===== */
.search-group-header[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem 0.25rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-group-header i[b-zwdlcfh1iq] {
}

.search-group-count[b-zwdlcfh1iq] {
    font-weight: 600;
    background: var(--bg-tertiary);
    padding: 0rem 0.35rem;
    border-radius: 0.6rem;
    line-height: 1.5;
}

/* ===== 搜尋結果項目 ===== */
.search-result-item[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.search-result-item:hover[b-zwdlcfh1iq],
.search-result-item.selected[b-zwdlcfh1iq] {
    background-color: rgba(var(--primary-blue-rgb), 0.06);
}

.search-result-item.selected[b-zwdlcfh1iq] {
    border-left: 2px solid var(--primary-blue);
    padding-left: calc(0.85rem - 2px);
}

.search-result-icon[b-zwdlcfh1iq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-result-item.selected .search-result-icon[b-zwdlcfh1iq],
.search-result-item:hover .search-result-icon[b-zwdlcfh1iq] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.1);
}

.search-result-content[b-zwdlcfh1iq] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result-name[b-zwdlcfh1iq] {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-category[b-zwdlcfh1iq] {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-result-arrow[b-zwdlcfh1iq] {
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.search-result-item:hover .search-result-arrow[b-zwdlcfh1iq],
.search-result-item.selected .search-result-arrow[b-zwdlcfh1iq] {
    opacity: 1;
}

/* ===== 空狀態 ===== */
.search-empty[b-zwdlcfh1iq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    color: var(--text-secondary);
}

.search-empty i[b-zwdlcfh1iq] {
    font-size: var(--fs-lg);
    opacity: 0.4;
}

.search-empty span[b-zwdlcfh1iq] {
}

/* ===== 響應式 ===== */
@media (max-width: 640px) {
    .search-input-wrapper[b-zwdlcfh1iq] {
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        background-color: var(--nav-hover-bg, rgba(255, 255, 255, 0.1));
        border-color: var(--nav-divider, rgba(255, 255, 255, 0.15));
    }

    .search-icon[b-zwdlcfh1iq] {
        color: var(--nav-text-dim, rgba(255, 255, 255, 0.6));
    }

    .search-input[b-zwdlcfh1iq] {
        color: var(--nav-text, #fff);
    }

    .search-input[b-zwdlcfh1iq]::placeholder {
        color: var(--nav-text-dim, rgba(255, 255, 255, 0.5));
    }

    .search-clear-btn[b-zwdlcfh1iq] {
        color: var(--nav-text-dim, rgba(255, 255, 255, 0.6));
    }

    .search-shortcut-hint[b-zwdlcfh1iq] {
        display: none;
    }

    .search-dropdown[b-zwdlcfh1iq] {
        max-height: 320px;
        /* 下拉面板需以視窗定位，避免被 fixed 父層裁切 */
        position: fixed;
        top: 3rem;
        left: 0.5rem;
        right: 0.5rem;
    }

    .search-keyboard-hint[b-zwdlcfh1iq] {
        display: none;
    }
}
/* /Components/Shared/Dashboard/DashboardShortcutCard.razor.rz.scp.css */
/* ===== 捷徑卡片 - 垂直佈局 ===== */
.shortcut-card[b-pnrw4x844r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem 0.7rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 88px;
    user-select: none;
    overflow: hidden;
}

.shortcut-card:hover[b-pnrw4x844r] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--border-color);
}

.shortcut-card:active[b-pnrw4x844r] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== 類型色彩 ===== */
.shortcut-card.type-quick-action[b-pnrw4x844r] {
    border-bottom: 2px solid var(--success-color);
}

.shortcut-card.type-chart-widget[b-pnrw4x844r] {
    border-bottom: 2px solid var(--info-color);
}

.shortcut-card.type-report-widget[b-pnrw4x844r] {
    border-bottom: 2px solid var(--warning-color);
}

/* ===== 編輯模式 ===== */
.shortcut-card.edit-mode[b-pnrw4x844r] {
    cursor: grab;
    border-style: dashed;
    border-color: #9ca3af;
}

.shortcut-card.edit-mode:hover[b-pnrw4x844r] {
    border-color: #ef4444;
    transform: none;
    box-shadow: none;
}

/* ===== 移除按鈕 ===== */
.btn-remove[b-pnrw4x844r] {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1;
    padding: 0;
    line-height: 1;
}

.shortcut-card.edit-mode:hover .btn-remove[b-pnrw4x844r] {
    opacity: 1;
}

.btn-remove:hover[b-pnrw4x844r] {
    background: #dc2626;
    transform: scale(1.15);
}

/* ===== 圖示區域（圓形背景） ===== */
.shortcut-icon[b-pnrw4x844r] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.08), rgba(var(--primary-blue-rgb), 0.16));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    color: var(--primary-blue);
    transition: all 0.25s ease;
    line-height: 1;
    flex-shrink: 0;
}

.shortcut-card:hover .shortcut-icon[b-pnrw4x844r] {
    transform: scale(1.08);
    background: linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.12), rgba(var(--primary-blue-rgb), 0.22));
}

.shortcut-card.edit-mode:hover .shortcut-icon[b-pnrw4x844r] {
    transform: none;
}

/* 快速功能的圖示底色 */
.shortcut-card.type-quick-action .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.08), rgba(var(--success-color-rgb), 0.16));
    color: var(--success-color);
}
.shortcut-card.type-quick-action:hover .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.12), rgba(var(--success-color-rgb), 0.22));
}

/* 圖表介面的圖示底色 */
.shortcut-card.type-chart-widget .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--info-color-rgb), 0.08), rgba(var(--info-color-rgb), 0.16));
    color: var(--info-color);
}
.shortcut-card.type-chart-widget:hover .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--info-color-rgb), 0.12), rgba(var(--info-color-rgb), 0.22));
}

/* 報表集的圖示底色 */
.shortcut-card.type-report-widget .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.08), rgba(var(--warning-color-rgb), 0.16));
    color: var(--warning-color);
}
.shortcut-card.type-report-widget:hover .shortcut-icon[b-pnrw4x844r] {
    background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.12), rgba(var(--warning-color-rgb), 0.22));
}

/* ===== 類型角標 ===== */
.type-badge[b-pnrw4x844r] {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 2px solid var(--bg-primary);
    line-height: 1;
}

.type-badge-quick[b-pnrw4x844r] {
    background-color: var(--success-color);
}

.type-badge-chart[b-pnrw4x844r] {
    background-color: var(--info-color);
}

.type-badge-report[b-pnrw4x844r] {
    background-color: var(--warning-color);
}

/* ===== 名稱 ===== */
.shortcut-name[b-pnrw4x844r] {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 0.15rem;
}

/* ===== 拖曳狀態 ===== */
.shortcut-card.dragging[b-pnrw4x844r] {
    opacity: 0.4;
    border-color: #3b82f6;
}

.shortcut-card.drag-over[b-pnrw4x844r] {
    border-color: #3b82f6;
    background-color: rgba(var(--primary-blue-rgb), 0.06);
}

/* ===== 響應式 - 平板 ===== */
@media (max-width: 768px) {
    .shortcut-card[b-pnrw4x844r] {
        min-height: 84px;
        padding: 0.7rem 0.4rem 0.55rem;
        gap: 0.4rem;
    }

    .shortcut-icon[b-pnrw4x844r] {
        width: 36px;
        height: 36px;
    }

    .shortcut-name[b-pnrw4x844r] {
    }
}

/* ===== 響應式 - 手機 ===== */
@media (max-width: 576px) {
    .shortcut-card[b-pnrw4x844r] {
        min-height: 72px;
        padding: 0.3rem 0.1rem 0.3rem;
        gap: 0.15rem;
        border-radius: 0.5rem;
    }

    .shortcut-icon[b-pnrw4x844r] {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .shortcut-name[b-pnrw4x844r] {
        font-size: 1rem;
        line-height: 1.15;
        padding: 0;
    }

    /* 角標在窄畫面太擠；類型已用 border-bottom 顏色區分 */
    .type-badge[b-pnrw4x844r] {
        display: none;
    }

    .btn-remove[b-pnrw4x844r] {
        width: 18px;
        height: 18px;
        top: 0.15rem;
        right: 0.15rem;
        font-size: 0.65rem;
    }
}

/* ===== 觸控設備：編輯模式直接顯示移除按鈕 ===== */
@media (hover: none) {
    .shortcut-card.edit-mode .btn-remove[b-pnrw4x844r] {
        opacity: 1;
    }
}
/* /Components/Shared/Dashboard/DashboardWidgetPickerModal.razor.rz.scp.css */
/* ===== Pill Tab 樣式（從 modal 頂部移到右欄上方，class 不變） ===== */
.picker-tabs[b-o7b0nstyy7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.picker-tab[b-o7b0nstyy7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: 2rem;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.picker-tab:hover[b-o7b0nstyy7] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.picker-tab.picker-tab-active[b-o7b0nstyy7] {
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 600;
}

/* 快速功能 Tab 活躍色 */
.picker-tab.picker-tab-green.picker-tab-active[b-o7b0nstyy7] {
    background-color: rgba(var(--success-color-rgb), 0.1);
    border-color: var(--success-color);
    color: var(--success-color);
}

/* 圖表 Tab 活躍色 */
.picker-tab.picker-tab-cyan.picker-tab-active[b-o7b0nstyy7] {
    background-color: rgba(var(--info-color-rgb), 0.1);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* 報表集 Tab 活躍色 */
.picker-tab.picker-tab-orange.picker-tab-active[b-o7b0nstyy7] {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.picker-tab-badge[b-o7b0nstyy7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border-radius: 10px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1;
}

.picker-tab.picker-tab-active .picker-tab-badge[b-o7b0nstyy7] {
    background-color: rgba(var(--primary-blue-rgb), 0.15);
    color: var(--primary-blue);
}

.picker-tab.picker-tab-green.picker-tab-active .picker-tab-badge[b-o7b0nstyy7] {
    background-color: rgba(var(--success-color-rgb), 0.15);
    color: var(--success-color);
}

.picker-tab.picker-tab-cyan.picker-tab-active .picker-tab-badge[b-o7b0nstyy7] {
    background-color: rgba(var(--info-color-rgb), 0.15);
    color: var(--info-color);
}

.picker-tab.picker-tab-orange.picker-tab-active .picker-tab-badge[b-o7b0nstyy7] {
    background-color: rgba(var(--warning-color-rgb), 0.15);
    color: var(--warning-color);
}

/* Disabled tab：低不透明 + 阻擋指針（鍵盤靠 tabindex=-1 + runtime guard） */
.picker-tab.picker-tab-disabled[b-o7b0nstyy7] {
    opacity: 0.4;
    pointer-events: none;
}

/* ===== 分類標題（右欄搜尋模式跨分類分節用） ===== */
.category-header[b-o7b0nstyy7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.06), transparent);
    border-left: 3px solid var(--primary-blue);
    border-radius: 0 0.375rem 0.375rem 0;
    font-weight: 700;
    color: var(--primary-blue);
}

.category-header-green[b-o7b0nstyy7] {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.06), transparent);
    border-left-color: var(--success-color);
    color: var(--success-color);
}

.category-header-cyan[b-o7b0nstyy7] {
    background: linear-gradient(135deg, rgba(var(--info-color-rgb), 0.06), transparent);
    border-left-color: var(--info-color);
    color: var(--info-color);
}

.category-header-orange[b-o7b0nstyy7] {
    background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.06), transparent);
    border-left-color: var(--warning-color);
    color: var(--warning-color);
}

.category-count[b-o7b0nstyy7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
    border-radius: 9px;
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    color: var(--primary-blue);
    font-weight: 700;
    margin-left: 0.35rem;
}

.category-header-green .category-count[b-o7b0nstyy7] {
    background-color: rgba(var(--success-color-rgb), 0.1);
    color: var(--success-color);
}

.category-header-cyan .category-count[b-o7b0nstyy7] {
    background-color: rgba(var(--info-color-rgb), 0.1);
    color: var(--info-color);
}

.category-header-orange .category-count[b-o7b0nstyy7] {
    background-color: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
}

/* ===== 選擇項目卡片 - 緊湊列形（無圖示） ===== */
.picker-item[b-o7b0nstyy7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 0.4rem;
    background: var(--bg-primary);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
    margin-bottom: 0.35rem;
}

.picker-item:hover:not(:disabled)[b-o7b0nstyy7] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* 注意：source order 重要 — :disabled 必須在 .picker-item.existing 之前，
   讓 .existing 的 opacity:0.55 / cursor:not-allowed 勝出（同 specificity 0,2,0） */
.picker-item:disabled[b-o7b0nstyy7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.picker-item-text[b-o7b0nstyy7] {
    flex: 1;
    min-width: 0;
}

.picker-item-meta[b-o7b0nstyy7] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ===== 名稱 + 說明 ===== */
.picker-name[b-o7b0nstyy7] {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-desc[b-o7b0nstyy7] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.25;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ===== 已選取狀態 ===== */
.picker-item.selected[b-o7b0nstyy7] {
    background-color: rgba(var(--primary-blue-rgb), 0.04);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 1px var(--primary-blue);
}

.picker-check-badge[b-o7b0nstyy7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--primary-blue);
    color: #ffffff;
    line-height: 1;
}

/* ===== 已加入首頁（禁用） ===== */
.picker-item.existing[b-o7b0nstyy7] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    opacity: 0.55;
    cursor: not-allowed;
}

.picker-item.existing:hover[b-o7b0nstyy7] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
}

.picker-existing-badge[b-o7b0nstyy7] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* ===== 分欄 layout（左：分類 / 右：類型 tabs + 明細） ===== */
/* 注意：picker-split 不可設 overflow:hidden，否則 picker-selected-summary 的 sticky 會失效 */
.picker-split[b-o7b0nstyy7] {
    display: flex;
    gap: 0;
    height: 100%;
    min-height: 0;
}

.picker-pane-left[b-o7b0nstyy7] {
    flex: 0 0 240px;
    overflow-y: auto;
    border-right: 1px solid var(--border-light);
    padding: 0.25rem 0.75rem 0.25rem 0;
}

.picker-pane-right[b-o7b0nstyy7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding-left: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.picker-pane-right-header[b-o7b0nstyy7] {
    flex-shrink: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.picker-mobile-back[b-o7b0nstyy7] {
    flex-shrink: 0;
    display: none;
    padding: 0.2rem 0.4rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-primary);
}

.picker-pane-right-header .picker-tabs[b-o7b0nstyy7] {
    flex: 1 1 auto;
}

.picker-search-mode .picker-pane-left[b-o7b0nstyy7] {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== 左欄：分類列表 ===== */
.picker-cat-list[b-o7b0nstyy7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.picker-cat-item[b-o7b0nstyy7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    border-left: 3px solid transparent;
    border-radius: 0 0.3rem 0.3rem 0;
    text-align: left;
    transition: background-color 0.15s;
}

.picker-cat-item:hover:not(.picker-cat-active)[b-o7b0nstyy7] {
    background: var(--bg-secondary);
}

.picker-cat-active[b-o7b0nstyy7] {
    background: rgba(var(--primary-blue-rgb), 0.1);
    border-left-color: var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 600;
}

.picker-cat-name[b-o7b0nstyy7] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-cat-sel-dot[b-o7b0nstyy7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-blue);
}

.picker-cat-count[b-o7b0nstyy7] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.picker-cat-active .picker-cat-count[b-o7b0nstyy7] {
    color: var(--primary-blue);
}

/* ===== Empty state、section label、selected summary ===== */
.picker-empty-state[b-o7b0nstyy7] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.picker-empty-modal[b-o7b0nstyy7] {
    padding: 4rem 1rem;
}

.picker-list[b-o7b0nstyy7] {
    display: block;
}

.picker-section-label[b-o7b0nstyy7] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

.picker-selected-summary[b-o7b0nstyy7] {
    position: sticky;
    bottom: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-primary);
    font-size: 0.85rem;
    color: var(--text-secondary);
    /* 不用 margin-top:auto — 內容溢出時 flex 容器無剩餘空間，margin-top:auto 會 collapse；
       sticky bottom 已能在捲動時固定於可視底部，這就足夠了 */
}

/* 右欄類型分節標題在新環境的微調 */
.picker-pane-right .category-header[b-o7b0nstyy7] {
    margin-bottom: 0.4rem;
    margin-top: 0.5rem;
}

.picker-pane-right .category-header:first-child[b-o7b0nstyy7] {
    margin-top: 0;
}

/* ===== Focus visible（鍵盤可見焦點） ===== */
.picker-cat-item:focus-visible[b-o7b0nstyy7],
.picker-item:focus-visible[b-o7b0nstyy7],
.picker-mobile-back:focus-visible[b-o7b0nstyy7],
.picker-tab:focus-visible[b-o7b0nstyy7] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ===== 響應式 ===== */
@media (max-width: 768px) {
    .picker-pane-left[b-o7b0nstyy7] {
        flex: 1 1 auto;
        border-right: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .picker-pane-right[b-o7b0nstyy7] {
        flex: 1 1 auto;
        padding-left: 0;
    }

    .picker-pane-left[data-mobile-view="detail"][b-o7b0nstyy7] {
        display: none;
    }

    .picker-pane-right[data-mobile-view="nav"][b-o7b0nstyy7] {
        display: none;
    }

    .picker-mobile-back[b-o7b0nstyy7] {
        display: inline-flex;
    }

    .picker-tabs[b-o7b0nstyy7] {
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    .picker-tab[b-o7b0nstyy7] {
        padding: 0.35rem 0.65rem;
    }
}

@media (max-width: 576px) {
    .picker-item[b-o7b0nstyy7] {
        padding: 0.4rem 0.55rem;
        min-height: 40px;
    }

    .picker-name[b-o7b0nstyy7] {
        font-size: 0.9rem;
    }

    .picker-desc[b-o7b0nstyy7] {
        font-size: 0.72rem;
    }

    .picker-cat-item[b-o7b0nstyy7] {
        font-size: 0.9rem;
        padding: 0.4rem 0.5rem;
    }

    .picker-tab-badge[b-o7b0nstyy7] {
        min-width: 18px;
        height: 18px;
    }

    /* 極小螢幕：tabs 改橫向捲動，避免換行擠壓 */
    .picker-tabs[b-o7b0nstyy7] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .picker-tab[b-o7b0nstyy7] {
        flex-shrink: 0;
    }
}
/* /Components/Shared/Dashboard/IconPickerModal.razor.rz.scp.css */
.icon-preview-area[b-qobb0nfsio] {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.icon-preview-content[b-qobb0nfsio] {
    background-color: var(--bg-tertiary);
}

.icon-picker-item[b-qobb0nfsio] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 80px;
    background-color: var(--bg-primary);
}

.icon-picker-item:hover[b-qobb0nfsio] {
    border-color: var(--color-primary);
    background-color: var(--bg-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-picker-item.selected[b-qobb0nfsio] {
    border-color: var(--color-primary);
    background-color: var(--bg-secondary);
}

.icon-picker-item.selected i[b-qobb0nfsio] {
    color: var(--color-primary);
}

.icon-picker-item.current[b-qobb0nfsio] {
    border-color: var(--text-secondary);
    background-color: var(--bg-tertiary);
}

.icon-picker-item .icon-name[b-qobb0nfsio] {
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-picker-item.selected .icon-name[b-qobb0nfsio] {
    color: var(--color-primary);
    font-weight: 600;
}
/* /Components/Shared/Import/MultiSheetImportResultViewComponent.razor.rz.scp.css */
/* 匯入結果共用檢視 — 樣式
   說明: 統計卡 / 表格 thead 樣式從 MultiSheetImportModalComponent.razor.css 同步
   (該檔仍保留 preview 區塊用的同名 class — Blazor scoped CSS 兩邊各自 hash,不衝突)
 */

.multi-sheet-import-result[b-uzosu1fftl] {
    color: var(--text-primary);
}

/* ─── 表格 thead ───────────────────────────────── */
.import-thead[b-uzosu1fftl] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.import-thead th[b-uzosu1fftl] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* ─── 統計卡片 ─────────────────────────────────── */
.stat-card[b-uzosu1fftl] {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.stat-card .stat-value[b-uzosu1fftl] {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-top: 0.25rem;
}

.stat-card.stat-insert[b-uzosu1fftl] { border-left: 4px solid var(--bs-success); }
.stat-card.stat-update[b-uzosu1fftl] { border-left: 4px solid var(--bs-info); }
.stat-card.stat-skip[b-uzosu1fftl]   { border-left: 4px solid var(--bs-secondary); }
.stat-card.stat-fail[b-uzosu1fftl]   { border-left: 4px solid var(--bs-danger); }

.stat-card.stat-insert .stat-value[b-uzosu1fftl] { color: var(--bs-success); }
.stat-card.stat-update .stat-value[b-uzosu1fftl] { color: var(--bs-info); }
.stat-card.stat-skip   .stat-value[b-uzosu1fftl] { color: var(--text-secondary); }
.stat-card.stat-fail   .stat-value[b-uzosu1fftl] { color: var(--bs-danger); }

/* ─── 失敗總清單卡片 header ───────────────────── */
.import-result-error-header[b-uzosu1fftl] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ─── 深色模式覆寫 ─────────────────────────────── */
[data-bs-theme=dark] .stat-card[b-uzosu1fftl] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .import-thead[b-uzosu1fftl],
[data-bs-theme=dark] .import-thead th[b-uzosu1fftl],
[data-bs-theme=dark] .import-result-error-header[b-uzosu1fftl] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
/* /Components/Shared/Media/ImagePreviewModal.razor.rz.scp.css */
.image-preview-lightbox[b-8ezje8j3dh] {
    position: fixed;
    inset: 0;
    /* 9000 遠高於 BaseModalComponent 動態 z-index 範圍（1050+），
       確保 lightbox 永遠在所有 modal 之上，無論 modal 疊幾層 */
    z-index: 9000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2rem;
}

.image-preview-title[b-8ezje8j3dh] {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    color: var(--primary-white);
    max-width: calc(100% - 5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.image-preview-close[b-8ezje8j3dh] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1;
}

.image-preview-body[b-8ezje8j3dh] {
    max-width: 95vw;
    max-height: 95vh;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-img[b-8ezje8j3dh] {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;
}
/* /Components/Shared/Modal/BaseModalComponent.razor.rz.scp.css */
/*
    BaseModalComponent 專屬樣式
    處理 Modal 的 z-index 層級和視覺效果
*/

/* ===== Modal 容器層級管理 ===== */

/* 
    Modal 外層容器
    基礎 z-index: 1050
    每開啟一個新的 Modal，z-index 會自動遞增
*/
[b-rzwzvbtn0p] .modal {
    z-index: 1050;
}

/* 
    Modal Backdrop（背景遮罩）
    z-index 比 Modal 容器少 1，確保在 Modal 後面
*/
[b-rzwzvbtn0p] .modal-backdrop {
    z-index: 1049;
}

/* 
    多層 Modal 支援
    當有多個 Modal 同時開啟時，後開啟的 Modal 會有更高的 z-index
*/
[b-rzwzvbtn0p] .modal.show ~ .modal.show {
    z-index: 1060;
}

[b-rzwzvbtn0p] .modal.show ~ .modal.show ~ .modal.show {
    z-index: 1070;
}

[b-rzwzvbtn0p] .modal.show ~ .modal.show ~ .modal.show ~ .modal.show {
    z-index: 1080;
}

/* 對應的 Backdrop 層級 */
[b-rzwzvbtn0p] .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1059;
}

[b-rzwzvbtn0p] .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1069;
}

[b-rzwzvbtn0p] .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1079;
}

/* ===== Modal 視覺效果增強 ===== */

/* Modal 內容陰影效果 */
[b-rzwzvbtn0p] .modal-content {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Header 樣式優化 — 純主題驅動，不再有 per-modal 顏色設定 */
[b-rzwzvbtn0p] .modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Body 樣式優化
   不再使用 padding：避免 sticky 子元素的 pin 位置（padding 內緣）與 overflow 的裁切框
   （padding 外緣）之間出現 24px 死角，導致捲動內容可見於 modal-action-bar 下方。
   padding 改由內層 .modal-body-content 承載（透過 @BodyCssClass）。
   ⚠️ 請勿在這個 .modal-body 上重新加入 padding，否則 sticky 死角會重新出現。 */
[b-rzwzvbtn0p] .modal-body {
    padding: 0;
    max-height: calc(100vh - 210px);   /* fallback */
    max-height: calc(100svh - 210px);  /* iOS 15.4+：小視窗高度，含 Safari UI */
    max-height: calc(100dvh - 210px);  /* iOS 16+ / Chrome 108+：動態調整 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 慣性捲動 */
    /* position: relative 讓 .modal-body 同時成為「捲動祖先」與「containing block」，
       避免 sticky 子元素的 containing block 跑到 .modal-content（position: relative）
       導致 sticky 定位錯亂、子元素內容漏到 modal-header / modal-action-bar 區域。
       isolation: isolate 額外建立獨立的 stacking context，將 z-index 隔離在 .modal-body 之內。 */
    position: relative;
    isolation: isolate;
}

/* 搜尋區（固定在按鈕列與 Body 之間） */
[b-rzwzvbtn0p] .modal-search-bar {
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bs-modal-bg, #fff);
    flex-shrink: 0;
}

/* Footer 樣式優化 */
[b-rzwzvbtn0p] .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* ===== Audit Info 浮動圖示 ===== */

[b-rzwzvbtn0p] .audit-info-float-container {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    display: flex;
    flex-direction: row-reverse;
    gap: 0.4rem;
    align-items: center;
}

[b-rzwzvbtn0p] .audit-info-toggle-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
    padding: 0;
    line-height: 1;
}

[b-rzwzvbtn0p] .audit-info-toggle-btn:hover {
    background-color: var(--bg-hover, #e9ecef);
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

[b-rzwzvbtn0p] .audit-info-popup {
    position: absolute;
    bottom: 2.5rem;
    right: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 220px;
    white-space: nowrap;
}

[b-rzwzvbtn0p] .audit-info-row {
    display: flex;
    gap: 0.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

[b-rzwzvbtn0p] .audit-info-label {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

[b-rzwzvbtn0p] .audit-info-value {
    color: var(--text-secondary);
}

/* ===== 動畫效果 ===== */

/* Modal 淡入動畫 */
[b-rzwzvbtn0p] .modal.fade {
    transition: opacity 0.15s linear;
}

[b-rzwzvbtn0p] .modal.show {
    opacity: 1;
}

/* Backdrop 淡入動畫 */
[b-rzwzvbtn0p] .modal-backdrop.fade {
    transition: opacity 0.15s linear;
}

[b-rzwzvbtn0p] .modal-backdrop.show {
    opacity: 0.5;
}

/* ===== 滾動條樣式（針對 Modal Body） ===== */

[b-rzwzvbtn0p] .modal-body::-webkit-scrollbar {
    width: 8px;
}

[b-rzwzvbtn0p] .modal-body::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

[b-rzwzvbtn0p] .modal-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[b-rzwzvbtn0p] .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ===== 響應式設計 ===== */

/* 小螢幕裝置 */
@media (max-width: 576px) {
    [b-rzwzvbtn0p] .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    [b-rzwzvbtn0p] .modal-body {
        max-height: calc(100vh - 180px);   /* fallback */
        max-height: calc(100svh - 180px);  /* iOS 15.4+ */
        max-height: calc(100dvh - 180px);  /* iOS 16+ / Chrome 108+ */
    }
}

/* 中等螢幕裝置 */
@media (min-width: 577px) and (max-width: 768px) {
    [b-rzwzvbtn0p] .modal-dialog {
        margin: 1rem auto;
    }
}

/* ===== 載入中狀態樣式 ===== */

[b-rzwzvbtn0p] .modal-body .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* ===== 錯誤訊息樣式 ===== */

[b-rzwzvbtn0p] .modal-body .alert-danger {
    border-left: 4px solid #dc3545;
}

/* ===== 空狀態樣式 ===== */

[b-rzwzvbtn0p] .modal-body .text-center.text-muted {
    opacity: 0.7;
}

/* ===== 桌面專用尺寸樣式（響應式設計） ===== */

/* 小螢幕（< 1200px）：95% 寬度 */
[b-rzwzvbtn0p] .modal-dialog.modal-desktop {
    max-width: 95%;
    width: 95%;
    /* 桌面外距改由此處提供（原本走 inline GetModalDialogStyle，移除後改 CSS 才能被手機 media query 覆蓋）；
       上下各 1.5rem 與 height: calc(100dvh - 3rem) 成對設計 */
    margin: 1.5rem auto;
    height: calc(100vh - 3rem);   /* fallback */
    height: calc(100svh - 3rem);  /* iOS 15.4+：確保不超出可見視窗 */
    height: calc(100dvh - 3rem);  /* iOS 16+ / Chrome 108+：動態調整 */
}

/* 中等螢幕（≥ 1200px）：90% 寬度，最大 1400px */
@media (min-width: 1200px) {
    [b-rzwzvbtn0p] .modal-dialog.modal-desktop {
        max-width: 95%;
        width: 95%;
    }
}

/* 大螢幕（≥ 1600px）：85% 寬度 */
@media (min-width: 1600px) {
    [b-rzwzvbtn0p] .modal-dialog.modal-desktop {
        max-width: 95%;
        width: 95%;
    }
}

/* 超大螢幕（≥ 1920px）：80% 寬度 */
@media (min-width: 1920px) {
    [b-rzwzvbtn0p] .modal-dialog.modal-desktop {
        max-width: 95%;
        width: 95%;
    }
}

/* Desktop modal：固定高度 flex 佈局，Body 自動撐滿剩餘空間 */
/* 使用 > 直接子元素選擇器，避免巢狀 Modal 被父層 modal-desktop 規則污染 */
[b-rzwzvbtn0p] .modal-dialog.modal-desktop > .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-rzwzvbtn0p] .modal-dialog.modal-desktop > .modal-content > .modal-body {
    flex: 1 1 0;    /* flex-basis: 0 確保 modal-body 從 0 開始擴展，不受內容高度影響 */
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 慣性捲動 */
}

/* ===== 手機/小平板：大型 EditModal 自動滿版 ===== */
/* 只針對 .modal-desktop（GenericEditModalComponent 預設 Size），確認/小提示視窗不受影響。 */
/* 必須放在上方所有 .modal-desktop 尺寸規則「之後」：同特異度 (0,3,0) 靠源碼順序勝出，
   才能覆蓋桌面的 width:95% / height:calc(100dvh-3rem) / margin:1.5rem auto。 */
@media (max-width: 767px) {
    [b-rzwzvbtn0p] .modal-dialog.modal-desktop {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100vh;   /* fallback */
        height: 100svh;  /* iOS 15.4+ */
        height: 100dvh;  /* iOS 16+ / Chrome 108+ */
    }

    /* 滿版去圓角；height:100% / flex column 由既有 .modal-desktop 規則提供，body 自動撐滿 */
    [b-rzwzvbtn0p] .modal-dialog.modal-desktop > .modal-content {
        border-radius: 0;
    }
}

/* ===== 確保 Modal 可互動性 ===== */

/* 防止背景滾動（當 Modal 開啟時） */
[b-rzwzvbtn0p] body.modal-open {
    overflow: hidden;
}

/* 關閉按鈕：不可建立 stacking context
   原本給 z-index: 1 用意是「確保 X 在最上層」,但配合 .modal-body 的 isolation: isolate,
   父 modal 的 btn-close 反而會被升到父 modal stacking context 頂層,
   蓋過 modal-body 內巢狀子 modal(z-index 1070 被困在 modal-body 的 isolation 內)。
   結果:點巢狀子 modal 的 X,瀏覽器 hit-test 命中的是父 modal 的 X → 父子全關。
   修法:移除 z-index;modal-header 與 modal-body 視覺上不重疊,btn-close 不需要 z-index 加持。
   保留 position: relative 以防後續加 absolute 子元素(tooltip 等)定位錯誤。 */
[b-rzwzvbtn0p] .modal-header .btn-close {
    position: relative;
}

/* ===== Header 按鈕區域樣式 ===== */

[b-rzwzvbtn0p] .modal-header .d-flex.gap-2 {
    gap: 0.5rem;
}

/* ===== Modal Action Bar (按鈕列) 樣式 ===== */

/* 桌面版：水平排列 */
[b-rzwzvbtn0p] .modal-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    background-color: var(--bg-secondary);
}

/* 手機版：水平單行捲動（防止過高推擠 modal-body） */
@media (max-width: 576px) {
    [b-rzwzvbtn0p] .modal-action-bar {
        flex-wrap: nowrap;                    /* 不換行，保持單行 */
        overflow-x: auto;                     /* 水平捲動 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;    /* iOS 慣性捲動 */
        justify-content: flex-start;
        gap: 0.25rem;
        padding: 0.375rem 0.5rem !important;
        scrollbar-width: none;                /* Firefox 隱藏捲軸 */
        -ms-overflow-style: none;
    }

    [b-rzwzvbtn0p] .modal-action-bar::-webkit-scrollbar {
        display: none;                        /* WebKit 隱藏捲軸 */
    }

    /* 內部 flex 容器不換行、不壓縮 */
    [b-rzwzvbtn0p] .modal-action-bar > .d-flex {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 0.25rem !important;
    }
}

/* ===== 多層 Modal 的 Backdrop 透明度調整 ===== */

/* 第一層 Modal 的 Backdrop */
[b-rzwzvbtn0p] .modal-backdrop.show {
    opacity: 0.5;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 第二層 Modal 的 Backdrop（稍微加深） */
[b-rzwzvbtn0p] .modal-backdrop.show ~ .modal-backdrop.show {
    opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.3);
}

/* 第三層 Modal 的 Backdrop（更深） */
[b-rzwzvbtn0p] .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    opacity: 0.2;
    background-color: rgba(0, 0, 0, 0.2);
}

/* ===== 全景模式（modal-fullscreen）佈局修正 ===== */

/* 確保 modal-content 為 flex column 且填滿全高 */
/* 使用 > 直接子元素選擇器，避免巢狀 Modal 被父層 modal-fullscreen 規則污染 */
[b-rzwzvbtn0p] .modal-dialog.modal-fullscreen > .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
}

/* modal-body：移除 max-height 限制，flex-basis 設為 0 讓子元素的 height: 100% 可正確解析 */
[b-rzwzvbtn0p] .modal-dialog.modal-fullscreen > .modal-content > .modal-body {
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
}

/* ===== Feature Guide 點擊外部關閉遮罩 ===== */

[b-rzwzvbtn0p] .feature-guide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

/* ===== Feature Guide Side Drawer（右側滑出操作說明面板） ===== */

[b-rzwzvbtn0p] .feature-guide-drawer {
    --guide-header-offset: 3.6rem; /* header 高度，書籤對齊用 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: row;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-rzwzvbtn0p] .feature-guide-drawer.open {
    transform: translateX(0);
}

/* 關閉狀態下禁止書籤互動（防止突出的 active 書籤被點到） */
[b-rzwzvbtn0p] .feature-guide-drawer:not(.open) {
    pointer-events: none;
    overflow: hidden;
}

/* ===== 左側書籤標籤列 ===== */

[b-rzwzvbtn0p] .feature-guide-bookmarks {
    display: flex;
    flex-direction: column;
    padding-top: var(--guide-header-offset);
    gap: 0.25rem;
    position: relative;
    z-index: 2;
}

[b-rzwzvbtn0p] .feature-guide-bookmark {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border: none;
    background-color: var(--bookmark-color, #3B82F6);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.35rem;
    cursor: pointer;
    border-radius: 0.4rem 0 0 0.4rem;
    transition: filter 0.15s, transform 0.15s, padding 0.15s;
    white-space: nowrap;
    letter-spacing: 0.08em;
    min-width: 1.85rem;
    text-align: center;
    box-shadow: -2px 1px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 0;
}

[b-rzwzvbtn0p] .feature-guide-bookmark:hover {
    filter: brightness(1.1);
    transform: translateX(-3px);
    padding: 0.55rem 0.4rem;
}

[b-rzwzvbtn0p] .feature-guide-bookmark.active {
    filter: brightness(1.15);
    transform: translateX(-4px);
    padding: 0.55rem 0.45rem;
    box-shadow: -3px 1px 8px rgba(0, 0, 0, 0.18);
}

[b-rzwzvbtn0p] .feature-guide-bookmark-text {
    display: block;
}

/* ===== Drawer 主要內容區 ===== */

[b-rzwzvbtn0p] .feature-guide-main {
    width: 340px;
    max-width: calc(90vw - 2rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Drawer Header */
[b-rzwzvbtn0p] .feature-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
    border-top-right-radius: 0.5rem;
}

[b-rzwzvbtn0p] .feature-guide-title {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

[b-rzwzvbtn0p] .feature-guide-title i {
    color: var(--bs-primary, #0d6efd);
}

[b-rzwzvbtn0p] .feature-guide-close-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}

[b-rzwzvbtn0p] .feature-guide-close-btn:hover {
    background-color: var(--bg-hover, #e9ecef);
    color: var(--text-primary);
}

/* Drawer Body（可滾動內容區） */
[b-rzwzvbtn0p] .feature-guide-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Drawer 內部的說明書樣式 */

[b-rzwzvbtn0p] .feature-guide-body .guide-section {
    margin-bottom: 1.25rem;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-section:last-child {
    margin-bottom: 0;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-section-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--bs-primary, #0d6efd);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-section-title i {
    color: var(--bs-primary, #0d6efd);
}

[b-rzwzvbtn0p] .feature-guide-body .guide-description {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* 操作步驟（有序列表） */
[b-rzwzvbtn0p] .feature-guide-body .guide-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    counter-reset: step-counter;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-steps li {
    counter-increment: step-counter;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: var(--text-primary);
}

[b-rzwzvbtn0p] .feature-guide-body .guide-steps li::before {
    content: counter(step-counter);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
}

/* 欄位說明（定義列表） */
[b-rzwzvbtn0p] .feature-guide-body .guide-fields {
    margin: 0 0 0.75rem 0;
    padding: 0;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-fields dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-fields dt:first-child {
    margin-top: 0;
}

[b-rzwzvbtn0p] .feature-guide-body .guide-fields dd {
    margin-left: 0;
    padding-left: 0.85rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--border-color);
}

/* 提示框 */
[b-rzwzvbtn0p] .feature-guide-body .guide-tip {
    background-color: rgba(13, 110, 253, 0.06);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 0.3rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

[b-rzwzvbtn0p] .feature-guide-body .guide-tip i {
    color: var(--bs-primary, #0d6efd);
    margin-right: 0.35rem;
}

/* 警告框 */
[b-rzwzvbtn0p] .feature-guide-body .guide-warning {
    background-color: rgba(255, 193, 7, 0.08);
    border-left: 3px solid var(--bs-warning, #ffc107);
    border-radius: 0.3rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

[b-rzwzvbtn0p] .feature-guide-body .guide-warning i {
    color: var(--bs-warning, #ffc107);
    margin-right: 0.35rem;
}

/* Drawer 滾動條 */
[b-rzwzvbtn0p] .feature-guide-body::-webkit-scrollbar {
    width: 5px;
}

[b-rzwzvbtn0p] .feature-guide-body::-webkit-scrollbar-track {
    background: transparent;
}

[b-rzwzvbtn0p] .feature-guide-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

[b-rzwzvbtn0p] .feature-guide-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ===== Feature Guide Debug Bar（SuperAdmin 專屬） ===== */

[b-rzwzvbtn0p] .feature-guide-debug {
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    background: #1a1a2e;
    color: #7ec8e3;
    font-family: monospace;
    letter-spacing: 0.03em;
    user-select: text;
    cursor: pointer;
    border-top: 1px solid rgba(126, 200, 227, 0.15);
    border-bottom-right-radius: 0.5rem;
}

[b-rzwzvbtn0p] .feature-guide-debug:hover {
    background: #232342;
    color: #a8dcf0;
}

/* 手機版：Drawer 佔滿整個 modal 寬度 */
@media (max-width: 576px) {
    [b-rzwzvbtn0p] .feature-guide-main {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-radius: 0;
        flex: 1 1 0;
        min-height: 0;
    }

    [b-rzwzvbtn0p] .feature-guide-header {
        border-radius: 0;
    }

    /* 手機版書籤改為水平排列在頂部，Drawer 佔滿全高 */
    [b-rzwzvbtn0p] .feature-guide-drawer {
        flex-direction: column;
        top: 0;
        bottom: 0;
    }

    [b-rzwzvbtn0p] .feature-guide-bookmarks {
        flex-direction: row;
        padding-top: 0;
        overflow-x: auto;
        gap: 0.2rem;
        padding: 0.3rem 0.5rem;
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    [b-rzwzvbtn0p] .feature-guide-bookmark {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        border-radius: 0.3rem 0.3rem 0 0;
        left: 0;
        padding: 0.35rem 0.65rem;
        min-width: auto;
    }

    [b-rzwzvbtn0p] .feature-guide-bookmark:hover,
    [b-rzwzvbtn0p] .feature-guide-bookmark.active {
        transform: none;
        padding: 0.35rem 0.65rem;
    }
}

/* Dark mode 微調 */
[data-bs-theme=dark] .feature-guide-main[b-rzwzvbtn0p] {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .feature-guide-overlay[b-rzwzvbtn0p] {
    background: rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .feature-guide-body .guide-tip[b-rzwzvbtn0p] {
    background-color: rgba(88, 166, 255, 0.08);
}

[data-bs-theme=dark] .feature-guide-body .guide-warning[b-rzwzvbtn0p] {
    background-color: rgba(255, 193, 7, 0.06);
}

[data-bs-theme=dark] .feature-guide-bookmark[b-rzwzvbtn0p] {
    box-shadow: -2px 1px 6px rgba(0, 0, 0, 0.25);
}
/* /Components/Shared/Modal/GenericEditModalComponent.razor.rz.scp.css */
/*
    GenericEditModalComponent 專屬樣式
    處理按鈕列在不同螢幕尺寸的響應式設計
*/

/* ===== 按鈕容器基本樣式 ===== */

.modal-buttons-container[b-p2u1z9a00m] {
    gap: 0.5rem;
}

/* ===== 桌面版：水平排列 ===== */

.custom-buttons-section[b-p2u1z9a00m] {
    flex-shrink: 0;
}

/* ===== 手機版響應式設計 ===== */

@media (max-width: 576px) {
    /* 按鈕容器：水平單行捲動（避免垂直堆疊過高推擠 modal-body） */
    .modal-buttons-container[b-p2u1z9a00m] {
        flex-direction: row;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.25rem;
        padding: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .modal-buttons-container[b-p2u1z9a00m]::-webkit-scrollbar {
        display: none;
    }

    /* 自訂按鈕區：不全寬，靠左對齊，右側分隔線 */
    .custom-buttons-section[b-p2u1z9a00m] {
        margin-right: 0.25rem !important;
        justify-content: flex-start !important;
        width: auto;
        flex-shrink: 0;
        padding-bottom: 0;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        padding-right: 0.25rem;
    }

    /* 狀態訊息區域 */
    .modal-buttons-container > div:not(.custom-buttons-section):not(.d-flex)[b-p2u1z9a00m] {
        text-align: left;
        width: auto;
        flex-shrink: 0;
    }

    /* 右側標準按鈕區：不換行 */
    .modal-buttons-container > .d-flex:last-child[b-p2u1z9a00m] {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        flex-shrink: 0;
        gap: 0.25rem !important;
    }

    /* 審核按鈕區 */
    .modal-buttons-container > .d-flex.me-3[b-p2u1z9a00m] {
        margin-right: 0.25rem !important;
        justify-content: flex-start;
        width: auto;
        flex-shrink: 0;
    }
}

/* ===== 平板版響應式設計 ===== */

@media (min-width: 577px) and (max-width: 768px) {
    .modal-buttons-container[b-p2u1z9a00m] {
        gap: 0.375rem;
    }
    
    /* 如果按鈕太多可能需要換行 */
    .modal-buttons-container > .d-flex:last-child[b-p2u1z9a00m] {
        flex-wrap: wrap;
        gap: 0.25rem !important;
    }
}
/* /Components/Shared/Modal/ModuleSettings/ApprovalSettingsSection.razor.rz.scp.css */
/* 審核模式卡片樣式（僅卡片 1 用，卡片 2 的審核人員指派樣式已搬至 ApproverAssignmentCard.razor.css） */

.approval-card[b-c3i7vny56y] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid transparent;
    transition: border-color 0.3s;
}

.approval-card--manual[b-c3i7vny56y] {
    border-left-color: var(--bs-warning, #ffc107);
}

.approval-card--auto[b-c3i7vny56y] {
    border-left-color: var(--bs-success, #198754);
}

.approval-card-header[b-c3i7vny56y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    color: var(--text-secondary);
}

.approval-card-header i[b-c3i7vny56y] {
    font-size: var(--fs-md);
}

.approval-card--manual .approval-card-header i[b-c3i7vny56y] {
    color: var(--bs-warning, #ffc107);
}

.approval-card--auto .approval-card-header i[b-c3i7vny56y] {
    color: var(--bs-success, #198754);
}

.approval-card-body[b-c3i7vny56y] {
    padding: 0.75rem 0.85rem;
}
/* /Components/Shared/Modal/ModuleSettings/ApprovalTierEditor.razor.rz.scp.css */
/* 階梯核准編輯器 */

.approval-tier-editor[b-c44a84bwxx] {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

.tier-header[b-c44a84bwxx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.tier-table[b-c44a84bwxx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tier-table-header[b-c44a84bwxx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 0.7fr 40px;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.tier-table-row[b-c44a84bwxx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 0.7fr 40px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
}
/* /Components/Shared/Modal/ModuleSettings/ApproverAssignmentCard.razor.rz.scp.css */
/* 審核人員指派卡片 — 從 ApprovalSettingsSection.razor.css 搬移過來的 scoped 樣式 */

/* 卡片外層共用 */
.approval-card[b-cyk4du7ujs] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid transparent;
    transition: border-color 0.3s;
}

.approval-card-header[b-cyk4du7ujs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    color: var(--text-secondary);
}

.approval-card-header i[b-cyk4du7ujs] {
    font-size: var(--fs-md);
}

.approval-card-body[b-cyk4du7ujs] {
    padding: 0.75rem 0.85rem;
}

/* 審核人員列表 */

.approver-list[b-cyk4du7ujs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.approver-item[b-cyk4du7ujs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    transition: background 0.15s;
}

.approver-item:hover[b-cyk4du7ujs] {
    background: var(--bg-secondary);
}

.approver-info[b-cyk4du7ujs] {
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

/* 空狀態 */

.approver-empty-state[b-cyk4du7ujs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
}

.approver-empty-state i[b-cyk4du7ujs] {
    font-size: var(--fs-lg);
    opacity: 0.35;
    margin-bottom: 0.5rem;
}

.approver-empty-state p[b-cyk4du7ujs] {
    margin: 0;
    text-align: center;
}

/* 提示訊息 */

.approval-hint[b-cyk4du7ujs] {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.35rem;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--color-primary);
    transition: background-color 0.3s, border-color 0.3s;
}
/* /Components/Shared/Modal/ModuleSettings/BusinessRuleSettingsSection.razor.rz.scp.css */
/* 業務規則設定區段 */

.defaults-hint[b-p8yj5qjw3n] {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    border: 1px solid var(--border-light);
}

.rules-list[b-p8yj5qjw3n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== 規則卡片 ===== */

.rule-card[b-p8yj5qjw3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    transition: background 0.15s;
}

.rule-card:hover[b-p8yj5qjw3n] {
    background: var(--bg-tertiary);
}

.rule-info[b-p8yj5qjw3n] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.rule-header[b-p8yj5qjw3n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rule-name[b-p8yj5qjw3n] {
    font-weight: 500;
    color: var(--text-primary);
}

.rule-trigger-badge[b-p8yj5qjw3n] {
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
    white-space: nowrap;
}

[data-bs-theme=dark] .rule-trigger-badge[b-p8yj5qjw3n] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.rule-description[b-p8yj5qjw3n] {
    color: var(--text-secondary);
    line-height: 1.3;
}

.rule-toggle[b-p8yj5qjw3n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rule-toggle .badge[b-p8yj5qjw3n] {
    min-width: 3.5rem;
    text-align: center;
}

/* Phase 2B：規則類型標籤 */
.rule-type-badge[b-p8yj5qjw3n] {
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
    white-space: nowrap;
}

[data-bs-theme=dark] .rule-type-badge[b-p8yj5qjw3n] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.rule-card-wrapper[b-p8yj5qjw3n] {
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/Modal/ModuleSettings/CodeSettingContent.razor.rz.scp.css */
/* 代碼自動產生設定內容 — popover 內嵌使用，無卡片邊框 */

.code-setting-form[b-kd2uk8maen] {
    display: flex;
    flex-direction: column;
}

.code-settings-header[b-kd2uk8maen] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.code-settings-header i[b-kd2uk8maen] {
    font-size: var(--fs-md);
    color: var(--bs-success, #198754);
}

.code-settings-body[b-kd2uk8maen] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.code-settings-row[b-kd2uk8maen] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.code-settings-label[b-kd2uk8maen] {
    min-width: 70px;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.code-settings-input[b-kd2uk8maen] {
    flex: 1;
    max-width: 200px;
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.code-settings-input:focus[b-kd2uk8maen] {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.2);
}

.code-preview[b-kd2uk8maen] {
    color: var(--bs-primary, #0d6efd);
}

.code-settings-help[b-kd2uk8maen] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-tertiary);
    border-radius: 0.25rem;
    color: var(--text-light);
}

.code-settings-help code[b-kd2uk8maen] {
    color: var(--text-secondary);
}
/* /Components/Shared/Modal/ModuleSettings/DefaultValueCell.razor.rz.scp.css */
/* 預設值儲存格 — Date mode 子輸入 */

.custom-days-input[b-0m9ijwro0x] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.custom-days-input .form-control-sm[b-0m9ijwro0x] {
    width: 80px;
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    text-align: center;
}

.custom-days-input .form-control-sm:focus[b-0m9ijwro0x] {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.2);
}

.custom-days-suffix[b-0m9ijwro0x] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.specific-date-input[b-0m9ijwro0x] {
    margin-top: 0.4rem;
}

.specific-date-input .form-control-sm[b-0m9ijwro0x] {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.specific-date-input .form-control-sm:focus[b-0m9ijwro0x] {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.2);
}
/* /Components/Shared/Modal/ModuleSettings/DisplayRulePopoverContent.razor.rz.scp.css */
/* 顯示規則 popover 內容 — 給 FieldAdvancedSettingsTrigger 內嵌使用，無卡片邊框 */

.display-rule-popover[b-thobbptgwe] {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 380px;
}

.display-rule-popover-header[b-thobbptgwe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.display-rule-popover-header i[b-thobbptgwe] {
    font-size: var(--fs-md);
    color: #EC4899;
}

.display-rule-popover-body[b-thobbptgwe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.display-rule-popover-row[b-thobbptgwe] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--border-light);
    border-radius: 0.4rem;
    transition: background 0.15s, border-color 0.15s;
}

.display-rule-popover-row:hover[b-thobbptgwe] {
    background: var(--bg-tertiary);
}

.display-rule-popover-row.is-enabled[b-thobbptgwe] {
    border-left-color: var(--success-color, #059669);
}

.display-rule-popover-icon[b-thobbptgwe] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.display-rule-popover-row.is-enabled .display-rule-popover-icon[b-thobbptgwe] {
    color: var(--success-color, #059669);
}

.display-rule-popover-info[b-thobbptgwe] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.display-rule-popover-name[b-thobbptgwe] {
    font-weight: 500;
    color: var(--text-primary);
}

.display-rule-popover-desc[b-thobbptgwe] {
    color: var(--text-secondary);
    line-height: 1.3;
}
/* /Components/Shared/Modal/ModuleSettings/DisplayRuleSettingsSection.razor.rz.scp.css */
/* 顯示規則設定區段 */

.defaults-hint[b-5pcnika37a] {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    border: 1px solid var(--border-light);
}

.rules-list[b-5pcnika37a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== 規則卡片 ===== */

.rule-card[b-5pcnika37a] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--border-light);
    border-radius: 0.5rem;
    transition: background 0.15s, border-color 0.15s;
}

.rule-card:hover[b-5pcnika37a] {
    background: var(--bg-tertiary);
}

.rule-card--enabled[b-5pcnika37a] {
    border-left-color: var(--success-color, #059669);
}

/* ===== 左側圖示 ===== */

.rule-icon-area[b-5pcnika37a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.rule-icon[b-5pcnika37a] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.rule-card--enabled .rule-icon-area[b-5pcnika37a] {
    background: rgba(5, 150, 105, 0.1);
}

.rule-card--enabled .rule-icon[b-5pcnika37a] {
    color: var(--success-color, #059669);
}

/* ===== 規則資訊 ===== */

.rule-info[b-5pcnika37a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.rule-header[b-5pcnika37a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rule-name[b-5pcnika37a] {
    font-weight: 500;
    color: var(--text-primary);
}

.rule-category-badge[b-5pcnika37a] {
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.2);
    white-space: nowrap;
}

[data-bs-theme=dark] .rule-category-badge[b-5pcnika37a] {
    background: rgba(236, 72, 153, 0.18);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
}

.rule-description[b-5pcnika37a] {
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== 開關區域 ===== */

.rule-toggle[b-5pcnika37a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rule-toggle .badge[b-5pcnika37a] {
    min-width: 3.5rem;
    text-align: center;
}
/* /Components/Shared/Modal/ModuleSettings/FieldAdvancedSettingsTrigger.razor.rz.scp.css */
/* 欄位進階設定觸發器：齒輪 button + popover */

.field-advanced-trigger[b-4jh0zz8a6w] {
    border: none;
    background: transparent;
    padding: 2px 4px;
    margin-left: 6px;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s;
}

.field-advanced-trigger:hover[b-4jh0zz8a6w] {
    color: var(--text-primary, #212529);
    background-color: rgba(0,0,0,0.05);
}

.field-advanced-trigger.is-active[b-4jh0zz8a6w] {
    color: var(--bs-success, #198754);
}

.field-advanced-popover[b-4jh0zz8a6w] {
    position: fixed;
    z-index: 99999;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    padding: 14px 16px;
    min-width: 320px;
    max-width: 420px;
}

@media (max-width: 768px) {
    .field-advanced-popover[b-4jh0zz8a6w] {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-width: none;
        border-radius: 12px 12px 0 0;
        max-height: 70vh;
        overflow-y: auto;
    }
}
/* /Components/Shared/Modal/ModuleSettings/FieldDisplaySettingsSection.razor.rz.scp.css */
/* ===== 區段分組 Accordion ===== */

.field-sections-list[b-tpeidyd8qr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-section-group[b-tpeidyd8qr] {
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* 新版 group header — checkbox + collapse button 平行 sibling 結構 */
.field-section-header-row[b-tpeidyd8qr] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    gap: 0.5rem;
    transition: background 0.15s, opacity 0.15s;
}

.field-section-header-row.section-hidden[b-tpeidyd8qr] {
    opacity: 0.55;
    background: var(--bg-secondary);
}

.field-section-header-row.section-hidden .field-section-title span:not(.field-section-count)[b-tpeidyd8qr] {
    text-decoration: line-through;
}

.section-toggle[b-tpeidyd8qr] {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.section-hidden-badge[b-tpeidyd8qr] {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 400;
    padding: 0.15rem 0.45rem;
}

.section-toggle:disabled[b-tpeidyd8qr] {
    cursor: not-allowed;
}

.field-section-header-button[b-tpeidyd8qr] {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.field-section-header-button:hover .field-section-title[b-tpeidyd8qr] {
    color: var(--text-primary);
}

/* 舊 class 保留向後相容（其他元件可能引用） */
.field-section-header[b-tpeidyd8qr] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.field-section-header:hover[b-tpeidyd8qr] {
    background: var(--bg-secondary);
}

.field-section-title[b-tpeidyd8qr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    width: 100%;
}

.field-section-chevron[b-tpeidyd8qr] {
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.field-section-icon[b-tpeidyd8qr] {
    color: #6366f1;
}

.field-section-count[b-tpeidyd8qr] {
    margin-left: auto;
    font-weight: 400;
    color: var(--text-secondary);
    padding: 0.1rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--border-light);
}

.field-section-body[b-tpeidyd8qr] {
    border-top: 1px solid var(--border-light);
}

/* 區段覆蓋控制項 */

.section-override-container[b-tpeidyd8qr] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-override-container .form-select-sm[b-tpeidyd8qr] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.section-override-container .form-select-sm:focus[b-tpeidyd8qr] {
    border-color: #F59E0B;
    box-shadow: 0 0 0 0.15rem rgba(245, 158, 11, 0.2);
}

.section-override-container .form-select-sm option[b-tpeidyd8qr] {
    background: #1e293b;
    color: #e2e8f0;
}

/* 自訂區段輸入（比照 custom-days-input 模式） */

.custom-section-input[b-tpeidyd8qr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.custom-section-input .form-control-sm[b-tpeidyd8qr] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.custom-section-input .form-control-sm:focus[b-tpeidyd8qr] {
    border-color: #F59E0B;
    box-shadow: 0 0 0 0.15rem rgba(245, 158, 11, 0.2);
}
/* /Components/Shared/Modal/ModuleSettings/FieldSettingsPanel.razor.rz.scp.css */
/* EBC 模組設定面板（書籤式導航） — 字型遵循 typography.css 變數 */

.field-settings-overlay[b-e2lfs1zyxj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1060;
    display: flex;
    justify-content: flex-end;
}

/* ===== 面板外層（flex-column：header / content-row / footer） ===== */

.field-settings-panel[b-e2lfs1zyxj] {
    display: flex;
    flex-direction: column;
    width: 620px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-primary);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.25s ease-out;
}

@@keyframes slideInRight {
    from[b-e2lfs1zyxj] { transform: translateX(100%); }
    to[b-e2lfs1zyxj]   { transform: translateX(0); }
}

/* ===== 書籤 + 內容橫向排列 ===== */

.field-settings-content-row[b-e2lfs1zyxj] {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== 左側書籤列 ===== */

.field-settings-bookmarks[b-e2lfs1zyxj] {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    gap: 0.25rem;
    position: relative;
    z-index: 2;
    margin-right: 0.35rem;
}

.field-settings-bookmark[b-e2lfs1zyxj] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border: none;
    background-color: var(--bookmark-color, #3B82F6);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.35rem;
    cursor: pointer;
    border-radius: 0.4rem 0 0 0.4rem;
    transition: filter 0.15s, transform 0.15s, padding 0.15s;
    white-space: nowrap;
    letter-spacing: 0.08em;
    min-width: 2rem;
    text-align: center;
    box-shadow: -2px 1px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 0;
}

.field-settings-bookmark:hover[b-e2lfs1zyxj] {
    filter: brightness(1.1);
    transform: translateX(-3px);
    padding: 0.55rem 0.4rem;
}

.field-settings-bookmark.active[b-e2lfs1zyxj] {
    filter: brightness(1.15);
    transform: translateX(-4px);
    padding: 0.55rem 0.45rem;
    box-shadow: -3px 1px 8px rgba(0, 0, 0, 0.18);
}

.field-settings-bookmark-text[b-e2lfs1zyxj] {
    display: block;
}

/* ===== 內容區（content-row 內右側） ===== */

.field-settings-header[b-e2lfs1zyxj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--primary-white);
    flex-shrink: 0;
}

.field-settings-title[b-e2lfs1zyxj] {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.3;
}

.field-settings-notice[b-e2lfs1zyxj] {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.field-settings-body[b-e2lfs1zyxj] {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/* 讓 .field-settings-body 統一處理捲動，table-responsive 不再產生自己的捲軸 */
[b-e2lfs1zyxj] .table-responsive {
    overflow: visible;
}

.field-settings-footer[b-e2lfs1zyxj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}

/* 隱藏欄位的列樣式 */
[b-e2lfs1zyxj] .field-row-hidden {
    opacity: 0.5;
}

/* TabDisplaySettingsSection 樣式已搬入 TabDisplaySettingsSection.razor.css（scoped） */

/* ===== 設定區段 ===== */

.settings-section[b-e2lfs1zyxj] {
    padding: 1rem;
}

.settings-section-title[b-e2lfs1zyxj] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
}

/* ===== 儲存狀態指示器 ===== */

.save-status[b-e2lfs1zyxj] {
    font-weight: 500;
    white-space: nowrap;
    animation: fadeIn 0.2s ease-out;
}

.save-status--saving[b-e2lfs1zyxj] {
    color: var(--text-secondary);
}

.save-status--saved[b-e2lfs1zyxj] {
    color: #10b981;
}

.save-status--error[b-e2lfs1zyxj] {
    color: #ef4444;
}

@@keyframes fadeIn {
    from[b-e2lfs1zyxj] { opacity: 0; }
    to[b-e2lfs1zyxj]   { opacity: 1; }
}

/* ===== 恢復預設確認 dialog ===== */

.reset-confirm-overlay[b-e2lfs1zyxj] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn 0.15s ease-out;
}

.reset-confirm-dialog[b-e2lfs1zyxj] {
    background: var(--bg-primary);
    border-radius: 0.5rem;
    padding: 1.25rem;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.reset-confirm-title[b-e2lfs1zyxj] {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.reset-confirm-body[b-e2lfs1zyxj] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* ===== 深色模式微調 ===== */

[data-bs-theme=dark] .field-settings-overlay[b-e2lfs1zyxj] {
    background: rgba(0, 0, 0, 0.5);
}

[data-bs-theme=dark] .field-settings-panel[b-e2lfs1zyxj] {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

/* ===== 響應式（手機模式書籤水平排列） ===== */

@media (max-width: 640.98px) {
    .field-settings-panel[b-e2lfs1zyxj] {
        width: 100vw;
        max-width: 100vw;
    }

    .field-settings-content-row[b-e2lfs1zyxj] {
        flex-direction: column;
        background: var(--bg-secondary);
    }

    .field-settings-bookmarks[b-e2lfs1zyxj] {
        flex-direction: row;
        padding-top: 0;
        padding: 0.5rem 0.5rem 0;
        background: var(--bg-secondary);
    }

    .field-settings-bookmark[b-e2lfs1zyxj] {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        border-radius: 0.4rem 0.4rem 0 0;
        left: 0;
        padding: 0.35rem 0.75rem;
        min-width: auto;
    }

    .field-settings-bookmark:hover[b-e2lfs1zyxj],
    .field-settings-bookmark.active[b-e2lfs1zyxj] {
        transform: translateY(-2px);
    }

    .field-settings-body[b-e2lfs1zyxj] {
        background: var(--bg-primary);
        border-radius: 0.6rem 0.6rem 0 0;
        margin: 0 0.4rem;
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
    }

    .field-settings-footer[b-e2lfs1zyxj] {
        margin: 0 0.4rem;
    }

    .settings-section[b-e2lfs1zyxj] {
        padding: 0.85rem 0.75rem;
    }
}
/* /Components/Shared/Modal/ModuleSettings/MultiApprovalEditor.razor.rz.scp.css */
/* 多人核准編輯器 */

.multi-approval-editor[b-xnskc5fsyy] {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

.approver-list[b-xnskc5fsyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.approver-chip[b-xnskc5fsyy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
}

.btn-remove[b-xnskc5fsyy] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-remove:hover[b-xnskc5fsyy] {
    color: var(--danger);
}
/* /Components/Shared/Modal/ModuleSettings/RuleConditionEditor.razor.rz.scp.css */
/* 規則條件編輯器 */

.rule-condition-editor[b-kmhee3i7d9] {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
}

.condition-section-header[b-kmhee3i7d9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.condition-row[b-kmhee3i7d9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.condition-row .form-select[b-kmhee3i7d9] {
    max-width: 180px;
}

.condition-row .form-control[b-kmhee3i7d9] {
    max-width: 150px;
}

.action-section[b-kmhee3i7d9] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.action-row[b-kmhee3i7d9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* /Components/Shared/Modal/ModuleSettings/TabDisplaySettingsSection.razor.rz.scp.css */
/* Tab 頁籤顯示設定 — UX 完全對齊 BusinessRuleSettingsSection */

/* ===== 頂部 hint ===== */

.defaults-hint[b-re8lrv3lw7] {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    border: 1px solid var(--border-light);
}

/* ===== 清單外層 ===== */

.rules-list[b-re8lrv3lw7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== 分組 accordion（每 Tab 一個 group） ===== */

.rule-group[b-re8lrv3lw7] {
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* header 是兩欄：左側 toggle button + 右側 trailing（badge/switch） */
.rule-group-header[b-re8lrv3lw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: var(--bg-tertiary);
    transition: background 0.15s;
}

.rule-group-header:hover[b-re8lrv3lw7] {
    background: var(--bg-secondary);
}

/* 左側可點 toggle 區（站滿剩餘寬度） */
.rule-group-toggle[b-re8lrv3lw7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-weight: 500;
    min-width: 0;
}

.rule-group-chevron[b-re8lrv3lw7] {
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.rule-group-icon[b-re8lrv3lw7] {
    color: #06b6d4;   /* cyan-500，呼應「頁籤」書籤色 */
    flex-shrink: 0;
}

.rule-group-name[b-re8lrv3lw7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右側 trailing：count badge + visibility badge + switch */
.rule-group-trailing[b-re8lrv3lw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem 0.5rem 0;
    flex-shrink: 0;
}

.rule-group-count[b-re8lrv3lw7] {
    font-weight: 400;
    color: var(--text-secondary);
    padding: 0.1rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--border-light);
}

.rule-group-trailing .badge[b-re8lrv3lw7] {
    min-width: 3rem;
    text-align: center;
}

.rule-group-body[b-re8lrv3lw7] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===== 規則卡片（每個按鈕一張） ===== */

.rule-card[b-re8lrv3lw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    transition: background 0.15s;
}

.rule-card:hover[b-re8lrv3lw7] {
    background: var(--bg-tertiary);
}

.rule-info[b-re8lrv3lw7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.rule-header[b-re8lrv3lw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rule-name-icon[b-re8lrv3lw7] {
    color: var(--text-secondary);
}

.rule-name[b-re8lrv3lw7] {
    font-weight: 500;
    color: var(--text-primary);
}

.rule-trigger-badge[b-re8lrv3lw7] {
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
    white-space: nowrap;
}

[data-bs-theme=dark] .rule-trigger-badge[b-re8lrv3lw7] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.rule-type-badge[b-re8lrv3lw7] {
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
    white-space: nowrap;
}

[data-bs-theme=dark] .rule-type-badge[b-re8lrv3lw7] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.rule-description[b-re8lrv3lw7] {
    color: var(--text-secondary);
    line-height: 1.3;
}

/* 風險提示：橘色警示，鼓勵管理員注意隱藏的影響 */
.rule-risk[b-re8lrv3lw7] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    color: #d97706;        /* amber-600 */
    line-height: 1.3;
    margin-top: 0.1rem;
}

[data-bs-theme=dark] .rule-risk[b-re8lrv3lw7] {
    color: #fbbf24;        /* amber-400 */
}

.rule-risk .bi-exclamation-triangle-fill[b-re8lrv3lw7] {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* 右側 toggle column */
.rule-toggle[b-re8lrv3lw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rule-toggle .badge[b-re8lrv3lw7] {
    min-width: 3.5rem;
    text-align: center;
}

/* ===== 無可配置按鈕的說明卡 ===== */

.rule-empty-card[b-re8lrv3lw7] {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
/* /Components/Shared/Modal/ModuleSettings/TableColumnDisplaySettingsSection.razor.rz.scp.css */
/* ===== 區段分組 Accordion（與 FieldDisplaySettingsSection 保持視覺一致） ===== */

.field-sections-list[b-hhlx9a6hh4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-section-group[b-hhlx9a6hh4] {
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    overflow: hidden;
}

.field-section-header[b-hhlx9a6hh4] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.field-section-header:hover[b-hhlx9a6hh4] {
    background: var(--bg-secondary);
}

.field-section-title[b-hhlx9a6hh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    width: 100%;
}

.field-section-chevron[b-hhlx9a6hh4] {
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.field-section-icon[b-hhlx9a6hh4] {
    color: #6366f1;
}

.field-section-count[b-hhlx9a6hh4] {
    margin-left: auto;
    font-weight: 400;
    color: var(--text-secondary);
    padding: 0.1rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--border-light);
}

.field-section-body[b-hhlx9a6hh4] {
    border-top: 1px solid var(--border-light);
}

/* ===== 父層注入的特殊 row（如顯示模式齒輪）— 看起來像 group body 的第一個 row ===== */

.field-section-injected-row[b-hhlx9a6hh4] {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.field-section-injected-row > *[b-hhlx9a6hh4] {
    flex: 1;
    min-width: 0;
}

/* ===== Tab badge — 在 group header title 前綴，標示此子表所屬的 Tab ===== */

.tab-badge[b-hhlx9a6hh4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #eef2f7;
    color: #4a5568;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.tab-badge .bi[b-hhlx9a6hh4] {
    font-size: 0.7rem;
}
/* /Components/Shared/Modal/ModuleSettings/UnifiedFieldDisplaySection.razor.rz.scp.css */
/* 欄位顯示統一設定區段 — Domain Band 區分 List/Index 與 Form/Edit 兩個域 */

.unified-field-display[b-dhaxvdm51i] {
    display: flex;
    flex-direction: column;
}

.domain-band[b-dhaxvdm51i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    border-left: 4px solid var(--domain-accent, #6b7280);
    margin-bottom: 0.75rem;
}

.domain-band ~ .domain-band[b-dhaxvdm51i] {
    margin-top: 1rem;
}

.domain-band--tables[b-dhaxvdm51i] {
    --domain-accent: #06B6D4;
}

.domain-band--form[b-dhaxvdm51i] {
    --domain-accent: #F59E0B;
}

.domain-band-icon[b-dhaxvdm51i] {
    font-size: 1.25rem;
    color: var(--domain-accent);
    flex-shrink: 0;
}

.domain-band-text[b-dhaxvdm51i] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.domain-band-title[b-dhaxvdm51i] {
    font-weight: 600;
    color: var(--text-primary);
}

.domain-band-subtitle[b-dhaxvdm51i] {
    color: var(--text-muted);
    line-height: 1.3;
}

/* ===== 顯示模式齒輪橫條 ===== */
/* 多場景共用：Form-only fallback / Table group 內注入 / standalone。
   外觀統一以 flex 排版，視覺由 parent 容器決定 margin/border。 */

.display-mode-row[b-dhaxvdm51i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.display-mode-label[b-dhaxvdm51i] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.display-mode-label i[b-dhaxvdm51i] {
    color: #EC4899;
    font-size: 1.1rem;
}

/* Form fallback / standalone 場景：補上獨立卡片外觀（Table group 內注入時不套用此卡片，由
   .field-section-injected-row 提供視覺容器） */
.unified-field-display > .display-mode-row[b-dhaxvdm51i] {
    padding: 0.55rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid #EC4899;
    border-radius: 0.4rem;
    margin-bottom: 0.75rem;
}
/* /Components/Shared/Page/GenericIndexPageComponent.razor.rz.scp.css */
/* 通用 Index 頁面組件樣式 */

/* 搜尋與表格分隔線 */
.search-table-divider[b-298c6d6sen] {
    border-top: 1px solid var(--border-light);
    margin: 1.25rem 0 1rem 0;
    opacity: 0.5;
}

/* ===== Desktop 篩選折疊控制列 ===== */
.filter-desktop-toggle[b-298c6d6sen] {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.35rem;
    margin-bottom: 0.5rem;
}

/* ===== 篩選切換按鈕（桌機） ===== */
.filter-toggle-btn[b-298c6d6sen] {
    line-height: 1.4;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

/* 無篩選作用中：實心藍（沿用 ButtonVariant.Blue = btn-info = --info-color #0891B2，白字） */
.filter-toggle-btn-idle[b-298c6d6sen] {
    color: var(--primary-white, #fff);
    background-color: var(--info-color);
    border: 1px solid var(--info-color);
}
.filter-toggle-btn-idle:hover[b-298c6d6sen] {
    background-color: var(--info-color-hover);
    border-color: var(--info-color-hover);
    color: var(--primary-white, #fff);
}

/* 有篩選作用中：實心藍（沿用 primary-blue token） */
.filter-toggle-btn-active[b-298c6d6sen] {
    color: var(--primary-white, #fff);
    background-color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}
.filter-toggle-btn-active:hover[b-298c6d6sen] {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
    color: var(--primary-white, #fff);
}

/* 計數 badge（桌機）：在實心藍按鈕上用白底深字 */
.filter-count-badge[b-298c6d6sen] {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--primary-blue);
    font-size: 0.7rem;
    padding: 0.15em 0.5em;
    font-weight: 700;
    min-width: 1.5em;
}

/* 篩選折疊控制列的徽章繼承樣式（向後兼容） */
.filter-desktop-toggle .badge[b-298c6d6sen] {
    font-weight: 600;
}

/* Desktop 篩選折疊：隱藏面板 */
.filter-mobile-panel.filter-desktop-collapsed[b-298c6d6sen] {
    display: none;
}

/* 手機版恢復（fixed overlay 機制不受影響） */
@media (max-width: 767px) {
    .filter-mobile-panel.filter-desktop-collapsed[b-298c6d6sen] {
        display: block;
    }
}

/* 操作按鈕樣式 - 覆蓋 Bootstrap 的預設樣式 */

/* 檢視按鈕 - 使用原本 btn-outline-primary 的 hover 顏色作為背景色 */
.btn-outline-primary[b-298c6d6sen] {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.btn-outline-primary:hover:not(:disabled)[b-298c6d6sen] {
    background-color: #fde68a !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
}

.btn-outline-primary:active:not(:disabled)[b-298c6d6sen] {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(13, 110, 253, 0.2);
}

.btn-outline-primary:focus:not(:disabled)[b-298c6d6sen] {
    box-shadow: 0 0 0 0.2rem rgba(146, 64, 14, 0.25) !important;
}

/* 編輯按鈕 - 使用原本 btn-outline-warning 的 hover 顏色作為背景色 */
.btn-outline-warning[b-298c6d6sen] {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
}

.btn-outline-warning:hover:not(:disabled)[b-298c6d6sen] {
    background-color: #fde68a !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
}

.btn-outline-warning:active:not(:disabled)[b-298c6d6sen] {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 193, 7, 0.2);
}

.btn-outline-warning:focus:not(:disabled)[b-298c6d6sen] {
    box-shadow: 0 0 0 0.2rem rgba(146, 64, 14, 0.25) !important;
}

/* 刪除按鈕 - 使用原本 btn-outline-danger 的 hover 顏色作為背景色 */
.btn-outline-danger[b-298c6d6sen] {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.btn-outline-danger:hover:not(:disabled)[b-298c6d6sen] {
    background-color: #fde68a !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
}

.btn-outline-danger:active:not(:disabled)[b-298c6d6sen] {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.2);
}

.btn-outline-danger:focus:not(:disabled)[b-298c6d6sen] {
    box-shadow: 0 0 0 0.2rem rgba(146, 64, 14, 0.25) !important;
}

/* 通用按鈕動畫效果 */
.btn-group .btn[b-298c6d6sen] {
    transition: all 0.2s ease-in-out;
}

/* 禁用狀態樣式 */
.btn:disabled[b-298c6d6sen] {
    opacity: 0.65;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* 響應式設計 */
@media (max-width: 576px) {
    .btn-group .btn[b-298c6d6sen] {
        padding: 0.375rem 0.75rem;
    }
}

/* ===== 深色模式：按鈕 hover 改為半透明色調（避免淺黃色在深色背景突兀）===== */
[data-bs-theme=dark] .btn-outline-primary:hover:not(:disabled)[b-298c6d6sen] {
    background-color: rgba(88, 166, 255, 0.15) !important;
    border-color: #58a6ff !important;
    color: #58a6ff !important;
    box-shadow: 0 2px 4px rgba(88, 166, 255, 0.2);
}

[data-bs-theme=dark] .btn-outline-warning:hover:not(:disabled)[b-298c6d6sen] {
    background-color: rgba(227, 179, 65, 0.15) !important;
    border-color: #e3b341 !important;
    color: #e3b341 !important;
    box-shadow: 0 2px 4px rgba(227, 179, 65, 0.2);
}

[data-bs-theme=dark] .btn-outline-danger:hover:not(:disabled)[b-298c6d6sen] {
    background-color: rgba(248, 81, 73, 0.15) !important;
    border-color: #f85149 !important;
    color: #f85149 !important;
    box-shadow: 0 2px 4px rgba(248, 81, 73, 0.2);
}

/* ===== 手機版篩選底部抽屜模式 ===== */

/* 把手按鈕：桌機預設隱藏 */
.filter-tab-handle[b-298c6d6sen] {
    display: none;
}

/* 面板標題列：桌機隱藏 */
.filter-panel-header[b-298c6d6sen] {
    display: none;
}

@media (max-width: 767px) {
    /* 把手按鈕：固定在底部中央，膠囊形狀 */
    .filter-tab-handle[b-298c6d6sen] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        position: fixed;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1038;
        background: var(--primary-blue);
        color: var(--primary-white);
        border: none;
        border-radius: 24px;
        padding: 0.55rem 1.4rem;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(var(--primary-blue-rgb), 0.4);
        outline: none;
        white-space: nowrap;
        transition: box-shadow 0.2s, transform 0.15s;
    }

    .filter-tab-handle:active[b-298c6d6sen] {
        transform: translateX(-50%) scale(0.96);
        box-shadow: 0 2px 8px rgba(var(--primary-blue-rgb), 0.3);
    }

    .filter-tab-handle i[b-298c6d6sen] {
        color: var(--primary-white);
    }

    .filter-tab-label[b-298c6d6sen] {
        font-weight: 600;
        color: var(--primary-white);
        letter-spacing: 0.5px;
    }

    /* 手機版把手 active 狀態：略加陰影暗示「有篩選作用中」 */
    .filter-tab-handle-active[b-298c6d6sen] {
        box-shadow: 0 6px 20px rgba(var(--primary-blue-rgb), 0.55);
    }

    /* 手機版計數 badge：白底深字 */
    .filter-count-badge-mobile[b-298c6d6sen] {
        background-color: var(--primary-white, #fff);
        color: var(--primary-blue);
        font-size: 0.72rem;
        padding: 0.15em 0.5em;
        font-weight: 700;
        min-width: 1.5em;
    }

    /* 遮罩：覆蓋整個 viewport */
    .filter-backdrop[b-298c6d6sen] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
        cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */
    }

    /* 底部抽屜面板 */
    .filter-mobile-panel[b-298c6d6sen] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 82vh;
        z-index: 1045;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-light);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 拖曳指示條 */
    .filter-mobile-panel[b-298c6d6sen]::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-light, #dee2e6);
        margin: 0.75rem auto 0;
    }

    .filter-mobile-panel.mobile-open[b-298c6d6sen] {
        transform: translateY(0);
    }

    /* 面板標題列：手機版顯示 */
    .filter-panel-header[b-298c6d6sen] {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-light);
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-secondary);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .filter-panel-header i[b-298c6d6sen] {
        color: var(--primary-blue);
    }
}

/* ===== Excel 匯出進度條 Overlay ===== */

.index-export-progress-overlay[b-298c6d6sen] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.index-export-progress-card[b-298c6d6sen] {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 360px;
    text-align: center;
}

.index-export-progress-message[b-298c6d6sen] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.index-export-progress-bar[b-298c6d6sen] {
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
}

.index-export-progress-bar .progress-bar[b-298c6d6sen] {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
}

[data-bs-theme=dark] .index-export-progress-overlay[b-298c6d6sen] {
    background: rgba(0, 0, 0, 0.75);
}

[data-bs-theme=dark] .index-export-progress-card[b-298c6d6sen] {
    background: var(--bg-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-bs-theme=dark] .index-export-progress-message[b-298c6d6sen] {
    color: var(--text-primary);
}

/* 深色模式：底部抽屜面板（加強陰影，其餘顏色由 CSS 變數自動切換） */
[data-bs-theme=dark] .filter-mobile-panel[b-298c6d6sen] {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

/* ===== 草稿/正式切換按鈕群組（視覺與 form-tab-btn 一致）===== */

.index-draft-tab-btn-group[b-298c6d6sen] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.15rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    margin-right: 0.5rem;
}

.index-draft-tab-btn[b-298c6d6sen] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

.index-draft-tab-btn:hover[b-298c6d6sen] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    border-color: rgba(var(--primary-blue-rgb), 0.4);
}

.index-draft-tab-btn.active[b-298c6d6sen] {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    font-weight: 600;
}

.index-draft-tab-btn.active:hover[b-298c6d6sen] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}

.index-draft-tab-btn i[b-298c6d6sen] {
}

@media (max-width: 576px) {
    .index-draft-tab-btn-group[b-298c6d6sen] {
        margin-right: 0.25rem;
    }

    .index-draft-tab-btn[b-298c6d6sen] {
        padding: 0.2rem 0.5rem;
    }
}

[data-bs-theme=dark] .index-draft-tab-btn.active[b-298c6d6sen] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
/* /Components/Shared/Page/IndexActionButtonsComponent.razor.rz.scp.css */
/* IndexActionButtonsComponent 專用樣式
   控制 Index 頁面工具列按鈕的響應式行為 */

/* mobile 響應式：≤575.98px — 按鈕列改成水平可滑動，不換行（行為對齊 Tab 滑動列） */
@media (max-width: 575.98px) {

    /* 工具列容器：不換行、水平滑動、隱藏捲軸 */
    .index-action-buttons[b-68tqfqndzf] {
        flex-wrap: nowrap;              /* 不換行 */
        overflow-x: auto;               /* 水平滑動 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 慣性滑動 */
        scrollbar-width: none;          /* Firefox 隱藏捲軸 */
        -ms-overflow-style: none;       /* IE/Edge 隱藏捲軸 */
        width: 100%;                    /* 佔滿父層 wrap 後分到的整列寬 */
        min-width: 0;                   /* 關鍵：允許收縮到比內容窄 → 才會出現滑動而非撐破畫面 */
        max-width: 100%;
        gap: 0.35rem !important;        /* 收緊間距 */
    }

    /* 隱藏 WebKit 捲軸（跟 Tab 一樣不顯示捲軸） */
    .index-action-buttons[b-68tqfqndzf]::-webkit-scrollbar {
        display: none;
    }

    /* 按鈕本身：不被壓縮、文字不換行 */
    .index-action-buttons[b-68tqfqndzf]  .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
/* /Components/Shared/PersonalTools/AiAssistantDrawer.razor.rz.scp.css */
/* ===== 遮罩層 ===== */
.ai-assistant-backdrop[b-e6uz7adhbi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    cursor: pointer;
    animation: fadeIn-b-e6uz7adhbi 0.2s ease;
}

/* ===== 抽屜外殼 ===== */
.ai-assistant-drawer[b-e6uz7adhbi] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: auto;
    z-index: 1051;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.ai-assistant-drawer.open[b-e6uz7adhbi] {
    transform: translateX(0);
    pointer-events: all;
}

.ai-assistant-panel[b-e6uz7adhbi] {
    position: relative;
    height: 100%;
    width: 400px; /* 預設,JS 拖拉後會被覆寫 */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* ===== 左緣拖拉條 ===== */
.ai-resize-handle[b-e6uz7adhbi] {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    background-color: transparent;
    transition: background-color 0.15s;
    z-index: 10;
}

.ai-resize-handle:hover[b-e6uz7adhbi] {
    background-color: var(--primary-blue);
    opacity: 0.6;
}

/* ===== 標題列 ===== */
.drawer-header[b-e6uz7adhbi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.drawer-title[b-e6uz7adhbi] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.drawer-title-main[b-e6uz7adhbi] {
    display: flex;
    align-items: center;
}

.drawer-model-line[b-e6uz7adhbi] {
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-close-btn[b-e6uz7adhbi] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.drawer-close-btn:hover[b-e6uz7adhbi] {
    background-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== 對話歷史區 ===== */
.ai-chat-history[b-e6uz7adhbi] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.drawer-empty[b-e6uz7adhbi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--text-secondary);
    gap: 8px;
    flex: 1;
}

.empty-icon[b-e6uz7adhbi] {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* ===== 對話泡泡 ===== */
.chat-bubble[b-e6uz7adhbi] {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 4px;
    word-wrap: break-word;
}

.chat-bubble.role-user[b-e6uz7adhbi] {
    align-self: flex-end;
    background-color: var(--primary-blue);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble.role-assistant[b-e6uz7adhbi] {
    align-self: flex-start;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.bubble-meta[b-e6uz7adhbi] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.7rem;
    opacity: 0.7;
}

.chat-bubble.role-user .bubble-meta[b-e6uz7adhbi] {
    color: rgba(255, 255, 255, 0.85);
}

.role-name[b-e6uz7adhbi] {
    font-weight: 600;
}

.bubble-time[b-e6uz7adhbi] {
    font-variant-numeric: tabular-nums;
}

/* role-name 佔據左側,把時間與朗讀鈕推到右邊 */
.bubble-meta .role-name[b-e6uz7adhbi] {
    margin-right: auto;
}

/* 每則回應的朗讀/停止鈕 */
.bubble-tts-btn[b-e6uz7adhbi] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.bubble-tts-btn:hover[b-e6uz7adhbi] {
    opacity: 1;
}

/* 標題列「自動朗讀」開啟狀態 */
.drawer-close-btn.tts-active[b-e6uz7adhbi] {
    color: var(--bs-primary, #0d6efd);
}

.bubble-content[b-e6uz7adhbi] {
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ===== Typing 動畫 ===== */
.ai-typing-indicator .bubble-content[b-e6uz7adhbi] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dot[b-e6uz7adhbi] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typing-bounce-b-e6uz7adhbi 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2)[b-e6uz7adhbi] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-e6uz7adhbi] { animation-delay: 0.4s; }

@keyframes typing-bounce-b-e6uz7adhbi {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ===== 輸入列 ===== */
.ai-chat-inputbar[b-e6uz7adhbi] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.ai-chat-input[b-e6uz7adhbi] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    resize: none;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ai-chat-input:focus[b-e6uz7adhbi] {
    border-color: var(--primary-blue);
}

.ai-chat-input:disabled[b-e6uz7adhbi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-send[b-e6uz7adhbi] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.btn-send:hover:not(:disabled)[b-e6uz7adhbi] {
    opacity: 0.85;
}

.btn-send:disabled[b-e6uz7adhbi] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 麥克風鈕 (語音輸入) */
.btn-mic[b-e6uz7adhbi] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary, #fff);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}

.btn-mic:hover:not(:disabled)[b-e6uz7adhbi] {
    color: var(--text-primary);
}

.btn-mic:disabled[b-e6uz7adhbi] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 錄音中:紅色 + 呼吸動畫 */
.btn-mic.recording[b-e6uz7adhbi] {
    border-color: #dc3545;
    color: #dc3545;
    animation: micPulse-b-e6uz7adhbi 1.2s ease-in-out infinite;
}

@keyframes micPulse-b-e6uz7adhbi {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0); }
}

/* ===== 響應式 ===== */
@media (max-width: 480px) {
    .ai-assistant-panel[b-e6uz7adhbi] {
        width: calc(100vw - 56px) !important; /* 覆寫 JS 設定的 px */
    }
    .ai-resize-handle[b-e6uz7adhbi] {
        display: none; /* 手機不允許拖拉 */
    }
}

/* ===== 動畫 ===== */
@keyframes fadeIn-b-e6uz7adhbi {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Shared/PersonalTools/CalendarDrawer.razor.rz.scp.css */
/* ===== 遮罩層 ===== */
.calendar-backdrop[b-1zetocx2u4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */
    animation: fadeIn-b-1zetocx2u4 0.2s ease;
}

/* ===== 面板容器 ===== */
.calendar-drawer[b-1zetocx2u4] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 400px;
    z-index: 1051;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.calendar-drawer.open[b-1zetocx2u4] {
    transform: translateX(0);
    pointer-events: all;
}

.calendar-panel[b-1zetocx2u4] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* ===== 標題列（共用） ===== */
.drawer-header[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.drawer-title[b-1zetocx2u4] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.drawer-close-btn[b-1zetocx2u4] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.drawer-close-btn:hover[b-1zetocx2u4] {
    background-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== 迷你月曆 ===== */
.mini-calendar[b-1zetocx2u4] {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.calendar-nav[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.month-title[b-1zetocx2u4] {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
}

.nav-btn[b-1zetocx2u4] {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.2s;
}

.nav-btn:hover[b-1zetocx2u4] {
    background-color: var(--border-color);
}

.today-btn[b-1zetocx2u4] {
    background: none;
    border: 1px solid var(--primary-blue);
    border-radius: 6px;
    padding: 2px 8px;
    color: var(--primary-blue);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.today-btn:hover[b-1zetocx2u4] {
    background-color: var(--primary-blue);
    color: white;
}

/* ===== 星期標題 ===== */
.weekday-header[b-1zetocx2u4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.weekday-cell[b-1zetocx2u4] {
    text-align: center;
    color: var(--text-secondary);
    padding: 4px 0;
    font-weight: 500;
}

/* ===== 日期格 ===== */
.calendar-grid[b-1zetocx2u4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.day-cell[b-1zetocx2u4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.15s;
    padding: 2px;
}

.day-cell:hover[b-1zetocx2u4] {
    background-color: var(--border-color);
}

.day-cell.other-month[b-1zetocx2u4] {
    color: var(--text-secondary);
    opacity: 0.5;
}

.day-cell.today .day-num[b-1zetocx2u4] {
    background-color: var(--primary-blue);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.day-cell.selected:not(.today)[b-1zetocx2u4] {
    background-color: color-mix(in srgb, var(--primary-blue) 15%, transparent);
}

.day-num[b-1zetocx2u4] {
    line-height: 1;
}

.event-dot[b-1zetocx2u4] {
    width: 4px;
    height: 4px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    margin-top: 2px;
}

/* ===== 議程區塊 ===== */
.agenda-section[b-1zetocx2u4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agenda-header[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.agenda-date-label[b-1zetocx2u4] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.today-badge[b-1zetocx2u4] {
    background-color: var(--primary-blue);
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.btn-add-event[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--primary-blue);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--primary-blue);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-add-event:hover[b-1zetocx2u4] {
    background-color: var(--primary-blue);
    color: white;
}

/* ===== 新增事項表單 ===== */
.event-add-form[b-1zetocx2u4] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.event-input[b-1zetocx2u4] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.event-input:focus[b-1zetocx2u4] {
    border-color: var(--primary-blue);
}

.event-form-row[b-1zetocx2u4] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ===== 事項清單 ===== */
.events-list[b-1zetocx2u4] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-loading[b-1zetocx2u4],
.event-empty[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-secondary);
}

.event-item[b-1zetocx2u4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
}

.event-item:hover[b-1zetocx2u4] {
    background-color: var(--bg-primary);
}

.event-item.editing[b-1zetocx2u4] {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}

.event-edit-form[b-1zetocx2u4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.event-edit-hint[b-1zetocx2u4] {
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s;
    margin-left: auto;
}

.event-item:hover .event-edit-hint[b-1zetocx2u4] {
    opacity: 1;
}

.btn-delete[b-1zetocx2u4] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
}

.btn-delete:hover[b-1zetocx2u4] {
    color: #ef4444;
}

.event-item.event-color-yellow[b-1zetocx2u4] { border-left-color: #eab308; }
.event-item.event-color-green[b-1zetocx2u4]  { border-left-color: #22c55e; }
.event-item.event-color-blue[b-1zetocx2u4]   { border-left-color: #3b82f6; }
.event-item.event-color-red[b-1zetocx2u4]    { border-left-color: #ef4444; }

.event-time[b-1zetocx2u4] {
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 42px;
}

.event-title[b-1zetocx2u4] {
    flex: 1;
    color: var(--text-primary);
}

.event-delete-btn[b-1zetocx2u4] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.event-item:hover .event-delete-btn[b-1zetocx2u4] {
    opacity: 1;
}

.event-delete-btn:hover[b-1zetocx2u4] {
    color: #ef4444;
}

/* ===== 顏色選擇器（共用） ===== */
.color-picker[b-1zetocx2u4] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.color-dot[b-1zetocx2u4] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.color-dot:hover[b-1zetocx2u4] { transform: scale(1.2); }

.color-dot.selected[b-1zetocx2u4] {
    border-color: var(--text-primary);
    transform: scale(1.15);
}

.color-dot.color-yellow[b-1zetocx2u4] { background-color: #eab308; }
.color-dot.color-green[b-1zetocx2u4]  { background-color: #22c55e; }
.color-dot.color-blue[b-1zetocx2u4]   { background-color: #3b82f6; }
.color-dot.color-red[b-1zetocx2u4]    { background-color: #ef4444; }

/* ===== 編輯按鈕（共用） ===== */
.edit-btn-group[b-1zetocx2u4] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.btn-save[b-1zetocx2u4], .btn-cancel[b-1zetocx2u4] {
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    transition: opacity 0.2s;
}

.btn-save[b-1zetocx2u4] {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.btn-save:disabled[b-1zetocx2u4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel[b-1zetocx2u4] {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-save:hover:not(:disabled)[b-1zetocx2u4],
.btn-cancel:hover[b-1zetocx2u4] {
    opacity: 0.8;
}

/* ===== 響應式 ===== */
@media (max-width: 480px) {
    .calendar-drawer[b-1zetocx2u4] {
        width: calc(100% - 56px);
    }
}

/* ===== 動畫 ===== */
@keyframes fadeIn-b-1zetocx2u4 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Shared/PersonalTools/StickyNoteDrawer.razor.rz.scp.css */
/* ===== 遮罩層 ===== */
.sticky-note-backdrop[b-t37ckrn2l2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */
    animation: fadeIn-b-t37ckrn2l2 0.2s ease;
}

/* ===== 面板容器 ===== */
.sticky-note-drawer[b-t37ckrn2l2] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 400px;
    z-index: 1051;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.sticky-note-drawer.open[b-t37ckrn2l2] {
    transform: translateX(0);
    pointer-events: all;
}

.sticky-note-panel[b-t37ckrn2l2] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* ===== 標題列 ===== */
.drawer-header[b-t37ckrn2l2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.drawer-title[b-t37ckrn2l2] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.drawer-close-btn[b-t37ckrn2l2] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.drawer-close-btn:hover[b-t37ckrn2l2] {
    background-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== 工具列（搜尋 + 新增） ===== */
.drawer-toolbar[b-t37ckrn2l2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.search-wrapper[b-t37ckrn2l2] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-t37ckrn2l2] {
    position: absolute;
    left: 10px;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-input[b-t37ckrn2l2] {
    width: 100%;
    padding: 7px 32px 7px 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus[b-t37ckrn2l2] {
    border-color: var(--primary-blue);
}

.clear-search-btn[b-t37ckrn2l2] {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

.btn-new-note[b-t37ckrn2l2] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--primary-blue);
    background-color: var(--primary-blue);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.btn-new-note:hover[b-t37ckrn2l2] {
    opacity: 0.85;
}

/* ===== 便條清單 ===== */
.notes-list[b-t37ckrn2l2] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-loading[b-t37ckrn2l2],
.drawer-empty[b-t37ckrn2l2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--text-secondary);
    gap: 8px;
}

.empty-icon[b-t37ckrn2l2] {
    font-size: var(--fs-lg);
    opacity: 0.4;
}

/* ===== 便條項目 ===== */
.note-item[b-t37ckrn2l2] {
    border-radius: 8px;
    border-left: 4px solid transparent;
    padding: 10px 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    border: 1px solid var(--border-color);
}

.note-item:hover[b-t37ckrn2l2] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateX(-2px);
}

/* 顏色主題 */
.note-item.note-color-yellow[b-t37ckrn2l2] { border-left-color: #eab308; background-color: #fefce8; }
.note-item.note-color-green[b-t37ckrn2l2]  { border-left-color: #22c55e; background-color: #f0fdf4; }
.note-item.note-color-blue[b-t37ckrn2l2]   { border-left-color: #3b82f6; background-color: #eff6ff; }
.note-item.note-color-red[b-t37ckrn2l2]    { border-left-color: #ef4444; background-color: #fef2f2; }

/* 預覽模式 */
.note-preview[b-t37ckrn2l2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.note-content[b-t37ckrn2l2] {
    margin: 0;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.note-time[b-t37ckrn2l2] {
    color: #9ca3af;
}

/* ===== 編輯表單（共用） ===== */
.note-edit-form[b-t37ckrn2l2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-note-form[b-t37ckrn2l2] {
    margin: 0 8px 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.note-textarea[b-t37ckrn2l2] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    resize: vertical;
    min-height: 72px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.note-textarea:focus[b-t37ckrn2l2] {
    border-color: var(--primary-blue);
}

.char-count[b-t37ckrn2l2] {
    text-align: right;
    color: var(--text-secondary);
    margin-top: -4px;
}

.note-edit-actions[b-t37ckrn2l2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== 顏色選擇器 ===== */
.color-picker[b-t37ckrn2l2] {
    display: flex;
    gap: 6px;
}

.color-dot[b-t37ckrn2l2] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.color-dot:hover[b-t37ckrn2l2] {
    transform: scale(1.2);
}

.color-dot.selected[b-t37ckrn2l2] {
    border-color: var(--text-primary);
    transform: scale(1.15);
}

.color-dot.color-yellow[b-t37ckrn2l2] { background-color: #eab308; }
.color-dot.color-green[b-t37ckrn2l2]  { background-color: #22c55e; }
.color-dot.color-blue[b-t37ckrn2l2]   { background-color: #3b82f6; }
.color-dot.color-red[b-t37ckrn2l2]    { background-color: #ef4444; }

/* ===== 編輯按鈕群組 ===== */
.edit-btn-group[b-t37ckrn2l2] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-save[b-t37ckrn2l2], .btn-cancel[b-t37ckrn2l2], .btn-delete[b-t37ckrn2l2] {
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    transition: opacity 0.2s;
}

.btn-save[b-t37ckrn2l2] {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.btn-save:disabled[b-t37ckrn2l2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel[b-t37ckrn2l2] {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-delete[b-t37ckrn2l2] {
    background-color: transparent;
    border-color: #ef4444;
    color: #ef4444;
    padding: 4px 8px;
}

.btn-save:hover:not(:disabled)[b-t37ckrn2l2],
.btn-cancel:hover[b-t37ckrn2l2],
.btn-delete:hover[b-t37ckrn2l2] {
    opacity: 0.8;
}

/* ===== 刪除確認彈窗 ===== */
.delete-confirm-overlay[b-t37ckrn2l2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1060;
    cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-confirm-box[b-t37ckrn2l2] {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.delete-confirm-box p[b-t37ckrn2l2] {
    margin: 0 0 16px;
    color: var(--text-primary);
}

/* ===== 響應式 ===== */
@media (max-width: 480px) {
    .sticky-note-drawer[b-t37ckrn2l2] {
        width: calc(100% - 56px);
    }
}

/* ===== 動畫 ===== */
@keyframes fadeIn-b-t37ckrn2l2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== 深色模式 ===== */
[data-bs-theme=dark] .note-item.note-color-yellow[b-t37ckrn2l2] { background-color: #3a3010; border-left-color: #ca8a04; }
[data-bs-theme=dark] .note-item.note-color-green[b-t37ckrn2l2]  { background-color: #0f2e1a; border-left-color: #16a34a; }
[data-bs-theme=dark] .note-item.note-color-blue[b-t37ckrn2l2]   { background-color: #0d1f3c; border-left-color: #2563eb; }
[data-bs-theme=dark] .note-item.note-color-red[b-t37ckrn2l2]    { background-color: #3a0e0e; border-left-color: #dc2626; }
[data-bs-theme=dark] .note-content[b-t37ckrn2l2] { color: #d1d5db; }
/* /Components/Shared/QuickAction/GenericSearchModalComponent.razor.rz.scp.css */
/* ===== 結果統計列 + 鍵盤提示 ===== */

.search-results-meta[b-4ace1u3iib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-keyboard-hint[b-4ace1u3iib] {
    display: flex;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.search-keyboard-hint kbd[b-4ace1u3iib] {
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
}

/* ===== 搜尋結果清單 ===== */

.search-results-list[b-4ace1u3iib] {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.search-result-item[b-4ace1u3iib] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.1s ease;
}

.search-result-item:last-child[b-4ace1u3iib] {
    border-bottom: none;
}

.search-result-item:hover[b-4ace1u3iib] {
    background-color: var(--bg-tertiary);
}

.search-result-item.selected[b-4ace1u3iib] {
    background-color: rgba(var(--primary-blue-rgb), 0.08);
}

.search-result-item.disabled[b-4ace1u3iib] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 項目內容 ===== */

.search-result-icon[b-4ace1u3iib] {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

.search-result-content[b-4ace1u3iib] {
    flex: 1;
    min-width: 0;
}

.search-result-name[b-4ace1u3iib] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-description[b-4ace1u3iib] {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.search-result-category[b-4ace1u3iib] {
    padding: 0.15rem 0.5rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius);
    flex-shrink: 0;
    white-space: nowrap;
}

.search-result-arrow[b-4ace1u3iib] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ===== 深色模式 ===== */

[data-bs-theme=dark] .search-results-list[b-4ace1u3iib] {
    border-color: var(--border-color);
}

[data-bs-theme=dark] .search-result-item[b-4ace1u3iib] {
    border-bottom-color: var(--border-light);
}

[data-bs-theme=dark] .search-result-item:hover[b-4ace1u3iib] {
    background-color: var(--bg-tertiary);
}

[data-bs-theme=dark] .search-result-item.selected[b-4ace1u3iib] {
    background-color: rgba(88, 166, 255, 0.12);
}

[data-bs-theme=dark] .search-result-name[b-4ace1u3iib] {
    color: var(--text-primary);
}

[data-bs-theme=dark] .search-result-category[b-4ace1u3iib] {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}
/* /Components/Shared/QuickAction/QuickActionMenu.razor.rz.scp.css */
/* ===== 快速功能表容器 ===== */
.quick-action-menu[b-2r452k0z2p] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1057; /* 高於 Modal (1055) 和遮罩層 (1056) */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
}

/* ===== 主按鈕 ===== */
.quick-action-main-btn[b-2r452k0z2p] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-alt) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    position: relative;
    z-index: 1059; /* 最高層，確保主按鈕始終可點擊 */
}

.quick-action-main-btn:hover[b-2r452k0z2p] {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.quick-action-main-btn:active[b-2r452k0z2p] {
    transform: scale(0.95);
}

/* 展開時主按鈕旋轉 */
.quick-action-menu.expanded .quick-action-main-btn[b-2r452k0z2p] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    transform: rotate(90deg);
}

.quick-action-menu.expanded .quick-action-main-btn:hover[b-2r452k0z2p] {
    transform: rotate(90deg) scale(1.12);
}

/* ===== 功能選單項目容器 ===== */
.quick-action-items[b-2r452k0z2p] {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    animation: slideIn-b-2r452k0z2p 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1058; /* 高於 Modal 和遮罩層，確保選單項目可點擊 */
}

@keyframes slideIn-b-2r452k0z2p {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 單個功能項目 ===== */
.quick-action-item[b-2r452k0z2p] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    min-width: 140px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    position: relative;
    animation: itemSlideIn-b-2r452k0z2p 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

/* 為每個項目添加延遲動畫（含個人工具後最多 8 項） */
.quick-action-item:nth-child(1)[b-2r452k0z2p] { animation-delay: 0.05s; }
.quick-action-item:nth-child(2)[b-2r452k0z2p] { animation-delay: 0.1s; }
.quick-action-item:nth-child(3)[b-2r452k0z2p] { animation-delay: 0.15s; }
.quick-action-item:nth-child(4)[b-2r452k0z2p] { animation-delay: 0.2s; }
.quick-action-item:nth-child(5)[b-2r452k0z2p] { animation-delay: 0.25s; }
.quick-action-item:nth-child(6)[b-2r452k0z2p] { animation-delay: 0.3s; }
.quick-action-item:nth-child(7)[b-2r452k0z2p] { animation-delay: 0.35s; }
.quick-action-item:nth-child(8)[b-2r452k0z2p] { animation-delay: 0.4s; }

@keyframes itemSlideIn-b-2r452k0z2p {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.quick-action-item:hover[b-2r452k0z2p] {
    background-color: var(--primary-blue);
    color: white;
    transform: translateX(-3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.quick-action-item .bi[b-2r452k0z2p] {
    flex-shrink: 0;
}

.quick-action-label[b-2r452k0z2p] {
    white-space: nowrap;
    font-weight: 500;
}

/* ===== 徽章（通知數量） ===== */
.quick-action-badge[b-2r452k0z2p] {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===== 主按鈕徽章（行事曆 + 便條貼合計） ===== */
.quick-action-main-badge[b-2r452k0z2p] {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 5px;
    font-weight: bold;
    min-width: 16px;
    text-align: center;
    pointer-events: none;
    border: 2px solid white;
    line-height: 1.4;
    z-index: 1;
}

[data-bs-theme=dark] .quick-action-main-badge[b-2r452k0z2p] {
    border-color: #0d1117;
}

/* ===== 個人工具 active 狀態 ===== */
.quick-item-calendar[b-2r452k0z2p] {
    border-color: var(--primary-blue, #0d6efd) !important;
    color: var(--primary-blue, #0d6efd) !important;
}

.quick-item-note[b-2r452k0z2p] {
    border-color: #f59e0b !important;
    color: #d97706 !important;
}

/* ===== 分隔線 ===== */
.quick-action-divider[b-2r452k0z2p] {
    width: calc(100% - 8px);
    height: 1px;
    background: var(--border-color);
    margin: 2px 4px;
    opacity: 0.7;
    pointer-events: none;
    animation: none !important;
}

/* ===== 遮罩層 ===== */
.quick-action-backdrop[b-2r452k0z2p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1056;
    cursor: pointer; /* iOS Safari：div 需要 cursor:pointer 才會觸發 click 事件 */ /* 略高於 Modal (1055)，但低於選單項目，避免遮擋按鈕 */
    animation: fadeIn-b-2r452k0z2p 0.2s ease;
}

@keyframes fadeIn-b-2r452k0z2p {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== 響應式設計 ===== */

/* 平板 */
@media (max-width: 768px) {
    .quick-action-menu[b-2r452k0z2p] {
        bottom: 20px;
        right: 20px;
    }

    .quick-action-main-btn[b-2r452k0z2p] {
        width: 52px;
        height: 52px;
    }

    .quick-action-item[b-2r452k0z2p] {
        min-width: 140px;
        padding: 10px 16px;
    }
}

/* 手機 — 圓形 FAB */
@media (max-width: 640px) {
    .quick-action-menu[b-2r452k0z2p] {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 12px;
    }

    .quick-action-main-btn[b-2r452k0z2p] {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .quick-action-item[b-2r452k0z2p] {
        min-width: 130px;
        padding: 8px 12px;
    }

    .quick-action-item:hover[b-2r452k0z2p] {
        transform: translateX(-3px);
    }
}

/* 小型手機 */
@media (max-width: 360px) {
    .quick-action-menu[b-2r452k0z2p] {
        bottom: calc(12px + env(safe-area-inset-bottom));
        right: 10px;
    }

    .quick-action-main-btn[b-2r452k0z2p] {
        width: 46px;
        height: 46px;
        border-radius: 50%;
    }
}

/* ===== 深色主題支援 ===== */
/* 由 html[data-bs-theme=dark] 控制，透過 CSS variable 自動切換，無需額外覆寫 */

/* ===== 可訪問性 ===== */
.quick-action-main-btn:focus[b-2r452k0z2p],
.quick-action-item:focus[b-2r452k0z2p] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
    .quick-action-main-btn[b-2r452k0z2p],
    .quick-action-item[b-2r452k0z2p],
    .quick-action-items[b-2r452k0z2p],
    .quick-action-backdrop[b-2r452k0z2p] {
        animation: none;
        transition: none;
    }
}

/* /Components/Shared/QuickAction/ShortcutKeysModalComponent.razor.rz.scp.css */
/* 快捷鍵說明 Modal 樣式 */

.shortcut-keys-content[b-k23kji3s6r] {
    padding: 0;
}

/* 快捷鍵按鍵樣式 */
.shortcut-keys-content kbd[b-k23kji3s6r] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 40px;
    display: inline-block;
    text-align: center;
}

/* 表格樣式調整 */
.shortcut-keys-content[b-k23kji3s6r]  .interactive-table {
    margin-bottom: 0;
}

.shortcut-keys-content[b-k23kji3s6r]  .interactive-table td {
    vertical-align: middle;
}

/* 分類欄位樣式 */
.shortcut-keys-content[b-k23kji3s6r]  .interactive-table td:first-child {
    font-weight: 600;
    color: var(--text-primary);
}
/* /Components/Shared/Report/FilterFieldRow.razor.rz.scp.css */
/* ===== 篩選欄位行：標題與內容同行 ===== */

.filter-field-row[b-wdk1whp4ee] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* 標題樣式 - 與 GenericFormComponent 的 form-field-label 一致 */
.filter-field-label[b-wdk1whp4ee] {
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 120px;
    font-weight: 600;
    color: var(--primary-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0.35rem;
    line-height: 1.5;
}

/* 內容區域佔滿剩餘寬度 */
.filter-field-content[b-wdk1whp4ee] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== 響應式 ===== */

@media (max-width: 576px) {
    .filter-field-label[b-wdk1whp4ee] {
        min-width: 65px;
        max-width: 90px;
    }
}
/* /Components/Shared/Report/FilterSectionColumn.razor.rz.scp.css */
/* ===== 篩選區段欄 ===== */

/*
 * flex: 1 1 280px
 *   - flex-grow: 1  → 等比例瓜分剩餘空間
 *   - flex-shrink: 1 → 可縮小
 *   - flex-basis: 280px → 每欄基礎寬度
 *
 * 效果（搭配 filter-sections-container 的 flex-wrap）：
 *   3 欄 @ > 900px 容器寬
 *   2 欄 @ > 600px 容器寬
 *   1 欄 @ <= 600px 或手機版
 */
.filter-section-column[b-x2hqopmbsi] {
    flex: 1 1 280px;
    min-width: 0; /* 防止內容撐破 */
}

/* ===== 區段標題列 ===== */

.filter-section-header[b-x2hqopmbsi] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.4rem;
    background-color: rgba(var(--primary-blue-rgb), 0.06);
    border-bottom: 2px solid rgba(var(--primary-blue-rgb), 0.25);
    border-radius: 4px 4px 0 0;
}

.filter-section-title[b-x2hqopmbsi] {
    font-weight: 600;
    color: var(--primary-blue);
    white-space: nowrap;
}

.filter-section-icon[b-x2hqopmbsi] {
    color: var(--primary-blue);
    flex-shrink: 0;
}

/* ===== 欄位清單容器 ===== */

.filter-section-fields[b-x2hqopmbsi] {
    display: flex;
    flex-direction: column;
    padding-top: 0.1rem;
}

/* ===== 響應式：768px 以下全寬 ===== */

@media (max-width: 768px) {
    .filter-section-column[b-x2hqopmbsi] {
        flex: 1 1 100%;
    }
}
/* /Components/Shared/Report/FilterSectionGroup.razor.rz.scp.css */
/* ===== 篩選區段群組：水平排列容器 ===== */

.filter-sections-container[b-buu0nzv8qb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
    width: 100%;
}

/* ===== 響應式：768px 以下折成單欄 ===== */

@media (max-width: 768px) {
    .filter-sections-container[b-buu0nzv8qb] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Components/Shared/Report/FilterTemplates/ItemBarcodeBatchFilterTemplate.razor.rz.scp.css */
.print-settings-card[b-rpwhy95yur] {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.print-settings-header[b-rpwhy95yur] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
/* /Components/Shared/Report/GenericReportFilterModalComponent.razor.rz.scp.css */
/* 篩選表單 body wrapper - 需要 position: relative 供 overlay 定位 */
.filter-body-wrapper[b-iy2drmb24p] {
    position: relative;
    min-height: 100px;
}

/* ===== 預覽產生進度條 Overlay ===== */

.filter-progress-overlay[b-iy2drmb24p] {
    position: absolute;
    top: -1rem;    /* 補回 BodyCssClass="p-4" 的 padding */
    left: -1.5rem;
    right: -1.5rem;
    bottom: -1rem;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 4px;
}

.filter-progress-card[b-iy2drmb24p] {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 360px;
    text-align: center;
}

.filter-progress-message[b-iy2drmb24p] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.filter-progress-bar[b-iy2drmb24p] {
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
}

.filter-progress-bar .progress-bar[b-iy2drmb24p] {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
}

/* ===== 深色模式覆寫 ===== */

[data-bs-theme=dark] .filter-progress-overlay[b-iy2drmb24p] {
    background: rgba(13, 17, 23, 0.92);
}
/* /Components/Shared/Report/ReportPreviewModalComponent.razor.rz.scp.css */
/* ===== 報表操作主體 ===== */

.report-action-body[b-yfcwcecjxb] {
    padding: 1.5rem;
    position: relative; /* 供 export-progress-overlay 定位使用 */
    min-height: 80px;
}

/* 報表資訊列 */
.report-action-info[b-yfcwcecjxb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.report-action-icon[b-yfcwcecjxb] {
    font-size: var(--fs-lg);
    color: var(--color-primary);
    flex-shrink: 0;
    line-height: 1;
}

.report-action-details[b-yfcwcecjxb] {
    flex: 1;
    min-width: 0;
}

.report-action-name[b-yfcwcecjxb] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.report-action-meta[b-yfcwcecjxb] {
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* ===== 匯出進度條 Overlay ===== */

.export-progress-overlay[b-yfcwcecjxb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.export-progress-card[b-yfcwcecjxb] {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: min(360px, 90vw);
    text-align: center;
}

.export-progress-message[b-yfcwcecjxb] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.export-progress-bar[b-yfcwcecjxb] {
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
}

.export-progress-bar .progress-bar[b-yfcwcecjxb] {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
}

/* ===== 範本選擇器 ===== */

.template-selector[b-yfcwcecjxb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.template-selector-label[b-yfcwcecjxb] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.template-selector-select[b-yfcwcecjxb] {
    max-width: 300px;
}

/* ===== 區段選擇器 ===== */

.section-selector[b-yfcwcecjxb] {
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.section-selector-header[b-yfcwcecjxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.section-selector-title[b-yfcwcecjxb] {
    font-weight: 600;
    color: var(--text-primary);
}

.section-toggle-all[b-yfcwcecjxb] {
    padding: 0.15rem 0.5rem;
}

.section-selector-grid[b-yfcwcecjxb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 1rem;
}

.section-checkbox-item[b-yfcwcecjxb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}

.section-checkbox-item:hover:not(.disabled)[b-yfcwcecjxb] {
    background-color: var(--bg-secondary);
}

.section-checkbox-item.disabled[b-yfcwcecjxb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.section-checkbox-item input[type="checkbox"][b-yfcwcecjxb] {
    margin: 0;
    flex-shrink: 0;
}

.section-icon[b-yfcwcecjxb] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.section-label[b-yfcwcecjxb] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-max-records-input[b-yfcwcecjxb] {
    width: 3.5rem;
    padding: 0.1rem 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    margin-left: auto;
    flex-shrink: 0;
}

.section-max-records-input:disabled[b-yfcwcecjxb] {
    opacity: 0.5;
}

.section-max-records-label[b-yfcwcecjxb] {
    flex-shrink: 0;
    color: var(--text-secondary);
    margin-left: 0.15rem;
}

.section-disabled-badge[b-yfcwcecjxb] {
    color: #dc3545;
    white-space: nowrap;
}

.section-regenerating[b-yfcwcecjxb] {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ===== 報表列印設定面板 ===== */

.section-settings-panel[b-yfcwcecjxb] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.section-settings-notice[b-yfcwcecjxb] {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.section-settings-table[b-yfcwcecjxb] {
    width: 100%;
    border-collapse: collapse;
}

.section-settings-table th[b-yfcwcecjxb] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.section-settings-table td[b-yfcwcecjxb] {
    padding: 0.3rem 0.5rem;
}

.section-settings-table tbody tr:hover[b-yfcwcecjxb] {
    background: rgba(0, 0, 0, 0.03);
}

.section-settings-actions[b-yfcwcecjxb] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

/* ===== 手機響應式 ===== */

@media (max-width: 576px) {
    .report-action-body[b-yfcwcecjxb] {
        padding: 1rem;
    }

    .report-action-info[b-yfcwcecjxb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .report-action-name[b-yfcwcecjxb] {
        white-space: normal;
    }

    .template-selector[b-yfcwcecjxb] {
        flex-wrap: wrap;
    }

    .template-selector-select[b-yfcwcecjxb] {
        max-width: 100%;
    }

    .section-selector-header[b-yfcwcecjxb] {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .section-selector-title[b-yfcwcecjxb] {
        width: 100%;
    }

    .section-selector-grid[b-yfcwcecjxb] {
        grid-template-columns: 1fr;
    }

    .export-progress-card[b-yfcwcecjxb] {
        min-width: auto;
        padding: 1.5rem 1rem;
        margin: 0 1rem;
    }

    .section-settings-panel[b-yfcwcecjxb] {
        padding: 0.5rem;
    }

    .section-settings-table th:nth-child(2)[b-yfcwcecjxb],
    .section-settings-table th:nth-child(3)[b-yfcwcecjxb] {
        width: auto;
    }

    .section-settings-actions[b-yfcwcecjxb] {
        flex-wrap: wrap;
    }
}

/* ===== 深色模式覆寫（僅覆蓋 CSS 變數無法處理的值） ===== */

[data-bs-theme=dark] .export-progress-overlay[b-yfcwcecjxb] {
    background: rgba(0, 0, 0, 0.75);
}

[data-bs-theme=dark] .export-progress-card[b-yfcwcecjxb] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-bs-theme=dark] .section-settings-table tbody tr:hover[b-yfcwcecjxb] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/Shared/Statistics/GenericStatisticsCards.razor.rz.scp.css */
/* 通用統計卡片套裝組件樣式 - 內嵌按鈕列模式 */

/* ===== 內嵌容器 ===== */
.statistics-inline-container[b-zqwnq2aov9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== 內嵌警告 Badge ===== */
.statistics-badge[b-zqwnq2aov9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.statistics-badge .badge-title[b-zqwnq2aov9] {
    color: var(--text-secondary);
    font-weight: 500;
}

.statistics-badge .badge-value[b-zqwnq2aov9] {
    font-weight: 700;
}

.statistics-badge .badge-arrow[b-zqwnq2aov9] {
    opacity: 0.5;
}

/* Badge 顏色 */
.statistics-badge.badge-warning[b-zqwnq2aov9] {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.12);
}
.statistics-badge.badge-warning .badge-value[b-zqwnq2aov9] { color: #cc9a06; }

.statistics-badge.badge-danger[b-zqwnq2aov9] {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}
.statistics-badge.badge-danger .badge-value[b-zqwnq2aov9] { color: #dc3545; }

.statistics-badge.badge-info[b-zqwnq2aov9] {
    border-color: #0dcaf0;
    background-color: rgba(13, 202, 240, 0.1);
}
.statistics-badge.badge-info .badge-value[b-zqwnq2aov9] { color: #0aa2c0; }

.statistics-badge.badge-secondary[b-zqwnq2aov9] {
    border-color: #6c757d;
    background-color: rgba(108, 117, 125, 0.1);
}
.statistics-badge.badge-secondary .badge-value[b-zqwnq2aov9] { color: #6c757d; }

.statistics-badge.badge-success[b-zqwnq2aov9] {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}
.statistics-badge.badge-success .badge-value[b-zqwnq2aov9] { color: #198754; }

.statistics-badge.badge-primary[b-zqwnq2aov9] {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}
.statistics-badge.badge-primary .badge-value[b-zqwnq2aov9] { color: #0d6efd; }

/* Badge hover */
.statistics-badge.clickable:hover[b-zqwnq2aov9] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== 統計下拉按鈕 ===== */
.statistics-dropdown-wrapper[b-zqwnq2aov9] {
    position: relative;
    display: inline-flex;
}

.statistics-toggle-btn[b-zqwnq2aov9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.statistics-toggle-btn:hover[b-zqwnq2aov9] {
    color: var(--text-primary);
    border-style: solid;
    border-color: var(--text-secondary);
}

.statistics-toggle-btn .toggle-label[b-zqwnq2aov9] {
}

.statistics-toggle-btn .toggle-chevron[b-zqwnq2aov9] {
    transition: transform 0.2s ease;
}

.statistics-toggle-btn .toggle-chevron.rotated[b-zqwnq2aov9] {
    transform: rotate(180deg);
}

/* ===== 下拉面板 ===== */
.statistics-dropdown-backdrop[b-zqwnq2aov9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.statistics-dropdown-panel[b-zqwnq2aov9] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001;
    padding: 0.35rem 0;
    animation: dropdownFadeIn-b-zqwnq2aov9 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-zqwnq2aov9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 下拉項目 ===== */
.statistics-dropdown-item[b-zqwnq2aov9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    transition: background-color 0.15s ease;
}

.statistics-dropdown-item.clickable[b-zqwnq2aov9] {
    cursor: pointer;
}

.statistics-dropdown-item.clickable:hover[b-zqwnq2aov9] {
    background-color: var(--bg-secondary);
}

.statistics-dropdown-item .dropdown-item-dot[b-zqwnq2aov9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.statistics-dropdown-item .dropdown-item-title[b-zqwnq2aov9] {
    color: var(--text-secondary);
    flex: 1;
}

.statistics-dropdown-item .dropdown-item-value[b-zqwnq2aov9] {
    font-weight: 700;
}

.statistics-dropdown-item .dropdown-item-arrow[b-zqwnq2aov9] {
    opacity: 0.4;
    color: var(--text-secondary);
}

/* 下拉項目顏色 */
.dropdown-item-dot.dot-success[b-zqwnq2aov9] { background-color: #198754; }
.dropdown-item-dot.dot-warning[b-zqwnq2aov9] { background-color: #ffc107; }
.dropdown-item-dot.dot-danger[b-zqwnq2aov9] { background-color: #dc3545; }
.dropdown-item-dot.dot-info[b-zqwnq2aov9] { background-color: #0dcaf0; }
.dropdown-item-dot.dot-secondary[b-zqwnq2aov9] { background-color: #6c757d; }
.dropdown-item-dot.dot-primary[b-zqwnq2aov9] { background-color: #0d6efd; }

.dropdown-item-value.value-success[b-zqwnq2aov9] { color: #198754; }
.dropdown-item-value.value-warning[b-zqwnq2aov9] { color: #cc9a06; }
.dropdown-item-value.value-danger[b-zqwnq2aov9] { color: #dc3545; }
.dropdown-item-value.value-info[b-zqwnq2aov9] { color: #0aa2c0; }
.dropdown-item-value.value-secondary[b-zqwnq2aov9] { color: #6c757d; }
.dropdown-item-value.value-primary[b-zqwnq2aov9] { color: #0d6efd; }

/* ===== 響應式 ===== */
@media (max-width: 767.98px) {
    .statistics-inline-container[b-zqwnq2aov9] {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .statistics-toggle-btn .toggle-label[b-zqwnq2aov9] {
        display: none;
    }

    .statistics-dropdown-panel[b-zqwnq2aov9] {
        right: auto;
        left: 0;
    }
}
/* /Components/Shared/Statistics/StatisticsCard.razor.rz.scp.css */
/* 統計卡片元件樣式 */

.statistics-card-clickable[b-3o92g309py] {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.statistics-card-clickable:hover[b-3o92g309py] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.statistics-card-clickable:active[b-3o92g309py] {
    transform: translateY(0);
}

/* 卡片內容樣式調整 */
.statistics-card-title[b-3o92g309py] {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.statistics-card-value[b-3o92g309py] {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 0;
    color: var(--text-primary);
}

.statistics-card-icon[b-3o92g309py] {
    font-size: var(--fs-lg);
    color: var(--text-light);
}
/* /Components/Shared/Table/GenericInteractiveTableComponent.razor.rz.scp.css */
/* 外層包裝（確保選單的 position: fixed 從視窗計算，不受父層 overflow 干擾） */
.generic-table-wrapper[b-x1qjtoqhdx] {
    position: relative;
}

/* 右鍵選單覆蓋層 — 透明全螢幕，點擊即關閉選單 */
.table-context-menu-overlay[b-x1qjtoqhdx] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}

/* 右鍵選單本體 */
.table-context-menu[b-x1qjtoqhdx] {
    position: fixed;
    z-index: 1041;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
    user-select: none;
}

/* 選單項目 */
.table-context-menu-item[b-x1qjtoqhdx] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
    transition: background-color 0.12s;
    white-space: nowrap;
}

.table-context-menu-item:hover:not(:disabled):not(.disabled)[b-x1qjtoqhdx] {
    background: var(--bg-secondary);
}

.table-context-menu-item:disabled[b-x1qjtoqhdx],
.table-context-menu-item.disabled[b-x1qjtoqhdx] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* 分隔線 */
.table-context-menu-divider[b-x1qjtoqhdx] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Dark mode — 僅調整陰影深度，其餘顏色已由 CSS 變數處理 */
[data-bs-theme=dark] .table-context-menu[b-x1qjtoqhdx] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ===== 列展開（accordion）===== */
.row-expand-cell[b-x1qjtoqhdx] {
    vertical-align: middle;
}

.row-expand-toggle[b-x1qjtoqhdx] {
    color: var(--bs-primary);
    text-decoration: none;
    line-height: 1;
}

.row-expand-toggle:hover[b-x1qjtoqhdx] {
    color: var(--bs-primary);
    opacity: 0.7;
}

.row-expansion-row > td.row-expansion-cell[b-x1qjtoqhdx] {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-top: none;
    padding: 0;
}

[data-bs-theme=dark] .row-expansion-row > td.row-expansion-cell[b-x1qjtoqhdx] {
    background-color: var(--bs-tertiary-bg, #2b3035);
}

.cursor-pointer[b-x1qjtoqhdx] {
    cursor: pointer;
}
/* /Components/Shared/Table/GenericPaginationComponent.razor.rz.scp.css */
/* GenericPaginationComponent.razor.css - 分頁組件專用樣式 */
/* 設計語言統一：使用 CSS 變數 + transition，與 NavMenu 一致 */

/* ========================================= */
/* 分頁容器                                   */
/* ========================================= */

.pagination-container[b-94zl006hoo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    gap: 1rem;
    flex-wrap: wrap;
}

/* ========================================= */
/* 左側：資料統計資訊                          */
/* ========================================= */

.pagination-info[b-94zl006hoo] {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========================================= */
/* 中間：分頁按鈕群                            */
/* ========================================= */

.pagination-nav[b-94zl006hoo] {
    display: flex;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.pagination-nav .pagination[b-94zl006hoo] {
    gap: 3px;
}

/* 頁碼按鈕基礎樣式 - 使用 Bootstrap .pagination 語義結構 */
.pagination-nav .page-link[b-94zl006hoo] {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
    border-radius: var(--radius) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 2rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    line-height: 1.4;
}

/* hover 效果 - 與 NavMenu transition 統一 */
.pagination-nav .page-item:not(.active):not(.disabled) .page-link:hover[b-94zl006hoo] {
    background: var(--bg-tertiary);
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* 啟用狀態 - 使用專案主色 */
.pagination-nav .page-item.active .page-link[b-94zl006hoo] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--primary-white);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--primary-blue-rgb), 0.3);
}

/* 停用狀態 */
.pagination-nav .page-item.disabled .page-link[b-94zl006hoo] {
    color: var(--text-light);
    background: var(--bg-secondary);
    border-color: var(--border-light);
    cursor: not-allowed;
    opacity: 0.65;
}

/* 省略號樣式 */
.pagination-nav .page-ellipsis[b-94zl006hoo] {
    border: none;
    background: transparent !important;
    cursor: default;
    padding: 0.25rem 0.25rem;
    min-width: 1.5rem;
    letter-spacing: 2px;
    color: var(--text-light);
}

/* ========================================= */
/* 右側：每頁筆數選擇器                        */
/* ========================================= */

.page-size-selector[b-94zl006hoo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.page-size-label[b-94zl006hoo] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.page-size-select[b-94zl006hoo] {
    width: auto !important;
    min-width: 4rem;
    padding: 0.2rem 1.75rem 0.2rem 0.5rem;
    border-color: var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-size-select:focus[b-94zl006hoo] {
    border-color: var(--primary-blue);
    box-shadow: var(--focus-shadow-primary);
}

.page-size-unit[b-94zl006hoo] {
    color: var(--text-secondary);
}

/* ========================================= */
/* 響應式調整                                  */
/* ========================================= */

/* 平板：資訊列和選擇器縮為上下排列 */
@media (max-width: 768px) {
    .pagination-container[b-94zl006hoo] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .pagination-info[b-94zl006hoo] {
        order: 2;
        text-align: center;
    }

    .pagination-nav[b-94zl006hoo] {
        order: 1;
        width: 100%;
    }

    .page-size-selector[b-94zl006hoo] {
        order: 3;
    }
}

/* 手機版：隱藏圖示旁的文字標籤 */
@media (max-width: 576px) {
    .pagination-text-label[b-94zl006hoo] {
        display: none;
    }

    .pagination-nav .page-link[b-94zl006hoo] {
        padding: 0.2rem 0.375rem;
        min-width: 1.75rem;
    }

    .page-size-label[b-94zl006hoo] {
        display: none;
    }

    .pagination-info small[b-94zl006hoo] {
    }
}
/* /Components/Shared/Table/GenericTableComponent.razor.rz.scp.css */
/* 外層包裝（確保選單的 position: fixed 從視窗計算，不受父層 overflow 干擾） */
.generic-table-wrapper[b-fe8ipd2buq] {
    position: relative;
}

/* 右鍵選單覆蓋層 — 透明全螢幕，點擊即關閉選單 */
.table-context-menu-overlay[b-fe8ipd2buq] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}

/* 右鍵選單本體 */
.table-context-menu[b-fe8ipd2buq] {
    position: fixed;
    z-index: 1041;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
    user-select: none;
}

/* 選單項目 */
.table-context-menu-item[b-fe8ipd2buq] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
    transition: background-color 0.12s;
    white-space: nowrap;
}

.table-context-menu-item:hover:not(:disabled):not(.disabled)[b-fe8ipd2buq] {
    background: var(--bg-secondary);
}

.table-context-menu-item:disabled[b-fe8ipd2buq],
.table-context-menu-item.disabled[b-fe8ipd2buq] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* 分隔線 */
.table-context-menu-divider[b-fe8ipd2buq] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Dark mode — 僅調整陰影深度，其餘顏色已由 CSS 變數處理 */
[data-bs-theme=dark] .table-context-menu[b-fe8ipd2buq] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 多選選取列高亮 */
.row-selected[b-fe8ipd2buq] {
    background-color: var(--bs-primary-bg-subtle) !important;
}

[data-bs-theme=dark] .row-selected[b-fe8ipd2buq] {
    background-color: rgba(88, 166, 255, 0.15) !important;
}
/* /Components/Shared/Tabs/GenericAccountingTabComponent.razor.rz.scp.css */
/* 表頭背景使用 CSS 變數，支援深色模式（禁止使用 Bootstrap table-light） */
.accounting-thead th[b-2964xdpyxd] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
/* /Components/Shared/UI/Auth/TrialBanner.razor.rz.scp.css */
.trial-banner[b-3oorpoxsnz] {
    padding: 6px 16px;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.trial-banner-info[b-3oorpoxsnz] {
    background-color: #dbeafe;
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
}

.trial-banner-warning[b-3oorpoxsnz] {
    background-color: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
}

.trial-banner-danger[b-3oorpoxsnz] {
    background-color: #fee2e2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}
/* /Components/Shared/UI/Badge/GenericStatusBadgeComponent.razor.rz.scp.css */
.badge-sm[b-6sho7cc4ei] {
    padding: 0.25em 0.4em;
}

.badge-lg[b-6sho7cc4ei] {
    padding: 0.5em 0.75em;
}
/* /Components/Shared/UI/Button/GenericButtonComponent.razor.rz.scp.css */
/* GenericButtonComponent 專用樣式 */

/* 基礎按鈕樣式覆寫 */
.btn[b-64rw361ppi] {
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
}

/* 主要按鈕樣式 — 與 .btn-info 共用同一藍色 (--info-color, #0891B2)，
   保證直接寫 btn-primary 的呼叫端與 Variant=Blue 的按鈕視覺一致。 */
.btn-primary[b-64rw361ppi] {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--primary-white);
}

.btn-primary:focus[b-64rw361ppi] {
    background-color: var(--info-color-hover);
    border-color: var(--info-color-hover);
    box-shadow: 0 0 0 0.2rem rgba(var(--info-color-rgb), 0.25);
}

.btn-primary:active[b-64rw361ppi] {
    background-color: var(--info-color);
    border-color: var(--info-color);
    transform: translateY(0);
}

/* 次要按鈕樣式 */
.btn-secondary[b-64rw361ppi] {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: var(--primary-white);
}

/* 成功按鈕樣式 */
.btn-success[b-64rw361ppi] {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--primary-white);
}

/* 警告按鈕樣式 */
.btn-warning[b-64rw361ppi] {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--primary-white);
}

/* 危險按鈕樣式 */
.btn-danger[b-64rw361ppi] {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--primary-white);
}

/* 資訊按鈕樣式 */
.btn-info[b-64rw361ppi] {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--primary-white);
}

/* 統一的 hover 效果 - 所有按鈕變體 */
.btn-primary:hover[b-64rw361ppi],
.btn-secondary:hover[b-64rw361ppi],
.btn-success:hover[b-64rw361ppi],
.btn-warning:hover[b-64rw361ppi],
.btn-danger:hover[b-64rw361ppi],
.btn-info:hover[b-64rw361ppi] {
    background-color: var(--table-hover-bg-striped);
    border-color: var(--table-hover-bg-striped);
    color: var(--table-hover-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* 統一修正所有按鈕 hover 時圖標顏色 */
.btn-primary:hover i[b-64rw361ppi],
.btn-secondary:hover i[b-64rw361ppi],
.btn-success:hover i[b-64rw361ppi],
.btn-warning:hover i[b-64rw361ppi],
.btn-danger:hover i[b-64rw361ppi],
.btn-info:hover i[b-64rw361ppi] {
    color: var(--table-hover-text) !important;
}

/* 按鈕尺寸 */
.btn-sm[b-64rw361ppi] {
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.8);
}

.btn-lg[b-64rw361ppi] {
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius) * 1.2);
}

/* 按鈕狀態 */
.btn:disabled[b-64rw361ppi],
.btn.disabled[b-64rw361ppi] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled:hover[b-64rw361ppi],
.btn.disabled:hover[b-64rw361ppi] {
    transform: none !important;
    box-shadow: none !important;
}

/* 載入狀態 */
.btn .spinner-border[b-64rw361ppi] {
    width: 1rem;
    height: 1rem;
}

.btn-sm .spinner-border[b-64rw361ppi] {
    width: 0.75rem;
    height: 0.75rem;
}

.btn-lg .spinner-border[b-64rw361ppi] {
    width: 1.25rem;
    height: 1.25rem;
}

/* 按鈕圖示 */
.btn i[b-64rw361ppi] {
    line-height: 1;
}

.btn-icon-only[b-64rw361ppi] {
    padding: 0.15rem;
    width: auto;
    aspect-ratio: 1;
}

.btn-icon-only.btn-sm[b-64rw361ppi] {
    padding: 0.1rem;
}

.btn-icon-only.btn-lg[b-64rw361ppi] {
    padding: 0.2rem;
}

/* 按鈕組增強 */
.btn-group .btn[b-64rw361ppi] {
    margin-right: 0;
}

.btn-group .btn:not(:first-child):not(:last-child)[b-64rw361ppi] {
    border-radius: 0;
}

.btn-group .btn:first-child:not(:last-child)[b-64rw361ppi] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:last-child:not(:first-child)[b-64rw361ppi] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 響應式按鈕 */
@media (max-width: 575.98px) {
    .btn[b-64rw361ppi] {
        padding: 0.25rem 0.5rem;
    }

    .btn-sm[b-64rw361ppi] {
        padding: 0.15rem 0.35rem;
    }

    .btn-lg[b-64rw361ppi] {
        padding: 0.375rem 0.75rem;
    }
}

/* 表格操作按鈕圖標優化 - 支援 GenericButtonComponent 和直接 HTML button */
/* 字型大小依 typography.css 規則繼承 1rem，不另外宣告 */

/* 正方形按鈕樣式 */
.btn-square[b-64rw361ppi] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.btn-square i[b-64rw361ppi] {
    margin: 0 !important;
}

/* ===== Field Action Button 專用樣式 ===== */
/* 為表單欄位旁的新增/編輯按鈕設計：無邊框、淡色背景 */

.field-action-button.btn[b-64rw361ppi] {
    padding: 0.15rem 0.4rem !important;
    border: none !important;
    border-radius: 4px;
}

/* 實心按鈕基礎樣式 — primary 與 info 共用同一藍色 */
.field-action-button.btn-primary[b-64rw361ppi] {
    background-color: rgba(var(--info-color-rgb), 0.15) !important;
    color: var(--info-color) !important;
    border: none !important;
}

.field-action-button.btn-secondary[b-64rw361ppi] {
    background-color: rgba(var(--text-secondary-rgb), 0.15) !important;
    color: var(--text-secondary) !important;
    border: none !important;
}

.field-action-button.btn-success[b-64rw361ppi] {
    background-color: rgba(var(--success-color-rgb), 0.15) !important;
    color: var(--success-color) !important;
    border: none !important;
}

.field-action-button.btn-warning[b-64rw361ppi] {
    background-color: rgba(var(--warning-color-rgb), 0.2) !important;
    color: var(--warning-text-dark) !important;
    border: none !important;
}

.field-action-button.btn-danger[b-64rw361ppi] {
    background-color: rgba(var(--danger-color-rgb), 0.15) !important;
    color: var(--danger-color) !important;
    border: none !important;
}

.field-action-button.btn-info[b-64rw361ppi] {
    background-color: rgba(var(--info-color-rgb), 0.15) !important;
    color: var(--info-color) !important;
    border: none !important;
}

/* Hover 效果 - 實心變體 */
.field-action-button.btn-primary:hover[b-64rw361ppi] {
    background-color: rgba(var(--info-color-rgb), 0.25) !important;
    color: var(--info-color-hover) !important;
    border: none !important;
}

.field-action-button.btn-secondary:hover[b-64rw361ppi] {
    background-color: rgba(var(--text-secondary-rgb), 0.25) !important;
    color: var(--text-secondary-hover) !important;
    border: none !important;
}

.field-action-button.btn-success:hover[b-64rw361ppi] {
    background-color: rgba(var(--success-color-rgb), 0.25) !important;
    color: var(--success-color-hover) !important;
    border: none !important;
}

.field-action-button.btn-warning:hover[b-64rw361ppi] {
    background-color: rgba(var(--warning-color-rgb), 0.3) !important;
    color: var(--warning-text-hover) !important;
    border: none !important;
}

.field-action-button.btn-danger:hover[b-64rw361ppi] {
    background-color: rgba(var(--danger-color-rgb), 0.25) !important;
    color: var(--danger-color-hover) !important;
    border: none !important;
}

.field-action-button.btn-info:hover[b-64rw361ppi] {
    background-color: rgba(var(--info-color-rgb), 0.25) !important;
    color: var(--info-color-hover) !important;
    border: none !important;
}

/* Hover 圖標顏色 */
.field-action-button.btn-primary:hover i[b-64rw361ppi] {
    color: var(--info-color-hover) !important;
}

.field-action-button.btn-secondary:hover i[b-64rw361ppi] {
    color: var(--text-secondary-hover) !important;
}

.field-action-button.btn-success:hover i[b-64rw361ppi] {
    color: var(--success-color-hover) !important;
}

.field-action-button.btn-warning:hover i[b-64rw361ppi] {
    color: var(--warning-text-hover) !important;
}

.field-action-button.btn-danger:hover i[b-64rw361ppi] {
    color: var(--danger-color-hover) !important;
}

.field-action-button.btn-info:hover i[b-64rw361ppi] {
    color: var(--info-color-hover) !important;
}

/* 停用狀態 */
.field-action-button.btn:disabled[b-64rw361ppi],
.field-action-button.btn.disabled[b-64rw361ppi] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: rgba(var(--text-secondary-rgb), 0.05) !important;
    color: var(--text-secondary) !important;
}

.field-action-button.btn:disabled:hover[b-64rw361ppi],
.field-action-button.btn.disabled:hover[b-64rw361ppi] {
    background-color: rgba(var(--text-secondary-rgb), 0.05) !important;
    color: var(--text-secondary) !important;
}
/* /Components/Shared/UI/Button/OptionSelectorButton.razor.rz.scp.css */
.option-selector-btn[b-7fhyr6k5bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    padding: 8px 14px;
    line-height: 1;
}

.option-selector-btn.btn-sm[b-7fhyr6k5bl] {
    min-width: 0;
    padding: 4px 10px;
    flex-direction: row;
    gap: 0;
}

.option-selector-icon[b-7fhyr6k5bl] {
    font-size: var(--fs-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.option-selector-label[b-7fhyr6k5bl] {
    line-height: 1;
    display: block;
}
/* /Components/Shared/UI/Button/OptionSelectorGroup.razor.rz.scp.css */
.option-selector-header[b-rbhwrogxg9] {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-light);
}

.option-selector-title[b-rbhwrogxg9] {
    font-weight: 600;
    color: var(--primary-blue);
}
/* /Components/Shared/UI/Form/CharacterCountTextAreaComponent.razor.rz.scp.css */
    .character-count-textarea-container[b-s6in9shtu6] {
    position: relative;
}

.character-count-info[b-s6in9shtu6] {
}

.character-count-textarea-container textarea:focus + .character-count-info[b-s6in9shtu6] {
    opacity: 1;
}

/* 只染色「真正唯讀」欄位。autofill-blocker (App.razor) 會對可編輯欄位暫時加 readonly +
   data-autofill-blocked，focus 後才移除 — 那些欄位實際可編輯，不可染灰(對齊全域 GenericFormComponent.razor.css:240
   與 table-base.css:735 既有寫法)。否則新增模式下備註會誤顯灰底，點擊 focus 後才變白。 */
.character-count-textarea-container textarea[readonly]:not([data-autofill-blocked])[b-s6in9shtu6] {
    background-color: var(--bg-tertiary);
}

/* 覆蓋 Bootstrap 的 min-height，讓 rows=1 真正生效為單行 */
.character-count-textarea-container textarea[rows="1"][b-s6in9shtu6] {
    min-height: auto !important;
    overflow-y: hidden;
}
/* /Components/Shared/UI/Form/DateTimePartsInput.razor.rz.scp.css */
/* 日期框 + 時:分 緊湊並排（取代巢狀 input-group）。
   日期框覆寫 form-control 的 width:100% 改為自適應寬度，時間段由 TimePartsInput 自管。 */
.datetime-parts-input[b-xmp4bezemf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.datetime-parts-date[b-xmp4bezemf] {
    width: auto;
    flex: 0 1 auto;
}
/* /Components/Shared/UI/Form/GenericFormComponent.razor.rz.scp.css */
/* ===== 表單容器 ===== */
.generic-form-container[b-2ow6brtc2f] {
    width: 100%;
    margin-bottom: 0.5rem; /* 與後續內容保持適度間距 */
}

/* ===== 新版佈局：區段水平並排 ===== */

/* 區段容器 - 使用 Flexbox 水平排列 */
.form-sections-container[b-2ow6brtc2f] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

/* Tab 內 ExtraContent 與上方表單欄位的間距 */
.tab-extra-content[b-2ow6brtc2f] {
    margin-top: 0.5rem;
}

/* 區段欄位 - 基礎樣式 */
.form-section-column[b-2ow6brtc2f] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* 防止內容撐開 */
}

/* 區段寬度類別 */
.section-col-full[b-2ow6brtc2f] {
    flex: 1 1 100%;
}

.section-col-half[b-2ow6brtc2f] {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

.section-col-third[b-2ow6brtc2f] {
    flex: 1 1 calc(33.333% - 0.67rem);
    max-width: calc(33.333% - 0.67rem);
}

.section-col-quarter[b-2ow6brtc2f] {
    flex: 1 1 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
}

/* 同一 Column 內多個 Section 的間距 */
.form-section-in-column + .form-section-in-column[b-2ow6brtc2f] {
    margin-top: 0.75rem;
}

/* 區段標題 */
.form-section-header[b-2ow6brtc2f] {
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-light);
}

.form-section-title[b-2ow6brtc2f] {
    font-weight: 600;
    color: var(--primary-blue);
}

/* ===== 篩選條件區段 - 特殊視覺樣式 ===== */

/* 篩選區段標題列 - 琥珀色底線與淡背景 */
.form-section-header-filter[b-2ow6brtc2f] {
    background-color: rgba(255, 193, 7, 0.08);
    border-bottom-color: #ffc107;
    border-radius: 4px 4px 0 0;
    padding: 0.25rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* 篩選區段標題文字 - 琥珀色 */
.form-section-title-filter[b-2ow6brtc2f] {
    color: var(--warning-text-dark);
}

/* 篩選區段圖示 */
.form-section-filter-icon[b-2ow6brtc2f] {
    color: var(--warning-text-dark);
    flex-shrink: 0;
}

/* 區段欄位容器 */
.form-section-fields[b-2ow6brtc2f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ===== 緊湊模式 - 縮小間距以顯示更多欄位 ===== */

.generic-form-container.compact .form-sections-container[b-2ow6brtc2f] {
    gap: 0.5rem;
}

.generic-form-container.compact .form-section-header[b-2ow6brtc2f] {
    padding: 0.15rem 0;
    margin-bottom: 0.15rem;
}

.generic-form-container.compact .form-section-fields[b-2ow6brtc2f] {
    gap: 0.15rem;
}

.generic-form-container.compact .form-field-row[b-2ow6brtc2f] {
    gap: 0.35rem;
}

.generic-form-container.compact .form-field-label[b-2ow6brtc2f] {
    min-width: 65px;
}

.generic-form-container.compact .form-field-row-checkbox .form-field-label[b-2ow6brtc2f] {
    min-width: 65px;
}

.generic-form-container.compact .form-section-in-column + .form-section-in-column[b-2ow6brtc2f] {
    margin-top: 0.4rem;
}

.generic-form-container.compact .form-tab-btn-group[b-2ow6brtc2f] {
    gap: 0.25rem;
    padding-bottom: 0.35rem;
}

.generic-form-container.compact .form-tab-btn[b-2ow6brtc2f] {
    padding: 0.2rem 0.6rem;
}

.generic-form-container.compact .form-tab-content[b-2ow6brtc2f] {
    padding-top: 0.35rem;
}

.generic-form-container.compact .tab-extra-content[b-2ow6brtc2f] {
    margin-top: 0.35rem;
}

/* ===== 欄位行：Label 與 Input 同行 ===== */

.form-field-row[b-2ow6brtc2f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Label 樣式 */
.form-field-label[b-2ow6brtc2f] {
    flex: 0 0 auto;
    min-width: 80px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: normal;
    word-break: break-word;
}

/* Input 容器 */
.form-field-input[b-2ow6brtc2f] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Checkbox 特殊處理 - Label 在左邊，Checkbox 在右邊 */
.form-field-row-checkbox[b-2ow6brtc2f] {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.form-field-row-checkbox .form-field-label[b-2ow6brtc2f] {
    flex: 0 0 auto;
    min-width: 80px;
    margin-right: 0.5rem;
    white-space: normal;
    word-break: break-word;
}

.form-field-row-checkbox .form-field-input[b-2ow6brtc2f] {
    flex: 0 0 auto;
}

/* Checkbox 內的 form-check 樣式 */
.form-field-row-checkbox .form-check[b-2ow6brtc2f] {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.form-field-row-checkbox .form-check-input[b-2ow6brtc2f] {
    margin: 0;
}

/* ===== Input 欄位樣式 - 縮減 Padding 和字體大小 ===== */

/* 縮減所有 input、select 和 textarea 的內邊距和字體大小 */
[b-2ow6brtc2f] .form-control,
[b-2ow6brtc2f] .form-select {
    padding: 0.1rem 0.4rem !important; /* 進一步縮小 padding */
    min-height: unset !important; /* 清除 Bootstrap 可能的最小高度 (比照 table-base) */
    height: auto !important; /* 高度自適應，隨 --content-zoom 縮放 (比照 table-base / textarea)，避免放大字型時下拉/Enum 文字被裁切 */
    line-height: 1.25 !important; /* 調整行高 */
    transition: border-color 0.2s ease;
}

/* Input Hover 效果 */
[b-2ow6brtc2f] .form-control:hover:not(:disabled):not([readonly]),
[b-2ow6brtc2f] .form-select:hover:not(:disabled):not([readonly]) {
    border-color: var( --table-hover-text) !important;
    background-color: var( --table-hover-bg-striped) !important;
}

/* textarea 特別調整 */
[b-2ow6brtc2f] textarea.form-control {
    padding: 0.1rem 0.4rem !important;
    line-height: 1.25 !important;
    height: auto !important; /* 解除 .form-control 的 26px 鎖定，讓 rows 屬性決定自然高度 */
    min-height: 3.125rem !important; /* 設定最小高度避免太小，隨 --content-zoom 縮放 */
    transition: border-color 0.2s ease;
}

/* Textarea Hover 效果 */
[b-2ow6brtc2f] textarea.form-control:hover:not(:disabled):not([readonly]) {
    border-color: var( --table-hover-text) !important;
    background-color: var( --table-hover-bg-striped) !important;
}

/* ===== 唯讀欄位視覺化 (全域) =====
   Blazor 在 IsReadOnly=false 時會省略 readonly 屬性,故 [readonly] 命中真正唯讀的欄位
   (如 FormNumberField 唯讀分支、FormTextField/FormDateField 的 readonly 輸入)。
   但 App.razor 的 autofill-blocker (lines 47-74) 為阻擋瀏覽器自動填入,會對「可編輯」欄位
   暫時加上 readonly 並標記 data-autofill-blocked,focus 後才移除 — 那些欄位實際可編輯,
   不可染色。故必須 :not([data-autofill-blocked]) 排除 (對齊 table-base.css:735 既有寫法)。
   目的:讓真正不可編輯欄位一眼可辨 (灰底 + 虛線框 + not-allowed),不需依賴 hover tooltip。 */
[b-2ow6brtc2f] .form-control[readonly]:not([data-autofill-blocked]) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-style: dashed !important;
    cursor: not-allowed !important;
}

/* ===== 隱藏數字輸入欄位的上下拉桿 (spinner) ===== */

/* Chrome, Safari, Edge, Opera */
[b-2ow6brtc2f] input[type="number"]::-webkit-outer-spin-button,
[b-2ow6brtc2f] input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Firefox */
[b-2ow6brtc2f] input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Placeholder 字體顏色 - 更淡色 */
[b-2ow6brtc2f] .form-control::placeholder,
[b-2ow6brtc2f] .form-select::placeholder,
[b-2ow6brtc2f] textarea.form-control::placeholder {
    color: var(--text-light) !important;
    opacity: 0.8 !important;
}

/* Firefox 專用 */
[b-2ow6brtc2f] .form-control::-moz-placeholder,
[b-2ow6brtc2f] .form-select::-moz-placeholder,
[b-2ow6brtc2f] textarea.form-control::-moz-placeholder {
    color: var(--text-light) !important;
    opacity: 0.8 !important;
}

/* WebKit/Blink 專用 */
[b-2ow6brtc2f] .form-control::-webkit-input-placeholder,
[b-2ow6brtc2f] .form-select::-webkit-input-placeholder,
[b-2ow6brtc2f] textarea.form-control::-webkit-input-placeholder {
    color: var(--text-light) !important;
    opacity: 0.8 !important;
}

/* Edge 專用 */
[b-2ow6brtc2f] .form-control::-ms-input-placeholder,
[b-2ow6brtc2f] .form-select::-ms-input-placeholder,
[b-2ow6brtc2f] textarea.form-control::-ms-input-placeholder {
    color: var(--text-light) !important;
    opacity: 0.8 !important;
}

/* ===== Input 右側 ActionButton 樣式（input-group 模式） ===== */

/* 使用相對定位容器，讓按鈕疊在 input 右側上方，input 寬度與其他欄位一致 */
.input-with-action-buttons[b-2ow6brtc2f] {
    position: relative;
}

/* input-group 內的 input 保持完整寬度，右側留 padding 避免文字被按鈕遮住 */
[b-2ow6brtc2f] .input-with-action-buttons .form-control,
[b-2ow6brtc2f] .input-with-action-buttons .form-select {
    padding-right: 2.25rem;
}

/* 多個按鈕時加大 padding */
[b-2ow6brtc2f] .input-with-action-buttons.multiple-buttons .form-control,
[b-2ow6brtc2f] .input-with-action-buttons.multiple-buttons .form-select {
    padding-right: 4.25rem;
}

/* ActionButtons 容器 - 絕對定位疊在 input 右側內部 */
.input-action-buttons-container[b-2ow6brtc2f] {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    gap: 0;
    align-items: stretch;
    z-index: 1;
}

/* 單個 ActionButton 基礎樣式 */
.input-action-button[b-2ow6brtc2f] {
    width: 1.75rem; /* 隨 --content-zoom 縮放，放大字型時圖示有空間且與 input padding-right(rem) 對齊 */
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    border-radius: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: var(--bg-tertiary);
    color: var(--primary-blue);
}

/* 最後一個按鈕加上右側圓角 */
.input-action-button:last-child[b-2ow6brtc2f] {
    border-top-right-radius: calc(0.375rem - 1px);
    border-bottom-right-radius: calc(0.375rem - 1px);
}

/* 圖示樣式 */
.input-action-button i[b-2ow6brtc2f] {
    margin: 0 !important;
}

.input-action-button:hover:not(:disabled)[b-2ow6brtc2f] {
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    color: var(--primary-blue-hover);
}

.input-action-button:active:not(:disabled)[b-2ow6brtc2f] {
    background-color: rgba(var(--primary-blue-rgb), 0.2);
    transform: scale(0.95);
}

/* ===== 停用狀態 ===== */
.input-action-button:disabled[b-2ow6brtc2f] {
    opacity: 0.4;
    cursor: not-allowed;
}

.input-action-button:disabled:hover[b-2ow6brtc2f] {
    background-color: var(--bg-tertiary) !important;
}

/* 移除 Bootstrap is-invalid 在 input 內注入的驚嘆號背景圖示，
   改由 invalid-feedback 文字前的圖示呈現 */
[b-2ow6brtc2f] .form-control.is-invalid {
    background-image: none !important;
}

/* ===== 響應式設計 ===== */

/* 平板尺寸 */
@media (max-width: 992px) {
    /* 4 欄在平板退回 2 欄 */
    .section-col-quarter[b-2ow6brtc2f] {
        flex: 1 1 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }

    .input-action-button[b-2ow6brtc2f] {
        width: 1.875rem;
    }
}

/* 手機尺寸 */
@media (max-width: 576px) {
    /* 手機版區段垂直堆疊 */
    .form-sections-container[b-2ow6brtc2f] {
        flex-direction: column;
    }
    
    .section-col-half[b-2ow6brtc2f],
    .section-col-third[b-2ow6brtc2f],
    .section-col-quarter[b-2ow6brtc2f] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* 手機版欄位 Label 與 Input 保持同行 */
    .form-field-row[b-2ow6brtc2f] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    
    /* 手機版 Label 樣式 - 自適應寬度 */
    .form-field-label[b-2ow6brtc2f] {
        flex: 0 0 auto;
        min-width: 70px;
        white-space: normal;
        word-break: break-word;
    }
    
    /* 手機版 Input 容器佔滿剩餘寬度 */
    .form-field-input[b-2ow6brtc2f] {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    
    /* 手機版 Input 佔滿寬度 */
    /* 注意：必須使用 ::deep 才能穿透子組件（FormTextField 等）的 CSS scope */
    [b-2ow6brtc2f] .form-field-input .form-control,
    [b-2ow6brtc2f] .form-field-input .form-select,
    [b-2ow6brtc2f] .form-field-input input:not([type="checkbox"]),
    [b-2ow6brtc2f] .form-field-input select,
    [b-2ow6brtc2f] .form-field-input textarea {
        width: 100% !important;
    }

    /* Checkbox 在手機版保持同行 - Label 在左、Checkbox 在右 */
    .form-field-row-checkbox[b-2ow6brtc2f] {
        flex-direction: row;
        justify-content: flex-start;
    }

    .form-field-row-checkbox .form-field-label[b-2ow6brtc2f] {
        flex: 0 0 auto;
        min-width: 70px;
        max-width: 100px;
    }

    /* Checkbox input 容器不擴張（覆蓋下方的 flex: 1 1 auto !important） */
    .form-field-row-checkbox .form-field-input[b-2ow6brtc2f] {
        flex: 0 0 auto !important;
    }
    
    /* 手機版 ActionButton */
    .input-action-button[b-2ow6brtc2f] {
        width: 2.25rem;
    }

    /* 手機版區段間距 */
    .form-section-column[b-2ow6brtc2f] {
        margin-bottom: 0.5rem;
        width: 100% !important;
    }
    
    /* 確保區段欄位容器也全寬 */
    .form-section-fields[b-2ow6brtc2f] {
        width: 100%;
    }
}

/* ===== Focus 狀態優化 ===== */
[b-2ow6brtc2f] .input-with-action-buttons .form-control:focus {
    z-index: 1; /* Bootstrap input-group focus 需要 z-index 提升邊框顯示 */
}

/* ===== 與 AutoComplete 下拉選單的 z-index 協調 ===== */
.input-with-action-buttons .list-group[b-2ow6brtc2f] {
    z-index: 1000; /* 確保下拉選單在按鈕上方 */
}

/* ===== Tab 佈局模式 - 按鈕樣式 ===== */

/* Tab 容器 - 緊貼上方功能按鈕 */
.form-tab-container[b-2ow6brtc2f] {
    width: 100%;
}

/* ===== Scroll 佈局模式 (金蝶雲風格) ===== */

/* Scroll 模式:所有 tab-pane 同時顯示,垂直串接,IntersectionObserver 偵測位置控制 Tab Bar 高亮 */
.form-tab-content.scroll-mode .tab-pane.scroll-section[b-2ow6brtc2f] {
    display: block !important;
    /* scroll-margin-top 補償 sticky tab bar 高度,smooth scroll 後標題不會被遮 */
    scroll-margin-top: 3.5rem;
    padding: 1rem 0 2.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.form-tab-content.scroll-mode .tab-pane.scroll-section:first-child[b-2ow6brtc2f] {
    padding-top: 0.5rem;
}

.form-tab-content.scroll-mode .tab-pane.scroll-section:last-child[b-2ow6brtc2f] {
    border-bottom: none;
    padding-bottom: 1rem;
}

/* Section 標題 - 圖示 + 文字 + 主色底線 */
.scroll-section-heading[b-2ow6brtc2f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-blue);
}

.scroll-section-heading i[b-2ow6brtc2f] {
    font-size: 1rem;
    color: var(--primary-blue);
}

.scroll-section-title[b-2ow6brtc2f] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

/* Scroll 模式 Tab Bar:統一改底線式高亮(桌機與手機統一,符合「位置指示」語意) */
.form-tab-btn-group.scroll-mode[b-2ow6brtc2f] {
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
    gap: 0.25rem;
}

.form-tab-btn-group.scroll-mode .form-tab-btn[b-2ow6brtc2f] {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: 0.35rem 0.75rem;
}

.form-tab-btn-group.scroll-mode .form-tab-btn:hover[b-2ow6brtc2f] {
    background-color: rgba(var(--primary-blue-rgb), 0.08);
    border-bottom-color: rgba(var(--primary-blue-rgb), 0.3);
    color: var(--primary-blue);
}

.form-tab-btn-group.scroll-mode .form-tab-btn.active[b-2ow6brtc2f] {
    color: var(--primary-blue);
    background-color: transparent;
    border-bottom-color: var(--primary-blue);
    font-weight: 600;
}

.form-tab-btn-group.scroll-mode .form-tab-btn.active:hover[b-2ow6brtc2f] {
    background-color: rgba(var(--primary-blue-rgb), 0.06);
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

.form-tab-btn-group.scroll-mode .form-tab-btn:disabled[b-2ow6brtc2f],
.form-tab-btn-group.scroll-mode .form-tab-btn[disabled][b-2ow6brtc2f] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Tab 按鈕群組容器 — sticky 在 .modal-body 捲動容器頂端，所有視窗大小通用
   永遠 sticky：解決切換 Tab 需先捲回頂端的問題，並避免 Tab 內子元素 sticky 與其競爭
   背景色使用 --bs-modal-bg（Bootstrap modal body 實際背景）以確保深淺色模式下都不透明 */
.form-tab-btn-group[b-2ow6brtc2f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--bs-modal-bg, var(--bg-primary));
}

/* Tab 按鈕基礎樣式 */
.form-tab-btn[b-2ow6brtc2f] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.form-tab-btn:hover[b-2ow6brtc2f] {
    color: var(--primary-blue);
    background-color: rgba(var(--primary-blue-rgb), 0.1);
    border-color: rgba(var(--primary-blue-rgb), 0.4);
}

/* 作用中的 Tab 按鈕 */
.form-tab-btn.active[b-2ow6brtc2f] {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    font-weight: 600;
}

.form-tab-btn.active:hover[b-2ow6brtc2f] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}

/* Tab 按鈕圖示 */
.form-tab-btn i[b-2ow6brtc2f] {
}

/* Tab 內容區域 */
.form-tab-content[b-2ow6brtc2f] {
    padding: 0.5rem 0 0 0;
}

.form-tab-content .tab-pane[b-2ow6brtc2f] {
    width: 100%;
}

/* 手機版 Tab：水平可滑動列 */
@media (max-width: 576px) {
    /* Tab 按鈕群組：不換行，允許水平滑動，隱藏捲軸
       sticky 固定在 modal-body 頂端，避免捲動時消失，並用實色背景與 action bar 清楚分隔
       padding-top 確保無論是否捲動，tab 按鈕與上方 action bar 之間始終保有視覺間距 */
    .form-tab-btn-group[b-2ow6brtc2f] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        padding-top: 0.375rem;
        padding-bottom: 0;
        border-bottom: 2px solid var(--border-light);
        position: sticky;
        top: 0;
        z-index: 20;
        background-color: var(--bg-primary);
    }

    .form-tab-btn-group[b-2ow6brtc2f]::-webkit-scrollbar {
        display: none;
    }

    /* Tab 按鈕：不縮小、底線式 active 指示 */
    .form-tab-btn[b-2ow6brtc2f] {
        flex-shrink: 0;
        flex-direction: row;
        padding: 0.45rem 0.65rem;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px; /* 與群組底線對齊 */
        white-space: nowrap;
        background-color: transparent;
    }

    .form-tab-btn i[b-2ow6brtc2f] {
    }

    /* 作用中：底線藍色 + 文字藍色 */
    .form-tab-btn.active[b-2ow6brtc2f] {
        background-color: transparent;
        color: #0d6efd;
        border-bottom-color: #0d6efd;
        font-weight: 600;
    }

    .form-tab-btn.active:hover[b-2ow6brtc2f] {
        background-color: rgba(13, 110, 253, 0.06);
        color: #0d6efd;
    }

    /* Tab 內容區域 */
    .form-tab-content[b-2ow6brtc2f] {
        padding: 0.4rem 0.75rem 0 0.75rem;
    }
}
/* /Components/Shared/UI/Form/GenericSearchFilterComponent.razor.rz.scp.css */
/*
    GenericSearchFilterComponent 專屬樣式
    處理搜尋篩選卡片的視覺效果和使用者體驗
*/

/* ===== 卡片容器樣式 ===== */

/* 卡片外層容器 */
[b-ibqqkkssyi] .card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.3s ease;
}

[b-ibqqkkssyi] .card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* ===== Header 樣式優化 ===== */

/* Header 背景色 - 使用淺色背景以區分層次 */
[b-ibqqkkssyi] .card-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem 0.75rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* Header 標題樣式 */
[b-ibqqkkssyi] .card-header .card-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

/* Header Icon 樣式 */
[b-ibqqkkssyi] .card-header .card-title i {
    color: var(--primary-blue);
    margin-right: 0.5rem;
}

/* Header 按鈕區域 */
[b-ibqqkkssyi] .card-header .d-flex.gap-2 {
    gap: 0.5rem;
}

/* ===== Body 樣式優化 ===== */

[b-ibqqkkssyi] .card-body {
    padding: 0.5rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* ===== 表單元素樣式優化 ===== */

/* Label 樣式 */
[b-ibqqkkssyi] .form-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0 !important; /* 縮短與 input 之間的距離 */
}

/* Input 和 Select 通用樣式 */
[b-ibqqkkssyi] .form-control,
[b-ibqqkkssyi] .form-select {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem !important; /* 縮減內邊距 */
    transition: all 0.2s ease;
}

/* Input Hover 效果 */
[b-ibqqkkssyi] .form-control:hover:not(:disabled):not([readonly]),
[b-ibqqkkssyi] .form-select:hover:not(:disabled):not([readonly]) {
    border-color: var(--table-hover-text) !important;
    background-color: var(--table-hover-bg-striped) !important;
}

[b-ibqqkkssyi] .form-control:focus,
[b-ibqqkkssyi] .form-select:focus {
    border-color: #60A5FA;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
    outline: none;
}

/* ===== Checkbox 和 Radio 樣式 ===== */

[b-ibqqkkssyi] .form-check {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

[b-ibqqkkssyi] .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border: 2px solid #D1D5DB;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

[b-ibqqkkssyi] .form-check-input:checked {
    background-color: var(--primary-blue-alt);
    border-color: var(--primary-blue-alt);
}

[b-ibqqkkssyi] .form-check-input:focus {
    border-color: #60A5FA;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}

[b-ibqqkkssyi] .form-check-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.5rem;
    cursor: pointer;
    user-select: none;
}

/* ===== Grid 系統優化 ===== */
/* 移除自訂 gap 設定，使用 Bootstrap 預設的 gutter 系統以確保正確的欄位排列 */

/* ===== 日期範圍和數字範圍樣式 ===== */
/* 確保日期範圍欄位可以並排顯示 */

[b-ibqqkkssyi] .row.g-2 .form-control {
}

/* ===== Placeholder 樣式 ===== */

[b-ibqqkkssyi] .form-control::placeholder,
[b-ibqqkkssyi] .form-select::placeholder {
    color: var(--text-light);
    opacity: 1;
}

/* ===== 響應式設計 ===== */

/* 小螢幕裝置（手機） */
@media (max-width: 576px) {
    [b-ibqqkkssyi] .card-header {
        padding: 0.375rem 0.75rem;
    }
    
    [b-ibqqkkssyi] .card-header .card-title {
    }
    
    [b-ibqqkkssyi] .card-body {
        padding: 1rem;
    }
    
    [b-ibqqkkssyi] .row.g-3 > [class*="col"] {
        margin-bottom: 0.75rem;
    }
}

/* 中等螢幕裝置（平板） */
@media (min-width: 577px) and (max-width: 768px) {
    [b-ibqqkkssyi] .card-header {
        padding: 0.5rem 1rem;
    }
    
    [b-ibqqkkssyi] .card-body {
        padding: 1.25rem;
    }
}

/* 大螢幕裝置（桌面） */
@media (min-width: 1200px) {
    [b-ibqqkkssyi] .card {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    }
}

/* ===== 動畫效果 ===== */

/* 卡片展開動畫 */
[b-ibqqkkssyi] .card {
    animation: fadeInUp-b-ibqqkkssyi 0.3s ease-out;
}

@keyframes fadeInUp-b-ibqqkkssyi {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 無障礙優化 ===== */

[b-ibqqkkssyi] .form-control:disabled,
[b-ibqqkkssyi] .form-select:disabled {
    background-color: #F3F4F6;
    cursor: not-allowed;
    opacity: 0.6;
}

[b-ibqqkkssyi] .form-check-input:disabled ~ .form-check-label {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== 滾動條樣式（針對多選區域） ===== */

[b-ibqqkkssyi] .card-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-ibqqkkssyi] .card-body::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 3px;
}

[b-ibqqkkssyi] .card-body::-webkit-scrollbar-thumb {
    background: #9CA3AF;
    border-radius: 3px;
}

[b-ibqqkkssyi] .card-body::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ===== 打印樣式優化 ===== */

@media print {
    [b-ibqqkkssyi] .card {
        box-shadow: none;
        border: 1px solid #E5E7EB;
    }
    
    [b-ibqqkkssyi] .card-header {
        background: #F9FAFB !important;
        color: #000000 !important;
        border-bottom: 2px solid #E5E7EB;
    }
}
/* /Components/Shared/UI/Form/PartialDateInput.razor.rz.scp.css */
/* 月/日（及年）緊湊排列；取代 MonthDay 舊有的 Bootstrap input-group（帶邊框 input-group-text 分隔符過長）。
   覆寫 form-control 的 width:100%/display:block，固定窄寬置中。
   Blazor scoped 後處理會自動為選擇器加 [b-xxxxx] 屬性 → 特異度提升至 (0,2,1)，勝 .form-control (0,1,0)，
   且 scoped bundle（ERPCore2.styles.css）載入晚於 bootstrap → 雙重保證勝出。 */
.partial-date-group[b-2ipkhwhhiu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.partial-date-field[b-2ipkhwhhiu] {
    width: 3.25rem;
    min-width: 3.25rem;
    flex: 0 0 auto;
    text-align: center;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* Year 為 4 位數，略寬於月/日兩位數欄位 */
.partial-date-year[b-2ipkhwhhiu] {
    width: 4.75rem;
    min-width: 4.75rem;
    flex: 0 0 auto;
    text-align: center;
}

.partial-date-sep[b-2ipkhwhhiu] {
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
/* /Components/Shared/UI/Form/TimePartsInput.razor.rz.scp.css */
/* 時:分 兩格緊湊排列；覆寫 form-control 的 width:100%/display:block，固定窄寬置中。
   scoped 選擇器特異度 (0,2,0) 勝 .form-control (0,1,0)，且 scoped bundle 載入晚於 bootstrap。 */
.time-parts-input[b-4xyo4axwpo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.time-parts-field[b-4xyo4axwpo] {
    width: 3.25rem;
    min-width: 3.25rem;
    flex: 0 0 auto;
    text-align: center;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.time-parts-sep[b-4xyo4axwpo] {
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
/* /Components/Shared/UI/GenericConfirmModalComponent.razor.rz.scp.css */
.condition-list .list-group-item[b-14tm53msav] {
    background-color: var(--bg-tertiary);
    border-left: 3px solid var(--color-primary);
}

[data-bs-theme=dark] .condition-list .list-group-item[b-14tm53msav] {
    background-color: var(--bg-tertiary);
    border-left-color: var(--color-primary);
}
/* /Components/Shared/UI/Header/GenericHeaderComponent.razor.rz.scp.css */
/* GenericHeaderComponent 專用樣式 */

/* 頁面標題容器 */
.page-header[b-l91nogy8gm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
}

.page-header-with-breadcrumb[b-l91nogy8gm] {
    margin-bottom: 1rem;
}

/* 卡片標題容器 */
.card-header-title[b-l91nogy8gm] {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 標題包裝器 */
.title-wrapper[b-l91nogy8gm] {
    
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.title-wrapper-column[b-l91nogy8gm] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* 標題樣式 */
.page-title[b-l91nogy8gm] {
    
    margin-bottom: 0;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
}

.card-title-header[b-l91nogy8gm] {
    
    margin-bottom: 0;
    color: inherit;
    font-weight: 600;
    line-height: 1.2;
}

.page-title-with-icon[b-l91nogy8gm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title-with-icon[b-l91nogy8gm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 標題圖示 */
.title-icon[b-l91nogy8gm] {
    color: var(--primary-blue);
    font-size: var(--fs-md);
}

.card-title-icon[b-l91nogy8gm] {
    color: inherit;
    font-size: 1em;
}

/* 副標題樣式 */
.page-subtitle[b-l91nogy8gm] {
    color: var(--text-secondary);
    margin-bottom: 0;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* 輕量級頁面標題 */
.header-title-area[b-l91nogy8gm] {
    flex-shrink: 0;
}

.page-title-compact[b-l91nogy8gm] {
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
}

.page-subtitle-compact[b-l91nogy8gm] {
    margin-top: 0.125rem;
}

/* 精緻分隔線 */
.header-divider[b-l91nogy8gm] {
    border-top: 1px solid var(--border-light);
    margin: 0.25rem 0 0.5rem 0;
}

/* 動作按鈕容器 */
.action-container[b-l91nogy8gm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.action-container-column[b-l91nogy8gm] {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

/* 載入狀態樣式 */
.loading-indicator[b-l91nogy8gm] {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.loading-indicator .spinner-border-sm[b-l91nogy8gm] {
    color: var(--primary-blue);
}

/* 麵包屑導航 */
.breadcrumb[b-l91nogy8gm] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item[b-l91nogy8gm] {
}

.breadcrumb-item + .breadcrumb-item[b-l91nogy8gm]::before {
    color: var(--text-light);
}

.breadcrumb-item a[b-l91nogy8gm] {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-l91nogy8gm] {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}

.breadcrumb-item.active[b-l91nogy8gm] {
    color: var(--text-secondary);
}

/* 分隔線 */
hr.header-divider[b-l91nogy8gm] {
    border-color: var(--border-light);
    opacity: 1;
    margin: 1.5rem 0;
}

/* 響應式設計 */
@media (max-width: 767.98px) {
    .page-header[b-l91nogy8gm] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .title-wrapper[b-l91nogy8gm] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .action-container[b-l91nogy8gm] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .card-header-title[b-l91nogy8gm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .page-title[b-l91nogy8gm] {
        font-size: var(--fs-lg);
    }
}

@media (max-width: 575.98px) {
    .page-header[b-l91nogy8gm] {
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }

    .action-container[b-l91nogy8gm] {
        gap: 0.25rem;
    }

    .page-title[b-l91nogy8gm] {
        font-size: var(--fs-lg);
    }

    .breadcrumb-item[b-l91nogy8gm] {
    }

    /* 手機:讓 action 區塊變定寬,內層按鈕列(.index-action-buttons)的 width:100%
       才能 resolve → 觸發水平滑動。root 為 block-level(定寬),故此處 100% = 定寬 containing block。 */
    .header-action-area[b-l91nogy8gm] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/UI/Input/SearchInputComponent.razor.rz.scp.css */
/* 查詢框高度契約 — 源頭修法
   讓 input-group 內三件元素（放大鏡 .input-group-text / 輸入框 .form-control / 清除鈕 .btn）
   永遠等高，且等於專案標準控件高（對齊 GenericButtonComponent Normal 的 .btn ≈ 38px）。

   目的:任何「查詢框 + 按鈕」工具列零額外 CSS 即自動對齊;
        免疫外部只 pin 部分子元素(例如舊 CodeSettingsTab 只 pin 放大鏡+清除鈕到 32px)
        所造成的內部高度不齊。
   逃生口:需要 compact 的場景可由外層覆寫 CSS 變數 --search-control-height。

   用 !important 確保三件高度一致(beat 外部 scoped 的 form-control 高度覆寫,例如
   GenericFormComponent.razor.css 的 ::deep .form-control{height:26px!important});
   compact 場景請改設 --search-control-height,勿只覆寫單一子元素。 */
[b-urshr6mny7] .input-group-text,
[b-urshr6mny7] .form-control,
[b-urshr6mny7] .btn {
    height: var(--search-control-height, 38px) !important;
}

/* 放大鏡框與清除鈕:內容垂直置中,移除上下 padding 避免在固定高度內溢出 */
[b-urshr6mny7] .input-group-text,
[b-urshr6mny7] .btn {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/Shared/UI/NavMenu/NavContextMenu.razor.rz.scp.css */
/* ===== NavMenu 右鍵選單（固定定位）— 視覺對齊 DesignerContextMenu / GenericTableComponent ===== */

.navctx-overlay[b-idhjpyjug2] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    cursor: default;
}

.navctx-menu[b-idhjpyjug2] {
    position: fixed;
    z-index: 1041;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 4px 0;
    user-select: none;
}

.navctx-item[b-idhjpyjug2] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    line-height: 1.4;
    font-size: 0.875rem;
    transition: background-color 0.12s;
}

.navctx-item:hover:not(:disabled):not(.disabled)[b-idhjpyjug2] {
    background: var(--bg-secondary);
}

.navctx-item:disabled[b-idhjpyjug2],
.navctx-item.disabled[b-idhjpyjug2] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.navctx-icon[b-idhjpyjug2] {
    width: 18px;
    text-align: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.navctx-label[b-idhjpyjug2] {
    flex: 1;
}

.navctx-arrow[b-idhjpyjug2] {
    margin-left: 12px;
    opacity: 0.5;
}

.navctx-check[b-idhjpyjug2] {
    margin-left: 12px;
    color: var(--bs-success, #198754);
}

.navctx-divider[b-idhjpyjug2] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 子選單（hover 展開） */
.navctx-submenu[b-idhjpyjug2] {
    display: none;
    position: absolute;
    left: 100%;
    top: -4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 0;
}

.navctx-has-sub:hover > .navctx-submenu[b-idhjpyjug2] {
    display: block;
}

/* 子選單若往右溢出，改向左展開 */
.navctx-menu .navctx-has-sub:hover > .navctx-submenu[b-idhjpyjug2] {
    /* 預設向右；JS adjustPosition 已修正整體 menu 位置，子選單溢位由瀏覽器自然處理 */
}

/* 深色模式 */
[data-bs-theme=dark] .navctx-menu[b-idhjpyjug2],
[data-bs-theme=dark] .navctx-submenu[b-idhjpyjug2] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* /Components/Shared/UI/NavMenu/NavDropdownItem.razor.rz.scp.css */
/* === NavDropdownItem Scoped Styles === */

/* 分隔線樣式 */
.dropdown-divider[b-tra2rx5p5z] {
    height: 1px;
    margin: 0.3rem 0.5rem 0.3rem 1rem;
    background: var(--nav-divider);
    border: none;
    opacity: 0.6;
}

.nav-dropdown-item[b-tra2rx5p5z] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem 0.35rem 1rem;
    color: var(--nav-dropdown-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    width: 100%;
    clear: both;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    cursor: pointer;
}

/* btn-link 樣式重置（用於 button 元素） */
.nav-dropdown-item.btn-link[b-tra2rx5p5z] {
    text-decoration: none;
}

.nav-dropdown-item.btn-link:hover[b-tra2rx5p5z],
.nav-dropdown-item.btn-link:focus[b-tra2rx5p5z] {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

/* 沒有圖示的項目 */
.nav-dropdown-item.no-icon[b-tra2rx5p5z] {
    padding-left: 2.25rem;
}

/* 下拉選單圖示樣式 */
.nav-dropdown-item .nav-dropdown-bi[b-tra2rx5p5z] {
    width: 1rem;
    height: 1rem;
    line-height: 1;
    vertical-align: text-bottom;
    margin-right: 0.5rem;
    flex-shrink: 0;
    display: inline-block;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.nav-dropdown-item .nav-dropdown-bi[b-tra2rx5p5z]::before {
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

/* Hover */
.nav-dropdown-item:hover[b-tra2rx5p5z] {
    background-color: var(--nav-hover-bg);
    color: var(--nav-active-border);
    text-decoration: none;
}

.nav-dropdown-item:hover .nav-dropdown-bi[b-tra2rx5p5z] {
    opacity: 1;
}

/* 當前頁面 active 狀態 */
.nav-dropdown-item.active[b-tra2rx5p5z] {
    background-color: var(--nav-active-bg);
    color: var(--nav-text);
    font-weight: 500;
}

.nav-dropdown-item.active .nav-dropdown-bi[b-tra2rx5p5z] {
    opacity: 1;
}

.nav-dropdown-item.active:hover[b-tra2rx5p5z] {
    background-color: var(--nav-active-hover-bg);
}

/* 報表圖示顏色（青綠色） */
.nav-dropdown-bi.nav-icon-report[b-tra2rx5p5z] {
    color: #0d9488;
    opacity: 0.75;
}

.nav-dropdown-item:hover .nav-dropdown-bi.nav-icon-report[b-tra2rx5p5z] {
    opacity: 1;
}

/* 圖表圖示顏色（橘色） */
.nav-dropdown-bi.nav-icon-chart[b-tra2rx5p5z] {
    color: #ea580c;
    opacity: 0.75;
}

.nav-dropdown-item:hover .nav-dropdown-bi.nav-icon-chart[b-tra2rx5p5z] {
    opacity: 1;
}

/* 深色模式 */
[data-bs-theme=dark] .nav-dropdown-bi.nav-icon-report[b-tra2rx5p5z] {
    color: #5eead4;
}

[data-bs-theme=dark] .nav-dropdown-bi.nav-icon-chart[b-tra2rx5p5z] {
    color: #fb923c;
}

/* 應收對帳單圖示顏色（綠色＝收入進帳） */
.nav-dropdown-bi.nav-icon-receivable[b-tra2rx5p5z] {
    color: #16a34a;
    opacity: 0.75;
}

.nav-dropdown-item:hover .nav-dropdown-bi.nav-icon-receivable[b-tra2rx5p5z] {
    opacity: 1;
}

/* 應付對帳單圖示顏色（紅色＝支出付款） */
.nav-dropdown-bi.nav-icon-payable[b-tra2rx5p5z] {
    color: #dc2626;
    opacity: 0.75;
}

.nav-dropdown-item:hover .nav-dropdown-bi.nav-icon-payable[b-tra2rx5p5z] {
    opacity: 1;
}

/* 深色模式 */
[data-bs-theme=dark] .nav-dropdown-bi.nav-icon-receivable[b-tra2rx5p5z] {
    color: #4ade80;
}

[data-bs-theme=dark] .nav-dropdown-bi.nav-icon-payable[b-tra2rx5p5z] {
    color: #f87171;
}
/* /Components/Shared/UI/NavMenu/NavMenuItem.razor.rz.scp.css */
/* === NavMenuItem Scoped Styles === */

.nav-menu-dropdown-container[b-aa5l78dybr] {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border-radius: var(--radius-lg);
    margin-bottom: 1px;
}

.nav-menu-dropdown-toggle-btn[b-aa5l78dybr] {
    color: var(--nav-text);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    min-height: 2.5rem;
    height: auto;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    font-weight: normal;
    position: relative;
}

.nav-menu-dropdown-toggle-btn:hover[b-aa5l78dybr] {
    background-color: var(--nav-hover-bg);
    color: var(--nav-active-border);
}

/* 展開狀態背景 */
.nav-menu-dropdown-container.expanded .nav-menu-dropdown-toggle-btn:not(:hover)[b-aa5l78dybr] {
    background-color: var(--nav-expanded-bg);
}

/* 展開且 hover */
.nav-menu-dropdown-container.expanded .nav-menu-dropdown-toggle-btn:hover[b-aa5l78dybr] {
    background-color: var(--nav-hover-bg);
    color: var(--nav-active-border);
}

/* 下拉內容 - 平滑展開動畫 */
.nav-menu-dropdown-content[b-aa5l78dybr] {
    background-color: transparent;
    border-radius: 0;
    margin-top: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.12s ease,
                margin-top 0.12s ease;
    border: none;
    margin-left: 0.5rem;
    padding-left: 0;
}

.nav-menu-dropdown-content.show[b-aa5l78dybr] {
    max-height: 600px;
    opacity: 1;
    margin-top: 2px;
}

/* 下拉箭頭 - 使用 bi-chevron-down */
.nav-menu-dropdown-arrow[b-aa5l78dybr] {
    margin-left: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--nav-text-dim);
    flex-shrink: 0;
}

.nav-menu-dropdown-arrow.up[b-aa5l78dybr] {
    transform: rotate(180deg);
}

.nav-menu-dropdown-arrow.down[b-aa5l78dybr] {
    transform: rotate(0deg);
}

/* 簡單連結 */
.nav-menu-nav-link[b-aa5l78dybr] {
    color: var(--nav-text);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    min-height: 2.5rem;
    height: auto;
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    font-weight: normal;
    border-left: 2px solid transparent;
    margin-bottom: 1px;
}

.nav-menu-nav-link:hover[b-aa5l78dybr] {
    background-color: var(--nav-hover-bg);
    color: var(--nav-active-border);
    text-decoration: none;
}

/* 當前頁面指示器 */
.nav-menu-nav-link.active[b-aa5l78dybr] {
    background-color: var(--nav-active-bg);
    border-left-color: var(--nav-active-border);
    color: var(--nav-text);
    font-weight: 500;
}

.nav-menu-nav-link.active:hover[b-aa5l78dybr] {
    background-color: var(--nav-active-hover-bg);
}

/* Icon 樣式 */
.nav-menu-nav-link span[aria-hidden="true"][b-aa5l78dybr],
.nav-menu-dropdown-toggle-btn span[aria-hidden="true"][b-aa5l78dybr] {
    font-size: var(--fs-md);
    margin-right: 0.625rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.nav-menu-nav-link:hover span[aria-hidden="true"][b-aa5l78dybr],
.nav-menu-dropdown-toggle-btn:hover span[aria-hidden="true"][b-aa5l78dybr],
.nav-menu-nav-link.active span[aria-hidden="true"][b-aa5l78dybr] {
    opacity: 1;
}

/* 選單文字 */
.nav-menu-item-text[b-aa5l78dybr] {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 未讀數量徽章 */
.nav-menu-badge[b-aa5l78dybr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    margin-left: auto;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: #dc3545;
    border-radius: 10rem;
    flex-shrink: 0;
}

/* 第二徽章（amber）：「待設定會計科目」等動作提示，與紅色未讀徽章區隔 */
.nav-menu-badge--accent[b-aa5l78dybr] {
    margin-left: auto;          /* 單獨出現時靠右對齊（比照其他徽章） */
    background-color: #ffc107;
    color: #212529;
}

/* 同時有紅色未讀徽章時，amber 接在其後並留小間距（紅色已負責靠右推） */
.nav-menu-badge + .nav-menu-badge--accent[b-aa5l78dybr] {
    margin-left: 0.25rem;
}
/* /Components/Shared/UI/Scanner/BarcodeScanInput.razor.rz.scp.css */
/* 全螢幕掃描覆蓋層。z-index 2000：在編輯 Modal(1050+) 之上、Toast(9999) 之下，
   讓主表「已加入/找不到」Toast 仍可見。深色模式安全：面板用 --bs-body-* 變數。 */
.bsc-overlay[b-5purwyslgv] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.bsc-panel[b-5purwyslgv] {
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.bsc-header[b-5purwyslgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex: 0 0 auto;
}

.bsc-title[b-5purwyslgv] {
    font-weight: 600;
    font-size: 1.05rem;
}

.bsc-body[b-5purwyslgv] {
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bsc-video-wrap[b-5purwyslgv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* html5-qrcode 會把 <video>/<canvas> 注入此容器，由函式庫依容器寬度自行調整尺寸 */
.bsc-video[b-5purwyslgv] {
    width: 100%;
    min-height: 240px;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.bsc-cam-controls[b-5purwyslgv] {
    display: flex;
    justify-content: center;
}

.bsc-hint[b-5purwyslgv] {
    margin-bottom: 0;
}

.bsc-photo-btn[b-5purwyslgv] {
    margin-bottom: 0;
}

.bsc-recent-title[b-5purwyslgv] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

.bsc-recent-item[b-5purwyslgv] {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* 窄螢幕（手機）：面板貼滿、影像更高，方便對準 */
@media (max-width: 575.98px) {
    .bsc-overlay[b-5purwyslgv] {
        padding: 0;
    }

    .bsc-panel[b-5purwyslgv] {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    .bsc-video[b-5purwyslgv] {
        min-height: 300px;
    }
}
/* /Components/Shared/UI/Signature/SignaturePadModal.razor.rz.scp.css */
/* 簽名板容器 — flex 直向填滿 .modal-body-content（其 flex 設定見 wwwroot/css/signature-pad-modal.css） */
.signature-pad-container[b-5a0ivmpdhc] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
}

/* Canvas 外框 — 佔據剩餘所有高度，JS 以 clientHeight/clientWidth 算實際畫布尺寸 */
.signature-canvas-wrapper[b-5a0ivmpdhc] {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
    touch-action: none; /* 防止行動裝置捲動干擾簽名 */
}

.signature-canvas-wrapper canvas[b-5a0ivmpdhc] {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* 簽名基準線 ✕___ — 引導使用者在正確位置簽名；純 CSS overlay，不會被 toDataURL 匯出 */
.signature-baseline[b-5a0ivmpdhc] {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 30%;
    border-bottom: 2px dashed #c7ccd1;
    pointer-events: none;
}

.signature-baseline-x[b-5a0ivmpdhc] {
    position: absolute;
    left: 0;
    bottom: 2px;
    color: #aeb4ba;
    font-size: 1.15rem;
    line-height: 1;
}

/* 提示文字 — 置中；落筆後由 OnStrokeBegin 移除 */
.signature-placeholder[b-5a0ivmpdhc] {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 1.1rem;
}