/* Extra small devices */
@media (min-width: 475px) {
    .xs\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Animation styles */
ul[id$="Dropdown"] {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.rotate-180 {
    transform: rotate(180deg);
}

.animate-spin {
    animation: spin 1s linear infinite;
}

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

/* Sidebar transition */
#sidebar {
    transition: transform 0.3s ease-out;
}

#sidebarOverlay {
    transition: opacity 0.3s ease-out;
}

#mainContent {
    transition: margin-left 0.3s ease-out;
}

.content {
    min-height: 475px;
}