/* styles/globals.css */
/* Modern UI with enhanced glassmorphism and depth effects */

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@layer base {
  :root {
    /* Refined background palette - more sophisticated gradients */
    --color-bg-primary: 8, 10, 23;       /* Deep midnight blue */
    --color-bg-secondary: 15, 18, 35;    /* Rich dark blue */
    --color-bg-tertiary: 22, 26, 47;     /* Elevated surfaces */

    /* Subtle surface variations */
    --color-surface: 28, 32, 55;         /* Interactive surfaces */
    --color-border: 45, 50, 75;          /* Refined borders */
    --color-border-highlight: 65, 72, 105; /* Accent borders */

    /* Harmonious text hierarchy */
    --color-text-primary: 248, 250, 255;  /* Pure white text */
    --color-text-secondary: 200, 205, 220; /* Soft secondary */
    --color-text-muted: 130, 140, 165;    /* Elegant muted */

    /* Sophisticated accent palette */
    --color-primary: 99, 125, 255;       /* Refined blue */
    --color-secondary: 52, 211, 153;     /* Modern emerald */
    --color-tertiary: 168, 85, 247;      /* Elegant purple */
    --color-accent-1: 244, 114, 182;     /* Soft pink */
    --color-accent-2: 34, 197, 255;      /* Bright cyan */
    --color-accent-3: 250, 204, 21;      /* Warm amber */
    --color-accent-4: 251, 146, 60;      /* Vibrant orange */

    /* Semantic colors with better harmony */
    --color-success: 52, 211, 153;       /* Emerald success */
    --color-warning: 251, 146, 60;       /* Amber warning */
    --color-error: 239, 68, 68;          /* Red error */
    --color-info: 34, 197, 255;          /* Cyan info */

    /* Shadcn UI specific overrides */
    --background: var(--color-bg-primary);
    --foreground: var(--color-text-primary);

    --card: var(--color-bg-tertiary);
    --card-foreground: var(--color-text-primary);

    --popover: var(--color-bg-tertiary);
    --popover-foreground: var(--color-text-primary);

    --primary: var(--color-primary);
    --primary-foreground: 13, 14, 33; /* Dark text for primary buttons */

    --secondary: var(--color-secondary);
    --secondary-foreground: 13, 14, 33; /* Dark text for secondary buttons */

    --muted: var(--color-surface);
    --muted-foreground: var(--color-text-muted);

    --accent: var(--color-tertiary);
    --accent-foreground: var(--color-text-primary);

    --destructive: var(--color-error);
    --destructive-foreground: var(--color-text-primary);

    --border: var(--color-border);
    --input: var(--color-border); /* Input border color */
    --ring: var(--color-primary); /* Focus ring color */

    --radius: 0.5rem;
  }

  html {
    @apply bg-[rgb(var(--color-bg-primary))] text-[rgb(var(--color-text-primary))];
    font-feature-settings: "cv02", "cv03", "cv04", "cv09";
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border)) rgb(var(--color-bg-primary));
  }
  html.dark {
    color-scheme: dark;
  }

  html.light {
    color-scheme: light;
    
    /* Light theme color palette */
    --color-bg-primary: 248, 250, 252;       /* Soft white */
    --color-bg-secondary: 241, 245, 249;     /* Light gray */
    --color-bg-tertiary: 255, 255, 255;      /* Pure white */

    /* Light theme surfaces */
    --color-surface: 226, 232, 240;          /* Light surface */
    --color-border: 203, 213, 225;           /* Light borders */
    --color-border-highlight: 148, 163, 184; /* Accent borders */

    /* Light theme text */
    --color-text-primary: 15, 23, 42;        /* Dark text */
    --color-text-secondary: 51, 65, 85;      /* Medium text */
    --color-text-muted: 100, 116, 139;       /* Muted text */

    /* Light theme accents - keeping same hues but adjusted */
    --color-primary: 79, 70, 229;            /* Indigo */
    --color-secondary: 16, 185, 129;         /* Emerald */
    --color-tertiary: 139, 92, 246;          /* Violet */
    --color-accent-1: 236, 72, 153;          /* Pink */
    --color-accent-2: 6, 182, 212;           /* Cyan */
    --color-accent-3: 245, 158, 11;          /* Amber */
    --color-accent-4: 249, 115, 22;          /* Orange */

    /* Light theme semantics */
    --color-success: 16, 185, 129;           /* Emerald */
    --color-warning: 245, 158, 11;           /* Amber */
    --color-error: 239, 68, 68;              /* Red */
    --color-info: 6, 182, 212;               /* Cyan */

    /* Update shadcn variables for light theme */
    --background: var(--color-bg-primary);
    --foreground: var(--color-text-primary);
    --card: var(--color-bg-tertiary);
    --card-foreground: var(--color-text-primary);
    --popover: var(--color-bg-tertiary);
    --popover-foreground: var(--color-text-primary);
    --primary: var(--color-primary);
    --primary-foreground: 255, 255, 255;
    --secondary: var(--color-secondary);
    --secondary-foreground: 255, 255, 255;
    --muted: var(--color-surface);
    --muted-foreground: var(--color-text-muted);
    --accent: var(--color-tertiary);
    --accent-foreground: var(--color-text-primary);
    --destructive: var(--color-error);
    --destructive-foreground: 255, 255, 255;
    --border: var(--color-border);
    --input: var(--color-border);
    --ring: var(--color-primary);
  }
  body {
    @apply font-sans antialiased bg-[rgb(var(--color-bg-primary))] text-[rgb(var(--color-text-primary))] min-h-screen;
    background-image: 
      radial-gradient(circle at 10% 20%, rgba(var(--color-primary), 0.03) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(var(--color-tertiary), 0.03) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(var(--color-secondary), 0.02) 0%, transparent 50%);
    background-attachment: fixed;
  }
  
  /* Enhanced scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(var(--color-bg-secondary), 0.5);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-border), 0.7);
    border-radius: 4px;
    border: 2px solid rgba(var(--color-bg-secondary), 0.3);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-border-highlight), 0.9);
  }
  
  /* Typography baseline */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-semibold tracking-tight;
    line-height: 1.3;
  }
  
  /* Code font */
  code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer components {
  /* Card styling with enhanced glassmorphism */
  .card {
    @apply bg-[rgba(var(--color-bg-tertiary),0.7)] rounded-xl border border-[rgba(var(--color-border),0.7)] 
    shadow-[0_8px_32px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.1)] backdrop-blur-xl transition-all duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-[0_15px_40px_rgba(0,0,0,0.2),0_3px_12px_rgba(0,0,0,0.15)] hover:border-[rgba(var(--color-border-highlight),0.8)] 
    hover:translate-y-[-3px] transition-all duration-300;
  }
  
  /* Refined glass-like effects */
  .glass {
    @apply bg-[rgba(var(--color-bg-tertiary),0.25)] backdrop-blur-[24px] border border-[rgba(var(--color-border),0.15)];
    position: relative;
    overflow: hidden;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  html.light .glass {
    background: rgba(var(--color-bg-tertiary), 0.7);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(var(--color-border), 0.3);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  
  .glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
  }
  
  .glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.03),
      transparent
    );
    transform: rotate(5deg) translateY(-50%);
    pointer-events: none;
  }
  
  .glass-header {
    @apply bg-[rgba(var(--color-bg-secondary),0.6)] backdrop-blur-[28px] border-b border-[rgba(var(--color-border),0.2)];
    position: relative;
    overflow: hidden;
  }

  html.light .glass-header {
    background: rgba(var(--color-bg-secondary), 0.8);
    backdrop-filter: blur(28px) saturate(200%);
    border-bottom: 1px solid rgba(var(--color-border), 0.4);
  }
  
  .glass-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(var(--color-primary), 0.3) 50%, 
      transparent 100%);
  }
  
  .glass-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(var(--color-primary), 0),
      rgba(var(--color-primary), 0.2),
      rgba(var(--color-primary), 0)
    );
  }
  
  /* Button enhancements */
  .btn-glow {
    @apply relative overflow-hidden;
  }
  
  .btn-glow::before {
    content: '';
    @apply absolute top-0 left-[-100%] w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20;
    animation: glow 2s infinite;
  }
  
  .button-primary {
    @apply bg-[rgba(var(--primary),0.9)] text-[rgb(var(--primary-foreground))] hover:bg-[rgb(var(--primary))]
    shadow-[0_2px_10px_rgba(var(--primary),0.25)] hover:shadow-[0_4px_15px_rgba(var(--primary),0.35)] transition-all;
  }
  
  .button-destructive {
    @apply bg-[rgba(var(--destructive),0.9)] text-[rgb(var(--destructive-foreground))] hover:bg-[rgb(var(--destructive))]
    shadow-[0_2px_10px_rgba(var(--destructive),0.25)] hover:shadow-[0_4px_15px_rgba(var(--destructive),0.35)] transition-all;
  }
  
  @keyframes glow {
    100% { left: 100%; }
  }
  
  /* Custom gradients */
  .gradient-primary {
    @apply bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-tertiary))];
  }
  
  .gradient-secondary {
    @apply bg-gradient-to-r from-[rgb(var(--color-secondary))] to-[rgb(var(--color-accent-2))];
  }
  
  .gradient-accent {
    @apply bg-gradient-to-r from-[rgb(var(--color-accent-1))] to-[rgb(var(--color-accent-4))];
  }
  
  .gradient-text {
    @apply text-transparent bg-clip-text;
  }
  
  /* Enhanced input styling */
  .input-enhanced {
    @apply bg-[rgba(var(--color-bg-secondary),0.7)] border border-[rgba(var(--color-border),0.7)] rounded-lg 
    focus:border-[rgba(var(--color-primary),0.8)] focus:ring-2 focus:ring-[rgba(var(--color-primary),0.25)] transition-all;
  }
  
  /* Panel containers with improved depth */
  .panel {
    @apply border border-[rgba(var(--color-border),0.7)] bg-[rgba(var(--color-bg-tertiary),0.7)] rounded-xl 
    shadow-[0_10px_30px_rgba(0,0,0,0.12)] backdrop-blur-lg p-4;
    position: relative;
    overflow: hidden;
  }
  
  .panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(var(--color-bg-tertiary), 0.1),
      rgba(255, 255, 255, 0.1),
      rgba(var(--color-bg-tertiary), 0.1)
    );
  }
  
  /* Enhanced badge styling */
  .badge-enhanced {
    @apply px-2.5 py-0.5 text-xs font-medium rounded-full shadow-sm;
  }
  
  /* Custom file tree item styling with hover effects */
  .tree-item {
    @apply flex items-center px-2 py-1.5 rounded-md transition-all duration-200
    hover:bg-[rgba(var(--color-primary),0.1)] hover:translate-x-0.5;
  }
  
  .tree-item-selected {
    @apply bg-[rgba(var(--color-primary),0.15)] border-l-2 border-[rgb(var(--color-primary))]
    shadow-[0_0_8px_rgba(var(--color-primary),0.1)];
  }
}

