/*
 * body: 웹페이지 전체의 기본 스타일을 설정합니다.
 * font-family: 글꼴을 지정합니다.
 * margin: 페이지 내용과 브라우저 창 사이에 여백을 없앱니다.
 * background-color: 페이지 배경색을 아주 연한 회색으로 설정합니다.
 * color: 기본 글자색을 어두운 회색으로 설정합니다.
 * 테이블 스타일은 아래에 별도로 정의되어 있습니다.
 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    /* 한글 폰트 우선 적용 */
    margin: 0;
    /* background-color: #f8f9fa; */
    /* 아주 연한 회색 배경 */  
    color: #343a40;
    /* 어두운 회색 글자 */
    line-height: 1.6; /* 줄 간격 설정 */
    height: 100%; /* body 높이도 100%로 설정 */
     /* --- 배경 이미지 스타일 추가 --- */
    background-image: url('/img/bg_test_airport.svg'); 
    
    /* 배경 이미지가 화면을 가득 채우도록 설정합니다. (비율 유지) */
    background-size: cover;
    
    /* 배경 이미지를 화면 중앙에 위치시킵니다. */
    background-position: center;
    
    /* 배경 이미지가 반복되지 않도록 합니다. */
    background-repeat: no-repeat;
    
    /* 스크롤 시 배경 이미지가 고정되도록 합니다. */
    background-attachment: fixed; 
}

/*
 * .container: 페이지의 내용을 감싸는 영역의 스타일을 설정합니다.
 * max-width: 내용이 너무 넓게 퍼지지 않도록 최대 너비를 제한합니다.
 * margin: auto를 사용하여 화면 중앙에 배치합니다.
 * padding: 내용과 .container 경계 사이에 여백을 줍니다.
 * background-color: 컨테이너 배경색을 흰색으로 설정합니다.
 * box-shadow: 컨테이너에 약간의 그림자를 주어 입체감을 더합니다.
 * border-radius: 모서리를 둥글게 만듭니다.
 */
.container {
    max-width: 1200px;
    /* 최대 너비 설정 */
    min-height: 100%; /* 최소 높이를 100%로 설정 */
    margin: 40px auto;
    /* 위아래 40px, 좌우 자동(중앙 정렬) */
    padding: 30px;
    background-color: #ffffff;
    /* 흰색 배경 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* 은은한 그림자 */
    border-radius: 8px;
    /* 모서리 둥글게 */
}

/* 
 * .truncate-text: 텍스트가 너무 길 때 말 줄임표(...)로 표시하는 스타일입니다.
 * max-width: 텍스트가 차지할 수 있는 최대 너비를 지정합니다.
 * white-space: nowrap을 사용하여 줄바꿈을 방지합니다.
 * overflow: hidden을 사용하여 넘치는 내용을 숨깁니다.
 * text-overflow: ellipsis를 사용하여 넘치는 부분에 말 줄임표(...)를 표시합니다.
 */
.truncate-text {
    max-width: 70px;
    /* 최대 너비 지정 */
    white-space: nowrap;
    /* 줄바꿈 방지 */
    overflow: hidden;
    /* 넘치는 내용 숨김 */
    text-overflow: ellipsis;
    /* 말 줄임표(...) 표시 */
}

/* 
 * .table-wrapper: 테이블을 감싸는 컨테이너로, 가로 스크롤을 가능하게 합니다.
 * width: 컨테이너 너비를 100%로 설정합니다.
 * overflow-x: auto를 사용하여 내용이 넘칠 경우 가로 스크롤을 생성합니다.
 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* 내용이 넘칠 경우 가로 스크롤 생성 */
    margin-top: 10px;
    /* 위쪽에 여백 추가 */
    overflow-y: auto;
    /* 세로 스크롤 추가 */
    max-height: 600px;
    /* 최대 높이 설정 */
}

