/* Gedeelde invoer-hulpmiddelen (NFR-9): kalenderkiezer + persoon-autocomplete.
 * Body-gepositioneerde popups (z-index boven de modals, 80/90). Vlakke kaarten:
 * volledige 1px-rand + schaduw, geen accentbalk. */

/* ---- Datum- en tijdvelden: app-breed compact ------------------------------ */
/* Een datumveld (DD-MM-JJJJ, 10 tekens) en een tijdveld (HH:MM) hoeven nooit mee
   te rekken met de layout eromheen. max-width wint van flex-groei en van per-
   scherm width-regels; een bewust smaller veld (bv. de datum-pil in de agenda-
   balk) blijft smaller. Elk veld met data-datumkiezer/data-tijdkiezer doet
   automatisch mee. */
input[data-datumkiezer] { max-width: 142px; }
input[data-tijdkiezer] { max-width: 106px; }

/* Wis-knop in de voet van de kiezers (datum + tijd): velden zijn optioneel en
   moeten dus ook leeg te maken zijn, zonder hinttekst per formulier. */
.kiezer__wissen {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.kiezer__wissen:hover { color: var(--err); text-decoration: underline; }

/* ---- Kalenderkiezer (components/datumkiezer.js) --------------------------- */
.datumkiezer {
  position: fixed;
  z-index: 200;
  width: 258px;
  box-sizing: border-box;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(28, 42, 57, .18);
  font-family: var(--font-sans);
}
.datumkiezer__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.datumkiezer__titel {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: capitalize;
}
.datumkiezer__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--blue-700);
  cursor: pointer;
}
.datumkiezer__nav:hover { background: var(--bg-50); }
.datumkiezer__nav svg { width: 16px; height: 16px; }
/* Aantal dagkolommen volgt de weekweergave (B-94): 7, of 6 als de zondag verborgen
   is. teken() zet --kiezer-dagen inline op de kop en het rooster. */
.datumkiezer__week,
.datumkiezer__grid { display: grid; grid-template-columns: repeat(var(--kiezer-dagen, 7), 1fr); }
.datumkiezer__week { margin-bottom: 2px; }
.datumkiezer__week span {
  text-align: center;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  padding: 2px 0;
}
.datumkiezer__grid { gap: 2px; }
.datumkiezer__dag {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.datumkiezer__dag:hover { background: var(--bg-50); }
.datumkiezer__dag.is-buiten { color: var(--muted); }
.datumkiezer__dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--blue-700); color: var(--blue-700); font-weight: 700; }
.datumkiezer__dag.is-gekozen { background: var(--blue-700); color: #fff; font-weight: 700; }
.datumkiezer__dag.is-gekozen:hover { background: var(--blue-700); }
/* Dag vóór de ondergrens (data-datum-min): gedempt en niet kiesbaar. */
.datumkiezer__dag:disabled, .datumkiezer__dag.is-uit { color: var(--muted); opacity: .4; cursor: default; }
.datumkiezer__dag:disabled:hover, .datumkiezer__dag.is-uit:hover { background: none; }
.datumkiezer__voet { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; }
.datumkiezer__vandaag {
  border: 0;
  background: none;
  color: var(--blue-700);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.datumkiezer__vandaag:hover { text-decoration: underline; }
.datumkiezer__vandaag:disabled { color: var(--muted); opacity: .5; cursor: default; text-decoration: none; }

/* ---- Tijdkiezer (components/tijdkiezer.js) --------------------------------- */
/* Zelfde popup-patroon als de kalenderkiezer: vlakke kaart, lijst met tijden in
   stappen van 30 minuten, voet met Wissen. */
.tijdkiezer {
  position: fixed;
  z-index: 200;
  box-sizing: border-box;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(28, 42, 57, .18);
  font-family: var(--font-sans);
}
.tijdkiezer__lijst { max-height: 218px; overflow-y: auto; display: flex; flex-direction: column; }
.tijdkiezer__item {
  border: 0;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  padding: 5px 10px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.tijdkiezer__item:hover { background: var(--bg-50); }
.tijdkiezer__item.is-gekozen { background: var(--blue-700); color: #fff; font-weight: 700; }
.tijdkiezer__item.is-gekozen:hover { background: var(--blue-700); }
.tijdkiezer__voet { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }

/* ---- Persoon-autocomplete (components/persoon-autocomplete.js) ------------ */
/* Body-gepositioneerde lijst; hergebruikt de .ac__item-stijlen uit forms.css. */
.persoon-pop {
  position: fixed;
  z-index: 200;
  max-height: 248px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(28, 42, 57, .18);
  padding: 4px;
}
/* Suggesties krijgen dezelfde opmaak als de Ctrl+K-zoekresultaten in de topbalk:
   een accent-stip, dan naam (titel) + adres (sub) in een kolom met ellipsis. */
.persoon-pop .ac__item {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.persoon-pop .ac__dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--blue-700);
}
.persoon-pop .ac__tekst { display: flex; flex-direction: column; min-width: 0; }
.persoon-pop .ac__naam,
.persoon-pop .ac__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persoon-pop .ac__naam { font-size: .88rem; line-height: 1.3; }
.persoon-pop .ac__meta { font-size: .76rem; line-height: 1.25; }