/* opportunities.css — the AI Opportunities screen and its action windows.
 * The layout the owner drew (27 Sep 2026), at the full width of the screen;
 * every later AI Assist screen uses these same pieces. Light first, dark its
 * own; the lime button carries black text. Absolute inside <main>, made a
 * positioning context by an attribute rather than an inline style: Vue owns
 * that element's `style`.
 *
 * FEW COLOURS (owner, 2026-09-29, after respond.io). The names below are kept
 * so no rule had to change, but they now hold three things: ink and grey for
 * almost everything, the brand lime for what is ours or done, and red for a
 * critical number. High, recommended, blue, violet and yellow were five more
 * hues saying "look here" at once; they are ink or grey now, and a tint behind
 * anything is the one quiet grey. */
[data-crm-opp-host] { position: relative; }

.crm-opp, .crm-opp-dlg {
  --op-ink: #101828;
  --op-muted: #5b6573;
  --op-line: #e7e9ee;
  --op-card: #ffffff;
  --op-soft: #ffffff;
  --op-panel: #f7f8f9;
  --op-lime: #d4fb08;
  --op-lime-soft: #f6fcdc;
  --op-crit: #d92d20;
  --op-crit-soft: #f2f2f3;
  --op-high: #282e34;
  --op-high-soft: #f2f2f3;
  --op-rec: #626f7f;
  --op-rec-soft: #f2f2f3;
  --op-low: #626f7f;
  --op-low-soft: #f2f2f3;
  --op-green: #16a34a;
  --op-green-soft: #f6fcdc;
  --op-blue: #282e34;
  --op-blue-soft: #f2f2f3;
  --op-yellow: #626f7f;
  --op-yellow-soft: #f2f2f3;
  --op-violet: #282e34;
  --op-violet-soft: #f2f2f3;
  --op-ok: #15803d;
  --op-shadow: none; /* no shadow under a box (owner, 2026-09-30) */
}
:root.dark .crm-opp, .dark .crm-opp, [data-theme="dark"] .crm-opp,
:root.dark .crm-opp-dlg, .dark .crm-opp-dlg, [data-theme="dark"] .crm-opp-dlg {
  --op-ink: #e8eaed;
  --op-muted: #9aa3af;
  --op-line: #2a2f36;
  --op-card: #1b1e23;
  --op-soft: #131619;
  --op-panel: #22262c;
  --op-lime-soft: rgba(212, 251, 8, .08);
  --op-crit: #f87171;
  --op-crit-soft: rgba(255, 255, 255, .06);
  --op-high: #e8eaed;
  --op-high-soft: rgba(255, 255, 255, .06);
  --op-rec: #9aa3af;
  --op-rec-soft: rgba(255, 255, 255, .06);
  --op-low: #9aa3af;
  --op-low-soft: rgba(255, 255, 255, .06);
  --op-green: #4ade80;
  --op-green-soft: rgba(212, 251, 8, .08);
  --op-blue: #e8eaed;
  --op-blue-soft: rgba(255, 255, 255, .06);
  --op-yellow: #9aa3af;
  --op-yellow-soft: rgba(255, 255, 255, .06);
  --op-violet: #e8eaed;
  --op-violet-soft: rgba(255, 255, 255, .06);
  --op-ok: #4ade80;
  --op-shadow: none;
}