/*
 * h1: 제목 스타일을 설정합니다.
 * color: 제목 글자색을 설정합니다.
 * text-align: 제목을 중앙 정렬합니다.
 * margin-bottom: 제목 아래에 여백을 줍니다.
 */
h1 {
    color: #0056b3;
    /* 파란색 계열 제목 */
    text-align: center;
    margin-bottom: 25px;
    background-color: #eff7fa;
    /* 아주 연한 하늘색 배경 */
    padding: 10px;
    border-radius: 8px;
    /* 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 약간의 그림자 */
}

/*
 * p: 단락 스타일을 설정합니다.
 * text-align: 단락 텍스트를 중앙 정렬합니다.
 */
p {
    text-align: center;
    font-size: 1.1em;
    /* 기본 글자보다 조금 크게 */
    color: #555;
}

/*
 * footer: 페이지 하단 푸터 스타일을 설정합니다.
 * text-align: 푸터 내용을 중앙 정렬합니다.
 * margin-top: 푸터 위에 여백을 줍니다.
 * font-size: 글자 크기를 작게 합니다.
 * color: 글자색을 연한 회색으로 설정합니다.
 */
footer {
    text-align: center;
    justify-self: center;
    position: relative;
    margin-top: 30px;
    z-index: 1;
    width: fit-content;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.9em;
    color: beige;
    background-color: white;
    padding: 1px 20px;
    border-radius: 8px;
}

/*span styles */
.exp-span {
    font-size: 0.7em;
    color: #888;
}

/* img styles */
.bg-box {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 40px;
  overflow: hidden; /* 이미지 넘치는 부분 잘라내기 */
}

.bg-img {
  position: absolute;
  max-width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 유지하면서 꽉 채우기 */
  z-index: -1;   /* 뒤로 보내기 */
}


.login-container {
    max-width: 400px;
    margin-top: 12%;
    /* footer를 가장 아래로 내리기 위해 margin-top 조정 */
    margin-right: auto;
    margin-left: auto;
    /* --- 가독성을 위한 스타일 추가 --- */
    /* 흰색 배경에 약간의 투명도를 적용합니다. */
    background-color: rgba(255, 255, 255, 0.95);

    /* 기존 container의 padding을 가져와 적용합니다. */
    padding: 30px; 
    
    /* 모서리를 둥글게 처리합니다. */
    border-radius: 10px; 
    
    /* 은은한 그림자 효과를 추가하여 입체감을 줍니다. */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}

.form-group {
    display: contents;
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    display: flex;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.form-group select {
    display: flex;
    width: 70%;
    padding: 8px;
    box-sizing: border-box;
}
.form-actions {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}

.login-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

#error-message {
    color: red;
    margin-top: 10px;
}

#logout-button {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* login button */
.login-actions button{
    width: 70%;
    padding: 8px 10px;
    color:#ced4da;
    font-size: large;
    background-color: #0056b3;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 0.5px solid #ccc;
}

/* help button */
#help-btn {
    padding: 8px 15px;
    font-size: 0.9em;
    color:cornsilk;
    cursor: pointer;
    background-color:peru;
    margin-right: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 0.5px solid #ccc;
}
/* get challenge button */
#get-challenge-btn {
    width: 50%;
    padding: 8px 10px;
    color:#ced4da;
    background-color: #0056b3;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 0.5px solid #ccc;
}
/* verify button */
#verify-btn {
    width: 50%;
    margin-top: 10px;
    padding: 8px 10px;
    color:#ced4da;
    background-color: #0056b3;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 0.5px solid #ccc;
}

