@charset "UTF-8";

.disabled-style {
    background-color: #e9ecef !important;
    color: #495057;
}

/* -----------------------------
    UC Page Modal Styles (jQuery Modal 오버라이드)
----------------------------- */
/* jQuery Modal 기본 스타일 오버라이드 */
.modal {
    max-width: 600px; /* 모달 크기 조정 */
    width: 90%;
    padding: 0; /* 기본 패딩 제거 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: #fff;
    /* 중앙 정렬을 위한 추가 스타일 */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1051 !important;
}

/* modal header */
.modal-page-header {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}
.modal-page-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    color: #212529;
}
.modal-page-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #212529;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.modal-page-close:hover {
    background: #f8f9fa;
    color: #007bff;
}

/* modal body */
.modal-page-body {
    padding: 1.5rem 2.5rem;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

/* modal footer */
.modal-page-footer {
    background: #fff;
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 8px 8px;
}
.modal-page-footer .footer-left,
.modal-page-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.modal-page-footer .krds-btn {
    margin: 0 !important;
    flex-shrink: 0;
}
.modal-page-footer > div {
    display: flex !important;
    align-items: center !important;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
}

.footer-left {
    justify-content: flex-start !important;
}

.footer-center {
    justify-content: center !important;
}

.footer-right {
    justify-content: flex-end !important;
}

/* jQuery Modal 기본 닫기 버튼 숨김 */
/* .modal a.close-modal { display: none; } */

/* jQuery Modal 배경 오버레이 스타일 */
.jquery-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1050 !important;
}

/* jQuery Modal이 중앙에 표시되도록 보장 */
.jquery-modal .modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1051 !important;
    margin: 0 !important;
}

/* -----------------------------
  UcModal.js 팝업 관련 스타일
----------------------------- */
/* 확인 버튼(초록색) */
.my-confirm-btn,
.swal2-confirm {
    background: #17c653 !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    padding: 0.7em 1.5em !important;
    border: none !important;
    margin: 0 0.5em !important;
    box-shadow: 0 2px 8px rgba(37, 124, 255, 0.08);
}

.my-confirm-btn:hover,
.swal2-confirm:hover {
    background: #3acf6d !important;
    border-color: #2ecc64 !important;
}

.my-confirm-btn:active,
.swal2-confirm:active {
    background: #45d175 !important;
    border-color: #2ecc64 !important;
}

/* 취소 버튼(회색) */
.my-cancel-btn,
.swal2-cancel {
    background: #e9e6e6 !important;
    color: #000000 !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    padding: 0.7em 1.5em !important;
    border: none !important;
    margin: 0 0.5em !important;
    box-shadow: 0 2px 8px rgba(255, 56, 96, 0.08);
}

.my-cancel-btn:hover,
.swal2-cancel:hover {
    background: #d4d4d4 !important;
    border-color: #c7c7c7 !important;
}

.my-cancel-btn:active,
.swal2-cancel:active {
    background: #c7c7c7 !important;
    border-color: #bbbbbb !important;
}

/* 팝업 이미지 영역 가운데 정렬 */
.my-icon-center {
    display: flex;
    margin: 0 auto;
}

/* 버튼 영역 가운데 정렬 */
.swal2-actions {
    justify-content: center !important;
}

/* 모달 전체 스타일(선택) */
.swal2-popup {
    max-width: 90vw !important; /* 화면이 작을 때는 최대 90% */
    min-width: 32em !important; /* 최소 크기도 넉넉하게 */
    border-radius: 16px !important;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 3em 2em !important;
}

/* -----------------------------
  DataTable 관련 스타일
----------------------------- */
/* 페이징 버튼 영역 조정 */
.dt-paging.paging_simple_numbers .pagination {
    width: 100%;
}

/* -----------------------------
  Calendar 관련 스타일
----------------------------- */

/* 당일 업무일 떄 점 색깔 (초록색)*/
.ty-task .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #4caf50 !important;
}

.ty-todo .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #ff9800 !important;
}

.ty-event .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #ffc107 !important;
}

/* -----------------------------
  레이아웃 관련 스타일 (Thymeleaf Layout)
----------------------------- */
/* 본문 영역이 남은 공간을 차지하고 tail이 하단에 고정 */
.app-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* nav가 본문 영역 상단에 고정되도록 */
.app-main > div:first-child {
    flex-shrink: 0;
}

