/* ============================================================================
   Cellmax - the shared facility card and facility details panel.

   Loaded by BOTH plugins: the Prospect Map console and the User Dashboard read
   this one file, so the Facilities rail and the Facility Details panel cannot
   drift apart again. The class prefix is `cmpf-` throughout - deliberately not
   either page's prefix, because this IS the thing the two pages share.
   ========================================================================= */

/* ------------------------------------------------- the component's own reset --
   The card and the panel render on both pages, so this file cannot lean on the
   console's page-wide theme guard (`prospects-v2.css` resets every control) — the
   dashboard has no such rule, and the console's version is id-scoped, which
   outranks any bare class here. Reset the controls from inside the component
   instead, so both pages start from the same browser defaults and the rules below
   only ever have to beat this one.

   `revert` drops Flatsome's bare `button`/`input`/`select` rules (min-height,
   margins, uppercase, line-height) without undoing anything this file declares:
   the `:where()` keeps the specificity at the class, so every rule below, later in
   the file, still wins. */
.cmpf-item,
.cmpf-item :where(button, input, select, textarea),
.cmpf-dossier :where(button, input, select, textarea),
.cmpf-head :where(button, input, select, textarea),
.cmpf-sort :where(button, input, select, textarea),
.cmpf-pager :where(button, input, select, textarea),
.cmpf-empty :where(button, input, select, textarea) {
  width: revert;
  min-width: revert;
  max-width: revert;
  height: revert;
  min-height: revert;
  margin: revert;
  padding: revert;
  border: revert;
  border-radius: revert;
  box-shadow: revert;
  background-color: revert;
  color: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  vertical-align: revert;
  display: revert;
  appearance: revert;
  -webkit-appearance: revert;
}

.cmpf-item,
.cmpf-dossier,
.cmpf-head,
.cmpf-sort,
.cmpf-pager,
.cmpf-empty,
.cmpf-tel-more {
  /* Base type is declared here, not inherited. The two pages set different body
     type on their containers (the console 16px/1.5 navy, the dashboard
     14px/1.6), so anything this file leaves to inheritance renders one size on
     the console and another on the dashboard. */
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #45454d;
  --cmpf-red: #9a0000;
  --cmpf-red-dark: #7c0202;
  --cmpf-red-wash: #fdf4f4;
  --cmpf-ink: #1d1d24;
  --cmpf-body: #45454d;
  --cmpf-mute: #5c5c65;
  --cmpf-faint: #6f6f78;
  --cmpf-line: #e2e4e8;
  --cmpf-surface: #ffffff;
  --cmpf-surface-2: #f9fafb;
  --cmpf-surface-3: #eeeff2;
  --cmpf-display: 'Kontora', 'Poppins', system-ui, -apple-system, sans-serif;
  --cmpf-text: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cmpf-r-card: 16px;
  --cmpf-r-tile: 12px;
  --cmpf-sh-tile: 0 1px 3px rgba(15, 23, 42, .04);
  --cmpf-sh-lift: 0 6px 18px -4px rgba(15, 23, 42, .08);
}

