/* auditLog — Compliance Phase A admin document-access audit viewer (Signal design language).
   Namespaced .al-* ; tokens are applied to .al-root at runtime (light/dark) by auditLog.js. */

.al-root { background: var(--bg); color: var(--text); min-height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.al-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; }

/* header */
.al-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.al-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.al-sub { color: var(--muted); font-size: 13px; margin-top: 4px; max-width: 720px; }

/* buttons */
.al-btn { appearance: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); }
.al-btn:hover { border-color: var(--brand-400); }
.al-btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--e1); }
.al-btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.al-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.al-btn-ghost:hover { color: var(--text); border-color: var(--border); }

/* stat tiles */
.al-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.al-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--e1); }
.al-stat-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.al-stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* filters */
.al-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--e1); }
.al-field { display: flex; flex-direction: column; gap: 5px; }
.al-field > label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.al-grow { flex: 1; min-width: 180px; }
.al-input { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-md); padding: 8px 11px; font-size: 13px; outline: none; transition: border-color .15s var(--ease); }
.al-input:focus { border-color: var(--brand-500); }
.al-actions { flex-direction: row; gap: 8px; }

/* category chips */
.al-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.al-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); }
.al-chip-c { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* states */
.al-loading, .al-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.al-empty-t { font-size: 16px; font-weight: 600; color: var(--text-2); }
.al-empty-s { font-size: 13px; margin-top: 4px; }

/* table */
.al-tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e1); }
.al-count { padding: 10px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.al-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.al-table thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.al-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.al-table tbody tr:last-child td { border-bottom: none; }
.al-table tbody tr:hover { background: var(--surface-2); }
.al-when { white-space: nowrap; color: var(--text-2); }
.al-who { font-weight: 600; }
.al-role { font-size: 11px; color: var(--faint); margin-top: 2px; }
.al-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.al-verb { display: inline-block; padding: 3px 10px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; }
.al-doc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-ip { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.al-detail { max-width: 220px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
    .al-stats { grid-template-columns: repeat(3, 1fr); }
    .al-detail, .al-doc { max-width: 140px; }
}