/* magic-bubbles Custom Color Variables and Styles */

:root {
  /* magic-bubbles Brand Colors */
  --magic-bubbles-primary: #3b82f6;
  --magic-bubbles-primary-hover: #2563eb;
  --magic-bubbles-primary-light: #dbeafe;
  --magic-bubbles-primary-dark: #1d4ed8;
  
  --magic-bubbles-secondary: #0ea5e9;
  --magic-bubbles-secondary-hover: #0284c7;
  --magic-bubbles-secondary-light: #bae6fd;
  --magic-bubbles-secondary-dark: #0369a1;
  
  /* Status Colors */
  --magic-bubbles-success: #22c55e;
  --magic-bubbles-success-light: #dcfce7;
  --magic-bubbles-warning: #f59e0b;
  --magic-bubbles-warning-light: #fef3c7;
  --magic-bubbles-danger: #ef4444;
  --magic-bubbles-danger-light: #fee2e2;
  /* Distinct Info Color */
  --magic-bubbles-info: #06b6d4; /* cyan-500 */
  --magic-bubbles-info-light: #cffafe; /* cyan-100 */
  
  /* Neutral Colors */
  --magic-bubbles-gray-50: #f9fafb;
  --magic-bubbles-gray-100: #f3f4f6;
  --magic-bubbles-gray-200: #e5e7eb;
  --magic-bubbles-gray-300: #d1d5db;
  --magic-bubbles-gray-400: #9ca3af;
  --magic-bubbles-gray-500: #6b7280;
  --magic-bubbles-gray-600: #4b5563;
  --magic-bubbles-gray-700: #374151;
  --magic-bubbles-gray-800: #1f2937;
  --magic-bubbles-gray-900: #111827;
  
  /* TailAdmin Specific Colors */
  --stroke: #e2e8f0;
  --body-color: #64748b;
  --form-input: #1a202c;

}

/* Custom magic-bubbles Components */

