/* Serilogger: filter bar, level badges, KPI grid, event table and detail. */

.sl-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.sl-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }

.sl-level {
    display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
    color: var(--sl-level); background: color-mix(in srgb, var(--sl-level) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--sl-level) 35%, transparent);
}

.sl-table { font-size: .84rem; }
.sl-table thead th { font-weight: 600; color: var(--ahp-muted); border-bottom-width: 1px; background: transparent; white-space: nowrap; }
.sl-table td, .sl-table th { padding: .35rem .6rem; vertical-align: top; }
.sl-table tbody tr { cursor: pointer; }
.sl-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ahp-muted); }
.sl-msg { overflow-wrap: anywhere; max-width: 720px; }
.sl-src { font-size: .75rem; color: var(--ahp-muted); overflow-wrap: anywhere; }
.sl-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .74rem; white-space: nowrap; }

.sl-pre {
    font-size: .78rem; background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .75rem;
    white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; overflow: auto; margin: 0;
}

.sl-props dt { font-weight: 600; color: var(--ahp-muted); font-size: .8rem; }
.sl-props dd { margin-bottom: .45rem; overflow-wrap: anywhere; font-size: .86rem; }

.sl-bar { height: .45rem; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; display: flex; }
.sl-bar span { display: block; height: 100%; }

.sl-elmah-logo { font-weight: 700; letter-spacing: -.02em; }