/* ============================================================
   mijn.css — gedeelde componenten voor Mijn KDV Online.
   Wordt geladen BINNEN de dashboard-schil (dashboard_basis.html);
   bevat dus GEEN page-shell (header/nav/sheets) — alleen bouwstenen.
   Merk: alleen bruin + roze, geen zwart/grijs.
   ============================================================ */
:root{
  --groen:#6e8b5e; --groen-hover:#5c7650; --groen-vlak:#edf0df; --groen-rand:#c9cfa8; --groen-tekst:#3f5636;
  --rood:#a2543f; --rood-vlak:#f7e4df; --rood-rand:#c08776;
  --creme-knop:#f3e9e2; --beige-licht:#faf7f3;
  --radius:8px;
}

/* ---- knoppen ---- */
/* KNOPTEKST IS MAXIMAAL 14px (besluit JP, 18-08-2026).
   Stond op 16px, groter dan de bodytekst eromheen. Een knop hoort een handeling
   aan te bieden, niet de bladzijde te domineren. Alle varianten hieronder volgen
   deze maat; wijk je ervan af, doe dat dan hier en niet in een sjabloon. */
.knop{display:inline-flex;align-items:center;gap:7px;font:inherit;font-family:"Inter",Arial,sans-serif;font-size:14px;font-weight:600;
  border-radius:var(--radius);padding:9px 16px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;transition:background .12s,border-color .12s}
