/* =========================================================
   Components — Activity timeline
   A dotted spine with one entry per action. Lived in hr/employee_form.css,
   which the HR dashboard does not load, so the same markup there rendered as a
   flat run of text. Loaded globally now, from layouts/base.html.
   ========================================================= */
.tg-activity-timeline{
  position:relative;
  margin-top:8px;
}

.tg-activity-item{
  display:flex;
  gap:14px;
  position:relative;
  padding-bottom:18px;
}

.tg-activity-item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:8px;
  top:22px;
  width:2px;
  bottom:0;
  background:#e5e7eb;
}

.tg-activity-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  background: var(--brand);
  flex-shrink:0;
  margin-top:2px;
}

.tg-activity-body{
  flex:1;
  min-width:0;
}

.tg-activity-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.tg-activity-action{
  font-weight:600;
}

.tg-activity-time{
  font-size:12px;
}

.tg-activity-meta{
  font-size:13px;
  margin-top:2px;
}

.tg-activity-note{
  margin-top:6px;
  line-height:1.5;
}