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

/* Custom friendly style */
.btn-primary {
  @apply bg-primary text-white font-semibold rounded-lg px-4 py-2 shadow hover:bg-primary-light transition;
}
.btn-accent {
  @apply bg-accent text-gray-900 font-semibold rounded-lg px-4 py-2 shadow hover:bg-accent-light transition;
}
.sidebar {
  @apply bg-primary text-white min-h-screen p-0;
}
.sidebar .nav-link {
  @apply text-white hover:bg-accent hover:text-gray-900 rounded px-3 py-2 transition block;
}
.table-header {
  @apply bg-primary text-white;
}
.table-row:hover {
  @apply bg-accent-light;
}
.alert-success {
  @apply bg-primary-light text-white px-4 py-2 rounded shadow mb-2;
}
.alert-warning {
  @apply bg-accent text-gray-900 px-4 py-2 rounded shadow mb-2;
}
input:focus, select:focus, textarea:focus {
  @apply border-primary ring-2 ring-primary-light;
}
.card {
  @apply rounded-lg shadow p-4 bg-white;
}

/* Login page specific styles */
.login-container {
  @apply min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/10 via-accent/10 to-primary/20;
}

.login-card {
  @apply bg-white/95 backdrop-blur-sm shadow-xl rounded-2xl border border-white/20 overflow-hidden;
}

.login-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 transition duration-200;
}

.login-button {
  @apply w-full py-3 bg-primary hover:bg-primary-dark text-white font-semibold rounded-lg transition duration-200 flex items-center justify-center;
}

.login-select {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 transition duration-200 bg-white;
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}