/* Activity (js/views/history.js, #/history): the sentence, the tools (When, the search, Filter),
   then one panel per day. Shared tokens and components are in /styles.css (docs/ui-notes-v2.md);
   every class here starts with "activity-". Plain ASCII only. Phone first: the mark and what
   happened on top, the time and who did it in a small line under it. From 720 px an entry reads
   across like a table row: time, mark, what happened, who. A problem gets a coloured word, a
   warning mark and a 3px bar at its left edge; every other entry keeps the same inset, so the
   text lines up. */

/* -------------------------------------------------------------------- tools */
/* Phones: When across the width, then the search with Filter beside it. Wider: one row. */
.activity-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 12px; }
.activity-when { flex: 1 1 100%; min-width: 0; }
.activity-when .seg { display: flex; width: 100%; }
.activity-when .seg button { flex: 1 1 auto; min-width: 0; padding: 0 6px; line-height: 1.15; }
.activity-find { flex: 1 1 240px; min-width: 0; }
.activity-find > label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.activity-find-row { display: flex; gap: 8px; }
.activity-find-row > input { flex: 1 1 auto; min-width: 0; }
.activity-filter-btn { flex: none; }
.activity-filter-btn .count { margin-left: 2px; background: var(--accent-fill); color: var(--on-accent); }
@media (min-width: 720px) {
  .activity-when { flex: none; }
  .activity-when .seg { display: inline-flex; width: auto; }
  .activity-when .seg button { flex: none; padding: 0 14px; }
  .activity-find { flex: 1 1 320px; max-width: 34em; }
}

/* Show and Vendor or trunk group, behind Filter. */
.activity-filters { display: grid; gap: 0 16px; margin: 0 0 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.activity-filters .field { margin: 0 0 12px; }
.activity-filters .field:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .activity-filters { grid-template-columns: repeat(2, minmax(0, 18em)); }
  .activity-filters .field { margin-bottom: 0; }
}

/* "Showing only problems for CONEX VONAGE. Clear filters" */
.activity-active { margin: 0 0 8px; color: var(--slate); font-size: 14px; }
.activity-active .btn-link { margin-left: 4px; font-size: 14px; }

/* Hour headings inside a day, once the day spans more than one hour. */
.activity-hour { margin: 16px 0 4px; color: var(--slate); font-size: 13px; font-weight: 700; }
.activity-hour:first-child { margin-top: 0; }

/* "Showing 12 of the newest 50 entries." */
.activity-count { margin: 0 0 16px; color: var(--slate); font-size: 14px; }

/* The sentence's "Show only the problems". */
.activity-only { margin-left: 4px; }

/* -------------------------------------------------------------------- days */
.activity-day .panel-head { margin-bottom: 12px; }
.activity-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- one entry */
.activity-row {
  display: grid;
  grid-template-columns: 18px max-content minmax(0, 1fr);
  grid-template-areas:
    "mark what what"
    ". time who";
  gap: 4px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.activity-row:last-child { padding-bottom: 0; border-bottom: 0; }

.activity-mark { grid-area: mark; display: inline-flex; padding-top: 2px; color: var(--slate); }
.activity-row.bad .activity-mark { color: var(--bad); }
.activity-row.warn .activity-mark { color: var(--warn-text); }
.activity-row.ok .activity-mark { color: var(--ok); }

.activity-what { grid-area: what; min-width: 0; }
.activity-head { margin: 0; line-height: 1.4; }
.activity-kind { font-weight: 700; }
.activity-row.bad .activity-kind { color: var(--bad); }
.activity-row.warn .activity-kind { color: var(--warn-text); }
.activity-row.ok .activity-kind { color: var(--ok); }
.activity-name { overflow-wrap: anywhere; }
.activity-detail { max-width: 48em; margin: 2px 0 0; font-size: 14px; }

.activity-time { grid-area: time; color: var(--slate); font-size: 13px; }
.activity-who { grid-area: who; margin: 0; color: var(--slate); font-size: 13px; }

@media (min-width: 720px) {
  .activity-row {
    grid-template-columns: 5.25em 18px minmax(0, 1fr) 10.5em;
    grid-template-areas: "time mark what who";
    gap: 0 12px;
  }
  .activity-time { padding-top: 1px; color: var(--ink); font-size: 14px; }
  .activity-who { padding-top: 1px; font-size: 14px; text-align: right; }
}

/* ------------------------------------------------------------------ paging */
.activity-more { margin-top: 24px; }
.activity-end { margin: 16px 0 0; color: var(--slate); font-size: 14px; }
@media (max-width: 719px) {
  .activity-more .btn { width: 100%; }
}