/* ---- V1.62 THE AUDIT TRAIL (au-*): the Activity drawer of every app (Client\Shared\ActivityDrawer.razor, its shell is the one of
   "Ask about this page": aihelp.css ask-page-*), one event (AuditEventItem, AuditEventDetails, AuditFieldChange), the full log
   (AuditLogView: My company > Audit trail, Administration > Audit trail), the integrity panel (AuditIntegrityPanel). The design
   system's tokens only (tokens.css, --os-*: light and dark), weights 600 at most, no glyph, skeletons for loading; full page
   width (the owner's rule: no centred column). ---- */

/* The button, on the right of the app bar (after "Ask about this page" when the page has it) */
.au-button { display: inline-flex; align-items: center; align-self: center; gap: var(--os-space-1); margin-left: auto; padding: var(--os-space-1) var(--os-space-3);
    border: 1px solid var(--os-border); border-radius: var(--os-radius-pill); background: var(--os-surface); color: var(--os-text); font: var(--os-type-button);
    white-space: nowrap; cursor: pointer; }
.ask-page-button ~ .au-button { margin-left: var(--os-space-2); }
.au-button .mud-icon-root { color: var(--os-accent); }
.au-button:hover, .au-button:focus-visible, .au-button.on { border-color: var(--os-accent); background: var(--os-accent-soft); }

/* The drawer */
.au-drawer { width: min(520px, 100vw); }
.au-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); margin: var(--os-space-2) 0 var(--os-space-1); }
.au-select, .au-search, .au-input { min-height: 32px; padding: var(--os-space-1) var(--os-space-2); border: 1px solid var(--os-border); border-radius: var(--os-radius-md);
    background: var(--os-field); color: var(--os-text); font: var(--os-type-small); }
.au-select:focus, .au-search:focus, .au-input:focus { border-color: var(--os-accent); outline: 2px solid var(--os-accent-soft); }
.au-search { min-width: 200px; flex: 1 1 200px; }
.au-check { display: inline-flex; align-items: center; gap: var(--os-space-1); font: var(--os-type-small); white-space: nowrap; }
.au-item-title { display: flex; align-items: center; gap: var(--os-space-1); margin: var(--os-space-2) 0 0; font: var(--os-type-h4); }
.au-day { margin: var(--os-space-3) 0 var(--os-space-1); color: var(--os-text-2); font: var(--os-type-eyebrow); letter-spacing: 0.04em; text-transform: uppercase; }
.au-list { margin: 0; padding: 0; list-style: none; }
.au-item { display: grid; grid-template-columns: 46px 1fr; gap: var(--os-space-2); padding: var(--os-space-2) 0; border-bottom: 1px solid var(--os-border-subtle); }
.au-item:last-child { border-bottom: 0; }
.au-time { color: var(--os-text-2); font: var(--os-type-small); font-variant-numeric: tabular-nums; }
.au-body { min-width: 0; }
.au-line { font: var(--os-type-body); overflow-wrap: anywhere; }
.au-who { font: var(--os-type-body-strong); }
.au-changes { margin: var(--os-space-1) 0 0; padding-left: var(--os-space-4); color: var(--os-text); font: var(--os-type-small); }
.au-changes li { overflow-wrap: anywhere; }
.au-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1); }
.au-change-field { color: var(--os-text-2); }
.au-change-arrow { color: var(--os-text-3); }
.au-withheld, .au-withheld-line { display: flex; align-items: center; gap: var(--os-space-1); margin-top: var(--os-space-1); color: var(--os-text-2); font: var(--os-type-caption); }
.au-details-toggle { margin-top: var(--os-space-1); padding: 0; border: 0; background: none; color: var(--os-accent-text); font: var(--os-type-caption); cursor: pointer; }
.au-details-toggle:hover, .au-details-toggle:focus-visible { text-decoration: underline; }
.au-empty { min-height: 80px; }
.au-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-2); }
.au-full { margin: var(--os-space-3) 0 0; }
.au-full a { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-accent-text); font: var(--os-type-body-strong); }

/* Loading: the design system's skeleton (never an indeterminate bar) */
.au-skel { display: grid; gap: var(--os-space-2); padding: var(--os-space-2) 0; }
.au-skel .os-skel:nth-child(2) { width: 82%; }
.au-skel .os-skel:nth-child(3) { width: 64%; }

/* The result of an event (a success says nothing; a refusal, a failure, an error say it) */
.au-result { display: inline-flex; align-items: center; margin-right: var(--os-space-1); padding: 0 var(--os-space-2); border-radius: var(--os-radius-pill);
    font: var(--os-type-label); white-space: nowrap; }
