/**
 * Recipe Share Modal CSS
 * 레시피 공유 모달 스타일 - KRDS 퍼블리싱
 */

/* 모달 초기 중앙 정렬 */
#recipeShareModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

/* 숨김 클래스 */
.hidden {
    display: none !important;
}

/* 필수 입력 표시 */
#recipeShareModal .label.required::before {
    content: '*';
    color: var(--krds-color-light-danger-40, #dc2626);
    margin-right: 0.2rem;
}

#recipeShareModal .label.required::after {
    content: none;
}

#recipeShareModal .required::before {
    content: "*";
    position: relative;
    color: var(--krds-color-light-red);
}

#recipeShareModal .required::after {
    content: none;
}

/* ICAPP.confirm 모달 내 required 스타일 오버라이드 */
.modal-dialog .required {
    display: inline !important;
}

.modal-dialog .required::before {
    content: "*" !important;
    color: var(--krds-color-light-red) !important;
    margin-right: 0.2rem;
}

.modal-dialog .required::after {
    content: none !important;
}

/* 상세 정보 리스트 스타일 */
.detail-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.detail-info-item {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    width: 120px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

.detail-value {
    flex: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* 공유 리스트 스크롤 */

#shareList::-webkit-scrollbar {
    width: 6px;
}

#shareList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#shareList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

#shareList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 그룹 멤버 리스트 스크롤 */
#groupMemberList {
    min-height: 200px;
}

#groupMemberList::-webkit-scrollbar {
    width: 6px;
}

#groupMemberList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#groupMemberList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

#groupMemberList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 빈 상태 메시지 스타일 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state .empty-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.empty-state .empty-description {
    font-size: 12px;
    opacity: 0.7;
}

/* 테이블 스크롤 영역 */
.conts_scroll {
    max-height: 300px;
    overflow-y: auto;
}

.conts_scroll::-webkit-scrollbar {
    width: 6px;
}

.conts_scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.conts_scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.conts_scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 높이 유틸리티 클래스 */
.h200 {
    height: 200px;
}

.h300 {
    height: 300px;
}

.h400 {
    height: 400px;
}

/* 공유 대상 리스트 부모 체인 flex 설정 */
#shareTargetSection .contents-column:nth-child(2) .box-area.bg-black {
    display: flex;
    flex-direction: column;
    height: 100px;
}

#shareTargetSection .contents-column:nth-child(2) .box-area.bg-black>.box-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100px;
}

#shareList {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100px;
}

#shareList ul {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#shareList ul:empty::after {
    content: '공유 대상이 없습니다\A그룹을 선택하거나 개별 대상을 추가하세요';
    white-space: pre-wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}

/* 그룹할 대상 리스트 빈 상태 */
#groupMemberList.file-list ul:empty::after {
    content: '대상이 없습니다\A부서 또는 사용자를 추가하세요';
    white-space: pre-wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}

/* 멤버 아이템 삭제 버튼 스타일 */
#groupMemberList .file-list li button.krds-btn.text {
    color: var(--light-danger, #dc3545);
}

#groupMemberList .file-list li button.krds-btn.text:hover {
    color: var(--light-danger-hover, #c82333);
}

/* 공유 신청 처리현황 테이블 truncate */
#statusTable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

/* 공유 대상 아이템 삭제 버튼 스타일 */
#shareList .file-list li button.krds-btn.text {
    color: var(--light-danger, #dc3545);
}

#shareList .file-list li button.krds-btn.text:hover {
    color: var(--light-danger-hover, #c82333);
}

/* 로딩 스피너 스타일 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary, #003764);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner .loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 상세정보 섹션 배경 */
#statusDetailSection .box-area.bg-black {
    background-color: var(--krds-high-contrast-color-divider-gray-light);
}

/* 버튼 50%/50% 레이아웃 */
#recipeShareModal .d-flex.gap8 {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#recipeShareModal .d-flex.gap8>button {
    flex: 1;
}

/* 공유 대상 섹션 bg-black 높이 */
#shareTargetSection .box-area.bg-black {
    min-height: 150px;
}

/* 모달 상단 영역 space-between 레이아웃 */
.modal-top-area.between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

/* .modal-top-area.between > div {
    display: flex;
    flex-direction: column;
} */

.group-action-btns {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.group-action-btns>button {
    min-width: auto;
    padding: 4px 12px;
}

/* ICAPP 팝업 중앙 정렬 (사용자/부서 선택) */
.krds-modal.custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
}

.krds-modal.custom .modal-dialog.box.modal-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.file-list.has-scroll ul {
    height: 100%;
    max-height: unset;
}