/* ==========================================================================
   全站導覽遮罩 — 點左側選單 / 任何站內連結後,伺服器渲染新頁的空窗期蓋住畫面。

   為什麼需要:App.razor 的 <Routes /> 是 static SSR,每頁各自 @rendermode
   InteractiveServer 且預設 prerender:true,所以點連結後伺服器要把該頁
   OnInitializedAsync 的 API 全跑完才回 HTML,這段時間畫面完全停在舊頁、零回饋。

   markup 在 Components/App.razor(#nav-loading),行為在 wwwroot/js/nav-loading.js。
   loader 結構沿用 Nifty v4.2.0 miscellaneous-loader.css.html 的 ball-clip-rotate,
   CSS 來自已載入的 assets/vendors/loader.css/loader.min.css,這裡只補遮罩外框。
   ========================================================================== */

#nav-loading {
    position: fixed;
    inset: 0;
    /* Bootstrap modal 是 1055 / backdrop 1050;導覽遮罩要蓋過它們,
       但 Blazor 重連對話框是 <dialog> top-layer,永遠在最上層不受影響 */
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 22, 26, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

#nav-loading.is-visible {
    display: flex;
    opacity: 1;
}

#nav-loading .nav-loading__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* loader.css 的顏色變數(原始套件拼字就是 looader,不是筆誤) */
#nav-loading .loader {
    --looader-primary-color: #fff;
}

#nav-loading .nav-loading__text {
    /* 字級用 rem 跟 SettingsPanel 的 slider 連動,不寫死 px */
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
}