/* CRM app: pipeline board, leads, lead page, follow-ups, stages. Tokens from admin.css only, logical properties, light + dark through the tokens, phone first at 375 px.
   The kanban engine itself (kb-*) lives in erp.css; the phone / WhatsApp chips (bk-*) in orders.css. */

/* ------------------------------------------------------------ shared bits */
.crm-strip .stat.crm-won .stat-value { color: var(--ok-ink); }
.crm-strip .stat.crm-lost .stat-value { color: var(--danger-ink); }
.crm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
.crm-bar .search-box { flex: 1 1 220px; max-width: 360px; }
.btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.crm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--info-soft); color: var(--info-ink); }
.crm-chip.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.crm-chip.tone-danger { background: var(--danger-soft); color: var(--danger-ink); }
.crm-prob { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge.crm-camp { max-width: 100%; overflow: hidden; }
.badge.crm-camp > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.badge.crm-order { text-decoration: none; }
.crm-av { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .4); }
.crm-who { display: inline-flex; align-items: center; gap: 6px; }
.crm-tel { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-d); font-weight: 650; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.crm-tel:hover { text-decoration: underline; }
.crm-wa { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--ok-ink); background: var(--panel); }
.crm-wa:hover { border-color: var(--ok); background: var(--ok-soft); }
.crm-inline-contact { display: inline-flex; align-items: center; gap: 8px; }
.error-box .btn { margin-top: 8px; }

