/*
 * M8 · A-17 Audit log rows and the A-18 event detail panel (list + panel layout: .m8-split in
 * pages/admin-compliance.css).
 *   .audit-list / .audit-row   Time (time + date) · Actor + role (+ "as <name>") · Action · Resource · Site · ›
 *   .audit-panel               event title, "Performed by … while viewing as …" box, key/values,
 *                              change_set diff, "Read-only record"
 */
@layer pages {
  .audit-list { --list-cols: 150px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 1fr) 24px; }
  .audit-list .list-row { min-height: 58px; }

  .audit-row__time {
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
  }
  .audit-row__clock { font-weight: 700; }
  .audit-row__date { font-size: 12px; color: var(--color-neutral-700); }

  .audit-row__actor {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .audit-row__name { font-weight: 700; }
  .audit-row__role { font-weight: 500; color: var(--color-neutral-700); }
  .audit-row__as {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 11.5px;
    font-weight: 700;
  }
  .audit-row__as .icon { font-size: 12px; }

  .audit-row__resource {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .audit-row__type {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-neutral-700);
  }
  .audit-row__site { font-size: 13px; }
  .audit-row__chev {
    display: flex;
    font-size: 16px;
    color: var(--color-neutral-700);
  }

  /* A-18 ------------------------------------------------------------------------------------- */
  .audit-panel__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .audit-panel__as {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    line-height: 1.45;
  }
  .audit-panel__as .icon { font-size: 16px; margin-top: 1px; }

  .audit-panel__uid { font-variant-numeric: tabular-nums; }
  .audit-panel .kv__label { white-space: nowrap; }

  .audit-panel__lock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-neutral-700);
  }
  .audit-panel__lock .icon { font-size: 14px; }

  .audit-diff { display: flex; flex-direction: column; gap: 8px; }
  .audit-diff__list { display: flex; flex-direction: column; gap: 6px; margin: 0; }
  .audit-diff__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--color-bg);
    font-size: 13px;
  }
  .audit-diff__field { font-weight: 700; }
  .audit-diff__values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .audit-diff__before,
  .audit-diff__after {
    padding: 1px 8px;
    border-radius: 8px;
    text-decoration: none;
  }
  .audit-diff__before { background: var(--color-err-soft); color: var(--color-err-text); text-decoration: line-through; }
  .audit-diff__after { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
  .audit-diff__arrow { font-size: 13px; color: var(--color-neutral-700); }

  @media (max-width: 1199px) {
    .audit-list { --list-cols: 120px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.9fr) 20px; }
  }

  /* Tablets: the Site column gives way to the action and resource. */
  @media (max-width: 1023px) {
    .audit-list { --list-cols: 120px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.6fr) 20px; }
    .audit-list > :is(.list-header, .list-row) > :nth-child(5) { display: none; }
  }

  @media (max-width: 767px) {
    .audit-list { --list-cols-mobile: minmax(0, 1fr) auto; }
    .audit-list .list-row > :is(.audit-row__resource, .audit-row__site, .audit-row__chev) { display: none; }
    .audit-row__time { grid-column: 2; grid-row: 1; text-align: right; }
    .audit-row__actor { grid-column: 1; grid-row: 1; }
  }
}