/* ================= ACTIVITY & AUDIT TRAIL — the table, the filter bar, the pager =============
   One of four sheets team_board.html loads for Team Insights; this one owns everything prefixed
   `ti-aud-` (css-class-collision-check.py enforces the boundary) — launch/shell/engagement live
   in the other three. Same filter-row-above-table-above-pager shape as alt-user-traffic.css's
   admin log view, without that console's own chrome. Tokens only, no colour literal and no
   z-index; selection/state is never colour alone (design-system §20). */

/* ---------- the panel, when tiPanel() (Agent 3's shell) is not reachable ----------
   Defensive fallback only — a load-order slip degrades to a plain legible block instead of
   unstyled text on the dialog body. */
.alt-app .ti-aud-fallback-panel{
  display:flex; flex-direction:column; gap:var(--a-4);
  padding:var(--a-4); border:1px solid var(--a-line); border-radius:var(--a-r-lg);
  background:var(--a-panel);
}
.alt-app .ti-aud-fallback-msg{ margin:0; color:var(--a-dim); font-size:13px; }
.alt-app .ti-aud-fallback-retry{
  align-self:flex-start; height:var(--a-ctl); padding:0 var(--a-4);
  border:1px solid var(--a-line); border-radius:var(--a-r); background:var(--a-raised);
  color:var(--a-text); font-size:13px; font-weight:600; cursor:pointer;
}
.alt-app .ti-aud-fallback-retry:hover{ background:var(--a-float); }

/* ---------- the state block's own container ----------
   `.ti-aud-state` wraps tiStateEmpty()/tiStateError() — needs a geometry-free wrapper
   (`display:contents`) because passing those functions `body` directly erased the filter bar
   and horizon note on every empty/error render; a dedicated child container fixes it. */
.alt-app .ti-aud-state{ display:contents; }

/* ---------- the horizon note ----------
   Recording began recently — a reader who opens a long range and sees a handful of rows must be
   told the record doesn't reach back that far. Styled as a note, not an error: it explains an
   answer, it does not report a failure. */
.alt-app .ti-aud-horizon{
  margin:0; padding:var(--a-3) var(--a-4); border-radius:var(--a-r);
  background:var(--a-blue-soft); color:var(--a-blue-text); font-size:12px; line-height:1.5;
}

/* ---------- the filter bar ----------
   Wraps rather than scrolls — three controls (Action, Item, Clear) read correctly as a
   flex-wrap row from full width down to a phone with no dedicated breakpoint; the one
   breakpoint below only widens touch targets on the narrowest screens. */
.alt-app .ti-aud-filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--a-3);
}
.alt-app .ti-aud-f{
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.alt-app .ti-aud-f-lbl{
  font-size:11px; font-weight:600; color:var(--a-dim);
  text-transform:uppercase; letter-spacing:.02em;
}
.alt-app .ti-aud-f-sel{
  height:var(--a-ctl); min-width:160px; max-width:100%; padding:0 var(--a-3);
  border:1px solid var(--a-line); border-radius:var(--a-r); background:var(--a-raised);
  color:var(--a-text); font-size:13px; font-family:var(--a-body);
}
.alt-app .ti-aud-f-sel:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:1px;
}
.alt-app .ti-aud-clear{
  height:var(--a-ctl); padding:0 var(--a-4); align-self:flex-end;
  border:1px solid var(--a-line); border-radius:var(--a-r); background:transparent;
  color:var(--a-blue-text); font-size:13px; font-weight:600; cursor:pointer;
  transition:background var(--a-quick) var(--a-ease);
}
.alt-app .ti-aud-clear:hover{ background:var(--a-blue-soft); }
.alt-app .ti-aud-clear:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }

@media (max-width:639px){
  .alt-app .ti-aud-f{ flex:1 1 100%; }
  .alt-app .ti-aud-f-sel{ min-width:0; width:100%; }
  .alt-app .ti-aud-clear{ align-self:stretch; }
}

/* ---------- the table ---------- */
.alt-app .ti-aud-tscroll{
  overflow-x:auto; overscroll-behavior-x:contain; min-width:0;
  border:1px solid var(--a-line); border-radius:var(--a-r-lg);
}
.alt-app .ti-aud-table{
  border-collapse:collapse; width:100%; min-width:560px; font-size:12px;
}
.alt-app .ti-aud-table th{
  position:sticky; top:0; background:var(--a-raised); color:var(--a-dim);
  text-align:left; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.02em; padding:var(--a-2) var(--a-3); border-bottom:1px solid var(--a-line);
  white-space:nowrap;
}
.alt-app .ti-aud-table td{
  padding:var(--a-2) var(--a-3); border-bottom:1px solid var(--a-line-soft);
  color:var(--a-text); vertical-align:top;
}
.alt-app .ti-aud-table tr:last-child td{ border-bottom:none; }
.alt-app .ti-aud-when{
  white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--a-dim);
}
.alt-app .ti-aud-details{ color:var(--a-dim); }

/* An absent actor is styled as an absence, not a smaller name — italic plus muted survives a
   reader who cannot separate the two colours (design-system §20), and is never the only signal. */
.alt-app .ti-aud-noactor{ color:var(--a-faint); font-style:italic; }

/* ---------- empty / clear-filters-from-inside-the-empty-state ---------- */
.alt-app .ti-aud-empty-clear{
  margin-top:var(--a-2); height:var(--a-ctl); padding:0 var(--a-4);
  border:1px solid var(--a-line); border-radius:var(--a-r); background:var(--a-raised);
  color:var(--a-blue-text); font-size:13px; font-weight:600; cursor:pointer;
}
.alt-app .ti-aud-empty-clear:hover{ background:var(--a-blue-soft); }

/* ---------- pagination ----------
   The range label ("Showing 1–50 of 214") is the reader's orientation, not decoration — it sits
   between the two buttons rather than beside just one of them. */
.alt-app .ti-aud-pager{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-3);
  flex-wrap:wrap;
}
.alt-app .ti-aud-range{
  font-size:12px; color:var(--a-dim); font-variant-numeric:tabular-nums;
}
.alt-app .ti-aud-prev, .alt-app .ti-aud-next{
  height:var(--a-ctl); padding:0 var(--a-4);
  border:1px solid var(--a-line); border-radius:var(--a-r); background:var(--a-raised);
  color:var(--a-text); font-size:13px; font-weight:600; cursor:pointer;
  transition:background var(--a-quick) var(--a-ease), opacity var(--a-quick) var(--a-ease);
}
.alt-app .ti-aud-prev:hover:not(:disabled), .alt-app .ti-aud-next:hover:not(:disabled){
  background:var(--a-float);
}
.alt-app .ti-aud-prev:focus-visible, .alt-app .ti-aud-next:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:1px;
}
/* Disabled is never colour alone either: reduced opacity plus the removed pointer, not a shade
   of the same border. */
.alt-app .ti-aud-prev:disabled, .alt-app .ti-aud-next:disabled{
  opacity:.45; cursor:not-allowed;
}

@media (max-width:639px){
  .alt-app .ti-aud-pager{ justify-content:space-between; }
  .alt-app .ti-aud-range{ order:3; flex:1 1 100%; text-align:center; }
}