/* Base styles for Scarab - intended to cascade globally */

/* 
   Note: Most styling is handled by Tailwind utility classes. 
   Use this file for custom variables, font imports, or global overrides 
   that cannot be easily handled by utility classes.
*/

@layer utilities {
    /* Example custom utility if needed later */
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Group selector dropdown styling */
.group-selector {
    position: relative;
}

.group-selector #group-selector-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

/* Smooth rotation for dropdown arrow */
.group-selector.open #group-selector-arrow {
    transform: rotate(180deg);
}

/* Mobile menu animations */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

#mobile-menu.hidden {
    animation: slideUp 0.2s ease-in;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Smooth icon transitions */
#menu-icon,
#close-icon {
    transition: all 0.2s ease-in-out;
}