/**
 * loading.css — 로딩 인디케이터 공용 스타일 (SSOT)
 *
 * [GOCDSS-5327] 기존에 로딩 표현이 두 갈래로 갈려 있었다.
 *   - GoTable 표 로딩: CSS 링 스피너 (.go-table-loading*) — worklist 표에서만 사용
 *   - util.loading():  spinner.gif (주황 이미지) — viewer / login / report / calculators 등
 * 같은 제품에서 로딩 모양이 달라 보였고, GIF 는 테마·해상도에 대응하지 못했다.
 *
 * 이 파일이 두 경로의 **단일 정의**다. GoTable.css 는 더 이상 이 규칙을 갖지 않으며,
 * util.loading() 도 같은 클래스를 사용한다. 색은 테마 토큰을 따른다.
 *
 * ⚠ 이 파일을 로드하지 않는 페이지에서는 로딩이 보이지 않는다.
 *   util.loading() 또는 GoTable 을 쓰는 view 는 반드시 이 CSS 를 링크해야 한다.
 */

/* ── 백드롭 ────────────────────────────────────────────────
   GoTable 은 표 영역을 채우는 absolute(0,0,0,0) 형태,
   util.loading 은 대상 element 크기에 맞춰 JS 가 width/height 를 지정한다.
   둘 다 같은 배경/전환을 쓰도록 여기서 정의한다. */
.go-table-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  pointer-events: all;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.go-table-loading.active {
  opacity: 1;
  visibility: visible;
}

/* ── 링 스피너 ──────────────────────────────────────────── */
.go-table-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--smcw-color-custom-active-button, #4397ee);
  border-radius: 50%;
  animation: go-table-spin 0.7s linear infinite;
}

@keyframes go-table-spin {
  to {
    transform: rotate(360deg);
  }
}

[data-theme='light'] .go-table-loading {
  background: rgba(255, 255, 255, 0.4);
}

[data-theme='light'] .go-table-loading-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--smcw-color-custom-active-button, #4397ee);
}

/* ── 로딩 패널 (제품 표준) ──────────────────────────────────
   [GOCDSS-5333] common.css 에서 이관. 워크리스트 새로고침/초기화 시 뜨는 그 로딩이며,
   camera-capture · viewer dicom-info · util 캐시정리 오버레이가 이미 같은 패턴을 쓴다.
   util.loading() 도 이 패널을 쓰도록 통일했다.

   컨테이너(.global-loading-overlay / .global-worklist-loading / .camera-capture-loading 등)는
   각자 배치 방식이 달라 호출처가 정의하고, **패널 내부 표현만** 여기서 단일 정의한다. */
.global-loading-overlay__panel {
  min-width: 240px;
  padding: 22px 26px;
  border-radius: 12px;
  background: rgba(9, 18, 34, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.global-loading-overlay__icon {
  font-size: 38px;
  color: #43e6a2;
}

.global-loading-overlay__text {
  margin-top: 10px;
  color: #f2f7ff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ── util.loading() 전용 컨테이너 ──────────────────────────
   [GOCDSS-5333] util.loading 은 화면 전체가 아니라 **특정 element 위에** 로딩을 덮는다
   (viewer 이미지 영역 57%/45% 등). 그래서 fixed 인 .global-loading-overlay 대신
   자체 컨테이너를 쓰되, 패널 내부 표현은 위 __panel/__icon/__text 를 그대로 공유한다. */
.smcw-loading-overlay {
  /* JS 가 width/height 를 지정한다. 여기서는 공통 속성만. */
  position: absolute;
  z-index: 1000000;
  background: rgba(7, 15, 30, 0.55);
  animation: smcw-loading-fade 0.15s ease-out;
}

/* 패널을 지정 좌표 중앙에 놓는다. 패널 크기가 문구 길이에 따라 달라져도 중앙 유지. */
.smcw-loading-panel-wrap {
  position: absolute;
  z-index: 1000001;
  transform: translate(-50%, -50%);
  animation: smcw-loading-fade 0.15s ease-out;
  pointer-events: none;
}

/* ── 인라인 스피너 ──────────────────────────────────────────
   [GOCDSS-5327] 오버레이가 아니라 문서 흐름 안에 놓이는 경우(모달 본문에서
   "예상 크기 계산 중" 등). position:static 이라 부모의 정렬을 그대로 따른다. */
.smcw-loading-spinner-inline {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--smcw-color-custom-active-button, #4397ee);
  border-radius: 50%;
  animation: go-table-spin 0.7s linear infinite;
  box-sizing: border-box;
  vertical-align: middle;
}

[data-theme='light'] .smcw-loading-spinner-inline {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--smcw-color-custom-active-button, #4397ee);
}

@keyframes smcw-loading-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 움직임 최소화 설정 존중 — 회전 대신 은은한 명멸 */
@media (prefers-reduced-motion: reduce) {
  .go-table-loading-spinner,
  .smcw-loading-spinner-inline {
    animation: smcw-loading-fade 1s ease-in-out infinite alternate;
  }
  /* FontAwesome fa-spin 도 멈춘다 */
  .global-loading-overlay__icon.fa-spin {
    animation: none;
  }
}