/*
 * DB리스트 검색영역 옵션 스위치 + 이름 hover «간편» 레이어 — 이력·진행상태·이관요청 탭 (2026-10-11)
 * 동작 = Stimulus db-history-preview 컨트롤러 / 본문 = workspace/_db_list_history_preview (DB상세 이력 영역과 같은 말풍선 파셜).
 * 색은 전부 테마 토큰(var(--ord-*)). 모바일(≤768px)에서는 옵션·레이어 모두 숨김.
 */

/* ---- 검색영역 옵션 스위치(상담예약만 · 이력) ---- */
.dbl-opt-switches { display: inline-flex; align-items: center; gap: 16px; margin-left: 8px; align-self: center; white-space: nowrap; }
.dbl-opt-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ord-text-2); cursor: pointer; user-select: none; }
.dbl-opt-switch:has(input:checked) { color: var(--ord-accent-strong); font-weight: 600; }

/* ---- 이력 옵션 ON — 이름 셀 어포던스 ---- */
.dhp-on td[data-cell="name"][data-dhp] { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--ord-text-4); text-underline-offset: 4px; }
.dhp-on td[data-cell="name"][data-dhp].dhp-active { background: var(--ord-accent-soft); }

/* 이름 우측 이력 건수 — 이력 옵션 ON 일 때만 보인다 */
.dhp-n { display: none; min-width: 16px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: var(--ord-tint-gray-bg); color: var(--ord-accent-strong);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; vertical-align: 1px; text-decoration: none; }
.dhp-on .dhp-n { display: inline-block; }

/* ---- 레이어 ---- */
.dhp-layer { position: fixed; z-index: 1200; width: 380px; padding-left: 10px; visibility: hidden; opacity: 0; transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; }
.dhp-layer.is-left { padding-left: 0; padding-right: 10px; transform: translateX(4px); }
.dhp-layer.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

.dhp-box { display: flex; flex-direction: column; background: var(--ord-surface); border: 1px solid var(--ord-line-2); border-radius: 12px; overflow: hidden;
  box-shadow: var(--ord-shadow), 0 12px 28px rgba(0, 0, 0, .18); }
.dhp-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--ord-head-bg); color: var(--ord-on-solid); }
.dhp-title { font-size: 13px; font-weight: 800; padding-left: 9px; border-left: 4px solid rgba(255, 255, 255, .55); line-height: 1.15; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhp-head-tel { font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--ord-on-solid); opacity: .85; text-decoration: none; white-space: nowrap; }
.dhp-head-tel:hover { opacity: 1; text-decoration: underline; }

/* 본문 = DB상세 이력 영역과 같은 대화창 바탕·말풍선(파셜 재사용) */
.dhp-msgs { max-height: 450px; overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: var(--ord-chat-bg); }
.dhp-more { text-align: center; font-size: 11px; color: var(--ord-text-2); opacity: .75; margin-bottom: 8px; }
.dhp-empty { text-align: center; padding: 30px 10px; color: var(--ord-text-3); font-size: 12px; }
.dhp-loading { padding: 16px 14px; background: var(--ord-surface); }
.dhp-loading i { display: block; height: 11px; margin: 9px 0; border-radius: 6px; background: var(--ord-skeleton); }
.dhp-loading i:nth-child(1) { width: 90%; }
.dhp-loading i:nth-child(2) { width: 70%; }
.dhp-loading i:nth-child(3) { width: 82%; }

/* 입력칸 = DB상세 이력 입력과 같은 규격 */
.dhp-cmp { display: flex; gap: 8px; padding: 10px; background: var(--ord-surface); border-top: 1px solid var(--ord-line); align-items: flex-end; }
.dhp-cmp textarea { flex: 1; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--ord-line-2); border-radius: 18px; font-size: 13px; resize: none; outline: none;
  font-family: inherit; line-height: 1.4; max-height: 100px; overflow-y: hidden; background: var(--ord-input-bg); color: var(--ord-text); }
