/* Study Buddy Mobile Application - Custom Styles */

/* Global Styles */
* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  line-height: 1.6;\n  color: #1f2937;\n}\n\n/* Custom scrollbar for webkit browsers */\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n::-webkit-scrollbar-track {\n  background: #f1f5f9;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 3px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: #94a3b8;\n}\n\n/* Animation classes */\n.fade-in {\n  animation: fadeIn 0.5s ease-in-out;\n}\n\n.slide-up {\n  animation: slideUp 0.6s ease-out;\n}\n\n.bounce-gentle {\n  animation: bounceGentle 2s infinite;\n}\n\n/* Custom button styles */\n.btn-primary {\n  @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-200 active:transform active:scale-95;\n}\n\n.btn-secondary {\n  @apply bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-200 transition-all duration-200 active:transform active:scale-95;\n}\n\n.btn-outline {\n  @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-all duration-200 active:transform active:scale-95;\n}\n\n/* Card styles */\n.card {\n  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200;\n}\n\n.card-interactive {\n  @apply card cursor-pointer hover:scale-105 transform transition-all duration-200 active:scale-100;\n}\n\n/* Subject card styles */\n.subject-card {\n  @apply card-interactive;\n  background: linear-gradient(135deg, var(--subject-color, #3b82f6) 0%, var(--subject-color-dark, #1d4ed8) 100%);\n  color: white;\n  min-height: 120px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.subject-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n}\n\n/* Progress indicators */\n.progress-bar {\n  @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;\n}\n\n.progress-fill {\n  @apply h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-500 ease-out;\n}\n\n.progress-ring {\n  transform: rotate(-90deg);\n}\n\n/* Badge styles */\n.badge {\n  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;\n}\n\n.badge-primary {\n  @apply badge bg-blue-100 text-blue-800;\n}\n\n.badge-success {\n  @apply badge bg-green-100 text-green-800;\n}\n\n.badge-warning {\n  @apply badge bg-yellow-100 text-yellow-800;\n}\n\n.badge-danger {\n  @apply badge bg-red-100 text-red-800;\n}\n\n/* Mobile-specific styles */\n@media (max-width: 640px) {\n  .mobile-padding {\n    @apply px-4;\n  }\n  \n  .mobile-text {\n    @apply text-sm;\n  }\n  \n  .mobile-hidden {\n    display: none;\n  }\n  \n  /* Improved touch targets on mobile */\n  .btn-primary,\n  .btn-secondary,\n  .btn-outline {\n    @apply min-h-12 min-w-12;\n  }\n  \n  /* Better spacing on mobile */\n  .card {\n    @apply p-4;\n  }\n}\n\n/* Quiz styles */\n.quiz-question {\n  @apply card mb-6;\n}\n\n.quiz-option {\n  @apply p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-all duration-200;\n}\n\n.quiz-option.selected {\n  @apply border-blue-500 bg-blue-100;\n}\n\n.quiz-option.correct {\n  @apply border-green-500 bg-green-100;\n}\n\n.quiz-option.incorrect {\n  @apply border-red-500 bg-red-100;\n}\n\n/* Learning path styles */\n.learning-path {\n  @apply relative;\n}\n\n.learning-path::before {\n  content: '';\n  @apply absolute left-6 top-12 bottom-0 w-0.5 bg-gray-300;\n}\n\n.path-node {\n  @apply relative z-10 flex items-center mb-8;\n}\n\n.path-node-icon {\n  @apply w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg;\n}\n\n.path-node.completed .path-node-icon {\n  @apply bg-green-500;\n}\n\n.path-node.current .path-node-icon {\n  @apply bg-blue-500 ring-4 ring-blue-200;\n}\n\n.path-node.locked .path-node-icon {\n  @apply bg-gray-400;\n}\n\n/* Achievement styles */\n.achievement {\n  @apply card text-center;\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: white;\n}\n\n.achievement-icon {\n  @apply text-4xl mb-2;\n}\n\n/* Stats dashboard */\n.stat-card {\n  @apply card text-center;\n}\n\n.stat-number {\n  @apply text-3xl font-bold text-blue-600;\n}\n\n.stat-label {\n  @apply text-sm text-gray-500 uppercase tracking-wide;\n}\n\n/* Loading states */\n.loading {\n  @apply animate-pulse;\n}\n\n.skeleton {\n  @apply bg-gray-200 rounded;\n}\n\n.skeleton-text {\n  @apply skeleton h-4 mb-2;\n}\n\n.skeleton-title {\n  @apply skeleton h-6 mb-4 w-3/4;\n}\n\n.skeleton-avatar {\n  @apply skeleton w-12 h-12 rounded-full;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  /* Placeholder for future dark mode implementation */\n}\n\n/* Print styles */\n@media print {\n  .no-print {\n    display: none;\n  }\n  \n  body {\n    background: white;\n    color: black;\n  }\n  \n  .card {\n    border: 1px solid #ccc;\n    box-shadow: none;\n  }\n}\n\n/* Focus states for accessibility */\n.focus\\:ring-custom:focus {\n  @apply outline-none ring-2 ring-blue-500 ring-opacity-50;\n}\n\n/* Custom utilities */\n.text-gradient {\n  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.bg-pattern {\n  background-image: \n    radial-gradient(circle at 25% 25%, #f0f9ff 0%, transparent 50%),\n    radial-gradient(circle at 75% 75%, #eff6ff 0%, transparent 50%);\n}\n\n/* Notification styles */\n.notification {\n  @apply fixed top-4 right-4 z-50 bg-white border-l-4 border-blue-500 rounded-lg shadow-lg p-4 max-w-sm;\n  animation: slideInRight 0.3s ease-out;\n}\n\n.notification.success {\n  @apply border-green-500;\n}\n\n.notification.error {\n  @apply border-red-500;\n}\n\n.notification.warning {\n  @apply border-yellow-500;\n}\n\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* Responsive grid utilities */\n.grid-auto-fit {\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n}\n\n.grid-auto-fill {\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n}