@use '../../styles/mixins' as *;

// =============================================================================
// WorkspaceBoard — Kanban-style board view
// =============================================================================

.boardContainer {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  overflow-x: auto;
  flex: 1;
  min-height: 0;
  align-items: flex-start;

  @include mobile {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }
}

// ---------------------------------------------------------------------------
// Column
// ---------------------------------------------------------------------------

.column {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 300px;
  flex: 1;
  background: var(--bg-surface);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-subtle);
  overflow: hidden;

  @include mobile {
    min-width: 200px;
  }
}

.columnHeader {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold, 600);
  color: var(--text-secondary);
  user-select: none;
}

.columnIcon {
  font-size: var(--font-size-base, 14px);
  flex-shrink: 0;
}

.columnLabel {
  flex: 1;
  white-space: nowrap;
}

.columnCount {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-tertiary);
  background: var(--bg-overlay);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
}

// ---------------------------------------------------------------------------
// Card list
// ---------------------------------------------------------------------------

.cardList {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  overflow-y: auto;
  min-height: 40px;
}

// ---------------------------------------------------------------------------
// Empty column placeholder
// ---------------------------------------------------------------------------

.emptyPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs, 11px);
  font-style: italic;
  padding: var(--space-md) var(--space-sm);
}

// ---------------------------------------------------------------------------
// Card
// ---------------------------------------------------------------------------

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-panel);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  outline: none;

  &:hover {
    background: var(--bg-overlay);
    border-color: var(--border-default);
  }

  &:focus-visible {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 30%, transparent);
  }
}

.cardHeader {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.cardStatusIcon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: var(--font-size-sm, 13px);
}

.cardTitle {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.3;
}

// ---------------------------------------------------------------------------
// Card badges
// ---------------------------------------------------------------------------

.cardBadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs, 11px);
  padding: 1px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  white-space: nowrap;
}

.blockedBadge {
  color: var(--accent-yellow);
  background: color-mix(in srgb, var(--accent-yellow) 12%, transparent);
}

.childBadge {
  color: var(--text-tertiary);
}

.depBadge {
  color: var(--text-tertiary);
}

.parentBadge {
  color: var(--text-tertiary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pausedSubBadge {
  font-style: italic;
}

.personaBadge {
  color: var(--accent-blue, var(--text-secondary));
}

.envBadge {
  color: var(--text-tertiary);
}

// ---------------------------------------------------------------------------
// Empty workspace CTA (mirrors DagView/WorkspacePage pattern)
// ---------------------------------------------------------------------------

.emptyCta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  animation: fadeIn 300ms ease;
}

.ctaButton {
  @include surface-card;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  border: 1px solid var(--border-subtle);
}

.ctaDescription {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
