/* menu.css */
/* Algemene menu styling, werkt voor zowel public als admin */
.menu-bar, .public-menu-bar, .admin-menu-bar {
    width: 100%;
    background: #223362;
    padding: 0;
    margin: 0 0 2em 0;
    border-bottom: 2px solid #ddd;
    font-family: 'Segoe UI', Arial, sans-serif;
    z-index: 11;
}
.admin-menu-bar { background: #a02a2a; border-bottom: 3px solid #c3c3c3; }
.menu-nav, .public-menu-nav, .admin-menu-nav {
    display: flex;
    gap: .7em;
    padding: 0.7em 1.5em 0.7em 1.5em;
    margin: 0;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}
.menu-nav li, .public-menu-nav li, .admin-menu-nav li {
    position: relative;
}
.menu-link, .public-menu-link, .admin-menu-link {
    display: flex;
    align-items: center;
    gap: .6em;
    text-decoration: none;
    font-size: 1.05em;
    font-weight: 500;
    color: #fff;
    padding: .5em 1.15em;
    border-radius: 2em;
    transition: background .17s, color .15s;
    cursor: pointer;
}
.menu-link:hover, .public-menu-link:hover {
    background: #31488b;
    color: #fff;
}
.admin-menu-link:hover {
    background: #d64a4a;
    color: #fff;
}
.menu-link .fa, .admin-menu-link .fa, .public-menu-link .fa {
    font-size: 1.2em;
    margin-right: .35em;
}

/* Actieve knop-kleur */
.menu-link.active, .public-menu-link.active {
    background: #fff;
    color: #233366;
}
.admin-menu-link.active {
    background: #fff;
    color: #b22b2b;
    border: 1px solid #caa;
}

/* Uitklap submenu */
.menu-nav li ul, .public-menu-nav li ul, .admin-menu-nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 110%;
    background: #31488b;
    padding: .5em 0;
    min-width: 190px;
    border-radius: .7em;
    box-shadow: 0 5px 18px #0003;
    z-index: 30;
}
.admin-menu-nav li ul { background: #c75151; }
.menu-nav li:hover > ul, .public-menu-nav li:hover > ul, .admin-menu-nav li:hover > ul {
    display: block;
}
.menu-nav li ul li, .admin-menu-nav li ul li {
    width: 100%;
}
.menu-nav li ul .menu-link, .admin-menu-nav li ul .admin-menu-link {
    border-radius: 0;
    background: none;
    color: #fff;
    padding: .6em 1.4em;
    font-weight: 400;
}
.menu-nav li ul .menu-link:hover, .admin-menu-nav li ul .admin-menu-link:hover {
    background: #4160c0;
    color: #fff;
}
.admin-menu-nav li ul .admin-menu-link:hover {
    background: #e57373;
}

/* Responsive */
@media (max-width: 700px) {
    .menu-nav, .admin-menu-nav, .public-menu-nav {
        flex-direction: column;
        padding: .5em 0;
    }
    .menu-link, .admin-menu-link, .public-menu-link {
        font-size: 1em;
        width: 100%;
        justify-content: flex-start;
    }
    .menu-bar, .admin-menu-bar, .public-menu-bar {
        padding: 0;
    }
}

/* Optioneel: badge/teller/icoon rechts in menu */
.menu-link .menu-badge,
.admin-menu-link .menu-badge {
    background: #eee;
    color: #31488b;
    border-radius: 1em;
    padding: 0 .6em;
    font-size: .95em;
    margin-left: .45em;
}
.admin-menu-link .menu-badge { background: #fff; color: #b22b2b; }