.dhp-cmp textarea:focus { border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
.dhp-cmp button { padding: 10px 18px; background: var(--ord-solid-blue); color: var(--ord-on-solid); border: none; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.dhp-cmp button:disabled { opacity: .5; cursor: default; }

/* ---- 간편 레이어 탭 (2026-10-11) — [이력] [진행상태] [이관요청] ---- */
.dhp-layer { width: 392px; }
.dhp-tabs { display: flex; gap: 2px; padding: 0 10px; background: var(--ord-head-bg); }
.dhp-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px 9px; border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--ord-on-solid); opacity: .75; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.dhp-tab:hover { opacity: 1; }
.dhp-tab.is-on { opacity: 1; border-bottom-color: var(--ord-tint-amber-line); }
.dhp-tab.is-off { opacity: .4; cursor: not-allowed; }
.dhp-tab em { font-style: normal; font-size: 10px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--ord-surface); color: var(--ord-accent-strong); max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.dhp-pane { background: var(--ord-surface); }
.dhp-head .dhp-sys-switch { margin-left: auto; }
.dhp-box:not([data-tab="hist"]) .dhp-sys-switch { display: none; }
/* 탭 전환 — 패널은 모두 .dhp-box 의 직계 자식. 기본 숨김 → 선택된 탭의 패널만 보인다 */
.dhp-box > .dhp-pane { display: none; }
.dhp-box[data-tab="hist"] > [data-dhp-pane="hist"] { display: flex; }
.dhp-box[data-tab="prog"] > [data-dhp-pane="prog"], .dhp-box[data-tab="xfer"] > [data-dhp-pane="xfer"] { display: block; }
.dhp-hist { display: flex; flex-direction: column; }
.dhp-cust, .dhp-prog, .dhp-xfer { padding: 12px 14px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; font-size: 12px; color: var(--ord-text-2); }
.dhp-xfer.dtr-modal { padding: 12px 14px; }

/* [고객정보] 탭 — DB상세 고객정보·추가정보의 읽기 전용 요약. 섹션 밴드 카드(A-4) */
.dhp-cust { display: flex; flex-direction: column; gap: 12px; }
.dhp-box[data-tab="cust"] > .dhp-cust { display: flex; }
.dhp-sec { border: 1px solid var(--ord-line); border-radius: 10px; overflow: hidden; background: var(--ord-surface); }
.dhp-sec-h { padding: 7px 12px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); color: var(--ord-accent-strong); font-size: 12px; font-weight: 700; }
.dhp-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--ord-line-soft); font-size: 13px; }
.dhp-row:last-child { border-bottom: 0; }
.dhp-row-l { flex: none; width: 66px; color: var(--ord-text-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dhp-row-v { flex: 1; min-width: 0; color: var(--ord-text); line-height: 1.45; word-break: break-all; }
.dhp-row-v.is-memo { white-space: pre-wrap; }
.dhp-row.is-stack { flex-direction: column; align-items: stretch; gap: 2px; }
.dhp-row.is-stack .dhp-row-l { width: auto; white-space: normal; font-size: 11.5px; }
.dhp-tel { color: var(--ord-tint-blue-fg); text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.dhp-tel:hover { text-decoration: underline; }
.dhp-copy { margin-left: 8px; padding: 2px 9px; border: 1px solid var(--ord-line-2); border-radius: 999px; background: var(--ord-surface); color: var(--ord-text-2); font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; vertical-align: 1px; }
.dhp-copy:hover { background: var(--ord-band); border-color: var(--ord-accent); }

/* ---- [이관요청] 탭 — 이관요청 폼(_db_list_transfer_form)을 항목 카드로 정돈 (모달에는 영향 없음: 전부 .dhp-xfer 안쪽) ---- */
.dhp-xfer { padding-bottom: 0; }
.dhp-prog, .dhp-xfer { max-height: min(620px, calc(100vh - 130px)); }
.dhp-xfer .dtr-grp { margin-top: 10px; padding: 11px 12px; border: 1px solid var(--ord-line); border-radius: 10px; background: var(--ord-surface); }
.dhp-xfer .dtr-grp:first-child { margin-top: 0; }
.dhp-xfer .dtr-grp[hidden] { display: none; }
.dhp-xfer .dtr-lbl { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--ord-accent-strong); }
.dhp-xfer .dtr-sub { color: var(--ord-text-4); font-weight: 500; }
.dhp-xfer .dtr-pick { padding: 5px 12px; font-size: 12px; }
.dhp-xfer .dtr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; background: transparent; }
.dhp-xfer .dtr-seg button { display: block; padding: 8px 10px; border: 1.5px solid var(--ord-line); border-radius: 9px; background: var(--ord-surface); color: var(--ord-text); font-size: 12.5px; font-weight: 700; text-align: left; line-height: 1.3; }
.dhp-xfer .dtr-seg button:hover { border-color: var(--ord-accent); }
.dhp-xfer .dtr-seg button.is-on { border-color: var(--ord-head-bg); background: var(--ord-head-bg); color: var(--ord-on-solid); }
.dhp-xfer .dtr-seg .dtr-desc { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 500; opacity: .75; line-height: 1.35; }
.dhp-xfer .dtr-input { padding: 7px 10px; font-size: 12.5px; }
.dhp-xfer .dtr-ratio { padding: 0; border: 0; background: transparent; }
.dhp-xfer .dtr-ratio .dtr-sub { font-size: 11px; color: var(--ord-text-3); }
.dhp-xfer .dtr-bar { height: 20px; margin: 7px 0 2px; }
.dhp-xfer .dtr-acts { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 12px -14px 0; padding: 10px 14px; background: var(--ord-surface); border-top: 1px solid var(--ord-line); }
.dhp-xfer .dtr-acts-hint { margin-right: auto; font-size: 10.5px; color: var(--ord-text-4); }

/* [진행상태] 탭 — 상태를 목록과 같은 색 배지로, 묶음(진행·접수/완료·취소/무효)별로 */
.dhp-sg { margin-bottom: 10px; border: 1px solid var(--ord-line); border-radius: 10px; overflow: hidden; background: var(--ord-surface); }
.dhp-sg-h { padding: 6px 12px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); color: var(--ord-accent-strong); font-size: 11.5px; font-weight: 700; }
.dhp-sg-b { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.dhp-stb { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border: 1.5px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; }
.dhp-stb:hover:not(:disabled) { border-color: var(--ord-accent); background: var(--ord-accent-soft); }
.dhp-stb.is-sel { border-color: var(--ord-solid-blue); background: var(--ord-tint-blue-bg); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
.dhp-stb.is-cur { border-color: var(--ord-head-bg); cursor: default; }
.dhp-stb small { padding-right: 6px; font-size: 10px; font-weight: 800; color: var(--ord-accent-strong); white-space: nowrap; }
.dhp-cf { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--ord-tint-blue-line); background: var(--ord-tint-blue-bg); border-radius: 10px; }
.dhp-cf-ln { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ord-text); }
.dhp-cf-ln > span { display: inline-flex; align-items: center; gap: 6px; }
.dhp-cf-arr { color: var(--ord-text-4); }
.dhp-cf-cancel { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dhp-cf-cancel label { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--ord-text-2); cursor: pointer; line-height: 1.4; }
.dhp-cf-note { margin-top: 8px; padding: 6px 9px; border-radius: 8px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-size: 11px; line-height: 1.5; }
.dhp-cf-memo { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 10px; border: 1px solid var(--ord-line-2); border-radius: 8px; font: inherit; font-size: 12px;
  outline: none; background: var(--ord-input-bg); color: var(--ord-text); }