@layer utilities {
  /* Enhanced text utilities */
  .text-gradient-primary {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-tertiary))];
  }
  
  .text-gradient-secondary {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[rgb(var(--color-secondary))] to-[rgb(var(--color-accent-2))];
  }
  
  .text-gradient-accent {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[rgb(var(--color-accent-1))] to-[rgb(var(--color-accent-4))];
  }
  
  /* Enhanced border utilities */
  .border-glow {
    @apply border border-[rgba(var(--color-primary),0.7)] shadow-[0_0_15px_rgba(var(--color-primary),0.4)];
  }
  
  .border-gradient {
    position: relative;
  }
  
  .border-gradient::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
    z-index: -1;
    border-radius: inherit;
    margin: -1px;
  }
  
  /* Enhanced animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .animate-slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .animate-float {
    animation: float 4s ease-in-out infinite;
  }
  
  .animate-pulse-subtle {
    animation: pulseSlow 3s ease-in-out infinite;
  }
  
  .animate-shimmer {
    position: relative;
    overflow: hidden;
  }
  
  .animate-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.05) 20%,
      rgba(255, 255, 255, 0.1) 60%,
      rgba(255, 255, 255, 0)
    );
    animation: shimmer 2.5s infinite;
  }
  
  /* Hover effect utilities */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
  }
  
  .hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
  }
  
  .hover-bright {
    @apply transition-[filter] duration-300 hover:brightness-115;
  }
  
  .hover-saturate {
    @apply transition-[filter] duration-300 hover:saturate-150;
  }
  
  .hover-rotate {
    @apply transition-transform duration-300 hover:rotate-12;
  }
  
  /* Interactive state utilities */
  .focus-glow {
    @apply focus:outline-none focus:ring-2 focus:ring-[rgba(var(--color-primary),0.5)] focus:border-[rgb(var(--color-primary))];
  }
  
  .active-scale {
    @apply active:scale-95 transition-transform;
  }
}

