/* deal-panel.css — the deals card inside the conversation sidebar.
 *
 * It sits among Chatwoot's own accordions, so it borrows their surface rather
 * than declaring a panel of its own: same width, same padding rhythm, one
 * hairline above and below. The only colour it spends is on a stage.
 */
.crm-dp {
  --dp-ink: #1d1b1c;
  --dp-muted: #55606c;
  --dp-faint: #606a76;
  --dp-line: #e8ebe4;
  --dp-soft: #fafbf8;
  --dp-brand: #d4fb08;
  --dp-won: #12a150;
  --dp-lost: #b91c1c;

  /* One card, like every other section in this sidebar - geometry taken from
     the conversation redesign's own tokens rather than copied, so the two can
     never drift apart. `data-crm-panel` on the element (see deal-panel.js) is
     what stops that redesign from carding the children instead. */
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--cv-line, var(--dp-line));
  border-radius: var(--cv-radius, 12px);
  background: var(--cv-card, #ffffff);
  box-shadow: none;
  color: var(--dp-ink);
  font-size: 13px;
}

:root.dark .crm-dp,
.dark .crm-dp,
[data-theme="dark"] .crm-dp {
  --dp-ink: #e8eaed;
  --dp-muted: #98a1ad;
  --dp-faint: #78828e;
  --dp-line: #2c3138;
  --dp-soft: #22262c;
  --dp-won: #4ade80;
  --dp-lost: #fca5a5;
}

.crm-dp * { box-sizing: border-box; }
/* :where() so this reset carries no weight of its own.
 *
 * Written as `.crm-dp button` it scored 0-1-1 and quietly beat every 0-1-0
 * component rule below it - so `.crm-dp__save { color: #1d1b1c }` never
 * applied and the Create button drew the panel's own light text on the lime
 * fill, unreadable. Same for the muted colour on __add and __cancel. Inside
 * :where() the selector is worth nothing, the rule scores 0-1-0, and anything
 * later in this file wins on order as it was meant to. */
.crm-dp :where(button, input, select) { font: inherit; color: inherit; }

.crm-dp__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-muted);
  margin-bottom: 10px;
}

.crm-dp__sum {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dp-ink);
  font-variant-numeric: tabular-nums;
}

.crm-dp__none { font-size: 12.5px; color: var(--dp-faint); line-height: 1.55; margin-bottom: 10px; }

/* ---- one deal ------------------------------------------------------------ */

.crm-dp__row {
  display: block;
  border: 1px solid var(--dp-line);
  border-radius: 8px;
  padding: 9px 11px 10px;
  margin-bottom: 8px;
  background: var(--dp-soft);
  text-decoration: none;
  color: inherit;
}

.crm-dp__row:hover { border-color: var(--dp-muted); }

.crm-dp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.crm-dp__t {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.crm-dp__v { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.crm-dp__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--dp-faint);
}

.crm-dp__stage {
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  color: #1d1b1c;
  background: var(--dp-brand);
}

.crm-dp__stage.is-won, .crm-dp__stage.is-lost { background: transparent; color: var(--dp-faint); border: 1px solid var(--dp-line); }
.crm-dp__won { color: var(--dp-won); font-weight: 600; }
.crm-dp__lost { color: var(--dp-lost); font-weight: 600; }
.crm-dp__other { font-style: italic; }
.crm-dp__funnel { margin-inline-start: auto; }

/* ---- starting one -------------------------------------------------------- */

.crm-dp__add {
  width: 100%;
  border: 1px dashed var(--dp-line);
  background: transparent;
  color: var(--dp-muted);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
}

.crm-dp__add:hover { border-color: var(--dp-muted); color: var(--dp-ink); }

.crm-dp__form { display: flex; flex-direction: column; gap: 8px; }
.crm-dp__line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.crm-dp__in {
  width: 100%;
  border: 1px solid var(--dp-line);
  background: var(--dp-soft);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
}

.crm-dp__in:focus { outline: none; border-color: var(--dp-muted); }
.crm-dp__hint { font-size: 11.5px; color: var(--dp-faint); line-height: 1.5; }
.crm-dp__acts { display: flex; gap: 8px; }

.crm-dp__save {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--dp-brand);
  color: #1d1b1c;
}

.crm-dp__save:disabled { opacity: .55; cursor: default; }

.crm-dp__cancel {
  border: 1px solid var(--dp-line);
  background: transparent;
  color: var(--dp-muted);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
}

.crm-dp__err {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dp-lost);
}

/* ---- the suggestion ------------------------------------------------------ */

/* Loud on purpose. This is the one thing on the screen that turns a
   conversation into a deal, and the reason 22,000 of them never became one is
   that the way to do it was somewhere else entirely. */
