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

/* 공정 진행 현황: .process-progress-search 선택자의 조회조건 영역에 적용됩니다. */
.process-progress-search {
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap !important로 설정합니다. */
  flex-wrap: wrap !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 10px 12px !important로 줍니다. */
  gap: 10px 12px !important;
  /* 안쪽 여백을 12px 16px !important로 줍니다. */
  padding: 12px 16px !important;
  /* 이 값보다 작아지지 않도록 최소 높이를 0 !important로 지정합니다. */
  min-height: 0 !important;
}

/* 공정 진행 현황: .process-progress-search label 선택자의 라벨 줄에 적용됩니다. */
.process-progress-search label {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 가로 열 배치를 max-content auto !important로 정합니다. */
  grid-template-columns: max-content auto !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 8px !important로 줍니다. */
  gap: 8px !important;
  /* 기본 너비를 auto !important로 지정합니다. */
  width: auto !important;
  /* 이 값보다 작아지지 않도록 최소 높이를 38px !important로 지정합니다. */
  min-height: 38px !important;
}

/* 공정 진행 현황: .process-progress-search input 선택자의 입력칸에 적용됩니다. */
.process-progress-search input,
/* 공정 진행 현황: .process-progress-search select 선택자의 선택박스에 적용됩니다. */
.process-progress-search select {
  /* 기본 높이를 38px !important로 지정합니다. */
  height: 38px !important;
}

/* 공정 진행 현황: .process-progress-search input[type="date"] 선택자의 입력칸에 적용됩니다. */
.process-progress-search input[type="date"] {
  /* 기본 너비를 150px !important로 지정합니다. */
  width: 150px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 150px !important로 지정합니다. */
  max-width: 150px !important;
}

/* 공정 진행 현황: .process-progress-search select 선택자의 선택박스에 적용됩니다. */
.process-progress-search select {
  /* 기본 너비를 154px !important로 지정합니다. */
  width: 154px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 154px !important로 지정합니다. */
  max-width: 154px !important;
}

/* 공정 진행 현황: .process-progress-search input:not([type="date"]) 선택자의 입력칸에 적용됩니다. */
.process-progress-search input:not([type="date"]) {
  /* 기본 너비를 170px !important로 지정합니다. */
  width: 170px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 170px !important로 지정합니다. */
  max-width: 170px !important;
}

/* 공정 진행 현황: .process-progress-search button 선택자의 버튼에 적용됩니다. */
.process-progress-search button {
  /* 기본 너비를 86px !important로 지정합니다. */
  width: 86px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 86px !important로 지정합니다. */
  min-width: 86px !important;
  /* 기본 높이를 38px !important로 지정합니다. */
  height: 38px !important;
}

/* 공정 진행 현황: .process-flow-split-card 선택자의 카드 영역에 적용됩니다. */
.process-flow-split-card {
  /* 넘치는 내용 처리 방식을 hidden !important로 설정합니다. */
  overflow: hidden !important;
}

/* 공정 진행 현황: .process-flow-split 선택자의 화면 요소에 적용됩니다. */
.process-flow-split {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 가로 열 배치를 430px minmax(0, 1fr) !important로 정합니다. */
  grid-template-columns: 600px minmax(0, 1fr) !important;
  /* 세로 정렬을 stretch !important로 맞춥니다. */
  align-items: stretch !important;
  /* 기본 너비를 100% !important로 지정합니다. */
  width: 100% !important;
}

/* 공정 진행 현황: .process-flow-fixed-pane 선택자의 화면 요소에 적용됩니다. */
.process-flow-fixed-pane {
  /* 기본 너비를 430px !important로 지정합니다. */
  width: 430px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 430px !important로 지정합니다. */
  min-width: 430px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 430px !important로 지정합니다. */
  max-width: 430px !important;
  /* 넘치는 내용 처리 방식을 hidden !important로 설정합니다. */
  overflow: hidden !important;
  /* flex 값을 0 0 430px !important로 지정합니다. */
  flex: 0 0 430px !important;
  /* 배치 기준을 relative !important로 설정합니다. */
  position: relative !important;
  /* 겹침 순서를 3 !important로 설정합니다. */
  z-index: 3 !important;
  /* 배경을 #fff !important로 지정합니다. */
  background: #fff !important;
}

/* 공정 진행 현황: .progress-fixed-table 선택자의 표에 적용됩니다. */
.progress-fixed-table {
  /* 표 열 계산 방식을 fixed !important로 설정합니다. */
  table-layout: fixed !important;
  /* 기본 너비를 430px !important로 지정합니다. */
  width: 430px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 430px !important로 지정합니다. */
  min-width: 430px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 430px !important로 지정합니다. */
  max-width: 430px !important;
}

