/* Custom styles for Designer Directory */

/* Ensure dark mode works properly */
.dark {
  background-color: #1a202c;
  color: white;
}

/* Custom scrollbar for designer cards */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

/* Transitions */
.transition-all {
  transition: all 0.3s ease;
}

/* Card hover effect */
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments for sidebar */
@media (max-width: 768px) {
  .ml-64 {
    margin-left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .ml-16 {
    margin-left: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .w-64 {
    width: 100%;
  }
  
  .h-screen.w-64 {
    height: auto;
    min-height: 100vh;
  }
}

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

/* Animation for loading state */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}