/* dashboard.css - Custom styles for QnA Hub Dashboard */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Base styles */
* {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Course card hover effects */
.course-card {
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-card:hover {
  transform: translateY(-8px);
}

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

/* Gradient text animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-gradient-to-r {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Mobile menu animation */
#mobile-menu {
  transform-origin: top;
}

/* Focus styles for accessibility */
button:focus, 
a:focus, 
input:focus, 
select:focus {
  @apply ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900;
}

/* Loading skeleton animation */
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Dark mode transitions */
.dark .skeleton {
  background: linear-gradient(
    90deg,
    #374151 25%,
    #4b5563 50%,
    #374151 75%
  );
}

/* Custom backdrop blur for better browser support */
@supports not (backdrop-filter: blur(12px)) {
  header {
    @apply bg-white dark:bg-gray-800 !important;
  }
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
  #coursesGrid {
    @apply gap-4;
  }
  
  .course-card {
    @apply mb-2;
  }
}

/* Animation delays for staggered effects */
.animate__delay-1s {
  animation-delay: 0.2s;
}

.animate__delay-2s {
  animation-delay: 0.4s;
}

/* Button press effect */
button:active {
  transform: scale(0.98);
}

/* Custom focus visible for better accessibility */
:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900;
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
  @apply outline-none ring-0;
}

/* Print styles */
@media print {
  header, footer, #searchBtn, #loadMoreBtn, #darkModeToggle {
    display: none !important;
  }
  
  .course-card {
    break-inside: avoid;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .course-card {
    @apply border-2 border-gray-900 dark:border-gray-100;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.bg-gradient{
  background: #000428;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}