/* Enhanced animation keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(16px) scale(0.98); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* Animation for background elements */
@keyframes backgroundShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Overrides for Shadcn UI components to match our enhanced theme */

/* Button overrides */
.btn-primary, .btn-secondary, 
.dark .btn-primary, .dark .btn-secondary {
  @apply bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-primary))] hover:from-[rgb(var(--color-primary))] hover:to-[rgb(var(--color-tertiary))] text-white
  shadow-[0_4px_12px_rgba(var(--color-primary),0.25)] hover:shadow-[0_6px_16px_rgba(var(--color-primary),0.35)] transition-all;
}

/* Card overrides with improved depth */
.dark .card, .card, 
.dark [class*="bg-card"], [class*="bg-card"] {
  @apply bg-[rgba(var(--color-bg-tertiary),0.7)] backdrop-blur-lg border-[rgba(var(--color-border),0.7)] 
  shadow-[0_10px_30px_rgba(0,0,0,0.15)];
}

/* Dialog/Modal overrides with glass effect */
.dark [role="dialog"], [role="dialog"] {
  @apply bg-[rgba(var(--color-bg-tertiary),0.85)] backdrop-blur-xl border-[rgba(var(--color-border),0.6)]
  shadow-[0_25px_50px_-12px_rgba(0,0,0,0.3)];
}

