/* Telegram Auto-Sender Dashboard Custom Styles */

/* Loading animations */
.loading-spinner {
  @apply inline-block w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin;
}

.loading-pulse {
  @apply animate-pulse bg-gray-200 rounded;
}

/* Custom button styles */
.btn-telegram {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.btn-telegram:disabled {
  @apply bg-gray-400 cursor-not-allowed;
}

.btn-success {
  @apply bg-green-500 hover:bg-green-600 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200;
}

.btn-warning {
  @apply bg-yellow-500 hover:bg-yellow-600 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200;
}

/* Status indicators */
.status-active {
  @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-inactive {
  @apply bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-error {
  @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-warning {
  @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium;
}

/* Alert styles */
.alert-critical {
  @apply bg-red-50 border-l-4 border-red-400 p-4 my-2;
}

.alert-high {
  @apply bg-orange-50 border-l-4 border-orange-400 p-4 my-2;
}

.alert-medium {
  @apply bg-yellow-50 border-l-4 border-yellow-400 p-4 my-2;
}

.alert-low {
  @apply bg-blue-50 border-l-4 border-blue-400 p-4 my-2;
}

/* Card components */
.card {
  @apply bg-white shadow rounded-lg 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;
}

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

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

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

.form-checkbox {
  @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
}

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

.form-help {
  @apply text-xs text-gray-500 mt-1;
}

.form-error {
  @apply text-xs text-red-600 mt-1;
}

/* Table styles */
.table {
  @apply min-w-full divide-y divide-gray-200;
}

.table-header {
  @apply bg-gray-50;
}

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

.table-body {
  @apply bg-white divide-y divide-gray-200;
}

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

/* Responsive utilities */
.responsive-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.responsive-stack {
  @apply space-y-4 md:space-y-0 md:space-x-4 md:flex md:items-center;
}

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Health score styling */
.health-score-excellent {
  @apply text-green-600 font-bold;
}

.health-score-good {
  @apply text-yellow-600 font-bold;
}

.health-score-poor {
  @apply text-red-600 font-bold;
}

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

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

.progress-success {
  @apply bg-green-500;
}

.progress-warning {
  @apply bg-yellow-500;
}

.progress-danger {
  @apply bg-red-500;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

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

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

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

/* Code blocks */
.code-block {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm font-mono;
}

/* Tooltips */
.tooltip {
  @apply relative inline-block;
}

.tooltip .tooltip-text {
  @apply invisible absolute z-10 w-32 bg-gray-900 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 transform -translate-x-1/2 -translate-y-1 opacity-0 transition-opacity;
}

.tooltip:hover .tooltip-text {
  @apply visible opacity-100;
}

/* Dark mode utilities */
@media (prefers-color-scheme: dark) {
  .dark-mode-auto {
    @apply bg-gray-900 text-white;
  }
}

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