/* ============================================================================
   Client Profile  ·  #/crm/<lead_id>
   The one full page record that replaced the CRM lead drawer and the Client
   Health org drawer. Pre live it is a CRM record. Once the lead is linked to a
   client account, health, usage and people appear in the same page.

   Superadmin only. Follows the Apple design standard: soft translucency,
   hairline borders, spring easing, press feedback, restraint.
   Day is the source of truth here; Night lives in theme-dark.css.
   ========================================================================= */

:root{
  --cp-spring: cubic-bezier(.2,.8,.2,1);
  --cp-hair: rgba(15,23,42,.08);
  --cp-hair-strong: rgba(15,23,42,.13);
  --cp-surface: rgba(255,255,255,.72);
  --cp-surface-solid: #fff;
  --cp-ink: #0F172A;
  --cp-ink-soft: #64748B;
  --cp-teal: #0D9488;
  --cp-navy: #011735;
}

.cp{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4px 56px;
  color: var(--cp-ink);
  animation: cp-in .32s var(--cp-spring) both;
}
@keyframes cp-in{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

/* ---------- top bar ---------- */
.cp-bar{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  background: rgba(248,250,252,.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--cp-hair);
}
.cp-bar__spacer{ flex: 1 }
.cp-bar__crumb{
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--cp-ink-soft);
}
.cp-back{
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px 0 10px;
  border: 1px solid var(--cp-hair-strong); border-radius: 999px;
  background: var(--cp-surface-solid);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 13px; font-weight: 600; color: var(--cp-ink); cursor: pointer;
  transition: transform .18s var(--cp-spring), box-shadow .18s var(--cp-spring), background .18s var(--cp-spring);
}
.cp-back::before{ content:'‹'; font-size: 18px; line-height: 1; margin-top: -2px; color: var(--cp-ink-soft) }
.cp-back:hover{ background:#fff; box-shadow: 0 4px 14px rgba(15,23,42,.09) }
.cp-back:active{ transform: scale(.97) }

.cp-livepill{
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(100,116,139,.12); color: #475569;
  border: 1px solid rgba(100,116,139,.18);
}
.cp-livepill.is-live{
  background: rgba(13,148,136,.12); color: #0F766E; border-color: rgba(13,148,136,.26);
}
.cp-livepill.is-live::before{
  content:''; width:6px; height:6px; border-radius:50%; background: var(--cp-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}

/* ---------- hero ---------- */
.cp-hero{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  margin: 18px 0 20px; padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--cp-hair);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -28px rgba(15,23,42,.35),
              inset 0 1px 0 rgba(255,255,255,.9);
}
.cp-hero__id{ display:flex; align-items:center; gap:18px; min-width:0 }
.cp-hero__ring{ flex: 0 0 auto; display:grid; place-items:center }
.cp-hero__avatar{
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(145deg, #2A3F6B, var(--cp-navy));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -12px rgba(1,23,53,.8);
}
.cp-hero__who{ min-width: 0 }
.cp-hero__name{
  font-size: 26px; line-height: 1.12; font-weight: 700; letter-spacing: -.022em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-hero__sub{ margin-top: 4px; font-size: 13px; color: var(--cp-ink-soft) }
.cp-hero__tags{ display:flex; flex-wrap:wrap; gap: 7px; margin-top: 11px }
/* Health chips were styled for the navy drawer header; on the white Day hero they need ink, not white */
html:not(.theme-night) .cp-hero .crm-hchip{
  background: rgba(15,23,42,.045); color: var(--cp-ink-soft, #475569);
  border-color: rgba(15,23,42,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
html:not(.theme-night) .cp-hero .crm-hchip--band{ background: color-mix(in srgb, var(--c, #94A3B8) 85%, #fff); color:#fff; border-color: transparent; box-shadow:none }
.cp-hero__side{ display:flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto }
.cp-hero__contact{ display:flex; gap: 8px }
.cp-hero__actions{ display:flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center }
.cp-stage{ height: 32px; min-width: 156px; font-size: 13px }

.cp-cbtn{
  display:inline-flex; align-items:center; height:32px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--cp-hair-strong);
  background: var(--cp-surface-solid); color: var(--cp-ink);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .18s var(--cp-spring), box-shadow .18s var(--cp-spring);
}
.cp-cbtn:hover{ box-shadow: 0 6px 18px -8px rgba(15,23,42,.35) }
.cp-cbtn:active{ transform: scale(.97) }
.cp-cbtn--wa{ background: rgba(37,211,102,.10); border-color: rgba(37,211,102,.32); color:#128C7E }
.cp-cbtn--email{ background: rgba(13,148,136,.10); border-color: rgba(13,148,136,.3); color:#0F766E }

/* ---------- two column grid ---------- */
.cp-grid{ display: grid; grid-template-columns: 352px minmax(0,1fr); gap: 20px; align-items: start }
.cp-rail{ position: sticky; top: 64px; display: flex; flex-direction: column; gap: 14px }
.cp-col{ min-width: 0 }

/* ---------- cards ---------- */
.cp-card{
  border-radius: 16px; padding: 15px 16px;
  border: 1px solid var(--cp-hair);
  background: var(--cp-surface);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.75);
}
.cp-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 11px }
.cp-card__title{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-soft) }
.cp-card__hint{ font-size: 11px; color: #94A3B8 }
.cp-card__foot{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cp-hair) }
.cp-card--meta{ padding: 12px 16px }
.cp-note{ margin: 0; font-size: 13px; line-height: 1.55; color: #334155 }

.cp-meta{ display:flex; align-items:center; justify-content:space-between; padding: 5px 0; font-size: 12.5px }
.cp-meta span{ color: var(--cp-ink-soft) }
.cp-meta b{ font-weight: 600 }
.cp-fields{ margin: 0 }

.cp-taskstat{ display: grid; grid-template-columns: repeat(3,1fr); gap: 8px }
.cp-taskstat__cell{
  display:flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 9px 4px; border-radius: 11px;
  background: rgba(15,23,42,.035); border: 1px solid var(--cp-hair);
}
.cp-taskstat__cell b{ font-size: 18px; font-weight: 700; letter-spacing: -.02em }
.cp-taskstat__cell span{ font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-ink-soft) }
.cp-taskstat__cell.is-alert{ background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.2) }
.cp-taskstat__cell.is-alert b{ color: #B91C1C }

/* ---------- tabs ---------- */
.cp-tabs{ margin-bottom: 14px; position: sticky; top: 56px; z-index: 12 }
.cp-tabcount{
  display:inline-grid; place-items:center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; background: var(--cp-teal); color:#fff; font-size: 10.5px; font-weight: 700;
}
.cp-tabbody{ min-height: 240px }

/* ---------- overview ---------- */
/* One divided strip, not six floating boxes. The 1px grid gap over a hairline
   coloured container draws the dividers, so no cell carries its own border and
   nothing reserves height for a sub line that is not there. */
.cp-snap{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px,1fr));
  gap: 1px; margin-bottom: 16px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cp-hair); background: var(--cp-hair);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.cp-snap__cell{
  display:flex; flex-direction: column; gap: 2px; justify-content: flex-start;
  padding: 10px 13px 11px; min-width: 0;
  background: var(--cp-surface-solid);
}
.cp-snap__label{ font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-soft) }
.cp-snap__value{ font-size: 15px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cp-snap__sub{ font-size: 11px; line-height: 1.35; color: var(--cp-ink-soft) }

.cp-prelive{
  padding: 22px 24px; border-radius: 16px; text-align: center;
  border: 1px dashed rgba(15,23,42,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,250,252,.6));
}
.cp-prelive__title{ font-size: 15px; font-weight: 650; letter-spacing: -.012em }
.cp-prelive__body{ margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--cp-ink-soft) }

/* ---------- tasks ---------- */
.cp-card--newtask{ margin-bottom: 14px }
.cp-taskform{ display: grid; grid-template-columns: minmax(0,1fr) 168px 250px 116px auto; gap: 8px }
.cp-taskform__notes{ margin-top: 8px; width: 100% }
.cp-taskfilters{ display:flex; gap: 7px; margin: 0 0 12px }
.cp-tf{
  height: 28px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cp-hair-strong); background: var(--cp-surface-solid);
  font-size: 12.5px; font-weight: 600; color: var(--cp-ink-soft);
  transition: transform .18s var(--cp-spring), background .18s var(--cp-spring), color .18s var(--cp-spring);
}
.cp-tf:active{ transform: scale(.96) }
.cp-tf.is-on{ background: var(--cp-navy); border-color: var(--cp-navy); color:#fff }

.cp-taskgroup{ margin-bottom: 18px }
.cp-taskgroup__head{
  display:flex; align-items:center; gap: 8px; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-soft);
}
.cp-taskgroup__head span{
  display:inline-grid; place-items:center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgba(15,23,42,.07); color: #475569; font-size: 10.5px; letter-spacing: 0;
}

.cp-task{
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  border: 1px solid var(--cp-hair); background: var(--cp-surface-solid);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .2s var(--cp-spring), box-shadow .2s var(--cp-spring), opacity .2s var(--cp-spring);
}
.cp-task:hover{ box-shadow: 0 8px 22px -14px rgba(15,23,42,.45) }
.cp-task.is-done{ opacity: .52 }
.cp-task.is-done .cp-task__title{ text-decoration: line-through }
.cp-task.is-overdue{ border-color: rgba(220,38,38,.28); background: rgba(254,242,242,.75) }
.cp-task__tick{
  width: 20px; height: 20px; margin-top: 1px; padding: 0; cursor: pointer;
  border-radius: 7px; border: 1.5px solid rgba(15,23,42,.24); background: #fff;
  display:grid; place-items:center;
  transition: transform .18s var(--cp-spring), background .18s var(--cp-spring), border-color .18s var(--cp-spring);
}
.cp-task__tick:active{ transform: scale(.9) }
.cp-task__tick span{ width: 9px; height: 9px; border-radius: 3px; background: transparent; transition: background .18s var(--cp-spring) }
.cp-task.is-done .cp-task__tick{ background: var(--cp-teal); border-color: var(--cp-teal) }
.cp-task.is-done .cp-task__tick span{ background: #fff }
.cp-task__body{ min-width: 0 }
.cp-task__title{ font-size: 14px; font-weight: 600; letter-spacing: -.008em; line-height: 1.35 }
.cp-task__notes{ margin-top: 3px; font-size: 12.5px; color: var(--cp-ink-soft); line-height: 1.5 }
.cp-task__meta{ display:flex; flex-wrap: wrap; align-items:center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: var(--cp-ink-soft) }
.cp-task__who{
  padding: 2px 9px; border-radius: 999px;
  background: rgba(15,23,42,.05); border: 1px solid var(--cp-hair); font-weight: 600; color: #475569;
}
.cp-task__due{ font-weight: 600 }
.cp-task.is-overdue .cp-task__due{ color: #B91C1C }
.cp-task__pri{ padding: 2px 8px; border-radius: 999px; font-weight: 700; text-transform: capitalize }
.cp-task__pri--high{ background: rgba(220,38,38,.1); color: #B91C1C }
.cp-task__pri--low{ background: rgba(100,116,139,.12); color: #64748B }
.cp-task__del{
  width: 24px; height: 24px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: #94A3B8; font-size: 12px; line-height: 1;
  opacity: 0; transition: opacity .18s var(--cp-spring), background .18s var(--cp-spring), color .18s var(--cp-spring);
}
.cp-task:hover .cp-task__del{ opacity: 1 }
.cp-task__del:hover{ background: rgba(220,38,38,.1); color: #B91C1C }
.cp-task__del:active{ transform: scale(.9) }

/* ---------- people ---------- */
.cp-dot{
  display:inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(100,116,139,.35);
}
.cp-dot.is-on{ background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.18) }

.cp-topuser{
  padding: 18px 20px; margin-bottom: 16px; border-radius: 16px;
  border: 1px solid rgba(13,148,136,.22);
  background: linear-gradient(145deg, rgba(13,148,136,.09), rgba(13,148,136,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.cp-topuser__tag{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0F766E }
.cp-topuser__name{ display:flex; align-items:center; gap: 9px; margin-top: 5px; font-size: 20px; font-weight: 700; letter-spacing: -.02em }
.cp-topuser__stats{ display:flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; font-size: 12.5px; color: #475569 }
.cp-topuser__stats b{ font-weight: 700; color: var(--cp-ink) }

.cp-topuser__idle{
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(13,148,136,.16);
  font-size: 12px; color: #B45309;
}

.cp-block{ margin-top: 18px }
.cp-block:first-child{ margin-top: 0 }
.cp-block__title{
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cp-ink-soft);
}
.cp-block__title small{ text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px }

/* ---------- edit sub page ---------- */
.cp--edit{ max-width: 860px }

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .cp-grid{ grid-template-columns: 1fr }
  .cp-rail{ position: static }
  .cp-taskform{ grid-template-columns: minmax(0,1fr) 1fr }
}
@media (max-width: 820px){
  .cp-hero{ flex-direction: column; align-items: stretch; gap: 16px }
  .cp-hero__side{ align-items: stretch }
  .cp-hero__contact, .cp-hero__actions{ justify-content: flex-start; flex-wrap: wrap }
  .cp-hero__name{ font-size: 22px; white-space: normal }
  .cp-taskform{ grid-template-columns: 1fr }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .cp{ animation: none }
  .cp-back, .cp-cbtn, .cp-task, .cp-tf, .cp-task__tick{ transition: opacity .15s ease }
  .cp-back:active, .cp-cbtn:active, .cp-tf:active, .cp-task__tick:active{ transform: none }
}
@media (prefers-reduced-transparency: reduce){
  .cp-bar{ background: #F8FAFC; backdrop-filter: none; -webkit-backdrop-filter: none }
  .cp-card, .cp-snap__cell{ background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none }
}

/* ---------- 24 Sep 2026 polish pass ---------- */
/* Stage chip in the hero. The old flat 20% tint of the stage colour was
   unreadable on white for the amber trial stage. Tinted fill, full-strength
   text, hairline in the same hue. */
.cp-stagechip{
  display:inline-flex; align-items:center; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--cp-stagec, #475569);
  background: color-mix(in srgb, var(--cp-stagec, #475569) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-stagec, #475569) 34%, transparent);
}

/* Details values keep whole tokens together. crm.css sets `word-break: break-word`,
   which lets the grid column shrink below the widest word and split an email as
   "demo@brokerr.ap / p". `overflow-wrap: break-word` does not feed min-content
   sizing, so the column stays at least as wide as the longest token. */
.cp-fields .crm-dr-field__value,
.cp-fields .crm-dr-field__value a,
.cp-rail .crm-dr-field__value,
.cp-rail .crm-dr-field__value a{ word-break: normal; overflow-wrap: break-word }

/* Snapshot cells clamp to two lines instead of truncating mid word. */
.cp-snap__sub{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Details in the rail: a divided row list, not a grid of boxes. Twelve plus
   fields as bordered cards made the rail mostly empty padding, and an unfilled
   field cost as much height as a filled one. Each field is now one line,
   label left, value right, with a hairline between. */
.cp-fields{
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--cp-hair); background: var(--cp-surface-solid);
}
.cp-fields .crm-dr-field{
  display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: baseline; gap: 10px;
  padding: 7px 11px; border: 0; border-radius: 0; background: transparent;
}
.cp-fields .crm-dr-field + .crm-dr-field{ box-shadow: inset 0 1px 0 var(--cp-hair) }
.cp-fields .crm-dr-field__label{
  margin: 0; font-size: 10px; letter-spacing: .05em; line-height: 1.5;
  overflow-wrap: break-word;
}
.cp-fields .crm-dr-field__value{ font-size: 12.5px; font-weight: 550; line-height: 1.45; text-align: right }
.cp-fields .crm-dr-field__ph{ font-size: 11.5px }
.cp-fields .crm-dr-field--edit:hover{
  background: rgba(15,23,42,.035); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--cp-hair);
}
.cp-fields .crm-dr-field--edit:focus-visible,
.cp-fields .crm-dr-field--editing{
  border-color: transparent; background: rgba(13,148,136,.07);
  box-shadow: inset 0 0 0 1px var(--cp-teal);
}
.cp-fields .crm-dr-field__input{ text-align: right; font-size: 12.5px !important; font-weight: 550 !important }
.cp-fields .crm-dr-field__check{ margin-left: auto; display: block }