/* =========================================================
   Manage block demo: "Changes detected" job title row.
   Mirrors the extension's Manage CRM fields panel: amber means
   the CRM value is out of date versus LinkedIn, and the check
   applies the LinkedIn value in one click (wired in wf-fields.js).
   ========================================================= */

.wf-hist .wf-chg{
  border-color: rgba(255,207,74,.55);
  background: rgba(255,207,74,.06);
  transition: border-color .25s ease, background-color .25s ease;
}
.wf-hist .wf-chg .wf-chg-title{
  color: #ffcf4a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wf-diff{ display: flex; align-items: center; gap: 10px; }
.wf-diff-label{ flex: 0 0 auto; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); }
.wf-diff-vals{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.wf-diff-cur{ font-size: 11px; color: rgba(255,255,255,.66); text-decoration: line-through; }
.wf-diff-new{ font-size: 12px; font-weight: 600; color: #c9bcff; }
.wf-diff-arrow{ color: #ffcf4a; margin-right: 4px; }

.wf-accept{
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 0; border-radius: 7px;
  background: var(--accent);
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  transition: background-color .2s ease;
}
.wf-accept::after{ content: "\2713"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.wf-accept:hover{ filter: brightness(1.12); }
.wf-accept:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* Past tasks block stays hidden until the visitor completes the open task
   (wf-interactive.js moves it into [data-past]), saving a row at rest. */
.wf-hist .ui-block:has(> [data-past]:empty){ display: none; }

/* Accepted: the CRM now matches LinkedIn. */
.wf-hist .wf-chg.is-applied{ border-color: rgba(62,207,109,.5); background: rgba(62,207,109,.06); }
.wf-hist .wf-chg.is-applied .wf-chg-title{ color: #7ee2a0; }
.wf-chg.is-applied .wf-diff-cur,
.wf-chg.is-applied .wf-diff-arrow{ display: none; }
.wf-chg.is-applied .wf-diff-new{ color: #fff; }
.wf-chg.is-applied .wf-accept{ background: #3ecf6d; cursor: default; filter: none; }
.wf-chg.is-applied .wf-accept::after{ color: #08301b; }