/* ck-contacts-o6.css — O6 look for the Contacts list (#/contacts) and the contact profile (#/contact/<id>).
   2026-10-22. INTERFACE ONLY: colours, borders, radii, shadows. No layout, no sizes, no display/visibility.
   Scope: both screens render inside contacts.js roots that carry class "crm-font dt-page"
   (the list root also has id="ck-contacts"). Nothing here applies outside those roots.
   Uses the ck-theme.css tokens with light fallbacks, so it works before ck-theme.css ships.
   Inline-style colours are matched on the browser's serialised style text (rgb()/rgba()). */

/* ---------- page + local palette (component CSS vars re-pointed inside the page only) ---------- */
.crm-font.dt-page.dt-page {
  background: var(--ck-bg, #f5f4fa) !important;
  --purple: var(--ck-blue, #1d8bff);
  --indigo: var(--ck-blue, #1d8bff);
}

/* ---------- profile: sticky Back / Prev / Next / Save bar ---------- */
.crm-font.dt-page.dt-page:not(#ck-contacts) > div[style*="position: sticky"] {
  background: var(--ck-bg, #f5f4fa) !important;
  border-bottom: 1px solid var(--ck-line, #ececf3) !important;
}

/* ---------- cards ---------- */
.crm-font.dt-page.dt-page .panel-card {
  background: var(--ck-card, #fff) !important;
  border: 1px solid var(--ck-line, #ececf3) !important;
  border-radius: 18px !important;
  box-shadow: var(--ck-shadow, 0 6px 24px rgba(40, 20, 90, .08)) !important;
}
.crm-font.dt-page.dt-page .section-header { background: var(--ck-card-2, #f8f8fc); border-bottom-color: var(--ck-line, #ececf3); }
.crm-font.dt-page.dt-page .dt-prop-block,
.crm-font.dt-page.dt-page .dt-stat-card { background: var(--ck-card-2, #f8f8fc); border-color: var(--ck-line, #ececf3); border-radius: 14px; }
.crm-font.dt-page.dt-page .note-card { background: var(--ck-card-2, #f8f8fc); border-radius: 12px; }
.crm-font.dt-page.dt-page .note-card-purple { border-left-color: var(--ck-blue, #1d8bff); }

/* hard-coded light surfaces/borders inside the page -> theme tokens (same look in light, ready for dark) */
.crm-font.dt-page.dt-page [style*="background: rgb(255, 255, 255)"] { background: var(--ck-card, #fff) !important; }
.crm-font.dt-page.dt-page [style*="background: rgb(248, 250, 252)"],
.crm-font.dt-page.dt-page [style*="background: rgb(241, 245, 249)"] { background: var(--ck-card-2, #f8f8fc) !important; }
.crm-font.dt-page.dt-page [style*="border: 1px solid rgb(226, 232, 240)"],
.crm-font.dt-page.dt-page [style*="border: 1.5px solid rgb(226, 232, 240)"] { border-color: var(--ck-line, #ececf3) !important; }
.crm-font.dt-page.dt-page [style*="border-bottom: 1px solid rgb(226, 232, 240)"] { border-bottom-color: var(--ck-line, #ececf3) !important; }
.crm-font.dt-page.dt-page [style*="border-top: 1px solid rgb(226, 232, 240)"] { border-top-color: var(--ck-line, #ececf3) !important; }

/* ---------- buttons ---------- */
.crm-font.dt-page.dt-page .crm-btn.btn-pink,
.crm-font.dt-page.dt-page .crm-btn.btn-blue,
.crm-font.dt-page.dt-page .crm-btn.btn-purple,
.crm-font.dt-page.dt-page .btn-add-gradient-pink,
.crm-font.dt-page.dt-page button[style*="background: rgb(37, 99, 235)"],
.crm-font.dt-page.dt-page button[style*="background: rgb(124, 58, 237)"],
.crm-font.dt-page.dt-page button[style*="background: rgb(109, 40, 217)"] {
  background: var(--ck-grad, linear-gradient(90deg, #e8488a, #1d8bff)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.crm-font.dt-page.dt-page .crm-btn.btn-pink *,
.crm-font.dt-page.dt-page .crm-btn.btn-blue *,
.crm-font.dt-page.dt-page .crm-btn.btn-purple *,
.crm-font.dt-page.dt-page .btn-add-gradient-pink * { color: #fff !important; }
.crm-font.dt-page.dt-page .crm-btn.btn-pink:hover,
.crm-font.dt-page.dt-page .crm-btn.btn-blue:hover,
.crm-font.dt-page.dt-page .crm-btn.btn-purple:hover,
.crm-font.dt-page.dt-page .btn-add-gradient-pink:hover { box-shadow: 0 8px 20px rgba(29, 139, 255, .28) !important; }
.crm-font.dt-page.dt-page .crm-btn.btn-ghost {
  background: var(--ck-card, #fff);
  border: 1px solid var(--ck-line, #ececf3);
  color: var(--ck-ink, #15151f);
}
.crm-font.dt-page.dt-page .crm-btn.btn-ghost:hover { border-color: var(--ck-tab-line, #38bdf8); color: var(--ck-tab-ink, #0b2f6b); box-shadow: none; }
.crm-font.dt-page.dt-page .crm-btn:hover { box-shadow: 0 6px 16px rgba(40, 20, 90, .10); }

/* ---------- inputs ---------- */
.crm-font.dt-page.dt-page .crm-input,
.crm-font.dt-page.dt-page .crm-select,
.crm-font.dt-page.dt-page input[type="text"],
.crm-font.dt-page.dt-page input[type="email"],
.crm-font.dt-page.dt-page input[type="number"],
.crm-font.dt-page.dt-page input[type="date"],
.crm-font.dt-page.dt-page input[type="search"],
.crm-font.dt-page.dt-page input[type="tel"],
.crm-font.dt-page.dt-page textarea,
.crm-font.dt-page.dt-page select {
  background-color: var(--ck-input-bg, #fff) !important;
  border-color: var(--ck-input-line, #e3e6ef) !important;
  color: var(--ck-ink, #15151f) !important;
}
.crm-font.dt-page.dt-page .crm-input,
.crm-font.dt-page.dt-page .crm-select { border-radius: 10px; }
.crm-font.dt-page.dt-page .crm-input:focus,
.crm-font.dt-page.dt-page .crm-select:focus,
.crm-font.dt-page.dt-page input[type="text"]:focus,
.crm-font.dt-page.dt-page input[type="email"]:focus,
.crm-font.dt-page.dt-page input[type="number"]:focus,
.crm-font.dt-page.dt-page input[type="date"]:focus,
.crm-font.dt-page.dt-page input[type="search"]:focus,
.crm-font.dt-page.dt-page input[type="tel"]:focus,
.crm-font.dt-page.dt-page textarea:focus,
.crm-font.dt-page.dt-page select:focus {
  border-color: var(--ck-blue, #1d8bff) !important;
  box-shadow: 0 0 0 3px rgba(29, 139, 255, .18) !important;
  outline: none;
}
.crm-font.dt-page.dt-page input[type="checkbox"] { accent-color: var(--ck-blue, #1d8bff); }

/* ---------- profile: SMS / Email / AI Call / ... / Notes / Tasks / Opps tab row ---------- */
.crm-font.dt-page.dt-page div[style*="repeat(8, 1fr)"] > button {
  background: var(--ck-card, #fff) !important;
  border-color: var(--ck-line, #ececf3) !important;
  color: var(--ck-muted, #6c6c80) !important;
  border-radius: 12px !important;
}
.crm-font.dt-page.dt-page div[style*="repeat(8, 1fr)"] > button:hover { color: var(--ck-ink, #15151f) !important; }
.crm-font.dt-page.dt-page div[style*="repeat(8, 1fr)"] > button:not([style*="background: transparent"]) {
  background: var(--ck-tab-bg, linear-gradient(90deg, #e6f6ff, #f2f8ff)) !important;
  border-color: var(--ck-tab-line, #38bdf8) !important;
  color: var(--ck-tab-ink, #0b2f6b) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16), 0 4px 14px rgba(29, 139, 255, .16) !important;
}

/* ---------- purple accents -> blue (status green/red/amber untouched) ---------- */
/* text: #7C3AED, #6D28D9, #8B5CF6, #A855F7, #4F46E5 */
.crm-font.dt-page.dt-page [style^="color: rgb(124, 58, 237)"], .crm-font.dt-page.dt-page [style*=" color: rgb(124, 58, 237)"],
.crm-font.dt-page.dt-page [style^="color: rgb(139, 92, 246)"], .crm-font.dt-page.dt-page [style*=" color: rgb(139, 92, 246)"],
.crm-font.dt-page.dt-page [style^="color: rgb(168, 85, 247)"], .crm-font.dt-page.dt-page [style*=" color: rgb(168, 85, 247)"],
.crm-font.dt-page.dt-page [style^="color: rgb(79, 70, 229)"], .crm-font.dt-page.dt-page [style*=" color: rgb(79, 70, 229)"] { color: var(--ck-blue, #1d8bff) !important; }
.crm-font.dt-page.dt-page [style^="color: rgb(109, 40, 217)"], .crm-font.dt-page.dt-page [style*=" color: rgb(109, 40, 217)"] { color: var(--ck-tab-ink, #0b2f6b) !important; }
/* solid purple chips / count bubbles */
.crm-font.dt-page.dt-page [style*="background: rgb(124, 58, 237)"],
.crm-font.dt-page.dt-page [style*="background: rgb(109, 40, 217)"],
.crm-font.dt-page.dt-page [style*="background: rgb(168, 85, 247)"] { background: var(--ck-blue, #1d8bff) !important; }
.crm-font.dt-page.dt-page [style*="background: rgb(196, 181, 253)"] { background: #b9dcff !important; }
/* purple gradients */
.crm-font.dt-page.dt-page [style*="gradient"][style*="rgb(124, 58, 237)"],
.crm-font.dt-page.dt-page [style*="gradient"][style*="rgb(168, 85, 247)"] { background: var(--ck-grad, linear-gradient(90deg, #e8488a, #1d8bff)) !important; }
/* lavender panels (B.R.I.E.N. next step, goal bar, workflow chip ...) */
.crm-font.dt-page.dt-page [style*="background: rgb(245, 243, 255)"],
.crm-font.dt-page.dt-page [style*="background: rgb(250, 245, 255)"],
.crm-font.dt-page.dt-page [style*="background: rgb(250, 249, 255)"],
.crm-font.dt-page.dt-page [style*="background: rgb(238, 242, 255)"],
.crm-font.dt-page.dt-page [style*="gradient"][style*="rgb(250, 245, 255)"] { background: var(--ck-tab-bg, linear-gradient(90deg, #e6f6ff, #f2f8ff)) !important; }
.crm-font.dt-page.dt-page [style*="background: rgba(124, 58, 237"] { background: rgba(29, 139, 255, .10) !important; }
.crm-font.dt-page.dt-page [style*="solid rgb(221, 214, 254)"],
.crm-font.dt-page.dt-page [style*="solid rgb(237, 233, 254)"],
.crm-font.dt-page.dt-page [style*="solid rgb(199, 210, 254)"],
.crm-font.dt-page.dt-page [style*="solid rgba(124, 58, 237"] { border-color: rgba(56, 189, 248, .45) !important; }
.crm-font.dt-page.dt-page .count-badge-purple { background: var(--ck-blue, #1d8bff); }
.crm-font.dt-page.dt-page .pipeline-fill { background: var(--ck-grad, linear-gradient(90deg, #e8488a, #1d8bff)); }
.crm-font.dt-page.dt-page .pipeline-dot.passed { background: var(--ck-blue, #1d8bff); border-color: var(--ck-blue, #1d8bff); }
.crm-font.dt-page.dt-page .pipeline-stage-label.passed { color: var(--ck-blue, #1d8bff); }

/* ---------- CONTACTS LIST (#ck-contacts) ---------- */
#ck-contacts.crm-font.dt-page .ckc-mono { color: var(--ck-muted, #6c6c80); }
#ck-contacts.crm-font.dt-page .ckc-h1 { color: var(--ck-ink, #15151f); }
#ck-contacts.crm-font.dt-page .ckc-btn { background: var(--ck-card, #fff); border-color: var(--ck-line, #ececf3); color: var(--ck-ink, #15151f); }
#ck-contacts.crm-font.dt-page .ckc-btn:hover { border-color: var(--ck-tab-line, #38bdf8); }
#ck-contacts.crm-font.dt-page .ckc-btn.primary { background: var(--ck-grad, linear-gradient(90deg, #e8488a, #1d8bff)); color: #fff; border: none; box-shadow: 0 8px 20px rgba(29, 139, 255, .26); }
#ck-contacts.crm-font.dt-page .ckc-card {
  background: var(--ck-card, #fff);
  border-color: var(--ck-line, #ececf3);
  border-radius: 18px;
  box-shadow: var(--ck-shadow, 0 6px 24px rgba(40, 20, 90, .08));
}
#ck-contacts.crm-font.dt-page .ckc-seg { background: var(--ck-card-2, #f8f8fc); }
#ck-contacts.crm-font.dt-page .ckc-seg button { color: var(--ck-muted, #6c6c80); }
#ck-contacts.crm-font.dt-page .ckc-seg button.on {
  background: var(--ck-tab-bg, linear-gradient(90deg, #e6f6ff, #f2f8ff));
  color: var(--ck-tab-ink, #0b2f6b);
  box-shadow: inset 0 0 0 1px var(--ck-tab-line, #38bdf8), 0 0 0 3px rgba(56, 189, 248, .14), 0 4px 12px rgba(29, 139, 255, .14);
}
#ck-contacts.crm-font.dt-page .ckc-seg button.on i { color: var(--ck-blue, #1d8bff); }
#ck-contacts.crm-font.dt-page .ckc-search,
#ck-contacts.crm-font.dt-page .ckc-select,
#ck-contacts.crm-font.dt-page .ckc-pp select {
  background-color: var(--ck-input-bg, #fff) !important;
  border-color: var(--ck-input-line, #e3e6ef) !important;
  color: var(--ck-ink, #15151f) !important;
}
#ck-contacts.crm-font.dt-page .ckc-search:focus,
#ck-contacts.crm-font.dt-page .ckc-select:focus,
#ck-contacts.crm-font.dt-page .ckc-pp select:focus {
  border-color: var(--ck-blue, #1d8bff) !important;
  box-shadow: 0 0 0 3px rgba(29, 139, 255, .18) !important;
}
#ck-contacts.crm-font.dt-page thead th {
  background: var(--ck-card-2, #f8f8fc) !important;
  color: var(--ck-muted, #6c6c80) !important;
  border-bottom: 1px solid var(--ck-line, #ececf3) !important;
}
#ck-contacts.crm-font.dt-page tbody td { border-bottom-color: var(--ck-line, #ececf3) !important; color: var(--ck-ink, #15151f) !important; }
#ck-contacts.crm-font.dt-page tbody tr.contact-row:hover { background: rgba(29, 139, 255, .045) !important; }
#ck-contacts.crm-font.dt-page .ckc-nm { color: var(--ck-ink, #15151f); }
#ck-contacts.crm-font.dt-page .ckc-sub { color: var(--ck-muted, #6c6c80); }
#ck-contacts.crm-font.dt-page .ckc-tag { background: var(--ck-card-2, #f8f8fc); border: 1px solid var(--ck-line, #ececf3); color: var(--ck-ink, #15151f); border-radius: 999px; }
#ck-contacts.crm-font.dt-page .ckc-act { background: var(--ck-card, #fff); border-color: var(--ck-line, #ececf3); }
#ck-contacts.crm-font.dt-page .ckc-foot { border-top-color: var(--ck-line, #ececf3); color: var(--ck-muted, #6c6c80); }
#ck-contacts.crm-font.dt-page .ckc-foot b { color: var(--ck-ink, #15151f); }
#ck-contacts.crm-font.dt-page .ckc-pg button { background: var(--ck-card, #fff); border-color: var(--ck-line, #ececf3); color: var(--ck-ink, #15151f); }
#ck-contacts.crm-font.dt-page .ckc-pg button.on {
  background: var(--ck-tab-bg, linear-gradient(90deg, #e6f6ff, #f2f8ff));
  border-color: var(--ck-tab-line, #38bdf8);
  color: var(--ck-tab-ink, #0b2f6b);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
}
#ck-contacts.crm-font.dt-page input[type="checkbox"] { accent-color: var(--ck-blue, #1d8bff); }