/* Snowpack-specific overrides for annual-apps-layout.css */
/* This ensures all dropdowns created by JavaScript are properly laid out */

/* Ensure all direct children of dropDownContainer are styled consistently */
/* Exclude unitSelectContainer since it has its own wrapper */
#dropDownContainer > *:not(#unitSelectContainer) {
    margin-bottom: 0.75rem;
}

#dropDownContainer > *:last-child {
    margin-bottom: 0;
}

/* Fix for dynamically created dropdowns that might not have proper classes */
#dropDownContainer select,
#dropDownContainer .form-select {
    width: 100%;
}

/* Ensure labels and selects stack properly */
#dropDownContainer label {
    display: block;
    margin-bottom: 0.25rem;
}

/* Override grid-template-areas for Snowpack's dropdown structure */
@media (min-width: 1501px) {
    #select-card.layout-stacked #dropDownContainer {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
        grid-template-areas:
            "var-menu-label"
            "var-menu"
            "temp-menu-label"
            "temp-menu"
            "elem-menu-label"
            "elem-menu"
            "gcm-menu-label"
            "gcm-menu"
            "unit-menu-label"
            "unit-menu" !important;
    }
}

/* Snowpack - Align Virtual Select with Choices.js dropdowns */
/* Now that the structure matches, we just need height/styling alignment */

/* Ensure Virtual Select input has same height as Choices.js */
.vscomp-toggle-button {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Match the display style */
.vscomp-ele {
    display: block !important;
}

/* Ensure label matches other labels */
#unit-menu-label {
    margin-bottom: 0.25rem !important;
}

/* Ensure container doesn't add extra spacing */
#unitSelectContainer {
    margin: 0 !important;
    padding: 0 !important;
}