/**
 * 리하이브 문서고 관리시스템 - 모바일 전용 스타일
 * 터치 UX 최적화 및 그리드 반응형 개선
 */

/* ========================================
   0. 공통 z-index 수정 (모든 화면 크기)
   ======================================== */

/* 상단 메뉴 z-index 보장 */
#top-menu,
.top-menu {
    z-index: 1020 !important;
    position: fixed !important;
    top: 50px;
    left: 0;
    right: 0;
    height: auto !important;
    min-height: 40px;
}

/* 서브메뉴 z-index */
#top-menu .sub-menu,
.top-menu .sub-menu {
    z-index: 1021 !important;
}

/* 네비게이션 바 z-index */
#navbar {
    z-index: 1030 !important;
}

/* 콘텐츠 컨테이너를 top-menu 아래로 */
#content-container {
    z-index: 1 !important;
    position: relative;
    padding-top: 100px !important; /* navbar(50px) + top-menu(50px) */
}

/* 모바일 메뉴 토글 버튼 - 데스크탑에서 숨김 */
.mobile-menu-toggle {
    display: none;
}

/* ========================================
   1. 터치 디바이스 기본 설정
   ======================================== */

/* 터치 기기 감지 */
@media (hover: none) and (pointer: coarse) {
    /* 터치 피드백 개선 */
    * {
        -webkit-tap-highlight-color: rgba(37, 71, 106, 0.2);
    }

    /* 버튼 터치 영역 확대 */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .btn-sm {
        min-height: 38px;
        min-width: 38px;
        padding: 8px 12px;
    }

    .btn-xs {
        min-height: 32px;
        min-width: 32px;
        padding: 6px 10px;
    }

    /* 폼 컨트롤 터치 영역 */
    .form-control {
        min-height: 44px;
        font-size: 16px; /* iOS 확대 방지 */
        padding: 10px 12px;
    }

    select.form-control {
        padding-right: 30px;
    }

    /* 체크박스/라디오 확대 */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    /* 체크박스 레이블 */
    .checkbox label,
    .radio label {
        padding-left: 30px;
        min-height: 30px;
        line-height: 30px;
    }

    /* 드롭다운 아이템 */
    .dropdown-menu > li > a {
        padding: 14px 20px;
        font-size: 14px;
    }

    /* 페이지네이션 */
    .pagination > li > a,
    .pagination > li > span {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* 탭 */
    .nav-tabs > li > a {
        padding: 14px 20px;
    }

    /* 모달 닫기 버튼 */
    .modal-header .close {
        font-size: 28px;
        padding: 15px;
        margin: -15px -15px -15px auto;
    }

    /* 테이블 행 */
    .table > tbody > tr > td,
    .table > thead > tr > th {
        padding: 12px 10px;
    }

    /* 그리드 테이블 */
    .grid-table tbody td {
        padding: 12px 8px;
    }

    /* 클릭 가능 요소 명시 */
    .clickable,
    .folder-link,
    [data-toggle],
    [onclick] {
        cursor: pointer;
        position: relative;
    }

    /* 터치 시 시각적 피드백 */
    .btn:active,
    .dropdown-menu > li > a:active,
    .pagination > li > a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ========================================
   2. 모바일 레이아웃 (768px 이하)
   ======================================== */

@media screen and (max-width: 768px) {
    /* 네비게이션 바 */
    #navbar {
        position: fixed;
        width: 100%;
        z-index: 1030;
    }

    #navbar-container {
        padding: 0 10px;
    }

    .navbar-brand {
        max-width: 60%;
    }

    .navbar-brand .brand-title {
        font-size: 14px;
    }

    .navbar-brand .kr-brand-text {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-content {
        display: flex;
        align-items: center;
    }

    /* 환영 메시지 숨기기 */
    .navbar-top-links li:not(#dropdown-user) {
        display: none;
    }

    #dropdown-user {
        display: block;
    }

    /* 상단 메뉴 */
    #top-menu {
        position: fixed;
        top: 58px;
        width: 100%;
        z-index: 1020;
        overflow: visible;
    }

    /* 햄버거 메뉴 버튼 */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 1001;
        border-radius: 4px;
        background: rgba(255,255,255,0.1);
    }

    .mobile-menu-toggle:active {
        background: rgba(255,255,255,0.2);
    }

    /* 메뉴 숨김 기본 */
    #top-menu .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: #2B5797;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    #top-menu .nav.show {
        display: flex;
    }

    #top-menu .nav > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #top-menu .nav > li > a {
        padding: 15px 20px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #top-menu .nav > li > a .caret {
        margin-left: auto;
        transition: transform 0.2s;
    }

    #top-menu .nav > li.open > a .caret {
        transform: rotate(180deg);
    }

    /* 서브메뉴 */
    #top-menu .sub-menu {
        position: static;
        display: none;
        width: 100%;
        background: #1E3D6F;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    #top-menu .nav > li.open .sub-menu {
        display: block;
    }

    #top-menu .sub-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    #top-menu .sub-menu li a {
        color: #fff;
        padding: 14px 20px 14px 45px;
        font-size: 14px;
        display: block;
    }

    #top-menu .sub-menu li a:active {
        background: rgba(255,255,255,0.1);
    }

    /* 콘텐츠 영역 */
    #content-container {
        padding-top: 115px; /* navbar(58) + top-menu(57) */
    }

    .boxed {
        padding: 0 8px;
    }

    /* 패널 */
    .panel {
        margin-bottom: 15px;
        border-radius: 4px;
    }

    .panel-heading {
        padding: 12px 15px;
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* 패널 컨트롤 버튼 */
    .panel-control {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
        position: static;
        float: none !important;
    }

    .panel-control .btn {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* 아이콘만 있는 버튼은 작게 */
    .panel-control .btn i:only-child {
        margin: 0;
    }

    .panel-control .btn:has(i:only-child) {
        flex: 0 0 auto;
        min-width: 40px;
    }

    .panel-body {
        padding: 12px;
    }

    /* 검색바 */
    .search-bar {
        padding: 10px;
    }

    .search-bar .row {
        margin: 0;
    }

    .search-bar .input-group {
        width: 100%;
        margin-bottom: 10px;
        flex-wrap: nowrap;
    }

    .search-bar .input-group .search-bar-label {
        min-width: 70px;
        max-width: 80px;
        font-size: 11px;
        padding: 8px 6px;
        flex-shrink: 0;
    }

    .search-bar .input-group .search-bar-label i {
        display: none;
    }

    .search-bar .input-group .form-control,
    .search-bar .input-group .selectpicker,
    .search-bar .input-group select {
        flex: 1;
        width: auto !important;
        min-width: 0;
    }

    .search-bar .btn-group.pull-right {
        float: none !important;
        width: 100%;
        display: flex;
        gap: 8px;
        margin-top: 5px;
    }

    .search-bar .btn-group .btn {
        flex: 1;
        min-height: 44px;
    }

    /* 그리드 컨테이너 */
    .grid-container,
    [id$="Grid"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 페이지네이션 */
    .page-container {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .page-container .box-inline {
        width: 100%;
    }

    .page-container .pagination {
        justify-content: center;
    }

    .page-container .dropdown {
        width: 100%;
    }

    .page-container .dropdown .btn {
        width: 100%;
    }
}

/* ========================================
   3. 소형 모바일 (576px 이하)
   ======================================== */

@media screen and (max-width: 576px) {
    body {
        font-size: 13px;
    }

    /* 네비게이션 */
    .navbar-brand {
        max-width: 50%;
    }

    .navbar-brand .kr-brand-text {
        font-size: 13px;
    }

    .navbar-brand .brand-logo {
        font-size: 24px !important;
    }

    /* 패널 버튼 그룹 */
    .panel-control .btn {
        min-width: calc(33.33% - 6px);
        font-size: 11px;
        padding: 6px 8px;
    }

    /* 버튼 텍스트 숨기고 아이콘만 (선택적) */
    .panel-control .btn-icon-only .btn-text {
        display: none;
    }

    /* 검색바 */
    .search-bar .input-group .search-bar-label {
        min-width: 55px;
        font-size: 10px;
    }

    /* 모달 전체화면 */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
    }

    .modal-header {
        padding: 15px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
    }

    .modal-body {
        padding: 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 15px;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 10;
    }

    /* 모달 내 폼 */
    .modal-body .form-group {
        margin-bottom: 15px;
    }

    .modal-body label {
        font-size: 13px;
        margin-bottom: 5px;
    }

    /* 통계 카드 */
    .stat-card,
    .panel-stat {
        padding: 12px;
    }

    .stat-card h3,
    .panel-stat h3 {
        font-size: 20px;
    }
}

/* ========================================
   4. PQGrid 모바일 최적화
   ======================================== */

@media screen and (max-width: 992px) {
    /* PQGrid 컨테이너 */
    .pq-grid-cont,
    .pq-grid {
        font-size: 12px;
    }

    /* 그리드 헤더 */
    .pq-grid-header {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .pq-grid-header-table th {
        padding: 10px 6px;
        font-size: 11px;
    }

    /* 그리드 바디 - 가로 스크롤 */
    .pq-grid-cont {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 최소 너비 설정 */
    .pq-grid-table {
        min-width: 800px;
    }

    /* 셀 패딩 */
    .pq-grid-cell {
        padding: 8px 6px;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* 터치 기기에서 그리드 셀 */
    .pq-grid-cell {
        padding: 12px 8px;
        min-height: 44px;
    }

    /* 체크박스 컬럼 */
    .pq-grid-cell input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    /* 그리드 내 버튼 */
    .pq-grid-cell .btn {
        min-height: 36px;
        padding: 6px 10px;
    }

    /* 클릭 가능한 셀 */
    .pq-grid-cell .folder-link,
    .pq-grid-cell a {
        padding: 4px 0;
        display: inline-block;
    }

    /* 셀 편집 */
    .pq-grid-cell .pq-editor-inner {
        min-height: 36px;
        font-size: 14px;
    }

    /* 그리드 행 선택 */
    .pq-grid-row.pq-state-select {
        background: rgba(37, 71, 106, 0.15);
    }
}

/* ========================================
   5. 스와이프/제스처 지원
   ======================================== */

/* 스와이프 가능 영역 표시 */
.swipeable {
    position: relative;
    overflow: hidden;
}

.swipeable::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 30px;
    height: 4px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.swipeable:hover::after,
.swipeable:focus::after {
    opacity: 1;
}

/* 스와이프 액션 버튼 */
.swipe-actions {
    position: absolute;
    top: 0;
    right: -120px;
    height: 100%;
    display: flex;
    transition: right 0.3s ease;
}

.swipe-actions.show {
    right: 0;
}

.swipe-actions .btn {
    width: 60px;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pull-to-refresh 영역 */
.pull-to-refresh {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    transition: transform 0.3s;
}

.pull-to-refresh.pulling {
    transform: translateY(50px);
}

.pull-to-refresh i {
    margin-right: 8px;
    transition: transform 0.3s;
}

.pull-to-refresh.ready i {
    transform: rotate(180deg);
}

/* ========================================
   6. 가로 모드 (Landscape)
   ======================================== */

@media screen and (max-width: 900px) and (orientation: landscape) {
    /* 상단 영역 최소화 */
    #navbar {
        height: 48px;
    }

    #top-menu {
        top: 48px;
    }

    #content-container {
        padding-top: 100px;
    }

    /* 검색바 가로 배치 */
    .search-bar .input-group {
        width: 48%;
        display: inline-flex;
        margin-right: 2%;
    }

    /* 그리드 높이 조정 */
    .pq-grid-cont,
    [id$="Grid"] {
        max-height: calc(100vh - 200px);
    }

    /* 모달 */
    .modal-dialog {
        max-height: 90vh;
        margin: 5vh auto;
    }

    .modal-body {
        max-height: calc(90vh - 130px);
        overflow-y: auto;
    }
}

/* ========================================
   7. 접근성 개선
   ======================================== */

/* 포커스 스타일 강화 */
@media (hover: none) and (pointer: coarse) {
    .btn:focus,
    .form-control:focus,
    a:focus {
        outline: 3px solid rgba(37, 71, 106, 0.5);
        outline-offset: 2px;
    }

    /* 비활성 상태 명확히 */
    .btn.disabled,
    .btn:disabled {
        opacity: 0.5;
        pointer-events: none;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .form-control {
        border-width: 2px;
    }

    .pq-grid-cell {
        border-width: 2px;
    }
}

/* 모션 감소 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .swipe-actions,
    .pull-to-refresh {
        transition: none;
    }
}

/* ========================================
   8. 모바일 유틸리티 클래스
   ======================================== */

/* 모바일에서만 표시 */
.mobile-only {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-only-inline {
        display: inline !important;
    }

    .mobile-only-flex {
        display: flex !important;
    }

    /* 데스크탑에서만 표시 */
    .desktop-only {
        display: none !important;
    }

    /* 모바일에서 숨기기 */
    .mobile-hide {
        display: none !important;
    }
}

/* 터치 스크롤 */
.touch-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.touch-scroll > * {
    scroll-snap-align: start;
}

/* 모바일 패딩 */
@media screen and (max-width: 768px) {
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: 5px !important; }
    .mobile-p-2 { padding: 10px !important; }
    .mobile-p-3 { padding: 15px !important; }

    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: 5px !important; }
    .mobile-m-2 { margin: 10px !important; }
    .mobile-m-3 { margin: 15px !important; }

    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }

    .mobile-full-width { width: 100% !important; }
}

/* ========================================
   9. 로딩 스피너 모바일 최적화
   ======================================== */

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

#loadingOverlay .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ========================================
   10. 플로팅 액션 버튼 (FAB)
   ======================================== */

.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2B5797;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.fab:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.fab-menu {
    position: fixed;
    bottom: 85px;
    right: 20px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
}

.fab-menu.show {
    display: flex;
}

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fab-menu-item .btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-menu-item .fab-label {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

@media screen and (min-width: 769px) {
    .fab,
    .fab-menu {
        display: none !important;
    }
}