/* =========================
   Basis
   ========================= */

body {
    font-family: Arial, sans-serif;
    background: #fafafa;
    margin: 0;
    padding: 0 1rem;
}

h2 {
    font-size: 1.4rem;
    margin-top: 0.3rem;
}

main,
.app-content {
    max-width: 1400px;
    margin: 2rem auto;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* =========================
   Formulieren & inputs
   ========================= */

.form, .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
    align-items: center;
}

input, select, button {
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background: #0077cc;
    color: white;
    cursor: pointer;
    border: none;
}

button:hover {
    background: #005fa3;
}

a.button-secondary {
    background: #ddd;
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

a.button-secondary:hover {
    background: #bbb;
}

/* =========================
   Tabellen
   ========================= */

.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: #fff;
}

th, td {
    border: 1px solid #ddd;
    padding: .6rem;
    text-align: center;
    vertical-align: middle;
}

table td a {
    margin-right: 0.5rem;
    color: #0078d7;
    text-decoration: none;
}

table td a:hover {
    text-decoration: underline;
}

/* Tabellen op mobiel scrollbaar */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* =========================
   Session warning
   ========================= */

.warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.warning a {
    color: #004085;
    text-decoration: underline;
}

/* =========================
   Header / Layout
   ========================= */

.app-header {
    padding: 1rem;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
}

.app-header h1 {
    margin: 0;
}

/* =========================
   Multi-level dropdown menu
   - menu gecentreerd
   ========================= */

.main-nav {
    background: #0077cc;
    padding: 0.5rem 1rem;
}

/* Center container */
.main-nav .menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;              /* voorkomt “onzichtbaar” bij te brede menu’s */
    justify-content: center;      /* ✅ totaal menu centreren */
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto;              /* ✅ center */
    padding: 0;
    max-width: 1400px;           /* match main */
}

/* Items */
.menu > li {
    position: relative;
}

.menu a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}

.menu a:hover {
    background: #005fa3;
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    background: #0077cc;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    z-index: 9999;
}

.dropdown-content > li {
    position: relative;
}

.dropdown-content a {
    padding: 0.6rem 1rem;
    font-weight: 600;
}

/* Desktop hover */
.dropdown:hover > .dropdown-content {
    display: block;
}

/* Nested dropdown: open to the right */
.dropdown-content .dropdown > .dropdown-content {
    top: 0;
    left: 100%;
    margin-left: 0.25rem;
}

/* Click-toggle support (JS adds .open) */
.dropdown.open > .dropdown-content {
    display: block;
}

.dropdown-content .dropdown.open > .dropdown-content {
    display: block;
}

/* "Ingelogd als" label */
.user-label {
    color: #fff;
    padding: 0.5rem 1rem;
    opacity: 0.85;
}

.no-hover:hover {
    background: none !important;
}

/* =========================
   Mobiel menu
   ========================= */

@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }

    h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    main,
    .app-content {
        margin: 1rem auto;
        padding: 1rem;
    }

    .main-nav .menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
        max-width: 100%;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        min-width: auto;
        border-radius: 0;
        padding: 0;
    }

    .dropdown-content .dropdown > .dropdown-content {
        position: static;
        margin-left: 0;
    }

    .dropdown:hover > .dropdown-content {
        display: none; /* hover uit op mobiel */
    }

    .dropdown.open > .dropdown-content {
        display: block; /* open via click */
    }

    button,
    a.button-secondary {
        width: 100%;
        text-align: center;
    }
}


/* =========================
   FIX: subsubmenu verdwijnt bij mousemove
   ========================= */

/* Zorg dat dropdown netjes bovenop ligt */
.menu > li,
.dropdown-content > li {
  position: relative;
}

/* Basis dropdown */
.dropdown-content {
  top: calc(100% + 2px);
  left: 0;
}

/* Nested dropdown: GEEN gat tussen submenu en subsubmenu */
.dropdown-content .dropdown > .dropdown-content {
  top: 0;
  left: 100%;

  /* overlap i.p.v. ruimte (voorkomt "hover loss") */
  margin-left: -6px;     /* <-- belangrijk */
}

/* Hover-bridge: onzichtbare strook die hover behoudt
   terwijl je naar rechts beweegt richting subsubmenu */
.dropdown-content .dropdown::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;          /* strook naar rechts */
  width: 12px;
  height: 100%;
}

/* Zelfde truc voor top-level dropdown als je ook daar issues hebt */
.menu > .dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: 12px;          /* strook naar beneden */
  width: 100%;
}

/* Open regels (blijven hetzelfde, maar expliciet) */
.dropdown:hover > .dropdown-content {
  display: block;
}

.dropdown-content .dropdown:hover > .dropdown-content {
  display: block;
}

/* Click-toggle (mobiel / JS) blijft werken */
.dropdown.open > .dropdown-content {
  display: block;
}
.dropdown-content .dropdown.open > .dropdown-content {
  display: block;
}