/* Performance Optimizations */

/* Enable GPU acceleration for common elements */
.futuristic-card,
.btn,
.sidebar,
.nav-item,
.alert,
.swal2-popup {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Optimize backdrop-filter for better performance */
.futuristic-card,
.sidebar,
.login-container .login-form {
  backdrop-filter: blur(8px); /* Reduced from 10px */
}

/* Reduce expensive animations */
@media (prefers-reduced-motion: reduce) {
  .card-floating,
  .shine,
  .login-btn::after {
    animation: none !important;
  }
  
  .futuristic-card,
  .btn,
  .nav-item,
  .form-control {
    transition: none !important;
  }
}

/* Optimize box-shadows */
.futuristic-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Simplified shadow */
}

.futuristic-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 153, 255, 0.2); /* Reduced glow */
}

/* Optimize transitions */
.futuristic-card,
.btn,
.nav-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Shorter duration, specific properties */
}

/* Contain layout shifts */
.sidebar {
  contain: layout style;
}

.main-content {
  contain: layout;
}

/* Optimize filters */
.glow {
  box-shadow: 0 0 8px rgba(0, 153, 255, 0.3); /* Reduced glow */
}

/* Disable heavy animations on mobile */
@media (max-width: 768px) {
  .card-floating,
  .shine,
  .login-btn::after {
    animation: none !important;
  }
  
  .futuristic-card:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Optimize for better SweetAlert2 performance */
.swal2-popup {
  backdrop-filter: none !important;
  background: rgba(27, 38, 59, 0.95) !important;
}

.swal2-backdrop {
  backdrop-filter: blur(3px) !important; /* Reduced blur */
}

/* Optimize form inputs */
.form-control:focus {
  box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.2) !important; /* Reduced shadow */
}

/* Reduce composite layers */
.nav-item:not(:hover) {
  will-change: auto;
}

.futuristic-card:not(:hover) {
  will-change: auto;
}