/* ------------------------------------------------------------ board */
.crm-board { min-width: 0; }
.crm-kb .kb-col { flex: 1 0 272px; min-width: 250px; max-width: 340px; }
.crm-kb .kb-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-card { display: grid; gap: 6px; min-width: 0; }
.crm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.crm-card-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.crm-card-sub { overflow-wrap: anywhere; }
.crm-card-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-card-money { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crm-card-badges { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.crm-card-next { display: flex; }
.crm-kb .kb-card:has(.crm-card.is-overdue) { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
[dir="rtl"] .crm-kb .kb-card:has(.crm-card.is-overdue) { box-shadow: inset -3px 0 0 var(--danger), var(--shadow); }
.crm-stage-sel { display: none; width: 100%; min-height: 44px; margin-top: 4px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.kb-col[data-col] .kb-add { min-width: 34px; }

/* ------------------------------------------------------------ list (phone cards) */
.crm-list[hidden] { display: none; }
.crm-c-main { min-width: 150px; }
.crm-src { display: grid; justify-items: start; gap: 4px; }
.crm-src .badge.crm-camp { max-width: 190px; }
.crm-main { display: grid; gap: 2px; min-width: 0; }
.crm-phone-card { display: none; }
.crm-ph-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
tr.crm-late > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
[dir="rtl"] tr.crm-late > td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.crm-row-actions { display: inline-flex; gap: 2px; }
.crm-c-act { white-space: nowrap; text-align: end; }

/* ------------------------------------------------------------ lead page */
.crm-banners { display: grid; gap: 8px; margin-bottom: 12px; }
.crm-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); font-size: 13.5px; }
.crm-banner > .ico { color: var(--info-ink); margin-top: 2px; }
.crm-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.crm-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.crm-banner.warn > .ico { color: var(--warn-ink); }
.crm-banner.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.crm-banner.danger > .ico { color: var(--danger-ink); }
.crm-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.crm-banner.ok > .ico { color: var(--ok-ink); }
:root:root .crm-banner > .btn { flex: 0 0 auto; margin-inline-start: auto; min-height: 44px; }
.crm-phone-field { display: grid; gap: 8px; }
.crm-phone-field input { width: 100%; }
.crm-phone-links { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-phone-links:empty { display: none; }
.crm-track { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 0 14px 12px; }
.crm-track > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; }
.crm-track[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.crm-track > p { margin-bottom: 10px; }
.crm-quick { display: grid; gap: 8px; }
.crm-conv { margin-bottom: 12px; }
.crm-reasons { margin-bottom: 8px; }
.crm-reasons .chip { cursor: pointer; min-height: 32px; }
.crm-reasons .chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.modal textarea { width: 100%; }

/* product lines */
.crm-lines { display: grid; gap: 10px; grid-column: 1 / -1; }
.crm-lines-list { display: grid; gap: 8px; }
.crm-lines-empty { padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); text-align: center; }
.crm-line { display: grid; grid-template-columns: minmax(0, 1fr) 88px 120px 112px 40px; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.crm-line-prod { min-width: 0; align-self: end; }
.crm-line-f { display: grid; gap: 2px; min-width: 0; }
.crm-line-f.end { justify-items: end; text-align: end; align-self: end; padding-bottom: 8px; }
.crm-in { width: 100%; min-height: 40px; }
.crm-lines-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-lines-foot .num { font-size: 16px; font-variant-numeric: tabular-nums; }
.crm-f-lines { grid-column: 1 / -1; }

/* bottom action bar of the lead page on phones */
.crm-mbar { display: none; }

/* ------------------------------------------------------------ follow-ups */
.crm-fu { display: grid; gap: 18px; margin-top: 12px; }
.crm-fu-group > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.crm-fu-group.tone-danger > h3 { color: var(--danger-ink); }
.crm-fu-group.tone-warn > h3 { color: var(--warn-ink); }
.crm-fu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crm-fu-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.crm-fu-card.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }
[dir="rtl"] .crm-fu-card.is-overdue { box-shadow: inset -3px 0 0 var(--danger); }
.crm-fu-main { display: grid; gap: 6px; min-width: 0; }
.crm-fu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.crm-fu-name { font-weight: 750; font-size: 15px; color: var(--accent-d); overflow-wrap: anywhere; }
.crm-fu-name:hover { text-decoration: underline; }
.crm-fu-what { overflow-wrap: anywhere; }
.crm-fu-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.crm-fu-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 330px; }
:root:root .crm-fu-actions .btn { min-height: 40px; }
:root:root .btn.crm-done { background: var(--ok-soft); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .crm-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crm-bar .search-box { grid-column: 1 / -1; max-width: none; }
  .crm-bar > .grow, .crm-bar > .icon-btn { display: none; }
  .crm-bar > .chip-select, .crm-bar > .btn, .crm-bar > .segmented { min-width: 0; width: 100%; min-height: 44px; }
  .crm-bar > .segmented .seg { flex: 1; }
  .crm-strip .stat-strip { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .crm-strip .stat { flex: 0 0 auto; min-width: 124px; scroll-snap-align: start; }
  .crm-kb .kb-board { scroll-snap-type: x mandatory; scroll-padding-inline: 4px; }
  .crm-kb .kb-col { flex-basis: 86%; max-width: 86%; }
  .crm-stage-sel { display: block; }
  .crm-wa { width: 44px; height: 44px; }
  .crm-card-contact { gap: 10px; }
  :root:root .crm-tel { min-height: 44px; }
  .crm-list .list-body .data-table tr.row { gap: 6px; padding: 14px; }
  .crm-list .list-body .data-table td.crm-c-main { display: block; text-align: start; }
  .crm-list .list-body .data-table td.crm-c-main[data-label]::before { content: none; }
  .crm-list .list-body .data-table tr.crm-late > td:first-child { box-shadow: none; }
  .crm-list .list-body .data-table tr.crm-late { box-shadow: inset 3px 0 0 var(--danger); }
  [dir="rtl"] .crm-list .list-body .data-table tr.crm-late { box-shadow: inset -3px 0 0 var(--danger); }
  .crm-phone-card { display: grid; gap: 6px; margin-top: 6px; }
  .crm-list .list-body .data-table td.crm-c-act { display: flex; justify-content: flex-end; }
  :root:root .crm-row-actions .icon-btn { width: 44px; height: 44px; }
  .crm-line { grid-template-columns: 1fr 1fr; }
  .crm-line-prod { grid-column: 1 / -1; }
  .crm-line-f.end { grid-column: 1; justify-items: start; text-align: start; }
  .crm-line > .icon-btn { justify-self: end; grid-column: 2; width: 44px; height: 44px; }
  .crm-fu-card { grid-template-columns: 1fr; }
  .crm-fu-actions { max-width: none; justify-content: stretch; }
  :root:root .crm-fu-actions .btn { flex: 1 1 calc(50% - 6px); min-height: 44px; }
  .crm-banner { flex-wrap: wrap; }
  :root:root .crm-banner > .btn { flex: 1 1 100%; margin-inline-start: 0; }
  .crm-doc { padding-bottom: 76px; }
  .crm-doc .dh-actions { display: none; }
  .crm-mbar { display: flex; gap: 8px; position: fixed; inset-inline: 0; bottom: var(--bn-h); z-index: 30; padding: 10px max(14px, env(safe-area-inset-left)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  :root:root .crm-mbar .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; padding-inline: 8px; }
  :root:root .crm-mbar .btn.btn-danger-ghost { flex: 0 1 auto; }
}
@media (max-width: 900px) and (max-height: 520px) { .crm-mbar { bottom: 0; } }
/* touch tablets (above the phone breakpoint): the same 44 px call / WhatsApp targets */
@media (pointer: coarse) { .crm-wa { width: 44px; height: 44px; } :root:root .crm-tel { min-height: 44px; } }