/* Custom styles to enhance the Tailwind base */

/* Add subtle scrollbar styling */
body::-webkit-scrollbar {
    width: 8px;
}

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

body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Smooth transitions for elements */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Enhance focus states for accessibility */
:focus-visible {
    outline: 2px solid #3b82f6; /* Tailwind's blue-500 */
    outline-offset: 2px;
}

/* Style for the drag-and-drop area */
#dropzone {
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#dropzone.dragover {
    border-color: #3b82f6; /* Tailwind's blue-500 */
    background-color: #eff6ff; /* Tailwind's blue-50 */
}

/* Responsive adjustments for specific elements if needed */
@media (max-width: 768px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}