/* audit
   The audit trail.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- audit trail ---------------- */

/* A trail is scrolled, so its filters travel with it. */
.audit-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 12px 0 14px; margin-bottom: 4px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.audit-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
/* The filter inputs get their width from here and nowhere else —
   `.audit-field input` below sets padding and border but no width, so
   without these the row collapses onto one line. */
.audit-filters input { width: 200px; }
.audit-filters input[type=date] { width: 150px; }
.audit-field { display: flex; flex-direction: column; gap: 4px; }
.audit-field label {
  font: 500 10px var(--ui); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3);
}
.audit-field input, .audit-field select {
  padding: 5px 8px; font-size: 13px; border: 1px solid var(--line-2);
  border-radius: 6px; background: var(--surface); color: var(--ink);
}
.audit-field-wide input { min-width: 230px; }
.audit-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 1px; }
.audit-bar-end { display: flex; align-items: center; gap: 12px; padding-bottom: 1px; }
.audit-count { font: 500 12px var(--mono); color: var(--ink-3); }

/* The day is a heading; the row carries only the time. */
.audit-day {
  display: flex; align-items: baseline; gap: 10px;
  padding: 20px 0 6px;
}
.audit-day-date {
  font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2);
}
.audit-day-count { font: 400 11px var(--mono); color: var(--ink-3); }

.audit-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 200px 150px;
  gap: 14px; align-items: baseline;
  padding: 7px 10px; margin: 0 -10px;
  border-radius: 6px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.audit-row:hover { background: var(--surface); }
.audit-time { font: 400 12px var(--mono); color: var(--ink-3); }

.audit-what { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.audit-action {
  flex-shrink: 0;
  font: 500 11.5px var(--ui);
  padding: 1px 7px; border-radius: 4px;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.audit-action.is-created { color: var(--ok, #3F7A52); border-color: #CBE0D2; background: #F1F7F3; }
.audit-action.is-removal { color: var(--danger); border-color: #EBC9C6; background: #FBF1F0; }
.audit-action.is-refused { color: #fff; background: var(--danger); border-color: var(--danger); }
.audit-record {
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-who { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.audit-role {
  font: 500 10px var(--ui); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin-left: 4px;
}
/* What was typed, under whoever typed it. Its own line and not a role chip:
   a command is case-sensitive and uppercasing it prints one nobody ran. */
.audit-command {
  display: block; font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.audit-detail summary {
  cursor: pointer; list-style: none;
  font-size: 12px; color: var(--ink-3);
}
.audit-detail summary::-webkit-details-marker { display: none; }
.audit-detail summary:hover { color: var(--ink); }
.audit-detail dl { margin: 6px 0 2px; font-size: 12px; }
.audit-detail dl div { display: flex; gap: 8px; padding: 2px 0; }
.audit-detail dt { color: var(--ink-3); min-width: 92px; }
.audit-detail dd { margin: 0; color: var(--ink); word-break: break-word; }
.audit-before { color: var(--ink-3); text-decoration: line-through; }

@media (max-width: 1000px) {
  .audit-row { grid-template-columns: 48px minmax(0, 1fr); }
  .audit-who, .audit-detail { grid-column: 2; }
}