/**
 * Opmaak voor het Afform "Deelnemer eerder naar huis melden"
 * (afformUpdateCustom_Event_Eerdernaarhuis).
 *
 * Zonder deze regels krijgt elk veld `flex: 1` van afCore.css en worden de drie
 * velden van een deelnemer over de volle schermbreedte uit elkaar getrokken.
 * De selectors zijn bewust een klasse specifieker dan
 * `.af-container.af-layout-inline > *`, zodat ze winnen zonder !important.
 */

.ozk-enh-blok {
    max-width: 1150px;
    margin: 0 0 10px 0;
    padding: 12px 16px 14px;
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 3px;
    overflow: hidden;   /* vangt uitstekende marges van kindelementen op */
}

/* CiviCRM en Bootstrap zetten allebei een marge onder elk formulierveld. Binnen een
   tegel is dat dubbelop met de tegelpadding en levert het een lege strook onderaan op.
   Twee dingen om rekening mee te houden:
   1. Afform rendert <af-field> als TAG met classes als `af-field-type-select` — er is
      geen class `af-field`, dus daarop selecteren pakt niets.
   2. Dit bestand laadt vóór civicrm.css; bij gelijke specificiteit wint CiviCRM. Vandaar
      de `.crm-container`-prefix, die een klasse extra weegt.
   Alles blijft binnen .ozk-enh-blok, dus buiten dit formulier verandert er niets. */
.crm-container .ozk-enh-blok af-field,
.crm-container .ozk-enh-blok [class*="af-field-type-"],
.crm-container .ozk-enh-blok .form-group,
.crm-container .ozk-enh-blok .form-item,
.crm-container .ozk-enh-blok .crm-section,
.crm-container .ozk-enh-blok .crm-form-elem,
.ozk-enh-blok af-field,
.ozk-enh-blok [class*="af-field-type-"],
.ozk-enh-blok .form-group,
.ozk-enh-blok .form-item,
.ozk-enh-blok .crm-section,
.ozk-enh-blok .crm-form-elem {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* af-field is een custom element; zonder display:block houdt het inline-gedrag
   (regelhoogte + descender-ruimte) onderaan de tegel over. */
.ozk-enh-blok af-field {
    display: block;
}

/* DE ECHTE BOOSDOENER: het Afform staat in <form id="bootstrap-theme">, en de
   Bootstrap-regels van CiviCRM zijn met dat ID geprefixt —
   `#bootstrap-theme .form-group{margin-bottom:15px}` heeft specificiteit 1,1,0.
   Een id verslaat elke klassenselector, hoeveel klassen je er ook voor zet; alleen
   met dezelfde id ervoor (1,2,0) win je. Vandaar dit blok. */
#bootstrap-theme .ozk-enh-blok .form-group,
#bootstrap-theme .ozk-enh-blok .crm-af-field,
#bootstrap-theme .ozk-enh-blok af-field,
#bootstrap-theme .ozk-enh-blok [class*="af-field-type-"],
#bootstrap-theme .ozk-enh-blok .ozk-enh-rij {
    margin-bottom: 0;
    padding-bottom: 0;
}

#bootstrap-theme .ozk-enh-blok .crm-af-field-label {
    margin-bottom: 2px;
}

.crm-container .ozk-enh-blok .ozk-enh-rij,
.ozk-enh-blok .ozk-enh-rij,
.ozk-enh-blok > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Eigen kop in plaats van <legend>: een legend hangt half over de rand van de
   fieldset heen, en dat leest als een weeskind boven het blok. */
.ozk-enh-blok .ozk-enh-kop {
    font-weight: 600;
    margin: 0 0 10px 0;
    padding: 0;
    color: #33475b;
}

.af-container.af-layout-inline.ozk-enh-rij {
    align-items: flex-start;
    gap: 12px;
}

.af-container.af-layout-inline.ozk-enh-rij > .ozk-enh-wie   { flex: 0 0 300px; }
.af-container.af-layout-inline.ozk-enh-rij > .ozk-enh-datum { flex: 0 0 195px; }
.af-container.af-layout-inline.ozk-enh-rij > .ozk-enh-reden { flex: 1 1 560px; }

/* DE WITRUIMTE ONDER DE VELDEN ZAT HIER, en niet in een marge:
   crm-ui-datepicker rendert een `.crm-form-date-wrapper` (inline-flex) met naast het
   invoerveld een wis-knopje `a.crm-clear-link`. Was de kolom te smal (140px), dan wrapte
   dat knopje naar een tweede regel — gemeten: wrapper 66px hoog tegen 56px voor de
   andere kolommen, en die 33px extra dook op als lege strook onderaan de tegel.
   Kolom verbreed naar 195px én wrappen uitgezet, zodat het knopje naast het veld blijft. */
#bootstrap-theme .ozk-enh-blok .crm-form-date-wrapper,
.ozk-enh-blok .crm-form-date-wrapper {
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
}

/* De toelichting mag de volle breedte van zijn kolom gebruiken. */
.ozk-enh-rij > .ozk-enh-reden input[type="text"] {
    width: 100%;
}

/* Terugkoppeling bovenaan: wat is er voor dit kamp al verwerkt.
   Bewust een andere achtergrond dan .ozk-enh-intro (grijs i.p.v. blauw): het ene blok
   is instructie, het andere is data. Zonder dat verschil lezen ze als één lap tekst. */
.ozk-enh-gemeld {
    max-width: 1150px;
    margin: 0 0 18px 0;
    padding: 12px 16px 8px;
    background: #f7f8f9;
    border: 1px solid #e2e6ea;
    border-radius: 3px;
}

.ozk-enh-gemeld .ozk-enh-gemeld-kop {
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #33475b;
}

/* De tabel staat al in een omkaderd blok; een tweede rand eromheen is ruis. */
.ozk-enh-gemeld .table {
    margin-bottom: 8px;
    background: transparent;
}

.ozk-enh-gemeld .ozk-enh-gemeld-uitleg {
    margin: 0 0 4px 0;
    font-size: 0.95em;
    color: #5a6572;
    line-height: 1.5;
}

/* Korte instructie bovenaan: wat te doen en waarom. */
.ozk-enh-intro {
    max-width: 900px;
    margin: 0 0 18px 0;
    padding: 12px 16px;
    background: #f4f8fb;
    border-left: 4px solid #663399;
    border-radius: 3px;
}

.ozk-enh-intro p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.ozk-enh-intro p:last-child {
    margin-bottom: 0;
}

.ozk-enh-intro .ozk-enh-let-op {
    font-size: 0.95em;
    color: #5a6572;
}

/* Het kampveld bovenaan is alleen ter bevestiging; geen halve schermbreedte.
   Het is een DisplayOnly-veld (platte tekst, geen input), want Text.html geeft
   `readonly` uit input_attrs niet door — alleen maxlength en placeholder. */
.ozk-enh-kamp {
    max-width: 420px;
    margin-bottom: 16px;
}

.ozk-enh-kamp .crm-af-field {
    font-weight: 600;
    font-size: 1.05em;
    padding: 2px 0;
}