/* --- Table Styles --- */
table {
    width: 140%;
    /* 테이블 너비를 넓혀서 140%로 설정 */
    border-collapse: collapse;
    /* 테두리선을 한 줄로 합침 */
    margin-top: 25px;
    /* 테이블 위에 여백 추가 */
    font-size: 0.7em;
    /* 전체 글자 크기 작게 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 테이블에 약간의 그림자 추가 */
    border-radius: 8px;
    /* 모서리 둥글게 */
    overflow: hidden;
    /* 둥근 모서리가 잘리도록 설정 */
    overflow-y: auto; 
    /* scroll 시 위에 헤더 고정하도록 설정*/
    background-color: #ffffff;
    /* 테이블 배경을 흰색으로 설정 */
    text-align: center;
    /* 기본 텍스트 중앙 정렬 */
    overflow-x: auto;
    /* 가로 스크롤 가능 */
}

th,
td {
    border: 1px solid #dee2e6;
    /* 셀 테두리 스타일 */
    padding: 5px 7px;
    /* 셀 안쪽 여백 */
    text-align: center;
    /* 텍스트 왼쪽 정렬 */
    font-size: 0.9em;
    /* 글자 크기 약간 작게 */
    vertical-align: middle !important;
    /* 셀 내용을 항상 세로 중앙에 위치 */
}

thead th {
    background-color: #0056b3;
    /* 헤더 배경색 */
    color: #ffffff;
    /* 헤더 글자색 */
    font-weight: bold;
    /* 헤더 글자 굵게 */
    text-align: center;
    /* 헤더 텍스트 중앙 정렬 */
    position: sticky;
    /* 헤더를 스크롤 시에도 고정 */
    top: 0;
    /* 헤더를 컨테이너 상단에 고정 */
    z-index: 2;
    /* 헤더가 다른 요소 위에 표시되도록 설정 */
}

#shipments-table th:first-child,
#shipments-table td:first-child {
    width:0%;
    /* 체크박스 컬럼 너비 */
    text-align: center;
}

#shipments-table th:nth-child(2),
/* 물류현황 */
#shipments-table td:nth-child(2) {
    width: 3.5%;
    /* 물류현황 컬럼 너비 */
}

#shipments-table th:nth-child(3),
/* 사업장명 */
#shipments-table td:nth-child(3) {
    width: 8%;
    /* 사업장명 컬럼 너비 */
}

#shipments-table th:nth-child(n+4):nth-child(-n+6),
#shipments-table td:nth-child(n+4):nth-child(-n+6) {
    width: 4%;
    /* 4~6번째 컬럼(주문품목번호,PO_NO,ITEM_CODE 너비 */
}

#shipments-table th:nth-child(7),
/*  Item_name */
#shipments-table td:nth-child(7) {
    width: 10%;
    /* Item_name 컬럼 너비 */
}

#shipments-table th:nth-child(8),
/* 발주 일자 */
#shipments-table td:nth-child(8) {
    width: 4.5%;
    /* 발주 일자 컬럼 너비 */
}

#shipments-table th:nth-child(n+9):nth-child(-n+11),
#shipments-table td:nth-child(n+9):nth-child(-n+11) {
    width: 4%;
    /* 9~11번째 컬럼(발주수량,미입고,입고수량 컬럼 너비 */
}

#shipments-table th:nth-child(12),
/* Invoice No */
#shipments-table td:nth-child(12) {
    width: 6%;
    /* Invoice No 컬럼 너비 */
}

#shipments-table th:nth-child(13),
/* 납품일정 */
#shipments-table td:nth-child(13) {
    width: 4.5%;
    /* 납품일정 컬럼 너비 */
}

#shipments-table th:nth-child(n+14):nth-child(-n+16),
#shipments-table td:nth-child(n+14):nth-child(-n+16) {
    width: 40px;
    /* 14~16번째 컬럼(Note부분) 너비 */
}


#issues-table{
    width: 100%;
    /* 테이블 너비를 100%로 설정 */
    border-collapse: collapse;
    /* 테두리선을 한 줄로 합침 */}


#issues-table th:nth-child(1),
#issues-table td:nth-child(1) {
    width: 20%;
    /* 사업장명 컬럼 너비 */
}

