/* Workout Editor Visual Feedback - Tailwind-compatible styles */

/* Only CSS animations and complex styles that can't be done with Tailwind classes */

/* Dash animation for drop zones */
@keyframes dash {
  to { stroke-dashoffset: -15px; }
}

.workout-dash-animation {
  animation: dash 1s linear infinite;
}

/* Smooth transitions for SVG elements (Tailwind doesn't handle SVG transitions well) */
svg .component rect,
svg .component polygon {
  transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out, filter 0.2s ease-in-out, opacity 0.2s ease-in-out, x 0.3s ease-in-out, y 0.3s ease-in-out;
}

/* Smooth reordering transitions */
.component {
  transition: transform 0.2s ease-in-out;
}

.component.reordering {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.repeat-block-border {
  transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
}

/* SVG-specific filter effects */
.component.selected {
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3));
}

.component.related {
  filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
}

.insertion-line {
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.5));
}

.block-insertion-line {
  filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.6));
}

/* Repeat block dragging states */
.repeat-block.dragging {
  opacity: 0.7;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.repeat-block-label {
  user-select: none;
  pointer-events: all;
}

.repeat-block-label:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.repeat-block-border.drop-zone-active {
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.4));
}

.repeat-block-border.block-drop-zone-active {
  filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.4));
}

/* Responsive chart container */
#chartCanvas {
  position: relative;
}

#chartCanvas svg {
  display: block;
  width: 100%;
  height: 100%;
}