/* =============================
   STRUCTUUR MENU
============================= */
.left-menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: var(--menu-width, 250px);
  background-color: var(--background);
  color: var(--text);
  padding-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  margin-left: 2px;
  overflow: hidden;
  transition: width 0.25s ease;
}

.menu-collapse-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--Kindowlichtgrijs);
  background: var(--background);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  border-radius: 3px;
  z-index: 5;
}

.menu-collapse-toggle:hover {
  background: var(--hovercolor);
}

/* =============================
   LOGO
============================= */
/* container */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* links uitlijnen */
  height: 120px;              /* iets hoger, passend bij groter logo */
  padding: 8px 16px 8px 4px;  /* minimale linker padding zodat logo verder naar links staat */
  margin-top: 10px;           /* ruimte boven schermrand */
  margin-bottom: 12px;        /* ruimte boven eerste menu-item */
  box-sizing: border-box;
  background: var(--background);
}

/* specifiek: voorkomt overschrijving door algemene svg styling */
.left-menu .logo-container a svg.logo,
.logo-container svg.logo {
  width: auto !important;
  height: 104px;              /* 120px container minus 2x 8px padding */
  max-height: 100%;
  display: block;
  flex: none;
  object-fit: contain;
  margin-left: -28px;          /* extra verschuiving naar links */
}

/* responsieve schaalverkleining */
@media (max-width: 600px) {
  .left-menu .logo-container a svg.logo,
  .logo-container svg.logo {
    height: 60px;
  }

  .logo-container {
    height: 90px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* =============================
   MENU – SCROLLBAAR MIDDENSTUK
============================= */
.left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.left-menu li {
  margin: 0;
}

/* =============================
   ALGEMENE LINKS & TOGGLES
============================= */
.left-menu a,
.left-menu button.toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--text);
  background: none;
  border: none;
  transition: all 0.3s;
  cursor: pointer;
  box-sizing: border-box;
}

/* Iconen naast tekst */
.left-menu a svg,
.left-menu button.toggle svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* Hover hoofdmenu */
.left-menu a:hover,
.left-menu button.toggle:hover {
  background-color: var(--hovercolor);
  color: var(--KindowGeel);
}

/* Pijltje bij toggle */
.left-menu .toggle::after {
  content: '▸';
  display: inline-block; 
  margin-left: auto;
  transition: transform 0.3s;
  color: var(--text);
}

.left-menu .toggle.open::after {
  content: '▾';
}

/* =============================
   SUBMENU
============================= */
/* Submenu standaard dicht */
.left-menu .submenu {
  overflow: hidden;
  max-height: 0;
  flex-direction: column;
  background: var(--background);
  transition: max-height 0.3s ease;
  border: none; /* standaard geen rand */
}

/* Submenu open */
.left-menu .toggle.open + .submenu {
  max-height: 600px; /* genoeg ruimte voor alle items */
  background: var(--submenu-bg);
  border: 1px solid var(--Kindowlichtgrijs); /* <-- border om het hele submenu */
  
}

/* Submenu links */
.left-menu .submenu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 40px;
  color: var(--text);
  background: none;
  text-decoration: none;
  transition: all 0.3s;
  box-sizing: border-box;
  
}

/* Iconen in submenu */
.left-menu .submenu a svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

/* Hover submenu */
.left-menu .submenu li a:hover {
  background-color: var(--hovercolor);
  color: var(--KindowGeel);
}

/* Actieve submenu link */
.left-menu .submenu a.nav-link.active {
 border-left: 6px solid var(--KindowGeel);
 color: var(--KindowGeel);
  padding-left: 40px;
}


/* =============================
   ACTIEVE LINKS (algemeen)
============================= */
.left-menu a.nav-link.active {
  border-left: 8px solid var(--KindowGeel);
  color: var(--KindowGeel);
}

/* =============================
   KNOPPEN ONDERAAN
============================= */
.menu-buttons {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: var(--background);
  border-top: 1px solid var(--background);
}

/* =============================
   COLLAPSED MENU
============================= */
body.menu-collapsed .left-menu .logo-container {
  justify-content: center;
  padding: 8px 4px;
}

body.menu-collapsed .left-menu .logo-container a svg.logo {
  width: 52px !important;
  height: auto !important;
  max-width: 100%;
  margin-left: 0;
}

body.menu-collapsed .left-menu a,
body.menu-collapsed .left-menu button.toggle {
  justify-content: center;
  padding: 12px 8px;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-indent: -9999px;
}

body.menu-collapsed .left-menu a .menu-icon,
body.menu-collapsed .left-menu button.toggle .menu-icon {
  text-indent: 0;
  margin: 0;
}

body.menu-collapsed .left-menu .toggle::after {
  display: none;
}

body.menu-collapsed .left-menu .submenu {
  display: none !important;
}

body.menu-collapsed .left-menu .menu-buttons,
body.menu-collapsed .left-menu .lang-switch-wrapper {
  display: none;
}

body.menu-collapsed .left-menu a.nav-link.active {
  border-left-width: 4px;
}

/* Knoppenstijl */
.menu-button {
  align-items: center;
  /* use variables so related controls can match size */
  --menu-button-width: 200px;
  --menu-button-height: 36px;
  width: var(--menu-button-width);
  padding: 8px 10px;
  text-align: center;
  color: var(--text);
  background: var(--background);
  border: 2px solid var(--KindowDonkergrijs);
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-button:hover {
  background: var(--KindowGeel);
  color: var(--background);
}

.menu-button:active {
  background: var(--KindowGeel);
  color: var(--text);
}

/* Language switch (compact flag buttons) */
.lang-switch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* <-- links uitlijnen */
  width: 100%;               /* <-- laat zich vullen tot de menu-padding */
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.lang-label {
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.lang-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;  /* <-- vlaggen beginnen links, net als knoppen */
  gap: 16px;
  width: var(--menu-button-width);
}

.lang-button {
  flex: 0 0 56px;
  width: 56px;
  height: var(--menu-button-height, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--KindowDonkergrijs);
  background: var(--background);
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.lang-button:hover,
.lang-button.active {
  background: var(--KindowGeel);
  color: var(--background);
}

.lang-flag {
  /* container for either emoji text or an SVG icon. Use flex to vertically center contents. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  line-height: 1;
  vertical-align: middle;
  transform: none;
  /* keep emoji font-family as fallback if SVG isn't available */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lang-flag > svg,
.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ensure svg inside the button is treated as block content and vertically centered */
.lang-button .lang-flag { display: inline-flex; align-items: center; justify-content: center; }

/* Slight visual tweak: make sure the svg fits nicely inside the button without touching the border */
.lang-button .lang-flag { width: 28px; height: 18px; }
/* Utility: visually hidden (accessible) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =============================
   SUBMENU TRANSITIE (OPTIONEEL)
============================= */
.left-menu .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.left-menu .submenu.open {
  max-height: 600px; /* genoeg ruimte voor alle items */
}

/* =============================
   MENU ICON
============================= */
.menu-icon {
  width: 36px;        /* grootte van het icoon */
  height: 36px;       /* optioneel, behoudt verhouding */
  vertical-align: middle;
  margin-right: 6px;  /* ruimte tussen icoon en tekst */
  object-fit: contain; /* voorkomt vervorming */
}


/* =============================
   Log in overlay
============================= */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.login-box {
  background: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  width: 300px;
}

.login-box input {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  font-size: 1rem;
}

.login-box button {
  background: var(--KindowGeel, #fcc019);
  border: none;
  padding: 10px 15px;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
}

.error-msg {
  color: red;
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}