/* =========================================
   Mobile Optimization Styles (max-width: 768px)
   PC 디자인 컨셉 유지 + 모바일 최적화
   ========================================= */

/* ─────────────────────────────────────────
   1. GLOBAL
───────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
}
.main-content {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ─────────────────────────────────────────
   2. HEADER (헤더 슬림화 — 모바일 전용)
───────────────────────────────────────── */
.header {
    height: 52px !important;
    padding: 0 12px !important;
}
.header-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
/* 제목 앞 세로바 숨김 (PC 스타일 ::before 무효화) */
.header-title::before {
    display: none !important;
}
/* 모바일에서는 .user-profile 을 헤더 우측에 표시 */
.user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.header-username {
    display: none !important;    /* 이름은 공간 부족으로 숨김 */
}
/* 로그아웃 버튼 */
.user-profile .btn-danger {
    padding: 5px 11px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────
   3. SIDEBAR & HAMBURGER
───────────────────────────────────────── */
.hamburger {
    display: block !important;
    font-size: 26px;
    cursor: pointer;
    margin-right: 15px;
    color: var(--text-main);
    padding: 8px;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
}
.sidebar-overlay.open {
    display: block;
}
.sidebar {
    position: fixed;
    top: 0; left: -280px;
    height: 100vh;
    width: 230px;
    z-index: 1001;
    transition: left 0.28s cubic-bezier(0.4,0,0.2,1);
    display: flex !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}
.sidebar.open {
    left: 0;
}
.nav-links li a {
    padding: 13px 20px !important;
    font-size: 0.88rem !important;
}

/* ─────────────────────────────────────────
   4. HIDE NON-ESSENTIAL
───────────────────────────────────────── */
.mobile-hide {
    display: none !important;
}

/* ─────────────────────────────────────────
   5. PAGE BODY PADDING
───────────────────────────────────────── */
.page-body,
.main-content > main > .page-body {
    padding: 12px !important;
}
.dashboard-grid,
.main-content > div {
    padding: 12px !important;
    gap: 10px !important;
}

/* ─────────────────────────────────────────
   6. KPI CARD GRID — 핵심 개선: 2×2 그리드
───────────────────────────────────────── */
.dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* 2열 그리드 */
    gap: 10px !important;
    flex-direction: unset !important;            /* mobile.css 이전 flex 무효화 */
}

/* KPI 4개 카드: 컴팩트한 크기 */
.dashboard-grid > .card:not(.full-width) {
    padding: 12px 14px !important;
    border-radius: 10px !important;
}
/* 카드 제목 (총 가용 자산 등) */
.dashboard-grid > .card:not(.full-width) h3 {
    font-size: 0.72rem !important;
    margin-bottom: 6px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 카드 숫자 값 — 화면 크기에 비례해서 자동 조절 */
.dashboard-grid > .card:not(.full-width) .value {
    font-size: clamp(0.72rem, 3.8vw, 1.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Full-width 카드는 2열 모두 차지 */
.dashboard-grid > .card.full-width {
    grid-column: 1 / -1 !important;
    padding: 14px !important;
    border-radius: 10px !important;
}
.dashboard-grid > .card.full-width .section-title {
    font-size: 0.88rem !important;
    margin-bottom: 10px !important;
}

/* 일반 카드 */
.card {
    padding: 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* ─────────────────────────────────────────
   7. TABLE — 모바일 최적화
───────────────────────────────────────── */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    margin-top: 6px;
}
.table {
    min-width: unset !important;
    font-size: 0.74rem !important;
}
.table th, .table td {
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
    white-space: nowrap;
    line-height: 1.2 !important;
}
/* 테이블 내 인라인 버튼 */
.table .btn,
.table .btn-outline,
.table .btn-danger,
.table .btn-sm,
.btn-list-action {
    padding: 3px 7px !important;
    font-size: 0.7rem !important;
    height: auto !important;
    min-width: 32px !important;
}

/* 거래처명 등 긴 텍스트 모바일 자수 제한 */
#vendorList td:nth-child(2),
#tx-tbody td:nth-child(4),
#unmatchedList td:nth-child(2),
#pendingList td:nth-child(2) {
    max-width: 26vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────
   8. BUTTONS — 크기 재정의 (색상 유지)
───────────────────────────────────────── */
/* 주요 액션 버튼 — 전폭, 적당한 높이 */
.btn-action,
.btn-submit,
button[type="submit"] {
    width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 7px 14px !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    margin-top: 6px;
    border-radius: 7px !important;
    line-height: 1.2 !important;
}
/* 보조 버튼(취소) */
.btn-cancel {
    width: 100% !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    margin-top: 4px;
}
/* 예외: 테이블·섹션헤더 인라인 버튼 */
.table .btn-action,
.section-header .btn-action {
    width: auto !important;
    min-height: unset !important;
    margin-top: 0;
    padding: 4px 9px !important;
    font-size: 0.76rem !important;
}
/* 모달 내 업로드 버튼 */
#editTxModal .btn-action[onclick="uploadAttachments()"],
#txModal .btn-action[onclick="uploadAttachments()"] {
    width: 68px !important;
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 0.76rem !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}
/* 모달 하단 저장/삭제 버튼 */
#editTxModal .modal-footer .btn-action {
    min-height: 38px !important;
    font-size: 0.86rem !important;
    margin-top: 0 !important;
}

/* ─────────────────────────────────────────
   9. SECTION HEADER
───────────────────────────────────────── */
.section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}
.section-header > div {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.section-header .btn-action {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    text-align: center !important;
    justify-content: center !important;
    width: auto !important;
}

/* 예외: 입출금 내역 등 헤더는 제목+버튼 가로 나란히 유지 */
.mobile-flex-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin-bottom: 10px !important;
}
.section-header.mobile-flex-header .btn-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    margin-top: 0 !important;
    line-height: 32px !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────
   10. MODAL
