/* =====================================================
   VACATIONREQUESTS.CSS
   대시보드 공통 디자인과 동일한 휴가 신청 내역 페이지
   - 기존 vacationrequests.js 클래스 / ID 보존
   ===================================================== */

/* 전체 화면 및 공통 배경 */
*, *::before, *::after { box-sizing: border-box; }
body:has(.dashboard-sidebar) { background: #eff8ff !important; background-image: none !important; }
#adminMenu[hidden], .sidebar-backdrop[hidden] { display: none !important; }
.page_wrap { width: 100%; min-height: calc(100vh - 78px); }
.requests_area { width: 100%; padding: 38px 36px 70px; }
.requests_box { width: 100%; max-width: 1180px; margin: 0 auto; padding: 34px; background: #fff; border: 1px solid #e1eaf5; border-radius: 17px; box-shadow: 0 10px 30px rgba(31,65,112,.055); }

/* 제목 */
.requests_heading { margin-bottom: 26px; }
.requests_kicker { display: block; margin-bottom: 8px; color: #6689bd; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.requests_title { margin: 0 0 8px; color: #1c2d49; font-size: 26px; font-weight: 800; }
.requests_description { margin: 0; color: #72829a; font-size: 14px; }

/* PC 테이블 */
.desktop_table_wrap { width: 100%; overflow-x: auto; border: 1px solid #e6edf6; border-radius: 12px; }
.requests_table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.requests_table th, .requests_table td { padding: 17px 8px; text-align: center; vertical-align: middle; border-bottom: 1px solid #edf1f7; font-size: 13px; overflow-wrap: anywhere; }
.requests_table th { background: #f3f7fd; color: #51647e; font-weight: 750; }
.requests_table td { color: #273751; }
.requests_table tbody tr:last-child td { border-bottom: 0; }
.requests_table tbody tr:hover { background: #f8fbff; }
.requests_table th:nth-child(1) { width: 13%; }
.requests_table th:nth-child(2) { width: 15%; }
.requests_table th:nth-child(3), .requests_table th:nth-child(4) { width: 17%; }
.requests_table th:nth-child(5) { width: 10%; }
.requests_table th:nth-child(6), .requests_table th:nth-child(7) { width: 14%; }

/* 상태: 기존 JavaScript 클래스 사용 */
.status_wait, .status_approved, .status_rejected, .status_cancelled { display: inline-block; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.status_wait { color: #876222 !important; background: #fff4d8; }
.status_approved { color: #255ba9 !important; background: #e5efff; }
.status_rejected { color: #bd4153 !important; background: #ffe9ed; }
.status_cancelled { color: #758094 !important; background: #edf0f5; }
.action_cell { text-align: center; }

/* 취소 및 사유 버튼 */
.cancel_button, .reason_button { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; min-height: 36px; padding: 7px 13px; border: 1px solid #cfddf0; border-radius: 9px; background: #edf4ff; color: #315e9a; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.cancel_button:hover, .reason_button:hover { background: #dbe9ff; border-color: #b7cdea; }
.cancel_button:disabled, .reason_button:disabled { opacity: .55; cursor: not-allowed; }

/* 내역 없음 */
.empty_message { display: none; padding: 56px 12px; text-align: center; color: #7d8ba1; font-size: 15px; }

/* 하단 링크 */
.requests_buttons { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.new_vacation_button, .home_button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 170px; min-height: 44px; padding: 10px 19px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 700; transition: background .15s; }
.new_vacation_button { background: #cbdcf5; color: #244b80; }
.new_vacation_button:hover { background: #b8d0f2; color: #244b80; }
.home_button { background: #fff; border: 1px solid #d9e4f2; color: #49607f; }
.home_button:hover { background: #f2f7fe; color: #244b80; }

/* 모바일 카드 - JS에서 생성하는 클래스 유지 */
.mobile_requests { display: none; }
.vacation_card { width: 100%; margin-bottom: 13px; padding: 18px; background: #fff; border: 1px solid #e0e9f5; border-radius: 12px; }
.vacation_card_header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid #edf1f7; }
.vacation_card_header strong { color: #263956; font-size: 15px; }
.vacation_card_information { width: 100%; }
.mobile_info_row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
.mobile_info_label { flex: 0 0 auto; color: #7a8ba2; font-size: 13px; }
.mobile_info_value { min-width: 0; color: #283a54; font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.vacation_card_action { margin-top: 13px; padding-top: 13px; border-top: 1px solid #edf1f7; }
.mobile_cancel_button, .mobile_reason_button { width: 100%; min-height: 42px; }

/* 반려 사유 팝업 - .show 클래스 제어 유지 */
.rejection_modal_overlay { display: none; position: fixed; inset: 0; z-index: 9999; padding: 18px; align-items: center; justify-content: center; background: rgba(16, 29, 52, .58); }
.rejection_modal_overlay.show { display: flex; }
.rejection_modal { width: 100%; max-width: 390px; padding: 28px 25px 24px; background: #fff; border: 1px solid #e3ebf6; border-radius: 16px; box-shadow: 0 18px 55px rgba(12,28,54,.2); }
.rejection_modal_title { margin-bottom: 18px; color: #20334f; text-align: center; font-size: 20px; font-weight: 800; }
.rejection_reason_text { width: 100%; min-height: 95px; padding: 16px; border: 1px solid #e1e9f5; border-radius: 10px; background: #f6f9fe; color: #344760; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.rejection_modal_buttons { display: flex; justify-content: center; margin-top: 20px; }
.rejection_close_button { min-width: 110px; min-height: 42px; padding: 8px 20px; border: 0; border-radius: 9px; background: #cbdcf5; color: #244b80; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rejection_close_button:hover { background: #b8d0f2; }

/* 태블릿 */
@media (max-width: 1050px) {
    .requests_area { padding: 30px 22px 55px; }
}

/* 모바일: PC 테이블 대신 카드 표시 */
@media (max-width: 700px) {
    .page_wrap { min-height: calc(100vh - 56px); }
    .requests_area { padding: 22px 13px 45px; }
    .requests_box { padding: 22px 15px; border-radius: 14px; }
    .requests_heading { margin-bottom: 20px; }
    .requests_title { font-size: 22px; }
    .requests_description { font-size: 13px; }
    .desktop_table_wrap { display: none; }
    .mobile_requests { display: block; }
    .requests_buttons { flex-direction: column; gap: 9px; margin-top: 22px; }
    .new_vacation_button, .home_button { width: 100%; min-height: 45px; }
    .rejection_modal { max-width: 350px; padding: 24px 20px 20px; }
    .rejection_close_button { width: 100%; }
}