/**
 * 고객/벤더 상세뷰 공용 디자인 시스템 (dv-* = detail view)
 * customer-management/view + bill-management(vendor) view 공유.
 * html.php 전역 로드 (common/common.css 이후).
 */

/* ── 고객 카드 공통 ───────────────────────────────────────── */
.dv-customer-card {
    background: var(--bs-card);
    border: 1px solid var(--bs-border-secondary);
    border-radius: var(--bs-radius);
    overflow: hidden;
}

/* ── 뷰 모드 — 프로필 헤더 ───────────────────────────────── */
.dv-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: var(--bs-bg-primary-light);
    border-bottom: 1px solid var(--bs-border-secondary);
}

.dv-avatar-wrap {
    flex-shrink: 0;
}

.dv-avatar {
    width: 68px;
    height: 68px;
    border-radius: var(--bs-radius);
    background: linear-gradient(
        135deg,
        var(--bs-primary),
        var(--bs-primary-accent)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.05em;
    box-shadow: var(--bs-shadow);
}

.dv-profile-info {
    flex: 1;
    min-width: 0;
}

.dv-profile-company {
    font-size: var(--font-large);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.dv-profile-name {
    font-size: var(--font-extra-large);
    font-weight: 900;
    color: var(--bs-text);
    letter-spacing: 0.05em;
}

.dv-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.dv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-small);
    color: var(--bs-muted);
    font-weight: 500;
}

.dv-meta-item svg {
    flex-shrink: 0;
}

/* 우측 사이드 */
.dv-profile-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* 상태 뱃지 베이스 */
.dv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.dv-status-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.dv-status--enabled {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
}
.dv-status--disabled {
    background: #fee2e2;
    color: var(--bs-danger);
    border: 1px solid #fca5a5;
}
.dv-status--pending {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fcd34d;
}
.dv-status--default {
    background: #f1f5f9;
    color: var(--bs-muted);
    border: 1px solid #cbd5e1;
}

/* ── 뷰 모드 — 상세 정보 그리드 ─────────────────────────── */
.dv-detail-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.dv-detail-group {
    padding: 15px 20px;
}

.dv-detail-group:last-child {
    border-right: none;
}

.dv-detail-label {
    font-size: var(--font-normal);
    font-weight: 700;
    color: var(--bs-primary);
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid var(--bs-border-secondary);
    padding-bottom: 15px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.dv-detail-row {
    display: flex;
    align-items: end;
    gap: 10px;
    line-height: 1;
    margin-top: 15px;
}

.dv-dk {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.05em;
    min-width: 80px;
    flex-shrink: 0;
    line-height: 0.8rem;
}

.dv-dv {
    font-size: var(--font-normal);
    font-weight: 500;
    color: var(--bs-text);
    word-break: break-all;
    line-height: 0.8rem;
}

/* ── 편집 모드 헤더 + 그리드 ─────────────────────────────── */
.dv-edit-header {
    display: grid;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: var(--bs-bg-warning-light);
    border-bottom: 1px solid #fcd34d;
}

.dv-edit-title {
    display: flex;
    align-items: center;
    font-size: var(--font-large);
    font-weight: 700;
    color: #d97706;
    letter-spacing: 0.12em;
}

.dv-edit-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0px 28px;
    padding-bottom: 24px;
}

.dv-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 편집 폼 그리드 */
.dv-edit-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.dv-edit-section {
    padding: 12px 28px;
    border-right: 1px solid var(--bs-border-secondary);
}

.dv-edit-section:last-child {
    border-right: none;
}

.dv-es-title {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-primary);
    letter-spacing: 0.16em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--bs-border-secondary);
}

