/**
 * ============================================
 * mobile_patch.css - 모바일 UI 문제 해결 패치
 * 
 *  적용 방법 
 * 1. 기존 Site.css는 그대로 유지
 * 2. 이 파일을 wwwroot/css/ 폴더에 추가
 * 3. _Layout.cshtml에서 Site.css 다음에 추가:
 * 
 * <link rel="stylesheet" href="~/css/Site.css" asp-append-version="true" />
 * <link rel="stylesheet" href="~/css/mobile_patch.css" asp-append-version="true" />
 * 
 * 수정일: 2025-01-16
 * ============================================
 */

/* ============================================
   1. 태블릿 (1024px 이하)
   ============================================ */

@media (max-width: 1024px) {
    /* 타이머 영역 숨김 */
    #login_timer {
        display: none !important;
    }

    /* 시간연장 버튼 숨김 */
    #btn_timer {
        display: none !important;
    }
}

/* ============================================
   2. 소형 태블릿 (768px 이하)
   ============================================ */

@media (max-width: 768px) {
    /* 헤더 패딩 축소 */
    .layout-header {
        padding: 0 8px !important;
    }

    /*  다크모드 텍스트 숨김 (핵심 수정)  */
    .sw_darkmode > span:first-child {
        display: none !important;
    }

    .sw_darkmode {
        min-width: auto !important;
        padding: 0 4px !important;
    }

    /* 줌 버튼 숨김 */
    #TOP_MINUS,
    #TOP_PLUS {
        display: none !important;
    }

    /* 전체화면 버튼 숨김 */
    #FULL_SCREEN {
        display: none !important;
    }

    /* 언어 버튼 그룹 축소 */
    #btn_group_language {
        transform: scale(0.85);
        transform-origin: center;
    }

    /* 사용자정보 버튼 - 텍스트 숨김 */
    #LoginUserInfo .dx-button-text {
        display: none !important;
    }

    #LoginUserInfo {
        min-width: 36px !important;
    }

    /* 로그아웃 버튼 축소 */
    #btnLogin {
        padding: 0 10px !important;
        font-size: 12px !important;
    }

        #btnLogin .dx-button-text {
            font-size: 12px !important;
        }

    /* 알림 버튼 */
    #MYJOB_MESSAGE {
        min-width: 36px !important;
    }
}

/* ============================================
   3. 모바일 (640px 이하)
   ============================================ */

@media (max-width: 640px) {
    /* 헤더 더 축소 */
    .layout-header {
        padding: 0 4px !important;
    }

    /* 로고 텍스트 숨김 (있다면) */
    .top-logo-txt {
        display: none !important;
    }

    /* 로고 이미지 축소 */
    .top-logo-img > img {
        max-height: 24px !important;
        margin-left: 4px !important;
    }

    .top-logo {
        min-width: 80px !important;
        gap: 4px !important;
    }

    /* 언어 버튼 숨김 */
    #btn_group_language,
    #btn_korea,
    #btn_english {
        display: none !important;
    }

    /* 다크모드 스위치 축소 */
    .sw_darkmode {
        transform: scale(0.85);
        transform-origin: center right;
    }

    /* 알림 버튼 축소 */
    #MYJOB_MESSAGE {
        min-width: 32px !important;
        height: 32px !important;
    }

        #MYJOB_MESSAGE .dx-button-content {
            padding: 4px !important;
        }

    /* 사용자정보 버튼 - 아이콘만 */
    #LoginUserInfo {
        min-width: 32px !important;
        height: 32px !important;
    }

        #LoginUserInfo .dx-button-content {
            padding: 4px 6px !important;
        }

    /* 로그아웃 버튼 축소 */
    #btnLogin {
        min-width: 50px !important;
        height: 32px !important;
        padding: 0 8px !important;
    }

        #btnLogin .dx-button-text {
            font-size: 11px !important;
        }
}

/* ============================================
   4. 초소형 모바일 (480px 이하)
   ============================================ */

@media (max-width: 480px) {
    /* 로고 더 축소 */
    .top-logo-img > img {
        max-height: 20px !important;
    }

    .top-logo {
        min-width: 60px !important;
    }

    /* 다크모드 스위치 숨김 */
    .sw_darkmode {
        display: none !important;
    }

    /* 알림 버튼 더 축소 */
    #MYJOB_MESSAGE {
        min-width: 28px !important;
        height: 28px !important;
    }

    /* 사용자정보 버튼 더 축소 */
    #LoginUserInfo {
        min-width: 28px !important;
        height: 28px !important;
    }

    /* 로그아웃 버튼 더 축소 */
    #btnLogin {
        min-width: 44px !important;
        height: 28px !important;
        padding: 0 6px !important;
    }

        #btnLogin .dx-button-text {
            font-size: 10px !important;
        }
}