.crm-dp__nudge {
  margin: 8px 0 10px;
  padding: 10px 11px;
  border: 1px solid var(--crm-dp-brand, #d4fb08);
  border-radius: 8px;
  background: rgba(212, 251, 8, .07);
}

.crm-dp__nudget { font-size: 13px; font-weight: 700; }

.crm-dp__nudgew {
  font-size: 12px;
  margin-top: 2px;
  opacity: .75;
  line-height: 1.45;
}

.crm-dp__nudgeb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.crm-dp__nudgeb .crm-dp__add { margin: 0; }

.crm-dp__plain {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .65;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crm-dp__plain:hover { opacity: 1; }
.crm-dp__plain:disabled { opacity: .3; cursor: default; }

/* ---- the next step ------------------------------------------------------
   Under the deal, not inside it: the row is a link to the board and this line
   carries a button of its own.

   Quiet by default and loud only when late. A deal being worked is the normal
   case and should not shout; a promise whose date has passed is the one thing
   on this panel worth a colour. */
.crm-dp__deal + .crm-dp__deal { margin-top: 8px; }

.crm-dp__next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px 0;
  font-size: 11.5px;
  color: var(--dp-muted, #55606c);
  min-height: 20px;
}

/* The platform's base stylesheet puts `margin-bottom: 1rem` on every text
   input, written as `input[type]:not([type="file"])…` - six :not()s, so no
   class selector of ours outweighs it, hence the !important. Our rows space
   themselves with `gap`, so on a horizontal row that margin is invisible until
   something has to line up with it: the row measures 16px taller than its
   fields, and a button centred in the row sits 8px below the field beside it.
   Child selectors, so this reaches the row's own controls and nothing nested.
   The long version of this note is in pipeline-board.css. */
.crm-dp__next > input { margin-bottom: 0 !important; }

.crm-dp__nextm { font-size: 7px; color: #12a150; line-height: 1; }
.crm-dp__nextm.is-late { color: #d92d20; }

.crm-dp__nextt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.crm-dp__next.is-none .crm-dp__nextt { opacity: .65; }

.crm-dp__nextd { margin-inline-start: auto; flex: 0 0 auto; }
.crm-dp__nextd.is-late { color: #d92d20; font-weight: 600; }

.crm-dp__nextb {
  margin-inline-start: auto;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: #1f6feb;
  cursor: pointer;
}

.crm-dp__nextb:hover { background: rgba(31, 111, 235, .1); }
.crm-dp__nextb:disabled { opacity: .55; cursor: default; }

.dark .crm-dp__nextb { color: #6ea8fe; }
.dark .crm-dp__nextb:hover { background: rgba(110, 168, 254, .16); }

/* ---- the customer agreed ------------------------------------------------- */

/* The press that starts the chain: the agreement is recorded, the lines are
   frozen as what was agreed to, and the invoice is issued and sent. It is the
   only thing in this panel that changes money, so it is the only thing here
   drawn as a real button rather than as a link.

   In the panel, not on the board, because the person who HEARD the customer
   agree is reading the conversation - and a step that asks them to go and find
   a card somewhere else is a step that does not happen. */
.crm-dp__agree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--cv-line, var(--dp-line));
}

.crm-dp__agreeb {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--dp-brand);
  color: #1d1b1c;   /* the brand is a bright lime; only black reads on it */
  cursor: pointer;
}

.crm-dp__agreeb:hover { filter: brightness(1.06); }
.crm-dp__agreeb:disabled { opacity: .6; cursor: default; }

/* Already agreed: a fact, not an offer. */
.crm-dp__agree.is-done { color: var(--dp-muted); font-size: 12px; }
.crm-dp__agreem { color: var(--dp-won); font-weight: 700; }
.crm-dp__agreet { min-width: 0; }

/* "Edit quote" after a yes: secondary, so it never reads as the next step. */
.crm-dp__reopen {
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--dp-line); background: transparent; color: var(--dp-ink);
}
.crm-dp__reopen:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.crm-dp__reopen:disabled { opacity: .6; cursor: default; }

.crm-dp__agreei {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--dp-ink);
}

/* Asked once per account, on the first acceptance. */
.crm-dp__ask {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-dp__askt { font-size: 12px; color: var(--dp-muted); }

.crm-dp__asks {
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--cv-line, var(--dp-line));
  border-radius: 8px;
  background: var(--cv-card, #ffffff);
  color: var(--dp-ink);
  min-width: 0;
  flex: 1 1 120px;
}

.crm-dp__askn {
  width: 100%;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dp-faint);
}

/* What the press actually did. Cleared after one paint - see buildCard. */
.crm-dp__said {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dp-won);
}

.dark .crm-dp__asks { background: rgba(255, 255, 255, .04); color: #e6e6e6; }

/* The documents an agreement produced. Links, not labels: the page they open
   is the copy the CUSTOMER has, which is the one that settles an argument. */
.crm-dp__doc {
  margin-inline-start: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--dp-ink);
  text-decoration: none;
}

a.crm-dp__doc:hover { text-decoration: underline; }

/* The customer asked for the invoice (AI Assist): their words above the
   button that issues and sends it. No coloured edge - a tint and the words. */
.crm-dp__asked {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--dp-brand) 14%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

.crm-dp__asked b { font-weight: 600; }
.crm-dp__askedq { color: var(--dp-muted); }