/* Audit log (owner: WP5). A feed grouped by day; details behind "Show changes". Tokens only. */

/* Filters: a labelled Creamy toolbar ------------------------------------------------------------ */
.ts-audit-filters { align-items: flex-end; gap: var(--ts-space-3) var(--ts-space-4); padding: var(--ts-space-4); }
.ts-audit-filter { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; min-width: 0; }
.ts-audit-filter .form-label { color: var(--ts-text); font-weight: 600; }
.ts-audit-filter--id { flex: 0 1 110px; }
.ts-audit-filter--who { flex: 1.3 1 220px; }
.ts-audit-filters__buttons { display: flex; align-items: center; gap: var(--ts-space-2); }
.ts-audit-count { margin: var(--ts-space-4) 0 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }

/* Days ----------------------------------------------------------------------------------------- */
.ts-audit-day { margin-top: var(--ts-space-5); }
.ts-audit-day + .ts-audit-day { margin-top: var(--ts-space-8); }
.ts-audit-day__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); }
.ts-audit-day__date { color: var(--ts-text-muted); font-size: var(--ts-fs-small); font-weight: 500; letter-spacing: 0; }

/* Entries -------------------------------------------------------------------------------------- */
.ts-audit-list { list-style: none; margin: 0; padding: 0; }
.ts-audit-entry {
  display: grid; grid-template-columns: 48px 28px minmax(0, 1fr); gap: 0 var(--ts-space-3); align-items: start;
  padding: 14px var(--ts-space-6);
  border-top: 1px solid var(--ts-border-subtle);
}
.ts-audit-entry:first-child { border-top: 0; }
.ts-audit-entry__time { padding-top: 4px; color: var(--ts-text-secondary); font-family: var(--ts-font-figures); font-size: var(--ts-fs-small); line-height: 20px; font-weight: 500; }
.ts-audit-entry__icon {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ts-slate-100); color: var(--ts-slate-600); font-size: 13px;
}
.ts-audit-entry--create .ts-audit-entry__icon { background: var(--ts-green-50); color: var(--ts-green-600); }
.ts-audit-entry--update .ts-audit-entry__icon { background: var(--ts-slate-100); color: var(--ts-slate-600); }
.ts-audit-entry--delete .ts-audit-entry__icon, .ts-audit-entry--danger .ts-audit-entry__icon { background: var(--ts-red-50); color: var(--ts-red-600); }
.ts-audit-entry--warn .ts-audit-entry__icon { background: var(--ts-amber-50); color: var(--ts-amber-600); }
.ts-audit-entry--event .ts-audit-entry__icon { background: var(--ts-blue-50); color: var(--ts-blue-700); }
/* One line on wide screens (what happened, then who, where and the details toggle at the end);
   the two halves wrap onto two lines when there is no room. */
.ts-audit-entry__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ts-space-6); min-width: 0; padding-top: 3px; }
.ts-audit-entry__body > .collapse, .ts-audit-entry__body > .collapsing { flex: 0 0 100%; }
.ts-audit-entry__line { flex: 1 1 340px; margin: 0; line-height: 22px; overflow-wrap: anywhere; }
.ts-audit-entry__action { font-weight: 600; }
.ts-audit-entry--danger .ts-audit-entry__action { color: var(--ts-danger-fg); }
.ts-audit-entry__item { color: var(--ts-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ts-slate-300); text-underline-offset: 3px; }
.ts-audit-entry__item:hover { color: var(--ts-link-hover); text-decoration-color: currentColor; }
/* Who, where and the toggle line up in columns from one entry to the next */
.ts-audit-entry__meta { display: grid; grid-template-columns: minmax(0, auto) 8.5rem 10.5rem; align-items: center; gap: 4px var(--ts-space-4); margin: 0 0 0 auto; color: var(--ts-text-muted); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-audit-entry__site { min-width: 0; }
.ts-audit-entry__site .ts-site { max-width: 100%; }
.ts-audit-actor { display: inline-flex; align-items: center; gap: 6px; color: var(--ts-text-secondary); overflow-wrap: anywhere; }
.ts-audit-actor > .bi { color: var(--ts-slate-400); }
.ts-audit-entry__toggle {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; border: 0; background: none;
  color: var(--ts-text); font-family: var(--ts-font); font-size: var(--ts-fs-small); font-weight: 600; border-radius: var(--ts-radius-xs); cursor: pointer;
}
.ts-audit-entry__toggle:hover { color: var(--ts-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ts-audit-entry__toggle::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 8px; border-right: 1.5px solid var(--ts-pink-600); border-bottom: 1.5px solid var(--ts-pink-600); transform: rotate(45deg); transition: transform var(--ts-dur-1) var(--ts-ease); }
.ts-audit-entry__toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.ts-audit-entry__hide { display: none; }
.ts-audit-entry__toggle[aria-expanded="true"] .ts-audit-entry__show { display: none; }
.ts-audit-entry__toggle[aria-expanded="true"] .ts-audit-entry__hide { display: inline; }

/* Details: before and after, or what was recorded ----------------------------------------------- */
.ts-audit-details { margin-top: 10px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); overflow: hidden; }
.ts-audit-details .table { background: transparent; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-audit-details .table > :not(caption) > * > * { padding: 8px 14px; background: transparent; vertical-align: top; }
.ts-audit-details .table > thead > tr > th { background: transparent; }
.ts-audit-details .table th[scope="row"] { width: 28%; font-weight: 500; color: var(--ts-text-secondary); overflow-wrap: anywhere; }
.ts-audit-details .table td { width: 36%; overflow-wrap: anywhere; }
.ts-audit-fields { margin: 0; max-height: 360px; overflow: auto; }
.ts-audit-fields > div { display: grid; grid-template-columns: minmax(120px, 28%) minmax(0, 1fr); gap: var(--ts-space-3); padding: 7px 14px; border-top: 1px solid var(--ts-border-subtle); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-audit-fields > div:first-child { border-top: 0; }
.ts-audit-fields dt { color: var(--ts-text-secondary); font-weight: 500; overflow-wrap: anywhere; }
.ts-audit-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ts-audit-json { margin: 0; max-height: 200px; overflow: auto; font-family: var(--ts-font-mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ts-text); }
.ts-audit-text { white-space: pre-wrap; }

@media (max-width: 767.98px) {
  .ts-audit-entry__meta { display: flex; flex-wrap: wrap; margin-left: 0; gap: 4px var(--ts-space-4); }
  .ts-audit-entry__toggle-space { display: none; }
  .ts-audit-entry { grid-template-columns: 44px minmax(0, 1fr); padding: 12px var(--ts-space-4); }
  .ts-audit-entry__icon { display: none; }
  .ts-audit-filters__buttons { width: 100%; }
}