/* invoice-collect.css — the three dialogs that take money, fix a date, and
 * define the tills. Its own tokens, like every other overlay here; the dialog
 * lives on <body> so it must inherit nothing from the screen underneath it.
 */
.crm-cl__back {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 18, 22, .55);
}

.crm-cl {
  --cl-ink: #1d1b1c;
  --cl-muted: #55606c;
  --cl-line: #e2e6dd;
  --cl-card: #ffffff;
  --cl-soft: #f7f9f4;
  --cl-good: #147a4a;
  --cl-bad: #b42318;
  --cl-go: #d4fb08;
  --cl-goink: #1d1b1c;

  width: min(520px, 100%);
  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--cl-card);
  color: var(--cl-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-cl,
.dark .crm-cl,
[data-theme="dark"] .crm-cl {
  --cl-ink: #e8eaed;
  --cl-muted: #9aa3af;
  --cl-line: #2c3138;
  --cl-card: #1b1e23;
  --cl-soft: #15181c;
  --cl-good: #6ee7b7;
  --cl-bad: #fca5a5;
  --cl-go: #d4fb08;
  --cl-goink: #1d1b1c;
}

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

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

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

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

.crm-cl__x:hover { background: var(--cl-soft); color: var(--cl-ink); }

.crm-cl__body { padding: 16px 18px; overflow: auto; flex: 1; }

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

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

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

.crm-cl__void {
  border: 1px solid var(--cl-bad); background: transparent; color: var(--cl-bad);
  border-radius: 8px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

.crm-cl__link {
  border: 0; background: transparent; color: var(--cl-muted);
  font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 4px 0 0;
}

.crm-cl__hint { display: block; font-size: 11.5px; color: var(--cl-muted); line-height: 1.6; margin-bottom: 4px; }
.crm-cl__label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.crm-cl__note { font-size: 12px; color: var(--cl-muted); line-height: 1.7; margin-bottom: 14px; }

.crm-cl__err {
  font-size: 12.5px; font-weight: 600; color: var(--cl-bad);
  margin-bottom: 10px; line-height: 1.6;
}

.crm-cl__field { display: block; margin-bottom: 12px; }

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

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

.crm-cl__row { display: flex; gap: 10px; }
.crm-cl__row > .crm-cl__field { flex: 1; }

/* The two figures that decide how much is typed into the box below them. */
.crm-cl__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--cl-line); border-radius: 8px; background: var(--cl-soft);
  font-size: 13px; color: var(--cl-muted);
}

.crm-cl__owed { color: var(--cl-ink); font-size: 15px; }

.crm-cl__past { margin-top: 14px; }

.crm-cl__payrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--cl-line);
}

.crm-cl__payrow:last-child { border-bottom: 0; }
.crm-cl__payamt { font-weight: 700; color: var(--cl-good); white-space: nowrap; }
.crm-cl__paywhen { flex: 1; color: var(--cl-muted); }

.crm-cl__kill {
  border: 0; background: transparent; color: var(--cl-muted);
  font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 0;
}

.crm-cl__kill:hover { color: var(--cl-bad); }

/* ---- the tills ---- */

.crm-cl__methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.crm-cl__methodrow { display: flex; align-items: center; gap: 8px; }
.crm-cl__methodrow input[type="text"] { flex: 1; }
.crm-cl__methodrow select { width: 110px; flex-shrink: 0; }

/* A till that came from a connected gateway. Nothing on it is editable here -
   the gateway owns the name, and the money lands in it whatever is ticked - so
   it is drawn as a statement rather than as a row of controls somebody will
   try to change and be quietly refused by. */
.crm-cl__methodrow.is-gateway input[type="text"],
.crm-cl__methodrow.is-gateway select {
  opacity: .72;
  cursor: default;
}

/* Removing a method, as against switching it off. Quiet until the row is
   hovered: it is the one control here that takes something away, and a row of
   red crosses invites the press it should not. */
.crm-cl__drop {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cl-muted, #55606c);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}

.crm-cl__methodrow:hover .crm-cl__drop { opacity: 1; }

.crm-cl__drop:hover {
  background: rgba(185, 28, 28, .12);
  color: #b91c1c;
}

.crm-cl__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #05603a;
  background: #ecfdf3;
  border: 1px solid #abefc6;
  white-space: nowrap;
}

.dark .crm-cl__tag { color: #6ce9a6; background: rgba(18, 161, 80, .14); border-color: rgba(18, 161, 80, .4); }

.crm-cl__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-cl__adder > .crm-cl__add { align-self: stretch; }
.crm-cl__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-cl__adder > input { margin-bottom: 0 !important; }

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

/* 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-cl { direction: rtl; }

/* ---------------------------------------------------- giving money back */

/* Two acts on one screen, never merged into one button: a credit note
 * reduces what is owed, a refund moves money. See invoice-collect.js. */
.crm-cl__pick {
  display: flex;
  gap: 6px;
  margin: 2px 0 10px;
}

.crm-cl__tab {
  flex: 1 1 0;
  padding: 9px 10px;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
  background: transparent;
  color: var(--cl-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.crm-cl__tab.is-on {
  background: var(--cl-soft);
  border-color: var(--cl-ink);
  color: var(--cl-ink);
}

/* Money leaving reads in the warning colour and carries its minus, so the
 * column cannot be scanned as though every row were a payment. */
.crm-cl__payrow.is-back .crm-cl__payamt { color: var(--cl-bad); }

.crm-cl__payrow.is-void { opacity: .55; }
.crm-cl__payrow.is-void .crm-cl__payamt { text-decoration: line-through; }

/* ------------------------------------------------------------- importing */

.crm-imp { max-width: 720px; }

.crm-imp__cols {
  display: block;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
  background: var(--cl-soft);
  color: var(--cl-muted);
  font-size: 12px;
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}

.crm-imp__file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.crm-imp__csv {
  width: 100%;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  /* The platform puts 1rem under every field. Here the report sits directly
   * below and the gap reads as a broken layout. See invoice-send.css. */
  margin-bottom: 10px !important;
}

.crm-imp__report { max-height: 320px; overflow-y: auto; }

.crm-imp__ok {
  padding: 9px 11px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cl-good) 14%, transparent);
  color: var(--cl-good);
  font-weight: 600;
}

/* The commit is deliberately NOT the same button as the check: a press that
 * writes money records should not be in the place your finger already is. */
.crm-imp__commit { margin-inline-start: 8px; }

/* ------------------------------------------------------- end of day */

.crm-eod { max-width: 640px; }

.crm-eod__till {
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
  background: var(--cl-soft);
}

.crm-eod__name { font-weight: 700; margin-bottom: 8px; }

.crm-eod__fig {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--cl-muted);
  font-size: 13px;
}

