/* ==========================================================
   Keuzelijst: eigen keuzemenu (zie assets/js/keuzelijst.js)
   Gebruikt de kleurvariabelen van planner.css / beheer.css.
   ========================================================== */

.kl { position: relative; width: 100%; }
.kl-select {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; pointer-events: none; border: 0 !important; padding: 0 !important;
}

.kl-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-weight: 500; font-size: 16px; color: var(--ink); text-align: left;
  background: var(--white); border: 2px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.kl-knop:hover { border-color: #c9cdd4; }
.kl-knop:focus-visible { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-soft); }
.kl-open .kl-knop { border-color: var(--ink); }
.kl-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-placeholder .kl-tekst { color: var(--faint); }
.kl-pijl { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s; }
.kl-open .kl-pijl { transform: rotate(180deg); color: var(--ink); }

.kl-lijst {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(20, 22, 27, .35);
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  animation: klIn .14s ease-out;
}
.kl-boven .kl-lijst { top: auto; bottom: calc(100% + 6px); }
@keyframes klIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.kl-lijst [role="option"] {
  position: relative; display: flex; align-items: center; min-height: 44px;
  padding: 10px 36px 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.kl-lijst [role="option"].kl-leeg { color: var(--muted); }
.kl-lijst [role="option"].kl-actief { background: var(--soft); }
.kl-lijst [role="option"][aria-selected="true"] { font-weight: 700; color: var(--rose-dark); background: var(--rose-soft); }
.kl-lijst [role="option"][aria-selected="true"]::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 11px; margin-top: -7px;
  border: solid var(--rose); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.kl-lijst [role="option"][aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Foutstatus (boekingsformulier) */
.field.invalid .kl-knop { border-color: var(--error); background: #fff5f5; }

@media (prefers-reduced-motion: reduce) {
  .kl-lijst { animation: none; }
  .kl-pijl { transition: none; }
}