/* =================================================================
   📌 1. 공통 레이아웃 & 테이블
   ================================================================= */
.info-panel {
  width: 400px;
}

.fixed-table {
  table-layout: auto;
  width: 100%;
}

/* 행 선택/호버 효과 */
.dispatch-row:hover {
  border-left: 4px solid #f7b6b6;
}
.dispatch-row.selected-row {
  border-left: 4px solid red;
}


/* =================================================================
   📌 2. 왼쪽 패널: 품목 발주
   ================================================================= */

/* Input: 발주수량 입력 필드 */
.order-input::-webkit-outer-spin-button,
.order-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-input {
  -moz-appearance: textfield;
  appearance: none;
  height: 22px;
  width: 60px;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: transparent;
  text-align: right;
  outline: none;
}
.order-input:focus {
  border-bottom: 1px solid #e70b0b;
}

/* Input: 메모 입력 필드 */
.order-text {
  border: none;
  background: transparent;
  outline: none;
}

/* Table: 발주/입고 히스토리 */
.po-cell {
  transition: background-color 0.3s ease;
}
.highlight-cell {
  background-color: #ffe58f !important;
  color: #198754 !important;
}
#historyTable tbody tr:hover {
  box-shadow: none !important;
  transform: none !important;
}


/* =================================================================
   📌 3. 오른쪽 패널: 발주/입고 리스트
   ================================================================= */
.po-table th:nth-child(4), .po-table td:nth-child(4) { /* 메모 열 */
  width: 40%;
}

/* 피벗 테이블 헤더 고정 */
#pivotTable thead th {
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  background-color: #f8f9fa !important;
  height: 36px;
  vertical-align: middle;
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.08);
}
#pivotTable thead tr:first-child th {
  top: 0;
}
#pivotTable thead tr:nth-child(2) th {
  top: 36px; /* 첫 번째 행의 높이와 동일하게 */
}

#pivotTable thead th:hover {
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.08) !important;
}

/* 발주(PO) 셀 */
.pivot-po-cell {
  background-color: #e3f2fd;
  color: #1565c0;
}
/* 입고(IN) 셀 */
.pivot-in-cell {
  background-color: #e8f5e9;
  color: #2e7d32;
}

/* 헤더(첫 행)만 상단 고정 */
#pivotTable thead tr {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

/* =================================================================
   📌 4. 월별 헤더 토글 기능
   ================================================================= */
.month-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.month-header:hover {
  background-color: #e9ecef !important;
}

.month-header .toggle-icon {
  transition: transform 0.3s ease;
  font-size: 0.8em;
  margin-left: 4px;
}

.month-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

/* 숨겨진 셀 */
#pivotTable td[style*="display: none"] {
  display: none !important;
}

#orderFilter, #poFilter, #dispatchFilter, #pivotFilter {
  background: #f8f9fa;
  border-color: #dee2e6;
  font-weight: 500;
  transition: box-shadow 0.2s;
}
#orderFilter:focus, #poFilter:focus, #dispatchFilter:focus, #pivotFilter:focus {
  box-shadow: 0 0 0 0.2rem #b6e0fe;
  border-color: #339af0;
}
.input-group-text {
  border-color: #dee2e6;
}