/* styles-audit.css — Audit log view. Zinc-monochrome, dense, semantic colour
   only on action badges. The expandable from→to diff is the centrepiece. */

.audit-view {
  --audit-create: var(--t-color-success, #00a433);
  --audit-create-bg: var(--t-color-success-bg, #e6f7ec);
  --audit-update: var(--t-color-info, #4060d6);
  --audit-update-bg: var(--t-color-info-bg, #eff3ff);
  --audit-delete: var(--t-color-danger, #d35452);
  --audit-delete-bg: var(--t-color-danger-bg, #fef2f2);
  --audit-warn: var(--t-color-warning, #e87c00);
  --audit-warn-bg: var(--t-color-warning-bg, #fff4e5);

  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px 64px;
  width: 100%;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.audit-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.audit-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 4px;
}
.audit-sub {
  font-size: 0.825rem;
  color: var(--fg-3);
  margin: 0;
  max-width: 62ch;
  line-height: 1.45;
}
.audit-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.audit-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.audit-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 240px;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 0 10px;
  color: var(--fg-3);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.audit-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(64,96,214,0.14));
}
.audit-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--fg);
  padding: 8px 0;
}
.audit-select,
.audit-date {
  font: inherit;
  font-size: 0.82rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color 150ms ease;
}
.audit-select:hover,
.audit-date:hover { border-color: var(--line-strong); }
.audit-select:focus,
.audit-date:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(64,96,214,0.14));
}
.audit-date-sep { color: var(--fg-4); font-size: 0.8rem; }
.audit-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--fg-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 7px 11px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.audit-clear:hover { background: var(--bg-hover); color: var(--fg); }

/* ── Action-type chips ─────────────────────────────────────────────── */
.audit-typebar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.audit-typechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.audit-typechip:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.audit-typechip.on { color: var(--fg); border-color: var(--fg); background: var(--bg-soft); font-weight: 600; }
.audit-typechip-n { color: var(--fg-4); font-size: 0.72rem; }
.audit-typechip.on .audit-typechip-n { color: var(--fg-3); }

/* ── List ──────────────────────────────────────────────────────────── */
.audit-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--bg);
}
.audit-row { border-bottom: 1px solid var(--line-soft); }
.audit-row:last-child { border-bottom: none; }
.audit-row.is-open { background: var(--bg-soft); }

.audit-row-head {
  display: grid;
  grid-template-columns: 78px minmax(150px, 1.1fr) minmax(160px, 1.6fr) minmax(70px, 0.7fr) 92px 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 130ms ease;
}
.audit-row-head:disabled { cursor: default; }
.audit-row.can-expand .audit-row-head:hover { background: var(--bg-hover); }
.audit-row-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Action badge — the one place semantic colour lives. */
.audit-badge {
  display: inline-flex;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 0;
  border-radius: 6px;
  border: 1px solid transparent;
}
.audit-badge--create { color: var(--audit-create); background: var(--audit-create-bg); }
.audit-badge--update { color: var(--audit-update); background: var(--audit-update-bg); }
.audit-badge--delete { color: var(--audit-delete); background: var(--audit-delete-bg); }
.audit-badge--request { color: var(--audit-warn); background: var(--audit-warn-bg); }
.audit-badge--neutral { color: var(--fg-2); background: var(--bg-sunken); }

