/* ============================================================
   Audit Log (desk/staff) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--outline from elements.css.

   DESK page: staff/admins read this under the default light .app-screen
   palette. This stylesheet only references --t-* semantic tokens, which
   app/theme.css rebinds per theme, so the page reskins without any
   role-specific color rules here. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .audit__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                  justify-content: space-between; gap: var(--mea-space-3); }
  .audit__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .audit__title, .audit__subtitle { margin: 0; }
  .audit__refresh { flex-shrink: 0; white-space: nowrap; }

  /* Admin summary: a responsive row of figures, stacking when cramped. */
  .audit-summary { display: grid; gap: var(--mea-space-3); margin: 0;
                   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .audit-stat { display: grid; gap: var(--mea-space-1); align-content: start;
                padding: var(--mea-space-4) var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .audit-stat__label, .audit-stat__value, .audit-stat__sub { margin: 0; }

  /* Controls: filter chips on one row, search box beside/below them. */
  .audit-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                margin: 0; padding: 0; }
  .filter-chip { display: inline-flex; align-items: center; min-height: var(--t-target-min, 44px);
                 padding: var(--mea-space-2) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; }
  .search-box { flex: 1; min-inline-size: 12rem; display: flex; align-items: center; gap: var(--mea-space-2);
                margin: 0; padding: var(--mea-space-2) var(--mea-space-3);
                border-radius: var(--mea-radius-md); }
  .search-box__input { flex: 1; min-height: var(--t-target-min, 44px);
                       border: 0; background: transparent; padding: 0; }

  /* Event log: a scrollable real table plus pagination beneath. */
  .audit-log { display: grid; gap: var(--mea-space-4); align-content: start;
               border-radius: var(--mea-radius-xl); overflow: hidden; }
  .audit-log__scroll { overflow-x: auto; }

  .audit-table { inline-size: 100%; border-collapse: collapse; }
  .audit-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                     white-space: nowrap; }
  .audit-table__th--sortable { cursor: pointer; user-select: none; }
  .audit-table__cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: top; }
  .audit-table__cell--time { white-space: nowrap; }
  .audit-table__cell--action, .audit-table__cell--resource { min-inline-size: 0; }
  .audit-table__resource-id { display: inline-block; }
}

@layer design {
  .audit__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                  font-weight: var(--mea-w-bold); color: var(--t-text); }
  .audit__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Admin summary. State classes (set by the controller) recolour the value. */
  .audit-stat { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                box-shadow: var(--mea-shadow-sm); }
  .audit-stat__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                       color: var(--t-text-muted); }
  .audit-stat__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                       line-height: var(--mea-lh-tight); color: var(--t-text); }
  .audit-stat__value--blue { color: var(--t-accent); }
  .audit-stat__value--green { color: var(--t-success-text); }
  .audit-stat__value--amber { color: var(--t-warning-text); }
  .audit-stat__value--loading { color: var(--t-text-muted); }
  .audit-stat__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Filter chips. .is-active is toggled by the controller. */
  .filter-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .filter-chip:hover { background: var(--t-bg-active); }
  .filter-chip.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  .search-box { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .search-box__icon { color: var(--t-text-muted); }
  .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .search-box__input::placeholder { color: var(--t-text-muted); }
  .search-box:focus-within { border-color: var(--t-border-focus); }

  /* Event log panel + table. */
  .audit-log { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-sm); }
  .audit-table__th { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                     text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                     color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); }
  .audit-table__th--sortable:hover { color: var(--t-text); }
  .audit-table__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                       border-block-end: 1px solid var(--t-border); }
  .audit-table__row:last-child .audit-table__cell { border-block-end: 0; }
  .audit-table__cell--time { color: var(--t-text-muted); }
  .audit-table__cell--actor { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .audit-table__event { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .audit-table__on { color: var(--t-text-muted); }
  .audit-table__resource { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .audit-table__resource-id { font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
                              color: var(--t-text-muted); }
}