/* ─── Swarm dashboard (/swarm) ─────────────────────────────────────────────
   BEM classes for the Agent Swarm coordination page. Consumes the semantic
   `--color-*` aliases + `--shadow-*` primitives defined in `style.css`
   (both flip with the dark theme). Linked in `index.html` via
   `<link data-trunk rel="css">` (FRONTEND-COMPONENT-CSS-LINK-001); per
   UX-CRATE-001 the page markup uses these classes instead of inline styles
   (UI-LAYOUT-003). */

.swarm-page-heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ─── Panel section spacing (used inside Card bodies) ─── */

.swarm-card__section {
    margin-top: 0.75rem;
}

/* ─── Metrics stat cards ─── */

.swarm-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 0.7rem 0.9rem;
    min-width: 0;
}

.swarm-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    font-size: 1.05rem;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    flex: none;
}

.swarm-stat__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.swarm-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.swarm-stat__label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swarm-stat--success .swarm-stat__icon {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.swarm-stat--success .swarm-stat__value {
    color: var(--color-success);
}

.swarm-stat--warning .swarm-stat__icon {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.swarm-stat--warning .swarm-stat__value {
    color: var(--color-warning);
}

.swarm-stat--error .swarm-stat__icon {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.swarm-stat--error .swarm-stat__value {
    color: var(--color-error);
}

.swarm-stat--info .swarm-stat__icon {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.swarm-stat--info .swarm-stat__value {
    color: var(--color-info);
}

.swarm-stat--muted .swarm-stat__value {
    color: var(--color-text-muted);
}

/* ─── Filter bar ─── */

.swarm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.swarm-filters__group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.swarm-filters__label {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swarm-filters__select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.875rem;
}

.swarm-filters__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

/* ─── Inline notice banner ─── */

.swarm-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.swarm-banner--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.swarm-banner--info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.swarm-banner--error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.swarm-banner .pi {
    margin-top: 0.1rem;
    flex: none;
}

/* ─── Quick search ─── */

.swarm-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.swarm-search__input {
    flex: 0 1 20rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.swarm-search__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.swarm-search__hint {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* ─── Agent detail panel ─── */

.swarm-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.swarm-detail__grid {
    display: grid;
    gap: 0.5rem 1.25rem;
    grid-template-columns: 1fr;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

@media (min-width: 48rem) {
    .swarm-detail__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.swarm-detail__span-2 {
    grid-column: 1 / -1;
}

.swarm-detail__mono {
    font-family: monospace;
    font-size: 0.85em;
}

.swarm-detail__hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.swarm-detail__summary {
    background: var(--color-bg-subtle);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
}

.swarm-detail__summary p {
    margin: 0.25rem 0 0;
    white-space: pre-wrap;
}

.swarm-detail__locks {
    margin: 0.25rem 0 0 1rem;
    font-family: monospace;
    font-size: 0.85rem;
}

.swarm-detail__scroll {
    max-height: 13rem;
    overflow-y: auto;
    margin-top: 0.25rem;
}

/* ─── Activity feed / workspace timeline ─── */

.swarm-feed {
    display: flex;
    flex-direction: column;
    max-height: 25rem;
    overflow-y: auto;
}

.swarm-feed--short {
    max-height: 19rem;
}

.swarm-feed__item {
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.swarm-feed__item:last-child {
    border-bottom: none;
}

.swarm-feed__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.swarm-feed__agent {
    font-weight: 600;
}

.swarm-feed__summary {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.swarm-feed__time {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    flex: none;
}

.swarm-feed__mono {
    font-family: monospace;
    font-size: 0.85rem;
}

/* ─── Empty + loading states ─── */

.swarm-empty {
    color: var(--color-text-muted);
    padding: 1rem 0.25rem;
    text-align: center;
}

.swarm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    padding: 2.5rem 0;
}

.swarm-loading::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: swarm-spin 0.8s linear infinite;
}

@keyframes swarm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swarm-loading::before {
        animation: none;
    }
}

/* ─── Session relationships panel ─── */

.swarm-rel {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .swarm-rel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.swarm-rel__card {
    padding: 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.5rem;
    background: var(--color-bg-subtle);
}

.swarm-rel__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.swarm-rel__glyph {
    font-size: 1.15em;
    font-weight: 700;
}

.swarm-rel__glyph--chain {
    color: var(--color-primary);
}

.swarm-rel__glyph--tree {
    color: var(--color-success);
}

.swarm-rel__glyph--issue {
    color: var(--color-warning);
}

.swarm-rel__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.swarm-rel__details {
    margin-top: 0.75rem;
    font-size: 0.82rem;
}

.swarm-rel__details summary {
    cursor: pointer;
    color: var(--color-text-muted);
}

/* ─── Per-agent relationship markers (Phase 6.3/6.4) ───────────────────── */
/* `continues \u{25B8}` (chain successor) vs `spawned \u{25BE}` (parent-child
   tree) — DISTINCT glyphs + colors so the two relationships are never
   conflated in the fleet table. */

.swarm-rel-marker {
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.swarm-rel-marker--continuation {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.swarm-rel-marker--subsession {
    color: var(--color-success);
    border-color: var(--color-success);
}

/* ─── Conclusive-statement dot ─── */

.swarm-dot {
    color: var(--color-success);
    margin-left: 0.25rem;
}

/* ─── Table cell text helpers (used by the DataTable cell renderers) ─── */

.swarm-cell {
    font-size: 0.85em;
}

.swarm-cell-muted {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.swarm-cell-mono {
    font-family: monospace;
    font-size: 0.85em;
}

/* Phase 3.3 (autonomous-session-outcome-gate): the RED/ORANGE outcome badge on
   each attention-required agent row. Token-based colors (the --color-* semantic
   alias layer landed 2026-07-23); a required row is visually distinct, never
   buried among the green ones. A required row with a missing signal degrades to
   ORANGE (conservative — never a greenwash). */
.swarm-outcome-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5em;
    padding: 0.1em 0.5em;
    border-radius: 9999px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.swarm-outcome-badge--red {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
}
.swarm-outcome-badge--orange {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

/* Phase 5 / P5.1 + P5.7 — agent-locus badge. Distinguishes cluster Plan Agents
   from workstation + 24/7 GitOps agents in the /swarm fleet table. The badge
   carries an icon + label (defined ONCE on AgentLocus in locus.rs) and is
   color-coded by locus: cluster is prominent (the newsworthy plan-bound pod),
   workstation is the neutral default, gitops is the always-on green. Mirrors
   the .swarm-locus--<kind> BEM class emitted by AgentLocus::css_class(). */
.swarm-locus-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1em 0.55em;
    border-radius: 9999px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.swarm-locus-badge__label {
    line-height: 1;
}
.swarm-locus--cluster {
    background: var(--color-primary-bg, var(--color-primary-soft, transparent));
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.swarm-locus--workstation {
    background: var(--color-info-bg, transparent);
    color: var(--color-info, var(--color-text-muted));
    border-color: var(--color-info, var(--color-border));
}
.swarm-locus--gitops {
    background: var(--color-success-bg, transparent);
    color: var(--color-success);
    border-color: var(--color-success);
}
/* P5.8 — degraded modifier: a cluster Plan Agent whose heartbeat is stale
   (Stale/None freshness) appends this on TOP of its `.swarm-locus--cluster`
   base. It is an amber + dashed-border + slow-pulse signal that the pod's
   liveness is degraded (observed state, never a mask). The base locus color is
   retained so the operator still sees it is a cluster agent; the modifier only
   escalates the urgency. */
.swarm-locus-badge--degraded {
    background: var(--color-warning-bg, transparent);
    color: var(--color-warning, #b58105);
    border-color: var(--color-warning, #b58105);
    border-style: dashed;
    animation: swarm-degraded-pulse 2.4s ease-in-out infinite;
}
@keyframes swarm-degraded-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .swarm-locus-badge--degraded { animation: none; }
}
/* P5.2 — plan chip deep link: the plan chip in the fleet Plan column is a real
   `<a>` to `/docs/plan/<id>`. It looks like a Tag (no underline) and gains a
   subtle underline + pointer on hover so the affordance is discoverable. */
.swarm-plan-link {
    text-decoration: none;
    cursor: pointer;
}
.swarm-plan-link:hover {
    text-decoration: underline;
}
/* P5.2 deliverable 2 — the X/Y checklist-progress suffix next to the plan chip.
   A muted monospace pill; only renders once the plan_get fetch lands (None
   until then, so a pending/failed fetch shows no misleading count). */
.swarm-plan-progress {
    margin-left: 0.4em;
    padding: 0.05em 0.4em;
    border-radius: 9999px;
    font-size: 0.72em;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 600;
    background: var(--color-info-bg, transparent);
    color: var(--color-info, var(--color-text-muted));
    border: 1px solid var(--color-info, var(--color-border));
}
/* P5.8 — CRITICAL blackboard alerts bar (the link target the degraded cluster-
   agent badge points to). Prominent red/amber banner at the top of /swarm for
   fleet-affecting infra failures (sealed-Vault, forgejo degraded, ...). Hides
   entirely when there are no CRITICAL entries (no false alarm). */
.swarm-critical-alerts-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 0.6em 0.85em;
    margin: 0 0 0.75em;
    border-radius: 0.5em;
    background: var(--color-danger-bg, #2a1414);
    border: 1px solid var(--color-danger, #dc2626);
    color: var(--color-danger, #fca5a5);
}
.swarm-critical-alerts-bar__icon {
    flex: 0 0 auto;
    margin-top: 0.15em;
    font-size: 1.05em;
}
.swarm-critical-alerts-bar__items {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    min-width: 0;
}
.swarm-critical-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    line-height: 1.35;
}
.swarm-critical-alert__key {
    flex: 0 0 auto;
    padding: 0.05em 0.45em;
    border-radius: 9999px;
    font-size: 0.74em;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
    background: var(--color-danger, #dc2626);
    color: #fff;
}
.swarm-critical-alert__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88em;
    color: var(--color-text, #fecaca);
}
.swarm-critical-alert__meta {
    flex: 0 0 auto;
    font-size: 0.74em;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--color-text-muted, #fda4af);
    opacity: 0.85;
}