/* Input overrides with subtle glow on focus */
.dark [type="text"],
.dark [type="email"],
.dark [type="url"],
.dark [type="password"],
.dark [type="number"],
.dark [type="date"],
.dark [type="datetime-local"],
.dark [type="month"],
.dark [type="search"],
.dark [type="tel"],
.dark [type="time"],
.dark [type="week"],
.dark [multiple],
.dark textarea,
.dark select {
  @apply bg-[rgba(var(--color-bg-secondary),0.7)] border-[rgba(var(--color-border),0.7)] text-[rgb(var(--color-text-primary))]
  focus:border-[rgba(var(--color-primary),0.8)] focus:ring-2 focus:ring-[rgba(var(--color-primary),0.25)] transition-all;
}

/* Badge overrides with gradient */
.badge, .dark .badge {
  @apply bg-[rgba(var(--color-primary),0.15)] text-[rgb(var(--color-text-primary))] border border-[rgba(var(--color-primary),0.2)]
  shadow-[0_2px_5px_rgba(var(--color-primary),0.1)];
}

/* Tooltip overrides with glass effect */
.dark [role="tooltip"], [role="tooltip"] {
  @apply bg-[rgba(var(--color-bg-tertiary),0.9)] backdrop-blur-lg border-[rgba(var(--color-border),0.6)] text-[rgb(var(--color-text-primary))]
  shadow-[0_8px_16px_rgba(0,0,0,0.2)];
}

/* Tables with subtle borders */
.dark th, th, .dark td, td {
  @apply border-[rgba(var(--color-border),0.5)];
}

/* Custom class for decorative lines */
.decorative-line {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(var(--color-bg-tertiary), 0),
    rgba(var(--color-primary), 0.3),
    rgba(var(--color-bg-tertiary), 0)
  );
}

/* Custom class for section dividers */
.section-divider {
  position: relative;
  height: 1px;
  background: rgba(var(--color-border), 0.4);
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(var(--color-bg-tertiary), 0),
    rgba(var(--color-primary), 0.3),
    rgba(var(--color-bg-tertiary), 0)
  );
}

/* Hide Next.js Development Indicator */
[data-next-indicator] {
  display: none !important;
}

/* Add these styles to styles/globals.css */

/* Card highlight animation when moved between columns */
@keyframes kanbanCardHighlight {
  0% { box-shadow: 0 0 0 rgba(var(--color-primary), 0); }
  50% { box-shadow: 0 0 20px rgba(var(--color-primary), 0.6); border-color: rgba(var(--color-primary), 0.8); }
  100% { box-shadow: 0 0 0 rgba(var(--color-primary), 0); }
}

