/* ==========================================================================
   Mobile Responsive Styles
   Breakpoints: mobile(~767px) | tablet(768~1023px) | desktop(1024px+)
   ========================================================================== */

/* ── Hamburger Button (모바일 전용) ───────────────────────────────────── */
.mobile-header-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 56px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.mobile-header-bar .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.mobile-header-bar .mobile-brand i {
    color: var(--primary);
    font-size: 18px;
}

.hamburger-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ── Sidebar Overlay (모바일에서 사이드바 열릴 때 배경) ────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 149;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* ── Tablet (768px ~ 1023px) ──────────────────────────────────────────── */
@media (max-width: 1023px) {
    .sidebar {
        width: 218px;
    }
    .main-content {
        margin-left: 218px;
        padding: 16px 20px;
    }
    .brand-text h2 { font-size: 13px; }
    .brand-text p  { font-size: 10px; }


    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .grid-2-col {
        grid-template-columns: 1fr;
    }
    .form-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .header-left h1 {
        font-size: 18px;
    }
    /* 헤더 버튼 일부 숨기기 */
    #btn-print-ledger-quick span,
    #btn-export-excel-quick span {
        display: none;
    }
}

/* ── Mobile (~ 767px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* 모바일 상단 헤더 바 표시 */
    .mobile-header-bar {
        display: flex;
    }

    /* 사이드바: 오프캔버스로 전환 */
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 150;
        top: 0;
        bottom: 0;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* 메인 컨텐츠: 사이드바 여백 제거, 상단 56px 확보 */
    .main-content {
        margin-left: 0;
        padding: 72px 12px 80px 12px;
    }

    /* 상단 헤더 간소화 */
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .header-left h1 {
        font-size: 16px;
        letter-spacing: -0.3px;
    }

    .header-left .today-date {
        font-size: 11px;
    }

    .header-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .header-right .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 11.5px;
        padding: 8px 10px;
        min-height: 40px;
    }

    /* 텍스트 라벨 숨기기 (아이콘만 표시) */
    #btn-print-ledger-quick .btn-label-text,
    #btn-export-excel-quick .btn-label-text {
        display: none;
    }

    /* 버튼 터치 영역 확보 */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
    }

    /* 메트릭 카드 1열 */
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .metric-card {
        padding: 12px 14px;
    }

    .metric-card .value-row h3 {
        font-size: 20px !important;
    }

    /* 대시보드 그리드 1열 */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* 폼 그리드 1열 */
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
    .form-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* 카드 패딩 축소 */
    .glass-card .card-body {
        padding: 14px 12px;
    }

    .glass-card .card-header {
        padding: 12px 14px;
    }

    /* 액션바 세로 스택 */
    .action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
    }

    .search-filters {
        flex-direction: column;
        width: 100%;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group .form-control {
        flex: 1;
        width: 100%;
        height: 40px;
    }

    .action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .action-buttons .btn {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }

    /* 테이블 모바일 처리 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .custom-table {
        font-size: 11.5px;
        min-width: 600px;
    }

    .custom-table th,
    .custom-table td {
        padding: 8px 10px;
    }

    /* 모달 전체화면 */
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    .modal-dialog {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-header h3 {
        font-size: 14px;
    }

    .modal-body {
        padding: 14px 16px;
    }

    /* 알림 드로어 전체 너비 */
    .alert-drawer {
        width: 100%;
        right: -100%;
    }

    /* 폼 컨트롤 터치 친화 */
    .form-control {
        height: 42px;
        font-size: 14px; /* iOS 자동확대 방지 */
    }

    select.form-control,
    textarea.form-control {
        font-size: 14px;
    }

    /* 파일 드롭존 */
    .file-drop-zone {
        padding: 24px 16px;
    }

    /* 사진 그리드 1열 */
    .photo-preview-grid {
        grid-template-columns: 1fr;
    }

    /* 탭 컨텐츠 패딩 */
    .tab-content-container {
        padding-bottom: 16px;
    }

    /* 하단 고정 모바일 탭바 */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--bg-sidebar);
        border-top: 1px solid var(--border-color);
        z-index: 130;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-bottom-nav .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: transparent;
        border: none;
        color: var(--text-dim);
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        flex: 1;
        height: 100%;
        transition: color 0.2s ease;
        padding: 4px 2px;
    }

    .mobile-bottom-nav .mobile-nav-btn i {
        font-size: 18px;
    }

    .mobile-bottom-nav .mobile-nav-btn.active {
        color: var(--primary);
    }

    .mobile-bottom-nav .mobile-nav-btn .nav-dot {
        width: 5px;
        height: 5px;
        background: var(--primary);
        border-radius: 50%;
        display: none;
    }

    .mobile-bottom-nav .mobile-nav-btn.active .nav-dot {
        display: block;
    }

    /* 사이드바 내부: 모바일 닫기 버튼 */
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-close-btn button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 20px;
        cursor: pointer;
        padding: 6px;
    }

    /* brand 영역에 모바일 닫기 포함 */
    .brand {
        padding: 16px 14px;
        justify-content: space-between;
    }
}

/* ── 초소형 화면 (~ 380px) ───────────────────────────────────────────── */
@media (max-width: 380px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
    .header-right .btn {
        font-size: 10.5px;
        padding: 7px 8px;
    }
    .metric-card .value-row h3 {
        font-size: 18px !important;
    }
}

/* ── 데스크탑: 모바일 전용 요소 숨기기 ──────────────────────────────── */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none;
    }
    .sidebar-overlay {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-header-bar {
        display: none !important;
    }
    .sidebar {
        transform: none !important;
    }
    .sidebar-close-btn {
        display: none;
    }
}


/* Xiaoxin Pad Pro 12.7 & High-Res Android Tablet Optimization */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    .sidebar {
        width: 240px !important;
        flex-shrink: 0;
    }
    .main-content {
        padding: 20px !important;
        overflow-x: hidden;
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .modal-content {
        max-width: 90% !important;
        margin: 20px auto !important;
    }
}