/* ==========================================================================
   Activity — audit trail + email delivery log
   Added 2026-08-13 when both moved off the Analytics page.

   Every colour resolves through the --act-* block below, which is declared
   exactly TWICE — once light, once dark — and nowhere else. Adding a colour
   means adding it to both blocks. This is the same discipline financials.css
   adopted, and it exists because analytics.css declared its palette once, in
   light only, and every card on that page stayed white in dark mode.

   The page chrome (header, tabs, filter rail, drawer, table) is all canonical
   `ipi-*` / `tnt-*` primitives, which are already theme-aware. This file only
   owns what is specific to a log: the type pill, the two-line activity cell,
   the empty state and the mobile card form.
   ========================================================================== */

.activity-page {
  --act-surface: var(--ipi-bg-card, #ffffff);
  --act-surface-sunk: var(--ipi-bg-inset, #edeae3);
  --act-surface-hover: var(--ipi-bg-hover, #f2efe9);
  --act-rule: var(--ipi-rule, rgba(26, 24, 21, 0.1));
  --act-rule-strong: var(--ipi-rule-h, rgba(26, 24, 21, 0.18));
  --act-ink: var(--ipi-ink, #1a1815);
  --act-ink-2: var(--ipi-ink-2, #3d3a34);
  --act-ink-3: var(--ipi-ink-3, #6b6458);
  --act-ink-4: var(--ipi-ink-4, #9a9188);
  --act-danger: var(--ipi-red, #b03030);
  --act-danger-bg: var(--ipi-red-bg, rgba(176, 48, 48, 0.08));
  --act-danger-border: var(--ipi-red-border, rgba(176, 48, 48, 0.2));
  --act-shadow: var(--ipi-shadow-card, 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05));
  --act-radius: 12px;
  --act-radius-sm: 9px;
}

html[data-theme="dark"] .activity-page {
  --act-surface: var(--card);
  --act-surface-sunk: rgba(15, 23, 42, 0.55);
  --act-surface-hover: rgba(30, 41, 59, 0.6);
  --act-rule: rgba(148, 163, 184, 0.16);
  --act-rule-strong: rgba(148, 163, 184, 0.28);
  --act-ink: var(--text);
  --act-ink-2: var(--text);
  --act-ink-3: var(--text-muted);
  --act-ink-4: var(--text-muted);
  --act-danger: #f87171;
  --act-danger-bg: rgba(248, 113, 113, 0.12);
  --act-danger-border: rgba(248, 113, 113, 0.3);
  --act-shadow: none;
}

.activity-page .inspections-proto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-page-header .ipi-ph-sub {
  max-width: 62ch;
}

.activity-list-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Toolbar: tabs + count ------------------------------------------------
   Tabs are anchors, not buttons — each tab is its own request, so only the
   visible log is queried. */

.act-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.act-toolbar__count {
  font-size: 12.5px;
  color: var(--act-ink-4);
  font-variant-numeric: tabular-nums;
}

.activity-page .ipi-tab {
  text-decoration: none;
}

.act-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--act-ink);
  color: var(--act-surface);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .act-filter-count {
  background: var(--act-ink-3);
  color: var(--card);
}

.activity-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Table ---------------------------------------------------------------- */

.act-table {
  width: 100%;
  min-width: 0;
}

.act-table td,
.act-table th {
  vertical-align: middle;
}

.act-table__when {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--act-ink-3);
}

.act-table__actions {
  text-align: right;
  white-space: nowrap;
}

.act-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.act-cell__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.act-cell__title {
  font-weight: 600;
  color: var(--act-ink);
  overflow-wrap: anywhere;
}

.act-cell__note {
  font-size: 12.5px;
  color: var(--act-ink-3);
  overflow-wrap: anywhere;
}

.act-muted {
  color: var(--act-ink-4);
}

/* --- Type pill + status chip ---------------------------------------------- */

.act-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--act-rule);
  background: var(--act-surface-sunk);
  color: var(--act-ink-3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.act-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.act-chip--danger {
  background: var(--act-danger-bg);
  border-color: var(--act-danger-border);
  color: var(--act-danger);
}

/* --- Empty state ----------------------------------------------------------
   Says what will fill it and offers the way out, rather than a grey sentence. */

.act-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border-radius: var(--act-radius);
  border: 1px dashed var(--act-rule-strong);
  background: var(--act-surface-sunk);
  text-align: center;
}

.act-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--act-ink);
}

.act-empty__copy {
  margin: 0;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--act-ink-3);
}

.act-empty p {
  margin: 0;
}

/* --- Pagination ----------------------------------------------------------- */

.act-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.act-pagination__summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--act-ink-4);
  font-variant-numeric: tabular-nums;
}

.act-pagination__actions {
  display: flex;
  gap: 8px;
}

.activity-page .btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Mobile (900px — the tenant standard)
   ========================================================================== */

