/* 防止 Blazor Server 連線時的閃爍 */

/* 確保頁面在 Blazor 連線建立前就顯示 */
html {
    visibility: visible !important;
}

body {
    opacity: 1;
    transition: none;
}

/* 不使用導頁淡出效果 */
.page { transition: none; }

/* 路由切換遮罩：資料載入中先半透明遮蔽 */
.route-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: none;
    z-index: 2147483646; /* 低於 initial-shell，但高於頁面 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.route-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* 遮罩期間 footer 不顯示，避免先閃出 */
body.route-loading-active footer {
    visibility: hidden;
}

.route-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
}

/* 初始載入殼：避免重整時白畫面/閃爍 */
#initial-shell {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

#initial-shell.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.initial-shell-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
}

.initial-shell-spinner {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid rgba(87, 176, 183, 0.25);
    border-top-color: rgba(87, 176, 183, 1);
    animation: initialShellSpin 0.8s linear infinite;
}

@keyframes initialShellSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 連線中斷提示：Blazor 只會切換 class，預設隱藏 */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal .reconnect-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    color: #333;
    font-size: 15px;
    text-align: center;
}

#components-reconnect-modal .reconnect-text {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .reconnect-text-retrying,
#components-reconnect-modal.components-reconnect-failed .reconnect-text-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .initial-shell-spinner,
#components-reconnect-modal.components-reconnect-rejected .initial-shell-spinner {
    display: none;
}

#components-reconnect-modal button,
#blazor-error-ui button {
    margin-left: 8px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* 伺服器端未處理例外提示：Blazor 會以 inline style 切成 display:block */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483645;
    padding: 12px 20px;
    background: #ffe8a1;
    border-top: 1px solid #e0c46c;
    color: #5c4400;
    font-size: 15px;
    text-align: center;
}

/* 避免載入時的佈局偏移 */
.service-categories-wrapper,
.popular-grid,
.news-grid,
.stats-section {
    min-height: 100px;
    transition: none;
}

/* ⚠️ 不使用 fadeIn 動畫：
   Blazor 重新渲染/重新插入 DOM 時會反覆觸發 animation，造成「重整閃兩次」 */

/* 減少登入狀態切換時的閃爍 */
.auth-buttons {
    min-height: 40px; /* 預留空間，避免高度變化 */
}

.auth-buttons > * {
    transition: none;
}

/* 隱藏 Blazor 連線時的載入指示器（如果有的話） */
.blazor-loading,
#blazor-loading {
    display: none !important;
}