/* --- audit trail ---------------------------------------------------------
 *
 * The "what changed" column on the audit screen. One line per changed
 * attribute, read as "name  old → new".
 *
 * The values are deliberately monospaced and the arrow deliberately muted: an
 * admin scans this column looking for the one attribute that moved, and the
 * shape of a line matters more than its content until they find it.
 *
 * Tokens are Glacier's, like every other block here -- `--font-mono` and the
 * `--text-*` scale rather than literal rem sizes and a local font stack. The
 * rest of the screen is built from the table, page and pill blocks, so this
 * file only carries the change list.
 */

.audit__change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-caption);
  line-height: 1.5;
}

.audit__change + .audit__change {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px dotted var(--border-primary);
}

/* The attribute name carries the scan, so it is the one part set in the body
   face and the only part that is not muted. */
.audit__change-name {
  font-weight: 600;
  color: var(--text-primary);
}

.audit__change-from,
.audit__change-to {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  /* A changed value can be a folder urn. Let it wrap rather than push the
     table sideways -- the table already scrolls, and a urn that forces it to
     is a urn nobody can read without scrolling. */
  overflow-wrap: anywhere;
}

/* Muted, because what a value *was* is context; what it *is* is the answer. */
.audit__change-from {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--border-secondary);
}

.audit__change-to {
  color: var(--text-primary);
}

.audit__change-arrow {
  color: var(--text-tertiary);
}

/* --- the audit table -----------------------------------------------------
   Shares the transfers table's block (dashboard.css); only the column widths
   are specific to this screen. "What changed" gets the lion's share because it
   is the column an admin actually reads, and it carries folder urns. */

/* Scoped to this table -- see the note in dashboard.css.

   Sized from the widest thing each column actually holds: a non-wrapping
   timestamp, a full email address, and the longest action pill ("Drift
   acknowledged"). A pill cannot shrink -- it is an inline-flex box with
   nowrap -- so a column narrower than its widest pill does not truncate, it
   overlaps the next column. */
.dashboard__table--audit { min-width: 1240px; }

.dashboard__table--audit .col-when    { width: 14%; }
.dashboard__table--audit .col-who     { width: 16%; }
.dashboard__table--audit .col-action  { width: 15%; }
.dashboard__table--audit .col-record  { width: 18%; }
.dashboard__table--audit .col-client  { width: 7%; }
/* Takes the share the IP address column had: it is the one an admin reads. */
.dashboard__table--audit .col-changed { width: 30%; }

/* An address longer than its column clips with an ellipsis; the full value
   stays on the cell's title. */
.audit__actor strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The record a row acted on: its type as a tag, its short id beneath. The tag
   is a fixed-height pill, so it must never wrap inside itself. */
.dashboard__table--audit .audit__subject-type {
  margin-left: 0;
  white-space: nowrap;
}

.audit__subject-id {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}