/* ==========================================================================
   Audit log
   The log is a list of things people did, newest first, each one opening to
   the fields it moved. A list rather than a table: an entry is a sentence
   (who did what to which record, and when) with a table under it, and a table
   of sentences is what a stacked table turns into on a phone anyway.
   Every class here starts alog, so nothing on any other page can match it.
   ========================================================================== */

.alog { margin: 0; padding: 0; list-style: none; }

.alog__entry {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.alog__entry:last-child { border-bottom: 0; }

.alog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
}

/* The pill keeps its own height and lines up with the first line of words. */
.alog__badge { flex: none; margin-top: 1px; }
.alog__badge--created { background: var(--ok-bg); color: var(--ok-fg); }
.alog__badge--edited  { background: var(--info-bg); color: var(--info-fg); }
.alog__badge--deleted { background: var(--bad-bg); color: var(--bad-fg); }

/* Takes the room left, and gives way to the actions on a narrow screen by
   wrapping them onto a line of their own rather than squeezing the words. */
.alog__what {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 260px;
  min-width: 0;
}

.alog__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: var(--fs-md);
  color: var(--txt);
}
.alog__kind { font-weight: var(--fw-semibold); }
.alog__label { color: var(--txt-2); overflow-wrap: anywhere; }

.alog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  font-size: var(--fs-sm);
  color: var(--txt-3);
}
.alog__who { color: var(--txt-2); font-weight: var(--fw-medium); }
.alog__dot { color: var(--line-strong); }

.alog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* --- what changed -------------------------------------------------------- */

.alog__changes {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow-x: auto;
}

.alog__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.alog__table thead th {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.alog__table tbody th,
.alog__table tbody td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.alog__table tbody tr:last-child th,
.alog__table tbody tr:last-child td { border-bottom: 0; }

/* The field's name is the question; the values are the answers. */
.alog__field { width: 28%; color: var(--txt-2); font-weight: var(--fw-medium); }
.alog__table--edit .alog__was,
.alog__table--edit .alog__now { width: 36%; }

/* What it was is struck through quietly; what it became is in full ink. Not
   red and green: an edit is not a fault, and the order of the columns already
   says which is which. */
.alog__was { color: var(--txt-3); }
.alog__struck { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.alog__now,
.alog__value { color: var(--txt); }

.alog__note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--txt-2); }

/* --- one record's story -------------------------------------------------- */

.alog-story__who { font-size: var(--fs-md); }

.alog-story__editors { min-width: 0; }
.alog-story__people { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.alog-story__person { display: inline-flex; align-items: baseline; gap: 6px; }
.alog-story__name { font-weight: var(--fw-semibold); }
.alog-story__count { font-size: var(--fs-xs); color: var(--txt-3); }

/* The people strip holds one stat per person, and a company with a dozen
   users wraps it onto as many lines as it needs. */
.alog-people { row-gap: var(--sp-4); }

/* --- on a phone ---------------------------------------------------------- */

@container content (max-width: 560px) {
  .alog__entry { padding: 12px 14px; }

  /* The actions take the line under the words, side by side, with the room
     shared: a History button pushed to the far edge by itself reads as
     belonging to the next entry. */
  .alog__actions { flex: 1 1 100%; margin-left: 0; }
  .alog__actions > .btn { flex: 1 1 0; }

  /* Each change becomes a small block: the field on its own line, then what
     it was and what it became under it, each with its word in front. */
  .alog__table thead { display: none; }

  .alog__table,
  .alog__table tbody,
  .alog__table tbody tr,
  .alog__table tbody th,
  .alog__table tbody td { display: block; width: auto; }

  .alog__table tbody tr { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
  .alog__table tbody tr:last-child { border-bottom: 0; }

  .alog__table tbody th,
  .alog__table tbody td { padding: 0; border-bottom: 0; }

  .alog__table tbody th { margin-bottom: 4px; }

  .alog__table--edit .alog__was,
  .alog__table--edit .alog__now { display: flex; gap: 8px; width: auto; }

  .alog__table--edit .alog__was::before,
  .alog__table--edit .alog__now::before {
    content: attr(data-label);
    flex: none;
    width: 46px;
    font-size: var(--fs-xs);
    color: var(--txt-3);
  }
}