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

@layer components {
  .card-stat {
    @apply bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-300;
  }
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg flex items-center justify-center gap-2 transition-all shadow-md active:scale-95 disabled:opacity-50;
  }
  .btn-secondary {
    @apply bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2.5 rounded-lg flex items-center justify-center gap-2 transition-all active:scale-95;
  }
  .input-field {
    @apply w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all;
  }
  .status-badge {
    @apply px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

body {
  @apply bg-slate-50 text-slate-900 antialiased font-sans;
}

/* Custom animations for NOC dashboard */
@keyframes pulse-ring {
  0% { transform: scale(0.33); opacity: 1; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

.pulse-status {
  @apply relative flex h-3 w-3;
}
.pulse-status-dot {
  @apply relative inline-flex rounded-full h-3 w-3 bg-green-500;
}
.pulse-status-ring {
  @apply animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75;
}