/* assets/style.css */
.btn-primary {
  @apply inline-flex items-center justify-center rounded-lg px-6 py-3 bg-slate-900 dark:bg-slate-700 text-white font-medium hover:bg-slate-800 dark:hover:bg-slate-600 transition-all duration-300 shadow-lg;
}
.btn-secondary {
  @apply inline-flex items-center justify-center rounded-lg px-6 py-3 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-300 dark:hover:bg-slate-600 transition-all duration-300 border border-slate-300 dark:border-slate-600;
}
.textarea {
  @apply w-full border border-slate-300 dark:border-slate-600 rounded-xl px-4 py-3 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 transition-all duration-300 shadow-sm;
}
.stat-card {
  @apply bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 transition-all duration-300 shadow-sm;
}
.stat-title {
  @apply text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400;
}
.stat-value {
  @apply text-2xl font-semibold mt-1 text-slate-900 dark:text-slate-100;
}
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}
.badge-nawala {
  @apply badge bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300;
}
.badge-aman {
  @apply badge bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300;
}

/* Theme Toggle Styles */
.theme-toggle {
  @apply relative inline-flex items-center justify-center p-2 rounded-full bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 transition-all duration-300 focus:outline-none;
}

.theme-toggle-track {
  @apply relative w-12 h-6 rounded-full bg-slate-300 dark:bg-slate-600 transition-all duration-300;
}

.theme-toggle-thumb {
  @apply absolute top-0.5 left-0.5 w-5 h-5 bg-white dark:bg-slate-900 rounded-full shadow-md transform transition-all duration-300 flex items-center justify-center;
  transform: translateX(0);
}

.dark .theme-toggle-thumb {
  transform: translateX(24px);
}

.sun-icon {
  @apply text-amber-500 transition-opacity duration-200;
  opacity: 1;
}
.dark .sun-icon {
  opacity: 0;
}

.moon-icon {
  @apply text-slate-400 transition-opacity duration-200 absolute;
  opacity: 0;
}
.dark .moon-icon {
  opacity: 1;
}

/* Modern card styles */
.modern-card {
  @apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-lg transition-colors duration-300;
}

/* Login card modern styling */  
.login-card {
  @apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-3xl shadow-2xl transition-colors duration-300;
}

/* Table styles */
tbody tr {
  @apply text-slate-700 dark:text-slate-300 transition-colors duration-200;
}

tbody tr:hover {
  @apply bg-slate-50 dark:bg-slate-700;
}