/* Style riêng: Lead (đợt 5) — danh sách kanban (#/leads) và chi tiết lead (#/leads/<id>). Chỉ dùng biến màu chung để theo sáng / tối. */

/* ---------- Đầu trang & menu ⋯ ---------- */
.ld-title { display: inline-flex; align-items: center; gap: 8px; }
.ld-menu { position: relative; }
.ld-menu > summary { list-style: none; }
.ld-menu > summary::-webkit-details-marker { display: none; }
.ld-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; max-width: calc(100vw - 32px);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-dark:hover { opacity: 0.9; }

/* ---------- Cần xử lý, KPI, phễu ---------- */
.ld-urgent .urgent-tile { text-decoration: none; color: inherit; }
.ld-need-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px;
}
.ld-need-banner .btn { margin-left: auto; }
.ld-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 14px; color: var(--ink-2); }
.ld-kpi strong { color: var(--ink); font-size: 16px; }
.ld-kpi .link { margin-left: auto; }
.ld-late, .ld-late strong { color: var(--danger); font-weight: 600; }
.ld-funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 16px; }
.ld-funnel-table td:first-child { white-space: nowrap; }
.ld-reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ld-reason-list li { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- Tìm, lọc, chip ---------- */
.ld-toolbar { margin-bottom: 8px; }
.ld-toolbar .toolbar { margin-bottom: 8px; }
.ld-modes { margin-left: auto; }
.ld-filter-row { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ld-care-chips { margin-bottom: 14px; }
.ld-toolbar .btn.is-active { border-color: var(--ink); }

/* ---------- Bảng kanban ---------- */
.ld-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 0.7fr); gap: 12px; align-items: start; }
.ld-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; }
.ld-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ld-col-head h3 { margin: 0; font-size: 14px; }
.ld-col-head .link { margin-left: auto; font-size: 13px; }
.ld-col-body { display: flex; flex-direction: column; gap: 10px; }
.ld-col-lost.is-open { grid-column: span 1; }
.ld-lost-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ld-lost-row { padding: 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ld-mobile { display: none; }

/* ---------- Thẻ lead ---------- */
.ld-card { padding: 12px; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--line-strong); min-width: 0; }
.ld-card.ld-s-new { border-left-color: var(--warn); }
.ld-card.ld-s-contacting { border-left-color: var(--violet); }
.ld-card.ld-s-caring { border-left-color: var(--info); }
.ld-card.ld-s-won { border-left-color: var(--good); }
.ld-card.ld-s-lost, .ld-card.ld-s-spam { border-left-color: var(--muted); }
.ld-card.is-urgent { box-shadow: 0 0 0 1px var(--danger-bg), var(--shadow); }
.ld-card-head { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ld-avatar { width: 32px; height: 32px; flex: none; font-size: 12px; }
.ld-card-title { display: flex; flex-direction: column; min-width: 0; }
.ld-name { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ld-name:hover { text-decoration: underline; }
.ld-src { font-size: 12px; color: var(--ink-2); }
.ld-contact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ld-phone { font-weight: 600; }
.ld-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ld-flag-green { background: var(--good-bg); color: var(--good); }
.ld-returning { padding: 6px 8px; border-radius: 8px; background: var(--warn-bg); }
.ld-need { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.ld-care { color: var(--ink-2); }
.ld-last { margin: 0; overflow-wrap: anywhere; }
.ld-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ld-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-unclaimed { color: var(--danger); font-weight: 600; font-size: 13px; }
.ld-owner { font-size: 13px; color: var(--ink-2); }

/* ---------- Modal bỏ lead ---------- */
.ld-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ld-reason { justify-content: flex-start; white-space: normal; text-align: left; }

/* ---------- Chi tiết lead ---------- */
.ld-detail-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ld-detail-head h1 { overflow-wrap: anywhere; }
.ld-detail-head .ld-contact { margin-top: 8px; }
.ld-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.ld-detail-side { display: flex; flex-direction: column; gap: 16px; }
.ld-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.ld-info dt { color: var(--muted); font-size: 13px; }
.ld-info dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.ld-info select { max-width: 100%; }
.ld-history { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .ld-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-funnel { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile: kanban thành hàng chip trạng thái + danh sách 1 cột; không cuộn ngang trang. */
@media (max-width: 760px) {
  .ld-desktop { display: none; }
  .ld-mobile { display: block; }
  .ld-mobile-chips { overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; }
  .ld-mobile-chips .chips { flex-wrap: nowrap; }
  .ld-list { display: flex; flex-direction: column; gap: 10px; }
  .ld-modes { margin-left: 0; width: 100%; }
  .ld-kpi .link { margin-left: 0; }
  .ld-detail { grid-template-columns: minmax(0, 1fr); }
  .ld-reasons { grid-template-columns: minmax(0, 1fr); }
  .ld-filter-row input[type=date], .ld-filter-row select { flex: 1 1 140px; }
  .ld-funnel-table thead { display: none; }
  .ld-funnel-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ld-funnel-table td { border: 0; padding: 2px 4px; text-align: left; }
  .ld-funnel-table td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .ld-funnel-table td[data-label]::before { content: attr(data-label) " "; display: block; font-size: 11px; color: var(--muted); }
}