/* =========================================================
   CUSTOMER / SUPPLIER DETAIL PREMIUM CSS
   Files: customer-detail.css / supplier-detail.css
   ========================================================= */
.customer-detail-page,
.supplier-detail-page {
  padding: 24px 26px 34px;
  display: grid;
  gap: 18px;
  background: #f8fbff;
  color: #0f172a;
}
.customer-detail-page *,
.supplier-detail-page * { box-sizing: border-box; }
.crm-detail-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.crm-detail-topbar h1 { margin:0; color:#06133b; font-size:28px; font-weight:950; letter-spacing:-.04em; }
.crm-detail-topbar p { margin:8px 0 0; color:#33456f; font-size:14px; font-weight:850; }
.crm-detail-topbar p span { margin:0 8px; color:#94a3b8; }
.crm-detail-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.crm-back-btn,
.crm-small-btn,
.crm-btn,
.crm-ledger-filters button {
  min-height:42px; border-radius:12px; border:1px solid #dbe3ef; background:#fff; color:#0f172a;
  padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:900; cursor:pointer; text-decoration:none; transition:.18s ease;
}
.crm-back-btn:hover,
.crm-btn:hover,
.crm-ledger-filters button:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(15,23,42,.08); }
.crm-btn-primary { border:0; color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 12px 24px rgba(37,99,235,.22); }
.crm-btn-primary.supplier { background:linear-gradient(135deg,#4f46e5,#3730a3); }
.crm-hero-profile-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:28px;
  box-shadow:0 14px 38px rgba(15,23,42,.065); display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:center;
}
.crm-hero-left { display:flex; gap:24px; align-items:center; min-width:0; }
.crm-avatar.big { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#60a5fa,#2563eb); font-size:32px; font-weight:950; flex:0 0 auto; }
.crm-avatar.supplier.big { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.crm-name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.crm-name-row h2 { margin:0; color:#06133b; font-size:28px; font-weight:950; letter-spacing:-.03em; }
.crm-status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:950; }
.crm-status-pill.green { background:#dcfce7; color:#15803d; }
.crm-contact-row { margin-top:14px; display:flex; flex-wrap:wrap; gap:18px; color:#334155; font-size:13px; font-weight:850; }
.crm-contact-row span,
.crm-address,
.crm-group { display:inline-flex; align-items:center; gap:8px; }
.crm-address,
.crm-group { margin:16px 0 0; color:#334155; font-weight:850; }
.crm-group b { background:#dbeafe; color:#2563eb; padding:5px 10px; border-radius:999px; }
.supplier-tone .crm-group b { background:#e0e7ff; color:#4f46e5; }
.crm-hero-metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.crm-hero-metrics article,
.crm-summary-card,
.crm-table-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(15,23,42,.055);
}
.crm-hero-metrics article:nth-child(1) { background:linear-gradient(135deg,#eff6ff,#fff); }
.crm-hero-metrics article:nth-child(2) { background:linear-gradient(135deg,#ecfdf5,#fff); }
.crm-hero-metrics article:nth-child(3) { background:linear-gradient(135deg,#faf5ff,#fff); }
.crm-hero-metrics article:nth-child(4) { background:linear-gradient(135deg,#fef2f2,#fff); }
.crm-hero-metrics article i { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#dbeafe; color:#2563eb; margin-bottom:10px; }
.crm-hero-metrics article span,
.crm-summary-card span { display:block; color:#64748b; font-size:13px; font-weight:900; }
.crm-hero-metrics article strong,
.crm-summary-card strong { display:block; margin-top:8px; color:#06133b; font-size:22px; font-weight:950; }
.crm-detail-tabs { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:0 16px; box-shadow:0 10px 26px rgba(15,23,42,.045); display:flex; gap:6px; overflow:auto; }
.crm-detail-tabs button { height:56px; border:0; background:transparent; color:#33456f; font-weight:900; padding:0 16px; border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap; }
.crm-detail-tabs button.active { color:#2563eb; border-color:#2563eb; }
.supplier-tone .crm-detail-tabs button.active { color:#4f46e5; border-color:#4f46e5; }
.crm-detail-tabs span { margin-left:6px; background:#e2e8f0; color:#334155; padding:3px 8px; border-radius:999px; font-size:11px; }
.crm-overview-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.crm-summary-card i { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#2563eb; background:#dbeafe; float:right; }
.supplier-tone .crm-summary-card i { color:#4f46e5; background:#e0e7ff; }
.premium-ledger-card { padding:0; overflow:hidden; }
.crm-table-head { padding:22px 22px 16px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.crm-table-head h2 { margin:0; color:#06133b; font-size:20px; font-weight:950; }
.crm-table-head p { margin:4px 0 0; color:#33456f; font-size:13px; font-weight:800; }
.crm-ledger-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crm-table-wrap { overflow-x:auto; }
.crm-table { width:100%; min-width:1100px; border-collapse:collapse; }
.crm-table th { background:#f8fafc; color:#475569; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:14px 16px; font-weight:950; }
.crm-table td { border-top:1px solid #eef2f7; padding:14px 16px; font-size:13px; font-weight:800; color:#0f172a; vertical-align:middle; }
.crm-table tr:hover td { background:#fbfdff; }
.crm-type-pill { display:inline-flex; border-radius:999px; padding:7px 10px; background:#dbeafe; color:#2563eb; font-size:12px; font-weight:950; }
.supplier-tone .crm-type-pill { background:#e0e7ff; color:#4f46e5; }
.crm-ref-link { color:#0066ff; font-weight:950; text-decoration:none; }
.crm-ref-link:hover { text-decoration:underline; }
.amount-debit { color:#ef4444 !important; font-weight:950 !important; }
.amount-credit { color:#16a34a !important; font-weight:950 !important; }
.crm-status-badge { display:inline-flex; border-radius:999px; padding:7px 11px; font-size:12px; font-weight:950; }
.crm-status-badge.green { background:#dcfce7; color:#166534; }
.crm-status-badge.orange { background:#ffedd5; color:#c2410c; }
.crm-status-badge.red { background:#fee2e2; color:#b91c1c; }
.crm-status-badge.blue { background:#dbeafe; color:#1d4ed8; }
.crm-eye-btn { width:34px; height:34px; display:inline-grid; place-items:center; border:1px solid #dbe3ef; border-radius:10px; color:#0f172a; text-decoration:none; background:#fff; }
.crm-empty.big,
.crm-empty { background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:40px; text-align:center; font-weight:900; color:#64748b; }
@media (max-width:1280px) { .crm-overview-kpis { grid-template-columns:repeat(3,1fr); } .crm-hero-profile-card { grid-template-columns:1fr; } }
@media (max-width:760px) { .customer-detail-page,.supplier-detail-page { padding:16px; } .crm-detail-topbar,.crm-table-head,.crm-hero-left { flex-direction:column; align-items:flex-start; } .crm-detail-actions { width:100%; justify-content:flex-start; } .crm-hero-metrics,.crm-overview-kpis { grid-template-columns:1fr; } }