@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom Hero Servers Styling */
:root {
  --primary: #0F2741;
  --accent: #3C86B6;
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

/* Smooth transitions */
* {
  transition: all 0.2s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Glass effect */
.glass {
  backdrop-filter: blur(10px);
  background: rgba(15, 39, 65, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover {
  @apply transform transition-all duration-300 hover:scale-105 hover:shadow-2xl;
}

/* Button styles */
.btn-primary {
  @apply bg-gradient-to-r from-primary to-accent text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200;
}

.btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-2xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200;
}

/* Form inputs */
.form-input {
  @apply w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-2xl text-white placeholder-gray-400 focus:border-accent focus:ring-2 focus:ring-accent focus:ring-opacity-50 transition-all duration-200;
}

/* Navigation */
.nav-link {
  @apply text-gray-300 hover:text-accent transition-colors duration-200 relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-accent transition-all duration-200;
}

.nav-link:hover::after {
  @apply w-full;
}

/* Dashboard cards */
.dashboard-card {
  @apply bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-700 hover:border-gray-600;
}

/* Status badges */
.status-active {
  @apply bg-green-500 bg-opacity-20 text-green-400 border border-green-500 border-opacity-30;
}

.status-pending {
  @apply bg-yellow-500 bg-opacity-20 text-yellow-400 border border-yellow-500 border-opacity-30;
}

.status-suspended {
  @apply bg-red-500 bg-opacity-20 text-red-400 border border-red-500 border-opacity-30;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

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

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Light mode overrides */
.light {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  color: rgb(17 24 39);
}

.light .dashboard-card {
  @apply bg-white border-gray-200 hover:border-gray-300;
}

.light .form-input {
  @apply bg-white border-gray-300 text-gray-900 placeholder-gray-500;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .mobile-menu {
    @apply fixed inset-0 bg-gray-900 bg-opacity-95 z-50 flex flex-col items-center justify-center space-y-8;
  }
}