/* Component-specific styles extracted from inline HTML */

/* Signal Health Status */
.signal-health-good {
  color: #4ade80;
}

.signal-health-warning {
  color: #eab308;
}

.signal-health-bad {
  color: #ef4444;
}

/* Signal Type Dots */
.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.signal-dot[data-type="audio"] {
  background: #ef4444;
}

.signal-dot[data-type="midi"] {
  background: #eab308;
}

.signal-dot[data-type="digital"] {
  background: #3b82f6;
}

.signal-dot[data-type="control"] {
  background: #10b981;
}

/* Controls Help Text */
.controls-help {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.5;
}

/* Gear Color Options */
.color-option {
  color: white;
  padding: 0.25rem 0.5rem;
}

.color-option[value="#1e293b"] {
  background: #1e293b;
}

.color-option[value="#1e40af"] {
  background: #1e40af;
}

.color-option[value="#3730a3"] {
  background: #3730a3;
}

.color-option[value="#581c87"] {
  background: #581c87;
}

.color-option[value="#7c2d12"] {
  background: #7c2d12;
}

.color-option[value="#0f766e"] {
  background: #0f766e;
}

.color-option[value="#6366f1"] {
  background: #6366f1;
}

.color-option[value="#dc2626"] {
  background: #dc2626;
}

.color-option[value="#16a34a"] {
  background: #16a34a;
}