#issues-table th:nth-child(n+2):nth-child(-n+4),
#issues-table td:nth-child(n+2):nth-child(-n+4) {
    width: 10%;
    /* 2~4번째 컬럼(주문품목번호, 작성자) 너비 */
}

#issues-table th:nth-child(6),
#issues-table td:nth-child(6) {
    width: 15%;
    /* 6번째 컬럼(작성일자) 너비 */
}


tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
    /* 짝수 행 배경색을 약간 다르게 설정 */
}

tbody tr:hover {
    background-color: #e9ecef;
    /* 마우스를 올렸을 때 행 배경색 변경 */
}

tbody tr:active {
    background-color: #ced4da;
    /* 클릭했을 때 행 배경색 변경 */
}

tbody tr.selected {
    background-color: #b3d7ff;
    /* 선택된 행 배경색 */
}

/* status값에 따른 색상변화 추가 */
tr.status-pending {
    background-color: #fff2f2 !important;
    /* 연한 붉은색 배경 */
}

tr.status-complete {
    background-color: #f2fff2 !important;
    /* 연한 초록색 배경 */
}

tr.status-pending:hover,
tr.status-complete:hover {
    background-color: #e9ecef !important;
    /* 마우스 오버 색상은 동일하게 유지 */
}

/* --- Loading Spinner Styles --- */
.spinner-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #0056b3;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Search Container Styles --- */
.search-container {
    display: flex;
    /* 요소들을 가로로 나란히 배치 */
    margin-bottom: 20px;
    /* 테이블과의 간격 */
}

#search-input {
    flex-grow: 1;
    /* 남는 공간을 모두 차지하도록 설정 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
#search-role {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8em;
}

#search-button {
    padding: 10px 20px;
    border: none;
    background-color: #0056b3;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    /* 마우스를 올리면 손가락 모양으로 변경 */
    margin-left: 20px;
    /* 검색창과의 간격 */
    font-size: 1em;
}

#search-button:hover {
    background-color: #004494;
    /* 마우스를 올렸을 때 색상 변경 */
}

/* --- Multi-Search Form Styles --- */
.search-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.search-field {
    display: flex;
    flex-direction: column;
}

.search-field label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1.2em;
    color: #333;
    text-align: center;
}

.search-field input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8em;
}

/* select 스타일 추가 */
.search-field select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8em;
}

.search-actions {
    grid-column: 1 / -1;
    /* 버튼이 그리드의 전체 너비를 차지하도록 설정 */
    text-align: right;
}

#search-button {
    padding: 10px 30px;
    border: none;
    background-color: #0056b3;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}

#search-button:hover {
    background-color: #004494;
}

#clear-button {
    padding: 10px 20px;
    border: none;
    background-color: #6c757d;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-right: 10px;
}

#sample-button {
    padding: 2px 10px;
    border: none;
    background-color: #516b82;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-right: 10px;
}

/* --- User Display Styles --- */
#user-display {
    text-align: right;
    margin-bottom: 15px;
}

#user-display span {
    margin-right: 15px;
}

/* --- Modal Styles --- */
.modal {
    display: none;
    /* 평소에는 숨김 */
    position: fixed;
    /* 화면에 고정 */
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 반투명 배경 */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
}

/* --- Modal for Note --- */
.modal-content textarea {
    width: 100%;
    font-family: inherit;
    min-height: 60px;
    margin: 2px 0;
    padding: 5px;
    box-sizing: border-box;
}

.modal-actions {
    text-align: right;
}

.modal-actions button {
    margin-left: 10px;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    font-size: 1em;
    font-weight: bold;
    background-color: #0056b3;
    color: white;
}

#save-note-btn {
    padding: 10px 20px;
    border: none;
    background-color: #0056b3;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    /* 마우스를 올리면 손가락 모양으로 변경 */
    margin-top: 10px;
    /* 검색창과의 수직 정렬 */
    font-size: 1em;
}

#cancel-note-btn {
    padding: 10px 20px;
    border: none;
    background-color: #6c757d;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}