/* Primary Button Styles */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-200;
  @apply hover:bg-primary-600 focus:ring-4 focus:ring-primary-200 focus:outline-none;
  @apply active:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
  @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-200;
  @apply hover:bg-secondary-600 focus:ring-4 focus:ring-secondary-200 focus:outline-none;
  @apply active:bg-secondary-700 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-outline {
  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium transition-all duration-200;
  @apply hover:bg-primary hover:text-white focus:ring-4 focus:ring-primary-200 focus:outline-none;
  @apply active:bg-primary-700 active:border-primary-700 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Form Input Styles */
.form-input {
  @apply w-full rounded-lg border border-stroke bg-transparent py-4 px-6 text-black outline-none;
  @apply focus:border-primary focus-visible:shadow-none transition-colors duration-200;
  @apply placeholder:text-body-color disabled:bg-gray-100 disabled:cursor-not-allowed;
}

.form-input-icon {
  @apply w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none;
  @apply focus:border-primary focus-visible:shadow-none transition-colors duration-200;
  @apply placeholder:text-body-color disabled:bg-gray-100 disabled:cursor-not-allowed;
}

.form-label {
  @apply mb-2.5 block font-medium text-black;
}

/* Card Styles */
.card {
  @apply rounded-sm border border-stroke bg-white shadow-default;
}

.card-header {
  @apply border-b border-stroke px-6 py-4;
}

.card-body {
  @apply p-6;
}

/* Status Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-success-100 text-success-800;
}

.badge-warning {
  @apply bg-warning-100 text-warning-800;
}

.badge-danger {
  @apply bg-danger-100 text-danger-800;
}

.badge-primary {
  @apply bg-primary-100 text-primary-800;
}

/* Alert Styles */
.alert {
  @apply p-4 rounded-lg border-l-4;
}

.alert-success {
  @apply bg-success-50 border-success-400 text-success-700;
}

.alert-warning {
  @apply bg-warning-50 border-warning-400 text-warning-700;
}

.alert-danger {
  @apply bg-danger-50 border-danger-400 text-danger-700;
}

.alert-info {
  @apply bg-primary-50 border-primary-400 text-primary-700;
}

/* Table Styles */
.table {
  @apply w-full text-sm text-left text-gray-500;
}

.table-header {
  @apply text-xs text-gray-700 uppercase bg-gray-50 border-b border-stroke;
}

.table-row {
  @apply bg-white border-b border-stroke hover:bg-gray-50 transition-colors duration-150;
}

.table-cell {
  @apply px-6 py-4;
}

/* Navigation Styles */
.nav-link {
  @apply block px-4 py-2 text-gray-700 rounded-lg transition-colors duration-200;
  @apply hover:bg-gray-100 hover:text-primary focus:bg-gray-100 focus:text-primary;
}

.nav-link-active {
  @apply bg-primary text-white;
  @apply hover:bg-primary-600 focus:bg-primary-600;
}

/* Utility Classes */
.text-primary {
  color: var(--magic-bubbles-primary);
}

.text-secondary {
  color: var(--magic-bubbles-secondary);
}

.text-success {
  color: var(--magic-bubbles-success);
}

.text-danger {
  color: var(--magic-bubbles-danger);
}

.text-warning {
  color: var(--magic-bubbles-warning);
}

.text-info {
  color: var(--magic-bubbles-info);
}

.bg-primary {
  background-color: var(--magic-bubbles-primary);
}

.bg-secondary {
  background-color: var(--magic-bubbles-secondary);
}

.bg-danger {
  background-color: var(--magic-bubbles-danger);
}

.bg-success {
  background-color: var(--magic-bubbles-success);
}

.bg-warning {
  background-color: var(--magic-bubbles-warning);
}

.bg-info {
  background-color: var(--magic-bubbles-info);
}

.border-primary {
  border-color: var(--magic-bubbles-primary);
}

.border-secondary {
  border-color: var(--magic-bubbles-secondary);
}

.border-danger {
  border-color: var(--magic-bubbles-danger);
}

.border-success {
  border-color: var(--magic-bubbles-success);
}

.border-warning {
  border-color: var(--magic-bubbles-warning);
}

.border-info {
  border-color: var(--magic-bubbles-info);
}

/* Hover utilities matching Tailwind-like class names used in views */
.hover\:text-danger:hover {
  color: var(--magic-bubbles-danger);
}

.hover\:text-primary:hover { 
  color: var(--magic-bubbles-primary); 
}

.hover\:text-secondary:hover { 
  color: var(--magic-bubbles-secondary); 
}

.hover\:text-success:hover { 
  color: var(--magic-bubbles-success); 
}

.hover\:text-warning:hover { 
  color: var(--magic-bubbles-warning); 
}

.hover\:text-info:hover { 
  color: var(--magic-bubbles-info); 
}

.hover\:bg-primary:hover { 
  background-color: var(--magic-bubbles-primary); 
}

.hover\:bg-secondary:hover { 
  background-color: var(--magic-bubbles-secondary); 
}

.hover\:bg-success:hover { 
  background-color: var(--magic-bubbles-success); 
}

.hover\:bg-warning:hover { 
  background-color: var(--magic-bubbles-warning); 
}

.hover\:bg-danger:hover { 
  background-color: var(--magic-bubbles-danger); 
}

.hover\:bg-info:hover { 
  background-color: var(--magic-bubbles-info); 
}

.hover\:border-primary:hover { 
  border-color: var(--magic-bubbles-primary); 
}

.hover\:border-secondary:hover { 
  border-color: var(--magic-bubbles-secondary); 
}

.hover\:border-success:hover { 
  border-color: var(--magic-bubbles-success); 
}

.hover\:border-warning:hover { 
  border-color: var(--magic-bubbles-warning); 
}

.hover\:border-danger:hover { 
  border-color: var(--magic-bubbles-danger); 
}

.hover\:border-info:hover { 
  border-color: var(--magic-bubbles-info); 
}

/* Custom Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

@media (min-width: 1280px) {
  .xl-only {
    display: block;
  }
}

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