/* 폼 필드 공통 */
.dv-fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.dv-frow {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.dv-frow .dv-fg {
    margin-bottom: 0;
    flex: 1;
}

.dv-lbl {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.12em;
}

.dv-req {
    color: var(--bs-danger);
}

.dv-inp,
.dv-sel {
    height: 38px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    font-size: var(--font-small);
    color: var(--bs-text);
    background: #fff;
    outline: none;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    width: 100%;
}

.dv-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.dv-inp:focus,
.dv-sel:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.dv-inp::placeholder {
    color: #94a3b8;
}

/* ── 헤더 아이콘 ───────────────────────────────────────────── */
.dv-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dv-head-icon svg {
    width: 18px;
    height: 18px;
}

/* ── NOTES 카드 (note.js) ────────────────────────────────────── */
.dv-note-list {
    margin-top: 10px;
    min-height: 60px;
    font-size: var(--font-small);
    line-height: 1.3;
    padding: 5px 10px;
    border: none;
    vertical-align: middle;
    font-weight: 600;
    color: var(--bs-text);
    overflow-y: scroll;
    max-height: 280px;
}

.dv-note-list .dv-note-item-created-by {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.05em;
}

.dv-note-list .dv-note-item-note-text {
    font-size: var(--font-normal);
    font-weight: 500;
    color: var(--bs-text);
    letter-spacing: 0.05em;
    padding: 10px 0px;
}

.dv-note-list .dv-note-item-created-at {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--bs-muted);
    letter-spacing: 0.05em;
    text-align: end;
}

.dv-note-list .dv-note-item {
    padding: 4px 0;
}


/* DOCUMENTS/NOTES 를 나란히 담는 row. row-gap 은 줄바꿈(=좁은 폭에서 세로 스택)이
   일어날 때만 적용되므로 데스크톱 가로배치에는 무영향 → @media 불필요. */
.dv-doc-row {
    row-gap: 15px;
}

/* ── DOCUMENTS 카드 (file-upload.js) ───────────────────────────────── */
.dv-doc-card {
    background: var(--bs-card);
    border: 1px solid var(--bs-border-secondary);
    border-radius: var(--bs-radius);
    padding: 15px 20px;
}

.dv-doc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dv-doc-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.dv-doc-head-icon.dv-doc-head-icon--sticky {
    background: #ccfbf1;
    color: #0d9488;
}

.dv-doc-head-icon svg {
    width: 18px;
    height: 18px;
}

.dv-doc-head-title {
    font-size: var(--font-normal);
    font-weight: 600;
    color: var(--bs-text);
    letter-spacing: 0.05em;
}

.dv-doc-head-count {
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--font-small);
    color: var(--bs-muted);
    margin-left: auto;
}

/* 파일 업로드 드롭존/선택목록 스타일은 common/file-upload.css 로 이관. */

/* ── 요약 카드 그리드 ────────────────────────────────────── */
.dv-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ── 요약 탭 (QUOTE / INVOICE / TRIP / BILL) ───────────────── */
.dv-summary-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dv-summary-tab-nav {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    flex-wrap: wrap;
}

.dv-summary-tab-btn {
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bs-muted);
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: var(--bs-radius);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.dv-summary-tab-btn:hover {
    color: var(--bs-text);
    background: var(--bs-bg-light);
}

.dv-summary-tab-btn.active {
    color: var(--bs-primary);
    background: var(--bs-bg-light);
}

.dv-summary-tab-panels {
    position: relative;
}

.dv-summary-tab-pane {
    display: none;
}

.dv-summary-tab-pane.active {
    display: block;
}

.dv-summary-tab-pane .dv-sc {
    max-width: 100%;
}

