Control-Center/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss

// ============================================================================
// AgentCard — M3 tactical dark styling
// Per spec Section 7.3: left‑border accent, status‑aware coloring,
// responsive card layout with 320px min‑width.
// Enhanced: data-status selectors, elapsed time, design token imports.
// ============================================================================

@use 'tokens' as tokens;

.agent-card {
  display: flex;
  flex-direction: column;
  min-width: tokens.$cc-card-min-width;
  padding: tokens.$cc-card-padding;
  background-color: var(--cc-surface-container);
  border-radius: tokens.$cc-card-border-radius;
  border-left: 4px solid var(--status-offline); // default; overridden by [style]
  border-top: 1px solid var(--cc-outline);
  border-right: 1px solid var(--cc-outline);
  border-bottom: 1px solid var(--cc-outline);
  gap: 16px;
  transition: border-left-color 0.3s ease, box-shadow 0.2s ease;
  cursor: default;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  &:focus-within {
    outline: 2px solid var(--status-active);
    outline-offset: 2px;
  }
}

// ── Header ──
.agent-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-card__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background-color: var(--status-active-bg); // overridden per status below
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cc-on-surface);
}

.agent-card__status-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cc-on-surface-variant);
}

.agent-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--cc-on-surface);
  line-height: 1.2;
}

.agent-card__role {
  font-size: 12px;
  font-weight: 400;
  color: var(--cc-on-surface-variant);
}

// ── Body ──
.agent-card__body {
  padding: 4px 0;
}

.agent-card__task {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--cc-on-surface);
  line-height: 1.4;

  &--error {
    color: var(--status-error);
  }
}

// ── Progress Bar ──
.agent-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.agent-card__progress-label {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-on-surface-variant);
  white-space: nowrap;
  min-width: 36px;
}

// Override mat-progress-bar to match tactical dark theme
.agent-card__progress ::ng-deep .mat-mdc-progress-bar {
  height: 4px;
  border-radius: 2px;

  .mdc-linear-progress__bar-inner {
    background-color: var(--status-active);
  }

  .mdc-linear-progress__track {
    background-color: var(--cc-outline);
  }
}

// ── Elapsed Time ──
.agent-card__elapsed {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cc-on-surface-variant);
  padding: 2px 0;
}

.agent-card__elapsed-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: var(--status-thinking);
}

// ── Footer ──
.agent-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto; // push footer to bottom
}

.agent-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-card__channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cc-on-surface-variant);
}

.agent-card__channel .mat-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.agent-card__last-activity {
  font-size: 12px;
  color: var(--cc-on-surface-variant);
}

// ── Quick‑Jump Button ──
.agent-card__jump {
  flex-shrink: 0;

  .mat-mdc-button {
    min-width: 36px;
    padding: 0 8px;
    color: var(--status-active);
  }

  .mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

// ── Status‑specific background tints for badge ──
// Using data-status attribute selectors for clean styling.

.agent-card[data-status="active"] .agent-card__badge {
  background-color: var(--status-active-bg);
}

.agent-card[data-status="idle"] .agent-card__badge {
  background-color: var(--status-idle-bg);
}

.agent-card[data-status="thinking"] .agent-card__badge {
  background-color: var(--status-thinking-bg);
}

.agent-card[data-status="error"] .agent-card__badge {
  background-color: var(--status-error-bg);
}

.agent-card[data-status="offline"] .agent-card__badge {
  background-color: var(--cc-surface-container-high);
}

// ── Active‑like pulse on card border ──
.agent-card[data-status="active"],
.agent-card[data-status="thinking"] {
  border-left-width: 4px;
}

.agent-card[data-status="error"] {
  border-left-color: var(--status-error);
}

// ── Responsive ──
@media (max-width: tokens.$cc-breakpoint-mobile) {
  .agent-card {
    min-width: unset;
    padding: 16px;
  }

  .agent-card__header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .agent-card__footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .agent-card__meta {
    gap: 8px;
  }
}

// ── Accessibility: reduced motion ──
@media (prefers-reduced-motion: reduce) {
  .agent-card {
    transition: none;
  }
}