/* MODULE: Instellingen — targets, team, export/import, systeem. */
.in-wrap{max-width:860px}
.in-target{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.in-target > label{font-size:13px;font-weight:600;color:var(--txt)}
.in-target input{width:90px;text-align:right;font-variant-numeric:tabular-nums}
/* MOET `input.in-tinp` zijn, niet `.in-tinp`: base.css zet width:100% via
   `input[type=number]` en dat is een specifiekere selector dan één klasse.
   Zonder de element-naam erbij werd elk maandtarget-veld 240px breed en
   domineerde de invoerkolom de hele tabel. */
input.in-tinp{width:76px;text-align:right}
tr.in-nu td{background:var(--card-2)}
.in-sys{display:flex;flex-direction:column}
.in-sysrij{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.in-sysrij:last-child{border-bottom:none}
.in-sysrij .meta{margin-left:6px}

/* Werk-e-mail per teamlid. Een leeg veld is geen fout maar wel een gemis:
   zonder adres komt de Teams-melding nergens aan. Daarom een rustige
   markering in plaats van een rood alarm. */
.in-mail{min-width:210px}
.in-mail.leeg{border-color:var(--amber-line);background:var(--amber-bg)}

/* Microsoft-koppeling: status, wat er aanstaat, Teams-schakelaar. */
.in-msstatus{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.in-msstatus .in-msnu{flex:1;min-width:220px}
.in-msstatus .meta{margin-top:3px}
.in-msonderdelen{display:flex;flex-direction:column;margin-top:16px;
  border-top:1px solid var(--line)}
.in-msrij{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.in-msrij:last-child{border-bottom:none}
.in-msvink{width:16px;flex:none;text-align:center;color:var(--muted);
  font-size:13px;line-height:1.5}
.in-msvink.aan{color:var(--green);font-weight:700}
.in-msrij.uit .in-mswat b{color:var(--muted)}
.in-mswat{display:flex;flex-direction:column;gap:1px;min-width:0}
.in-mswat b{font-size:13px;font-weight:600}
.in-mswat .meta{font-size:11.5px}
/* Het gevolg staat er pas als het onderdeel het niet doet — anders is het
   zes keer een waarschuwing bij iets dat prima werkt. */
.in-msgevolg{display:none}
.in-msrij.uit .in-msgevolg{display:block;color:var(--amber);margin-top:2px}
.in-msuitslag{margin-top:14px}
.in-msknoppen{margin-top:10px}
.in-mswaarschuwing{color:var(--amber)}
.in-mswaarschuwing:empty{display:none}
.in-msschakel{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line);cursor:pointer}
.in-msschakel input{margin-top:2px;flex:none}
.in-msschakel span{display:flex;flex-direction:column;gap:1px}
.in-msschakel b{font-size:13px;font-weight:600}
.in-msschakel .meta{font-size:11.5px}

/* ─── Breed scherm: de instellingenkaarten naast elkaar ──────────
   860px op een teamscherm van 2000px was de smalste kolom van de hele app
   (55% benutting). De kaarten zijn los van elkaar te lezen — targets, team,
   Microsoft, contacten, export, systeem — dus ze mogen naast elkaar. Met
   column-count in plaats van grid, omdat de kaarten sterk in hoogte
   verschillen: multicol vult de kolommen uit en laat geen ragged gat.
   break-inside:avoid houdt één kaart altijd in één kolom.
   De marges worden hier omgezet van boven naar onder (de module zet een
   inline margin-top op elke kaart behalve de eerste); anders zou de bovenste
   kaart van kolom 2 en 3 20px lager beginnen dan die van kolom 1. */
@media (min-width:1500px){
  .in-wrap{max-width:none;column-count:2;column-gap:22px}
  .in-wrap > .card{margin-top:0 !important;margin-bottom:20px;break-inside:avoid}
}
/* Bewust GÉÉN derde kolom op het teamscherm. Met drie kolommen bleef er per
   kolom ±550px over, en dan past de tabel "Team en rollen" niet meer: die
   heeft vier kolommen waarvan twee keuzelijsten. Het gevolg was dat je op
   een gróter scherm de kolom Rol alleen nog kon bereiken door binnen de
   kaart horizontaal te scrollen. Twee kolommen vullen het scherm ook, en
   dan blijft alles gewoon leesbaar. */

/* ── Botformulieren: botgegevens als net stappenformulier (3 sep 2026) ──
   Tjeerd: "het moet een net formulier zijn" + "maak het visueel
   aantrekkelijker" — stapkaarten in huisstijl, kwalificatievragen als
   pills die groen oplichten zodra ze aanstaan. */
.botform{border:1px solid var(--line);border-radius:12px;background:var(--well);
  padding:14px;margin:6px 0 14px;max-width:960px;display:flex;flex-direction:column;gap:12px}
.botform .stap{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.botform .stap-kop{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.botform .stap-nr{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:50%;background:var(--olive);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:0}
.botform .bot-preview{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 2px}
.eis-pil{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  border-radius:999px;padding:5px 14px;cursor:pointer;background:var(--card);
  user-select:none;transition:background .15s,border-color .15s,color .15s}
.eis-pil:hover{border-color:var(--olive-l)}
.eis-pil input{accent-color:var(--olive);margin:0}
.eis-pil:has(input:checked){background:var(--green-bg);border-color:var(--green-line);
  color:#1e6b3f;font-weight:600}