───────────────────────────────────────── */
.modal-content {
    width: 96% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    max-height: 92vh !important;
    overflow-y: auto;
    border-radius: 14px !important;
}
.modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.modal-close {
    font-size: 1.3rem !important;
    min-width: 34px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────
   11. FORMS
───────────────────────────────────────── */
.form-group {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    margin-bottom: 10px !important;
}
.form-group label,
.form-label {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
}
.form-control {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 9px 10px !important;
}
#txForm, #editTxForm,
#quickExpenseForm, #quickIncomeForm {
    flex-direction: column !important;
    align-items: stretch !important;
}
div[style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
}
select.form-control,
input.form-control {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* 예외: 날짜 범위 등 가로로 배치되어야 하는 폼 컨트롤 */
.filter-bar input[type="date"].form-control,
div[style*="align-items: center"][style*="gap: 5px"] > input.form-control {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* ─────────────────────────────────────────
   12. ALERT / NOTIFICATION CARD
───────────────────────────────────────── */
#recurring-alert {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
}
#recurring-alert .btn-action {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 0 !important;
}

/* ─────────────────────────────────────────
   13. CHART WRAPPERS
───────────────────────────────────────── */
/* 차트+테이블 부모 컨테이너 → 세로 스택 + 중앙 정렬 */
.dashboard-grid .card.full-width > div > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}
.chart-wrapper {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
    position: relative !important;
    flex: none !important;
    display: block !important;
}
.cost-table-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* ─────────────────────────────────────────
   14. TABS
───────────────────────────────────────── */
.tab-btn {
    font-size: 0.8rem !important;
    padding: 7px 8px !important;
}

/* ─────────────────────────────────────────
   16. 입출금 관리 — 필터바 모바일 레이아웃
───────────────────────────────────────── */
/* 필터 전체 컨테이너를 세로 스택으로 */
#filter_date,
#filter_type,
#filter_account,
#filter_search {
    width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
/* 기간 직접설정 날짜 입력 박스도 전폭 */
#custom_date_range,
.mobile-date-range {
    width: 100% !important;
    flex-direction: row !important;   /* ~ 표시는 가로 유지 */
    justify-content: space-between !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}
#custom_date_range input.form-control,
.mobile-date-range input.form-control {
    width: calc(50% - 10px) !important;
    flex: none !important;
    min-width: 0 !important;
}
/* 필터 상위 flex 컨테이너 → 세로 스택 */
.card .section-header ~ div[style*="display: flex"],
div[style*="flex-wrap: wrap"][style*="background: #fafafa"] {
    flex-direction: column !important;
    padding: 10px !important;
    gap: 8px !important;
}
/* 날짜 선택 드롭다운과 기간 입력이 같은 행에 있던 div도 세로로 */
div[style*="display: flex"][style*="align-items: center"] > div[style*="display: flex"][style*="gap: 5px"] {
    flex-direction: column !important;
    width: 100% !important;
}
/* 가로 스크롤 완전 차단 */
.page-body,
.card.full-width {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
.table-container {
    overflow-x: auto !important;     /* 테이블 자체만 스크롤 허용 */
    max-width: 100% !important;
}

/* ─────────────────────────────────────────
   17. 모달 내 구분·보조금·금액 행 — 금액 줄바꿈
───────────────────────────────────────── */
/* 구분 + 보조금 사업 + 금액이 있는 flex row */
#editTxForm .form-group[style*="display: flex"],
#txForm .form-group[style*="display: flex"] {
    flex-wrap: wrap !important;
}
/* 구분, 보조금 사업: 각 절반 */
#editTxForm .form-group[style*="display: flex"] > div[style*="flex: 1"],
#txForm .form-group[style*="display: flex"] > div[style*="flex: 1"] {
    flex: 1 1 40% !important;
    min-width: 0 !important;
}
/* 금액(원) 칸: 다음 줄 전폭 */
#editTxForm .form-group[style*="display: flex"] > div[style*="flex: 2"],
#txForm .form-group[style*="display: flex"] > div[style*="flex: 2"] {
    flex: 1 1 100% !important;    /* 다음 줄로 내려서 전폭 */
    min-width: 0 !important;
}


/* iOS Date Placeholder Fix */
input[type="date"].form-control {
    position: relative;
}
input[type="date"].form-control::-webkit-datetime-edit {
    color: transparent;
}
input[type="date"].form-control:focus::-webkit-datetime-edit,
input[type="date"].form-control:valid::-webkit-datetime-edit {
    color: var(--text-main) !important;
}
input[type="date"].form-control::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #999;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
input[type="date"].form-control:focus::before,
input[type="date"].form-control:valid::before {
    display: none;
}