/* CHAT247 Custom Styles */

/* Logo styling */
.chat247-logo {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 2rem;
}

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

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

/* Button gradients */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(245, 87, 108, 0.3);
}

/* Status badges */
.status-new { @apply bg-blue-100 text-blue-800 border border-blue-200; }
.status-contacted { @apply bg-yellow-100 text-yellow-800 border border-yellow-200; }
.status-in_progress { @apply bg-orange-100 text-orange-800 border border-orange-200; }
.status-converted { @apply bg-green-100 text-green-800 border border-green-200; }
.status-closed { @apply bg-gray-100 text-gray-800 border border-gray-200; }

/* Priority badges */
.priority-low { @apply bg-gray-100 text-gray-600 border border-gray-200; }
.priority-medium { @apply bg-blue-100 text-blue-600 border border-blue-200; }
.priority-high { @apply bg-orange-100 text-orange-600 border border-orange-200; }
.priority-urgent { @apply bg-red-100 text-red-600 border border-red-200; }

/* Animation classes */
.fadeIn {
  animation: fadeIn 0.5s ease-in;
}

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

.slideDown {
  animation: slideDown 0.3s ease-out;
}

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

/* Loading spinner */
.spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Form improvements */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .chat247-logo {
    font-size: 1.5rem;
  }
  
  .mobile-stack {
    flex-direction: column;
  }
  
  .mobile-full {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* Dashboard specific styles */
.stat-card {
  @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200;
  transition: all 0.3s ease;
}

.stat-card:hover {
  @apply shadow-md border-blue-200;
  transform: translateY(-1px);
}

.chart-container {
  @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200;
  min-height: 400px;
}

/* Table improvements */
.table-container {
  @apply overflow-x-auto bg-white rounded-lg shadow-sm border border-gray-200;
}

.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table th {
  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

/* Modal styles */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-screen overflow-y-auto;
}

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

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

.modal-footer {
  @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-3;
}