/* === Core modern menu styles === */

.menuframe-modern {
    position: absolute;
    z-index: 190;

    right: var(--layout-gap);
    top: var(--layout-gap);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    width: 350px;
    max-width: 350px;

    padding: var(--layout-gap);
    gap: var(--layout-gap);

    background: var(--color-background-main);
    border-radius: calc(2 * var(--layout-border-radius));
    border: 1px solid var(--color-purple);

    /* initial hidden state */
    transform: translateY(-110%);
    transition: transform 0.7s ease;
}

.menuframe-modern.open
{
    transform: translateY(0);
}

/* Individual menu items */
.menutabs_modern
{
    display: flex;
    align-items: center;
    padding-left: calc(0.5 * var(--layout-gap));
    gap: calc(1.5 * var(--layout-gap));

    height: var(--layout-menu-height);

    cursor: pointer;
    border-radius: var(--layout-border-radius);
    transition: background 0.25s ease;
}
.menutabs_modern:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;

    cursor: pointer;
}

.menutabs_modern.hover_190studios:hover { background: color-mix(in srgb, var(--color-purple) 15%, transparent); }
.menutabs_modern.hover_RPfMVR:hover { background: color-mix(in srgb, var(--color-assets-RoadPresetsMVR4) 15%, transparent); }
.menutabs_modern.hover_DR:hover { background: color-mix(in srgb, var(--color-assets-DynamicRoads1) 15%, transparent); }
.menutabs_modern.hover_DT:hover { background: color-mix(in srgb, var(--color-assets-DynamicTraffic1) 15%, transparent); }

.menutabs_modern.background_RPfMVR { background: color-mix(in srgb, var(--color-assets-RoadPresetsMVR4) 15%, transparent); }
.menutabs_modern.background_DR { background: color-mix(in srgb, var(--color-assets-DynamicRoads1) 15%, transparent); }
.menutabs_modern.background_DT { background: color-mix(in srgb, var(--color-assets-DynamicTraffic1) 15%, transparent); }

/* Company / header row - usually a bit bigger */
.menutabs_modern.company 
{
    height: var(--layout-menu-height);
    justify-content: space-between;
    padding: 0px var(--layout-gap);
}

.menutabs_modern_label
{
    width: 100%;
}

/* Dropdown arrow container */
.menutabs_modern_dropdown 
{
    aspect-ratio: 1 / 1;
    width: 2.4em;
    border-radius: calc(2 * var(--layout-border-radius));
    background: var(--gradient-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}
.background_RPfMVR > .menutabs_modern_dropdown.RPfMVR 
{
    border: 1px solid var(--color-assets-RoadPresetsMVR4);
    background: var(--color-assets-RoadPresetsMVR4);
}
.background_DR > .menutabs_modern_dropdown.DR 
{
    border: 1px solid var(--color-assets-DynamicRoads1);
    background: var(--color-assets-DynamicRoads1);
}
.background_DT > .menutabs_modern_dropdown.DT 
{
    border: 1px solid var(--color-assets-DynamicTraffic1);
    background: var(--color-assets-DynamicTraffic1);
}


/* Collapsible section */
.menutabs_modern_collection 
{
    display: flex;
    flex-direction: column;
    gap: var(--layout-padding);

    padding-left: calc(2 * var(--layout-gap));

    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
    height: auto;
    transition: all 0.5s ease;
}

.menutabs_modern_collection.collapsed 
{
    transform: scaleY(0);
    opacity: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Close button rotation */
#menuCloseButton 
{
    transition: transform 0.4s ease;
}

#menuCloseButton:hover 
{
    transform: rotate(180deg);
}

/* Optional — nice touch for icons */
.menu_icon 
{
    height: 85%;
    width: auto;
    flex-shrink: 0;
}

/* menupanel */
.menupanel
{
    position: fixed;

    left: 10%;
    width: 80%;
    height: 300px;
    min-height: 20%;

    border: 1px solid var(--color-assets-DynamicTraffic1);
    border-top: none;

    border-radius: 0 0 calc(4 * var(--layout-border-radius)) calc(4 * var(--layout-border-radius));
    background: var(--gradient-menupanel);

    display: flex;
    grid-template-columns: 4fr 1fr;

    gap: calc(2 * var(--layout-gap));
    padding: calc(var(--layout-gap) * 2);

    z-index: 9999;
}

.menupanel-group
{
    height: fit-content;
    width: 400px;

    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

.menupanel-entry
{
    display: flex;
    align-items: center;

    width: calc(100% - 2 * var(--layout-padding));
    height: 40px;

    gap: var(--layout-gap);
    padding: var(--layout-padding);
}
.menupanel-entry:hover
{
    background: color-mix(in srgb, var(--color-assets-DynamicTraffic1), transparent 80%);

    border-radius: calc(var(--layout-border-radius) * 2);
}

.menupanel-entry-icon
{
    padding: calc(1.5 * var(--layout-padding));

    height: calc(100% - 3 * var(--layout-padding));
    aspect-ratio: 1/1;

    background: var(--color-assets-DynamicTraffic1);
    border-radius: calc(1.5 * var(--layout-border-radius));
}

.menupanel-entry-labels
{
    display: flex;
    flex-direction: column;

    width: 100%;
    height: fit-content;

    gap: var(--layout-padding);
}