/* ── Audit history (django-auditlog field-level changes) ──────────────── */
.audit-list { max-width: 780px; }
.audit-list li { padding-bottom: 18px; }
.audit-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 7px;
}
.audit-who { font-weight: 600; color: var(--text); }
.audit-when { font-family: var(--font-mono); font-size: 11px; }
.audit-changes {
  margin: 0; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
/* Every row shares one fixed column template, so labels / old / arrow / new line
   up in straight vertical columns across the whole entry. */
.audit-row {
  display: grid; align-items: baseline; gap: 0 12px;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
}
.audit-row:last-child { border-bottom: 0; }
.audit-changes.is-diff .audit-row {
  grid-template-columns: 200px minmax(0, 1fr) 22px minmax(0, 1fr);
}
.audit-changes.is-create .audit-row {
  grid-template-columns: 200px minmax(0, 1fr);
}
.audit-row dt { color: var(--muted); font-weight: 500; min-width: 0; word-break: break-word; }
.audit-row dd { margin: 0; min-width: 0; word-break: break-word; }
.audit-old { text-align: right; color: var(--muted-2); text-decoration: line-through; }
.audit-arrow { text-align: center; color: var(--muted-2); }
.audit-new, .audit-val { text-align: left; color: var(--text-strong); }
.audit-m2m { grid-column: 2 / -1; }
.audit-op { font-weight: 600; font-size: 12px; margin-right: 6px; }
.audit-op.add { color: var(--ok-glow); }
.audit-op.delete { color: var(--danger); }

/* ── The dashboard's «Аудит» feed ─────────────────────────────────────────
   A `.timeline` (components/lists.css) whose rows carry a second, quieter line:
   коли · звідки · з якого клієнта. The two source chips are links into /journal/,
   so they must read as one small unit each — hence the icon inside the chip rather
   than a label beside it, which at this size would take more room than the value. */
.audit-feed li { padding-top: 10px; padding-bottom: 10px; }
.audit-feed-line { line-height: 1.45; }
.audit-feed-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 7px; margin-top: 6px;
  font-size: 11px; color: var(--muted);
}
.audit-feed-meta > .mono { color: var(--muted-2); }
.audit-src {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; line-height: 1.5; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.audit-src .icon { color: var(--muted-2); }
/* The country flag, wherever «звідки» is drawn — the icon's slot in a chip here, the
   journal's «Джерело» column, and the two login-history surfaces. Two regional
   indicator symbols render as a colour image the surrounding font size makes too small
   to read, so it is nudged up; `line-height: 1` stops the emoji's own tall box from
   stretching a table row. No colour of its own: the flag ignores `currentColor`, which
   is the one reason it needs a rule at all.

   `country-flag`, not `flag`: `base/helpers.css` already has `.flag-row`, which is a row
   of *boolean* flag badges («Роль у розрахунках»), and two senses of the word one
   selector apart is how somebody ends up styling the wrong thing. In this file rather
   than among the helpers because every surface that draws one is a reading of the audit
   trail. */
.country-flag {
  font-size: 1.15em; line-height: 1;
  /* All of the gap, because `{% country_flag %}` emits the span and nothing else —
     no template writes a space beside it, so there is one answer to «how far» rather
     than a margin tuned against whatever whitespace each surface happened to have.
     It is this wide because the pair is drawn as one colour image whose picture is
     wider than the advance width the font declares for it: the glyph bleeds right,
     and a normal word space came out looking like none («🇩🇪Germany» read as one
     word). So this pays for the bleed, not for letter spacing. */
  margin-inline-end: 6px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* Less of it inside a chip, where the flag stands in for the icon and `.audit-src`'s
   own flex `gap` already provides the spacing — but not nothing, because a `gap` does
   not know about the bleed either. Just enough that a flag chip does not read tighter
   than the globe chip beside it. */
.audit-src .country-flag { margin-inline-end: 2px; }
a.audit-src:hover {
  color: var(--text-strong); border-color: var(--border-bright); background: var(--panel);
}
a.audit-src:hover .icon { color: var(--accent); }
/* A write with no request behind it (a command, the seeder): stated, not blank —
   an empty cell would read as «дані втрачено» rather than «дії не було з браузера». */
.audit-src.is-offline { color: var(--muted-2); border-style: dashed; background: none; }

@media (max-width: 560px) {
  .audit-changes.is-diff .audit-row,
  .audit-changes.is-create .audit-row { grid-template-columns: 1fr; gap: 2px 0; }
  .audit-old, .audit-arrow, .audit-new { text-align: left; }
  .audit-arrow { display: none; }
}