/* Additional Modern Effects - Matching Lovable's approach exactly */

/* Enhanced AI Scan Animation - More Visible */
.ai-scan {
  position: relative;
  overflow: hidden;
}

.ai-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 20%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.ai-scan:hover::before {
  transform: translateX(100%);
}

/* Main Content Background AI Scan - Only on background */
.main-bg-scan {
  position: relative;
}

.main-bg-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.02) 30%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.02) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: auto-scan 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0; /* Behind content */
}

@keyframes auto-scan {
  0% { transform: translateX(-100%); }
  10% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Enhanced Menu AI Scan on Hover */
.ai-scan.sidebar-item::before {
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.05) 20%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 80%,
    transparent 100%
  );
}

/* Enhanced Menu Transitions - Exact Lovable Style */
.sidebar-item {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: calc(var(--radius) - 4px);
  position: relative;
}

.sidebar-item:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  transform: translateX(4px);
}

.sidebar-item[data-active="true"],
.sidebar-item.active {
  background-color: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
  font-weight: 500;
}

/* Icon glow effect on hover */
.sidebar-item:hover i[data-lucide] {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
  transform: scale(1.1);
  transition: all 0.15s ease-out;
}

.sidebar-item.active i[data-lucide] {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

/* Form elements matching their style */
.form-modern {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--input));
}

.form-modern:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Avatar modern effect */
.avatar-modern {
  background-image: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-modern:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-glow);
}

/* Status badges */
.status-badge {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.status-badge:hover {
  transform: scale(1.05);
}

/* Enhanced appointment/lead items */
.appointment-item,
.lead-item {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: calc(var(--radius) - 4px);
}

.appointment-item:hover,
.lead-item:hover {
  background-color: hsl(var(--accent) / 0.5);
  transform: translateX(8px);
}

/* Stats cards */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation);
}

/* Sidebar modern background */
.sidebar-modern {
  background-image: var(--gradient-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid hsl(var(--sidebar-border) / 0.5);
}

/* Header modern */
.header-modern {
  background-image: var(--gradient-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid hsl(var(--border) / 0.3);
}

/* Enhanced button hover effects */
.button-modern {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.button-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease-out;
}

.button-modern:hover::before {
  transform: translateX(100%);
}

.button-modern:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

/* Card hover scan effect */
.card-modern {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card-modern::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.card-modern:hover::after {
  opacity: 1;
}

/* Notification bell pulse effect */
.notification-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}