.audit-actor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.audit-avatar {
  width: 24px; height: 24px;
  font-size: 0.62rem;
  flex-shrink: 0;
}
.audit-actor-name {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audit-target { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.audit-entity-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-sunken);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.audit-entity-label {
  font-size: 0.82rem;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-summary {
  font-size: 0.78rem;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-when {
  font-size: 0.76rem;
  color: var(--fg-4);
  text-align: right;
  white-space: nowrap;
}
.audit-chev { color: var(--fg-4); display: flex; justify-content: center; }

/* ── Expanded diff — the centrepiece ───────────────────────────────── */
.audit-detail {
  padding: 4px 16px 16px 94px;
  animation: auditReveal 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes auditReveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.audit-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.audit-change {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
  align-items: baseline;
  background: var(--bg);
  padding: 9px 13px;
}
.audit-change-field {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-2);
}
.audit-change-vals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
}
.audit-arrow { color: var(--fg-4); display: inline-flex; }
.audit-val {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.audit-val--empty { color: var(--fg-4); font-style: italic; }
/* Old value reads muted with a strike feel; new value reads solid. */
.audit-change-vals > .audit-val:first-child:not(:last-child) { color: var(--fg-3); }
.audit-chip {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.78rem;
}
.audit-detail-foot {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: 0.72rem;
  color: var(--fg-4);
}
.audit-ip { font-variant-numeric: tabular-nums; }

/* ── Skeleton ──────────────────────────────────────────────────────── */
.audit-skel {
  display: grid;
  grid-template-columns: 78px 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.audit-skel-badge,
.audit-skel-line {
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-hover) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: auditShimmer 1.4s ease infinite;
}
.audit-skel-badge { height: 20px; }
.audit-skel-line--short { width: 60%; }
@keyframes auditShimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ── Empty + pager ─────────────────────────────────────────────────── */
.audit-empty { padding: 56px 20px; }
.audit-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.audit-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding: 7px 13px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.audit-page-btn:hover:not(:disabled) { background: var(--bg-soft); color: var(--fg); }
.audit-page-btn:disabled { opacity: 0.4; cursor: default; }
.audit-page-info { font-size: 0.8rem; color: var(--fg-3); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .audit-row-head {
    grid-template-columns: 66px 1fr 80px 16px;
    grid-template-areas:
      "badge actor when chev"
      "badge target target chev"
      "badge summary summary chev";
    row-gap: 3px;
  }
  .audit-badge { grid-area: badge; align-self: start; }
  .audit-actor { grid-area: actor; }
  .audit-target { grid-area: target; }
  .audit-summary { grid-area: summary; }
  .audit-when { grid-area: when; }
  .audit-chev { grid-area: chev; align-self: start; }
  .audit-detail { padding-left: 16px; }
  .audit-change { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .audit-detail { animation: none; }
  .audit-skel-badge,
  .audit-skel-line { animation: none; background: var(--bg-sunken); }
  .audit-search,
  .audit-select,
  .audit-date,
  .audit-typechip,
  .audit-clear,
  .audit-page-btn,
  .audit-row-head { transition: none; }
}

/* ── Audit in the Activity-log right panel (compact rightbar) ──────── */
.audit-panel { padding: 0; }
.audit-panel-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 14px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  background: var(--bg);
  color: var(--fg-3);
  flex: none;
}
.audit-panel-search input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: 0.82rem; color: var(--fg); min-width: 0;
}
.audit-panel-body { padding: 0 0 12px; overflow-y: auto; }
.audit-panel-list .audit-row { border-bottom: 1px solid var(--line-soft); }

/* Stack each row to fit the ~380px panel (same areas as the mobile layout). */
.audit-panel .audit-row-head {
  grid-template-columns: 62px 1fr auto 16px;
  grid-template-areas:
    "badge actor when chev"
    "badge target target chev"
    "badge summary summary chev";
  gap: 6px 10px;
  row-gap: 3px;
  padding: 10px 14px;
}
.audit-panel .audit-badge { grid-area: badge; align-self: start; }
.audit-panel .audit-actor { grid-area: actor; }
.audit-panel .audit-target { grid-area: target; }
.audit-panel .audit-summary { grid-area: summary; }
.audit-panel .audit-when { grid-area: when; }
.audit-panel .audit-chev { grid-area: chev; align-self: start; }
.audit-panel .audit-detail { padding: 4px 14px 14px 16px; }
.audit-panel .audit-change { grid-template-columns: 1fr; gap: 3px; }
.audit-panel .audit-skel { padding: 10px 14px; }

.audit-panel-more {
  display: block; width: calc(100% - 28px);
  margin: 10px 14px 4px;
  padding: 8px 12px;
  font: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: background 120ms ease;
}
.audit-panel-more:hover:not(:disabled) { background: var(--bg-soft); }
.audit-panel-more:disabled { opacity: 0.5; cursor: default; }