/* ENDF Academy - Custom styles (complement Tailwind) */
:root {
  --primary-green: #15803D;
  --primary-green-light: #DCFCE7;
  --primary-green-dark: #14532D;
  --student-color: #FACC15; /* cadet / student badge */
  --student-bg: #FEFCE8;
  --teacher-color: #22C55E;
  --teacher-bg: #DCFCE7;
  --staff-color: #F97316;
  --staff-bg: #FFF7ED;
  --subject-color: #2DD4BF;
  --subject-bg: #ECFEFF;
  --finance-color: #EAB308;
  --finance-bg: #FEF9C3;
}

/* UI-COMPONENTS: card shadow */
.shadow-card {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.card {
  @apply bg-white rounded-xl border border-gray-100 shadow-sm;
}
.card-header {
  @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between flex-wrap gap-3;
}
.card-title {
  @apply text-lg font-semibold text-gray-900;
}
.card-body {
  @apply p-6;
}

.btn {
  @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50;
}
.btn-primary {
  @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
}
.btn-secondary {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400;
}
.btn-success {
  @apply bg-teal-500 text-white hover:bg-teal-600 focus:ring-teal-500;
}
.btn-danger {
  @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
}
.btn-outline {
  @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-400;
}
.btn-sm {
  @apply px-3 py-1.5 text-xs;
}
.btn-icon {
  @apply p-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900;
}
.btn-icon-sm {
  @apply p-1.5 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}
.form-control {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-600 focus:border-emerald-600 text-gray-900;
}
.form-select {
  @apply form-control appearance-none bg-white;
}
.form-checkbox {
  @apply rounded border-gray-300 text-emerald-600 focus:ring-emerald-600;
}
.form-group {
  @apply mb-4;
}

.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.badge-success { @apply bg-green-100 text-green-800; }
.badge-danger { @apply bg-red-100 text-red-800; }
.badge-warning { @apply bg-amber-100 text-amber-800; }
.badge-info { @apply bg-blue-100 text-blue-800; }
/* Dashboard stat tiles using CSS vars for quick future theming */
.stat-tile--students {
  background: linear-gradient(135deg, var(--student-bg), #FFFFFF);
  color: var(--student-color);
}
.stat-tile--teachers {
  background: linear-gradient(135deg, var(--teacher-bg), #FFFFFF);
  color: var(--teacher-color);
}
.stat-tile--courses {
  background: linear-gradient(135deg, var(--subject-bg), #FFFFFF);
  color: var(--subject-color);
}
.stat-tile--finance {
  background: linear-gradient(135deg, var(--finance-bg), #FFFFFF);
  color: var(--finance-color);
}

.data-table {
  @apply w-full text-left text-sm;
}
.data-table th {
  @apply px-4 py-3 font-semibold text-gray-700 bg-gray-50 border-b border-gray-200;
}
.data-table td {
  @apply px-4 py-3 border-b border-gray-100;
}
.data-table tbody tr:hover {
  @apply bg-gray-50/50;
}

/* Dashboard enhancements */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gradient-card {
  background: linear-gradient(135deg, var(--tw-gradient-stops));
}

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

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

/* Progress bar */
.progress-bar {
  transition: width 0.3s ease;
}

/* Hover effects */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pagination-btn {
  @apply px-3 py-1.5 text-sm rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-100;
}
.pagination-btn.active {
  @apply bg-emerald-600 text-white border-emerald-600 hover:bg-emerald-700;
}

[x-cloak] { display: none !important; }