/* 읽기 전용 텍스트 영역 스타일 */
.modal-content textarea[readonly] {
    background-color: #e9ecef;
    /* 연한 회색 배경 */
    cursor: not-allowed;
    /* 금지 커서 표시 */
}

/* --- Pagination Styles --- */
.pagination-summary {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
    font-size: 0.9em;
    color: #555;
}

#pagination-controls button {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #0056b3;
    padding: 8px 12px;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    /* 부드러운 색상 전환 효과 */
}

#pagination-controls button:hover {
    background-color: #e9ecef;
}

#pagination-controls button.active {
    background-color: #0056b3;
    color: white;
    border-color: #0056b3;
    cursor: default;
    /* 현재 페이지는 클릭할 필요 없음을 암시 */
}

#pagination-controls button:disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

/* --- Detail Page & Notes Styles --- */
#details-content table {
    margin-top: 20px;
}

#details-content table th {
    width: 150px;
    background-color: #f8f9fa;
}

.note-form {
    margin-bottom: 20px;
}

.note-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.note-form button {
    display: block;
    margin-top: 10px;
    margin-left: auto;
}

.note-item {
    border: 1px solid #e9ecef;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
}

.note-item p {
    margin: 0 0 10px 0;
    text-align: left;
}

.note-item small {
    color: #888;
}

/* --- Table Action & Note Styles --- */
.table-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
}

.table-actions button {
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    margin-right: 10px;
    /* 버튼들 사이에 간격 추가 */
    margin-bottom: 10px;
    /* 아래쪽 여백 추가 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 테이블에 약간의 그림자 추가 */
    border-radius: 8px;
    /* 모서리 둥글게 */
    border: 0.5px solid #ccc;
    /* 연한 테두리 추가 */
}

/* --- pagelink button style --- */
.button-link {
    display: inline-block;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    background-color: #28a745;
    /* 초록색 계열 */
    color: white;
    text-decoration: none;
    border: 0.5px solid #ccc;
    /* 연한 테두리 추가 */
    border-radius: 8px;
    margin-right: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 약간의 그림자 추가 */
}

.note-cell {
    max-width: 150px;
    white-space: pre-wrap;
    /* 줄바꿈(\n)과 공백을 그대로 표시 */
    word-break: break-all;
    font-size: 0.85em;
    line-height: 1.4;
}



/* --- Dashboard Styles --- */
.dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.dashboard-card span {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    color: #0056b3;
}

.dashboard-card h3 {
    margin: 10px 0 0 0;
    font-size: 1em;
    color: #555;
    font-weight: normal;
}

.dashboard-card.filtered {
    border: 2px solid #0056b3;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

/* --- Form Group Styles --- */
.modal-content .form-group {
    margin-bottom: 15px;
}

.modal-content .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-content .form-group input,
.modal-content .form-group textarea {
    width: 100%;
    margin: 8px 0;
    padding: 8px;
    box-sizing: border-box;
}

/* --- Editable Cell Styles --- */
.editable-cell {
    cursor: pointer;
    /* 마우스를 올리면 손가락 모양으로 변경 */
    position: relative;
}

/* 마우스를 올렸을 때 배경색을 살짝 변경하여 상호작용 가능함을 암시 */
.editable-cell:hover {
    background-color: #e9f5ff;
    /* 연한 하늘색 배경 */
}

/* 셀 우측 상단에 작은 연필 아이콘 추가하여 편집 가능함을 명확히 표시 */
.editable-cell:hover::after {
    content: '✎';
    /* 연필 이모지 또는 아이콘 폰트 사용 */
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.8em;
    color: #0056b3;
}

/* --- Jig List Page Styles --- */
.jig-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.jiglist-upload-section {
    display: flex;
    justify-content: flex-start;
    padding: 8px 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.jig-tabs {
    display: flex;
    flex-wrap: wrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 5px;
}

.tab-btn {
    padding: 8px 8px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    cursor: pointer;
    margin-right: 5px;
    white-space: nowrap;
    border-radius: 4px;
    justify-content: center;
}

.tab-btn.active {
    background-color: #0056b3;
    color: white;
    border-color: #0056b3;
}

.jig-filters {
    width: 100%;
    display: flex;
    /* 요소들을 가로로 나란히 배치 */
    border: 1px solid #dee2e6;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.jig-filters select {
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 7px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 약간의 그림자 추가 */
}

#currentuser-filter {
    margin-bottom: 5px;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 약간의 그림자 추가 */
}

.jig-list-btn {
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    margin-right: 10px;
    /* 버튼들 사이에 간격 추가 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 테이블에 약간의 그림자 추가 */
    border-radius: 8px;
    /* 모서리 둥글게 */
    border: 0.5px solid #ccc;
    /* 연한 테두리 추가 */
}

#jiglist-file-input {
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 테이블에 약간의 그림자 추가 */
}

