/* Surcharges du menu latéral :
 * - rendre le sidebar scrollable verticalement
 * - compacter la hauteur des items pour limiter le débordement
 */

aside.is-placed-left .menu.is-menu-main {
    overflow-y: auto;
    max-height: calc(100vh - 3.25rem);
}

.aside .menu-list li ul li a {
    padding: 0.35rem 0 0.35rem 0.75rem;
}

.aside .menu-label {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* Contraste : les défauts Bulma (#727c8f sur #2e323a ≈ 3:1 ; #666f81 sur
 * #2e323a ≈ 2.4:1) sont sous le seuil WCAG AA. On éclaircit liens et
 * libellés pour repasser au-dessus de 4.5:1. */
.aside .menu-list a {
    color: #c6cbd6;
}

.aside .menu-label {
    color: #aab1c2;
}

/* Items <button class="dropdown-item"> : neutralise les défauts natifs du
 * <button> (fond gris, bordure) et harmonise hover / item actif avec le
 * reste de l'app (Bulma met du bleu vif sur .is-active, trop tranchant ici).
 */
button.dropdown-item {
    background: transparent;
    border: none;
    cursor: pointer;
}

button.dropdown-item.is-active {
    background-color: whitesmoke;
    color: inherit;
}

button.dropdown-item:hover {
    background-color: #fafafa;
    color: inherit;
}

/* Sections repliables (<details>/<summary>) : harmoniser avec les autres
 * menu-label et rendre le summary cliquable de façon visible. */
.aside .menu-foldable {
    margin: 0;
}

.aside .menu-foldable > summary.menu-label--foldable {
    cursor: pointer;
    list-style: revert;
    padding-left: 0.25rem;
}

.aside .menu-foldable > summary.menu-label--foldable::-webkit-details-marker {
    color: #aab1c2;
}

.aside .menu-foldable[open] > summary.menu-label--foldable {
    color: #ffffff;
}

/* Ouverture du menu latéral en mobile (< 1024px).
 * Le template JustBoil attendait que son JS pose has-aside-mobile-expanded
 * sur <html> ; ici c'est Elm qui la pose sur le conteneur racine. Règles
 * miroir de bulma.0.9.min.css — le préfixe html.has-aside-mobile-transition
 * sert à dépasser la spécificité de la règle `left: -15rem` du template. */
@media screen and (max-width: 1023px) {
    html.has-aside-mobile-transition .has-aside-mobile-expanded aside.aside {
        left: 0;
    }

    .has-aside-mobile-expanded #app,
    .has-aside-mobile-expanded nav.navbar {
        margin-left: 15rem;
    }
}
