/* Formulieronderdelen voor de hele app: vinkjes, keuzerondjes, keuzelijsten,
   getalvelden en datumvelden in één stijl. Wordt na style.css geladen en geldt
   overal, zonder dat een pagina er iets voor hoeft te doen. Het gedrag (de eigen
   keuzelijst en de min- en plusknop) staat in js/controls.js.

   De basisregels staan in :where(), zodat ze geen gewicht hebben: een pagina die
   zelf iets over een vinkje of veld zegt (bijvoorbeeld een verborgen vinkje achter
   een schuifknop) houdt altijd gelijk. */
:root{--fc-rand:#bcd2cd;--fc-zacht:#edf4f2;--fc-ring:0 0 0 3px rgba(10,61,92,.16)}

/* ── Vinkjes en keuzerondjes ── */
:where(input[type="checkbox"],input[type="radio"]){
  -webkit-appearance:none;appearance:none;flex-shrink:0;width:18px;height:18px;vertical-align:middle;cursor:pointer;
  border:1.5px solid var(--fc-rand);background:#fff center/0 0 no-repeat;
  transition:border-color .15s,background-color .15s,box-shadow .15s,transform .12s}
:where(input[type="checkbox"]){border-radius:6px}
:where(input[type="radio"]){border-radius:50%}
:where(input[type="checkbox"],input[type="radio"]):hover:not(:disabled){border-color:var(--primary)}
:where(input[type="checkbox"],input[type="radio"]):active:not(:disabled){transform:scale(.9)}
:where(input[type="checkbox"]):checked,:where(input[type="checkbox"]):indeterminate{background-color:var(--primary);border-color:var(--primary);background-size:74% auto}
:where(input[type="checkbox"]):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
:where(input[type="checkbox"]):indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
:where(input[type="radio"]):checked{border-color:var(--primary);background-image:radial-gradient(circle,var(--primary) 0,var(--primary) 44%,transparent 50%);background-size:100% 100%}
:where(input[type="checkbox"],input[type="radio"]):disabled{opacity:.5;cursor:not-allowed}
:where(input[type="checkbox"],input[type="radio"]):focus-visible{outline:none;box-shadow:var(--fc-ring)}

/* ── Keuzelijsten: het gesloten veld ── */
:where(select){font-family:inherit;font-size:.9rem;line-height:1.35;color:var(--text);background-color:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
select:not([multiple]):not([size]){
  -webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px}
select:not([multiple]):not([size]):hover:not(:disabled){border-color:#a9c6d2}
select:not([multiple]):not([size]):focus-visible,select.fc-open{border-color:var(--primary);box-shadow:var(--fc-ring)}
select.fc-open:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
select:not([multiple]):not([size]):disabled{background-color:#f4f7f8;color:var(--text-secondary);cursor:not-allowed;opacity:.75}

/* ── Keuzelijsten: de lijst die openklapt ── */
.fc-menu{position:fixed;z-index:20000;display:flex;flex-direction:column;box-sizing:border-box;padding:6px;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 50px -8px rgba(10,61,92,.24),0 6px 18px -6px rgba(10,61,92,.12);font-family:'Quicksand',-apple-system,sans-serif;color:var(--text);
  animation:fcIn 150ms cubic-bezier(.16,1,.3,1);transform-origin:top center}
.fc-menu.is-boven{transform-origin:bottom center;animation-name:fcInBoven}
@keyframes fcIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fcInBoven{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.fc-menu-zoek{padding:2px 2px 6px;flex-shrink:0}
.fc-menu-zoek input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:9px;padding:8px 10px 8px 34px;font:inherit;font-size:.86rem;color:var(--text);outline:none;
  background:#f6faf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa8b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center/15px 15px no-repeat;transition:border-color .15s,background-color .15s}
.fc-menu-zoek input:focus{border-color:var(--primary);background-color:#fff}
.fc-menu-lijst{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cfdedb transparent}
.fc-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 10px;border-radius:9px;font-size:.88rem;line-height:1.35;cursor:pointer;user-select:none;-webkit-user-select:none}
.fc-opt span{min-width:0;overflow-wrap:anywhere}
.fc-opt.is-actief{background:var(--fc-zacht)}
.fc-opt.is-gekozen{font-weight:700}
.fc-opt.is-gekozen::after{content:"";flex-shrink:0;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.fc-opt.is-leeg{color:var(--text-secondary);font-weight:500}
.fc-opt.is-uit{opacity:.45;cursor:not-allowed}
.fc-menu-groep{padding:10px 10px 4px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.fc-menu-niets{padding:14px 10px;font-size:.86rem;color:var(--text-secondary);text-align:center}

/* ── Getalvelden ── */
/* De pijltjes van de browser gaan overal weg; hele getallen krijgen eigen knoppen. */
:where(input[type="number"]){-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fc-num{position:relative;display:block;min-width:0}
.fc-num>input[type="number"]{padding-right:78px;font-variant-numeric:tabular-nums}
.fc-num-knoppen{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:flex;gap:3px}
.fc-num-knop{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:var(--fc-zacht);color:var(--primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .15s,transform .1s,opacity .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fc-num-knop svg{width:14px;height:14px;pointer-events:none}
.fc-num-knop:hover:not(:disabled){background:#dcebe7}
.fc-num-knop:active:not(:disabled){transform:scale(.92);background:#cfe3de}
.fc-num-knop:disabled{opacity:.35;cursor:default}
.fc-num>input:disabled~.fc-num-knoppen{display:none}

/* ── Datum en tijd ── */
/* Even hoog en in hetzelfde lettertype als de andere velden, met een eigen pictogram. */
input[type="date"]:not(.dp-native),input[type="datetime-local"]:not(.dp-native),input[type="time"],input[type="month"]{
  font-family:inherit;font-size:.9rem;line-height:1.35;min-height:0;height:calc(1.35em + 20px);color:var(--text);background-color:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;outline:none;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
input[type="time"]:hover:not(:disabled),input[type="month"]:hover:not(:disabled){border-color:#b6cfc7}
input[type="time"]:focus,input[type="month"]:focus{border-color:var(--primary);box-shadow:var(--fc-ring)}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{
  width:16px;height:16px;padding:6px;margin:0 -6px 0 6px;border-radius:8px;cursor:pointer;opacity:.8;transition:opacity .15s,background-color .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/16px 16px no-repeat}
input[type="time"]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
input[type="date"]::-webkit-calendar-picker-indicator:hover,input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,input[type="month"]::-webkit-calendar-picker-indicator:hover,input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1;background-color:var(--fc-zacht)}

/* De eigen datumkiezer (js/datepicker.js): het veld even hoog als de rest en het
   kalendervenster boven vensters en keuzelijsten. */
.dp-wrap .dp-input{min-height:0;height:calc(1.35em + 20px);padding-top:0;padding-bottom:0;line-height:1.35}
.dp-popover{z-index:20000}

@media (hover:none) and (pointer:coarse){
  .fc-num-knop{width:36px;height:36px}
  .fc-num>input[type="number"]{padding-right:92px}
}
@media (prefers-reduced-motion:reduce){
  .fc-menu{animation:none}
  :where(input[type="checkbox"],input[type="radio"]),.fc-num-knop{transition:none}
}