/* ============================================================
   이관 예약 관리 (Migration Pool)
   - 공용 클래스(page_body / dtable_* / inv_filter / or_stats / btn_*)는
     components.css·layouts.css를 그대로 재사용하고,
     이 파일에는 이관 예약 고유 스타일만 정의한다.
   ============================================================ */

/* ── 체크박스 크기 + 셀 내 중앙 정렬 ──────────── */
.mp_checkbox {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  margin: 0 auto;
}

/* ── 필터 바 검색 (공통 패턴) ─────────────────── */
.inv_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

.inv_filter_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.dark .inv_filter_search_icon {
  color: var(--c-text-2);
}

/* ── 필터 바: 검색 인풋 높이를 셀렉트와 통일 ──── */
.inv_filter_search .form_input {
  padding-left: 2.5rem;
  height: 2.375rem;
}

/* ── 업로드 팝오버 ──────────────────────────── */
.mp_upload_wrap {
  position: relative;
}

.mp_upload_popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 24rem;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dark .mp_upload_popover {
  background-color: var(--c-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.mp_upload_popover_desc {
  font-size: 0.8125rem;
  color: var(--c-text-2);
  margin: 0;
}

.mp_upload_popover_field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* 팝오버 내 힌트: 컴팩트 사이즈 + 아이콘 정렬 */
.mp_upload_popover .field_hint.is_boxed.mp_upload_popover_hint {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.5rem 0.625rem;
}

.mp_upload_popover_hint svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.mp_upload_popover_btn {
  width: 100%;
}

/* ── 액션 버튼 (무시 / 삭제) 높이 통일 ────────── */
.mp_action_btn {
  height: 2.375rem;
}

/* ── 상태 뱃지 (dtable_badge 확장) ──────────── */
.dtable_badge.is_pending {
  background-color: var(--c-red-400);
  color: #fff;
}

.dtable_badge.is_matched {
  background-color: var(--c-success);
  color: #fff;
}

.dtable_badge.is_ignored {
  background-color: var(--c-warning-light);
  color: #fff;
}

.dark .dtable_badge.is_ignored {
  background-color: var(--c-warning);
}

/* ── 업로드 결과 모달: 요약 카운트 색상 ─────────── */
.mp_result_count {
  font-weight: 700;
}

.mp_result_count.is_success {
  color: #059669;
}

.mp_result_count.is_warning {
  color: #d97706;
}

.mp_result_count.is_error {
  color: #dc2626;
}

.dark .mp_result_count.is_success {
  color: #34d399;
}

.dark .mp_result_count.is_warning {
  color: #fbbf24;
}

.dark .mp_result_count.is_error {
  color: #f87171;
}

/* ── 스킵 카드 리스트 ──────────────────────────── */
.mp_skip_list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 0.375rem;
}

.mp_skip_card {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
}

.dark .mp_skip_card {
  background: var(--c-surface-1);
  border-color: var(--c-line);
}

/* ── 카드 1행: 뱃지 + 지점명 + 행번호(우측) ────── */
.mp_skip_card_main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp_skip_badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
}

.mp_skip_badge.is_dup {
  background-color: var(--c-warning-light);
}

.mp_skip_badge.is_error {
  background-color: var(--c-red-400);
}

.dark .mp_skip_badge.is_dup {
  background-color: var(--c-warning);
}

.mp_skip_card_row {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-text-2);
}

.mp_skip_card_hotel {
  font-size: 0.8125rem;
  color: var(--c-text-2);
  letter-spacing: 0.01em;
}

/* ── 카드 2행: 상세 정보 ───────────────────────── */
.mp_skip_card_detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--c-text-2);
}

.mp_skip_card_detail strong {
  color: var(--c-text-1);
  font-weight: 600;
}

/* ── 카드 3행: 스킵 사유 ───────────────────────── */
.mp_skip_card_reason {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text-2);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── dtable nowrap (날짜 등 줄바꿈 방지) ────────── */
.dtable_td.is_nowrap {
  white-space: nowrap;
}

/* ── 상태 / 취소여부 컬럼 폭 ──────────────── */
/* 상태: '매칭완료' 4자 뱃지(약 65px) + td 좌우 패딩 32px 기준 */
.dtable_th.mp_col_status {
  width: 104px;
}

/* 취소여부: '취소여부' 헤더 4자(약 56px) + td 좌우 패딩 32px 기준 */
.dtable_th.mp_col_cancel {
  width: 96px;
}

/* ── 취소여부 셀 ─────────────────────────── */
/* 다른 셀과 동일한 본문 + dtable_sub 2행 구조.
   한눈에 걸러지도록 '취소' 글자만 붉은색 */
