/* ====================================================================
   crm-design.css — CRM design-system atoms (UI track, v0.9.x)
   --------------------------------------------------------------------
   Six reusable atoms shared by the board, entity modal, Company 360 and
   dashboard. Built entirely on the additive tokens added to styles.css
   :root (--signal-*, --lane-*, --border-soft, --r-pill, --touch, …).
   Spec: docs/DESIGN Input - KanMail CRM System/KanMail CRM Wireframes §01.

   Rules honoured here:
   • colour is never the only signal — every badge carries a text label
   • AA contrast: text #f1f5f9≈11.7:1, muted #94a3b8≈4.9:1 on --bg-card
   • ≤768 px every interactive atom grows to --touch (44 px)
   • the only ambient motion is the "In work" dot; prefers-reduced-motion
     disables it (and any confetti elsewhere)
   ==================================================================== */

/* --- color-stable avatar ------------------------------------------------
   Background colour is set inline by crmFormat.avatarColor() (hash of the
   email/name); this class only owns shape + typography. Dark ink sits on
   the bright palette swatches for contrast. */
.crm-avatar {
  --_size: 28px;
  width: var(--_size);
  height: var(--_size);
  border-radius: var(--r-pill);
  background: var(--lane-active);          /* fallback; overridden inline */
  color: #0f172a;
  font-weight: 800;
  font-size: calc(var(--_size) * 0.36);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  text-transform: uppercase;
  user-select: none;
}
.crm-avatar.crm-avatar-sm { --_size: 22px; }
.crm-avatar.crm-avatar-md { --_size: 28px; }
.crm-avatar.crm-avatar-lg { --_size: 30px; }
.crm-avatar.crm-avatar-xl { --_size: 48px; border-radius: 14px; font-size: 17px; }

/* --- automatic signal badge --------------------------------------------
   <span class="crm-signal" data-state="contact|work|idle">…label…</span>
   The dot is the ::before; "work" pulses (reduced-motion off). */
.crm-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.crm-signal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  flex: none;
}
.crm-signal[data-state="contact"] { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.crm-signal[data-state="contact"]::before { background: var(--signal-contact); }
.crm-signal[data-state="work"]    { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; }
.crm-signal[data-state="work"]::before { background: var(--signal-work); animation: crmPulse 2s ease-in-out infinite; }
.crm-signal[data-state="idle"]    { background: rgba(100, 116, 139, 0.18); color: var(--text-secondary); }
.crm-signal[data-state="idle"]::before { background: var(--lane-dormant); }

@keyframes crmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- count chip ---------------------------------------------------------
   <span class="crm-chip" style="--_dot:var(--lane-active)">2 Todo</span>
   Soft neutral pill; the lead dot colour comes from --_dot (lane colour). */
.crm-chip {
  --_dot: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid var(--border-soft);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.crm-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--_dot);
  flex: none;
}
.crm-chip.crm-chip-nodot::before { display: none; }

/* --- money cell ---------------------------------------------------------
   Tabular mono; .is-overdue flips to soft danger with an overdue sub-line. */
.crm-money {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-money.is-muted   { color: var(--text-secondary); font-weight: 600; }
.crm-money.is-overdue { color: var(--danger-soft); }
.crm-money-sub {
  font-size: 9.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.crm-money-sub.is-overdue { color: var(--danger-soft); }

/* --- stage chip (outlined, lane colour) --------------------------------
   <span class="crm-stage" style="--_stage:var(--lane-active)">Active</span> */
.crm-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--_stage, var(--lane-active));
  color: #c7d2fe;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.crm-stage::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--_stage, var(--lane-active));
  flex: none;
}
.crm-stage.crm-stage-nodot::before { display: none; }

/* --- one-tap email button ----------------------------------------------
   34 px on desktop, grows to --touch ≤768 px. Always stopPropagation in JS
   so it never opens whatever sits beneath it. */
.crm-mailbtn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid #3b5a8a;
  color: #93c5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.crm-mailbtn:hover { background: rgba(59, 130, 246, 0.26); }
.crm-mailbtn:active { background: rgba(59, 130, 246, 0.34); }
.crm-mailbtn svg { width: 16px; height: 16px; display: block; }

/* --- shared focus ring (a11y) ------------------------------------------ */
.crm-avatar:focus-visible,
.crm-signal:focus-visible,
.crm-chip:focus-visible,
.crm-stage:focus-visible,
.crm-mailbtn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* --- skeleton shimmer (board lazy-enrichment placeholder) -------------- */
.crm-skel {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.10);
  border-radius: 6px;
  color: transparent !important;
}
.crm-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.16), transparent);
  animation: crmShimmer 1.3s ease-in-out infinite;
}

@keyframes crmShimmer { 100% { transform: translateX(100%); } }

/* --- touch sizing ≤768 px ---------------------------------------------- */
@media (max-width: 768px) {
  .crm-mailbtn { width: var(--touch); height: var(--touch); border-radius: 11px; }
  .crm-mailbtn svg { width: 18px; height: 18px; }
  .crm-signal,
  .crm-chip { height: 24px; font-size: 11px; }
}

/* --- reduced motion: kill every ambient animation ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .crm-signal[data-state="work"]::before { animation: none; }
  .crm-skel::after { animation: none; }
}