.crm-opp {
  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: auto;
  padding: 28px 32px 56px;
  background: var(--op-soft);
  color: var(--op-ink);
  text-align: start;
}
.crm-opp *, .crm-opp-dlg * { box-sizing: border-box; }
.crm-opp button, .crm-opp a, .crm-opp input, .crm-opp select, .crm-opp-dlg button, .crm-opp-dlg input, .crm-opp-dlg textarea, .crm-opp-dlg select { font-family: inherit; }
/* The full width of the screen: no cap, the padding is the only margin. */
.crm-opp__inner { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.crm-opp .fi, .crm-opp-dlg .fi { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; }
.crm-opp__muted { font-size: 12.5px; color: var(--op-muted); }
.crm-opp__ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- buttons ---- */
.crm-opp__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--op-line); background: var(--op-card); color: var(--op-ink); box-shadow: var(--op-shadow);
}
.crm-opp__btn:hover:not(:disabled) { border-color: #c7cdd6; }
.crm-opp__btn:disabled { opacity: .55; cursor: default; }
.crm-opp__btn .fi { font-size: 15px; }
.crm-opp__btn--primary { background: var(--op-lime); border-color: var(--op-lime); color: #000 !important; }
.crm-opp__btn--primary:hover:not(:disabled) { background: #c6ec00; border-color: #c6ec00; }
.crm-opp__link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 8px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--op-muted);
}
.crm-opp__link:hover { color: var(--op-ink); background: var(--op-panel); }
.crm-opp__link .fi { font-size: 15px; }

/* ---- the head ---- */
.crm-opp__head { position: relative; display: flex; align-items: center; gap: 20px; }
.crm-opp__intro { flex: 1; min-width: 0; }
.crm-opp__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.crm-opp__title .fi { color: #282e34; font-size: 26px; }
.dark .crm-opp__title .fi { color: #e8eaed; }
.crm-opp__sub { margin: 8px 0 0; font-size: 14px; color: var(--op-muted); line-height: 1.6; max-width: 760px; }
.crm-opp__scan { display: flex; align-items: center; gap: 14px; flex: none; }

/* ---- the four numbers ---- */
.crm-opp__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.crm-opp__tile {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px; border-radius: 8px; cursor: pointer; text-align: start;
  background: var(--op-card); border: 1px solid var(--op-line); color: var(--op-ink); box-shadow: var(--op-shadow);
}
.crm-opp__tile:hover { border-color: #c7cdd6; }
.crm-opp__tile.is-lit { background: var(--op-card); border-color: var(--op-line); }
.dark .crm-opp__tile.is-lit { border-color: rgba(251, 146, 60, .35); }
.crm-opp__tile.is-on { outline: 2px solid var(--op-lime); outline-offset: -1px; }
.crm-opp__tile > .fi { color: var(--op-muted); font-size: 16px; margin-inline-start: auto; }
.crm-opp__tileicon { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 22px; }
.crm-opp__tile.is-warn .crm-opp__tileicon { background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-icon, #e8384f); }
.crm-opp__tile.is-warn.is-lit .crm-opp__tileicon { background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-icon, #e8384f); }
.dark .crm-opp__tile.is-warn.is-lit .crm-opp__tileicon { background: var(--crm-alert-bg, #fff1f2); }
.crm-opp__tile.is-blue .crm-opp__tileicon { background: var(--op-blue-soft); color: var(--op-blue); }
.crm-opp__tile.is-green .crm-opp__tileicon { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__tile.is-violet .crm-opp__tileicon { background: var(--op-violet-soft); color: var(--op-violet); }
.crm-opp__tilewords { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-opp__tilewords b { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crm-opp__tilewords span { font-size: 13px; color: var(--op-muted); }

.crm-opp__note {
  display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 8px;
  background: var(--op-blue-soft); border: 1px solid transparent; color: var(--op-muted); font-size: 13.5px; line-height: 1.6;
}
.crm-opp__note .fi { font-size: 17px; }

/* ---- the section ---- */
.crm-opp__section { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 6px; }
.crm-opp__h2 { margin: 0; font-size: 21px; font-weight: 800; }
.crm-opp__section .crm-opp__sub { margin-top: 4px; }
.crm-opp__sort {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 8px; flex: none;
  background: var(--op-card); border: 1px solid var(--op-line); font-size: 13.5px; color: var(--op-ink); box-shadow: var(--op-shadow);
}
.crm-opp__sort select {
  border: 0; background: transparent; color: var(--op-ink); font-size: 13.5px; font-weight: 700; margin: 0 !important;
  padding: 0 4px; height: auto; width: auto; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none; background-image: none !important;
}
.crm-opp__sort > .fi { font-size: 16px; color: var(--op-muted); pointer-events: none; }

/* ---- a card ---- */
.crm-opp__card {
  position: relative; background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; padding: 20px 26px 18px;
  box-shadow: var(--op-shadow); scroll-margin-top: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
}

.crm-opp__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.crm-opp__pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: 1px solid currentColor;
}
.crm-opp__pill .fi { font-size: 15px; }
.crm-opp__pill.is-critical { color: var(--op-crit); background: var(--op-crit-soft); }
.crm-opp__pill.is-high { color: var(--op-high); background: var(--op-high-soft); }
.crm-opp__pill.is-recommended { color: var(--op-rec); background: var(--op-rec-soft); }
.crm-opp__pill.is-low { color: var(--op-low); background: var(--op-low-soft); }
.crm-opp__meta { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--op-muted); }
.crm-opp__meta .fi { font-size: 15px; }
.crm-opp__when { margin-inline-start: auto; }
.crm-opp__more { position: relative; }
.crm-opp__dots {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--op-line); background: var(--op-card); color: var(--op-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px;
}
.crm-opp__dots:hover { color: var(--op-ink); }
.crm-opp__menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 5; min-width: 210px; padding: 6px;
  background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  display: flex; flex-direction: column;
}
.crm-opp__menu button {
  text-align: start; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--op-ink); font-size: 13px; cursor: pointer;
}
.crm-opp__menu button:hover { background: var(--op-panel); }

.crm-opp__headline { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; unicode-bidi: plaintext; }
.crm-opp__why { margin: -8px 0 0; font-size: 14px; color: var(--op-muted); line-height: 1.6; unicode-bidi: plaintext; }

.crm-opp__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.crm-opp__block { display: flex; gap: 14px; align-items: flex-start; background: var(--op-panel); border-radius: 8px; padding: 16px; }
.crm-opp__blockicon { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 18px; }
.crm-opp__blockicon.is-green { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__blockicon.is-blue { background: var(--op-blue-soft); color: var(--op-blue); }
.crm-opp__blockicon.is-yellow { background: var(--op-yellow-soft); color: var(--op-yellow); }
.crm-opp__label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.crm-opp__text { font-size: 13.5px; line-height: 1.65; color: var(--op-muted); unicode-bidi: plaintext; }

.crm-opp__examples { display: grid; gap: 8px; }
.crm-opp__example {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--op-line); color: var(--op-ink); text-decoration: none; font-size: 13px;
}
a.crm-opp__example:hover { border-color: var(--op-lime); }
.crm-opp__said { color: var(--op-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

.crm-opp__learned { font-size: 12.5px; color: var(--op-rec); }
.crm-opp__done { display: grid; gap: 4px; font-size: 13px; color: var(--op-ok); }
.crm-opp__done > div { display: flex; gap: 6px; align-items: center; }
.crm-opp__flash { font-size: 13px; font-weight: 600; color: var(--op-ok); background: var(--op-lime-soft); border-radius: 8px; padding: 10px 14px; }
.crm-opp__flash.is-bad { color: var(--op-crit); background: var(--op-crit-soft); }

.crm-opp__acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-opp__later { margin-inline-start: auto; display: flex; gap: 10px; }
.crm-opp__empty { padding: 48px 0; text-align: center; color: var(--op-muted); }
.crm-opp__foot { text-align: center; }

@media (max-width: 1180px) {
  .crm-opp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .crm-opp { padding: 18px 16px 40px; }
  .crm-opp__head { flex-wrap: wrap; }
  .crm-opp__three { grid-template-columns: 1fr; }
  .crm-opp__section { flex-wrap: wrap; align-items: flex-start; }
  .crm-opp__later { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .crm-opp__tiles { grid-template-columns: 1fr; }
  .crm-opp__title { font-size: 22px; }
  /* The title and its sentence take the line; "Scan now" goes under them. */
  .crm-opp__intro { flex: 1 1 100%; }
  /* "Scan now" and "What I learned" wrap instead of pushing the screen sideways. */
  .crm-opp__scan { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; }
  .crm-opp__trendbar .crm-opp__chip { padding: 0 12px; }
}

/* ---- the action window ---- */
.crm-opp-dlg {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); color: var(--op-ink);
}
.dark .crm-opp-dlg { background: rgba(0, 0, 0, .6); }
.crm-opp-dlg__card {
  width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  overflow: hidden; text-align: start;
}
.crm-opp-dlg__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.crm-opp-dlg__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.crm-opp-dlg__x {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--op-line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--op-muted); font-size: 18px; cursor: pointer;
}
.crm-opp-dlg__x:hover { color: var(--op-ink); background: var(--op-soft); }
.crm-opp-dlg__body { padding: 6px 20px 8px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.crm-opp-dlg__intro { margin: 0; font-size: 13px; color: var(--op-muted); line-height: 1.65; }
.crm-opp-dlg__field { display: flex; flex-direction: column; gap: 6px; }
.crm-opp-dlg__label { font-size: 12px; font-weight: 700; color: var(--op-muted); }
.crm-opp-dlg__input {
  width: 100%; margin: 0 !important; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--op-line);
  background: var(--op-card); color: var(--op-ink); font-size: 13px; line-height: 1.6; unicode-bidi: plaintext;
}
input.crm-opp-dlg__input, select.crm-opp-dlg__input { height: 38px; padding-block: 0; }
.crm-opp-dlg__input:focus { outline: 2px solid #d9f99d; border-color: var(--op-lime); }
.crm-opp-dlg__agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 200px; overflow: auto; }
.crm-opp-dlg__agent { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--op-line); border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.crm-opp-dlg__agent input { margin: 0; accent-color: #282e34; }
.crm-opp-dlg__list { display: grid; gap: 4px; }
.crm-opp-dlg__person {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--op-line);
  color: var(--op-ink); text-decoration: none; font-size: 13px;
}
a.crm-opp-dlg__person:hover { border-color: var(--op-lime); }
.crm-opp-dlg__person b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.crm-opp-dlg__err { padding: 0 20px; font-size: 12.5px; color: var(--op-crit); }
.crm-opp-dlg__err:empty { display: none; }
.crm-opp-dlg__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--op-line); margin-top: 8px; }

@media (max-width: 520px) {
  .crm-opp-dlg__agents { grid-template-columns: 1fr; }
}

/* ---- tabs (phase 2: the customers by value, the sales data) ---- */
.crm-opp__tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--op-line); margin-top: -4px; overflow-x: auto; }
.crm-opp__tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--op-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.crm-opp__tab:hover { color: var(--op-ink); }
.crm-opp__tab.is-on { color: var(--op-ink); border-bottom-color: #282e34; }
.dark .crm-opp__tab.is-on { border-bottom-color: #e8eaed; }
.crm-opp__tab .fi { font-size: 15px; }

.crm-opp__note .crm-opp__notetext { flex: 1; }
.crm-opp__tile.is-static { cursor: default; }
.crm-opp__tile.is-static:hover { border-color: var(--op-line); }
/* A value that must stay on one line (a period of two months). */
.crm-opp__tile.is-compact .crm-opp__tilewords b { font-size: 19px; white-space: nowrap; }

/* ---- value classes ---- */
.crm-opp__class {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--op-low-soft); color: var(--op-low);
}
.crm-opp__class .fi { font-size: 13px; }
.crm-opp__class.is-vip, .crm-opp__chip.is-vip.is-on { background: #282e34; color: #fff; }
.crm-opp__class.is-high_value { background: var(--op-violet-soft); color: var(--op-violet); }
.crm-opp__class.is-regular { background: var(--op-blue-soft); color: var(--op-blue); }
.crm-opp__class.is-new { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__class.is-at_risk { background: var(--op-high-soft); color: var(--op-high); }
.crm-opp__class.is-inactive { background: var(--op-low-soft); color: var(--op-low); }
.dark .crm-opp__class.is-vip, .dark .crm-opp__chip.is-vip.is-on { background: #e8eaed; color: #15181c; }

.crm-opp__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-opp__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--op-line); background: var(--op-card); color: var(--op-ink); font-size: 13px; font-weight: 600; box-shadow: var(--op-shadow);
}
.crm-opp__chip b { font-variant-numeric: tabular-nums; color: var(--op-muted); }
.crm-opp__chip.is-on { border-color: var(--op-lime); background: var(--op-lime-soft); }
.crm-opp__chip .fi { font-size: 14px; }

/* ---- the customers table ---- */
.crm-opp__table { background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; overflow: hidden; box-shadow: var(--op-shadow); }
.crm-opp__tr {
  display: grid; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--op-line);
  grid-template-columns: minmax(180px, 1.6fr) 130px 90px 110px 120px minmax(120px, 1.2fr) minmax(110px, 1fr);
  color: var(--op-ink); text-decoration: none; font-size: 13.5px;
}
.crm-opp__table.is-money .crm-opp__tr {
  grid-template-columns: minmax(180px, 1.6fr) 130px minmax(100px, 1fr) 80px minmax(100px, 1fr) 110px 110px minmax(120px, 1.2fr) minmax(110px, 1fr);
}
.crm-opp__tr:first-child { border-top: 0; }
a.crm-opp__tr:hover { background: var(--op-panel); }
.crm-opp__th { font-size: 12px; font-weight: 700; color: var(--op-muted); background: var(--op-panel); }
.crm-opp__who { display: flex; flex-direction: column; min-width: 0; }
.crm-opp__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An Arabic name keeps its own direction but sits where the number under it
   does - at the start of the cell, not the far side. */
.crm-opp__who > * { align-self: flex-start; max-width: 100%; }
.crm-opp__num { font-variant-numeric: tabular-nums; }
.crm-opp__cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the data tab ---- */
.crm-opp__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.crm-opp__panel { background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; padding: 18px 20px; box-shadow: var(--op-shadow); display: flex; flex-direction: column; gap: 10px; }
.crm-opp__panelhead { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.crm-opp__rank { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; font-size: 13px; }
.crm-opp__meter { height: 8px; border-radius: 99px; background: var(--op-panel); overflow: hidden; }
.crm-opp__meter > div { height: 100%; border-radius: 99px; background: #d4fb08; }
[dir="rtl"] .crm-opp__meter > div { margin-inline-start: 0; }
.crm-opp__upload { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--op-line); }
.crm-opp__upload:first-of-type { border-top: 0; }
.crm-opp__upload .crm-opp__link { margin-inline-start: auto; }

.crm-opp__empty-card {
  background: var(--op-card); border: 1px dashed var(--op-line); border-radius: 8px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.crm-opp__need { display: grid; gap: 10px; width: min(520px, 100%); }
.crm-opp__needline { display: grid; gap: 6px; font-size: 13px; color: var(--op-muted); }

.crm-opp-dlg__code {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--op-panel); border: 1px solid var(--op-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; text-align: left;
}

@media (max-width: 1100px) {
  .crm-opp__table { overflow-x: auto; }
  .crm-opp__tr { min-width: 980px; }
}
@media (max-width: 900px) {
  .crm-opp__two { grid-template-columns: 1fr; }
}

/* ---- Found in conversations (Sales data tab) ---- */
.crm-opp__chat { display: grid; gap: 14px; }
.crm-opp__chathead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.crm-opp__chaticon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 20px; background: var(--op-lime-soft); color: #1d1b1c; }
.dark .crm-opp__chaticon { color: #d4fb08; }
.crm-opp__chatwords { flex: 1; min-width: 240px; }
.crm-opp__chatwords p { margin: 2px 0 0; line-height: 1.6; max-width: 760px; }
.crm-opp__chatside { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crm-opp__switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.crm-opp__chatline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--op-muted); line-height: 1.5; }
.crm-opp__chatline .fi { font-size: 15px; }
.crm-opp__chatline.is-warn { padding: 10px 14px; border-radius: 8px; background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-ink, #c8243b); }
.crm-opp__chatline.is-warn .fi { color: var(--crm-alert-icon, #e8384f); }
.crm-opp__chatline.is-busy { padding: 10px 14px; border-radius: 8px; background: var(--op-blue-soft); color: var(--op-ink); }
.crm-opp__chatline.is-busy .fi { color: var(--op-blue); }
.crm-opp__chatempty { padding: 26px 16px; text-align: center; font-size: 13.5px; color: var(--op-muted); border: 1px dashed var(--op-line); border-radius: 8px; }

.crm-opp__finds { display: grid; gap: 10px; }
.crm-opp__find { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--op-line); border-radius: 8px; background: var(--op-card); }
.crm-opp__findtop {
  display: grid; align-items: end; gap: 12px;
  grid-template-columns: minmax(150px, 1.2fr) 180px 150px minmax(140px, 1.3fr) 150px auto;
}
.crm-opp__findtop > .crm-opp__who { align-self: center; color: var(--op-ink); text-decoration: none; }
.crm-opp__findtop > .crm-opp__who:hover b { text-decoration: underline; }
.crm-opp__fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13.5px; }
.crm-opp__fldlabel { font-size: 11.5px; font-weight: 700; color: var(--op-muted); }
.crm-opp__fldbox { position: relative; display: flex; align-items: center; }
.crm-opp .crm-opp__input {
  width: 100%; min-width: 0; height: 36px; margin: 0 !important; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--op-line); background-color: var(--op-card); color: var(--op-ink); font-size: 13.5px; box-shadow: none;
}
.crm-opp select.crm-opp__input { padding-inline-end: 30px; cursor: pointer; }
.crm-opp .crm-opp__input:focus { outline: 2px solid #d9f99d; border-color: var(--op-lime); }
.dark .crm-opp .crm-opp__input { color-scheme: dark; }
.dark .crm-opp .crm-opp__input:focus { outline-color: rgba(212, 251, 8, .35); }
.crm-opp input[type="number"].crm-opp__input, .crm-opp input[type="date"].crm-opp__input { direction: ltr; text-align: start; }
/* The amount reads left to right in both languages, its currency after it. */
.crm-opp__fldbox:has(.crm-opp__cur) .crm-opp__input { padding-left: 10px; padding-right: 46px; }
.crm-opp__cur { position: absolute; right: 10px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--op-muted); pointer-events: none; }
.crm-opp__findacts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.crm-opp__btn--sm { height: 36px; padding: 0 14px; }
.crm-opp__status { display: inline-flex; align-items: center; align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.crm-opp__status.is-completed { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__status.is-booked { background: var(--op-blue-soft); color: var(--op-blue); }
.crm-opp__status.is-cancelled { background: var(--op-high-soft); color: var(--op-high); }
.crm-opp__status.is-no_show { background: var(--op-low-soft); color: var(--op-low); }
.crm-opp__proof { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--op-panel); font-size: 13px; line-height: 1.6; }
.crm-opp__proof > .fi { color: var(--op-muted); font-size: 14px; margin-top: 4px; }
.crm-opp__proofsaid { flex: 1; min-width: 0; color: var(--op-ink); unicode-bidi: plaintext; overflow-wrap: anywhere; }
.crm-opp__proof > .crm-opp__link { flex: none; margin-top: -3px; text-decoration: none; }
.crm-opp__findfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }

@media (max-width: 1180px) {
  .crm-opp__findtop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-opp__findtop > .crm-opp__who, .crm-opp__findtop > .crm-opp__findacts { grid-column: 1 / -1; }
  .crm-opp__findtop > .crm-opp__findacts { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .crm-opp__findtop { grid-template-columns: 1fr; }
  .crm-opp__proof { flex-wrap: wrap; }
}

/* ---- This week's plan (top of the Opportunities tab) ---- */
.crm-opp__plan { display: grid; gap: 14px; padding: 20px 22px; background: var(--op-card); border: 1px solid var(--op-line); border-radius: 8px; box-shadow: var(--op-shadow); }
.crm-opp__planhead { display: flex; align-items: flex-start; gap: 14px; }
.crm-opp__planicon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 20px; background: var(--op-violet-soft); color: var(--op-violet); }
.crm-opp__planwords { flex: 1; min-width: 0; }
.crm-opp__planwords p { margin: 4px 0 0; line-height: 1.6; }
.crm-opp__planstats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--op-panel); }
.crm-opp__planstatshead { font-size: 12px; font-weight: 700; color: var(--op-muted); margin-inline-end: 4px; }
.crm-opp__planstat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--op-card); border: 1px solid var(--op-line); font-size: 12.5px; color: var(--op-muted); }
.crm-opp__planstat .fi { font-size: 13px; }
.crm-opp__planstat b { font-size: 14px; color: var(--op-ink); }
.crm-opp__change { font-style: normal; font-size: 11.5px; font-weight: 700; }
.crm-opp__change.is-up { color: var(--op-green); }
.crm-opp__change.is-down { color: var(--op-crit); }
.crm-opp__focus { display: grid; gap: 10px; }
.crm-opp__fitem { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--op-line); border-radius: 8px; }
.crm-opp__fitem.is-acted, .crm-opp__fitem.is-cleared { background: var(--op-lime-soft); border-color: transparent; }
.crm-opp__fnum { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; flex: none; font-size: 14px; font-weight: 800; background: var(--op-ink); color: var(--op-card); }
.crm-opp__fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-opp__fhead { font-size: 15px; font-weight: 700; line-height: 1.5; unicode-bidi: plaintext; }
.crm-opp__fnext { line-height: 1.6; unicode-bidi: plaintext; }
.crm-opp__fmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.crm-opp__fvalue { font-weight: 700; color: var(--op-green); }
.crm-opp__fstatus { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.crm-opp__fstatus .fi { font-size: 12px; }
.crm-opp__fstatus.is-acted, .crm-opp__fstatus.is-cleared { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__fstatus.is-open { background: var(--op-yellow-soft); color: var(--op-yellow); }
.crm-opp__fstatus.is-dismissed { background: var(--op-low-soft); color: var(--op-low); }
.crm-opp__facts { display: flex; align-items: center; gap: 6px; flex: none; align-self: center; flex-wrap: wrap; }
.crm-opp__facts > * { white-space: nowrap; }
.crm-opp__lastweek { border-top: 1px solid var(--op-line); padding-top: 12px; font-size: 13px; }
.crm-opp__lastweek summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--op-ink); list-style: none; }
.crm-opp__lastweek summary::-webkit-details-marker { display: none; }
.crm-opp__lastweek summary .fi { color: var(--op-muted); }
.crm-opp__lastline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 0; }
.crm-opp__lastline .crm-opp__fhead { font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .crm-opp__fitem { flex-wrap: wrap; }
  .crm-opp__facts { width: 100%; padding-inline-start: 44px; }
}

/* ---- What I learned (dialog) ---- */
.crm-opp__learnrow { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--op-line); font-size: 13px; }
.crm-opp__learnrow:first-child { border-top: 0; }
.crm-opp__learnhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-opp__learnhead .fi { color: var(--op-muted); }
.crm-opp__learnhead > .crm-opp__link { margin-inline-start: auto; }