/* ============================================
   5. 팝업 크기 제한 (화면 벗어남 방지)
   ============================================ */

/* 모든 팝업에 최대 크기 제한 */
.dx-popup-wrapper .dx-overlay-content {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
}

@media (max-width: 768px) {
    .dx-popup-wrapper .dx-overlay-content {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
    }

    .dx-popup-bottom {
        padding: 8px !important;
    }

        .dx-popup-bottom .dx-button {
            min-width: 60px !important;
            padding: 6px 10px !important;
            font-size: 12px !important;
        }
}

@media (max-width: 640px) {
    .dx-popup-wrapper .dx-overlay-content {
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        border-radius: 8px !important;
    }

    .dx-popup-title {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .dx-popup-content {
        padding: 10px !important;
    }

    .dx-popup-bottom {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

        .dx-popup-bottom .dx-button {
            flex: 1 1 auto !important;
            min-width: 50px !important;
        }
}

/* ============================================
   6. 사이드바 모바일 오버레이
   ============================================ */

@media (max-width: 640px) {
    /* 사이드바 오버레이 모드 */
    .layout-body .menu-container {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        min-width: 260px !important;
        z-index: 1000 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease !important;
    }

        .layout-body .menu-container.menu-open,
        .dx-drawer-opened .menu-container {
            transform: translateX(0) !important;
        }

    .layout-body .content {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   7. 사용자 정보 패널
   ============================================ */

@media (max-width: 640px) {
    .iz-panel-userinfo,
    .iz-panel-right {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    }
}

/* ============================================
   8. 푸터
   ============================================ */

@media (max-width: 640px) {
    .layout-body .content-footer {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ============================================
   9. CommonHeader 영역 (.cmb) - 조회/신규/엑셀/닫기 버튼
   ============================================ */

/* 768px 이하 */
@media (max-width: 768px) {
    /* CommonHeader wrapper */
    .cmb {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

        /* 버튼 크기 축소 */
        .cmb .dx-toolbar .dx-button {
            padding: 4px 8px !important;
            height: 30px !important;
        }

            .cmb .dx-toolbar .dx-button .dx-button-text {
                font-size: 12px !important;
            }

        /* 제목 폰트 축소 */
        .cmb h6 {
            font-size: 14px !important;
            white-space: nowrap !important;
        }
}

/* 640px 이하 */
@media (max-width: 640px) {
    .cmb {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

        /*  제목 영역 숨김 (탭에 이미 제목 있음)  */
        .cmb .dx-toolbar-before {
            display: none !important;
        }

        /* 버튼 영역만 표시 */
        .cmb .dx-toolbar .dx-toolbar-items-container {
            height: auto !important;
            min-height: 32px !important;
        }

        .cmb .dx-toolbar-after {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* 버튼 - 아이콘만 표시, 한 줄 정렬 */
        .cmb .dx-toolbar .dx-button {
            padding: 4px 8px !important;
            height: 32px !important;
            min-width: 32px !important;
        }

            .cmb .dx-toolbar .dx-button.dx-button-has-icon .dx-button-text {
                display: none !important;
            }
}

/* 480px 이하 */
@media (max-width: 480px) {
    .cmb .dx-toolbar .dx-button {
        padding: 4px 6px !important;
        height: 28px !important;
        min-width: 28px !important;
    }
}

/* ============================================
   9-1. 검색 조건 영역 (기안일 등 라벨 세로 표시 방지)
   ============================================ */

@media (max-width: 768px) {
    /* 검색 조건 영역 */
    .tab-container-search,
    .popup-container-search,
    .search-area,
    .dx-fieldset {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px !important;
    }

        /* 라벨 - 줄바꿈 방지 */
        .tab-container-search label,
        .popup-container-search label,
        .dx-field-label {
            white-space: nowrap !important;
            min-width: 50px !important;
            font-size: 12px !important;
        }
}

@media (max-width: 640px) {
    /* 검색 조건 - 세로 배치 */
    .tab-container-search,
    .popup-container-search,
    .search-area {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        /* 각 검색 필드 그룹 - 가로 배치 유지 */
        .tab-container-search > div,
        .popup-container-search > div,
        .search-area > div,
        .dx-field {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 8px !important;
            width: 100% !important;
        }

        /* 라벨 - 고정 너비 */
        .tab-container-search label,
        .popup-container-search label,
        .dx-field-label {
            min-width: 60px !important;
            max-width: 60px !important;
            flex-shrink: 0 !important;
        }

        /* 입력 필드 - 나머지 공간 */
        .tab-container-search .dx-texteditor,
        .tab-container-search .dx-datebox,
        .tab-container-search .dx-selectbox,
        .popup-container-search .dx-texteditor,
        .dx-field-value {
            flex: 1 !important;
            min-width: 0 !important;
        }
}

/* ============================================
   9-2. 사이드바 메뉴 하단 여백 (최종빌드 영역 겹침 방지)
   ============================================ */

/* 사이드바 메뉴 영역 - 하단 여백 추가 */
.menu-container .dx-treeview,
.menu-container .dx-scrollview-content,
.layout-body .menu-container .menu-content {
    padding-bottom: 60px !important;
}

/* 사이드바 전체 영역 */
.menu-container {
    display: flex !important;
    flex-direction: column !important;
}

    /* 메뉴 스크롤 영역 */
    .menu-container .menu-content,
    .menu-container .dx-scrollview {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    /* 사이드바 하단 (최종빌드) 영역 */
    .menu-container .menu-footer,
    .menu-container .sidebar-footer,
    .menu-container > div:last-child:not(.menu-content) {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        background: var(--sidebar-bg, #1e293b) !important;
    }

/* 768px 이하에서 하단 여백 더 추가 */
@media (max-width: 768px) {
    .menu-container .dx-treeview,
    .menu-container .dx-scrollview-content {
        padding-bottom: 70px !important;
    }
}

/* ============================================
   10. 탭 내부 액션 버튼 영역 (조회, 신규, 엑셀, 닫기 등)
   ============================================ */

/* 768px 이하 - 버튼 축소 */
@media (max-width: 768px) {
    /* 탭 헤더의 툴바 영역 */
    .tab-container-header,
    .dx-toolbar.tab-toolbar,
    .content-header,
    .search-header {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

        /* 탭 내부 버튼들 크기 축소 */
        .tab-container-header .dx-button,
        .content-header .dx-button,
        .search-header .dx-button {
            padding: 4px 8px !important;
            font-size: 12px !important;
            min-width: auto !important;
        }

            .tab-container-header .dx-button .dx-button-text,
            .content-header .dx-button .dx-button-text {
                font-size: 12px !important;
            }
}

/* 640px 이하 - 버튼 더 축소 + 일부 텍스트 숨김 */
@media (max-width: 640px) {
    /* 탭 헤더 전체 래핑 */
    .tab-container-header,
    .content-header,
    .search-header {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px !important;
    }

        /* 버튼 최소 크기 */
        .tab-container-header .dx-button,
        .content-header .dx-button,
        .search-header .dx-button {
            padding: 4px 6px !important;
            font-size: 11px !important;
            height: 28px !important;
        }

            /* 아이콘 있는 버튼은 텍스트 숨김 */
            .tab-container-header .dx-button.dx-button-has-icon .dx-button-text,
            .content-header .dx-button.dx-button-has-icon .dx-button-text {
                display: none !important;
            }

        /* 제목 영역 전체 너비 */
        .tab-container-header > .title,
        .tab-container-header > h3,
        .tab-container-header > span:first-child,
        .content-header > .title {
            width: 100% !important;
            margin-bottom: 4px !important;
        }
}

/* 480px 이하 - 버튼 아이콘만 표시 */
@media (max-width: 480px) {
    .tab-container-header .dx-button,
    .content-header .dx-button {
        padding: 4px !important;
        min-width: 28px !important;
    }

        /* 모든 버튼 텍스트 숨김 (아이콘만) */
        .tab-container-header .dx-button .dx-button-text,
        .content-header .dx-button .dx-button-text {
            display: none !important;
        }

        /* 아이콘 없는 버튼은 텍스트 유지하되 축소 */
        .tab-container-header .dx-button:not(.dx-button-has-icon) .dx-button-text,
        .content-header .dx-button:not(.dx-button-has-icon) .dx-button-text {
            display: inline !important;
            font-size: 10px !important;
        }
}

/* ============================================
   10. 검색 조건 영역
   ============================================ */

@media (max-width: 768px) {
    .tab-container-search,
    .popup-container-search,
    .search-container {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 6px !important;
    }

        .tab-container-search > div,
        .popup-container-search > div,
        .search-container > div {
            flex: 1 1 auto !important;
            min-width: 120px !important;
        }

        .tab-container-search label,
        .popup-container-search label {
            font-size: 12px !important;
            min-width: 60px !important;
        }
}

@media (max-width: 640px) {
    .tab-container-search,
    .popup-container-search,
    .search-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px !important;
    }

        .tab-container-search > div,
        .popup-container-search > div,
        .search-container > div {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .tab-container-search label,
        .popup-container-search label {
            min-width: 70px !important;
            flex-shrink: 0 !important;
        }

        .tab-container-search .dx-texteditor,
        .popup-container-search .dx-texteditor,
        .search-container .dx-texteditor {
            flex: 1 !important;
            width: auto !important;
        }

        .tab-container-search .dx-selectbox,
        .popup-container-search .dx-selectbox {
            flex: 1 !important;
            min-width: 100px !important;
        }
}

/* ============================================
   11. DevExtreme 툴바 버튼 영역 (공통)
   ============================================ */

/* 768px 이하 */
@media (max-width: 768px) {
    /* 툴바 After 영역 (우측 버튼들) */
    .dx-toolbar .dx-toolbar-after {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

        /* 툴바 내 버튼 축소 */
        .dx-toolbar .dx-toolbar-after .dx-button,
        .dx-toolbar .dx-toolbar-before .dx-button {
            padding: 4px 8px !important;
            min-width: auto !important;
        }

            .dx-toolbar .dx-toolbar-after .dx-button .dx-button-text {
                font-size: 12px !important;
            }
}

/* 640px 이하 */
@media (max-width: 640px) {
    /* 콘텐츠 영역 내 툴바 */
    .content-body .dx-toolbar,
    .tab-content .dx-toolbar,
    .dx-tabpanel .dx-toolbar {
        flex-wrap: wrap !important;
    }

        .content-body .dx-toolbar .dx-toolbar-items-container,
        .tab-content .dx-toolbar .dx-toolbar-items-container,
        .dx-tabpanel .dx-toolbar .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 4px !important;
        }

        /* 버튼 더 축소 */
        .content-body .dx-toolbar .dx-button,
        .tab-content .dx-toolbar .dx-button,
        .dx-tabpanel .dx-toolbar .dx-button {
            padding: 4px 6px !important;
            height: 28px !important;
            font-size: 11px !important;
        }

            /* 아이콘+텍스트 버튼 → 아이콘만 */
            .content-body .dx-toolbar .dx-button.dx-button-has-icon .dx-button-text,
            .tab-content .dx-toolbar .dx-button.dx-button-has-icon .dx-button-text,
            .dx-tabpanel .dx-toolbar .dx-button.dx-button-has-icon .dx-button-text {
                display: none !important;
            }
}

/* 480px 이하 */
@media (max-width: 480px) {
    /* 모든 버튼 아이콘만 표시 */
    .content-body .dx-toolbar .dx-button .dx-button-text,
    .tab-content .dx-toolbar .dx-button .dx-button-text,
    .dx-tabpanel .dx-toolbar .dx-button .dx-button-text {
        display: none !important;
    }

    .content-body .dx-toolbar .dx-button,
    .tab-content .dx-toolbar .dx-button,
    .dx-tabpanel .dx-toolbar .dx-button {
        min-width: 28px !important;
        padding: 4px !important;
    }

        /* 텍스트만 있는 버튼은 유지 */
        .content-body .dx-toolbar .dx-button:not(.dx-button-has-icon) .dx-button-text,
        .tab-content .dx-toolbar .dx-button:not(.dx-button-has-icon) .dx-button-text {
            display: inline !important;
            font-size: 10px !important;
        }
}

/* ============================================
   12. 그리드 모바일 최적화
   ============================================ */

@media (max-width: 640px) {
    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    .dx-datagrid .dx-row > td {
        font-size: 12px !important;
        padding: 6px 4px !important;
    }

    .dx-datagrid .dx-pager .dx-page-sizes {
        display: none !important;
    }
}

/* ============================================
   13. DataGrid 로딩 인디케이터 수정
   ============================================ */

/* 로딩 패널 - 정사각형 유지 */
.dx-loadpanel-content {
    border-radius: 50% !important;
    min-width: 80px !important;
    min-height: 80px !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 로딩 인디케이터 wrapper */
.dx-loadpanel-content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 로딩 인디케이터 - 원형 유지 */
.dx-loadindicator {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.dx-loadindicator-content {
    width: 100% !important;
    height: 100% !important;
}

.dx-loadindicator-icon {
    width: 40px !important;
    height: 40px !important;
}

.dx-loadindicator-segment {
    width: 40px !important;
    height: 40px !important;
}

/* DataGrid 내부 로딩 패널 */
.dx-datagrid .dx-loadpanel .dx-loadpanel-content {
    border-radius: 8px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    width: auto !important;
    height: auto !important;
    padding: 20px !important;
}

/* 로딩 오버레이 */
.dx-overlay-content.dx-loadpanel-content {
    aspect-ratio: 1 / 1 !important;
}

/* 모바일에서 로딩 패널 크기 조정 */
@media (max-width: 640px) {
    .dx-loadpanel-content {
        min-width: 60px !important;
        min-height: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }

    .dx-loadindicator,
    .dx-loadindicator-icon,
    .dx-loadindicator-segment {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .dx-datagrid .dx-loadpanel .dx-loadpanel-content {
        min-width: 80px !important;
        min-height: 80px !important;
        padding: 15px !important;
    }
}