/* Veltrix SecOps Styles */

/* Global Styles */
:root {
  --primary-color: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --secondary-color: #6c757d;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
  --dark-bg: #111827;
  --light-text: #f9fafb;
  --dark-text: #1f2937;
  --gray-light: #f3f4f6;
  --gray-medium: #d1d5db;
  --gray-dark: #4b5563;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Fixed header spacing adjustment */
body {
  padding-top: 4rem;
}

/* Button Styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white rounded-md font-medium;
}

.btn-disabled {
  @apply bg-gray-400 text-white rounded-md font-medium cursor-not-allowed;
}

/* Card Hover Effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Pricing Table Styles */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pricing-card.featured {
  transform: scale(1.05);
  z-index: 10;
  position: relative;
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Dark Mode Adjustments */
.dark .card-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.dark .pricing-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Animation for loading components */
[data-component] {
  min-height: 50px;
  position: relative;
}

[data-component]:empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  animation: pulse 1.5s infinite;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .pricing-card.featured {
    transform: scale(1);
  }
  
  .pricing-card.featured:hover {
    transform: translateY(-5px);
  }
}