/* Ekran 11 — Etkinlik / canlı izleme */
.activity { display: grid; grid-template-columns: minmax(0, 1fr) var(--drawer-w); gap: var(--sp-6); align-items: start; }
.activity > * { min-width: 0; }
.feed-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.feed { display: flex; flex-direction: column; gap: var(--sp-3); }
.feed__group { font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-3); padding: var(--sp-2) 0 0; }

/* Çalışma satırı */
.run { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); cursor: pointer; text-align: left; width: 100%; color: inherit; transition: background var(--dur) var(--ease); }
.run:hover { background: var(--surface-hover); }
.run.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.run.is-live { border-color: var(--primary); }
.run__status { display: grid; place-items: center; width: var(--size-36); height: var(--size-36); border-radius: 50%; flex: none; }
.run__status--ok { background: var(--success-bg); color: var(--success); }
.run__status--live { background: var(--primary-soft); color: var(--primary); }
.run__status--live .icon { animation: spin 1s linear infinite; }
.run__status--skip { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.run__status--err { background: var(--danger-bg); color: var(--danger); }
.run__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.run__name { font-size: var(--text-body); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-3); flex-wrap: wrap; min-width: 0; }
.run__meta .dot { width: var(--size-3); height: var(--size-3); border-radius: 50%; background: var(--border-strong); flex: none; }
.run__time { font-size: var(--text-sm); color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.run__progress { display: flex; gap: var(--sp-0-75); margin-top: var(--sp-1); }
.run__progress span { flex: 1; height: var(--size-3); border-radius: var(--r-2xs); background: var(--track); }
.run__progress span.is-done { background: var(--success); }
.run__progress span.is-now { background: var(--primary); }
.run__progress span.is-err { background: var(--danger); }

/* Çalışma detayı — dikey zaman çizgisi */
.run-detail { position: sticky; top: var(--sp-6); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.run-detail__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.run-detail__back { display: none; }
.run-detail__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.run-detail__name { font-size: var(--text-h3); font-weight: var(--w-semibold); line-height: var(--leading-tight); }
.run-detail__meta { font-size: var(--text-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.run-detail__trigger { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-sm); color: var(--text-2); }
.run-detail__trigger .icon { color: var(--text-3); }
.run-detail__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.run-detail__empty { padding: var(--sp-4); }

.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: var(--size-28) minmax(0, 1fr); gap: 0 var(--sp-3); }
.tl__rail { display: flex; flex-direction: column; align-items: center; }
.tl__dot { display: grid; place-items: center; width: var(--size-28); height: var(--size-28); border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); flex: none; }
.tl__dot .icon { width: var(--size-14); height: var(--size-14); }
.tl__line { flex: 1; width: var(--size-2); background: var(--border); min-height: var(--size-16); }
.tl:last-child .tl__line { display: none; }
.tl__content { display: flex; flex-direction: column; gap: var(--sp-1-5); padding-bottom: var(--sp-4); min-width: 0; }
.tl__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.tl__label { display: inline-flex; align-items: baseline; gap: var(--sp-1-5); min-width: 0; font-size: var(--text-body); font-weight: var(--w-medium); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.tl__kind { flex: none; color: var(--text-3); align-self: center; }
.tl__time { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.tl__detail { font-size: var(--text-sm); color: var(--text-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); line-height: var(--leading); overflow-wrap: anywhere; }
.tl__state { font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-3); }
.tl--done .tl__dot { background: var(--success); border-color: var(--success); color: var(--on-accent); }
.tl--done .tl__line { background: var(--success); }
.tl--now .tl__dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 var(--size-4) var(--primary-soft); }
.tl--now .tl__dot .icon { animation: spin 1s linear infinite; }
.tl--now .tl__label, .tl--now .tl__state { color: var(--primary-soft-text); }
.tl--wait .tl__label, .tl--wait .tl__state { color: var(--text-3); font-weight: var(--w-regular); }
.tl--skip .tl__dot { border-style: dashed; }
.tl--skip .tl__label { color: var(--text-3); text-decoration: line-through; }
.tl--err .tl__dot { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.tl--err .tl__detail { background: var(--danger-bg); color: var(--danger-text); }

/* Filtreler ve canlı rozeti */
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filters__sep { width: 1px; height: var(--size-20); background: var(--border); margin: 0 var(--sp-1); }
.live-banner { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--primary-soft-text); font-weight: var(--w-medium); }
.live-banner:not(.is-open) { color: var(--text-3); }
.live-banner:not(.is-open) .live-dot { animation: none; background: var(--offline); }

/* Tablet ve mobil: liste → tam ekran detay */
@media (max-width: 1023px) {
  .activity { grid-template-columns: minmax(0, 1fr); }
  .run-detail { position: static; }
  .activity:not(.is-detail) .run-detail { display: none; }
  .activity.is-detail .feed-col { display: none; }
  .run-detail__back { display: grid; }
}
@media (max-width: 767px) {
  .run__time { display: none; }
  .filters__sep { display: none; }
  .activity.is-detail .run-detail { border: 0; border-radius: 0; margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0; background: var(--bg); }
  .activity.is-detail .run-detail__head { background: var(--surface); }
}