/* Plugg'd Custom Styles - Premium Dark Theme */

/* Custom scrollbar - Dark Theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #111827;
}

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

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

/* Smooth transitions */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

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

/* Custom gradient backgrounds - Premium */
.gradient-primary {
  background: linear-gradient(135deg, #000000 0%, #1f2937 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, #1f2937 0%, #ffd700 100%);
}

.gradient-gold {
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
}

/* Hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animation for loading states */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Button variations - Premium */
.btn-primary {
  @apply bg-yellow-400 text-black px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors;
}

.btn-secondary {
  @apply bg-gray-800 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors;
}

.btn-outline {
  @apply border-2 border-yellow-400 text-yellow-400 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-400 hover:text-black transition-colors;
}

.btn-elite {
  @apply bg-gradient-gold text-black px-8 py-4 rounded-lg font-bold hover:shadow-lg hover:scale-105 transition-all;
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#userModal > div {
  animation: modalFadeIn 0.2s ease-out;
}

/* Score indicators */
.score-excellent {
  @apply text-green-600 bg-green-50;
}

.score-good {
  @apply text-yellow-600 bg-yellow-50;
}

.score-average {
  @apply text-gray-600 bg-gray-50;
}

.score-private {
  @apply text-gray-400 bg-gray-50;
}

/* Skill tags */
.skill-tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.skill-tag.technology {
  @apply bg-blue-100 text-blue-800;
}

.skill-tag.investing {
  @apply bg-green-100 text-green-800;
}

.skill-tag.services {
  @apply bg-purple-100 text-purple-800;
}

.skill-tag.celebrity {
  @apply bg-yellow-100 text-yellow-800;
}

.skill-tag.introductions {
  @apply bg-indigo-100 text-indigo-800;
}

/* Status indicators */
.status-active {
  @apply text-green-600;
}

.status-inactive {
  @apply text-gray-400;
}

.status-pending {
  @apply text-yellow-600;
}

/* Custom focus styles */
input:focus,
select:focus,
textarea:focus {
  @apply ring-2 ring-blue-500 ring-opacity-50 border-blue-500 outline-none;
}

/* Notification styles */
.notification {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive grid improvements */
@media (max-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles would go here */
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus indicators for keyboard navigation */
a:focus-visible,
button:focus-visible {
  @apply outline-2 outline-offset-2 outline-blue-600;
}

/* Custom checkbox and radio styles */
.custom-checkbox,
.custom-radio {
  appearance: none;
  @apply w-4 h-4 border-2 border-gray-300 rounded;
}

.custom-checkbox:checked,
.custom-radio:checked {
  @apply bg-blue-600 border-blue-600;
}

.custom-radio {
  @apply rounded-full;
}

/* Tooltip styles */
.tooltip {
  @apply absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity;
}

.tooltip.show {
  @apply opacity-100;
}

/* Progress bars */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
  @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
}

/* Card layouts */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-body {
  @apply px-6 py-4;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}