.knop-groen{background:var(--groen);border-color:var(--groen);color:#fff}
.knop-groen:hover{background:var(--groen-hover);border-color:var(--groen-hover)}
.knop-terra{background:var(--terra);border-color:var(--terra);color:var(--bruin)}
.knop-terra:hover{background:var(--terra-hover);border-color:var(--terra-hover)}
.knop-bruin{background:var(--creme-knop);border-color:var(--roze);color:var(--bruin)}
.knop-bruin:hover{background:#ecdccf}
/* Stond woordelijk in vier sjablonen (structuur, formule, abonnement,
   formule_overzicht) en werd in vijf gebruikt — op het vijfde scherm viel de
   knop daardoor terug op de kale .knop en werd hij grijs. Eén definitie. */
.knop-roze{background:var(--roze-vlak,#f2e4de);border-color:#e6cfc4;color:var(--bruin)}
.knop-roze:hover{background:#ecdccf;border-color:#dcc3b6}
.knop-rood{background:#fff;border-color:var(--rood-rand);color:var(--rood);font-weight:600;font-size:14px;padding:8px 14px}
.knop-rood:hover{background:var(--rood-vlak)}
/* Nog een maat kleiner, voor handelingen die je zelden doet. */
.knop-klein{font-size:13px;padding:6px 12px;border-radius:8px}

/* ---- popover (native <dialog class="pop">) ----
   STOND IN TWEE SJABLONEN EN CENTREERDE IN GEEN VAN BEIDE.
   Een modaal venster centreert zichzelf met `margin:auto` uit de browserstijl,
   maar dashboard_basis.html begint met `*{margin:0;padding:0}` en die reset
   haalt dat weg — waarna het venster in de linkerbovenhoek plakt. Daarom staat
   `margin:auto` hier expliciet, samen met `inset:0`.
   Tot 20-08-2026 zette openPop() op Organisatiestructuur het venster daarna met
   inline-stijlen bij de aangeklikte knop; die wonnen van deze regels. Dat is
   eruit (melding JP: 'de wizard moet op ieder scherm centraal staan'), dus deze
   twee regels bepalen het weer alleen. */
dialog.pop{position:fixed;inset:0;margin:auto;border:1px solid var(--rand);
  border-radius:14px;padding:26px 28px 22px;max-width:560px;width:calc(100% - 40px);
  max-height:calc(100vh - 48px);overflow:auto;background:var(--beige-licht,#fdfaf6);
  color:inherit;box-shadow:0 18px 48px rgba(60,40,20,.18)}
dialog.pop::backdrop{background:rgba(60,40,20,.32)}
dialog.pop h3{margin:0 0 14px;font-size:19px;font-weight:600;color:var(--bruin)}
dialog.pop .knoprij{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
/* KEUZERIJ IN EEN VENSTER — stond alleen in instellingen_team.html.
   Op Organisatiestructuur liepen de vier keuzes daardoor als één alinea aan
   elkaar: de opmaakregel bestond, maar niet op dat scherm. Derde keer vandaag
   dat een klasse in één sjabloon woonde en in twee werd gebruikt. */
.kies-rij{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer;
  border-bottom:1px solid var(--rand)}
.kies-rij:last-of-type{border-bottom:0}
.kies-rij input{accent-color:var(--groen,#6e8b5e);margin-top:3px;flex:0 0 auto}
.kies-rij > span{display:block;font-size:15px;color:var(--bruin);line-height:1.45}
/* De uitleg hoort ONDER het vetgedrukte label, niet erachter: achter elkaar
   lopen vier keuzes in elkaar over tot één lap tekst. */
.kies-rij .kies-uitleg{display:block;font-size:13px;color:var(--bruin-licht);
  line-height:1.45;margin-top:2px;font-weight:400}
/* EEN KOPJE BOVEN EEN GROEPJE KEUZES (20-08-2026, melding JP).
   Zeven keuzes onder elkaar lees je regel voor regel tot je de goede tegenkomt.
   Met een kopje zoek je eerst het onderwerp -- merken, rechtspersonen,
   kindplaatsen, moeder -- en pas daarna de zin. Zelfde opmaak als de kolomkoppen
   in de tabellen, zodat het als kop leest en niet als keuze. */
.kies-kop{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;color:var(--bruin-licht);margin:16px 0 2px}
.kies-kop:first-child{margin-top:0}
/* WAT JE KOOS BLIJFT ZICHTBAAR ALS LABEL (20-08-2026, melding JP).
   Een aanvinklijst van 92 regels past niet in een venster, en een zoekveld
   zonder geheugen laat je na de derde keuze niet meer zien wat je hebt. */
.kiesjes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.kiesjes:empty{margin:0}
/* Twee regels in een label: de persoon met zijn organisatie, en daaronder het
   adres waar het heen gaat (20-08-2026). */
.kiesje{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  line-height:1.35;font-size:13.5px;
  background:var(--zand);border:1px solid var(--rand);border-radius:999px;
  padding:5px 11px;color:var(--bruin)}
.kiesje button{border:0;background:none;cursor:pointer;font-size:16px;
  line-height:1;color:var(--bruin-licht);padding:0 4px}
.kiesje button:hover{color:var(--bruin)}
.treffer .t-kop{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--bruin-licht);font-weight:600}
.stap-kop{margin:16px 0 4px;font-size:14px;font-weight:600;color:var(--bruin);
  border-top:1px solid var(--rand);padding-top:12px}
.noot-let{margin:10px 0 0;padding:10px 13px;border-radius:10px;font-size:13.5px;
  line-height:1.5;background:#f9ece7;border:1px solid #e0b4b4;color:#8a3a1f}
.pop-sluit{position:absolute;top:10px;right:12px;margin:0}
.pop-sluit button{background:none;border:0;font-size:24px;line-height:1;
  color:var(--bruin-licht);cursor:pointer;padding:4px 8px}
.pop-sluit button:hover{color:var(--bruin)}

/* ---- kaart ---- */
.kaart{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:26px 30px;margin-bottom:22px}
.kaart h1{font-size:24px;font-weight:600;color:var(--bruin);margin:0 0 4px;letter-spacing:-.01em}
.kaart h2{font-size:17px;font-weight:600;color:var(--bruin);margin:0 0 4px}
.kaart .lead{font-size:16px;color:var(--bruin-licht);line-height:1.6;margin:0 0 18px}

/* ---- meldingen ---- */
.melding{border-radius:var(--radius);padding:11px 15px;font-size:16px;margin-bottom:16px;word-break:break-word}
.melding-goed{background:var(--groen-vlak);border:1px solid var(--groen-rand);color:var(--groen-tekst)}
.melding-fout{background:var(--rood-vlak);border:1px solid var(--rood-rand);color:var(--rood)}

/* ---- badges ---- */
.badge{display:inline-block;font-size:14px;border-radius:20px;padding:3px 10px;margin:1px 3px 1px 0}
.badge-roze{background:var(--creme-knop);border:1px solid var(--roze);color:var(--bruin)}
.badge-groen{background:var(--groen-vlak);border:1px solid var(--groen-rand);color:var(--groen-tekst)}
.badge-zacht{background:var(--zand);border:1px solid var(--rand);color:var(--bruin-licht)}

/* ---- formulier ---- */
.veld{display:block;margin:14px 0 6px;font-size:15px;font-weight:600;color:var(--bruin)}
/* OP DE KLASSE, NIET OP HET TYPE (19-08-2026, melding JP).
   Hier stond `input[type=text].inv, input[type=email].inv, select.inv`. Elk
   nieuw invoertype viel daardoor buiten de huisstijl: een `number`-veld in het
   venster op de locatiepagina kreeg de kale rand en de grijze pijltjes van de
   browser, pal naast een keuzelijst die er wél goed uitzag. Wie `.inv` schrijft
   vraagt om de Grip-stijl; het type doet er niet toe. */
input.inv,select.inv,textarea.inv{width:100%;box-sizing:border-box;font:inherit;
  font-size:16px;padding:10px 12px;border:1.5px solid var(--roze);
  border-radius:var(--radius);color:var(--bruin);background:#fff}
input.inv:focus,select.inv:focus,textarea.inv:focus{outline:none;
  border-color:var(--bruin)}
/* GETALVELD MET EIGEN OP- EN NEERKNOPJES (besluit JP, 19-08-2026).
   Eerst stonden de pijltjes hier uit: 'in elke browser anders en passen bij geen
   enkele huisstijl'. Dat argument klopte, maar de conclusie niet -- een getalveld
   dat eruitziet als een tekstveld vertelt niet dat je er met de pijltjestoetsen
   doorheen kunt. Dus: de browserpijltjes blijven uit, en we tekenen ze zelf in
   Grip-stijl. `wikkelGetalvelden()` in dashboard_basis.html zet de wikkel om elk
   input[type=number].inv, zodat geen enkel sjabloon dit hoeft te weten.
   Stap is altijd 1: een halve kindplaats bestaat niet. */
input[type=number].inv::-webkit-outer-spin-button,
input[type=number].inv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number].inv{-moz-appearance:textfield;appearance:textfield}
.getalveld{position:relative;display:block}
.getalveld input[type=number].inv{padding-right:42px}
.getalveld .stappers{position:absolute;top:1.5px;right:1.5px;bottom:1.5px;width:34px;
  display:flex;flex-direction:column;border-left:1.5px solid var(--roze);
  border-radius:0 var(--radius) var(--radius) 0;overflow:hidden}
.getalveld .stappers button{flex:1;border:0;padding:0;margin:0;cursor:pointer;
  background:var(--zand);color:var(--bruin);font:inherit;font-size:11px;
  line-height:1;display:flex;align-items:center;justify-content:center}
.getalveld .stappers button:hover{background:var(--beige)}
.getalveld .stappers button:active{background:var(--roze);color:#fff}
.getalveld .stappers button + button{border-top:1px solid var(--roze)}
.getalveld input[type=number].inv:focus ~ .stappers{border-left-color:var(--bruin)}

/* ---- lijst (rijen met randen) ---- */
.lijst{width:100%;border:1px solid var(--rand);border-radius:14px;overflow:hidden}
.lijst .rij{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--zand)}
.lijst .rij:last-child{border-bottom:none}
.lijst .rij .naam{font-size:16px;font-weight:600;color:var(--bruin)}
.lijst .rij .sub{font-size:14px;color:var(--bruin-licht)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--creme-knop);border:1px solid var(--roze);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--bruin);flex-shrink:0}

/* ---- instellingen: geen scheidingslijn tussen subnav en content ---- */
.subnav{border-right:none}

/* INVOERVELDEN IN TABELLEN — voor Mijn locaties én de kindplaatsen-stap in de
   structuurwizard. Stond eerst alleen in het <style>-blok van mijn_locaties.html;
   het veld in de wizard viel daardoor terug op de standaard van de browser, met
   een breed vak en een grijs pijltje ernaast. Vierde keer dit jaar dat een klasse
   in één sjabloon woont en ergens anders gebruikt wordt — vandaar hierheen. */
.loc-invoer{font:inherit;font-size:14px;color:var(--bruin);background:#fff;
  border:1px solid var(--rand);border-radius:8px;padding:5px 8px;width:100%;
  max-width:160px}
.loc-invoer.num{max-width:78px;text-align:right}
.loc-invoer:focus{outline:none;border-color:var(--roze);
  box-shadow:0 0 0 3px rgba(225,155,124,.18)}
/* .loc-invoer.num staat in een tabelcel van 78 pixels; daar past geen wikkel met
   knopjes naast. Die houdt de browserpijltjes uit en de pijltjestoetsen aan. */
.loc-invoer.num::-webkit-outer-spin-button,
.loc-invoer.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.loc-invoer.num{-moz-appearance:textfield;appearance:textfield}

/* `hidden` MOET WINNEN VAN ELKE display-REGEL.
   `dialog.pop .knoprij{display:flex}` is specifieker dan de `[hidden]`-regel uit
   de standaardstijl van de browser. Gevolg: `knoprij.hidden = true` in de code
   deed niets zichtbaars — in de wizard bleven 'Volgende' en 'Terug' staan naast
   de bevestiging die ze had moeten vervangen, dus vier knoppen onder elkaar.

   Mijn tests keken naar de eigenschap `.hidden` en niet naar wat je ziet; die
   stonden dus op groen terwijl het scherm iets anders liet zien. Deze regel lost
   de hele categorie op, niet alleen dit geval. */
[hidden]{display:none !important}

/* De ja/nee-keuze voor peuteropvang staat in een smalle kolom; hij hoort even
   breed te ogen als het getal ernaast en niet als een volwaardig formulierveld. */
.loc-invoer.po{max-width:104px;text-align:left;padding:5px 6px}