/* 빠른 액션 버튼 */
.dv-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-qa-btn {
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

/* 연락처 링크 */
.dv-link-tel,
.dv-link-email {
    color: #0369a1;
    text-decoration: none;
}

.dv-link-tel:hover,
.dv-link-email:hover {
    text-decoration: underline;
}

.dv-dv-note {
    white-space: pre-wrap;
    word-break: break-word;
}

.dv-inp-note {
    min-height: 72px;
    resize: vertical;
}

.dv-sc {
    background: var(--bs-card);
    border: 1px solid var(--bs-border-secondary);
    border-radius: var(--bs-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 카드 헤더 */
.dv-sc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
}

.dv-sc-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    display: none;
}

.dv-sc--purple .dv-sc-icon {
    background: #f3e8ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}
.dv-sc--green .dv-sc-icon {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
}
.dv-sc--blue .dv-sc-icon {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #a5b4fc;
}
.dv-sc--amber .dv-sc-icon {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fcd34d;
}
.dv-sc--danger .dv-sc-icon {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
/* emerald = 완료(예: Bill PAID). green(승인)과 나란히 놓여도 구분되도록 더 진하다. */
.dv-sc--emerald .dv-sc-icon {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.dv-sc-icon svg {
    width: 16px;
    height: 16px;
}

.dv-sc-label {
    font-size: var(--font-normal);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.dv-sc--purple .dv-sc-label {
    color: #7c3aed;
}
.dv-sc--green .dv-sc-label {
    color: #16a34a;
}
.dv-sc--blue .dv-sc-label {
    color: #4338ca;
}
.dv-sc--amber .dv-sc-label {
    color: #d97706;
}
.dv-sc--danger .dv-sc-label {
    color: #dc2626;
}
.dv-sc--emerald .dv-sc-label {
    color: #047857;
}

.dv-sc-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--bs-border-secondary);
    border-radius: 6px;
    background: #fff;
    color: var(--bs-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dv-sc-refresh-btn:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: rgba(2, 132, 199, 0.06);
}
.dv-sc-refresh-btn svg {
    width: 14px;
    height: 14px;
}

.dv-sc-refresh-status {
    margin-left: 8px;
    font-size: var(--font-small);
    color: var(--bs-muted);
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
.dv-sc-refresh-status.show {
    opacity: 1;
    transform: translateY(0);
}

.dv-sc-link {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.dv-sc-link:hover {
    color: var(--bs-primary);
}

/* 대형 숫자 */
.dv-sc-stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 2px 18px 10px;
    justify-content: flex-end;
}

.dv-sc-num {
    font-size: var(--font-display);
    font-weight: 700;
    color: var(--bs-text);
    line-height: 1;
}

.dv-sc-num--sm {
    font-size: var(--font-large);
    font-weight: 800;
    color: var(--bs-text);
    letter-spacing: 0.01em;
}

.dv-sc-unit {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.1em;
}

/* 미니 리스트 헤더 (7열) */
.dv-sc-lh {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 0.85fr 0.9fr 1.1fr 0.85fr 1.2fr;
    align-items: center;
    padding: 0 14px;
    background: #f8fafc;
    border-top: 1px solid var(--bs-border-secondary);
    border-bottom: 1px solid var(--bs-border-secondary);
}

.dv-sc-lh span {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-muted);
    letter-spacing: 0.12em;
    line-height: 1;
    padding: 7px 0;
}

.dv-sc-lh span:last-child {
    text-align: right;
}

/* 미니 리스트 아이템 */
.dv-sc-list {
    flex: 1;
}

.dv-sc-item {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 0.85fr 0.9fr 1.1fr 0.85fr 1.2fr;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}

.dv-sc-item:last-child {
    border-bottom: none;
}
.dv-sc-item:hover {
    background: var(--bs-bg-light);
}

/* 리스트 셀 — 10px 통일 */
.dv-si-route {
    font-size: var(--font-normal);
    font-weight: 600;
}

.dv-item-link,
.dv-si-route a {
    color: #0369a1;
    text-decoration: none;
    transition: color 0.15s;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.dv-item-link:hover .dv-si-route a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.dv-si-mid {
    font-size: var(--font-normal);
    font-weight: 600;
    color: var(--bs-text);
    line-height: 1;
}

.dv-si-mid-sub {
    font-size: var(--font-small);
    font-weight: 500;
    color: var(--bs-muted);
}

.dv-si-right {
    font-size: var(--font-small);
    font-weight: 700;
    color: var(--bs-text);
    text-align: right;
    line-height: 1;
}

.dv-si-right--purple {
    color: #7c3aed;
}
.dv-si-right--green {
    color: #16a34a;
}
.dv-si-right--amber {
    color: #d97706;
}
.dv-si-right--blue {
    color: #4338ca;
}
.dv-si-right--danger {
    color: #dc2626;
}

/* ── 반응형 (View) ────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dv-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .dv-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dv-edit-grid {
        grid-template-columns: 1fr;
    }
    .dv-edit-section {
        border-right: none;
    }
}

@media (max-width: 680px) {
    .dv-summary-grid {
        grid-template-columns: 1fr;
    }
    .dv-detail-grid {
        grid-template-columns: 1fr;
    }
    .dv-detail-group {
        border-right: none;
    }
    .dv-profile-header {
        flex-wrap: wrap;
    }
    .dv-profile-side {
        align-items: flex-start;
    }
}