/*
 * Copyright (c) 2025 BadLabs
 *
 * Use of this software is governed by the Business Source License 1.1 included in the file LICENSE.txt.
 *
 * As of the Change Date specified in that file, in accordance with the Business Source License, use of this software will be governed by the Apache License, version 2.0.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :host {
    /* Base Theme Colors */
    --background: 0 0% 98%;
    --foreground: 0 0% 9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
    --primary: 142 76% 36%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 94%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 142 76% 36%;
    --radius: 0.5rem;

    /* Flow specific colors */
    --flow-execute: 142 76% 36%;
    --flow-data: 217 91% 60%;
    --flow-stream: 35 92% 50%;

    /* Font settings */
    --font-sans: 'Inter var', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Glow effect colors in RGB format for shadow opacity */
    --glow-execute-rgb: 22, 163, 74;
    --glow-data-rgb: 37, 99, 235;
    --glow-stream-rgb: 217, 119, 6;

    /* Edge Colors - Light Theme */
    --edge-color: 215 25% 27%;
    --edge-connecting: 142 76% 36%;
    --edge-selected: 217 91% 60%;

    /* Base edge opacity */
    --edge-opacity: 0.7;
  }

  .dark {
    /* Dark Theme Colors */
    --background: 0 0% 12%;
    --foreground: 0 0% 100%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 12%;
    --popover-foreground: 0 0% 100%;
    --primary: 142 70% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 14%;
    --muted-foreground: 0 0% 64%;
    --accent: 0 0% 14%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 16%;
    --input: 0 0% 16%;
    --ring: 142 70% 45%;

    /* Flow specific colors */
    --flow-execute: 142 70% 45%;
    --flow-data: 217 91% 60%;
    --flow-stream: 35 92% 50%;

    /* Dark theme glow colors */
    --glow-execute-rgb: 21, 128, 61;
    --glow-data-rgb: 29, 78, 216;
    --glow-stream-rgb: 180, 83, 9;

    /* Edge Colors - Dark Theme */
    --edge-color: 215 25% 85%;
    --edge-connecting: 142 70% 45%;
    --edge-selected: 217 91% 60%;

    /* Base edge opacity for dark theme */
    --edge-opacity: 0.6;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased font-sans;
  }
}

/* ReactFlow Customization */
.react-flow {
  @apply bg-background;
}

/*.react-flow__node {*/
/*  @apply rounded-xl bg-card border-border;*/
/*  @apply shadow-node dark:shadow-node-dark;*/
/*  @apply transition-shadow duration-200;*/
/*}*/

/* Group Node specific styles */
/*.react-flow__node-groupNode {*/
/*  @apply z-[-1]; !* Keep groups behind regular nodes *!*/
/*  background: transparent !important; !* Remove default node background *!*/
/*  border: none !important; !* Remove default node border *!*/
/*  padding: 0 !important; !* Remove default padding *!*/
/*  border-radius: 0 !important; !* Remove default border radius *!*/
/*}*/

/*.react-flow__node-groupNode.selected {*/
/*  @apply z-[0]; !* Bring selected groups above other groups *!*/
/*  background: transparent !important;*/
/*}*/

/*!* Ensure resize handle is properly positioned *!*/
/*.react-flow__node-groupNode .react-flow__resize-control.handle {*/
/*  border: none !important;*/
/*  background: transparent !important;*/
/*}*/

.react-flow__handle {
  @apply w-4 h-4 rounded-full;
  @apply border-2 border-background;
  @apply transition-colors duration-200;
  background: currentColor;
}

/* Base edge style */
/*.react-flow__edge-path {*/
/*  @apply stroke-[2px] transition-colors duration-200;*/
/*  stroke: hsl(var(--edge-color) / var(--edge-opacity));*/
/*  animation: none !important;*/
/*}*/

.react-flow__edge-path {
  stroke-dasharray: none !important; /* Remove dashed line */
  animation: none !important; /* Remove animation */
  @apply stroke-[3px] transition-colors duration-200;
}

/* Hover state */
.react-flow__edge:hover .react-flow__edge-path {
  @apply stroke-[3.5px];
  stroke: hsl(var(--edge-color));
}

/* Selected state */
.react-flow__edge.selected .react-flow__edge-path {
  @apply stroke-[3.5px];
  stroke: hsl(var(--edge-selected));
}

/* Connection line (when dragging new connection) */
.react-flow__connection-path {
  @apply stroke-[3.5px];
  @apply stroke-[hsl(var(--flow-execute))];
}

/* Add edge animation */
@keyframes flow-edge {
  from {
    stroke-dashoffset: 8;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.animate-flow-edge {
  animation: flow-edge 1s linear infinite;
}

/*.react-flow__node.selected {*/
/*  @apply border-[hsl(var(--flow-execute))];*/
/*  @apply bg-[hsl(var(--flow-execute))]/10;*/
/*}*/

/* Selection */
.react-flow__selection {
  @apply border-2 border-[hsl(var(--flow-execute))]/50;
  @apply bg-[hsl(var(--flow-execute))]/10;
}

/* Controls */
.react-flow__controls,
.react-flow__minimap {
  @apply rounded-md shadow-sm;
  @apply bg-card border-border;
}

/* Hide attribution */
.react-flow__attribution {
  @apply hidden;
}

html,
body {
  overscroll-behavior-x: none;
}
