/* Custom styles to complement Tailwind CSS */
/* Only add styles that extend or customize Tailwind */

/* Custom CSS Variables */
:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-success: #059669;
    --color-error: #dc2626;
    --color-warning: #d97706;
    --color-info: #0891b2;
}

/* Custom component classes using Tailwind utilities */
.btn-loading {
    @apply opacity-60 pointer-events-none;
}

/* Enhanced focus states for better accessibility */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-input-error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

/* Custom animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
}

/* Status indicators */
.status-online {
    @apply bg-green-500;
}

.status-offline {
    @apply bg-red-500;
}

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

/* Custom scrollbar for webkit browsers */
.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;
}

/* Loading spinner that works with Tailwind */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-200 border-t-blue-600 rounded-full animate-spin;
}

/* Toast notification base styles */
.toast {
    @apply fixed top-4 right-4 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 z-50;
}

.toast-enter {
    @apply transform translate-x-full opacity-0;
}

.toast-enter-active {
    @apply transform translate-x-0 opacity-100 transition duration-300 ease-out;
}

.toast-exit {
    @apply transform translate-x-0 opacity-100;
}

.toast-exit-active {
    @apply transform translate-x-full opacity-0 transition duration-300 ease-in;
}

/* Form validation error styles */
.field-error {
    @apply text-red-600 text-sm mt-1;
}

.field-error::before {
    content: '⚠ ';
}

/* Dropdown animation */
.dropdown-enter {
    @apply opacity-0 scale-95;
}

.dropdown-enter-active {
    @apply opacity-100 scale-100 transition duration-100 ease-out;
}

.dropdown-exit {
    @apply opacity-100 scale-100;
}

.dropdown-exit-active {
    @apply opacity-0 scale-95 transition duration-75 ease-in;
}

/* Custom card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

/* Gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.gradient-success {
    background: linear-gradient(135deg, #059669, #047857);
}

.gradient-warning {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* Custom utilities that extend Tailwind */
.text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-input {
        @apply border-2 border-gray-600;
    }
    
    .btn-primary {
        @apply ring-2 ring-white;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-spin {
        animation: none;
    }
    
    .animate-pulse {
        animation: none;
    }
    
    .transition-all {
        transition: none !important;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    .toast {
        @apply left-4 right-4 max-w-none;
    }
}

/* Specific component overrides for better UX */
.lucide {
    @apply inline-block;
}

/* Ensure icons render consistently */
i[data-lucide] {
    @apply inline-block flex-shrink-0;
}

/* Custom component for consistent card styling */
.card-base {
    @apply bg-white shadow-sm border border-gray-200 rounded-lg;
}

/* Interactive elements */
.interactive {
    @apply transition-colors duration-200 cursor-pointer;
}

.interactive:hover {
    @apply bg-gray-50;
}

.interactive:active {
    @apply bg-gray-100;
}