.app-main > .d-flex.flex-column.flex-column-fluid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#kt_app_footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* app-page가 전체 높이를 차지하도록 */
.app-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* app-wrapper가 남은 공간을 차지하도록 */
.app-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

/* -----------------------------
  업무 유형 버튼 css
----------------------------- */
.btn-custom-color {
    color: #ffffff !important;
    border: none !important;
    transition: filter 0.2s;
}
.btn-custom-color:hover {
    filter: brightness(90%);
    color: #ffffff !important;
}
.btn-custom-color:active {
    filter: brightness(80%);
}
.btn-task-color {
    background-color: #4caf50 !important;
}
.btn-todo-color {
    background-color: #9e9e9e !important;
}
.btn-event-color {
    background-color: #3f51b5 !important;
}

/* 업무유형 그룹 버튼 스타일 */
.job-ty-btn {
    min-width: 100px;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* TASK: Green (#4caf50) */
.btn-check:checked + .btn-outline-task {
    background-color: #17c653 !important;
    color: #ffffff !important;
}
/* TODO: Grey (#9e9e9e) */
.btn-check:checked + .btn-outline-todo {
    background-color: #9e9e9e !important;
    color: #ffffff !important;
}
/* EVENT: Indigo (#3f51b5) */
.btn-outline-event {
    border-color: #3f51b5 !important;
}
.btn-check:checked + .btn-outline-event {
    background-color: #3f51b5 !important;
    color: #ffffff !important;
}

/* -----------------------------
  업무 진행상태 버튼 css
----------------------------- */
.uc-stts-btn-group {
    display: flex;
    width: 100%;
    border: 1px solid #e1e3ea;
    border-radius: 0.475rem;
    overflow: hidden;
}

.uc-stts-btn-group .btn-check + .btn {
    flex: 1;
    border: 0;
    border-right: 1px solid #e1e3ea;
    border-radius: 0;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #7e8299;
    background-color: #ffffff;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc-stts-btn-group .btn-check + .btn:last-child {
    border-right: 0;
}

/* 각 상태별 선택 시 색상 (ucJobList의 배지 색상과 매칭) */
.uc-stts-btn-group .btn-check:checked + .btn.btn-stts-pending {
    background-color: #f6c000 !important; /* danger */
    color: #ffffff !important;
}
.uc-stts-btn-group .btn-check:checked + .btn.btn-stts-cancel {
    background-color: #f1416c !important; /* danger */
    color: #ffffff !important;
}

.uc-stts-btn-group .btn-check:checked + .btn.btn-stts-completed {
    background-color: #009ef7 !important; /* primary */
    color: #ffffff !important;
}

.uc-stts-btn-group .btn-check:checked + .btn.btn-stts-progress {
    background-color: #50cd89 !important; /* success */
    color: #ffffff !important;
}

/* 호버 효과: 상태별로 버튼 색상에 따라 더 밝은 색상 적용 */
.uc-stts-btn-group .btn-check:not(:checked) + .btn.btn-stts-pending:hover {
    background-color: #ffefb1;
}
.uc-stts-btn-group .btn-check:not(:checked) + .btn.btn-stts-cancel:hover {
    background-color: #ffd1df;
}
.uc-stts-btn-group .btn-check:not(:checked) + .btn.btn-stts-completed:hover {
    background-color: #d6f2ff;
}
.uc-stts-btn-group .btn-check:not(:checked) + .btn.btn-stts-progress:hover {
    background-color: #e1faea;
}
/* 기본(상태 없음) 버튼 호버 */
.uc-stts-btn-group .btn-check:not(:checked) + .btn:not(.btn-stts-pending):not(.btn-stts-cancel):not(.btn-stts-completed):not(.btn-stts-progress):hover {
    background-color: #f1faff;
}

/* 비활성화(조회용) 상태 스타일 - 요청에 따라 선택된 색상은 동일하게 유지 */
.uc-stts-btn-group .btn-check:disabled + .btn {
    cursor: default;
    opacity: 1;
}

.uc-stts-btn-group .btn-check:disabled:not(:checked) + .btn {
    background-color: #f9f9f9;
    color: #d8d8e5;
}