.kanban-card-highlight {
  animation: kanbanCardHighlight 1s ease-in-out;
}

/* Column highlight animation when being dragged over */
@keyframes kanbanColumnPulse {
  0%, 100% { background-color: rgba(var(--color-bg-tertiary), 0.65); }
  50% { background-color: rgba(var(--color-primary), 0.08); }
}

.kanban-column-highlight {
  animation: kanbanColumnPulse 1.5s ease-in-out infinite;
}

/* Enhanced card transitions for smooth animations */
.card-enter {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
}

.card-enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.card-exit {
  opacity: 1;
  transform: scale(1);
}

.card-exit-active {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

/* Fluid drag animation helper */
.smooth-drag {
  transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

/* Kanban board specific utilities */
.kanban-title-highlight {
  background: linear-gradient(
    to right,
    rgb(var(--color-primary)), 
    rgb(var(--color-tertiary))
  );
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Animated Loading Indicator */
.loading-pulse {
  position: relative;
}

.loading-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(var(--color-primary), 0.5);
  opacity: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Hover Effects */
.hover-lift-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Focus Animation for Accessibility */
@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(var(--color-primary), 0.3); }
}

.focus-pulse:focus-visible {
  outline: none;
  animation: focusPulse 1.5s ease-in-out infinite;
  border-color: rgba(var(--color-primary), 0.7);
}

/* Hardware acceleration hints for smoother animations */
.hardware-accelerated {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Add these to your globals.css file */

/* ===== Drag and Drop Enhancements ===== */

/* Prevent text selection during drag operations */
.dragging-active {
  user-select: none !important;
  cursor: grabbing !important;
}

/* Card highlight animation when moved between columns - enhanced version */
@keyframes kanbanCardHighlight {
  0% { 
    box-shadow: 0 0 0 rgba(var(--color-primary), 0); 
    transform: translateY(0);
  }
  30% { 
    box-shadow: 0 0 25px rgba(var(--color-primary), 0.7); 
    border-color: rgba(var(--color-primary), 0.9);
    transform: translateY(-2px);
  }
  100% { 
    box-shadow: 0 0 0 rgba(var(--color-primary), 0); 
    transform: translateY(0);
  }
}

.kanban-card-highlight {
  animation: kanbanCardHighlight 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Column highlight animation when being dragged over - improved version */
@keyframes kanbanColumnPulse {
  0%, 100% { background-color: rgba(var(--color-bg-tertiary), 0.65); }
  50% { background-color: rgba(var(--color-primary), 0.1); }
}

.kanban-column-highlight {
  animation: kanbanColumnPulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Enhanced card transitions for smoother drag animations */
.smooth-drag {
  transition: transform 0.08s cubic-bezier(0.2, 0, 0, 1) !important;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Visual indication when trying to drop outside valid drop areas */
.drop-not-allowed {
  box-shadow: 0 0 0 2px rgba(var(--color-error), 0.8) !important;
  opacity: 0.7 !important;
  transform: scale(0.98) !important;
}

/* Hardware acceleration for smoother animations */
.hardware-accelerated {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
  perspective: 1000px;
}

/* Performance optimization for large lists */
@media (prefers-reduced-motion: no-preference) {
  .kanban-list-optimized {
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}

/* Touch-friendly enhancements - enlarged touch targets */
@media (pointer: coarse) {
  .kanban-card-touch-enhanced {
    --touch-target-padding: 8px;
    position: relative;
  }
  
  .kanban-card-touch-enhanced::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--touch-target-padding));
    left: calc(-1 * var(--touch-target-padding));
    right: calc(-1 * var(--touch-target-padding));
    bottom: calc(-1 * var(--touch-target-padding));
    z-index: -1;
  }
  
  .drag-handle-touch-friendly {
    min-height: 32px;
    min-width: 32px;
  }
}

/* Card entering animation - smooth fade in */
@keyframes cardEnterAnim {
  from { 
    opacity: 0; 
    transform: translateY(10px) scale(0.96);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

.kanban-card-enter {
  animation: cardEnterAnim 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Enhanced ghost effect while dragging */
.dragging-ghost {
  position: relative;
}

.dragging-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary), 0.08);
  z-index: -1;
  border-radius: inherit;
  animation: ghostPulse 1.5s infinite;
}

@keyframes ghostPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.03); }
}