/* ── Автономні дії — смуга в Огляді (frontend/js/activity.js) ──────────────
   Було окремим розділом «Активність» із фільтрами й групуванням по днях;
   лишились самі рядки. Словник той самий, що й у решті застосунку:
   .badge, .empty-state, .skel-row. Кольори — лише зі змінних теми
   (style.css :root / :root[data-theme="light"]), тож обидві теми
   читаються без окремих правил. */

.ov-auto{ display: flex; flex-direction: column; gap: 7px; }

.act-item{
  display: flex; align-items: flex-start; gap: var(--sp-10);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-fast) var(--ease);
}
.act-item:hover{ border-color: var(--border-hover); }

/* Зелена риска зліва — той самий --ok, що й у badge-mode.auto в календарі.
   У смузі всі рядки автономні за визначенням, але риска лишається: вона
   відрізняє їх від сусідніх блоків Огляду, які виглядають так само. */
.act-item-auto{ border-left-color: var(--ok); }
.act-item-error{ border-left-color: var(--danger); }

.act-ic{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-dim);
}
.act-item-auto .act-ic{ color: var(--ok); }
.act-item-error .act-ic{ color: var(--danger); }
.act-ic .svg-ic{ width: 15px; height: 15px; }

.act-body{ flex: 1; min-width: 0; }
.act-title{ font: 600 var(--fs-13)/1.4 var(--sans); color: var(--text); word-break: break-word; }
.act-detail{ display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: 3px; }
.act-detail-text{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); word-break: break-word; }
.act-item-error .act-detail-text{ color: var(--danger); }

.act-meta{
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  margin-left: auto; padding-left: 8px;
}
.act-meta .badge-mode{ white-space: nowrap; }
.act-time{ font: 500 var(--fs-11)/1 var(--mono); color: var(--text-mute); white-space: nowrap; }

@media (max-width: 640px){
  .act-item{ flex-wrap: wrap; }
  .act-meta{ flex-direction: row; align-items: center; margin-left: 40px; padding-left: 0; }
}