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

@layer components {
    /* Sidebar responsive styles */
    @media (min-width: 1024px) {
        aside {
            display: block !important;
        }
    }

    /* Smooth transitions */
    aside {
        transition: transform 0.3s ease-in-out;
    }

    /* Custom scrollbar for sidebar */
    aside nav::-webkit-scrollbar {
        width: 6px;
    }

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

    aside nav::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

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