@media (max-width: 900px) {
  /* Clip inside the list area, never on .page-section / .inspections-page —
     those carry the full-bleed header. */
  .activity-page,
  .activity-page .ipi-list-area,
  .activity-page .ipi-filter-shell {
    min-width: 0;
    max-width: 100%;
  }

  .activity-page .ipi-list-area {
    overflow-x: hidden;
  }

  .act-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .activity-page .ipi-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    width: 100%;
  }

  .activity-page .ipi-tabs::-webkit-scrollbar {
    display: none;
  }

  .activity-page .ipi-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* Filter rail card — the shell hides the rail globally at this width. */
  .activity-page .ipi-filter-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
    background: var(--act-surface);
    border-radius: var(--act-radius);
    box-shadow: var(--act-shadow);
  }

  .activity-page .ipi-filter-rail__actions {
    display: flex;
    gap: 8px;
  }

  .activity-page .ipi-filter-rail__actions .ipi-filter-railbtn {
    flex: 1 1 auto;
    min-height: 40px;
    justify-content: center;
  }

  .activity-page .activity-filter-bar {
    grid-template-columns: 1fr;
  }

  .activity-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }

  .activity-filter-actions .ipi-filter-railbtn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }

  /* --- Table card-ification ----------------------------------------------
     The grid-card form used by Invoices, Quotes and Financials: identity as
     the title, secondary fields labelled beneath, action pinned right. NOT the
     older 110px-left-gutter variant the Analytics email table used. */
  .activity-page .act-table,
  .activity-page .act-table thead,
  .activity-page .act-table tbody,
  .activity-page .act-table tr,
  .activity-page .act-table td {
    display: block;
    width: 100%;
  }

  .activity-page .act-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .activity-page .act-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .activity-page .act-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 12px 14px;
    border: 1px solid var(--act-rule);
    border-radius: var(--act-radius-sm);
    background: var(--act-surface);
  }

  .activity-page .act-table td {
    padding: 0;
    border: none;
    font-size: 12.5px;
    color: var(--act-ink-3);
  }

  .activity-page .act-table td:first-child {
    grid-column: 1 / -1;
    font-size: 13.5px;
    color: var(--act-ink);
  }

  .activity-page .act-table td:not(:first-child):not(.act-table__actions) {
    grid-column: 1 / -1;
  }

  .activity-page .act-table td:not(:first-child):not(.act-table__actions)::before {
    content: attr(data-label) ": ";
    color: var(--act-ink-4);
  }

  /* Action button pinned to the top-right of the card. */
  .activity-page .act-table td.act-table__actions {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .activity-page .act-table td.act-table__actions::before {
    content: none;
  }

  .activity-page .ipi-table-wrap {
    overflow-x: visible;
  }

  .activity-page .ipi-table.act-table {
    min-width: 0;
  }

  .act-pagination__actions {
    width: 100%;
  }

  .act-pagination__actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* --- Dark: the shared ipi-* chrome ---------------------------------------
   ⚠ inspections_shell.css defines the whole --ipi-* scale in LIGHT ONLY and
   carries no dark rules for any of it, so every page built on the shell owns
   the dark treatment of its own header and form controls. fire-doors.css is the
   precedent. Without this the page header renders WHITE and the selects render
   cream inside an otherwise dark page.

   ✅ FIXED GLOBALLY in 3.7.0: `.content` in style.css now carries a
   html[data-theme="dark"] background, so the page canvas is no longer cream in
   dark mode. It was fixed on `.content` rather than by giving --canvas a dark
   value, because ~90 consumers across 36 stylesheets read that token as a LIGHT
   surface. The dark treatment of this page's own header and controls below is
   still this file's job — inspections_shell.css remains light-only.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .activity-page .ipi-page-header {
  background: rgba(15, 23, 42, 0.72);
  border-bottom-color: var(--act-rule);
  box-shadow: none;
}

html[data-theme="dark"] .activity-page .ipi-ph-title {
  color: var(--act-ink);
}

html[data-theme="dark"] .activity-page .ipi-ph-sub {
  color: var(--act-ink-3);
}

html[data-theme="dark"] .activity-page .ipi-ph-eyebrow {
  color: var(--act-accent);
}

html[data-theme="dark"] .activity-page :is(.ipi-filter-select, .ipi-filter-date, .ipi-filter-search) {
  background: var(--act-surface);
  border-color: var(--act-rule-strong);
  color: var(--act-ink-2);
}

html[data-theme="dark"] .activity-page .ipi-filter-search input {
  background: transparent;
  color: var(--act-ink-2);
}

html[data-theme="dark"] .activity-page .ipi-filter-railbtn {
  background: var(--act-surface);
  border-color: var(--act-rule-strong);
  color: var(--act-ink-2);
}

html[data-theme="dark"] .activity-page :is(.ipi-filter-rail__eyebrow, .ipi-filter-rail__meta) {
  color: var(--act-ink-4);
}

html[data-theme="dark"] .activity-page .btn.btn-secondary {
  background: var(--act-surface);
  border-color: var(--act-rule-strong);
  color: var(--act-ink);
}

html[data-theme="dark"] .activity-page .btn.btn-primary {
  background: rgba(248, 250, 252, 0.95);
  border-color: transparent;
  color: #0b1220;
}

/* `.inspections-proto` is full-bleed (negative inline margin), so it paints OVER
   `.content` and needs its own dark background — anything sitting on it rather
   than on a card (the band titles) was otherwise near-white on cream.
   ✅ As of 3.7.0 `.content` carries a dark background too, so this is no longer
   the only thing standing between this page and a cream canvas. Keep it anyway:
   it resolves to the same `--background`, so the two agree, and removing it
   would put the full-bleed strip back to the light value. */
html[data-theme="dark"] .activity-page .inspections-proto {
  background: var(--background);
}