/* 공정 진행 현황: .progress-fixed-table .flow-col-product 선택자의 표에 적용됩니다. */
.progress-fixed-table .flow-col-product {
  /* 기본 너비를 170px !important로 지정합니다. */
  width: 180px !important;
}

/* 공정 진행 현황: .progress-fixed-table .flow-col-work 선택자의 표에 적용됩니다. */
.progress-fixed-table .flow-col-work {
  /* 기본 너비를 160px !important로 지정합니다. */
  width: 180px !important;
}

/* 공정 진행 현황: .progress-fixed-table .flow-col-rate 선택자의 표에 적용됩니다. */
.progress-fixed-table .flow-col-rate {
  /* 기본 너비를 150px !important로 지정합니다. */
  width: 180px !important;
}

/* 공정 진행 현황: .progress-fixed-table th 선택자의 표 제목칸에 적용됩니다. */
.progress-fixed-table th,
/* 공정 진행 현황: .progress-fixed-table td 선택자의 표 내용칸에 적용됩니다. */
.progress-fixed-table td {
  /* 넘치는 내용 처리 방식을 hidden !important로 설정합니다. */
  overflow: hidden !important;
  /* 넘치는 글자 표시 방식을 ellipsis !important로 설정합니다. */
  text-overflow: ellipsis !important;
  /* 줄바꿈 처리 방식을 nowrap !important로 설정합니다. */
  white-space: nowrap !important;
}

/* 공정 진행 현황: .process-flow-chain-pane 선택자의 화면 요소에 적용됩니다. */
.process-flow-chain-pane {
  /* 이 값보다 작아지지 않도록 최소 너비를 0 !important로 지정합니다. */
  min-width: 0 !important;
  /* 가로로 넘치는 내용 처리 방식을 auto !important로 설정합니다. */
  overflow-x: auto !important;
  /* 세로로 넘치는 내용 처리 방식을 hidden !important로 설정합니다. */
  overflow-y: hidden !important;
}

/* 공정 진행 현황: .progress-chain-table 선택자의 표에 적용됩니다. */
.progress-chain-table {
  /* 표 열 계산 방식을 fixed !important로 설정합니다. */
  table-layout: fixed !important;
  /* 기본 너비를 max-content !important로 지정합니다. */
  width: max-content !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 100% !important로 지정합니다. */
  min-width: 100% !important;
}

/* 공정 진행 현황: .process-flow-chain 선택자의 화면 요소에 적용됩니다. */
.process-flow-chain {
  /* 이 값보다 작아지지 않도록 최소 너비를 max-content !important로 지정합니다. */
  min-width: max-content !important;
}

/* 공정 진행 현황: .process-flow-step 선택자의 화면 요소에 적용됩니다. */
.process-flow-step {
  /* 기본 너비를 150px !important로 지정합니다. */
  width: 150px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 150px !important로 지정합니다. */
  min-width: 150px !important;
}

/* 공정 진행 현황: .process-flow-footer 선택자의 화면 요소에 적용됩니다. */
.process-flow-footer {
  /* 위쪽 테두리를 1px solid #d9e3f3 !important로 지정합니다. */
  border-top: 1px solid #d9e3f3 !important;
}

/* 공정 진행 현황: .process-barcode-dialog 선택자의 팝업창에 적용됩니다. */
.process-barcode-dialog,
/* 공정 진행 현황: .process-progress-barcode-dialog 선택자의 팝업창에 적용됩니다. */
.process-progress-barcode-dialog,
/* 공정 진행 현황: .barcode-list-modal 선택자의 팝업창에 적용됩니다. */
.barcode-list-modal {
  /* 기본 너비를 min(980px, calc(100vw - 96px)) !important로 지정합니다. */
  width: min(980px, calc(100vw - 96px)) !important;
  /* 이 값보다 커지지 않도록 최대 너비를 min(980px, calc(100vw - 96px)) !important로 지정합니다. */
  max-width: min(980px, calc(100vw - 96px)) !important;
}

/* 공정 진행 현황: .process-barcode-dialog .dialog-body 선택자의 팝업창에 적용됩니다. */
.process-barcode-dialog .dialog-body,
/* 공정 진행 현황: .process-progress-barcode-dialog .dialog-body 선택자의 팝업창에 적용됩니다. */
.process-progress-barcode-dialog .dialog-body,
/* 공정 진행 현황: .barcode-list-modal .dialog-body 선택자의 팝업창에 적용됩니다. */
.barcode-list-modal .dialog-body {
  /* 이 값보다 커지지 않도록 최대 너비를 100% !important로 지정합니다. */
  max-width: 100% !important;
}

