/* =========================================================
   공통 점검 리스트 테이블 스타일 (Integrated Inspection Style)
   ========================================================= */

/* 1. 상단 컨트롤 바 (총 건수, 검색창) */
.inspection-wrapper {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f3f5;
}

.left-info {
    font-size: 14px;
    color: #495057;
}

.left-info .highlight {
    color: #5c7cfa;
    font-weight: bold;
    font-size: 16px;
}

.right-search {
    display: flex;
    gap: 5px;
}

.right-search input {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 200px;
    outline: none;
}

.search-btn {
    background: #4a5568;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover {
    background: #2d3748;
}

/* 2. 테이블 기본 스타일 */
.table-responsive {
    overflow-x: auto;
}



/* 3. 테이블 내 텍스트 정렬 및 강조 */
.text-left {
    text-align: left !important;
}

.inspection-row:hover {
    background-color: #f8faff;
}

/* 4. 상태 배지 (Badge) 스타일 */
.status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status.done {
    background-color: #ebfbee;
    color: #2b8a3e;
    border: 1px solid #d3f9d8;
}

.status.pending {
    background-color: #fff4e6;
    color: #d9480f;
    border: 1px solid #ffe8cc;
}

/* 5. 로딩 아이콘 스타일 */
.fa-spinner {
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 6. 모바일 대응 (반응형) */
@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .right-search {
        width: 100%;
    }
    .right-search input {
        flex: 1;
    }
}
/* 기계설비 성능점검 레포트*/
/* 기본 폰트 및 배경 */
.detail-page-wrapper { font-family: 'Noto Sans KR', sans-serif; padding: 20px; background: #fff; }

/* 제목 및 경로 */
.detail-header { display: flex; align-items: baseline; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.detail-header h2 { font-size: 22px; font-weight: 700; color: #333; margin: 0; }
.detail-header .path { margin-left: 20px; font-size: 14px; color: #667eea; font-weight: 500; }

/* 섹션 타이틀 포인트 */
.section-title { font-size: 16px; font-weight: 700; color: #333; margin: 25px 0 10px; padding-left: 10px; border-left: 4px solid #00a19a; }

/* 정보 테이블 레이아웃 (사진 스타일) */
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; border-top: 2px solid #333; }
.info-table th { background: #f8f9fa; border: 1px solid #dee2e6; padding: 12px; font-weight: 600; width: 13%; text-align: center; font-size: 13px; }
.info-table td { border: 1px solid #dee2e6; padding: 12px; width: 20%; font-size: 13px; color: #555; }

/* 둥근 탭 버튼 그룹 */
/* 기계설비 전용 고유 컨테이너: 오른쪽 여백 없이 꽉 채움 */
.ist-tab-wrapper {
    display: flex;
    flex-wrap: wrap;            /* 공간 부족 시 다음 줄로 자연스럽게 이동 */
    width: 100%;                /* 컨테이너 전체 너비 사용 */
    border-bottom: 1px solid #dee2e6;
    margin: 20px 0;
    gap: 0;                     /* 버튼 사이 간격을 없애고 테두리로 조절 */
    padding: 0;
}

/* 기계설비 전용 개별 탭 버튼: 화면 너비에 맞춰 크기가 늘어남 */
.ist-tab-item {
    flex: 1 1 auto;             /* 핵심: 남는 공간을 균등하게 나눠 가짐 */
    width: 200px;      /* 외부 CSS의 width: 250px 강제 무시 */
    max-width: none !important;  /* 최대 너비 제한 해제 */
    min-width: 80px;            /* 너무 작아지지 않게 최소 너비 설정 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;         /* 상하 여백을 늘려 버튼 크기 확보 */
    background: #fff;
    border: 1px solid #dee2e6;
    margin-right: -1px;         /* 테두리 겹침 방지 */
    margin-bottom: -1px;        /* 하단 라인 겹침 방지 */
    cursor: pointer;
    font-size: 16px;
    color: #262424;
    white-space: normal;        /* 글자 길면 줄바꿈 허용 */
    word-break: keep-all;       /* 단어 단위 줄바꿈으로 가독성 확보 */
    text-align: center;
    border-radius: 8px 8px 0 0; /* 사진처럼 위쪽만 둥글게 */
    transition: all 0.2s;
}

/* 활성화된 탭 스타일 */
.ist-tab-item.active {
    background: #f1f2f4;
    color: #1a2b4b;
    font-weight: bold;
    border: 1px solid #dee2e6;
    border-top: 3px solid #1a2b4b; /* 상단 포인트 파란색 선 */
    border-bottom: 1px solid #f1f2f4; /* 하단 선을 배경색과 맞춰 탭 느낌 강조 */
    z-index: 2;                   /* 활성 탭을 위로 올림 */
}

.ist-tab-item:hover:not(.active) {
    background: #f8f9fa;
}

/* 행별 특수 스타일 */
.main-row-bg { background-color: #fafafa; font-weight: 500; }


/* 버튼 스타일 (사진 색상) */
.btn-action { border-radius: 4px; border: none; font-weight: 600; cursor: pointer; padding: 6px 14px; font-size: 12px; color: #fff; }
.btn-red { background: #ff0000 !important; }
.btn-blue { background: #5c7cfa !important; }
.btn-list { background: #666; padding: 10px 30px; font-size: 14px;}

/* 상태 텍스트 */
.status-ing { color: #ff4d4f; font-weight: 700; }

td.text-center{
    text-align: center;
}
/* 상태 선택 박스 전용 스타일 */

#inspection-status {
    width: 35% !important;       /* 100%가 너무 길면 60% 정도로 조절 */
    height: 32px;
    text-align: center;
    text-align-last: center;
    display: inline-block;       /* 중앙 정렬이 잘 먹도록 설정 */
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* 상세 점검 전용 테이블 (리스트와 비슷하지만 다른 톤) */
.detail-inspection-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-top: 3px solid #1a2b4b;   /* 🔥 네이비 계열로 변경 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.04);
    font-size: 16px;
    text-align: center;
}

/* 헤더 */
.detail-inspection-table thead th {
    background: linear-gradient(to bottom, #f4f7fb, #e9eef5);  /* 🔥 블루그레이톤 */
    padding: 13px 8px;
    border-bottom: 1px solid #d6dde8;
    font-weight: 700;
    color: #1a2b4b;
}

/* 바디 */
.detail-inspection-table tbody td {
    padding: 11px 8px;
    border-bottom: 1px solid #edf1f5;
    color: #2f3e4e;
}

/* hover 효과 */
.detail-inspection-table tbody tr:hover {
    background-color: #f0f8f7;   /* 🔥 민트톤 */
}

.btn-check{
background-color: #bf277b;
font-size: 14px;
}
.btn-report{
    background-color: #47b6e2;
    font-size: 14px;
}
.btn-action:hover{
        transform: translateY(-1px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

/* 데이터가 없을 때 (기본값) */
.btn-red {
    background-color: #fa5252 !important;
    color: white;
}

/* 사진 + 글이 모두 있을 때 (완료) */
.btn-green {
    background-color: #40c057 !important;
    border-color: #40c057 !important;
    color: white;
}

/* 글자 색상 변경 */
.status-done { color: #40c057; font-weight: bold; }
.status-ing { color: #fd7e14; }