/* StreamProcessor Custom CSS Components */
/* Modern, reusable components for consistent styling across all templates */

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Solid Backgrounds */
.bg-gradient-primary {
    background: #667eea;
}

.bg-gradient-success {
    background: #4facfe;
}

.bg-gradient-warning {
    background: #fa709a;
}

.bg-gradient-danger {
    background: #ff6b6b;
}

.bg-gradient-info {
    background: #74b9ff;
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Smooth Transitions */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */

/* Enhanced Card */
.card-enhanced {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

.card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Status Cards */
.status-card {
    @apply p-6 rounded-xl border-l-4 transition-all duration-200 hover:shadow-md;
}

.status-card.active {
    @apply bg-green-50 border-green-500;
}

.status-card.inactive {
    @apply bg-red-50 border-red-500;
}

.status-card.pending {
    @apply bg-yellow-50 border-yellow-500;
}

.status-card.processing {
    @apply bg-blue-50 border-blue-500;
}

/* Info Cards */
.info-card {
    @apply bg-blue-50 border border-blue-200 rounded-lg p-4;
}

.warning-card {
    @apply bg-yellow-50 border border-yellow-200 rounded-lg p-4;
}

.success-card {
    @apply bg-green-50 border border-green-200 rounded-lg p-4;
}

.error-card {
    @apply bg-red-50 border border-red-200 rounded-lg p-4;
}

/* ==========================================================================
   FORM COMPONENTS
   ========================================================================== */

/* Enhanced Form Inputs */
.form-input-enhanced {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 sm:text-sm;
}

.form-input-enhanced:focus {
    @apply ring-2 ring-blue-500 border-blue-500 shadow-md;
    transform: translateY(-1px);
}

.form-input-enhanced:hover {
    @apply border-gray-400;
}

/* Input with Icon */
.input-group {
    @apply relative;
}

.input-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm pointer-events-none;
}

.input-with-icon {
    @apply pl-10;
}

/* Form Sections */
.form-section {
    @apply bg-gray-50 rounded-xl p-6 border border-gray-200;
}

.form-section-header {
    @apply text-lg font-semibold text-gray-900 mb-6 flex items-center;
}

/* ==========================================================================
   BUTTON COMPONENTS
   ========================================================================== */

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

.btn-enhanced:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-enhanced:active {
    transform: translateY(0);
}

/* Button Variants */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white focus:ring-green-500;
}

.btn-warning {
    @apply bg-yellow-600 hover:bg-yellow-700 text-white focus:ring-yellow-500;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
}

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

/* Icon Buttons */
.btn-icon {
    @apply p-3 rounded-lg transition-all duration-200 hover:shadow-md;
}

.btn-icon-sm {
    @apply p-2 rounded-md transition-all duration-200 hover:shadow-sm;
}

/* ==========================================================================
   BADGE COMPONENTS
   ========================================================================== */

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

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

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

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

.badge-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800 border border-gray-200;
}

/* Animated Badges */
.badge-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge-bounce {
    animation: bounce 1s infinite;
}

/* ==========================================================================
   NAVIGATION COMPONENTS
   ========================================================================== */

/* Enhanced Navigation */
.nav-item {
    @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200;
}

.nav-item:hover {
    @apply bg-gray-100 text-gray-900;
    transform: translateX(4px);
}

.nav-item.active {
    @apply bg-blue-100 text-blue-700 border-r-4 border-blue-500;
}

.nav-item.active:hover {
    @apply bg-blue-200;
}

/* ==========================================================================
   TABLE COMPONENTS
   ========================================================================== */

/* Enhanced Tables */
.table-enhanced {
    @apply min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden shadow-sm;
}

.table-enhanced thead {
    @apply bg-gradient-to-r from-gray-50 to-blue-50;
}

.table-enhanced th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider;
}

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

.table-enhanced tbody tr {
    @apply transition-colors duration-200 hover:bg-gray-50;
}

.table-enhanced tbody tr:nth-child(even) {
    @apply bg-gray-25;
}

/* ==========================================================================
   MODAL COMPONENTS
   ========================================================================== */

/* Modal Overlay */
.modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
    backdrop-filter: blur(4px);
}

/* Modal Content */
.modal-content {
    @apply relative top-20 mx-auto p-8 border w-11/12 max-w-md shadow-2xl rounded-xl bg-white;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   LOADING COMPONENTS
   ========================================================================== */

/* Loading Spinner */
.spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-blue-600 rounded-full;
    animation: spin 1s linear infinite;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-lg {
    @apply w-8 h-8;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Skeleton */
.skeleton {
    @apply bg-gray-200 rounded animate-pulse;
}

.skeleton-text {
    @apply h-4 bg-gray-200 rounded animate-pulse;
}

.skeleton-avatar {
    @apply w-10 h-10 bg-gray-200 rounded-full animate-pulse;
}

/* ==========================================================================
   ANIMATION UTILITIES
   ========================================================================== */

/* Fade Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}

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

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

/* Slide Animations */
.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scale Animations */
.scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/* Mobile-first responsive grid */
.grid-responsive {
    @apply grid grid-cols-1 gap-6;
}

@media (min-width: 640px) {
    .grid-responsive {
        @apply grid-cols-2;
    }
}

@media (min-width: 1024px) {
    .grid-responsive {
        @apply grid-cols-3;
    }
}

@media (min-width: 1280px) {
    .grid-responsive {
        @apply grid-cols-4;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .dark-mode-card {
        @apply bg-gray-800 border-gray-700 text-white;
    }
    
    .dark-mode-input {
        @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
    }
    
    .dark-mode-text {
        @apply text-gray-300;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Focus indicators */
.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .high-contrast {
        @apply border-2 border-black;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .respect-motion-preference {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .print-hidden {
        display: none !important;
    }
    
    .print-visible {
        display: block !important;
    }
    
    .card-enhanced {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}