html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

main {
    flex: 1 0 auto;
    padding: 20px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #003366;
    color: white;
    padding: 10px 20px;

    .left h1 {
        margin: 0;
        font-size: 24px;
    }

    .right {
        position: relative;
    }

    .user-dropdown {
        position: relative;

        .user-toggle {
            cursor: pointer;
            position: relative;
            padding: 5px 10px;
            display: inline-block;
            color: #ffcc00;
   
        }
        .user-toggle:hover .user-menu {
            display: block;
        }

        .user-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: #ffffff;
            border: 1px solid #ccc;
            padding: 5px 0;
            list-style: none;
            margin: 0;
            min-width: 150px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
            z-index: 999;

            li {
                padding: 0;
                margin: 0;
            }

            a {
                display: block;
                padding: 8px 15px;
                color: #003366;
                text-decoration: none;
            }

            a:hover {
                background-color: #f4f4f4;
            }
        }
    }
    .user-button {
        a {
            display: block;
            padding: 8px 15px;
            color: #ffffff;
            text-decoration: none;
        }
        a:hover {
            color: #003366;
            background-color: #f4f4f4;
        }
    }
}

.menu-container {
    background: #f4f4f4;
    padding: 10px 20px;
    margin: 0px;

    .menu {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .menu li {
        position: relative;
    }
    .menu li:hover {
        cursor: pointer;
    }

    /* hoofdmenu */
    .menu.level-0 > li {
        display: inline-block;
        margin-right: 20px;
    }

    .menu.level-0 > li > a,
    .menu.level-0 > li > span {
        font-weight: bold;
        color: #003366;
        text-decoration: none;
        padding: 10px;
        display: block;
    }

    .menu.level-0 > li:hover > a,
    .menu.level-0 > li:hover > span {
        background-color: #e0e0e0;
    }

    /* submenu standaard verbergen */
    .menu.level-1,
    .menu.level-2 {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        min-width: 160px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1000;
    }

    /* submenu tonen bij hover */
    .menu.level-0 > li:hover > .menu,
    .menu.level-1 > li:hover > .menu {
        display: block;
    }

    /* submenu-items */
    .menu.level-1 li,
    .menu.level-2 li {
        display: block;
    }

    .menu.level-1 a,
    .menu.level-2 a {
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
    }

    .menu.level-1 a:hover,
    .menu.level-2 a:hover {
        background-color: #f2f2f2;
    }

    /* voor submenu naar rechts (3e niveau) */
    .menu.level-2 {
        top: 0;
        left: 100%;
    }
}

.site-footer {
    flex-shrink: 0;
    background-color: #003366;
    color: white;
    padding: 15px 20px;
    font-size: 14px;

    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    a {
        color: #ffcc00;
        text-decoration: none;
        margin-left: 10px;
    }

    a:hover {
        text-decoration: underline;
    }

}

.profile-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
}

.profile-table th, .profile-table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.profile-table th {
    background-color: #f4f4f4;
    width: 200px;
}

.profile-table + h3 {
    margin-top: 40px;
}