.merged-cell {
    color: transparent;
    /* 내용을 투명하게 만들어 병합된 것처럼 보이게 함 */
    border-top-color: transparent;
    /* 위쪽 테두리도 투명하게 */
}

#jiglist-table{
    width: 120%; 
    white-space: nowrap; /* 줄바꿈 방지 */
}


/* --- Jig List Tab Group Styles --- */
.jig-tabs-wrapper {
    width: 100%;
}

.tab-group {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.tab-group h4 {
    margin: 0 0 10px 5px;
    font-size: 0.9em;
    color: #555;
    display: flex;
    align-items: center;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-indicator.active {
    background-color: #28a745;
    /* 진행중: 초록색 */
}

.status-indicator.completed {
    background-color: #6c757d;
    /* 완료됨: 회색 */
}

/* --- Tab Delete Button Styles --- */
.tab-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: visible;
    /* 버튼이 둥글게 보이도록 */
}

.tab-wrapper .tab-btn {
    border: none;
    /* 개별 버튼의 테두리 제거 */
    margin-right: 0;
    border-radius: 0;
}

.delete-tab-btn {
    padding: 0 2px;
    background-color: #f8f9fa;
    color: #888;
    cursor: pointer;
    line-height: 28px;
    border : none;
    /* 버튼 높이에 맞춤 */
    border-left: 1px solid #ccc;
}

.delete-tab-btn:hover {
    background-color: #dc3545;
    /* 빨간색 배경 */
    color: white;
}


/* --- history page styles --- */
#history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* --- Admin Page Styles --- */
.admin-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 20px;
}
.admin-tabs .tab-btn {
    padding: 10px 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.1em;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* 아래 테두리와 겹치게 */
}
.admin-tabs .tab-btn.active {
    border-bottom-color: #0056b3;
    color: #0056b3;
    font-weight: bold;
}
.tab-content {
    display: none; /* 기본적으로 숨김 */
}
.tab-content.active {
    display: block; /* 활성화된 탭만 보임 */
}

#users-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#logs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#suppliers-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#resources-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#logs-pagination button {
    margin-top: 10px;
    margin-right: 5px;
    text-align: center;
    font-size: 0.9em;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #0056b3;
    border-radius: 4px;
    padding: 2px 8px;
}

#logs-pagination button:hover {
    background-color: #e9ecef;
}

#logs-pagination button.active {
    background-color: #0056b3;
    color: white;
    border-color: #0056b3;
}

.user-creation-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}
.user-creation-form input, .user-creation-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.user-creation-form button {
    padding: 8px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.user-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    margin: 0 5px;
}
.user-actions .reset-pw-btn { color: #ffc107; }
.user-actions .delete-user-btn { color: #dc3545; }

#permissions-table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
}

#permissions-table th:first-child, #permissions-table td:first-child {
    text-align: left;
}

