/* Since the original file was the full Tailwind build (over 1000 lines),
   I've included the necessary Tailwind directives and key custom styles 
   needed for the new features. 
   
   If you have a build process, use your 'input.css'. 
   If not, appending this to your existing style.css is the safest bet to avoid losing standard classes.
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 20px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Modal Backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* Dropdown Content Helper */
.dropdown-menu {
    transform-origin: top right;
}

/* Ensure body doesn't scroll when modal is open */
body.overflow-hidden {
    overflow: hidden !important;
}