/* assets/css/import.css — CSV 가져오기 기능 전용 스타일 */
/* 다크모드 CSS 변수 기반 – 하드코딩 배경/글자색 최소화 */

/* ============================================================
   업로드 페이지
   ============================================================ */
.import-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.import-upload-zone {
    border: 2px dashed var(--color-border);
    border-radius: 10px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--color-bg-alt, #f8f9fa);
    margin-bottom: 1rem;
}
.import-upload-zone:hover,
.import-upload-zone.drag-over {
    border-color: var(--color-primary, #4e73df);
    background: color-mix(in srgb, var(--color-primary, #4e73df) 8%, transparent);
}
.import-upload-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.import-upload-text { color: var(--color-muted); font-size: 0.9rem; margin: 0.25rem 0; }
.import-upload-filename {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--color-primary, #4e73df);
    font-size: 0.9rem;
}

.import-options-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.import-btn-submit {
    min-width: 160px;
}

/* 샘플 컬럼 안내 */
.import-sample-box {
    background: var(--color-bg-alt, #f8f9fa);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}
.import-sample-box code {
    display: block;
    background: var(--color-code-bg, #eee);
    color: var(--color-code-text, #333);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-family: 'Consolas', monospace;
    overflow-x: auto;
    white-space: pre;
}

/* import 이력 테이블 */
.import-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.import-history-table th,
.import-history-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.import-history-table th {
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-bg-alt, #f8f9fa);
    white-space: nowrap;
}
.import-history-table tr:last-child td { border-bottom: none; }

/* ============================================================
   미리보기 / 컬럼 매핑 페이지
   ============================================================ */
.import-preview-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* 컬럼 매핑 그리드 */
.mapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.mapping-item label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
}
.mapping-item label .required-star { color: var(--color-expense, #e74a3b); }
.mapping-item select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.85rem;
}

/* 미리보기 통계 요약 */
.preview-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}
.preview-stat-box {
    flex: 1 1 130px;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    background: var(--color-bg-alt, #f8f9fa);
    border: 1px solid var(--color-border);
}
.preview-stat-box .stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}
.preview-stat-box .stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
}
.stat-ok    { color: var(--color-income,  #1cc88a); }
.stat-err   { color: var(--color-expense, #e74a3b); }
.stat-dup   { color: #f6c23e; }
.stat-newcat{ color: var(--color-primary, #4e73df); }

/* 미리보기 테이블 */
.preview-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 750px;
}
.preview-table th {
    padding: 0.55rem 0.7rem;
    background: var(--color-bg-alt, #f8f9fa);
    color: var(--color-muted);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--color-border);
}
.preview-table td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}
.preview-table tr:last-child td { border-bottom: none; }

/* 행 상태별 배경 */
.row-ok       { /* 기본 */ }
.row-error    { background: color-mix(in srgb, var(--color-expense, #e74a3b) 8%, transparent); }
.row-duplicate{ background: color-mix(in srgb, #f6c23e 10%, transparent); }
.row-new-cat  { background: color-mix(in srgb, var(--color-primary, #4e73df) 6%, transparent); }

/* 상태 뱃지 */
.badge-ok       { background: #1cc88a; color: #fff; }
.badge-error    { background: var(--color-expense, #e74a3b); color: #fff; }
.badge-duplicate{ background: #f6c23e; color: #333; }
.badge-new-cat  { background: var(--color-primary, #4e73df); color: #fff; }
.badge-asset-na { background: #adb5bd; color: #fff; }

.preview-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.error-hint {
    font-size: 0.72rem;
    color: var(--color-expense, #e74a3b);
    display: block;
    margin-top: 0.2rem;
}

/* 금액 컬럼 */
.amt-income  { color: var(--color-income,  #1cc88a); font-weight: 700; }
.amt-expense { color: var(--color-expense, #e74a3b); font-weight: 700; }

/* 하단 버튼 영역 */
.import-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.import-duplicate-opt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ============================================================
   알림 박스
   ============================================================ */
.import-alert {
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.import-alert-danger {
    background: color-mix(in srgb, var(--color-expense, #e74a3b) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-expense, #e74a3b) 40%, transparent);
    color: var(--color-text);
}
.import-alert-success {
    background: color-mix(in srgb, var(--color-income, #1cc88a) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-income, #1cc88a) 40%, transparent);
    color: var(--color-text);
}
.import-alert-info {
    background: color-mix(in srgb, var(--color-primary, #4e73df) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary, #4e73df) 35%, transparent);
    color: var(--color-text);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 640px) {
    .mapping-grid { grid-template-columns: 1fr 1fr; }
    .preview-stats-row { gap: 0.5rem; }
    .preview-stat-box { flex: 1 1 100px; padding: 0.6rem 0.3rem; }
    .preview-stat-box .stat-num { font-size: 1.2rem; }
    .import-action-bar { flex-direction: column; align-items: stretch; }
    .import-action-bar .btn { width: 100%; text-align: center; }
    .import-history-table { font-size: 0.78rem; }
    .import-history-table th:nth-child(4),
    .import-history-table td:nth-child(4),
    .import-history-table th:nth-child(7),
    .import-history-table td:nth-child(7) { display: none; } /* 좁은 화면에서 덜 중요한 열 숨김 */
}

@media (max-width: 400px) {
    .mapping-grid { grid-template-columns: 1fr; }
}