/* ============================================================
   MYCFO — customers.css  (Milestone 2)
   거래처(CRM) 전용 스타일
   ============================================================ */

/* ── Shared: reuse summary-strip, filter-bar, modal, tabs from persons.css ── */
/* This file adds customer-specific overrides and the data table */

/* ── Customer Type Colors ────────────────────────────────────── */
.type-거래처   { background: #dbeafe; color: #1e40af; }
.type-공급처   { background: #d1fae5; color: #065f46; }
.type-발주처   { background: #ede9fe; color: #5b21b6; }
.type-OEM      { background: #fce7f3; color: #9d174d; }
.type-라이선스사 { background: #fef3c7; color: #92400e; }
.type-은행     { background: #e0f2fe; color: #0c4a6e; }
.type-보험사   { background: #f0fdf4; color: #14532d; }
.type-관공서   { background: #f3f4f6; color: #374151; }
.type-기타     { background: var(--color-surface-alt); color: var(--color-text-secondary); }

/* ── Customer Data Table ─────────────────────────────────────── */
.customer-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.customer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.customer-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.customer-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.customer-table tr:last-child td { border-bottom: none; }
.customer-table tr:hover td { background: var(--color-surface-hover); cursor: pointer; }

.customer-name-cell { font-weight: 600; }
.customer-type-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.customer-biz-no { font-family: monospace; font-size: 12px; color: var(--color-text-secondary); }
.customer-contact { font-size: 12px; color: var(--color-text-secondary); }

/* ── Customer Detail Hero ────────────────────────────────────── */
.customer-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.customer-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.customer-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-brand-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.customer-hero-title { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.customer-hero-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
.customer-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Stat Row ────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 20px;
}
.stat-num { font-size: 24px; font-weight: 700; color: var(--color-text-primary); }
.stat-label { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }

/* ── Related Lists ───────────────────────────────────────────── */
.related-list { display: flex; flex-direction: column; gap: 8px; }
.related-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.related-row:hover { background: var(--color-surface-hover); }
.related-row-icon { font-size: 16px; }
.related-row-title { flex: 1; font-size: 13px; font-weight: 500; }
.related-row-sub { font-size: 12px; color: var(--color-text-secondary); }
.related-row-amount { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }

/* ── Search Input ────────────────────────────────────────────── */
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-bg);
  box-sizing: border-box;
}
.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
}