/* Per-deliverable activity timeline.
 * Visual style mirrors the client-list "Timeline" pane (cl-timeline-*) so the
 * two panels feel like one component family. Class prefix is `da-` to avoid
 * colliding with the page-scoped client-list rules.
 */

.da-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.da-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.da-row {
  display: grid;
  grid-template-columns: 28px 80px 110px 1fr 70px;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  align-items: center;
  transition: background 0.15s ease;
}

.da-row:hover { background: var(--hover-bg, rgba(127, 127, 127, 0.08)); }

.da-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hover-bg, rgba(127, 127, 127, 0.08));
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.da-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.da-icon-created  { background: rgba(39, 174, 96, 0.12);  color: #1f7a45; }
.da-icon-updated  { background: rgba(52, 152, 219, 0.12); color: #1c6ea4; }
.da-icon-deleted  { background: rgba(231, 76, 60, 0.12);  color: #b53a2b; }
.da-icon-changed  { background: rgba(245, 166, 35, 0.12); color: #a06b14; }

.da-time {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.da-actor {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-summary {
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.45;
}

.da-summary-verb {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.da-cat-tag {
  font-size: 10px;
  background: var(--hover-bg, rgba(127, 127, 127, 0.08));
  color: var(--text-muted);
  border-radius: 999px;
  padding: 3px 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  text-align: center;
}

.da-empty,
.da-loading,
.da-error {
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.da-error { color: var(--danger-fg, #b53a2b); font-style: normal; }

@media (max-width: 720px) {
  .da-row {
    grid-template-columns: 24px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      'icon summary tag'
      'icon meta meta';
    row-gap: 2px;
  }
  .da-icon { grid-area: icon; }
  .da-summary { grid-area: summary; }
  .da-cat-tag { grid-area: tag; }
  .da-time, .da-actor {
    grid-area: meta;
    display: inline;
    margin-right: 8px;
  }
}

/* Dark-theme overrides — the icon foreground hexes are tuned for light
 * backgrounds and read too dim against the dark-theme card surface. Brighten
 * each so the verb-coloured icons stay readable. The repo uses three dark
 * selectors interchangeably (body.dark, [data-theme="dark"], .theme-dark) — we
 * cover all three to match the rest of the codebase. */
body.dark .da-icon-created,
[data-theme="dark"] .da-icon-created,
.theme-dark .da-icon-created  { color: #4ade80; background: rgba(74, 222, 128, 0.18); }
body.dark .da-icon-updated,
[data-theme="dark"] .da-icon-updated,
.theme-dark .da-icon-updated  { color: #60a5fa; background: rgba(96, 165, 250, 0.18); }
body.dark .da-icon-deleted,
[data-theme="dark"] .da-icon-deleted,
.theme-dark .da-icon-deleted  { color: #f87171; background: rgba(248, 113, 113, 0.18); }
body.dark .da-icon-changed,
[data-theme="dark"] .da-icon-changed,
.theme-dark .da-icon-changed  { color: #fbbf24; background: rgba(251, 191, 36, 0.18); }
body.dark .da-error,
[data-theme="dark"] .da-error,
.theme-dark .da-error { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .da-row { transition: none !important; }
}