body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.splash-screen {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: Helvetica, 'sans-serif';
  background-color: #f2f3f8;
  color: #5e6278;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
}

.splash-screen span {
  color: #5e6278;
  transition: none !important;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.splash-screen img {
  margin-left: calc(100vw - 100%);
  margin-bottom: 30px;
  height: 30px !important;
}

/* Default light mode styles for ReactFlow components */
.react-flow {
  background-color: white !important;
}

.react-flow__container {
  background-color: transparent !important;
}

.react-flow__node {
  border: 2px solid rgba(108, 117, 125, 0.5) !important; 
  background-color: white !important; 
  border-radius: 12px !important; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important; 
  padding: 12px !important; 
  color: #212529 !important; 
  font-family: var(--kt-font-family) !important;
  font-size: 14px !important;
  text-align: center !important; 
  overflow: hidden !important; 
  transition: all 0.2s ease !important;
}

.react-flow__edge-path {
  stroke: rgba(var(--kt-primary-rgb), 0.85) !important;
  transition: stroke 0.3s ease, stroke-width 0.3s ease !important;
  stroke-width: 2px !important;
}

.react-flow__edge-path:hover {
  stroke: var(--kt-primary) !important;
  stroke-width: 2.5px !important;
}

.react-flow__controls {
  background: white !important;
  border: 1px solid rgba(var(--kt-primary-rgb), 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.react-flow__controls-button {
  background: rgba(var(--kt-body-bg-rgb), 0.7) !important;
  border: none !important;
  color: var(--kt-gray-800) !important;
  fill: var(--kt-gray-800) !important;
  transition: all 0.2s ease !important;
}

.react-flow__controls-button:hover {
  background: rgba(var(--kt-primary-rgb), 0.1) !important;
  color: var(--kt-primary) !important;
  fill: var(--kt-primary) !important;
}

.react-flow__minimap {
  background-color: white !important;
  border: 1px solid rgba(var(--kt-primary-rgb), 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.react-flow__minimap-mask {
  fill: rgba(var(--kt-primary-rgb), 0.1) !important;
}

.react-flow__minimap-node {
  fill: var(--kt-primary) !important;
  stroke: rgba(var(--kt-primary-rgb), 0.8) !important;
}

.react-flow__handle {
  background: white !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid var(--kt-primary) !important;
  box-shadow: 0 0 3px rgba(var(--kt-primary-rgb), 0.3) !important;
  transition: all 0.2s ease !important;
}

.react-flow__handle:hover {
  background: var(--kt-primary-light) !important;
  transform: scale(1.1) !important;
}

.react-flow__edge-path.animated {
  stroke: var(--kt-primary) !important;
  stroke-dasharray: 5 !important;
  animation: flowdraw 2.5s linear infinite !important;
}

.react-flow__arrowhead {
  fill: var(--kt-primary) !important;
}

.react-flow__connection-path {
  stroke: rgba(var(--kt-primary-rgb), 0.85) !important;
  stroke-width: 2px !important;
}

.react-flow__selection {
  background: rgba(var(--kt-primary-rgb), 0.05) !important;
  border: 1px solid rgba(var(--kt-primary-rgb), 0.25) !important;
  border-radius: 4px !important;
}

/* Dark Mode Styles (already existing) */
[data-theme='dark'] .splash-screen {
  background-color: #151521;
  color: #92929f;
}

[data-theme='dark'] .splash-screen span {
  color: #92929f;
}

/* React Flow Dark Mode Styles */
[data-theme='dark'] .react-flow {
  background-color: rgba(30, 30, 45, 0.98) !important;
}

[data-theme='dark'] .react-flow__container {
  background-color: transparent !important;
}

[data-theme='dark'] .react-flow__node {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(30, 30, 45, 0.95) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  color: white !important;
}

[data-theme='dark'] .react-flow-dark-mode {
  color: white !important;
}

/* Controls styling for dark mode */
[data-theme='dark'] .react-flow__controls {
  background: rgba(30, 30, 45, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme='dark'] .react-flow__controls:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(255, 255, 255, 0.15) !important;
}

[data-theme='dark'] .react-flow__controls-button {
  background: rgba(40, 40, 60, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  fill: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s ease !important;
}

[data-theme='dark'] .react-flow__controls-button:hover {
  background: rgba(50, 50, 70, 0.95) !important;
  color: white !important;
  fill: white !important;
}

[data-theme='dark'] .react-flow__controls-button svg {
  fill: white !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.95 !important;
}

[data-theme='dark'] .react-flow__controls-button path {
  fill: white !important;
  stroke: none !important;
}

/* Horizontal layout adjustments for controls */
[data-theme='dark'] .react-flow__controls.react-flow__controls-top-right {
  display: flex !important;
  flex-direction: row !important;
}

[data-theme='dark']
  .react-flow__controls.react-flow__controls-top-right
  .react-flow__controls-button {
  margin: 0 3px !important;
}

[data-theme='dark']
  .react-flow__controls.react-flow__controls-top-right
  .react-flow__controls-button:not(:last-child) {
  margin-bottom: 0 !important;
  margin-right: 3px !important;
}

/* Handle specific svg elements */
[data-theme='dark'] .react-flow__controls-button svg,
[data-theme='dark'] .react-flow__controls-button svg path,
[data-theme='dark'] .react-flow__controls-button svg rect,
[data-theme='dark'] .react-flow__controls-button svg circle {
  fill: white !important;
  color: white !important;
}

/* Fix for dark mode in minimap */
[data-theme='dark'] .react-flow__minimap {
  background: rgba(30, 30, 45, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme='dark'] .react-flow__minimap:hover {
  opacity: 1 !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(255, 255, 255, 0.15) !important;
}

[data-theme='dark'] .react-flow__minimap-mask {
  fill: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='dark'] .react-flow__minimap-node {
  fill: rgba(255, 255, 255, 0.8) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
}

/* Enhanced edge animations in dark mode */
[data-theme='dark'] .react-flow__edge-path.animated {
  stroke: rgba(255, 255, 255, 0.9) !important;
  stroke-dasharray: 5 !important;
  animation: flowdraw 2.5s linear infinite !important;
  stroke-width: 2.2px !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) !important;
}

@keyframes flowdraw {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Edge markers */
[data-theme='dark'] .react-flow__arrowhead {
  fill: rgba(255, 255, 255, 0.9) !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) !important;
}

/* Add a subtle grid in dark mode */
[data-theme='dark'] .react-flow__background {
  opacity: 0.15 !important;
  transition: opacity 0.3s ease !important;
}

/* Make nodes pop more in dark mode */
[data-theme='dark'] .react-flow__node {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)) !important;
  transition: filter 0.3s ease, transform 0.3s ease !important;
  will-change: transform !important;
}

/* Focus style for buttons */
[data-theme='dark'] .react-flow__controls-button:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
  outline: none !important;
}

/* Connection line in dark mode */
[data-theme='dark'] .react-flow__connection-path {
  stroke: rgba(255, 255, 255, 0.9) !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) !important;
}

/* Selection in dark mode */
[data-theme='dark'] .react-flow__selection {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 6px !important;
}

/* Viewport transition */
[data-theme='dark'] .react-flow__viewport {
  transition: transform 0.3s ease !important;
}

/* Handle styles */
[data-theme='dark'] .react-flow__handle {
  background: rgba(255, 255, 255, 0.9) !important;
  width: 18px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: 1.5px solid rgba(40, 40, 60, 0.9) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* Connection handle hover state */
[data-theme='dark'] .react-flow__handle:hover {
  background: white !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
}

/* Target handle styling */
[data-theme='dark'] .react-flow__handle-left {
  left: -9px !important;
}

/* Source handle styling */
[data-theme='dark'] .react-flow__handle-right {
  right: -9px !important;
}