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 !important;
    text-align: center !important;
}


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




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

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

.custom-button {
    background-color: #dddddd !important;
    margin: 5px !important;
    margin-right: 0px !important;
    padding: 6px !important;
}

.custom-dialog-button {
    background-color: #dddddd !important;
    margin: 5px !important;
    margin-right: 0px !important;
    padding: 6px !important;
}

.table-mud-paper {
    min-height:400px !important;
    padding: 10px !important;
}

.mud-paper-shadow {
    box-shadow: none !important;
}

.table-col-number {
    text-align: right !important;
}

.text-vertical-center {
    align-content: center !important;
    padding:5px !important;
}

.custom-text-width100 {
    width: 100px !important;
}

.custom-text-center {
    align-content: center !important;
}

.custom-num-width {
    width: 80px !important;
    max-width: 80px !important;
    align-content: end !important;
    text-align: right !important;
}

.custom-num-width .mud-input-slot {
    width: 80px !important;
    max-width: 80px !important;
    align-content: end !important;
    text-align: right !important;
}

.limit-datetime-picker {
    max-width: 200px !important;
}

.limit-datetime-range-picker {
    max-width: 300px !important;
}

.limit-label {
    max-width: 500px !important;
}

.limit-filed {
    max-width: 200px !important;
}


/* DialogBox 조정 (by lch) ------------------------------------------------------------------------시작 ---- */
/* ===== Dialog bottom gap (약 1cm) 공통 변수 ===== */
:root {
    /* 실제 물리 1cm는 기기/브라우저마다 오차가 있어 mm + safe-area 혼합을 권장 */
    --dialog-bottom-gap: max(10mm, env(safe-area-inset-bottom, 0px));
}

/* 대상 다이얼로그에 실제 하단 여백 적용 */
.mud-dialog.dialog-viewport-fit {
    margin-bottom: var(--dialog-bottom-gap) !important;
}

/* 기본: 데스크탑/공통 높이 제한 */
.dialog-viewport-fit {
    width: min(720px, 90vw) !important;
    max-width: 90vw !important;
    max-height: calc(90vh - var(--dialog-bottom-gap)) !important;
    display: flex;
    flex-direction: column;
}

    /* 내용부 스크롤 영역 */
    .dialog-viewport-fit .mud-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        max-height: calc(90vh - var(--dialog-bottom-gap) - 120px) !important;
    }

/* ✅ 모바일 세로(portrait)에서만: 조금 더 작게(88vh) + 하단 띄우기 */
@media (max-width: 600px) and (orientation: portrait) {
    .mud-dialog.dialog-viewport-fit {
        margin-bottom: var(--dialog-bottom-gap) !important;
    }

    .dialog-viewport-fit {
        width: 96vw !important;
        max-width: 96vw !important;
        height: auto !important;
        max-height: calc(88vh - var(--dialog-bottom-gap)) !important;
    }

        .dialog-viewport-fit .mud-dialog-content {
            max-height: calc(88vh - var(--dialog-bottom-gap) - 120px) !important;
        }
}

/* ✅ 모바일 가로(landscape): 상하 여백 줄이고 좀 더 크게 (96vh 사용) */
@media (max-height: 500px) and (orientation: landscape) {
    .mud-dialog.dialog-viewport-fit {
        margin-top: 0px !important;
        margin-bottom: 4px !important;
    }

    .dialog-viewport-fit {
        max-height: calc(96vh - var(--dialog-bottom-gap)) !important;
    }

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

/* ===== dvh 지원 기기 (최신 iOS / Android)에서 더 정확한 높이 계산 ===== */
@supports (height: 1dvh) {
    .dialog-viewport-fit {
        max-height: calc(90dvh - var(--dialog-bottom-gap)) !important;
    }

        .dialog-viewport-fit .mud-dialog-content {
            max-height: calc(90dvh - var(--dialog-bottom-gap) - 120px) !important;
        }
    /* 세로 */
    @media (max-width: 600px) and (orientation: portrait) {
        .dialog-viewport-fit {
            max-height: calc(88dvh - var(--dialog-bottom-gap)) !important;
        }

            .dialog-viewport-fit .mud-dialog-content {
                max-height: calc(88dvh - var(--dialog-bottom-gap) - 120px) !important;
            }
    }
    /* 가로 */
    @media (max-height: 500px) and (orientation: landscape) {
        .dialog-viewport-fit {
            max-height: calc(96dvh - var(--dialog-bottom-gap)) !important;
        }

            .dialog-viewport-fit .mud-dialog-content {
                max-height: calc(96dvh - var(--dialog-bottom-gap) - 120px) !important;
            }
    }
    /* ─────────────────────────────────────────────
   📏 사이즈 옵션: dialog-sm / dialog-md / dialog-lg
   - 모바일(세로/가로)에서는 기존 media-query가 우선이어서 거의 full width
   - 태블릿/데스크탑(가로폭 넓을 때)에만 가로폭 차이를 줌
   ───────────────────────────────────────────── */
    /* 태블릿 이상에서만 사이즈 차이를 준다 (폭 769px 이상) */
    @media (min-width: 769px) {
        /* 작은 다이얼로그: 간단한 메시지, 확인창 등 */
        .dialog-viewport-fit.dialog-sm {
            width: min(520px, 90vw) !important;
            max-width: 90vw !important;
        }
        /* 중간 다이얼로그: 기본 폼/검색 등 (기본값보다 살짝 넓게) */
        .dialog-viewport-fit.dialog-md {
            width: min(840px, 90vw) !important;
            max-width: 90vw !important;
        }
        /* 큰 다이얼로그: AddBom 같이 테이블 많은 화면 */
        .dialog-viewport-fit.dialog-lg {
            width: min(1120px, 95vw) !important;
            max-width: 95vw !important;
        }
    }
}
/* ===== Dialog bottom gap (약 1cm) 공통 변수 끝 =====----------------------------  ---------- 종료 ------ */
.sticky-table .mud-table-container {
    overflow-x: auto !important;
}

/* 첫 번째 열 고정 스타일 */
.sticky-table th:first-child,
.sticky-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3 !important; /* 헤더와 데이터 겹침 방지 */
    background-color: #fff; /* 고정 컬럼에 배경 설정 */
    border-right: 1px solid #ddd;
}

/* 헤더는 z-index 조금 더 높게 */
.sticky-table thead th:first-child {
    z-index: 4 !important;
}

/* Hover 시에도 고정된 컬럼 스타일 유지 */
.sticky-table tbody tr:hover td:first-child {
    background-color: #e3f2fd !important;
}

.sticky-table thead th {
    position: sticky;
    top: 0 !important;
    z-index: 4 !important;
}

.sticky-table tbody tr:nth-child(odd) td:first-child {
    background-color: var(--mud-palette-table-row-odd) !important;
}

.sticky-table tbody tr:nth-child(even) td:first-child {
    background-color: var(--mud-palette-table-row-even) !important;
}

/* Hover 시 색상 유지 */
.sticky-table tbody tr:hover td:first-child {
    background-color: var(--mud-palette-table-row-hover) !important;
}