/* audit-log.css — the record of who changed what.
 *
 * Dense on purpose. This is a log: the answer is usually one line among many,
 * and anything that spends vertical space on decoration makes it harder to
 * find. Colour is used once, on the verb, because "deleted" and "changed" are
 * the two words a person scans for.
 */
.crm-au {
  width: 100%;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-weak, #dfe3da);
}

.crm-au__top { display: flex; align-items: baseline; gap: 10px; }
.crm-au__title { margin: 0; font-size: 17px; font-weight: 700; }
.crm-au__count { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }

.crm-au__note {
  margin: 4px 0 12px;
  font-size: 13px;
  line-height: 1.6;
  opacity: .75;
  max-width: 72ch;
}

.crm-au__btn {
  border: 1px solid var(--border-weak, #dfe3da);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}

.crm-au__btn:hover { border-color: #606a76; }
.crm-au__btn:disabled { opacity: .5; cursor: default; }

.crm-au__pick {
  display: block;
  margin-bottom: 12px;
  border: 1px solid var(--border-weak, #dfe3da);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  max-width: 240px;
}

/* The log scrolls inside itself.
   Appended to the page, every "Show older" made the page taller - twenty-five
   more rows each time, with the top receding further away and no way back to
   it. A record is a thing you scan inside a window, not a page that grows
   without end under the screen you were reading. */
.crm-au__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 6px;
}

.crm-au__row { padding: 10px 0; border-bottom: 1px solid var(--border-weak, #dfe3da); }
.crm-au__row:last-child { border-bottom: 0; }

.crm-au__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.crm-au__what { font-size: 13.5px; font-weight: 600; }

/* The two words people scan for. */
.crm-au__verb {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  background: rgba(107, 114, 128, .16);
  color: #6b7280;
}

.crm-au__verb.is-create { background: rgba(18, 161, 80, .14); color: #12a150; }
.crm-au__verb.is-destroy { background: rgba(185, 28, 28, .13); color: #b91c1c; }

.crm-au__who { margin-inline-start: auto; font-size: 11.5px; opacity: .6; white-space: nowrap; }

.crm-au__fields { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }

.crm-au__f {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.crm-au__fk { opacity: .55; min-width: 110px; }
.crm-au__was { opacity: .6; text-decoration: line-through; word-break: break-word; }
.crm-au__arrow { opacity: .45; }
.crm-au__now { word-break: break-word; }
.crm-au__more { font-size: 11.5px; opacity: .5; margin-top: 2px; }

.dark .crm-au { border-top-color: rgba(255, 255, 255, .12); }
.dark .crm-au__row { border-bottom-color: rgba(255, 255, 255, .08); }
.dark .crm-au__btn, .dark .crm-au__pick { border-color: rgba(255, 255, 255, .14); }