/* 공정 진행 현황: 실제 표시되는 진행 현황 표의 전체 계산 방식을 고정합니다. */
.process-flow-table.compact-progress-table {
  table-layout: fixed !important;
  width: max-content !important;
}

/* 공정 진행 현황: 제품명 열의 기본 너비입니다. */
.process-flow-table.compact-progress-table .flow-col-product {
  width: var(--progress-product-width, 132px) !important;
}

/* 공정 진행 현황: 작업지시번호 열의 기본 너비입니다. */
.process-flow-table.compact-progress-table .flow-col-work {
  width: var(--progress-work-width, 116px) !important;
}

/* 공정 진행 현황: 진행률 열의 기본 너비이며 드래그할 때 이 값이 화면에서 바뀝니다. */
.process-flow-table.compact-progress-table .flow-col-rate {
  width: var(--progress-rate-width, 92px) !important;
}

/* 공정 진행 현황: 공정 열은 공정 개수에 맞춰 가로 폭을 잡습니다. */
.process-flow-table.compact-progress-table .flow-col-chain {
  width: calc(var(--process-count, 1) * 176px) !important;
}

/* 공정 진행 현황: 왼쪽 3개 열은 가로 스크롤 중에도 고정합니다. */
.process-flow-table.compact-progress-table th:nth-child(-n + 3),
.process-flow-table.compact-progress-table td:nth-child(-n + 3) {
  position: sticky !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
  background: #fff !important;
}

/* 공정 진행 현황: 제품명, 작업지시번호, 진행률 제목은 흰색 글씨로 표시합니다. */
.process-flow-table.compact-progress-table th:nth-child(-n + 3) {
  z-index: 8 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #185fa8, #064486) !important;
}

/* 공정 진행 현황: 제품명 열 위치와 너비입니다. */
.process-flow-table.compact-progress-table th:first-child,
.process-flow-table.compact-progress-table td:first-child {
  left: 0 !important;
  width: var(--progress-product-width, 132px) !important;
  min-width: var(--progress-product-width, 132px) !important;
  max-width: var(--progress-product-width, 132px) !important;
}

/* 공정 진행 현황: 작업지시번호 열 위치와 너비입니다. */
.process-flow-table.compact-progress-table th:nth-child(2),
.process-flow-table.compact-progress-table td:nth-child(2) {
  left: var(--progress-product-width, 132px) !important;
  width: var(--progress-work-width, 116px) !important;
  min-width: var(--progress-work-width, 116px) !important;
  max-width: var(--progress-work-width, 116px) !important;
}

/* 공정 진행 현황: 진행률 열 위치와 너비입니다. */
.process-flow-table.compact-progress-table th:nth-child(3),
.process-flow-table.compact-progress-table td:nth-child(3) {
  left: calc(var(--progress-product-width, 132px) + var(--progress-work-width, 116px)) !important;
  width: var(--progress-rate-width, 92px) !important;
  min-width: var(--progress-rate-width, 92px) !important;
  max-width: var(--progress-rate-width, 92px) !important;
  border-right: 2px solid #d7e0ef !important;
}

/* 공정 진행 현황: 공정 제목은 기존 파란 제목 스타일을 유지합니다. */
.process-flow-table.compact-progress-table th:nth-child(4) {
  color: #fff !important;
  background: linear-gradient(180deg, #185fa8, #064486) !important;
}

/* 공정 진행 현황: 공정 내용칸은 공정 개수만큼 넓어집니다. */
.process-flow-table.compact-progress-table td:nth-child(4) {
  min-width: calc(var(--process-count, 1) * 176px) !important;
  max-width: calc(var(--process-count, 1) * 176px) !important;
  text-align: left !important;
}

/* 공정 진행 현황: 진행률과 공정 사이에 잡기 쉬운 드래그 손잡이를 둡니다. */
.process-rate-resizer {
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  bottom: 0 !important;
  z-index: 20 !important;
  width: 16px !important;
  cursor: col-resize !important;
}

/* 공정 진행 현황: 손잡이에 보이는 세로선을 표시합니다. */
.process-rate-resizer::after {
  position: absolute;
  top: 7px;
  right: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(5, 58, 118, .25);
  content: "";
}

/* 공정 진행 현황: 진행률 열 너비를 조절하는 동안 커서를 고정합니다. */
.is-process-rate-resizing,
.is-process-rate-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}