/* CRM: clients, leads & funnels, sequences. Tokens only. */
.crm-sub { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.crm-filters { margin-bottom: var(--s4); gap: var(--s3); }
.crm-filters .search { flex: 1 1 220px; max-width: 360px; }
.crm-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.crm-owed { color: var(--danger); font-weight: 600; }
.crm-caption { margin: 0 0 var(--s3); }

/* client detail */
.crm-detail { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--s4); align-items: start; }
.crm-contact { display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: var(--s4); }
.crm-avatar { width: 44px; height: 44px; font-size: var(--fs-sm); background: var(--accent-fill); color: var(--on-accent); }
.crm-contact-lines { display: flex; flex-direction: column; gap: var(--s2); }
.crm-line { display: flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); overflow-wrap: anywhere; }
.crm-line:hover { background: var(--surface-2); }
.crm-line svg { color: var(--text-muted); flex: none; }
.crm-notes { margin: 0; color: var(--text-muted); white-space: pre-wrap; }
.crm-drawing { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.crm-drawing img, .crm-drawing-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--border); }
.crm-drawing-ph { display: grid; place-items: center; color: var(--text-muted); }
@media (max-width: 900px) { .crm-detail { grid-template-columns: 1fr; } .crm-contact { position: static; } }

/* lead board */
.crm-kanban { grid-auto-columns: minmax(250px, 1fr); }
.crm-card { display: flex; flex-direction: column; gap: 4px; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.crm-card:hover { box-shadow: var(--shadow-float); }
.crm-card.crm-dragging { opacity: .45; }
.crm-card.crm-due { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger), var(--shadow-card); }
.crm-card-title { font-weight: 650; overflow-wrap: anywhere; }
.crm-card-foot { margin-top: 4px; gap: 6px; row-gap: 6px; }
.crm-card.crm-due-today { border-color: var(--accent-fill); box-shadow: inset 3px 0 0 var(--accent-fill), var(--shadow-card); }
.crm-stage-select { height: 28px; max-width: 108px; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; }
.crm-col-empty { border: 1px dashed var(--border-input); border-radius: var(--r-md); padding: var(--s4); text-align: center; color: var(--text-muted); font-size: var(--fs-xs); }
.crm-col-won { background: var(--success-soft); }
.crm-col-lost { opacity: .85; }
.crm-lead-extra .row { gap: var(--s2); }
.crm-lead-extra select { flex: 1; min-width: 160px; }
.crm-enrols { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* funnel charts */
.crm-funnel, .crm-sources { display: flex; flex-direction: column; gap: var(--s2); }
.crm-funnel-row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s3); align-items: center; }
.crm-funnel-label { font-weight: 600; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-funnel-track { height: 28px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.crm-funnel-bar { height: 100%; background: var(--accent-fill); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; min-width: 24px; color: var(--on-accent); font-weight: 700; font-size: var(--fs-xs); transition: width var(--t-base) var(--ease); }
.crm-funnel-bar.won { background: var(--success); color: var(--surface); }
.crm-funnel-bar.source { background: var(--info); opacity: .85; }
.crm-funnel-conv { min-width: 44px; text-align: right; font-size: var(--fs-xs); font-weight: 600; }
.crm-sources .crm-funnel-row { grid-template-columns: 96px 1fr 170px; }
.crm-sources .crm-funnel-conv { white-space: nowrap; }
@media (max-width: 560px) { .crm-funnel-row, .crm-sources .crm-funnel-row { grid-template-columns: 72px 1fr; } .crm-funnel-conv { grid-column: 2; text-align: left; } }

/* sequences */
.crm-seq-card { display: flex; flex-direction: column; gap: var(--s3); }
.crm-seq-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-step-dot { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.crm-switch { position: relative; display: inline-flex; cursor: pointer; }
.crm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.crm-switch-track { width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--border); position: relative; transition: background var(--t-fast); }
.crm-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); transition: transform var(--t-fast) var(--ease); }
.crm-switch input:checked + .crm-switch-track { background: var(--success); }
.crm-switch input:checked + .crm-switch-track::after { transform: translateX(16px); }
.crm-switch input:focus-visible + .crm-switch-track { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.crm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.crm-step { display: flex; flex-direction: column; gap: var(--s3); }
.crm-show-sent { margin-left: auto; }
.crm-note { display: flex; gap: var(--s2); align-items: flex-start; background: var(--info-soft); border-color: transparent; color: var(--text); }
.crm-note svg { color: var(--info); flex: none; margin-top: 2px; }
.crm-outbox-row { align-items: flex-start; }
.crm-chan { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); flex: none; color: var(--text-muted); }
.crm-outbox-body { margin-top: 4px; white-space: pre-wrap; color: var(--text-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crm-outbox-actions { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .crm-outbox-row { flex-wrap: wrap; }
  .crm-outbox-actions { width: 100%; justify-content: flex-end; }
}

/* client list: drop type, phone and email columns on phones (they're one tap away on the detail page) */
@media (max-width: 560px) {
  .crm-clients-table th:nth-child(2), .crm-clients-table td:nth-child(2),
  .crm-clients-table th:nth-child(3), .crm-clients-table td:nth-child(3),
  .crm-clients-table th:nth-child(4), .crm-clients-table td:nth-child(4) { display: none; }
}