/* 현재고 조회 페이지 전용 CSS입니다. 이 파일을 수정하면 현재고 조회 화면에만 적용됩니다. */
/* 선택자 주석은 어느 화면 요소인지, 속성 주석은 어떤 값을 바꾸는지 설명합니다. */

/* 현재고 조회: .inventory-filter 선택자의 조회조건 영역에 적용됩니다. */
.inventory-filter {
  /* 세로 정렬을 flex-end로 맞춥니다. */
  align-items: flex-end;
}

/* 현재고 조회: .inventory-table-wrap 선택자의 표에 적용됩니다. */
.inventory-table-wrap,
/* 현재고 조회: .material-stock-table-wrap 선택자의 표에 적용됩니다. */
.material-stock-table-wrap {
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
  /* 넘치는 내용 처리 방식을 auto로 설정합니다. */
  overflow: auto;
}

/* 현재고 조회: .inventory-table-wrap thead th 선택자의 표 제목칸에 적용됩니다. */
.inventory-table-wrap thead th,
/* 현재고 조회: .material-stock-table-wrap thead th 선택자의 표 제목칸에 적용됩니다. */
.material-stock-table-wrap thead th {
  /* 배치 기준을 sticky로 설정합니다. */
  position: sticky;
  /* 위쪽 위치를 0로 지정합니다. */
  top: 0;
  /* 겹침 순서를 3로 설정합니다. */
  z-index: 3;
}

