/* The activity log.
 *
 * Imtiaz, 2026-09-26: "for companies managing teams activity is the bigest
 * trust building feature like car dealer, insurance etc".
 *
 * He is right, and it is a different sale from the rest of the system. Stock
 * and inbox are sold on "you are losing enquiries". This one is sold on a
 * thing an owner will not say out loud: he does not know whether his staff are
 * actually doing the work. A log that records who touched what, when, answers
 * that without anyone having to accuse anybody.
 *
 * Modelled on the real Good Yield activity screen. Its heatmap, filter chips
 * and actor/action/entity rows are reproduced here in CSS with invented actors
 * and records. The source screenshot has real staff usernames in it and never
 * left this machine.
 */

.ac { padding: 14px 16px 18px; }

.ac-tabs {
  display: flex; gap: 16px; border-bottom: 1px solid var(--os-line);
  margin: -4px 0 14px; font-size: 11.5px; color: var(--os-mute);
}
.ac-tabs b { color: var(--os-ink); font-weight: 600; padding-bottom: 7px;
  box-shadow: inset 0 -2px 0 var(--os-ink); }
.ac-tabs span { padding-bottom: 7px; }

.ac-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ac-count { font-family: var(--os-serif); font-size: 26px; font-weight: 500;
  letter-spacing: -.01em; }
.ac-count small { font-family: inherit; font-size: 11px; color: var(--os-mute);
  font-weight: 400; margin-left: 5px; }

.ac-chips { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.ac-chips span, .ac-chips b {
  font-size: 9.5px; padding: 3px 9px; border-radius: 6px; font-weight: 500;
  color: var(--os-mute); border: 1px solid var(--os-line); white-space: nowrap;
}
.ac-chips b { background: var(--os-ink); color: #fff; border-color: var(--os-ink);
  font-weight: 600; }
.ac-chips .go { background: var(--os-warn); border-color: var(--os-warn); color: #fff;
  font-weight: 600; }

/* contribution heatmap. the point is the SHAPE: gaps are visible. */
.ac-map { margin: 12px 0 14px; }
.ac-months {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
  font-size: 8.5px; color: var(--os-mute); margin-bottom: 4px; padding-left: 13px;
}
.ac-weeks { display: flex; gap: 3px; align-items: flex-start; }
.ac-dow {
  display: grid; grid-template-rows: repeat(5, 9px); gap: 3px;
  font-size: 7px; color: var(--os-mute); margin-right: 3px; text-align: right; width: 10px;
}
.ac-cells { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 9px);
  gap: 3px; }
.ac-cells i { width: 9px; height: 9px; border-radius: 2px; background: #EDEAE2; display: block; }
.ac-cells i.l1 { background: #CFE3DC; }
.ac-cells i.l2 { background: #8FC4B6; }
.ac-cells i.l3 { background: #4E9484; }
.ac-cells i.l4 { background: #245E52; }
.ac-key { display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-size: 8px; color: var(--os-mute); margin-top: 5px; }
.ac-key i { width: 9px; height: 9px; border-radius: 2px; display: block; }

.ac-srch {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.ac-srch div {
  border: 1px solid var(--os-line); border-radius: 7px; padding: 5px 10px;
  font-size: 11px; color: var(--os-mute); min-width: 220px;
}
.ac-srch span { margin-left: auto; font-size: 9.5px; color: var(--os-mute);
  font-variant-numeric: tabular-nums; }

.ac-day {
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--os-mute); padding: 4px 0 8px;
  border-bottom: 1px solid var(--os-line); margin-bottom: 10px;
}

.ac-e { display: flex; gap: 10px; padding: 0 0 11px; position: relative; }
.ac-dot {
  flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--os-line); background: #fff;
}
.ac-e.new .ac-dot { border-color: var(--os-accent); background: var(--os-accent); }
.ac-b { min-width: 0; flex: 1; }
.ac-l1 {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; color: var(--os-mute);
}
.ac-l1 time { font-size: 10px; white-space: nowrap; }
.ac-who {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  color: var(--os-ink); font-weight: 600;
}
.ac-act {
  font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: #EDF1EE; color: #3C5A4F; white-space: nowrap;
}
.ac-act.add { background: #E3F1EF; color: #0B6B62; }
.ac-act.money { background: #F6EFDD; color: #8A6A2E; }
.ac-act.warn { background: #FBEFEC; color: #A2402C; }
/* Every .ac-act must carry the same metrics. The warn variant was setting only
   colours and inheriting body type, so "lead unanswered" rendered at full size
   and broke its row out of the timeline. */
.ac-act, .ac-act.add, .ac-act.money, .ac-act.warn {
  font-size: 9.5px; font-weight: 600; line-height: 1.5;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap; display: inline-block;
}
.ac-ent {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  color: var(--os-accent); border-bottom: 1px solid currentColor;
}
.ac-l2 {
  font-family: ui-monospace, Menlo, monospace; font-size: 9.5px;
  color: var(--os-mute); margin-top: 3px; padding-left: 11px;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-l2:before { content: '└'; position: absolute; left: 0; }

@media (max-width: 760px) {
  .ac-chips { margin-left: 0; }
  .ac-map { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ac-head { gap: 10px; }
  .ac-count { font-size: 21px; }
  /* The detail line is monospace and long. Let it wrap rather than truncate:
     "waiting: 26h · unclaimed · escalated to Somchai P." IS the story. */
  .ac-l2 { white-space: normal; overflow: visible; }
  .ac-l1 { gap: 5px; }
  .ac-srch div { min-width: 0; flex: 1; }
}