/**
 * Clipboard Styles for Copy-Paste-Cut Operations
 * 
 * Provides visual feedback for clipboard operations including
 * cut node styling, paste target highlighting, and progress indicators.
 * 
 * @author KaleidoscopeMX
 * @date 2025-01-18
 */

/* ========================================
   Cut Node Visual Feedback
   ======================================== */

/* Cut node styling */
.node-group.cut {
  opacity: 0.5;
  filter: grayscale(50%);
  transition: opacity 0.2s ease, filter 0.2s ease;
  pointer-events: none; /* Prevent interaction with cut nodes */
}

.node-group.cut .node-box {
  stroke: #ff6b6b;
  stroke-width: 2;
  stroke-dasharray: 5,5;
  animation: cutPulse 2s infinite;
}

.node-group.cut .node-label {
  fill: #999 !important; /* Dimmed text color */
}

/* Cut node animation */
@keyframes cutPulse {
  0%, 100% { 
    stroke-opacity: 1; 
  }
  50% { 
    stroke-opacity: 0.5; 
  }
}

/* ========================================
   Paste Target Highlighting
   ======================================== */

/* Paste target highlighting */
.node-group.paste-target {
  stroke: #4ecdc4;
  stroke-width: 3;
  stroke-dasharray: 10,5;
  animation: pasteTargetPulse 1s infinite;
}

.node-group.paste-target .node-box {
  stroke: #4ecdc4;
  stroke-width: 3;
  stroke-dasharray: 10,5;
}

/* Paste target animation */
@keyframes pasteTargetPulse {
  0%, 100% { 
    stroke-opacity: 0.8; 
  }
  50% { 
    stroke-opacity: 0.4; 
  }
}

/* ========================================
   Clipboard Context Menu Styling
   ======================================== */

/* Clipboard menu items */
.context-menu-item.clipboard-item {
  position: relative;
}

.context-menu-item.clipboard-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.context-menu-item.clipboard-item.copy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}

.context-menu-item.clipboard-item.cut::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l2.36-2.36c.5.23 1.05.36 1.64.36 2.21 0 4-1.79 4-4s-1.79-4-4-4c-.59 0-1.14.13-1.64.36L12 7l-2.36-.36zM6 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2 7.64c-.23.5-.36 1.05-.36 1.64 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4c-.59 0-1.14.13-1.64.36L14 17l-2.36 2.36zM18 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
}

.context-menu-item.clipboard-item.paste::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E");
}

.context-menu-item.clipboard-item.clear::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* Adjust text padding for clipboard items */
.context-menu-item.clipboard-item {
  padding-left: 32px;
}

/* ========================================
   Undo-Redo Controls
   ======================================== */

/* Undo-redo controls are now integrated into the unified menu */

/* ========================================
   Progress Indicators
   ======================================== */

/* Progress indicator (additional styles beyond progress-indicator.js) */
.progress-indicator {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.progress-indicator .progress-container {
  position: relative;
}

.progress-indicator .progress-message {
  font-weight: 500;
  margin-bottom: 8px;
}

.progress-indicator .progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-indicator .progress-fill {
  position: relative;
  background: linear-gradient(90deg, #4ecdc4, #44a08d);
  border-radius: 4px;
}

/* Progress shine animation */
.progress-indicator .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ========================================
   Clipboard Status Indicators
   ======================================== */

/* Clipboard status indicator */
.clipboard-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 1000;
  display: none;
}

.clipboard-status.show {
  display: block;
  animation: slideInUp 0.3s ease;
}

.clipboard-status.hide {
  animation: slideOutDown 0.3s ease;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ========================================
   Mobile Responsiveness
   ======================================== */

@media (max-width: 768px) {
  /* Undo-redo controls are now integrated into the unified menu */
  
  /* Adjust progress indicator for mobile */
  .progress-indicator {
    top: 10px;
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
  }
  
  /* Adjust clipboard status for mobile */
  .clipboard-status {
    bottom: 10px;
    right: 10px;
    left: 10px;
    text-align: center;
  }
}

/* ========================================
   High Contrast Mode
   ======================================== */

@media (prefers-contrast: high) {
  .node-group.cut {
    opacity: 0.3;
    filter: contrast(200%) grayscale(100%);
  }
  
  .node-group.cut .node-box {
    stroke: #ff0000;
    stroke-width: 3;
  }
  
  .node-group.paste-target {
    stroke: #00ff00;
    stroke-width: 4;
  }
  
  /* Undo-redo controls are now integrated into the unified menu */
}

/* ========================================
   Notification Animations
   ======================================== */

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .node-group.cut .node-box,
  .node-group.paste-target {
    animation: none;
  }
  
  .progress-indicator .progress-fill::after {
    animation: none;
  }
  
  .undo-redo-btn {
    transition: none;
  }
  
  .clipboard-status {
    animation: none;
  }
}