/* ============================================================
   STICKERBOOK ADMIN - CREATOR CRM (admin-crm.js)
   Builds on the Reports styles in admin-theme.css (rp-*) and the
   Users stat tiles (us-stats). Every class here starts with cr-.
   ============================================================ */

/* Page */
.cr-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cr-search { max-width: 520px; }
.btn.rp-b.cr-addbtn, .cr-add .btn.rp-b, .cr-sug .btn.rp-b, .cr-next .btn.rp-b, .cr-acc .btn.rp-b, #modal .modal-footer .btn.rp-b { gap: 6px; text-decoration: none; }
.btn.rp-b .sb-ico { width: 14px; height: 14px; }
.cr-hint { font-size: 11px; color: var(--sb-muted); line-height: 1.45; }
.cr-full { flex-basis: 100%; }
.cr-n { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--sb-surface-2); color: var(--sb-text-2); }
.cr-n.hot { background: var(--sb-amber-soft); color: var(--sb-amber); }
.rp-chip.on .cr-n { background: rgba(255,255,255,0.2); color: #fff; }
.cr-chips { margin-bottom: 12px; }
.cr-num { font-size: 10px; font-weight: 600; color: var(--sb-muted); white-space: nowrap; }

/* Quick add */
.cr-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--sb-surface); border: 1px solid var(--sb-accent); box-shadow: 0 0 0 3px var(--sb-accent-soft); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.cr-add .rp-input { flex: 1 1 260px; width: auto; }

/* Individual / business toggle */
.cr-seg { display: inline-flex; background: var(--sb-surface-2); border-radius: 9px; padding: 3px; flex-shrink: 0; }
.cr-seg button { border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--sb-muted); padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.cr-seg button.on { background: var(--sb-surface); color: var(--sb-text); box-shadow: 0 0 0 1px var(--sb-border); }

/* Possible matches */
.cr-sug { background: var(--sb-surface); border: 1px solid rgba(15,118,110,0.35); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.cr-sug.cr-mb { margin-bottom: 8px; }
.cr-sug-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(15,118,110,0.1); color: #0F766E; font-size: 12px; font-weight: 600; }
.cr-sug-h .sb-ico { width: 15px; height: 15px; }
.cr-sug-r { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--sb-border); flex-wrap: wrap; font-size: 12px; color: var(--sb-text-2); }
.cr-sug-r.cr-first { border-top: none; }
.cr-sug-r > div { flex: 1 1 220px; min-width: 0; }
.cr-sug-r b { color: var(--sb-text); }
.cr-sug-r small { display: block; font-size: 11px; color: var(--sb-muted); margin-top: 1px; word-break: break-word; }
.cr-sug-b { display: flex; gap: 6px; flex-wrap: wrap; }