.au-result-success { background: var(--os-good-soft); color: var(--os-good-text); }
.au-result-refused, .au-result-error { background: var(--os-bad-soft); color: var(--os-bad-text); }
.au-result-failed, .au-result-aborted { background: var(--os-warn-soft); color: var(--os-warn-text); }
.au-priv { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--os-radius-xs); background: var(--os-info-soft);
    color: var(--os-info-text); font: var(--os-type-label); }

/* The details of one event */
.au-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--os-space-1) var(--os-space-3); margin: var(--os-space-1) 0 2px;
    padding: var(--os-space-2) var(--os-space-3); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); font: var(--os-type-caption); }
.au-details dt { color: var(--os-text-2); font-weight: 600; }
.au-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.au-details code, .au-seals code { padding: 0 var(--os-space-1); border-radius: var(--os-radius-xs); background: var(--os-surface-sunken); font: var(--os-type-mono); }

/* The full log (full page width) */
.au-page { display: flex; flex-direction: column; gap: var(--os-space-3); width: 100%; }
.au-intro p { max-width: none; }
.au-log { display: flex; flex-direction: column; gap: var(--os-space-2); }
.au-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.au-toolbar .spacer { flex: 1; }
.au-link-button { display: inline-flex; align-items: center; gap: var(--os-space-1); text-decoration: none; }
.au-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1); }
.au-view { padding: 2px var(--os-space-3); border: 1px solid var(--os-border); border-radius: var(--os-radius-pill); background: var(--os-neutral-soft);
    color: var(--os-neutral-text); font: var(--os-type-label); cursor: pointer; }
.au-view:hover, .au-view:focus-visible { background: var(--os-surface-pressed); }
.au-view.on { border-color: var(--os-accent); background: var(--os-accent-soft); color: var(--os-text); }
.au-clear { padding: 0; border: 0; background: none; color: var(--os-accent-text); font: var(--os-type-label); cursor: pointer; }
.au-table .au-sentence { min-width: 260px; overflow-wrap: anywhere; }
.au-table tr.au-refused td:first-child, .au-table tr.au-error td:first-child { border-left: 3px solid var(--os-bad); }
.au-table tr.au-failed td:first-child { border-left: 3px solid var(--os-warn); }
.au-table tr.au-detail-row td { background: var(--os-surface-sunken); }
.au-table tr.au-row:focus-visible td { outline: 2px solid var(--os-focus); outline-offset: -2px; }

/* The integrity panel */
.au-integrity .panel-head h2 { display: flex; align-items: center; gap: var(--os-space-1); }
.au-integrity-actions { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
.au-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--os-space-1) var(--os-space-4); margin: 0; font: var(--os-type-body); }
.au-facts dt { color: var(--os-text-2); font-weight: 600; }
.au-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1); margin: 0; min-width: 0; }
.au-ok { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-good-text); font-weight: 600; }
.au-bad { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-bad-text); font-weight: 600; }
.au-warn { color: var(--os-warn-text); font-weight: 600; }
.au-hold { display: inline-flex; align-items: center; gap: var(--os-space-1); font-weight: 600; }
.au-notes, .au-seals { margin: 0; padding-left: var(--os-space-4); }

/* Administration > Audit trail */
.au-chains tr.au-selected td { background: var(--os-accent-soft); }
/* V1.62: the name of a chain is a button (the keyboard opens it too; the row stays clickable) */
.au-row-link { all: unset; cursor: pointer; font-weight: 600; color: inherit; border-radius: var(--os-radius-xs); }
.au-row-link:hover { text-decoration: underline; }
.au-row-link:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 2px; }
.au-ended { color: var(--os-bad-text); font-weight: 600; }
.btn.au-danger { border-color: var(--os-bad); background: var(--os-bad-soft); color: var(--os-bad-text); }
.au-admin-forms h2 { margin-bottom: var(--os-space-2); }
.au-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--os-space-2); margin: var(--os-space-2) 0; }
.au-form label { display: flex; flex-direction: column; gap: 2px; font: var(--os-type-label); }
.au-form .au-wide { min-width: min(420px, 80vw); }

@media (max-width: 600px) {
    .au-button-label { display: none; }
    .au-button { padding: var(--os-space-1) var(--os-space-2); }
    .au-drawer { width: 100vw; left: 0; }
    .au-facts, .au-details { grid-template-columns: 1fr; }
}