/* invoice-template.css — the screen where an account decides what its invoice
 * looks like, with the real invoice drawn beside it.
 *
 * Two columns on a desktop and one on anything narrower: the preview is the
 * whole point of the screen, and a preview you have to scroll past the form to
 * reach is one nobody looks at while typing.
 */
.crm-itp__back {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 22, .55);
}

.crm-itp {
  --itp-ink: #1d1b1c;
  --itp-muted: #55606c;
  --itp-line: #e2e6dd;
  --itp-card: #ffffff;
  --itp-soft: #f7f9f4;
  --itp-bad: #b42318;
  --itp-warn: var(--crm-alert-ink, #c8243b);
  --itp-go: #d4fb08;
  --itp-goink: #1d1b1c;

  width: min(1080px, 100%);
  height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--itp-card);
  color: var(--itp-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
  /* direction follows the reader — see html.crm-rtl below, and crm-i18n.js */
  text-align: start;
}

:root.dark .crm-itp,
.dark .crm-itp,
[data-theme="dark"] .crm-itp {
  --itp-ink: #e8eaed;
  --itp-muted: #9aa3af;
  --itp-line: #2c3138;
  --itp-card: #1b1e23;
  --itp-soft: #15181c;
  --itp-bad: #fca5a5;
  --itp-warn: var(--crm-alert-ink, #c8243b);
  --itp-go: #d4fb08;
  --itp-goink: #1d1b1c;
}

.crm-itp * { box-sizing: border-box; }

.crm-itp__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--itp-line);
  flex-shrink: 0;
}

.crm-itp__title { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }

.crm-itp__x {
  border: 0; background: transparent; color: var(--itp-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}

.crm-itp__x:hover { background: var(--itp-soft); color: var(--itp-ink); }

.crm-itp__split { display: flex; flex: 1; min-height: 0; }
.crm-itp__form { width: 46%; overflow: auto; padding: 4px 18px 18px; }
.crm-itp__side { flex: 1; min-width: 0; background: var(--itp-soft);
                 border-inline-start: 1px solid var(--itp-line);
                 display: flex; flex-direction: column; }

.crm-itp__sidehead {
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--itp-muted);
  border-bottom: 1px solid var(--itp-line);
  flex-shrink: 0;
}

/* The preview always renders the light sheet, because that is what the
   customer's browser opens - a dark preview would be a lie about the page. */
.crm-itp__frame { flex: 1; width: 100%; border: 0; background: #f4f6f8; }

@media (max-width: 900px) {
  .crm-itp__split { flex-direction: column; }
  .crm-itp__form { width: 100%; }
  .crm-itp__side { min-height: 320px; border-inline-start: 0; border-top: 1px solid var(--itp-line); }
}

.crm-itp__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--itp-line);
  background: var(--itp-soft); flex-shrink: 0;
}

.crm-itp__go {
  border: 0; border-radius: 8px; padding: 8px 22px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  background: var(--itp-go); color: var(--itp-goink);
}

.crm-itp__go[disabled] { opacity: .5; cursor: default; }
.crm-itp__said { font-size: 12px; color: var(--itp-muted); }

/* The logo's own row, under the field that holds its address. The file input
   itself is never shown - it is the one control browsers will not let you
   style - so a real button opens it. */
.crm-itp__logopick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  flex-wrap: wrap;
}

.crm-itp__upload {
  border: 1px solid var(--itp-line);
  border-radius: 8px;
  padding: 6px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.crm-itp__upload:hover { border-color: var(--itp-muted); }
.crm-itp__upload[disabled] { opacity: .5; cursor: default; }
.crm-itp__file { display: none; }

.crm-itp__note { font-size: 12.5px; color: var(--itp-muted); padding: 14px 0; }
.crm-itp__note.is-bad { color: var(--itp-bad); font-weight: 600; }

.crm-itp__block { padding: 14px 0; border-bottom: 1px solid var(--itp-line); }
.crm-itp__block:last-of-type { border-bottom: 0; }
.crm-itp__h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }

.crm-itp__field { display: block; margin-bottom: 10px; }
.crm-itp__label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.crm-itp__hint { display: block; font-size: 11.5px; color: var(--itp-muted); line-height: 1.6; margin-bottom: 5px; }

.crm-itp input[type="text"],
.crm-itp input:not([type]),
.crm-itp select,
.crm-itp textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--itp-line);
  border-radius: 8px;
  background: var(--itp-card);
  color: var(--itp-ink);
  font: inherit;
  font-size: 13px;
}

.crm-itp textarea { resize: vertical; line-height: 1.7; }

.crm-itp__colour {
  width: 64px; height: 32px; padding: 2px;
  border: 1px solid var(--itp-line); border-radius: 8px;
  background: var(--itp-card); cursor: pointer;
}

.crm-itp__row { display: flex; gap: 10px; }
.crm-itp__row > .crm-itp__field { flex: 1; }

.crm-itp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

.crm-itp__switch {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; cursor: pointer;
}

.crm-itp__switch .crm-itp__label { margin-bottom: 0; }

.crm-itp__fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.crm-itp__fieldrow { display: flex; gap: 6px; align-items: center; }
.crm-itp__fieldrow input { flex: 1; }

.crm-itp__kill {
  border: 1px solid var(--itp-line); background: var(--itp-card); color: var(--itp-muted);
  border-radius: 8px; width: 32px; height: 32px; font-size: 16px; line-height: 1; cursor: pointer;
  flex-shrink: 0;
}

.crm-itp__kill:hover { color: var(--itp-bad); border-color: var(--itp-bad); }

.crm-itp__adder { display: flex; gap: 6px; align-items: stretch; }
/* stretch: an Add beside a field is part of that field's row, and a button
   four pixels short of it reads as floating. Same rule as the deal board's
   typed line. */
.crm-itp__adder > .crm-itp__add { align-self: stretch; }
.crm-itp__adder input { flex: 1; }

/* 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-itp__adder > input,
.crm-itp__fieldrow > input,
.crm-itp__logopick > input { margin-bottom: 0 !important; }

.crm-itp__add {
  border: 1px solid var(--itp-line); background: var(--itp-soft); color: var(--itp-ink);
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

.crm-itp__add[disabled] { opacity: .5; cursor: default; }

/* Arabic reads the other way. The class is set by crm-i18n.js, which is the
   only thing on the page that knows: this installation leaves the document's
   own `dir` unset even in Arabic. */
html.crm-rtl .crm-itp { direction: rtl; }

/* Primary buttons are lime with black words, Facebook blue on hover (owner, 2026-10-04). */
.crm-itp__go:hover:not([disabled]) { background: #1877f2; color: #fff; }