/* Globale bevestigings- en invoerdialoog (component): de ene huisstijl-popup die
   de native confirm()/prompt() vervangt. Vlakke kaart, 1px-rand, geen accentbalk.
   Ligt met z-index 100 boven de andere modals (90), want de vraag kan vanuit een
   open venster komen (bv. sluiten met onopgeslagen wijzigingen). */
.bevestigmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bevestigmodal__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }
.bevestigmodal__venster {
  position: relative;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bevestigmodal__kop { display: flex; align-items: center; gap: 10px; }
.bevestigmodal__kop h2 { margin: 0; font-size: 1.05rem; color: var(--blue-700); }
.bevestigmodal__icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-50);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.bevestigmodal__icoon svg { width: 18px; height: 18px; }
.bevestigmodal--gevaar .bevestigmodal__icoon { color: var(--err); }
.bevestigmodal__tekst { margin: 0; font-size: var(--fs-data); color: var(--ink-900); line-height: 1.5; }

/* Invoerveld (vraagTekst): zelfde veldstijl als de andere modals. */
.bevestigmodal__veld { display: flex; flex-direction: column; gap: 4px; }
.bevestigmodal__veld > span { font-size: var(--fs-data); font-weight: 600; color: var(--ink-900); }
.bevestigmodal__veld input {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  background: var(--paper);
}
.bevestigmodal__veld input:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }

/* Validatiefout (vraagVelden): de dialoog blijft open met deze melding. */
.bevestigmodal__fout { margin: 0; font-size: var(--fs-data); color: var(--err); }

.bevestigmodal__acties { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
/* Compacte knoppen in de popup (uniforme popup-maat, zoals de instelflyout-voet). */
.bevestigmodal__acties .btn { padding: 5px 12px; font-size: .8rem; }
/* Knopvarianten hier eigenstandig gedefinieerd: het component mag niet leunen op
   een view-stylesheet (agenda.css/mailbox.css definieren dezelfde varianten). */
.bevestigmodal .btn--licht { background: var(--paper); border: 1px solid var(--line); color: var(--ink-900); }
.bevestigmodal .btn--licht:hover { background: var(--bg-50); }
.bevestigmodal .btn--gevaar { background: var(--paper); border: 1px solid var(--err); color: var(--err); }
.bevestigmodal .btn--gevaar:hover { background: var(--err); color: #fff; }

/* Filter-bewaren-dialoog (components/filter-bewaren.js): het naamveld is een
   combobox (globale .ac-stijl uit forms.css) waarin de gebruiker OOK een
   bestaand filter kan kiezen om te overschrijven. Deze regels winnen van de
   generieke ".bevestigmodal__veld input"-stijl zodat het veld niet dubbel
   omrand raakt - het uiterlijk komt van .ac__field. */
.filterbewaren .ac__input,
.filterbewaren .ac__input:focus { padding: 0; border: 0; background: none; outline: none; font-size: var(--fs-data); }
/* Let-op-regel: maakt het gevolg ("dit overschrijft filter X") meteen zichtbaar.
   Alleen tonen als de naam een bestaand filter raakt; het hidden-attribuut moet de
   display:flex hieronder verslaan, anders blijft de waarschuwingsdriehoek altijd
   staan (zelfde valkuil als .instelflyout[hidden]). */
.filterbewaren__let { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-data); color: var(--muted); }
.filterbewaren__let[hidden] { display: none; }
.filterbewaren__let svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }

/* Bereik (persoonlijk/organisatie): pil-knoppen, zelfde "aan"-stijl als de
   rol-chips (.rolkiezer__chip, global). De rol-tagging zelf gebruikt de gedeelde
   .rolkiezer. Het rol-veld is verborgen bij 'persoonlijk'; het hidden-attribuut
   moet de display:flex van .bevestigmodal__veld verslaan. */
.filterbewaren__rollen[hidden] { display: none; }
.filterbewaren__bereik { display: flex; flex-wrap: wrap; gap: 6px; }
.filterbewaren__bereikknop {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-900); font: inherit; font-size: var(--fs-data); cursor: pointer;
}
.filterbewaren__bereikknop svg { width: 14px; height: 14px; }
.filterbewaren__bereikknop:hover { border-color: var(--blue-700); }
.filterbewaren__bereikknop.is-aan {
  background: var(--blue-700); border-color: var(--blue-700); color: var(--blue-100);
}