/* 필터 폼 스타일 */
#product-filter-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

#product-filter-form select,
#product-filter-form button,
#download_csv_button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    transition: all 0.2s ease;
}

#product-filter-form select:focus,
#product-filter-form button:focus, #download_csv_button:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

#product-filter-form button, #download_csv_button {
    background-color: #2271b1;
    color: #fff;
    cursor: pointer;
}

#product-filter-form button:hover,
#download_csv_button:hover {
    background-color: #135e96;
}
#download_csv_button {
    float: right;
}

/* 테이블 기본 스타일 */
.wp-list-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

/* 헤더와 셀 공통 스타일 */
.wp-list-table th,
.wp-list-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

/* 테이블 헤더 배경 */
.wp-list-table thead {
    background-color: #f9f9f9;
}

/* ✅ 상품명 넓이 늘리기 */
.wp-list-table th:nth-child(1),
.wp-list-table td:nth-child(1) {
    width: 25%; /* 예시: 전체의 25% 차지하도록 설정 */
    max-width: 300px;
    word-break: break-word;
}

/* 가격 열은 좀 더 좁게 */
.wp-list-table th:last-child,
.wp-list-table td:last-child {
    width: 10%;
    text-align: right;
}

/* 반응형 */
@media (max-width: 768px) {
    .wp-list-table th,
    .wp-list-table td {
        font-size: 13px;
        padding: 8px;
    }

    .wp-list-table th:nth-child(1),
    .wp-list-table td:nth-child(1) {
        width: auto;
        max-width: unset;
    }
}

/* 🔍 필터 영역 */
.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.filter-wrapper label {
    font-weight: 500;
    font-size: 14px;
    margin-right: 6px;
}

.filter-wrapper select,
.filter-wrapper input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    transition: all 0.2s ease;
}

.filter-wrapper select:focus,
.filter-wrapper input[type="text"]:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

/* 📋 테이블 공통 스타일 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    border: 1px solid #ddd;
}

table th,
table td {
    padding: 10px 12px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}

table thead {
    background-color: #f5f5f5;
    font-weight: bold;
}

tr.group-even {
    background-color: #f9f9f9;
}

tr.group-odd {
    background-color: #e8f4ff;
}

tr.final-row td {
    font-weight: bold;
}

table[data-inline-edit="1"] .ts-input { width: 100%; padding: 6px; box-sizing: border-box; font-size: 13px; }
table[data-inline-edit="1"] .ts-editing { background: #fff7ed; }
table[data-inline-edit="1"] .ts-saving { opacity: .6; pointer-events: none; }


/* 주문리스트 테이블 */
/* 1) 테이블 가로 스크롤 컨테이너 */
  .table-wrapper {
    overflow-x: auto;
    margin: 1em 0;
  }
  
/* sticky는 border-collapse: separate가 호환이 더 좋습니다 */
#order_table{
  border-collapse: separate;
  border-spacing: 0;
}

/* 첫 번째 열을 왼쪽에 고정 */
#order_table thead th:first-child,
#order_table tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
}
#order_table thead th:first-child{
  background: #f5f5f5;
  z-index: 4;
}
#order_table tbody td:first-child{
  background: #fff;
  padding: 8px;
}


  /* 2) 고정 레이아웃 & 컬럼 너비 지정 */
  #order_table, #product_table {
    width: auto;        /* 고정 너비가 아닌 auto 로 */
    table-layout: auto; /* 열 너비 자동 조절 모드 */
    border-collapse: collapse;
  }
  #order_table th, #product_table th, 
  #order_table td, #product_table td {
    border: 1px solid #ccc;
    padding: 8px;
    white-space: nowrap;     /* 줄바꿈 방지 */
    overflow: hidden;        /* 넘치는 텍스트는 숨김 */
    text-overflow: ellipsis; /* 넘칠 경우 말줄임 표시 */
  }

  /* 3) 컬럼별 최소너비 지정 (nth-child) */
  #order_table th:nth-child(1),  /* 상태 */
  #order_table td:nth-child(1)   { min-width: 80px;  }
  #order_table th:nth-child(2),
  #order_table td:nth-child(2)   { min-width: 120px; }
  #order_table th:nth-child(3),
  #order_table td:nth-child(3),
  #order_table th:nth-child(4),
  #order_table td:nth-child(4),
  #order_table th:nth-child(5),
  #order_table td:nth-child(5)   { min-width: 100px; }
  #order_table th:nth-child(6),
  #order_table td:nth-child(6)   { min-width: 90px;  }
  #order_table th:nth-child(7),
  #order_table td:nth-child(7)   { min-width: 120px; }
  /* … 필요한 만큼 더 추가 … */
  #order_table th:nth-child(n+8),
  #order_table td:nth-child(n+8) { min-width: 120px; }
  
/* 주문 목록 버튼 스타일 */
h3 button, .btn {
    padding: 6px 12px;
    font-size: 13px;
    border: none;
    border-radius: 5px;
    background-color: #2271b1;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

h3 button:hover, .btn:hover{
    background-color: #135e96;
}

.btn.upload{
    background-color: gray;
}
.btn.upload:hover{
    background-color: dimgray;
}

.btn.sample{
    background-color: #007BFF;
}
.btn.sample:hover{
    background-color: #0056D2;
}

/* 파일 업로드 input 숨김 및 버튼 정렬 */
.upload-tracking-form input[type="file"],
.upload-cancel-form input[type="file"] {
    margin-right: 6px;
    padding: 5px;
}

/* ✅ 상태별 강조 색상 (선택 사항) */
.order-row td:nth-child(10) {
    font-weight: bold;
    color: #2271b1;
}

/* 🚚 운송장 등록 강조 */
.order-row td:last-child form,
.order-row td:last-child button {
    display: inline-block;
    margin-top: 5px;
}

/* 페이지네이션 */
.pagination_controls {
    text-align: center;
    margin: 20px 0;
}

.pagination_controls .page_numbers button {
    margin: 0 3px;
    padding: 4px 8px;
    background-color: white;
}

.pagination_controls .page_numbers button.active-page {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
}

.pagination_controls button {
    padding: 5px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pagination_controls button:hover:not(:disabled), .pagination_controls .page_numbers button:hover {
    background-color: #e0e0e0;
}

  .filter-wrapper {
    background: #e6f7ff;
    border: 1px solid #66c2ff;
    border-radius: 8px;
    padding: 1em;
    color: #005b99;
    font-family: sans-serif;
  }
  .filter-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.75em;
  }
  .filter-row label {
    min-width: 4.5em;
    font-weight: bold;
  }
  .filter-row select,
  .filter-row input[type="date"],
  .filter-row input[type="text"] {
    padding: 0.3em 0.5em;
    border: 1px solid #66c2ff;
    border-radius: 4px;
    background: #ffffff;
    color: #005b99;
  }
  .filter-row button {
    background: #0099cc;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 0.4em 0.8em;
    cursor: pointer;
  }
  .filter-row button:hover {
    background: #007fa3;
  }
  /* Hide all detail inputs by default */
  .detail-input { display: none; }