.button-save {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
}
.button-save:hover { background-color: #218838; }


/* =========================================
   Mobile Responsive Styles (Max-width: 768px)
   ========================================= */
@media (max-width: 768px) {

    /* 1. 전체 레이아웃 조정 */
    .container {
        max-width: 100%;
        margin: 10px auto; /* 위아래 여백 축소 */
        padding: 15px; /* 내부 여백 축소 */
        width: 95%; /* 화면 꽉 채우기 */
    }

    h1 {
        font-size: 1.5em; /* 제목 크기 축소 */
        margin-bottom: 15px;
    }

    /* 2. 상단 버튼 (메인으로 돌아가기 등) */
    .button-link {
        display: block; /* 블록 요소로 변경하여 한 줄 차지 */
        width: 100%; /* 너비 100% */
        text-align: center;
        margin-bottom: 10px;
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
    }

    /* 3. 검색 영역 (Search Container) - 가로 배치 -> 세로 배치 */
    .search-container {
        flex-direction: column; /* 세로 정렬 */
        gap: 10px;
    }

    #search-input,
    #search-role {
        width: 95%; /* 검색창 꽉 채우기 */
    }

    #search-button {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
    }

    /* 4. 다중 검색 폼 (Grid) 조정 */
    .search-form {
        grid-template-columns: 2fr 2fr; /* 한 줄에 두개씩 표시 */
        padding: 2px;
        gap: 5px;
    }

    .search-actions {
        text-align: center; /* 버튼 가운데 정렬 */
        margin-top: 10px;
    }

    .search-actions button {
        width: 100%; /* 버튼 꽉 채우기 */
        margin-bottom: 10px;
        margin-right: 0;
    }

    /* 5. 테이블 (가로 스크롤 필수 적용) */
    .table-wrapper {
        margin-top: 15px;
        border: 1px solid #dee2e6; /* 스크롤 영역 구분선 */
    }

    table {
        width: 100%;
        min-width: 800px; /* 테이블 최소 너비 강제 설정 (스크롤 유도) */
    }

    /* 모바일에서는 컬럼 너비 강제 설정을 해제하고 내용에 맞춤 */
    #shipments-table th, 
    #shipments-table td {
        width: auto !important; 
        white-space: nowrap; /* 줄바꿈 방지 */
    }
    
    /* 체크박스 등 너무 작은 컬럼은 최소 너비 보장 */
    #shipments-table th:first-child {
        min-width: 40px;
    }

    /* 6. Jig List 페이지 컨트롤 */
    .jig-controls {
        flex-direction: column;
        align-items: stretch; /* 자식 요소 꽉 채우기 */
    }

    .jig-filters {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .jig-filters select,
    .jig-filters button {
        width: 100%;
        margin-right: 0;
    }

    .jiglist-upload-section {
        flex-direction: column;
    }
    
    #upload-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 모바일에서는 컬럼 너비 강제 설정을 해제하고 내용에 맞춤 */
    #jiglist-table th, 
    #jiglist-table td {
        width: auto !important; 
        white-space: nowrap; /* 줄바꿈 방지 */
    }
    
    /* 체크박스 등 너무 작은 컬럼은 최소 너비 보장 */
    #jiglist-table th:first-child {
        min-width: 40px;
    }

    /* 7. 대시보드 카드 */
    .dashboard-container {
        grid-template-columns: 2fr 2fr; /* 카드 한 줄에 두개씩 */
    }

    /* 8. 로그인 페이지 */
    .login-container {
        margin-top: 20%; /* 모바일에서는 조금 더 위로 */
        width: 90%;
        padding: 20px;
    }

    .login-actions {
        flex-direction: column;
        gap: 10px;
    }

    .login-actions button,
    #help-btn {
        width: 100%;
        margin-right: 0;
    }
    
    /* 9. 모달 (팝업) */
    .modal-content {
        width: 95%; /* 모바일에서 모달 너비 넓게 */
        padding: 20px;
    }
    
    .modal-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-actions button {
        width: 100%;
        margin-left: 0;
    }
}