.mp_cancel_label {
  color: var(--c-red-600);
}

.dark .mp_cancel_label {
  color: var(--c-red-400);
}
/* =============================================
   CSV 업로드 미리보기 모달 (mp_pv_*)
   업로드 결과 모달(mp_skip_*)과 동일한 컨벤션 —
   색상은 전부 토큰 사용, 다크모드는 .dark 로 오버라이드
   ============================================= */

.mp_pv_modal {
  max-width: 1200px;
  width: 95%;
}

/* ── 상단 요약 카드 ───────────────────────── */
.mp_pv_summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mp_pv_summary_cell {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  text-align: center;
}

.dark .mp_pv_summary_cell {
  background: var(--c-surface-1);
}

.mp_pv_summary_label {
  font-size: 0.6875rem;
  color: var(--c-text-3);
}

.mp_pv_summary_value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.mp_pv_summary_value.is_total {
  font-weight: 700;
}

.mp_pv_summary_value.is_auto {
  color: var(--c-success);
}

.mp_pv_summary_value.is_pending {
  color: var(--c-primary-500);
}

.mp_pv_summary_value.is_pool {
  color: var(--c-text-2);
}

.mp_pv_summary_value.is_multi {
  color: var(--c-warning);
}

.mp_pv_summary_value.is_dup,
.mp_pv_summary_value.is_dup_batch,
.mp_pv_summary_value.is_skip {
  color: var(--c-text-3);
}

/* ── 액션 바 (선택 버튼 + 상태 필터) ───────── */
.mp_pv_actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.mp_pv_filter {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.mp_pv_filter_select.form_input {
  height: 32px;
  min-width: 140px;
}

/* ── 표 ───────────────────────────────────── */
.mp_pv_table_wrap {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.mp_pv_table {
  width: 100%;
  font-size: 0.8125rem;
}

.mp_pv_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-gray-50);
}

.dark .mp_pv_table thead {
  background: var(--c-surface-2);
}

/* 컬럼 폭 — 체크 / # / 지점 / 계약호실 / 수분양자 / owner / 투숙자 / 기간 / 액션 (사유는 잔여폭) */
.mp_pv_table th:nth-child(1) { width: 34px; }
.mp_pv_table th:nth-child(2) { width: 44px; }
.mp_pv_table th:nth-child(3) { width: 96px; }
.mp_pv_table th:nth-child(4) { width: 96px; }
.mp_pv_table th:nth-child(5) { width: 120px; }
.mp_pv_table th:nth-child(6) { width: 170px; }
.mp_pv_table th:nth-child(7) { width: 110px; }
.mp_pv_table th:nth-child(8) { width: 200px; }
.mp_pv_table th:nth-child(9) { width: 130px; }

.mp_pv_table th.is_center,
.mp_pv_table td.is_center {
  text-align: center;
}

.mp_pv_empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--c-text-3);
}

/* ── 행 상태 ──────────────────────────────── */
.mp_pv_row {
  cursor: pointer;
}

.mp_pv_row.is_disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mp_pv_row.is_checked {
  background-color: var(--c-primary-50);
}

.dark .mp_pv_row.is_checked {
  background-color: var(--c-primary-100);
}

/* ── 매칭 owner 가입 상태 ─────────────────── */
.mp_pv_owner_state {
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.mp_pv_owner_state.is_signed {
  color: var(--c-success);
}

.mp_pv_owner_state.is_waiting {
  color: var(--c-primary-500);
}

/* ── 촉박취소 표기 ────────────────────────── */
.mp_pv_cancel {
  margin-left: 0.375rem;
  font-size: 0.75rem;
  color: var(--c-red-600);
}

/* ── 상태 뱃지 (mp_skip_badge 와 동일 패턴) ── */
.mp_pv_badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
}

.mp_pv_badge.is_auto {
  background-color: var(--c-success);
}

.mp_pv_badge.is_pending {
  background-color: var(--c-primary-500);
}

.mp_pv_badge.is_pool {
  background-color: var(--c-gray-600);
}

.mp_pv_badge.is_multi {
  background-color: var(--c-warning);
}

.mp_pv_badge.is_dup,
.mp_pv_badge.is_dup_batch,
.mp_pv_badge.is_skip {
  background-color: var(--c-gray-400);
}

.dark .mp_pv_badge.is_dup,
.dark .mp_pv_badge.is_dup_batch,
.dark .mp_pv_badge.is_skip {
  background-color: var(--c-gray-600);
}

.mp_pv_reason {
  font-size: 0.75rem;
  color: var(--c-text-2);
}

/* ── 푸터 ─────────────────────────────────── */
.mp_pv_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mp_pv_footer_btns {
  display: flex;
  gap: 0.375rem;
}