/* ------------------------------------------------------------------ tags -- */
.cmpf-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: .01em;
  background: var(--cmpf-surface-3);
  color: var(--cmpf-mute);
}
.cmpf-tag--quiet { background: var(--cmpf-surface-3); color: var(--cmpf-mute); }
.cmpf-tag--rep { background: #e8f4ef; color: #166145; border-color: #bfe3d3; }
.cmpf-wf--verified_specialist { background: var(--cmpf-red); color: #fff; box-shadow: 0 1px 3px rgba(154, 0, 0, .3); }
.cmpf-wf--verified_service { background: #0b625d; color: #fff; }
.cmpf-wf--likely { background: #fdf3e0; color: #7a4a00; border-color: #f0dcb6; }
.cmpf-wf--unverified { background: #eef0f2; color: #5f646d; }
.cmpf-wf--conference_contact { background: #eef1fb; color: #3a4790; border-color: #ccd4ee; }
.cmpf-s--not_contacted { background: var(--cmpf-surface-3); color: var(--cmpf-mute); }
.cmpf-s--ongoing { background: #fdf3e0; color: #7a4a00; border-color: #f0dcb6; }
.cmpf-s--visit { background: #eaf1fa; color: #274b86; border-color: #c7d8ee; }
.cmpf-s--completed { background: #e8f4ec; color: #14622c; border-color: #c9e6d1; }
.cmpf-s--not_interested { background: #eeeff1; color: #565b64; }
.cmpf-s--follow_up { background: #eeecf9; color: #43438f; border-color: #d6d6e8; }
.cmpf-tag--follow { background: #eef1fb; color: #3a4790; border-color: #ccd4ee; }
.cmpf-tag--follow.is-due { background: #fdf3e0; color: #7a4a00; border-color: #f0dcb6; }
.cmpf-tag--follow.is-overdue { background: #fdf2f2; color: #9a0000; border-color: #f3c9c9; }
.cmpf-tag--warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cmpf-tag--ok { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.cmpf-tag.cmpf-tag--product { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.cmpf-tag.cmpf-tag--product.cmpf-tag--sold,
.cmpf-tag.cmpf-tag--sold { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* ------------------------------------------------------- rail head/tools -- */
.cmpf-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmpf-head-t {
  font-family: var(--cmpf-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cmpf-ink);
  line-height: 1.25;
}
.cmpf-head-sub {
  font-family: var(--cmpf-text);
  font-size: 12px;
  color: var(--cmpf-mute);
  line-height: 1.4;
}
.cmpf-lab {
  font-family: var(--cmpf-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cmpf-faint);
}
.cmpf-sort { display: block; min-width: 0; flex: 1 1 auto; }
.cmpf-sort .cmpf-lab { display: block; margin-bottom: 4px; }
.cmpf-select {
  width: 100%;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  padding: 6px 9px;
  line-height: 1.4;
  cursor: pointer;
}
.cmpf-select:focus { outline: none; border-color: var(--cmpf-red); box-shadow: 0 0 0 3px rgba(154, 0, 0, .14); }

.cmpf-pager { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cmpf-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-family: var(--cmpf-text);
  font-size: 15px;
  line-height: 1;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.cmpf-page-btn:hover:not([disabled]) { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-page-btn[disabled] { opacity: .45; cursor: default; }
.cmpf-page-jump {
  width: 54px;
  padding: 5px 6px;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  text-align: center;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  -moz-appearance: textfield;
}
.cmpf-page-jump::-webkit-outer-spin-button,
.cmpf-page-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmpf-page-jump:focus { outline: none; border-color: var(--cmpf-red); box-shadow: 0 0 0 3px rgba(154, 0, 0, .14); }
.cmpf-page-info { font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-body); white-space: nowrap; }

/* ------------------------------------------------------------- list card -- */
.cmpf-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-card);
  box-shadow: var(--cmpf-sh-tile);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cmpf-item + .cmpf-item { margin-top: 12px; }
.cmpf-item:hover {
  border-color: rgba(154, 0, 0, .35);
  transform: translateY(-1px);
  box-shadow: var(--cmpf-sh-lift);
}
.cmpf-item.is-on {
  border-color: var(--cmpf-red);
  background: #fffdfd;
  box-shadow: 0 0 0 2px rgba(154, 0, 0, .18), 0 4px 14px -2px rgba(154, 0, 0, .15);
}
.cmpf-item:focus-visible { outline: 2px solid var(--cmpf-red); outline-offset: -2px; }
.cmpf-item-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cmpf-item-name {
  margin: 0;
  font-family: var(--cmpf-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #0f172a;
}
.cmpf-item-loc { margin: 0; font-family: var(--cmpf-text); font-size: 12px; line-height: 1.5; color: #64748b; }
.cmpf-item-pic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: var(--cmpf-r-tile);
}
.cmpf-item-pic-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: #fef2f2;
  color: var(--cmpf-red);
  font-family: var(--cmpf-display);
  font-size: 10px;
  font-weight: 700;
}
.cmpf-item-pic-txt { display: flex; flex-direction: column; min-width: 0; }
.cmpf-item-pic-nm {
  font-family: var(--cmpf-text);
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmpf-item-pic-role {
  font-family: var(--cmpf-text);
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmpf-item-entry {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 10px;
  background: #fafaf9;
  border: 1px solid #f1f5f9;
  border-radius: var(--cmpf-r-tile);
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  line-height: 1.45;
  color: #57534e;
}
.cmpf-item-entry-ico { flex: none; line-height: 1.45; }
.cmpf-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  font-family: var(--cmpf-text);
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}
.cmpf-item-phone { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpf-item-go { flex: none; font-weight: 600; color: var(--cmpf-red); }

.cmpf-empty { padding: 22px 14px; text-align: center; }
.cmpf-empty-t { margin: 0; font-family: var(--cmpf-display); font-size: 14px; font-weight: 700; color: var(--cmpf-ink); }
.cmpf-empty-p { margin: 6px 0 0; font-family: var(--cmpf-text); font-size: 12.5px; color: var(--cmpf-mute); }

/* ---------------------------------------------------------- details panel -- */
.cmpf-dossier { display: flex; flex-direction: column; gap: 14px; padding: 2px; }
.cmpf-card {
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-card);
  padding: 16px;
  box-shadow: var(--cmpf-sh-tile);
}
.cmpf-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.cmpf-card-title {
  margin: 0;
  font-family: var(--cmpf-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cmpf-ink);
}
.cmpf-card-sub {
  margin: 5px 0 0;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cmpf-mute);
}
.cmpf-card-addr {
  margin: 6px 0 0;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cmpf-body);
}

/* the facts list - label over value, no browser indent, no stray margins */
.cmpf-facts {
  margin: 14px 0 0;
  padding: 12px 0 0;
  display: block;
  border-top: 1px solid var(--cmpf-line);
}
/* `display` is declared on purpose, and it is the whole point of this block.
   Flatsome ships `dl dt, dl dd { display: inline-block; margin: 0 5px 0 0 }`,
   which outranks the margins below and lays every label *beside* its value —
   "WOUND CARE UNITVERIFIED, VIEW SOURCE", "ENTRY POINT" hard against the
   sentence after it — so the panel reads as one run-on line. Setting the
   margins alone never fixed that, because the theme was changing the display
   type, not the spacing. `block` puts the label above its value on both pages;
   the theme's copy never shows up locally, so this only ever appeared on the
   live site. */
.cmpf-facts dt {
  display: block;
  margin: 10px 0 0;
  font-family: var(--cmpf-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cmpf-faint);
  line-height: 1.35;
}
.cmpf-facts dt:first-child { margin-top: 0; }
.cmpf-facts dd {
  display: block;
  margin: 3px 0 0;
  padding: 0;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cmpf-body);
  overflow-wrap: anywhere;
}
.cmpf-facts dd a { color: var(--cmpf-red); font-weight: 600; text-decoration: none; }
.cmpf-facts dd a:hover { text-decoration: underline; }

/* quick links */
.cmpf-quicklinks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cmpf-line);
}
.cmpf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.cmpf-pill:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-pill.is-wa { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.cmpf-pill.is-green { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.cmpf-pill.is-blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cmpf-pill.is-slate { background: #f8fafc; color: #334155; border-color: #cbd5e1; }
.cmpf-pill.is-muted { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; cursor: default; }

.cmpf-tel-more { display: flex; flex-direction: column; gap: 4px; position: relative; }
.cmpf-tel-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmpf-tel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--cmpf-surface-2);
  border: 1px solid var(--cmpf-line);
  border-radius: 10px;
}
.cmpf-tel-list[hidden] { display: none; }
.cmpf-tel-line {
  font-family: var(--cmpf-text);
  font-size: 12px;
  color: var(--cmpf-body);
  text-decoration: none;
}
a.cmpf-tel-line:hover { color: var(--cmpf-red); text-decoration: underline; }
.cmpf-tel-count {
  padding: 2px 7px;
  font-family: var(--cmpf-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--cmpf-mute);
  background: var(--cmpf-surface-2);
  border: 1px solid var(--cmpf-line);
  border-radius: 999px;
  cursor: pointer;
}
.cmpf-wa-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  color: var(--cmpf-body);
  text-decoration: none;
}
.cmpf-wa-line:hover { color: #047857; }
.cmpf-wa-flag {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
}
.cmpf-wa-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: #047857;
  background: rgba(4, 120, 87, .12);
  border-radius: 999px;
}

/* co-located facilities */
.cmpf-co {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--cmpf-surface-2);
  border: 1px solid var(--cmpf-line);
  border-radius: 10px;
  font-family: var(--cmpf-text);
  font-size: 12px;
}
.cmpf-co-t { font-weight: 600; color: #475569; margin-bottom: 6px; }
.cmpf-co-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cmpf-co-btn {
  padding: 2px 8px;
  font-family: var(--cmpf-text);
  font-size: 11px;
  line-height: 1.4;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 6px;
  cursor: pointer;
}
.cmpf-co-btn:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); }
.cmpf-co-more { color: #94a3b8; font-size: 11px; }

/* sub cards: PIC, evidence, the working card */
.cmpf-subcard {
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-card);
  padding: 16px;
  box-shadow: var(--cmpf-sh-tile);
}
.cmpf-subcard.is-action { background: var(--cmpf-surface-2); }
.cmpf-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--cmpf-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cmpf-ink);
}
.cmpf-subicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
}
.cmpf-subicon.is-red { background: #fef2f2; color: var(--cmpf-red); }
.cmpf-subicon.is-green { background: #ecfdf5; color: #047857; }
.cmpf-subicon.is-blue { background: #eff6ff; color: #1d4ed8; }

.cmpf-pic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmpf-pic-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  background: var(--cmpf-surface-2);
  border: 1px solid var(--cmpf-line);
  border-radius: 10px;
}
.cmpf-pic-lab {
  font-family: var(--cmpf-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cmpf-faint);
}
.cmpf-pic-tile.is-phones { grid-column: 1 / -1; }
.cmpf-pic-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  color: var(--cmpf-ink);
  background: var(--cmpf-surface);
  border: 1px solid #dfe2e7;
  border-radius: 7px;
}
.cmpf-pic-input:focus { outline: none; border-color: var(--cmpf-red); box-shadow: 0 0 0 3px rgba(154, 0, 0, .12); }
.cmpf-pic-input:disabled { background: #f3f4f6; color: var(--cmpf-mute); }
.cmpf-tel-tile { display: flex; flex-direction: column; gap: 5px; }
.cmpf-tel-shown { display: flex; flex-wrap: wrap; gap: 4px; }
.cmpf-tel-edit {
  align-self: flex-start;
  padding: 2px 7px;
  font-family: var(--cmpf-text);
  font-size: 11px;
  color: var(--cmpf-mute);
  background: transparent;
  border: 1px solid var(--cmpf-line);
  border-radius: 999px;
  cursor: pointer;
}
.cmpf-tel-edit:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); }

/* evidence card */
.cmpf-evi-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cmpf-evi-note { margin: 8px 0 0; font-family: var(--cmpf-text); font-size: 12.5px; line-height: 1.5; color: var(--cmpf-body); }
.cmpf-evi-quote {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  font-style: italic;
  line-height: 1.55;
  color: var(--cmpf-body);
  background: var(--cmpf-surface-2);
  border-left: 3px solid var(--cmpf-red);
  border-radius: 0 8px 8px 0;
}
.cmpf-evi-actions { margin-top: 10px; }
.cmpf-meta { font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-faint); margin: 6px 0; }

/* the working card: status, contact type, products, follow-up, note */
.cmpf-type { display: flex; gap: 6px; }
.cmpf-type-btn {
  padding: 5px 12px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.cmpf-type-btn.is-on { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-type-btn:disabled { opacity: .5; cursor: default; }
/* Contact type is required, so the group says so before Save is pressed and marks
   itself when it is pressed without an answer. */
.cmpf-lab--req::after { content: " *"; color: var(--cmpf-red); }
.cmpf-type.is-missing .cmpf-type-btn { border-color: var(--cmpf-red); }
.cmpf-type.is-missing .cmpf-type-btn:not(.is-on) { background: var(--cmpf-red-wash); }

.cmpf-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmpf-status-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.cmpf-status-btn:hover:not(:disabled) { border-color: var(--cmpf-red); color: var(--cmpf-red); }
.cmpf-status-btn.is-active { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-status-btn:disabled { opacity: .5; cursor: default; }
.cmpf-status-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: currentColor; }
.cmpf-status-dot.dot-ongoing { background: #b06a00; }
.cmpf-status-dot.dot-visit { background: #3567a8; }
.cmpf-status-dot.dot-completed { background: #16702f; }
.cmpf-status-dot.dot-not_interested { background: #6f747d; }

.cmpf-input, .cmpf-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  color: var(--cmpf-ink);
  background: var(--cmpf-surface);
  border: 1px solid #dfe2e7;
  border-radius: 8px;
}
.cmpf-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
.cmpf-input:focus, .cmpf-textarea:focus { outline: none; border-color: var(--cmpf-red); box-shadow: 0 0 0 3px rgba(154, 0, 0, .12); }
.cmpf-input:disabled, .cmpf-textarea:disabled { background: #f3f4f6; color: var(--cmpf-mute); }
.cmpf-quick-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cmpf-quick-date {
  padding: 3px 9px;
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cmpf-mute);
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: 999px;
  cursor: pointer;
}
.cmpf-quick-date:hover:not(:disabled) { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-quick-date:disabled { opacity: .45; cursor: default; }

.cmpf-prod-group { display: flex; flex-direction: column; gap: 5px; }
.cmpf-prod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px;
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: 8px;
}
.cmpf-prod-lab {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  color: var(--cmpf-body);
  cursor: pointer;
}
.cmpf-prod-qty-wrap { display: flex; align-items: center; gap: 5px; }
.cmpf-prod-qty {
  width: 58px;
  padding: 4px 6px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  color: var(--cmpf-ink);
  background: var(--cmpf-surface);
  border: 1px solid #dfe2e7;
  border-radius: 7px;
}
.cmpf-prod-unit { font-family: var(--cmpf-text); font-size: 11px; color: var(--cmpf-faint); }

.cmpf-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cmpf-save {
  padding: 8px 18px;
  font-family: var(--cmpf-text);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--cmpf-red);
  border: 1px solid var(--cmpf-red-dark);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(124, 2, 2, .25);
  transition: filter .14s, transform .1s;
}
.cmpf-save:hover:not(:disabled) { filter: brightness(1.06); }
.cmpf-save:active:not(:disabled) { transform: scale(.985); }
.cmpf-save:disabled, .cmpf-save.is-saved {
  background: var(--cmpf-surface-3);
  color: var(--cmpf-mute);
  border-color: var(--cmpf-line);
  box-shadow: none;
  cursor: default;
}
.cmpf-save:focus-visible { outline: 2px solid var(--cmpf-red); outline-offset: 2px; }
.cmpf-saved-wrap { margin-top: 8px; }
.cmpf-saved { margin: 0; font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-faint); }
.cmpf-btn-2 {
  padding: 8px 14px;
  font-family: var(--cmpf-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--cmpf-body);
  background: var(--cmpf-surface);
  border: 1px solid #cfd2d8;
  border-radius: 9px;
  cursor: pointer;
}
.cmpf-btn-2:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); }
.cmpf-btn-2.is-danger { color: var(--cmpf-red); }
.cmpf-btn-2.is-danger:hover { background: var(--cmpf-red-wash); }

.cmpf-guest {
  margin-bottom: 12px;
  padding: 9px 11px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 9px;
}
.cmpf-guest-txt { margin: 0 0 7px; font-family: var(--cmpf-text); font-size: 12px; line-height: 1.5; color: #78350f; }
.cmpf-guest-btn {
  padding: 5px 11px;
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--cmpf-red);
  border: 1px solid var(--cmpf-red-dark);
  border-radius: 8px;
  cursor: pointer;
}

/* the PIC summary: who to ask for, with no writing on it */
.cmpf-piclist-body { display: flex; flex-direction: column; gap: 7px; }
.cmpf-piclist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--cmpf-surface-2);
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-tile);
}
.cmpf-piclist-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.cmpf-piclist-name { font-family: var(--cmpf-text); font-size: 13px; font-weight: 600; color: var(--cmpf-ink); }
.cmpf-piclist-role { font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-mute); }
.cmpf-piclist-phone { font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-faint); }
.cmpf-piclist-acts { display: flex; flex: none; align-items: center; gap: 8px; }
.cmpf-piclist-del {
  padding: 3px 8px;
  font-family: var(--cmpf-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--cmpf-red);
  background: transparent;
  border: 1px solid var(--cmpf-line);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.cmpf-piclist-del:hover { background: var(--cmpf-red-wash); border-color: var(--cmpf-red); }
.cmpf-piclist-del:disabled { opacity: .55; cursor: default; }
/* The PIC's own action: log a visit against this person, without a picker step. */
.cmpf-piclist-visit {
  padding: 3px 9px;
  font-family: var(--cmpf-text);
  font-size: 11px;
  font-weight: 700;
  color: var(--cmpf-ink);
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.cmpf-piclist-visit:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); background: var(--cmpf-red-wash); }
.cmpf-piclist-visit:disabled { opacity: .55; cursor: default; border-color: var(--cmpf-line); color: var(--cmpf-ink); background: var(--cmpf-surface); }
.cmpf-piclist-empty { margin: 0; }

/* ------------------------------------------------ the Log Progress popup -- */
.cmpf-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 19, 26, .55);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cmpf-red: #9a0000;
  --cmpf-red-dark: #7c0202;
  --cmpf-red-wash: #fdf4f4;
  --cmpf-ink: #1d1d24;
  --cmpf-body: #45454d;
  --cmpf-mute: #5c5c65;
  --cmpf-faint: #6f6f78;
  --cmpf-line: #e2e4e8;
  --cmpf-surface: #ffffff;
  --cmpf-surface-2: #f9fafb;
  --cmpf-r-tile: 10px;
  --cmpf-display: 'Kontora', 'Poppins', system-ui, sans-serif;
  --cmpf-text: 'Poppins', system-ui, sans-serif;
}
/* Zero-specificity on purpose: the reset must undo the theme's form defaults, and
   the popup's own classes (`.cmpf-input`, `.cmpf-status-btn`, ...) must still win
   over it. A plain descendant selector outranked them and the form lost its look. */
:where(.cmpf-pop-backdrop) :where(button, input, select, textarea) {
  width: revert;
  min-width: revert;
  max-width: revert;
  height: revert;
  min-height: revert;
  margin: revert;
  padding: revert;
  border: revert;
  border-radius: revert;
  box-shadow: revert;
  background-color: revert;
  color: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  vertical-align: revert;
  display: revert;
  appearance: revert;
  -webkit-appearance: revert;
  box-sizing: border-box;
}
body.cmpf-pop-open { overflow: hidden; }
.cmpf-pop {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  background: var(--cmpf-surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 12, 20, .32);
  overflow: hidden;
  color: var(--cmpf-body);
  font-size: 13px;
  line-height: 1.4;
}
.cmpf-pop:focus { outline: none; }
.cmpf-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  /* The popup announces itself in the brand maroon: the header is the one band a
     rep sees before reading anything, and it says "Cellmax" without a logo. */
  background: var(--cmpf-red);
  border-bottom: 1px solid var(--cmpf-red-dark);
}
.cmpf-pop-title { margin: 0; font-family: var(--cmpf-display); font-size: 17px; font-weight: 700; color: #fff; }
.cmpf-pop-sub { margin: 2px 0 0; font-family: var(--cmpf-text); font-size: 12px; color: rgba(255, 255, 255, .82); }
.cmpf-pop-x {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 8px;
  cursor: pointer;
}
.cmpf-pop-x:hover { color: var(--cmpf-red); background: #fff; border-color: #fff; }
.cmpf-pop-body { padding: 16px 18px 18px; overflow-y: auto; }
.cmpf-pop-help { margin: 0 0 12px; font-family: var(--cmpf-text); font-size: 12.5px; color: var(--cmpf-mute); }
.cmpf-pop-picklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cmpf-pop-pickrow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-tile);
  background: var(--cmpf-surface-2);
}
.cmpf-pop-pick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.cmpf-pop-pick:hover .cmpf-pop-pickname { color: var(--cmpf-red); }
.cmpf-pop-picktext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmpf-pop-pickname { font-family: var(--cmpf-text); font-size: 13px; font-weight: 600; color: var(--cmpf-ink); }
.cmpf-pop-pickrole { font-family: var(--cmpf-text); font-size: 12px; color: var(--cmpf-mute); }
.cmpf-pop-form { display: flex; flex-direction: column; gap: 14px; }
.cmpf-pop-section {
  padding: 13px;
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-tile);
  background: var(--cmpf-surface-2);
}
.cmpf-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cmpf-pop-field { display: flex; flex-direction: column; gap: 4px; }
.cmpf-pop-field .cmpf-lab { font-family: var(--cmpf-text); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cmpf-faint); }
.cmpf-pop .cmpf-lab { font-family: var(--cmpf-text); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cmpf-faint); }
.cmpf-pop-lab-gap { display: block; margin: 14px 0 7px; }
.cmpf-pop-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Delete is the one destructive action in the form: pushed to the far end of the
   footer so it is never the button next to Save. */