/* ---- The prepared campaign + approving the plan ---- */
.crm-opp-dlg__goal, .crm-opp-dlg__reach { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.crm-opp-dlg__goal { background: var(--op-violet-soft); color: var(--op-ink); }
.crm-opp-dlg__goal .fi { color: var(--op-violet); }
.crm-opp-dlg__reach { background: var(--op-panel); color: var(--op-ink); }
.crm-opp-dlg__reach .fi { color: var(--op-muted); }
.crm-opp__planbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm-opp__section .crm-opp__fvalue { margin: 6px 0 0; font-size: 13.5px; }

/* ---- trends ---- */
.crm-opp__trendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm-opp__tilewords b .crm-opp__change { margin-inline-start: 8px; vertical-align: middle; }
.crm-opp__trendhead { display: flex; align-items: center; gap: 8px; }
.crm-opp__trendhead .fi { color: var(--op-muted); font-size: 15px; }
.crm-opp__trend { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--op-line); font-size: 13.5px; line-height: 1.65; color: var(--op-ink); }
.crm-opp__trendhead + .crm-opp__trend { border-top: 0; padding-top: 2px; }
.crm-opp__trendmark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 14px; background: var(--op-blue-soft); color: var(--op-blue); }
.crm-opp__trend.is-up .crm-opp__trendmark { background: var(--op-green-soft); color: var(--op-green); }
.crm-opp__trend.is-down .crm-opp__trendmark { background: var(--op-crit-soft); color: var(--op-crit); }
.crm-opp__trend.is-warn .crm-opp__trendmark { background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-icon, #e8384f); }
.crm-opp__trendbody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

/* ---- audiences ---- */
.crm-opp__audsize { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crm-opp__audsize b { font-size: 28px; font-weight: 800; line-height: 1.1; }
.crm-opp__audsize > span:not(.crm-opp__fvalue) { color: var(--op-muted); font-size: 13px; }
.crm-opp__audsize .crm-opp__fvalue { margin-inline-start: auto; }
.crm-opp__audwhy { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--op-ink); }
.crm-opp__audacts { margin-top: auto; padding-top: 6px; }

/* ---- the voice, in "What I learned" ---- */
.crm-opp__voice { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.6; }
.crm-opp__voicemsg { padding: 8px 10px; border-radius: 8px; background: var(--op-panel); white-space: pre-wrap; font-size: 12.5px; }
.crm-opp__voiceform { border: 1px solid var(--op-line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-opp__voiceform > summary { cursor: pointer; font-weight: 700; }
.crm-opp__voiceform[open] > summary { margin-bottom: 4px; }

/* ---- what a card stands on, and what is ready (spec 45/46) ---- */
.crm-opp__basis { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--op-panel); }
.crm-opp__basishead { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--op-ink); }
.crm-opp__basishead .fi { font-size: 14px; color: var(--op-muted); }
.crm-opp__sure { font-size: 12.5px; color: var(--op-muted); line-height: 1.6; }
.crm-opp__sure b { font-weight: 700; }
.crm-opp__sure.is-high b { color: var(--op-ok); }
.crm-opp__sure.is-medium b { color: var(--op-rec); }
.crm-opp__sure.is-low b { color: var(--op-high); }
.crm-opp__ready { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-opp__readychip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--op-lime-soft); color: var(--op-ink); font-size: 12.5px; font-weight: 600;
}
.crm-opp__readychip .fi { font-size: 13px; color: #4d7c0f; }
.dark .crm-opp__readychip .fi { color: #d4fb08; }
.crm-opp__nature { color: var(--op-muted); }
.crm-opp__lowsure { cursor: help; }

/* ---- what happened afterwards (spec 49/50) ---- */
.crm-opp__after { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--op-ink); }
.crm-opp__after > div:first-child { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.crm-opp__after .fi { color: var(--op-green); font-size: 14px; margin-top: 3px; }

/* ---- a card is one line until "Details" (owner, 2026-10-04) ---- */
.crm-opp__card:not(.is-open) { padding: 12px 18px; gap: 10px; }
.crm-opp__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-opp__row .crm-opp__pill { height: 26px; padding: 0 10px; font-size: 12px; flex: none; }
.crm-opp__row .crm-opp__headline { flex: 1 1 260px; min-width: 0; font-size: 15.5px; font-weight: 700; }
.crm-opp__rowacts { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; flex: none; }
.crm-opp__toggle { white-space: nowrap; }
.crm-opp__card.is-open .crm-opp__top { padding-top: 12px; border-top: 1px solid var(--op-line); }
.crm-opp__card.is-open .crm-opp__why { margin-top: 0; }
.crm-opp__planweek { margin: 2px 0 0; }
.crm-opp__planmore > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--op-muted);
}
.crm-opp__planmore > summary::-webkit-details-marker { display: none; }
.crm-opp__planmore > summary:hover { color: var(--op-ink); }
.crm-opp__planmore[open] > summary { margin-bottom: 10px; }
.crm-opp .crm-opp__h2 > .crm-tip, .crm-opp__tilewords .crm-tip, .crm-opp__meta > .crm-tip, .crm-opp__basishead > .crm-tip { margin-inline-start: 8px; vertical-align: middle; }

