/* static/css/main.css */

:root {
  /* 
    전체 애플리케이션의 폰트 크기를 이곳에서 개별적으로 조절할 수 있습니다.
    1rem은 html의 font-size 값(기본 16px)을 기준으로 한 상대 단위입니다.
  */
  --font-size-base: 0.7rem;         /* 기본 텍스트 (본문, 라벨 등) */
  --font-size-nav: 0.7rem;           /* 네비게이션 링크 */
  --font-size-title: 0.8rem;         /* 페이지 제목 (h3) */
  --font-size-table-header: 0.7rem; /* 테이블 헤더 (th) */
  --font-size-table-cell: 0.7rem;   /* 테이블 내용(td) */
  --font-size-button: 0.7rem;        /* 버튼 */
}

/*
  전체 애플리케이션의 기본 폰트 크기 기준을 설정합니다. (1rem의 기준값)
  예: 14px, 15px, 16px 등
*/
html {
  font-size: 16px;
}

body { 
  background-color: #f8f9fa; 
  font-size: var(--font-size-base); /* body의 기본 폰트 크기 적용 */
  min-width: 1000px; /* UI의 최소 너비를 800px로 설정 */
}

/* 페이지 제목 (h3) 폰트 크기 적용 */
h3 {
  font-size: var(--font-size-title);
}

/* 네비게이션 링크 폰트 크기 적용 */
.nav-link {
  font-size: var(--font-size-nav);
}

/* 버튼 폰트 크기 적용 */
.btn {
  font-size: var(--font-size-button);
}

/* --- 테이블 행 하이라이트 색상 변경 --- */
/* .table-hover 클래스가 있는 테이블의 모든 행에 마우스를 올렸을 때 적용됩니다. */
.table-hover > tbody > tr:hover > * {
  /* Bootstrap의 기본 회색 하이라이트를 하늘색 계열로 덮어씁니다. */
  --bs-table-accent-bg: #b3e5fc; /* 변수를 사용한 방식 */
  background-color: #b3e5fc; /* 속성을 직접 지정하여 더 확실하게 적용 */
}

/* 모든 테이블의 th, td에 전역 폰트 크기 변수 적용 */
table th, table td {
  font-size: var(--font-size-table-cell);
  line-height: 1.4; /* 행 높이를 폰트 크기에 가깝게 조정 (기존 1.5) */
  padding: 0.05rem 0.1rem; /* 상하 여백 최소화 (기존 0.1rem) */
}

/* 테이블 내 드롭다운(select)의 폰트 크기를 테이블 셀과 동일하게 설정 */
table td select.form-select {
  font-size: var(--font-size-table-cell);
  /* 드롭다운의 높이를 셀에 맞추고 불필요한 여백/테두리를 제거합니다. */
  height: 100%; /* 셀의 높이에 맞춤 */
  margin: 0; /* 기본 마진 제거 */
  border: none; /* 기본 테두리 제거 */
  padding: 0.1rem 0.2rem; /* 셀과 동일한 패딩 적용 */
  box-shadow: none; /* 기본 그림자 제거 */
  background-color: transparent; /* 배경색 투명하게 하여 셀 배경과 일치 */
}

/* --- ER재고 페이지 테이블 정렬 --- */
/* 기본적으로 모든 셀을 가운데 정렬 */
/* Bootstrap의 .table > :not(caption) > * > * 규칙보다 우선순위를 높이기 위해 선택자를 더 구체적으로 작성합니다. */
.table#erStockTable > tbody > tr > td,
.table#erStockTable > thead > tr > th {
  text-align: center !important; /* !important를 추가하여 우선순위를 높입니다. */
  vertical-align: middle; /* 세로 정렬도 가운데로 */
}

/* '상품명' 열(3번째)만 왼쪽 정렬 */
.table#erStockTable > tbody > tr > td:nth-child(3) {
  text-align: left !important;
}

.group-toggle-cell {
  width: 40px; /* 순번 열과 너비를 맞춤 */
}

.group-toggle-btn {
  padding: 0.1rem 0.3rem; /* 버튼 크기 미세 조정 */
}

/* 버튼 그룹 내 아이콘과 텍스트 간격 조정 */
.btn-group .btn i {
  margin-right: 0.3rem;
}

/* 보기 전환 버튼에도 동일한 스타일 적용 */
.btn-outline-info i {
  margin-right: 0.3rem;
}

/* --- 네비게이션 바 상단 고정 --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030; /* Bootstrap의 다른 컴포넌트(모달 등)보다 위에 오도록 높은 값 설정 */
}

/* --- 재고체크 페이지 스타일 --- */
.stock-check-table-container {
  max-height: 75vh; /* 테이블 컨테이너 최대 높이 */
  overflow-y: auto;
}

.stock-check-action-col {
  width: 80px; /* 작업 열 너비 고정 */
  text-align: center;
}