.cmpf-pop-del { margin-left: auto; }
.cmpf-pop-del:disabled { opacity: .55; cursor: default; }
.cmpf-pop-msg { margin: 2px 0 0; }
.cmpf-pop-done { padding: 8px 0 14px; }
.cmpf-pop-donet { margin: 0 0 4px; font-family: var(--cmpf-text); font-size: 14px; font-weight: 600; color: var(--cmpf-ink); }

/* timeline */
.cmpf-timeline { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cmpf-line); }
.cmpf-tl-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--cmpf-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cmpf-ink);
  margin-bottom: 8px;
}
.cmpf-tl-count { font-family: var(--cmpf-text); font-size: 12px; font-weight: 400; color: var(--cmpf-faint); }
/* One history per person: the chips say whose visits are on screen. */
.cmpf-tl-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.cmpf-tl-filters:empty { display: none; }
.cmpf-tl-filter {
  padding: 3px 9px;
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cmpf-mute);
  background: var(--cmpf-surface);
  border: 1px solid var(--cmpf-line);
  border-radius: 999px;
  cursor: pointer;
}
.cmpf-tl-filter:hover { border-color: var(--cmpf-red); color: var(--cmpf-red); }
.cmpf-tl-filter.is-on {
  color: var(--cmpf-red);
  background: var(--cmpf-red-wash);
  border-color: var(--cmpf-red);
}
.cmpf-tl-list { display: flex; flex-direction: column; gap: 9px; }
.cmpf-tl-item { position: relative; padding-left: 15px; }
.cmpf-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.cmpf-tl-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cmpf-red);
}
.cmpf-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cmpf-tl-who { min-width: 0; }
.cmpf-tl-name { font-family: var(--cmpf-text); font-size: 12px; font-weight: 700; color: var(--cmpf-ink); }
.cmpf-tl-by { font-family: var(--cmpf-text); font-size: 12px; font-weight: 600; color: var(--cmpf-faint); }
.cmpf-tl-note { margin-top: 3px; font-family: var(--cmpf-text); font-size: 12px; line-height: 1.5; color: var(--cmpf-body); }
.cmpf-tl-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cmpf-tl-badges .cmpf-tag { font-size: 11px; padding: 1px 6px; }
.cmpf-tl-type {
  display: inline-block;
  font-family: var(--cmpf-text);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cmpf-mute);
}
.cmpf-tl-edited { margin-top: 3px; font-family: var(--cmpf-text); font-size: 11.5px; font-style: italic; color: var(--cmpf-faint); }
.cmpf-tl-actions { margin-top: 6px; }
.cmpf-tl-edit {
  padding: 0;
  font-family: var(--cmpf-text);
  font-size: 11px;
  font-weight: 700;
  color: var(--cmpf-mute);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.cmpf-tl-edit:hover { color: var(--cmpf-red); border-bottom-color: var(--cmpf-red); }
.cmpf-tl-form {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--cmpf-line);
  border-radius: var(--cmpf-r-tile);
  background: var(--cmpf-surface-2);
}
.cmpf-tl-form .cmpf-lab { display: block; margin: 8px 0 4px; }
.cmpf-tl-form .cmpf-lab:first-child { margin-top: 0; }
.cmpf-tl-form-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cmpf-tl-msg { margin: 6px 0 0; }
.cmpf-tl-item.is-editing .cmpf-tl-actions { display: none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 520px) {
  .cmpf-pic-grid { grid-template-columns: 1fr; }
  .cmpf-status-grid { grid-template-columns: 1fr; }
  .cmpf-item { padding: 12px 13px; }
  .cmpf-card, .cmpf-subcard { padding: 13px; }
  /* On a phone the popup is the screen: a centred dialog with a scrollbar inside
     a 360px viewport leaves two scroll areas and a keyboard covering the footer. */
  .cmpf-pop-backdrop { padding: 0; align-items: stretch; }
  .cmpf-pop { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .cmpf-pop-body { padding: 14px 14px 22px; }
  .cmpf-pop-grid { grid-template-columns: 1fr; }
  .cmpf-pop-pickrow { flex-wrap: wrap; }
}
/* No page-specific block here on purpose. An earlier one made the console's panel
   denser ("the docked panel is narrower"), which is exactly how the two pages grew
   apart: same markup, two looks. The console's panel is the wider of the two, so it
   needs the denser treatment least. The breakpoint above is the only responsive
   variation, and it applies to both pages. */

/* iOS Safari zooms the viewport when a field under 16px takes focus. The popup is
   where reps type notes on a phone, so every control in it sizes up on narrow screens. */
@media (max-width: 640px) {
  .cmpf-pop input,
  .cmpf-pop select,
  .cmpf-pop textarea {
    font-size: 16px;
  }
}