/* ---- a section folds to its title line (owner, 2026-10-04) ---- */
.crm-opp__fold > .crm-opp__panelhead { cursor: pointer; user-select: none; }
.crm-opp__fold > .crm-opp__panelhead:focus-visible { outline: 2px solid #1877f2; outline-offset: 4px; border-radius: 6px; }
.crm-opp__fold.is-shut { padding-block: 14px; }
.crm-opp__fold.is-shut > :not(.crm-opp__panelhead) { display: none !important; }
.crm-opp__fold.is-shut > .crm-opp__panelhead { margin-bottom: 0; }
.crm-opp__foldmark { margin-inline-start: auto; color: var(--op-muted); transition: transform .15s ease; }
.crm-opp__fold.is-shut .crm-opp__foldmark { transform: rotate(-90deg); }
[dir="rtl"] .crm-opp__fold.is-shut .crm-opp__foldmark { transform: rotate(90deg); }
.crm-opp__fold > .crm-opp__panelhead > .crm-tip { margin-inline-start: 8px; }
.crm-opp__two, .crm-td__grid { align-items: start; }

/* A narrow screen moves the buttons under the title rather than folding the
   title into three lines (icon, name, ⓘ each on its own) (2026-10-04). */
.crm-opp__head { flex-wrap: wrap; }
.crm-opp__intro { min-width: min(260px, 100%); }
.crm-opp__title { flex-wrap: nowrap; }