/* === Audit Log styles =================================================
 * KPI/toolbar chrome reuses .cust-* / .tile. Only the timeline rows, the
 * before/after diff, and the lock banner live here.
 * ===================================================================== */

/* ─── Books-lock banner ──────────────────────────────────────────── */
.aud-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: var(--s-4);
  border-radius: var(--rs);
  font-size: var(--text-sm);
}
.aud-lock--on  { background: var(--primary-tint); color: var(--primary-deep); border: 1px solid var(--primary); }
.aud-lock--off { background: var(--surface-2); color: var(--t2); border: 1px solid var(--b1); }
.aud-lock strong { font-family: var(--font-mono); }

/* ─── Timeline ───────────────────────────────────────────────────── */
.aud-list { display: flex; flex-direction: column; }

.aud-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px var(--s-3);
  border-bottom: 1px solid var(--b0);
  cursor: pointer;
  transition: background var(--t-fast);
}
.aud-row:last-child { border-bottom: none; }
.aud-row:hover { background: var(--surface-2); }
.aud-row.is-open { background: var(--surface-2); }

.aud-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.aud-action--create  { background: var(--primary-tint);  color: var(--primary-deep); }
.aud-action--update  { background: var(--info-tint);     color: var(--indigo); }
.aud-action--delete  { background: var(--negative-tint); color: var(--negative); }
.aud-action--restore { background: var(--amber-tint);    color: var(--amber-lo); }

.aud-row__main { min-width: 0; }
.aud-row__title {
  font-size: var(--text-sm);
  color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aud-row__title strong { font-family: var(--font-mono); font-weight: var(--w-semibold); }
.aud-row__sub {
  font-size: var(--text-xs);
  color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aud-row__when {
  font-size: var(--text-xs);
  color: var(--t3);
  text-align: right;
  white-space: nowrap;
}

/* ─── Expanded diff ──────────────────────────────────────────────── */
.aud-diff {
  padding: var(--s-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--b0);
}
.aud-diff__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.aud-diff__title {
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}

.aud-change {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--b0);
  font-size: var(--text-sm);
}
.aud-change:last-child { border-bottom: none; }
.aud-change__field { color: var(--t2); font-weight: var(--w-medium); }
.aud-change__val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--rs);
  word-break: break-word;
  white-space: pre-wrap;
}
.aud-change__val--from { background: var(--negative-tint); color: var(--negative); }
.aud-change__val--to   { background: var(--primary-tint);  color: var(--primary-deep); }
.aud-change__val--none { background: transparent; color: var(--t4, var(--t3)); font-style: italic; }

.aud-snapshot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--t2);
  background: var(--surface);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  padding: var(--s-3);
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .aud-row { grid-template-columns: 80px 1fr; }
  .aud-row__when { grid-column: 2; text-align: left; }
  .aud-change { grid-template-columns: 1fr; gap: 4px; }
}