/* Stage colors */
.cr-st-lead { background: var(--sb-surface-2); color: #52525B; }
.cr-st-contacted { background: rgba(37,99,235,0.1); color: #1D4ED8; }
.cr-st-talking { background: var(--sb-accent-soft); color: var(--sb-accent); }
.cr-st-signed { background: rgba(15,118,110,0.1); color: #0F766E; }
.cr-st-active { background: #0F766E; color: #fff; }
.cr-st-notnow { background: var(--sb-amber-soft); color: var(--sb-amber); }
.cr-st-passed { background: var(--sb-surface-2); color: #A1A1AA; }
.cr-st-dnc { background: var(--sb-red-soft); color: var(--sb-red); }

/* List */
.cr-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--sb-accent-soft); color: var(--sb-accent); font-size: 12px; font-weight: 700; }
.cr-av.cr-biz { border-radius: 8px; background: rgba(15,118,110,0.1); color: #0F766E; }
.cr-av.cr-unk { background: var(--sb-surface-2); color: var(--sb-muted); }
.cr-av-lg { width: 48px; height: 48px; font-size: 18px; }
.cr-av-lg.cr-biz { border-radius: 12px; }
.cr-nm { display: flex; flex-direction: column; min-width: 0; }
.cr-nm b { font-size: 13px; font-weight: 600; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cr-nm b.cr-desc { font-weight: 500; font-style: italic; color: var(--sb-text-2); }
.cr-nm > span { font-size: 11px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cr-nx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cr-nx-t { font-size: 12px; color: var(--sb-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.cr-acct { font-size: 12px; font-weight: 600; color: #0F766E; }
.cr-table td { white-space: nowrap; }
.cr-item-top { display: flex; align-items: center; gap: 10px; }
.cr-item-top .cr-who { flex: 1; }
.rp-item .cr-nx-t { white-space: normal; max-width: none; }

/* Panel */
.cr-head { display: flex; align-items: center; gap: 12px; }
.cr-head .cr-nm { flex: 1; }
.cr-head .cr-nm b { font-size: 16px; white-space: normal; max-width: none; }
.cr-head .cr-nm > span { white-space: normal; max-width: none; }
.cr-numbtn { flex-shrink: 0; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-2); font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.cr-numbtn:hover { background: var(--sb-surface-2); }
.cr-dnc { border-radius: 10px; padding: 9px 12px; font-size: 12px; line-height: 1.5; background: var(--sb-red-soft); color: #991B1B; }
.cr-side { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--sb-border); }
.cr-row { display: flex; gap: 8px; align-items: center; }
.cr-row.cr-top { align-items: flex-start; }
.cr-row > .rp-input, .cr-row > .rp-select { flex: 1; min-width: 0; }
.cr-row > .rp-select.cr-kind { flex: 0 0 128px; }
.cr-row > .cr-date { flex: 0 1 170px; }
.cr-sp { flex: 1; }
.cr-mt { margin-top: 8px; }
.cr-stack { display: flex; flex-direction: column; gap: 10px; }
.cr-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cr-fld > span { font-size: 11px; font-weight: 600; color: var(--sb-text-2); }
.cr-grow { flex: 1; }
.cr-next { border: 1px solid var(--sb-border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cr-next.cr-has { background: var(--sb-surface-2); border-color: transparent; }
.cr-next.cr-has b { font-size: 13px; }
.cr-box { border: 1px solid var(--sb-border); border-radius: 10px; overflow: hidden; }
.cr-li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--sb-border); font-size: 12px; color: var(--sb-text-2); line-height: 1.45; width: 100%; text-align: left; background: none; font-family: inherit; }
.cr-li:first-child { border-top: none; }
.cr-li.cr-click, .cr-li.cr-res { cursor: pointer; border-left: none; border-right: none; border-bottom: none; }
.cr-li.cr-click:hover, .cr-li.cr-res:hover { background: var(--sb-surface-2); }
.cr-li b { color: var(--sb-text); }
.cr-k { font-size: 11px; color: var(--sb-muted); width: 70px; flex-shrink: 0; }
.cr-v { flex: 1; min-width: 0; word-break: break-word; }
.cr-v a { color: var(--sb-accent); text-decoration: none; }
.cr-v a:hover { text-decoration: underline; }
.cr-d { font-size: 11px; color: var(--sb-muted); width: 58px; flex-shrink: 0; }
.cr-by { font-size: 11px; color: var(--sb-muted); flex-shrink: 0; }
.cr-log { align-items: flex-start; }
.cr-log.cr-sys .cr-v { color: var(--sb-muted); }
/* Sent emails in the log */
.cr-em { cursor: pointer; }
.cr-em:hover, .cr-em.cr-em-open { background: var(--sb-surface-2); }
.cr-em-s { display: flex; gap: 5px; align-items: flex-start; }
.cr-em-s .sb-ico { width: 13px; height: 13px; color: var(--sb-accent); flex-shrink: 0; margin-top: 2px; }
.cr-em-s b { font-weight: 600; color: var(--sb-text); }
.cr-em-m { display: block; font-size: 11px; color: var(--sb-muted); margin-top: 1px; }
.cr-em-q .cr-em-s b { font-weight: 500; color: var(--sb-muted); }
.cr-em-q .cr-em-s .sb-ico { color: var(--sb-muted); }
.cr-em-c { font-size: 11px; color: var(--sb-muted); flex-shrink: 0; }
.cr-em-full { margin-top: 8px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 8px; padding: 10px; white-space: pre-wrap; color: var(--sb-text); font-size: 12px; line-height: 1.55; cursor: text; }
.cr-em-h { font-size: 11px; color: var(--sb-muted); white-space: normal; border-bottom: 1px solid var(--sb-border); padding-bottom: 7px; margin-bottom: 8px; word-break: break-word; }
.cr-x { border: none; background: none; color: var(--sb-muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
.cr-x:hover { color: var(--sb-red); }
.cr-x .sb-ico { width: 14px; height: 14px; }
.cr-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cr-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--sb-surface-2); color: var(--sb-text-2); font-size: 11px; font-weight: 600; padding: 3px 4px 3px 9px; border-radius: 999px; }
.cr-tag button { border: none; background: none; color: var(--sb-muted); cursor: pointer; padding: 0 3px; font-size: 14px; line-height: 1; font-family: inherit; }
.cr-tag button:hover { color: var(--sb-red); }
.cr-tags input { border: 1px dashed var(--sb-border); border-radius: 999px; padding: 4px 10px; font-family: inherit; font-size: 12px; outline: none; width: 120px; background: var(--sb-surface); color: var(--sb-text); }
.cr-tags input:focus { border-color: var(--sb-accent); }
.cr-lk { max-width: none; }
.cr-acc { border-radius: 10px; background: rgba(15,118,110,0.08); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cr-acc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-acc-top b { color: #0F766E; font-size: 14px; flex: 1; }
.cr-stats { margin-bottom: 0; }
.cr-stats .us-st { background: var(--sb-surface); }

/* Desktop: the record docks beside the list, so the list stays clickable */
@media (min-width: 769px) {
  body.cr-docked #modal-overlay { background: transparent; pointer-events: none; }
  body.cr-docked #modal-overlay.visible #modal { pointer-events: auto; }
  body.cr-docked .sb-main-scroll { padding-right: calc(var(--sb-panel-w) + 28px); }
  body.cr-docked .cr-nm b, body.cr-docked .cr-nm > span { max-width: 200px; }
  body.cr-docked .cr-head .cr-nm b, body.cr-docked .cr-head .cr-nm > span { max-width: none; }
  body.cr-docked .cr-nx-t { max-width: 180px; }
}
@media (max-width: 768px) {
  .cr-search { max-width: none; flex-basis: 100%; }
  .cr-addbtn { width: 100%; }
  .cr-tags input, .cr-add .rp-input { font-size: 16px; }
  .cr-row > .rp-select.cr-kind { flex-basis: 140px; }
  .cr-row.cr-top { flex-direction: column; align-items: stretch; }
  .cr-nm b, .cr-nm > span { max-width: 210px; }
}

/* Boxes that fill their row include their padding (the panel doesn't promise it) */
:is(.cr-row, .cr-fld, .cr-next, .cr-add, .cr-stack) > :is(.rp-input, .rp-select), .cr-lk, .cr-box, .cr-li, .cr-acc, .cr-next, .cr-sug, .cr-tags input { box-sizing: border-box; }

/* ---------- Round 2: tabs, Save buttons, editing, connectors, ideas ---------- */
.cr-tabs { margin-bottom: 12px; }

/* Connectors and ideas */
.cr-st-conn { background: rgba(219,39,119,0.1); color: #BE185D; }
.cr-av.cr-conn { background: rgba(219,39,119,0.1); color: #BE185D; }
.cr-av.cr-idea { background: var(--sb-amber-soft); color: var(--sb-amber); border-radius: 8px; }
.cr-av.cr-idea .sb-ico { width: 16px; height: 16px; }
.cr-av-lg.cr-idea .sb-ico { width: 22px; height: 22px; }
.cr-ppl { font-size: 12px; color: var(--sb-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 240px; }
.cr-li > .sb-ico { width: 15px; height: 15px; color: var(--sb-amber); }
.cr-click-t { cursor: pointer; }
.cr-click-t:hover { color: var(--sb-accent); }

/* Type picker: three choices wrap on narrow panels */
.cr-seg-wrap { flex-wrap: wrap; }

/* Typing fields: Save and Cancel show once something changed */
.cr-edit { display: flex; flex-direction: column; gap: 6px; }
.cr-edit > .rp-input { box-sizing: border-box; width: 100%; }
.cr-edit-b { display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-edit.cr-dirty .cr-edit-b { display: flex; }
.cr-edit.cr-dirty > .rp-input { border-color: var(--sb-amber); box-shadow: 0 0 0 3px var(--sb-amber-soft); }
.cr-edit-b .cr-hint { color: var(--sb-amber); font-weight: 600; }

/* Editing a contact or a log line in place */
.cr-li.cr-li-edit { flex-direction: column; align-items: stretch; gap: 8px; background: var(--sb-surface-2); }
.cr-li.cr-li-del { background: var(--sb-red-soft); }
.cr-li-edit .rp-input { box-sizing: border-box; width: 100%; }
.cr-full-w { width: 100%; }
.cr-x-red:hover { color: var(--sb-red); }
.cr-x:not(.cr-x-red):hover { color: var(--sb-accent); }
.cr-log-b { display: flex; gap: 2px; flex-shrink: 0; }
.cr-edited { font-size: 10px; font-weight: 600; color: var(--sb-muted); background: var(--sb-surface-2); border-radius: 999px; padding: 0 6px; margin-left: 2px; white-space: nowrap; cursor: help; }
@media (hover: hover) {
  .cr-log .cr-log-b { opacity: 0; transition: opacity 0.12s; }
  .cr-log:hover .cr-log-b, .cr-log:focus-within .cr-log-b { opacity: 1; }
}