/* Custom styles to complement Tailwind CSS */

/* Tab button styling */
.tab-btn {
    transition: all 0.2s ease-in-out;
}

.tab-btn.active {
    background-color: #2563EB;
    color: white;
}

.tab-btn:not(.active) {
    color: #334155;
}

.tab-btn:not(.active):hover {
    background-color: #F1F5F9;
}

/* Custom scrollbar for the JSON preview */
#jsonPreview::-webkit-scrollbar {
    width: 8px;
}

#jsonPreview::-webkit-scrollbar-track {
    background: #E2E8F0;
    border-radius: 4px;
}

#jsonPreview::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

#jsonPreview::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Enhanced focus states for better accessibility */
input:focus, textarea:focus, select:focus {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

/* Smooth transitions for chip interactions */
[id*="Chips"] div {
    transition: all 0.2s ease-in-out;
}

/* Hover effects for preset buttons */
.preset-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced button interactions */
button:active {
    transform: translateY(0);
}

/* Custom animation for notifications */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Ensure proper spacing for mobile */
@media (max-width: 768px) {
    .max-w-7xl {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .grid-cols-1.lg\:grid-cols-2 {
        gap: 1.5rem;
    }
}

/* Sticky positioning adjustments */
@media (min-width: 1024px) {
    .lg\:sticky {
        position: sticky;
        top: 6rem; /* 96px - adjusted for header height */
    }
}

/* Smooth scrolling for the page */
html {
    scroll-behavior: smooth;
}

/* Enhanced card shadows on hover */
.bg-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease-in-out;
}

/* Focus ring for better keyboard navigation */
button:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

/* Custom styling for disabled buttons */
button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Enhanced chip hover states */
[id*="Chips"] div:hover {
    transform: scale(1.05);
}

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}