/* pages-overview.css — Command Center (§4 prompt). */

/* ---- Fleet banner ---- */
.cc-banner {
  display: flex; align-items: flex-start; gap: var(--s-3);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border); margin-bottom: var(--s-6);
}
.cc-banner.ok { background: var(--ok-soft); border-color: var(--border-strong); }
.cc-banner.warn { background: var(--warn-soft); border-color: var(--border-strong); }
.cc-banner.err { background: var(--err-soft); border-color: var(--border-strong); }
.cc-banner.idle { background: var(--surface); }
.cc-banner-ic { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.cc-banner-title { font-size: 16px; font-weight: 700; }
.cc-banner-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.cc-banner-actions { margin-left: auto; flex-shrink: 0; }

.cc-live {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12px; font-family: var(--font-mono); color: var(--text-muted);
}
.cc-live .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-dot 2s infinite; }

/* ---- Service cards ---- */
.svc-card { cursor: pointer; display: flex; flex-direction: column; gap: var(--s-2); }
.svc-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.svc-card.stale-data .svc-primary,
.svc-card.stale-data .svc-secondary { opacity: 0.55; }
.svc-head { display: flex; align-items: center; gap: var(--s-2); }
.svc-mono {
  width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface-3); color: var(--text-muted);
}
.svc-name { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-primary { font-size: 20px; font-weight: 650; line-height: 1.25; word-break: break-all; }
.svc-secondary { font-size: 12.5px; color: var(--text-muted); }
.svc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-faint);
}
.svc-foot .go { color: var(--accent); font-weight: 600; white-space: nowrap; }

.filter-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }

/* ---- Telemetry ---- */
.tele-card { display: flex; flex-direction: column; gap: var(--s-3); }
.tele-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tele-head b { font-size: 14px; }
.tele-head .mono { font-size: 12px; color: var(--text-muted); }
.tele-host { font-size: 12px; color: var(--text-faint); margin-left: auto; }
.tele-foot { font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: var(--s-2); }

/* ---- Activity feed (timeline) ---- */
.feed-wrap { max-height: 480px; overflow-y: auto; padding-right: var(--s-2); }
.timeline { position: relative; margin-left: 6px; padding-left: var(--s-5); border-left: 1px solid var(--border); }
.tl-row { position: relative; padding: var(--s-2) 0; }
.tl-dot {
  position: absolute; left: calc(-1 * var(--s-5) - 5px); top: 14px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--idle); border: 2px solid var(--surface);
}
.tl-row.ok .tl-dot { background: var(--ok); }
.tl-row.warn .tl-dot { background: var(--warn); }
.tl-row.err .tl-dot { background: var(--err); }
.tl-msg { font-size: 13px; word-break: break-word; }
.tl-meta { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.tl-meta .tl-src { color: var(--text-muted); font-weight: 600; }