/* #blazor-error-ui 是唯一還原的 Blazor 範本樣式：它的標記寫在 _Layout.cshtml / index.html 裡，
   沒有這段樣式就會失去 display:none 與 position:fixed，變成一個永遠可見、跑到文件最底端的
   錯誤區塊。其餘範本樣式（字型、.btn-primary、連結顏色）刻意保持停用，避免與 MudBlazor 打架。 */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* .blazor-error-boundary 不還原：EywaErrorBoundary 已自備行內樣式的錯誤畫面，
   框架這條預設樣式沒有消費者，而它 ::after 的錯誤文字是寫死的英文、無法在地化。 */

/* ===== 映射入口對話框樣式 ===== */
.mapping-entry-dialog,
.mapping-designer-dialog {
    min-width: 1000px !important;
    max-width: 1400px !important;
}

.mapping-entry-dialog .mud-dialog-content,
.mapping-designer-dialog .mud-dialog-content {
    padding: 0 !important;
    min-height: 650px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.mapping-entry-dialog .mud-tabs-panels,
.mapping-designer-dialog .mud-tabs-panels {
    min-height: 550px;
}

.mapping-entry-dialog .mud-tab-panel,
.mapping-designer-dialog .mud-tab-panel {
    padding: 20px 28px;
}

/* ERP 選擇卡片樣式 */
.mapping-entry-dialog .erp-card {
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.mapping-entry-dialog .erp-card:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
}

.mapping-entry-dialog .erp-card-selected {
    border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
}

/* 映射表格樣式 */
.mapping-table {
    width: 100%;
}

.mapping-table .mud-table-cell {
    padding: 10px 14px;
    vertical-align: middle;
}

.mapping-table .source-column {
    min-width: 220px;
    max-width: 300px;
    width: 25%;
}

.mapping-table .target-column {
    min-width: 220px;
    width: 35%;
}

.mapping-table .transform-column {
    min-width: 160px;
    width: 25%;
}

.mapping-table code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

.mapping-designer-dialog .mud-dialog-actions {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* 響應式調整 - 大螢幕 */
@media (min-width: 1600px) {
    .mapping-designer-dialog {
        min-width: 1200px !important;
        max-width: 1600px !important;
    }

    .mapping-designer-dialog .mud-dialog-content {
        min-height: 750px;
    }
}

/* 響應式調整 - 中等螢幕 */
@media (max-width: 1200px) {
    .mapping-designer-dialog {
        min-width: 90vw !important;
        max-width: 95vw !important;
    }
}

/* 響應式調整 - 小螢幕 */
@media (max-width: 900px) {
    .mapping-designer-dialog {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .mapping-designer-dialog .mud-dialog-content {
        min-height: 400px;
    }
}

/* ========== 開機載入遮罩（#app-loading，見 Pages/_Layout.cshtml） ==========
   預渲染關閉之後，SignalR 線路接上之前畫面上沒有任何內容，由這塊遮罩補上那段空窗。

   兩個刻意的設計：
   1. 延遲 250ms 才淡入。線路 300ms 內就接上時，spinner 只會「閃一下」——而閃一下的
      轉圈比什麼都不顯示更像當機，因為它在宣告「你要等」。250ms 內完成就完全看不到它。
   2. 跟隨系統深淺色。控制室與夜班現場大量使用深色；每次整頁載入先來一張全白閃光，
      在 24 小時輪班的現場是實質困擾。開機階段讀不到使用者存的主題偏好（那要 JS），
      prefers-color-scheme 是唯一拿得到的訊號。 */
#app-loading {
    background: #fff;
    color: #5f6b7a;
    opacity: 0;
    animation: app-loading-in 200ms ease-out 250ms forwards;
}

@keyframes app-loading-in {
    to { opacity: 1; }
}

#app-loading .app-loading-title {
    font-size: 1.05rem;
    letter-spacing: .02em;
}

#app-loading .app-loading-timeout {
    max-width: 22rem;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    #app-loading {
        background: #1a1a27;
        color: #9aa4b2;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app-loading {
        animation-duration: 1ms;
    }
}