/* ==========================================================================
   ACTIVITY — the office's own log of who did what
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .act-. Three of them (.act-event, .act-code, .act-code-label)
   are also used by the platform's own audit screen, which shows the same event
   label with the code beneath it.

   Contents
     1  Filters
     2  The list: cells, references, the details of a change
     3  Under 48rem: every row a card
     4  The platform's audit screen: label and code
   ========================================================================== */


/* ==========================================================================
   1 · FILTERS
   ========================================================================== */

.act-filters {
  align-items: end;
}

/* The box for a number or a name gets two places of the row at width: "Application or receipt number, citizen" does not fit in one. */
@media (min-width: 48rem) {
  .act-filters > .field:has(input[type='search']) { grid-column: span 2; }
}

.act-range {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.act-problem {
  margin-block-start: var(--space-3);
}


/* ==========================================================================
   2 · THE LIST
   ========================================================================== */

/* A second, smaller line under a cell: the time of day, the role, the device. */
.act-sub {
  display: block;
  margin-block-start: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Dates, times and addresses are read whole: they never break across lines. */
.act-nowrap { white-space: nowrap; }

.act-strong { font-weight: var(--font-weight-semibold); }

.act-label { font-weight: var(--font-weight-medium); }

/* The platform's staff, said without a name: a shield in front, in the line's own colour. */
.act-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* What an entry is about: "Application  MC-2026-000123", one line each, the kind small and muted. */
.act-refs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.act-kind {
  margin-inline-end: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.act-cell-from { min-inline-size: 7rem; }

/* What changed: closed until asked for, then a small table of field, before and after. */
.act-details { margin-block-start: var(--space-1); }

.act-details > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  cursor: pointer;
}

.act-changes {
  inline-size: 100%;
  margin-block-start: var(--space-2);
  font-size: var(--font-size-sm);
  border-collapse: collapse;
}

.act-changes th,
.act-changes td {
  padding: var(--space-1) var(--space-2);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-block-end: 1px solid var(--color-border-subtle);
}

.act-changes thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.act-changes tbody th {
  font-weight: var(--font-weight-medium);
  min-inline-size: 6rem;
}

.act-more {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.act-pager { display: flex; justify-content: center; }

.act-foot {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   3 · UNDER 48REM: EVERY ROW A CARD
   A table cannot be read at 375px. The header row — which the labels replace — is kept for
   assistive technology but not painted; each cell carries its own label; the time and the
   person head the card, what happened and what it happened to take the full width.
   ========================================================================== */

@media (max-width: 47.99rem) {
  .act-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .act-table,
  .act-table tbody { display: block; }

  .act-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .act-table tbody tr:last-child { border-block-end: 0; }

  .act-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    text-align: start;
  }

  .act-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  /* A cell with nothing to say ("to what" of a sign-in, an act with no address) takes no room in a card. */
  .act-table td.act-empty { display: none; }

  /* The moment and the person share the first line; the rest are full width. */
  .act-table td.act-cell-head::before { content: none; }
  .act-table .act-cell-what,
  .act-table .act-cell-subject,
  .act-table .act-cell-from { grid-column: 1 / -1; }

  .act-table .act-cell-what .act-label { font-size: var(--font-size-md); }
  .act-table .act-cell-what::before { content: none; }

  .act-table .act-sub { margin-block-start: 0; }

  /* The table of a change fills the card. */
  .act-table .act-details,
  .act-table .act-changes { inline-size: 100%; }
}


/* ==========================================================================
   4 · THE PLATFORM'S AUDIT SCREEN
   There the event is a sentence first and its code second, small and monospaced, and the code
   selects whole with one click so it can be copied into a message to support.
   ========================================================================== */

/* The sentence and its code are one block, so a card's flex row never sets them side by side. */
.act-event {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.act-code-label {
  display: block;
  font-weight: var(--font-weight-medium);
}

.act-code {
  display: block;
  margin-block-start: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  user-select: all;
  overflow-wrap: anywhere;
}