/* ─── Three-level dropdown nesting (Menu v3) ───────────────────────────────
   Add alongside your existing dropdown CSS. These style the new subgroup level;
   the section level reuses your existing .dropdown-group / .dropdown-group-toggle
   / .dropdown-group-items rules, so sections look like today's groups. */

/* Subgroup: second level inside a section's items container */
.dropdown-subgroup {
    margin: 2px 0;
}

.dropdown-subgroup-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 6px 12px 6px 24px;   /* indented under the section */
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-secondary, #555);
    text-align: left;
}

.dropdown-subgroup-toggle:hover {
    background: var(--hover-bg, rgba(0,0,0,0.04));
}

.dropdown-subgroup-label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Subgroup chevron rotates when expanded */
.dropdown-subgroup-toggle .dropdown-chevron {
    transition: transform 0.15s ease;
}
.dropdown-subgroup.expanded > .dropdown-subgroup-toggle .dropdown-chevron {
    transform: rotate(180deg);
}

/* Subgroup items: hidden until the subgroup is expanded */
.dropdown-subgroup-items {
    display: none;
    flex-direction: column;
}
.dropdown-subgroup.expanded > .dropdown-subgroup-items {
    display: flex;
}

/* Leaf links inside a subgroup get an extra indent so the 3 levels read clearly */
.dropdown-subgroup-items .dropdown-link {
    padding-left: 40px;
}

/* The section region itself reuses .dropdown-group; if you want sections to look
   visually distinct from legacy module groups, you can target .dropdown-section: */
.dropdown-section > .dropdown-group-toggle .dropdown-group-label {
    font-weight: 700;
}