.dhp-cf-memo:focus { border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
.dhp-acts, .dtr-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.dhp-btn-ghost, .dhp-btn-go { padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.dhp-btn-ghost { border: 1px solid var(--ord-line-2); background: var(--ord-surface); color: var(--ord-text-2); }
.dhp-btn-ghost:hover { background: var(--ord-band); }
.dhp-btn-go { border: 0; background: var(--ord-head-bg); color: var(--ord-on-solid); }
.dhp-btn-go:disabled { opacity: .5; cursor: not-allowed; }
.dtr-acts .dtr-btn-ghost { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--ord-line-2); background: var(--ord-surface); color: var(--ord-text-2); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dtr-acts .dtr-btn-go { padding: 7px 14px; border-radius: 8px; border: 0; background: var(--ord-head-bg); color: var(--ord-on-solid); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dtr-acts .dtr-btn-go:disabled { opacity: .5; cursor: not-allowed; }
.dhp-info { padding: 10px 12px; border-radius: 10px; background: var(--ord-band); color: var(--ord-text-2); font-size: 12px; line-height: 1.6; margin-top: 8px; }
.dhp-xfer .dtr-share { margin-top: 0; }

/* ---- 모바일: 이력 옵션·레이어 미지원 / 상담예약만 스위치는 검색바 위 줄 우측끝 ---- */
@media (max-width: 768px) {
  .dhp-switch, .dhp-layer { display: none !important; }
  .dbl-search-bar-row { flex-wrap: wrap; }
  .dbl-search-bar-row .dbl-opt-switches { order: -1; margin-left: auto !important; margin-bottom: 8px; }
}