@import "tailwindcss";

@theme {
  --color-node-running: #22c55e;
  --color-node-stopped: #ef4444;
  --color-node-paused: #f59e0b;
}

/* React Flow overrides */
.react-flow__background {
  background-color: #020617 !important;
}

.react-flow__minimap {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.react-flow__minimap-mask {
  stroke: rgba(34, 211, 238, 0.8) !important;
  stroke-width: 6 !important;
}


.react-flow__controls {
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.react-flow__controls-button {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #334155 !important;
  width: 32px !important;
  height: 32px !important;
}

.react-flow__controls-button svg {
  width: 14px !important;
  height: 14px !important;
}

.react-flow__controls-button:hover {
  background-color: #334155 !important;
}

/* Disable hover effect on nodes */
.react-flow__node:hover {
  box-shadow: none !important;
}

/* Pointer cursor on service nodes, grabbing while dragging */
.react-flow__node-service {
  cursor: pointer !important;
}
.react-flow__node-service.dragging {
  cursor: grabbing !important;
}
.react-flow__node-group {
  cursor: default !important;
}

/* Flash animations for Docker events */
@keyframes flash-border-green {
  0% { border-color: #22c55e; box-shadow: 0 0 12px 2px rgba(34, 197, 94, 0.4); }
  100% { border-color: rgba(51, 65, 85, 0.8); box-shadow: none; }
}

@keyframes flash-border-red {
  0% { border-color: #ef4444; box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.4); }
  100% { border-color: #ef4444; box-shadow: none; }
}

@keyframes flash-border-yellow {
  0% { border-color: #f59e0b; box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.4); }
  100% { border-color: rgba(51, 65, 85, 0.8); box-shadow: none; }
}

.flash-start { animation: flash-border-green 1.2s ease-out; }
.flash-stop { animation: flash-border-red 1.2s ease-out forwards; }
.flash-restart { animation: flash-border-yellow 1.2s ease-out 2; }

/* Fade out animation for removed nodes */
@keyframes node-fade-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

.node-removing {
  animation: node-fade-out 0.8s ease-out forwards;
  pointer-events: none;
}

/* Log panel slide-up */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.log-panel {
  animation: slideUp 0.25s ease-out;
}

/* Login animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
