Claude-Code-Workflow/ccw/src/templates/dashboard-css/20-cli-taskqueue.css

/* ========================================
 * Task Queue Sidebar - CLI Tab Styles
 * ======================================== */

/* Tab Navigation */
.task-queue-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 1rem;
}

.task-queue-tab {
  flex: 1;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.task-queue-tab:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.3);
}

.task-queue-tab.active {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
}

.task-queue-tab .tab-badge {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 1.25rem;
  text-align: center;
}

.task-queue-tab.active .tab-badge {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

/* CLI Filter Buttons */
.cli-filter-btn {
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.cli-filter-btn:hover {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}

.cli-filter-btn.active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* CLI Queue Item */
.cli-queue-item {
  padding: 0.75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.cli-queue-item:hover {
  background: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--primary) / 0.3);
}

.cli-queue-item.category-user {
  border-left: 3px solid #3b82f6;
}

.cli-queue-item.category-insight {
  border-left: 3px solid #a855f7;
}

.cli-queue-item.category-internal {
  border-left: 3px solid #22c55e;
}

.cli-queue-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.cli-queue-category-icon {
  font-size: 0.875rem;
}

.cli-queue-tool-tag {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cli-queue-tool-tag.cli-tool-gemini {
  background: hsl(210 100% 50% / 0.15);
  color: hsl(210 100% 45%);
}

.cli-queue-tool-tag.cli-tool-qwen {
  background: hsl(280 100% 50% / 0.15);
  color: hsl(280 100% 40%);
}

.cli-queue-tool-tag.cli-tool-codex {
  background: hsl(145 60% 45% / 0.15);
  color: hsl(145 60% 35%);
}

.cli-queue-tool-tag.cli-tool-claude {
  background: hsl(25 90% 50% / 0.15);
  color: hsl(25 90% 40%);
}

.cli-queue-status {
  font-size: 0.75rem;
}

.cli-queue-time {
  margin-left: auto;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}

.cli-queue-prompt {
  font-size: 0.75rem;
  color: hsl(var(--foreground));
  line-height: 1.4;
  margin-bottom: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cli-queue-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}

.cli-queue-id {
  font-family: monospace;
}

.cli-queue-turns {
  background: hsl(var(--muted));
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
}

.cli-queue-native {
  font-size: 0.75rem;
}