/*
   컴포넌트 자체는 DevExpress Fluent 테마가 그린다.
     라이트 : Fluent Light + Blue accent
     다크   : Fluent Dark + Purple accent
   (Components/App.razor 의 DxResourceManager.RegisterTheme 로 주입된다)

   그 위에 두손ERP 의 색·간격·라운드·공용 컴포넌트 외형을 얹는 한 겹이
   dsci-erp.css 다. 새 스타일 규칙은 그쪽 토큰으로 해결하고,
   이 파일에는 외형이 아니라 동작에 필요한 것만 남긴다.
*/

/* 한글 웹폰트 로딩 + DevExpress 에 폰트 전달 (@font-face 라 CSS 로만 가능하다) */
@import url('./fonts.css');

/* 두손ERP 스타일 층. --ds-* 토큰과 .ds-* 공용 클래스를 DevExpress Fluent 위에 얹는다.
   색·간격·라운드·컴포넌트 외형은 전부 여기서 나온다. */
@import url('./dsci-erp.css');

/* 앱이 뷰포트를 채우게 한다. 배경·글자색은 테마가 칠한다. */
html,
body {
    height: 100%;
    margin: 0;
}

/*
   DsIcon 의 인라인 SVG 는 viewBox 만 있고 width/height 속성이 없다.
   크기를 주지 않으면 브라우저 기본값 300x150px 로 그려진다.
*/
.ds-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/*
   WASM 로더 오버레이. erp-wasm-loader.js 가 is-visible / is-hidden 클래스를
   토글해서 켜고 끈다. 이 규칙이 없으면 로더가 항상 화면에 남는다.
*/
.erp-wasm-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.erp-wasm-loader.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.erp-wasm-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/*
   셸 비상구(#erp-shell-fallback). App.razor 의 기동 스크립트가 WASM 이 못 뜨거나 셸 아일랜드가
   안 그려지면 hidden 을 푼다. 서버가 그린 요소라 WASM 없이도 보이고, 안의 링크(새로 고침 · /logout)도 WASM 없이 동작한다.
   색은 테마 토큰(--ds-*)을 쓴다 - 다크·라이트 어느 쪽에서도 본문과 같은 톤이다.
*/
.erp-shell-fallback {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: color-mix(in srgb, var(--ds-bg, #161826) 70%, transparent);
}

/* Blazor 가 style.display = block 으로 켠다(id 가 blazor-error-ui). 그래서 바깥은 display 를 정하지 않고 안쪽이 가운데 정렬을 한다. */
.erp-shell-fallback[hidden] {
    display: none;
}

.erp-shell-fallback-inner {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 1rem;
}

.erp-shell-fallback-card {
    max-width: 28rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: var(--ds-surface, #232532);
    color: var(--ds-text, #e9e9ed);
    border: 1px solid var(--ds-divider, rgba(233, 233, 237, 0.16));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.erp-shell-fallback-text {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.erp-shell-fallback-reason {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    opacity: 0.6;
    word-break: break-word;
}

.erp-shell-fallback-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}