/* Universal Content Transformer - Custom CSS
   Enterprise-grade styling for Tailwind CSS enhancement */

/* Custom Properties (CSS Variables) */
:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    --shadow-enterprise: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Dark mode variables */
.dark {
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
}

/* Enhanced animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Enterprise component classes */
.card-enterprise {
    @apply bg-white rounded-lg shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-xl hover:border-primary-300;
}

.btn-enterprise {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-enterprise-primary {
    @apply btn-enterprise bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 focus:ring-primary-500;
}

.btn-enterprise-secondary {
    @apply btn-enterprise bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-primary-500;
}

.input-enterprise {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
}

.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Enhanced loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

.loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
}

/* File upload enhancements */
.upload-zone {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-300;
}

.upload-zone.drag-active {
    @apply border-primary-500 bg-primary-50 transform scale-102;
}

.upload-zone:hover {
    @apply border-primary-400 bg-gray-50;
}

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

.progress-fill {
    @apply h-full bg-gradient-to-r from-primary-500 to-primary-600 transition-all duration-300 ease-out;
}

/* Status indicators */
.status-success {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-error {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.status-warning {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

.status-info {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

/* Dashboard charts and metrics */
.metric-card {
    @apply card-enterprise p-6;
}

.metric-value {
    @apply text-3xl font-bold text-gray-900;
}

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

.metric-change-positive {
    @apply text-green-600 bg-green-100 px-2 py-1 rounded-full text-xs font-medium;
}

.metric-change-negative {
    @apply text-red-600 bg-red-100 px-2 py-1 rounded-full text-xs font-medium;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-stack {
        @apply flex-col space-y-4 space-x-0;
    }
}

/* Animation utilities */
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

/* Focus enhancements */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

/* Dark mode specific styles */
.dark .card-enterprise {
    @apply bg-gray-800 border-gray-700;
}

.dark .input-enterprise {
    @apply bg-gray-800 border-gray-700 text-white placeholder-gray-400;
}

.dark .btn-enterprise-secondary {
    @apply bg-gray-800 text-gray-300 border-gray-700 hover:bg-gray-700;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

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

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-enterprise {
        border-width: 2px;
    }
    
    .card-enterprise {
        border-width: 2px;
    }
}

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

.table-enterprise thead {
    @apply bg-gray-50;
}

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

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

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

/* Custom form styles */
.form-group {
    @apply space-y-2;
}

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

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

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