.crm-eod__fig.is-total {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--cl-line);
  color: var(--cl-ink);
  font-weight: 700;
}

.crm-eod__fig.is-back .crm-eod__figv { color: var(--cl-bad); }
.crm-eod__fig.is-short .crm-eod__figv { color: var(--cl-bad); font-weight: 700; }
.crm-eod__fig.is-over .crm-eod__figv { color: var(--cl-good); font-weight: 700; }
.crm-eod__figv { font-variant-numeric: tabular-nums; }

/* The gap between what the system expected and what the person found is the
 * one number this whole screen exists for, so it is the one that is loud. */
.crm-eod__gap {
  padding: 8px 10px;
  margin: 6px 0 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
}

.crm-eod__gap.is-level { background: color-mix(in srgb, var(--cl-good) 13%, transparent); color: var(--cl-good); }
.crm-eod__gap.is-short { background: color-mix(in srgb, var(--cl-bad) 13%, transparent); color: var(--cl-bad); }
.crm-eod__gap.is-over { background: color-mix(in srgb, var(--cl-good) 13%, transparent); color: var(--cl-good); }

.crm-eod__sig { margin-top: 8px; color: var(--cl-muted); font-size: 12px; }

.crm-eod__stale {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cl-bad) 10%, transparent);
  color: var(--cl-bad);
  font-size: 12px;
}

/* ------------------------------------------------------ connecting YouTube */

.crm-yt { max-width: 620px; }

.crm-yt__steps {
  margin: 4px 0 14px;
  padding-inline-start: 20px;
  color: var(--cl-muted);
  font-size: 13px;
  line-height: 1.7;
}

.crm-yt__uri {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.crm-yt__uri .crm-imp__cols { margin-bottom: 0; flex: 1 1 auto; }

.crm-yt__err:not(:empty) {
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cl-bad) 12%, transparent);
  color: var(--cl-bad);
  font-size: 13px;
}

/* ------------------------------------------- import dialog, owner's design
 * An upload tile beside the title, a real-looking file button, and the go
 * button lime with black words in both themes (the owner's call). Scoped to
 * .crm-imp so the payment and till dialogs keep their own look. */

.crm-imp { width: min(620px, 100%); max-width: none; border-radius: 18px; }

.crm-imp .crm-cl__head { gap: 14px; padding: 18px 22px; }
.crm-imp .crm-cl__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.crm-imp__tile {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, #d4fb08 22%, var(--cl-card));
  color: var(--cl-ink);
  font-size: 17px;
}
.crm-imp__tile i, .crm-imp .crm-cl__x i, .crm-imp__pick i, .crm-imp__arrow { line-height: 1; display: inline-flex; }

.crm-imp .crm-cl__x {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--cl-ink);
}

.crm-imp .crm-cl__body { padding: 20px 22px 22px; }
.crm-imp .crm-cl__note { font-size: 13.5px; line-height: 1.65; margin: 0 0 18px; }
.crm-imp .crm-cl__body > .crm-cl__label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }

.crm-imp .crm-imp__cols {
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--cl-ink);
  scrollbar-width: thin;
}

.crm-imp .crm-imp__file { gap: 12px; flex-wrap: nowrap; margin-bottom: 12px; }

.crm-imp__pick {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 8px 14px;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
  background: var(--cl-soft);
  color: var(--cl-ink);
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.crm-imp__pick:hover { border-color: var(--cl-muted); }
.crm-imp__pick i { font-size: 16px; }
.crm-imp__pick input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.crm-imp__pick:focus-within { outline: 2px solid #d4fb08; outline-offset: 2px; }

.crm-imp__picked {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; color: var(--cl-muted);
}

.crm-imp .crm-imp__links {
  margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.crm-imp .crm-imp__links .fi { font-size: 13px; line-height: 0; margin-inline-end: 6px; vertical-align: -2px; }
.crm-imp .crm-imp__file .crm-cl__link {
  flex: none;
  padding: 0; font-size: 13px; color: var(--cl-ink);
  text-underline-offset: 3px;
}

.crm-imp .crm-imp__csv {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  resize: vertical;
  margin-bottom: 0 !important;
}
.crm-imp .crm-imp__report:not(:empty) { margin-top: 14px; }

.crm-imp .crm-cl__foot { padding: 16px 22px; }

.crm-imp .crm-cl__go {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  background: #d4fb08; color: #111;
}
.crm-imp .crm-cl__go:hover:not([disabled]) { background: #c4ea00; }
.crm-imp__arrow { font-size: 15px; }
html.crm-rtl .crm-imp__arrow { transform: scaleX(-1); }
.crm-cl__back:has(> .crm-imp) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

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