body {
}

.custom-col-width100 {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}

.custom-col-width120 {
    width: 120px;
    max-width: 120px;
    min-width: 120px;
}

.custom-col-width150 {
    width: 150px;
    max-width: 150px;
    min-width: 150px;
}


.custom-col-width200 {
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

.custom-col-width250 {
    width: 250px;
    max-width: 250px;
    min-width: 250px;
}

.custom-col-width300 {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
}

.custom-col-width350 {
    width: 350px;
    max-width: 350px;
    min-width: 350px;
}

.custom-col-width400 {
    width: 400px;
    max-width: 400px;
    min-width: 400px;
}

.custom-label .mud-input-label {
    color: blue !important; /* Label의 색상을 파란색으로 설정 */
}

/* 모바일에서 숨김 */
@media (max-width: 768px) {
    td.hide-on-mobile, th.hide-on-mobile {
        display: none !important;
    }
}


/* PC에서 숨김 (추후 필요할 경우 확장 가능) */
@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}


.table-header {
    background-color: #dddddd;
    text-align: center !important;
}


.mud-table-root .mud-table-head .mud-table-cell {
    border-inline: 1px solid white !important;
}



.custom-popup-menu {
    padding: 0 !important;
    max-height: 90vh;
    overflow: auto;
}

/* 다이얼로그: 뷰포트 90% 상한, 내부 스크롤 준비 */
.dialog-viewport-fit {
    width: min(640px, 90vw) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
}

    /* MudBlazor 실제 카드 영역(컨테이너) 제한 + 내부 스크롤을 위해 숨김 */
    .dialog-viewport-fit .mud-paper {
        /* 높이 상한을 부모로부터 그대로 물려받아 사용 */
        max-height: inherit !important;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 내용은 content에서만 스크롤 */
    }

    /* 내용부만 스크롤: 플렉스 아이템 기본기(!! 중요) */
    .dialog-viewport-fit .mud-dialog-content {
        flex: 1 1 auto;
        min-height: 0; /* 자식이 줄어들 수 있게 해야 스크롤이 생김 */
        overflow: auto;
        max-height: calc(90vh - 120px); /* 헤더/액션 여유치. 필요시 숫자 조정 */
    }

/* 작은 알림/확인 다이얼로그 */
.dialog-viewport-mini {
    width: min(420px, 90vw) !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    display: flex;
    flex-direction: column;
}

    .dialog-viewport-mini .mud-paper {
        max-height: inherit !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dialog-viewport-mini .mud-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        max-height: calc(80vh - 100px);
    }

/* 모바일/아주 작은 창: 사실상 풀스크린 느낌 */
@media (max-width: 600px) {
    .dialog-viewport-fit {
        width: 96vw !important;
        max-width: 96vw !important;
        height: 96vh !important;
        max-height: 96vh !important;
    }

        .dialog-viewport-fit .mud-dialog-content {
            max-height: calc(96vh - 120px);
        }
}

/* 동적 뷰포트 단위(dvh) 지원 시 더 정확한 리사이즈 추적 */
@supports (height: 1dvh) {
    .dialog-viewport-fit {
        max-height: 90dvh !important;
    }

        .dialog-viewport-fit .mud-dialog-content {
            max-height: calc(90dvh - 120px);
        }

    .dialog-viewport-mini {
        max-height: 80dvh !important;
    }

        .dialog-viewport-mini .mud-dialog-content {
            max-height: calc(80dvh - 100px);
        }
}

/* (선택) ‘최대화’ 유사 토글용 */
.dialog-viewport-max {
    width: 98vw !important;
    max-width: 98vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
}

.draggable-dialog .mud-dialog-title {
    user-select: none;
}

.draggable-dialog.mud-dialog {
    will-change: left, top;
}