/* 현재고 조회: 전체 화면 영역을 화면 안에 맞춰 표 카드가 남은 공간만 차지하게 합니다. */
.stock-page {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 조회조건, 요약카드, 표 영역을 세로로 배치합니다. */
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  /* 요소 사이 간격을 16px !important로 줍니다. */
  gap: 16px !important;
  /* 화면 안에서 표 끝이 보이도록 전체 높이를 계산합니다. */
  height: calc(100vh - var(--topbar-height, 70px) - 34px) !important;
  /* 화면 높이보다 억지로 커지지 않게 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
}

/* 현재고 조회: 현재고 표 카드가 남은 세로 공간 안에서만 늘어나게 합니다. */
.stock-page .inbound-history-card {
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 카드 안쪽 요소를 세로로 배치합니다. */
  flex-direction: column !important;
  /* 그리드의 남은 공간을 채우도록 높이를 100%로 지정합니다. */
  height: 100% !important;
  /* 스크롤 영역이 줄어들 수 있도록 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
  /* 카드 밖으로 표가 밀려나지 않도록 숨김 처리합니다. */
  overflow: hidden !important;
}

/* 현재고 조회: 표 스크롤 영역은 카드 안에서만 스크롤되게 합니다. */
.stock-page .inbound-history-scroll {
  /* 남은 공간을 차지하도록 flex 값을 지정합니다. */
  flex: 1 1 auto !important;
  /* 로딩 오버레이의 배치 기준을 잡습니다. */
  position: relative !important;
  /* 공통 CSS의 420px 높이 제한을 해제합니다. */
  max-height: none !important;
  /* 화면 밖으로 밀리지 않도록 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
  /* 카드가 정한 남은 높이에 맞춥니다. */
  height: auto !important;
  /* 넘치는 내용은 스크롤로 처리합니다. */
  overflow: auto !important;
}

/* 현재고 조회: 조회 중에는 필터와 버튼이 잠시 멈춘 상태임을 보여줍니다. */
.stock-page .stock-filter-card :disabled {
  /* 투명도를 살짝 낮춰 비활성 상태를 표시합니다. */
  opacity: .72 !important;
  /* 마우스 커서를 대기 상태로 표시합니다. */
  cursor: wait !important;
}

/* 현재고 조회: 표 영역 위에 로딩 안내를 띄웁니다. */
.stock-loading-overlay {
  /* 표 스크롤 영역 전체를 덮도록 배치합니다. */
  position: absolute !important;
  /* 네 방향을 모두 0으로 맞춥니다. */
  inset: 0 !important;
  /* 표보다 위에 보이도록 겹침 순서를 지정합니다. */
  z-index: 20 !important;
  /* 내용을 가운데 정렬합니다. */
  display: flex !important;
  /* 세로 방향으로 안내 문구를 배치합니다. */
  flex-direction: column !important;
  /* 가로 정렬을 center로 맞춥니다. */
  align-items: center !important;
  /* 세로 정렬을 center로 맞춥니다. */
  justify-content: center !important;
  /* 요소 사이 간격을 10px로 줍니다. */
  gap: 10px !important;
  /* 안쪽 여백을 24px로 줍니다. */
  padding: 24px !important;
  /* 반투명 배경으로 표 위에 떠 있는 느낌을 줍니다. */
  background: rgba(248, 251, 255, .9) !important;
  /* 글자색을 기본 진한색으로 지정합니다. */
  color: var(--text) !important;
  /* 가운데 정렬로 안내 문구를 읽기 쉽게 만듭니다. */
  text-align: center !important;
}

/* 현재고 조회: 로딩 제목 문구입니다. */
.stock-loading-overlay strong {
  /* 글자 크기를 16px로 지정합니다. */
  font-size: 16px !important;
  /* 글자를 굵게 표시합니다. */
  font-weight: 900 !important;
}

/* 현재고 조회: 로딩 보조 문구입니다. */
.stock-loading-overlay p {
  /* 바깥 여백을 제거합니다. */
  margin: 0 !important;
  /* 글자색을 보조색으로 지정합니다. */
  color: var(--muted) !important;
  /* 글자 크기를 13px로 지정합니다. */
  font-size: 13px !important;
  /* 글자를 살짝 굵게 표시합니다. */
  font-weight: 800 !important;
}

/* 현재고 조회: 로딩 스피너 모양입니다. */
.stock-loading-spinner {
  /* 기본 너비를 34px로 지정합니다. */
  width: 34px !important;
  /* 기본 높이를 34px로 지정합니다. */
  height: 34px !important;
  /* 테두리를 둥글게 만듭니다. */
  border-radius: 50% !important;
  /* 회전 중 비어 보일 부분을 연한색으로 지정합니다. */
  border: 4px solid #d8e7ff !important;
  /* 회전 중 강조될 부분을 파란색으로 지정합니다. */
  border-top-color: var(--blue-700) !important;
  /* 회전 애니메이션을 적용합니다. */
  animation: stock-loading-spin .85s linear infinite !important;
}

/* 현재고 조회: 스피너 회전 애니메이션입니다. */
@keyframes stock-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 현재고 조회: 고객사 */
.stock-table th:nth-child(1),
.stock-table td:nth-child(1) {
   width: 100px !important;
  min-width: 80px !important;
  max-width: 120px !important;
}

/* 현재고 조회: 제품명 */
.stock-table th:nth-child(2),
.stock-table td:nth-child(2) {
  width: 220px !important;
  min-width: 180px !important;
  max-width: 320px !important;
}

/* 현재고 조회: 품목명 */
.stock-table th:nth-child(3),
.stock-table td:nth-child(3) {
    width: 220px !important;
  min-width: 180px !important;
  max-width: 420px !important;
}
/* 현재고 조회: 규격 */
.stock-table th:nth-child(4),
.stock-table td:nth-child(4) {
    width: 220px !important;
  min-width: 180px !important;
  max-width: 420px !important;
}
/* 현재고 조회: 품목코드 */
.stock-table th:nth-child(5),
.stock-table td:nth-child(5) {
    width: 110px !important;
  min-width: 80px !important;
  max-width: 150px !important;
}
/* 현재고 조회: 공급처 */
.stock-table th:nth-child(6),
.stock-table td:nth-child(6) {
   width: 100px !important;
  min-width: 80px !important;
  max-width: 120px !important;
}

/* 현재고 조회: 입고수량 */
.stock-table th:nth-child(7),
.stock-table td:nth-child(7) {
  width: 90px !important;
  min-width: 80px !important;
  max-width: 110px !important;
}
/* 현재고 조회: 출고수량 */
.stock-table th:nth-child(8),
.stock-table td:nth-child(8) {
  width: 90px !important;
  min-width: 80px !important;
  max-width: 110px !important;
}
/* 현재고 조회: 잔여수량 */
.stock-table th:nth-child(9),
.stock-table td:nth-child(9) {
  width: 90px !important;
  min-width: 80px !important;
  max-width: 110px !important;
}