/* Custom styles for Lead Generation System */

/* Status badges */
.status-badge {
  @apply inline-block px-2 py-1 text-xs font-medium rounded-full;
}

.status-신규 {
  @apply bg-gray-100 text-gray-800;
}

.status-접촉중 {
  @apply bg-blue-100 text-blue-800;
}

.status-관심있음 {
  @apply bg-yellow-100 text-yellow-800;
}

.status-제안완료 {
  @apply bg-purple-100 text-purple-800;
}

.status-성사 {
  @apply bg-green-100 text-green-800;
}

.status-보류 {
  @apply bg-red-100 text-red-800;
}

/* Priority badges */
.priority-badge {
  @apply inline-block px-2 py-1 text-xs font-medium rounded;
}

.priority-높음 {
  @apply bg-red-100 text-red-800;
}

.priority-보통 {
  @apply bg-yellow-100 text-yellow-800;
}

.priority-낮음 {
  @apply bg-green-100 text-green-800;
}

/* Loading states */
.loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hover effects for interactive elements */
.card-hover {
  @apply transition-all duration-200 ease-in-out;
}

.card-hover:hover {
  @apply shadow-lg transform -translate-y-1;
}

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

/* Button styles */
.btn-primary {
  @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors;
}

.btn-secondary {
  @apply bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors;
}

.btn-success {
  @apply bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors;
}

.btn-danger {
  @apply bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors;
}

/* Custom scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full;
}

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

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .grid-responsive {
    @apply grid-cols-1;
  }
  
  .text-responsive {
    @apply text-sm;
  }
  
  .p-responsive {
    @apply p-4;
  }
}

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

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Table styles for better data presentation */
.data-table {
  @apply w-full border-collapse;
}

.data-table th {
  @apply bg-gray-50 px-4 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b;
}

.data-table td {
  @apply px-4 py-3 text-sm text-gray-900 border-b border-gray-200;
}

.data-table tbody tr:hover {
  @apply bg-gray-50;
}

/* Dashboard cards */
.dashboard-card {
  @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition-shadow duration-200;
}

.dashboard-card:hover {
  @apply shadow-md;
}

.stat-number {
  @apply text-3xl font-bold text-gray-900;
}

.stat-label {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

/* Modal overlay improvements */
.modal-overlay {
  backdrop-filter: blur(4px);
}

/* Form validation states */
.form-error {
  @apply border-red-300 focus:border-red-500 focus:ring-red-500;
}

.form-success {
  @apply border-green-300 focus:border-green-500 focus:ring-green-500;
}

.error-message {
  @apply text-red-600 text-sm mt-1;
}

.success-message {
  @apply text-green-600 text-sm mt-1;
}

/* Loading skeleton */
.skeleton {
  @apply bg-gray-200 animate-pulse rounded;
}

.skeleton-text {
  @apply h-4 bg-gray-200 animate-pulse rounded;
}

.skeleton-avatar {
  @apply w-10 h-10 bg-gray-200 animate-pulse rounded-full;
}