/*
 * ozk-intranet.css - de intranetlaag van het thema, in één bestand.
 *
 * Samengevoegd op 22-09-2026 uit de vijf losse bestanden die tijdens de
 * T13-parity-ronde per "chip" waren ontstaan. Ze laadden alle vijf in dezelfde
 * library en groep, direct achter elkaar, dus de cascade verandert hier niet:
 * de secties staan hieronder in exact de oude laadvolgorde.
 *
 *   1. dashboards  (eventkaart, aanmeldingenblok, startpagina's)
 *   2. lijsten     (foto's in rapporten, smoelenboek, kampkaart, filters)
 *   3. intake      (genderkleuren, REF/VOG-kolommen)
 *   4. charts      (pivot- en statistiektabellen)
 *   5. chrome      (rolmenu's, rapporttitel, headerslot, footer)
 *
 * Bewust NIET meegenomen: ozk-d7-parity-extra.css. Dat bestand is een brede
 * D7-pariteitslaag die ook publieke pagina's raakt; er een "intranetdeel" uit
 * snijden vraagt een regel-voor-regel-oordeel over 1791 regels en levert geen
 * onderhoudswinst op. Zie WERKWIJZE paragraaf 17.
 *
 * Verificatie bij het samenvoegen: computed styles van 172 selectoren op zes
 * pagina's en twee breedtes, vóór en na, moeten identiek zijn.
 */


/* ======================================================================
   SECTIE DASHBOARDS (was ozk-intra-dashboards.css)
   ====================================================================== */

/*
 * ozk-intra-dashboards.css — T13 intranet-visuele-parity (chip "dashboards").
 * Exclusief eigendom van die chip-sessie; andere sessies schrijven hier NIET.
 * Zie /usr/local/bin/migratie/specs/t13-intranet-visuele-replicatie.md
 *
 * D7-referentiewaarden: computed styles van www.onvergetelijk.nl/intra/JK1/start
 * (uid 6145, 1280px, 2026-07-18) — specs/intranet-visueel/shots/t13-chip1/
 * styles-d7-jk1start.json vs styles-d11-jk1start.json.
 */

/* ======================================================================
   EVENTKAART (view beschikbaarheid_alert, o.a. display block_alert_intra
   op de 9 /intra/<kamp>/start-nodes; zelfde markup op de publieke
   aanmeld-displays — daar gold op D7 dezelfde site-brede styling)
   ====================================================================== */

/* Veld-labels (Locatie/Start/Leeftijd/Einde/Jongens/Meisjes).
   D7: Porto-skin `html .heading-primary` = #c13c61 + Rambla 16px.
   D11-basis was bootstrap-h4 24px/300 in Open Sans (zwart). */
.view-beschikbaarheid-alert h4.heading-primary {
  color: #c13c61;
  font-family: Rambla, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  margin: 3px 0 0;
}

/* Titelbalk ("JEUGDKAMP WEEK 1 - 2026"): D7 rendert .parentdiv direct in de
   pane (48px hoog); D11 wikkelt hem in een views-table → td-padding 8px +
   table-marges + border-bottom = lege grijze zone onder de balk. Strip die
   tabel-chrome; .parentdiv (bg #f5f5f5, margin 5px 0 15px) doet de rest. */
.view-beschikbaarheid-alert .view-content table,
.view-beschikbaarheid-alert .view-content table > :not(caption) > * > * {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

/* Kaptitel: D7 21px (D11-basis 22.03px). Rambla/uppercase erven al. */
.view-beschikbaarheid-alert .h2heading {
  font-size: 21px;
}

/* Kaartveld-cellen: D7-td's hebben links geen padding. */
.view-beschikbaarheid-alert .view-footer table td {
  padding: 8px 8px 8px 0;
}

/* Waarde-tekst onder de labels: D7 14px/20px. */
.view-beschikbaarheid-alert div.tall {
  font-size: 14px;
  line-height: 20px;
}

/* ======================================================================
   AANMELDINGEN-blok (views_block:aanmeldingen_charts-tabel_dl_alles,
   linkerkolom onder de eventkaart — LB-verplaatsing 2026-07-18)
   ====================================================================== */

/* Blocklabels AANMELDINGEN/WACHTLIJST in de D7-boxheader-look (.parentdiv/
   .boxheader/.h2heading-metingen: bg #f5f5f5, pad 5px 10px, 21px Rambla
   uppercase #232323, margin 5px 0 15px). */
.block-views-blockaanmeldingen-charts-tabel-dl-alles > h2,
.block-views-blockaanmeldingen-charts-tabel-d-wachtlijst > h2,
.block-views-blockaanmeldingen-aandachtspunten-jarig-block > h2 {
  background-color: #f5f5f5;
  color: #232323;
  font-family: Rambla, Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.8;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 5px 0 15px;
}

/* Kolomkoppen: bron-labels zijn "Rol/M/V/T" — D7 toont ze zonder caps. */
.view-id-aanmeldingen_charts.view-display-id-tabel_dl_alles th,
.view-id-aanmeldingen_charts.view-display-id-tabel_d_wachtlijst th {
  text-transform: none;
}

/* AANMELDINGEN en WACHTLIJST staan op D7 naast elkaar onder de eventkaart,
   elk op de halve kolombreedte — ook als er (zoals bij de meeste kampen)
   geen wachtlijst is en het tweede blok dus niets rendert. Zelfde
   inline-block-patroon als de plek-blokjes hierboven. */
@media screen and (min-width: 40em) {
  .node--type-intra .layout__region--first .block-views-blockaanmeldingen-charts-tabel-dl-alles,
  .node--type-intra .layout__region--first .block-views-blockaanmeldingen-charts-tabel-d-wachtlijst {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
  }
  .node--type-intra .layout__region--first .block-views-blockaanmeldingen-charts-tabel-dl-alles {
    margin-right: 12px;
  }
}

/* Plek jongens/meisjes-blokjes als paar naast elkaar in de linkerkolom van de
 * kamp-deelnemerspaginas (D7-positie: linksboven onder de leeftijdschart;
 * verplaatst uit de fourcol-sectie op verzoek Richard 27-07). inline-block
 * i.p.v. float zodat de flex-regio geen clearing nodig heeft; de -10px vangt
 * de inline-block-whitespace. Onder de core-stapelgrens (40em) gewoon 100%. */
@media screen and (min-width: 40em) {
  .node--type-intra .layout__region--first .block-views-blockevent-kenmerken-plek-jongens-blk,
  .node--type-intra .layout__region--first .block-views-blockevent-kenmerken-plek-meisjes-blk {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
  }
  .node--type-intra .layout__region--first .block-views-blockevent-kenmerken-plek-jongens-blk {
    margin-right: 12px;
  }
}


/* ======================================================================
   SECTIE LIJSTEN (was ozk-intra-lijsten.css)
   ====================================================================== */

/*
 * ozk-intra-lijsten.css — T13 intranet-visuele-parity (chip "lijsten").
 * Exclusief eigendom van die chip-sessie; andere sessies schrijven hier NIET.
 * Zie /usr/local/bin/migratie/specs/t13-intranet-visuele-replicatie.md
 */

/* ── Foto's in lijsten/rapporten (1:1 uit D7 Porto_sub/custom_sub.css) ──────
 * Op D11 rendert het CiviCRM image_URL-veld via de ozk_civicrm_image_styled-
 * formatter een <img>; de wrapper-div geeft de D7-look (vaste maat + rand).
 * object-fit:cover schaalt de image-style-derivative (bv. ozk_square_400)
 * netjes in het vierkant zonder vervorming — D7 laadde de rauwe foto in de div.
 */
div.profielfoto {
	/* Was een vaste 256x256 met een mediaquery die pas onder 768px vloeiend
	   werd. Op precies 768px gold die query niet en paste de rij fotoblokken
	   net niet meer: de pagina liep daar 46px over (gemeten 22-09-2026 op
	   /rapport/smoelenboek/leiding). Nu overal dezelfde regel: maximaal de
	   D7-maat, maar krimpen als de kolom smaller is. Op desktop is de kolom
	   ruimer dan 256px, dus daar blijft het beeld exact gelijk. */
	width: 100%;
	max-width: 256px;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
	border: 1px solid darkgrey;
	margin: auto;
}
div.profielfoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

div.rapportfoto {
	width: 32px;
	height: 32px;
	overflow: hidden;
	border: 1px solid darkgrey;
}
div.rapportfoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* In views-TABELLEN rendert Drupal geen veld-wrapper-div: de foto zit direct
 * in de <td> (cel herkenbaar aan headers="view-image-url*-table-column").
 * Zelfde 32px-thumb-look als D7's div.rapportfoto, nu op de cel-img.
 */
td[headers*="view-image-url"] img,
td[headers*="view-image-url-1"] img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: 1px solid darkgrey;
	display: block;
}
td[headers*="view-image-url"] a {
	display: inline-block;
	line-height: 0;
}

/* BEWUST BETER DAN D7: het fotoraster heeft vaste 256px-cellen, waardoor de
 * pagina op smalle schermen horizontaal overloopt (gemeten 27-07: D7 wordt op
 * een 390px-viewport 1063px breed, D11 543px). Onder de md-grens schalen de
 * foto's mee, zodat er geen horizontale scroll meer nodig is. Alleen kleiner
 * maken — op desktop blijft de D7-maat exact. */
/* (de mobiele uitzondering voor div.profielfoto is opgegaan in de regel
   hierboven, die nu op elke breedte geldt) */

/* Smoelenboek leiding: naam als gecentreerde kop, functie eronder (D7-look). */
.view-id-charts_smoelenboek.view-display-id-smoelenboek_leid .views-field-display-name h3 {
	text-align: center;
	margin: .4em 0 .1em;
}
.view-id-charts_smoelenboek.view-display-id-smoelenboek_leid .views-field-functie-568 h4 {
	text-align: center;
	margin: 0;
}

/* Lange namen breken binnen hun kolom af in plaats van buiten de pagina.
 * Op 390px is het 4-koloms grid 92px breed en passen 23 van de 454 namen over
 * de acht kampen daar niet in ("Esmée Boendermaker" vraagt 119px).
 * Let op waaróm dit structureel is en niet één pagina betreft: alleen een naam
 * in de VIERDE kolom (begint op 287px) verbreedt de pagina — 287 + 119 = 406,
 * dus +16px. Staat diezelfde naam in kolom 1-3, dan valt hij over zijn buur
 * heen en meet de pagina 0px. De rijvolgorde bepaalt dus of je het ziet: op
 * 17-09 viel het op kk1, op 18-09 op bk1 ("Laura Boendermaker", tot 406px) en
 * jk2 (+1px) terwijl kk1 toevallig schoon mat. Zeven van de acht pagina's
 * dragen zulke namen, dus het is latent op alle.
 * Gemeten 18-09-2026 op dev met deze regel: 8 van 8 pagina's 0 namen buiten
 * hun kolom en +0px overflow, met JS aan en uit. Op 768px (kolom 174px) en
 * breder past alles al en meet dev identiek aan next — daarom geen
 * media-query: de regel grijpt alleen als het nodig is.
 * `display:block` op .field-content lijkt ook te helpen maar is schijn: de
 * cel meet dan netjes, terwijl de tekst nog steeds buiten de pagina steekt. */
.view-id-charts_smoelenboek .views-field-display-name {
	overflow-wrap: break-word;
}

/* ── Kampkaart: marker per kampfunctie ─────────────────────────────────────
 * D7 kleurde de markers via de ip_geoloc-"differentiator" op
 * part_kampfunctie_969. Op D11 rendert leaflet een div-icon waarin het
 * kampfunctie-veld als CSS-class meekomt (ozk-kf-<functie>), zodat dezelfde
 * differentiatie hier met CSS gebeurt.
 */
.ozk-kaartmarker {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, .5);
	background: #3388ff;            /* fallback / onbekende functie */
}
.ozk-kaartmarker.ozk-kf-deelnemer      { background: #3388ff; }  /* blauw */
.ozk-kaartmarker.ozk-kf-groepsleiding  { background: #2e9e4f; }  /* groen */
.ozk-kaartmarker.ozk-kf-hoofdleiding   { background: #1c6b34; }  /* donkergroen */
.ozk-kaartmarker.ozk-kf-kampleiding    { background: #7b3fa0; }  /* paars */
.ozk-kaartmarker.ozk-kf-keukenteamlid  { background: #cc4d00; }  /* OZK-oranje */
.ozk-kaartmarker.ozk-kf-hoofdkeuken    { background: #b34d00; }  /* donkeroranje */
.ozk-kaartmarker.ozk-kf-kernteamlid    { background: #c13c61; }  /* OZK-roze */
.ozk-kaartmarker.ozk-kf-bestuurslid    { background: #8e2b47; }  /* donkerroze */
.ozk-kaartmarker.ozk-kf-kampstaf       { background: #6b7280; }  /* grijs */

/* Legenda onder de filters: dezelfde bolletjes met hun functienaam. */
.ozk-kaart-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin: 0 0 .75rem;
	font-size: .85rem;
}
.ozk-kaart-legenda span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.ozk-kaart-legenda .ozk-kaartmarker {
	width: 12px;
	height: 12px;
	border-width: 1px;
	box-shadow: none;
	flex: 0 0 auto;
}

/* Melding onder de kaart: deelnemers zonder geocode (uitklapbare namenlijst). */
.ozk-kaart-ontbrekend {
	margin: .5rem 0 1rem;
	font-size: .85rem;
	color: #555;
}
.ozk-kaart-ontbrekend summary {
	cursor: pointer;
}
.ozk-kaart-ontbrekend ul {
	margin: .35rem 0 0 1.1rem;
}

/* ── Kampkaart: popup ──────────────────────────────────────────────────────
 * Zonder max-width duwt de profielfoto de popup breder dan leaflets
 * maxWidth, waardoor de tekst in een smalle kolom naast de foto belandt.
 */
.ozk-kaart-popup {
	line-height: 1.35;
}
.ozk-kaart-popup img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 .5em;
}
.ozk-kaart-popup .ozk-kaart-meta {
	color: #555;
	font-size: .9em;
}
/* Losse velden komen uit views met een div-wrapper; die mag hier niet
 * afbreken midden in een regel. */
.ozk-kaart-popup .ozk-kaart-meta div {
	display: inline;
}

/* ── Intranet-rapporten: exposed filters op één nette regel ────────────────
 * Views zet de filters in een d-flex/flex-wrap zonder vaste kolommen, wat
 * bij acht filters een rommelig trapje geeft. Een grid met gelijke kolommen
 * lijnt labels en velden uit, ongeacht het aantal filters.
 */
.view-id-charts_kaart .views-exposed-form > .d-flex {
	/* Bootstrap's .d-flex is display:flex !important; alleen zo te overrulen. */
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .5rem .9rem;
	align-items: end;
	margin-bottom: 1rem;
}
.view-id-charts_kaart .views-exposed-form .js-form-item,
.view-id-charts_kaart .views-exposed-form .form-actions {
	margin-bottom: 0;
	min-width: 0;
}
.view-id-charts_kaart .views-exposed-form label {
	display: block;
	margin-bottom: .15rem;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.view-id-charts_kaart .views-exposed-form .form-control,
.view-id-charts_kaart .views-exposed-form .form-select {
	width: 100%;
}
.view-id-charts_kaart .views-exposed-form .form-actions {
	margin-bottom: 0;
}
/* Selects met 20+ opties krijgen een chosen-widget naast de originele select;
 * die laatste blijft als smal restant met eigen pijl staan. Chosen de kolom
 * laten vullen en het restant verbergen. */
.view-id-charts_kaart .views-exposed-form .chosen-container {
	width: 100% !important;
	/* De container erft de pijl-achtergrond van .form-select, terwijl chosen
	 * binnenin zijn eigen pijl tekent: vandaar de dubbele chevron. */
	background-image: none;
}
.view-id-charts_kaart .views-exposed-form .chosen-container .chosen-single {
	width: 100%;
}
.view-id-charts_kaart .views-exposed-form select.form-select:has(+ .chosen-container) {
	display: none;
}
/* Chosen kopieert de classes van de select mee, dus de container krijgt ook
 * Bootstrap's .form-select: die zet een eigen chevron-achtergrond, padding en
 * rand bovenop chosen's pijl in .chosen-single b. Dat gaf twee pijlen naast
 * elkaar en een kader in een kader. De container is een wrapper, geen veld —
 * die styling hoort er af, .chosen-single levert zijn eigen rand. */
.view-id-charts_kaart .views-exposed-form .chosen-container.form-select {
	background-image: none;
	padding: 0;
	border: 0;
	height: auto;
	min-height: 0;
	line-height: inherit;
}
/* Een meervoudige keuzelijst (kampfunctie) is standaard vijf regels hoog en
 * rekt daarmee zijn hele gridrij op; met align-items:end zakken de buren dan
 * naar beneden en valt er een gat onder de rij erboven. Drie regels houdt de
 * lijst bruikbaar en de rij ongeveer even hoog als de andere filters. */
.view-id-charts_kaart .views-exposed-form select[multiple] {
	height: 4.6rem;
}

/* Aandachtspunt-badge (dieet/medisch): oranje vierkant met "x" (1:1 D7). */
div.issues_yes {
	background-color: #cc4d00 !important;
	color: #cc4d00;
	padding: 3px;
	width: 32px;
	height: 32px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}


/* ======================================================================
   SECTIE INTAKE (was ozk-intra-intake.css)
   ====================================================================== */

/*
 * ozk-intra-intake.css — T13 intranet-visuele-parity (chip "intake").
 * Exclusief eigendom van die chip-sessie; andere sessies schrijven hier NIET.
 * Zie /usr/local/bin/migratie/specs/t13-intranet-visuele-replicatie.md
 */

/* ========================================================================
 * D7 custom_sub.css r2063-2074: gender-kleurblokjes (32x32) in de
 * eval-lijsten (nextkamp-cijfer per jongen/meisje). Vielen buiten het
 * T4-geporte bereik r889-1497.
 * ======================================================================== */
/* D7 custom_sub.css r2063 */
div.jongen {
	background-color: #006E83 !important;
	color: white;
	padding: 3px;
	width:  32px;
	height: 32px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
/* D7 custom_sub.css r2074 */
div.meisje {
	background-color: #c13c61 !important;
	color: white;
	padding: 3px;
	width:  32px;
	height: 32px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

/* ========================================================================
 * REF- en VOG-blok staan op D7 náást elkaar (panes l_7 + c_3_, elk ~555px).
 * Op D11 wrapte de rechterkolom onder de linker: een flex-item krimpt niet
 * onder zijn min-content-breedte, en de VOG-tabel (6 kolommen, lange namen)
 * meet 614px > de 558px die de kolom biedt. min-width:0 heft die bodem op;
 * Bootstrap's .table-responsive scrollt dan binnen het blok — óók op 390px,
 * waar de 614px anders de hele pagina horizontaal liet meescrollen.
 * ======================================================================== */
.layout__region:has(.block-views-blockcivicrm-activities-ref-blk),
.layout__region:has(.block-views-blockcivicrm-activities-vog-blk) {
	min-width: 0;
}
.block-views-blockcivicrm-activities-ref-blk .table-responsive,
.block-views-blockcivicrm-activities-vog-blk .table-responsive {
	overflow-x: auto;
}

/* ========================================================================
 * Tablet-breakpoint gelijktrekken met D7. D7 (Porto/Bootstrap 3) stapelt
 * tweekoloms-secties onder 992px; Drupal core's layout--twocol-section
 * schakelt pas bij 40em (640px), waardoor D11 op 900px twee smalle kolommen
 * naast elkaar hield waar D7 al één kolom toont. Gescoped op de secties van
 * de intake-pagina's (balken-sectie en REF/VOG-sectie), zodat andere chips'
 * layouts ongemoeid blijven.
 * ======================================================================== */
@media (max-width: 991.98px) {
	.layout--twocol-section:has(.block-views-blockintake-dash-naw-graph),
	.layout--twocol-section:has(.block-views-blockcivicrm-activities-vog-blk) {
		display: block;
	}
	.layout--twocol-section:has(.block-views-blockintake-dash-naw-graph) > .layout__region,
	.layout--twocol-section:has(.block-views-blockcivicrm-activities-vog-blk) > .layout__region {
		width: 100%;
		max-width: 100%;
		flex: 0 1 100%;
	}
}

/* ------------------------------------------------------------------------
 * De TAAK-kolom in het VOG-blok is een D11-toevoeging: het blok is de merge
 * van twee D7-blokken (VOG-aanvraag + VOG-ontvangst) en TAAK maakt zichtbaar
 * welke van de twee een rij is. D7 had die kolom niet. Onder 992px duwt hij
 * de STATUS-kolom met de kleurbadge buiten beeld, dus daar verbergen we hem
 * — D7-conform en de statusinformatie blijft leesbaar.
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.block-views-blockcivicrm-activities-vog-blk td.views-field-activity-type,
	.block-views-blockcivicrm-activities-vog-blk th.views-field-activity-type {
		display: none;
	}
}

/* ========================================================================
 * REF-blok (civicrm_activities:ref_blk): foto-thumbnails klein vierkant.
 * Geen D7-pixelreferentie (D7-alertblokken toonden geen foto's; foto's zijn
 * een bewuste D11-toevoeging, T5/0bca0a8) — 64x64 gekozen zodat de rijen
 * compact blijven; bron-derivative is image style thumbnail (100x100).
 * ======================================================================== */
.view-display-id-ref_blk td.views-field-image-URL img,
.view-display-id-ref_blk td.views-field-image-url img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}


/* ======================================================================
   SECTIE CHARTS (was ozk-intra-charts.css)
   ====================================================================== */

/*
 * ozk-intra-charts.css — T13 intranet-visuele-parity (chip "charts").
 * Exclusief eigendom van die chip-sessie; andere sessies schrijven hier NIET.
 * Zie /usr/local/bin/migratie/specs/t13-intranet-visuele-replicatie.md
 */

/* ======================================================================== */
/* 1. PIVOT-/STATISTIEKTABELLEN (views aanmeldingen_charts +               */
/*    contributions_charts) — D7-Porto-tabelbeeld:                          */
/*    wit, dunne rijlijnen, geen zebra/kolomlijnen, kop zonder achtergrond, */
/*    vette totaalrij (tfoot) met dikke rand. D7-bron: Porto bootstrap-3    */
/*    .table + custom_sub.css r186-192 (.view td padding 4px,               */
/*    eerste/laatste kolom zonder zijpadding).                              */
/* ======================================================================== */
.view-aanmeldingen-charts table.table,
.view-contributions-charts table.table {
    width: 100%;
    background-color: #fff;
    margin-bottom: 15px;
}

.view-aanmeldingen-charts table.table > :not(caption) > * > *,
.view-contributions-charts table.table > :not(caption) > * > * {
    /* neutraliseer bootstrap-5 css-variabelen (zebra/grijze vulling) */
    background-color: #fff;
    box-shadow: none;
    color: inherit;
}

.view-aanmeldingen-charts table.table th,
.view-aanmeldingen-charts table.table td,
.view-contributions-charts table.table th,
.view-contributions-charts table.table td {
    padding: 4px 8px;
    border: 0;
    border-top: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.view-aanmeldingen-charts table.table th:first-child,
.view-aanmeldingen-charts table.table td:first-child,
.view-contributions-charts table.table th:first-child,
.view-contributions-charts table.table td:first-child {
    padding-left: 0;
}

.view-aanmeldingen-charts table.table th:last-child,
.view-aanmeldingen-charts table.table td:last-child,
.view-contributions-charts table.table th:last-child,
.view-contributions-charts table.table td:last-child {
    padding-right: 0;
}

.view-aanmeldingen-charts table.table > thead > tr > th,
.view-contributions-charts table.table > thead > tr > th {
    border-top: 0;
    border-bottom: 2px solid #ddd;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

/* Totaalrij (views_aggregator zet totalen in tfoot): vet + dikke afsluit- */
/* rand, zoals de D7-kruistabellen.                                        */
.view-aanmeldingen-charts table.table > tfoot > tr > td,
.view-contributions-charts table.table > tfoot > tr > td {
    font-weight: 700;
    border-top: 2px solid #ccc;
    border-bottom: 3px double #ccc;
}

/* Bootstrap-'row' op .view-content zonder kolom-kinderen geeft negatieve  */
/* marges (bekende barrio-klasse, zie ozk-d7-parity-extra.css r1015):      */
/* neutraliseren voor alle chart-/pivotblokken van deze views.             */
.view-aanmeldingen-charts .view-content.row,
.view-contributions-charts .view-content.row {
    margin-left: 0;
    margin-right: 0;
}

/* ======================================================================== */
/* 2. BLOKTITELS ALS D7-BOXHEADER — zelfde gemeten waarden als chip 1        */
/*    (ozk-intra-dashboards.css r66: bg #f5f5f5, pad 5px 10px, 21px Rambla   */
/*    uppercase #232323), maar dan voor álle chart-/pivotblokken van de      */
/*    views aanmeldingen_charts + contributions_charts (T13 chip 4 zette de  */
/*    labels via LB views_label).                                           */
/* ======================================================================== */
[class*="block-views-blockaanmeldingen-charts"] > h2,
[class*="block-views-blockaanmeldingen-aandachtspunten"] > h2,
[class*="block-views-blockintra-taken"] > h2,
.block-ozk-afform-inline > h2,
[class*="block-views-blockcontributions-charts"] > h2,
/* Bestuursdashboard (29-09-2026): linkblok, kaart en takenrollen dezelfde kop. */
.node--type-intra .block-inline-blockbasic > h2,
.block-views-blockcharts-kaart-kaart-bestuur > h2,
.block-views-blockevent-kenmerken-kampstaf-bestuur-blk > h2,
.block-views-blockevent-kenmerken-kampstaf-wk1-blk > h2,
.block-views-blockevent-kenmerken-kampstaf-wk2-blk > h2,
.block-views-blockevent-kenmerken-vacatures-block-kamp > h2,
.node--type-intra .block-field-blocknodeintrabody > h2 {
    background-color: #f5f5f5;
    color: #232323;
    font-family: Rambla, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 5px 0 15px;
}

/* D7-lege-staat wachtlijst/criteria: grijs vlak (D7 .box.parentdiv).       */
.view-aanmeldingen-charts .view-empty .box.parentdiv {
    background-color: #f5f5f5;
    padding: 12px;
    text-align: center;
}

/* Kampkorten in de all-camps-kruistabellen als KK1/BK2 (D7); de rauwe     */
/* veldwaarde is lowercase. Alleen op deze displays — andere pivots tonen  */
/* in de eerste kolom gewone tekst (deelnemer, het Mussennest).            */
.view-display-id-tabel_d_alles table.table > tbody > tr > td:first-child,
.view-display-id-tabel_l_alles table.table > tbody > tr > td:first-child,
.view-display-id-tabel_l_perkamp table.table > tbody > tr > td:first-child,
.view-display-id-tabel_d_wachtlijst_perkamp table.table > tbody > tr > td:first-child,
.view-display-id-wachtlijst_alle_blk table.table > tbody > tr > td:first-child {
    text-transform: uppercase;
}

/* Vacatures: gezochte vrouwen/mannen als dun roze/blauw label in de cel     */
/* (Richard 29-09-2026; de 32px-blokjes div.meisje/.jongen maakten de rijen  */
/* te hoog). De rewrite in event_kenmerken:vacatures_block_kamp zet ze neer. */
.ozk-vac-v,
.ozk-vac-m,
.ozk-vac-p {
    display: inline-block;
    min-width: 2.4em;
    padding: 0 .35em;
    margin-right: 2px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}
.ozk-vac-v { background-color: #c13c61; }
.ozk-vac-m { background-color: #006E83; }
/* 2V en 2M naast elkaar houden, ook als de kolom smal wordt (Richard 29-09). */
.view-display-id-vacatures_wk1_blk td.views-field-vacatures-groepsleiding-904-1,
.view-display-id-vacatures_wk2_blk td.views-field-vacatures-groepsleiding-904-1,
.view-display-id-vacatures_block_kamp td.views-field-vacatures-groepsleiding-904-1 {
    white-space: nowrap;
}

/* Belangstelling werving: kolommen 'Ingevuld' en 'Datum' mogen niet afbreken (Richard 04-10-2026). */
.view-belangstelling-werving td.views-field-bio-ingevuld-1496,
.view-belangstelling-werving th.views-field-bio-ingevuld-1496,
.view-belangstelling-werving td.views-field-bio-gecheckt-1497,
.view-belangstelling-werving th.views-field-bio-gecheckt-1497,
.view-belangstelling-werving td.views-field-datum-belangstelling-647,
.view-belangstelling-werving th.views-field-datum-belangstelling-647,
.view-belangstelling-werving td.views-field-datum-belangstelling-647-1,
.view-belangstelling-werving th.views-field-datum-belangstelling-647-1 {
    white-space: nowrap;
}
/* Keukenteam zoekt 'personen' zonder geslacht: groen (Richard 29-09-2026). */
.ozk-vac-p { background-color: #28881e; }

/* Takenrollen op het bestuursdashboard: negen kampkolommen passen niet op een */
/* telefoon; de cellen schoven over elkaar (Richard 29-09-2026). Scrollen    */
/* binnen het blok, de pagina zelf blijft op breedte.                        */
.block-views-blockevent-kenmerken-kampstaf-bestuur-blk .view-content {
    overflow-x: auto;
}
.block-views-blockevent-kenmerken-kampstaf-bestuur-blk .view-content > table {
    min-width: 760px;
}

/* Status- en telkleuren (Richard 29-09-2026). Deelnemers per kamp: M/V in  */
/* de beschikbaarheidsstatus van het kamp (ozk_pivot zet de klasse; nog plek */
/* en bijna vol blijven zonder kleur). Wachtlijst W/C/A: >0 oranje, >5 rood  */
/* (preprocess in ozk_views). Zo specifiek omdat de intranetregel           */
/* .view-aanmeldingen-charts table.table > :not(caption) > * > * (0,2,2)     */
/* color:inherit zet; deze selector is (0,2,3).                              */
table.table > tbody > tr > td.ozk-pivot-status--wachtlijst,
table.table > tbody > tr > td.ozk-tel--oranje {
    color: #cc4d00;
    font-weight: 700;
}
table.table > tbody > tr > td.ozk-pivot-status--vol,
table.table > tbody > tr > td.ozk-tel--rood {
    color: #b3261e;
    font-weight: 700;
}

/* Wachtlijsttabellen gelijk aan de draaitabellen ernaast: geen negatieve    */
/* Bootstrap-rijmarge (schoof de tabel ~12px naar links) en een gewone        */
/* totaalrij in plaats van de vette met dubbele lijn van views_aggregator.   */
.view-display-id-wachtlijst_alle_blk .view-content.row,
.view-display-id-tabel_d_wachtlijst_status .view-content.row {
    margin-left: 0;
    margin-right: 0;
}
/* (0,3,4): wint van de aggregator-totaalregel hierboven (0,2,4).          */
.view-aanmeldingen-charts.view-display-id-wachtlijst_alle_blk table.table > tfoot > tr > td,
.view-aanmeldingen-charts.view-display-id-tabel_d_wachtlijst_status table.table > tfoot > tr > td {
    font-weight: 400;
    border-top-width: 1px;
    border-bottom-width: 0;
}

/* Vacatures zonder om-en-om-strepen (Richard 29-09-2026): Bootstrap       */
/* table-striped kleurt oneven rijen met een inset box-shadow; die zetten    */
/* we hier uit ((0,3,2) wint van (0,2,2)). Geen hover-kleur meer: niet nodig */
/* bij een tabel van vier rijen.                                            */
.view-display-id-vacatures_wk1_blk .table-striped > tbody > tr:nth-of-type(odd) > *,
.view-display-id-vacatures_wk2_blk .table-striped > tbody > tr:nth-of-type(odd) > *,
.view-display-id-vacatures_block_kamp .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    box-shadow: none;
}

/* Knoppen in het blok Aanmelding op /account (Richard 10-10-2026): zelfde    */
/* opbouw als de checklist (a.button.indent + span.buttonicon), zodat de      */
/* teksten onder elkaar uitlijnen. Iconen uit de Material-subset: dashboard,   */
/* pest_control, warning. Intranet paars gevuld, teek en incident omlijnd.     */
.ozk-account-card a.button.ozk-knop-paars {
    background-color: var(--ozk-paars, #663399);
    border-color: var(--ozk-paars, #663399);
    color: #fff;
}
.ozk-account-card a.button.ozk-knop-paarsrand {
    background-color: #fff;
    border-color: var(--ozk-paars, #663399);
    color: var(--ozk-paars, #663399);
}
.ozk-account-card a.button.ozk-knop-paarsrand:hover,
.ozk-account-card a.button.ozk-knop-paarsrand:focus {
    background-color: var(--ozk-paars, #663399);
    color: #fff;
    opacity: 1;
}
/* Het icoon staat verticaal in het midden via de algemene regel voor         */
/* a.button.indent .buttonicon in ozk-knoppen.css (sectie 6).                 */

/* D7 verbergt lege statistiekblokken volledig; op D11 blijft door de       */
/* LB-bloklabels een zwevende kop staan (bv. de Ede-tabellen op een         */
/* niet-Ede-kamppagina). Verberg het blok als de view geen inhoud én geen   */
/* empty-tekst rendert (de "geen wachtlijst"-box blijft zo wél staan).      */
[class*="block-views-blockaanmeldingen-charts"]:not(:has(.view-content, .view-empty)),
[class*="block-views-blockcontributions-charts"]:not(:has(.view-content, .view-empty)) {
    display: none;
}


/* ======================================================================
   SECTIE CHROME (was ozk-intra-chrome.css)
   ====================================================================== */

/*
 * ozk-intra-chrome.css — T13 intranet-visuele-parity (chip "chrome").
 * Exclusief eigendom van die chip-sessie; andere sessies schrijven hier NIET.
 * Zie /usr/local/bin/migratie/specs/t13-intranet-visuele-replicatie.md
 *
 * D7-bronnen: specs/intranet-visueel/d7-chrome-css-uitsnede.md (kleuren/maten)
 * en d7-chrome-architectuur.md (regio's/blokken). Laadt ná ozk-porto-port.css
 * (libraries.yml-volgorde) en overschrijft diens §5-menuband bewust.
 */

/* ======================================================================== */
/* 1. SECUNDAIRE ROLMENUBALKEN (superfish-blokken in regio highlighted)     */
/*    D7-look = superfish white.css: doorlopende grijze cellenbalk over de  */
/*    volle containerbreedte; cellen verdelen zich naar inhoud (gemeten op  */
/*    D7 /account: 276/278/274/310 px op een 1140-container = flex 1 1 auto).*/
/*    Blijft óók op mobiel een horizontale balk (D7 390px: 82/84/80/114).   */
/* ======================================================================== */
.highlighted .block-superfish {
    background   : transparent;      /* porto-port §5: blauwe band */
    padding      : 0;
    margin       : 0 0 10px;
    /* ozk-d7-parity-extra.css:169 maakt de balk 100vw (full-bleed); D7's
       dominante look is contáinerbreed (h_12-panes en content-regio-balk,
       gemeten 1140px op 1280) — terugdraaien: */
    width        : auto;
    margin-left  : 0;
    margin-right : 0;
}
.highlighted .block-superfish .content {
    margin : 0;
    padding: 0;
}
.highlighted .block-superfish ul.sf-menu {
    display    : flex;
    flex-wrap  : nowrap;
    width      : 100%;
    margin     : 0;
    padding    : 0;
    list-style : none;
    line-height: 1;
}
.highlighted .block-superfish ul.sf-menu > li {
    flex            : 1 1 auto;
    background-color: #f9f9f9;       /* §5: #fff met knopjes-marges */
    border          : 0;
    margin          : 0;
    position        : relative;
}
.highlighted .block-superfish ul.sf-menu > li > a {
    display         : block;
    border          : 1px solid #e1e1e1;
    color           : #555555;
    /* 13px verticaal: balk net zo hoog als de bestuurs-/beheermenuknoppen
     * erboven (10px padding + groter font); verzoek Richard 27-07. */
    padding         : 13px 1em;
    font-family     : inherit;        /* §5: Rambla — D7-balk erft body-font */
    font-weight     : 400;
    font-size       : 14px;
    text-transform  : none;           /* items heten zelf al STAF/DEEL/... */
    text-decoration : none;
}
/* Aangrenzende cellen delen hun rand (D7: één 1px-lijn tussen cellen). */
.highlighted .block-superfish ul.sf-menu > li + li > a {
    border-left: 0;
}
.highlighted .block-superfish ul.sf-menu > li > a.sf-with-ul {
    padding-right: 2.25em;
}
.highlighted .block-superfish ul.sf-menu > li:hover,
.highlighted .block-superfish ul.sf-menu > li.sfHover,
.highlighted .block-superfish ul.sf-menu > li.active-trail {
    background-color: #e9e9e9;        /* §5: OZK-roze */
    border-color    : #e1e1e1;
}
.highlighted .block-superfish ul.sf-menu > li:hover > a,
.highlighted .block-superfish ul.sf-menu > li.sfHover > a,
.highlighted .block-superfish ul.sf-menu > li.active-trail > a {
    color: #555555;                   /* §5: wit */
}
/* Dropdowns: 2e niveau #f7f7f7, borders per link (white.css) */
.highlighted .block-superfish ul.sf-menu ul {
    background-color: #f7f7f7;
    border          : 0;
    width           : 14em;
    min-width       : 220px;
    padding         : 0;
    z-index         : 500;
}
.highlighted .block-superfish ul.sf-menu ul li {
    background-color: #f7f7f7;
    border          : 0;
    margin          : 0;
    width           : 100%;
}
.highlighted .block-superfish ul.sf-menu ul li a {
    display         : block;
    border          : 1px solid #e1e1e1;
    border-top      : 0;
    color           : #555555;
    padding         : 0.75em 1em;
    font-size       : 13px;
    text-transform  : none;
    text-decoration : none;
}
.highlighted .block-superfish ul.sf-menu ul li:hover > a {
    background-color: #e9e9e9;        /* §5: #eee + roze tekst */
    color           : #555555;
}

/* ======================================================================== */
/* 2. PAGINATITEL OP /rapport/* — D7 toonde de views-titel als grijze       */
/*    boxheader-balk ín de content (parentdiv/h2heading-patroon); D11 houdt */
/*    het route-H1-blok en krijgt hier dezelfde look. (/intra/* heeft geen  */
/*    titel meer: ozk_intranet_block_access; breadcrumb-blok: negate-paden.)*/
/* ======================================================================== */
body.path-rapport .block-page-title-block h1.title {
    background     : whitesmoke;
    font-family    : Rambla, Arial, Helvetica, sans-serif;
    font-size      : 21px;
    font-weight    : 400;
    text-transform : uppercase;
    padding        : 8px 10px;
    margin         : 5px 0 15px;
}

/* ======================================================================== */
/* 2b. HEADER-SLOTJE — D7's "intranet"-snelkoppeling rechtsboven            */
/*     (D7 block_custom 4370 in regio header_icons, fa-lock → /account, 9   */
/*     intranet-rollen, op élke pagina; class hidden-xs = niet op mobiel).  */
/*     D11: blok in regio header_form → binnen de navbar rechts van het     */
/*     menu. Zie specs/intranet-visueel/d11-header-slot-bouw.php.           */
/* ======================================================================== */
.ozk-header-slot {
    display    : flex;
    align-items: center;
    list-style : none;
    margin     : 0;
    padding    : 0;
}
/* Vierkante knop in de stijl van de superfish-hoofdknoppen en de zoekloep
   (superfish-ozk.css §1): wit, rand #e2e2e2 met 2px #ccc onderlangs, paars
   bij hover, donkerpaars bij klikken, zonder overgang (net als de menuknoppen). 36px binnenmaat = de hoogte van een
   menuknop (10px + 16px + 10px), dus de onderranden lopen in één lijn.
   Was een rondje van 30px uit D7, dat niet bij het D11-menu paste (12-10-2026). */
.ozk-header-slot li {
    margin-left: 5px;                    /* zelfde tussenruimte als de menuknoppen */
}
.ozk-header-slot li a {
    display         : flex;
    align-items     : center;
    justify-content : center;
    box-sizing      : content-box;
    width           : 36px;
    height          : 36px;
    background-color: #ffffff;
    border          : 1px solid #e2e2e2;
    border-bottom   : 2px solid #cccccc;
    color           : #444444;
    text-decoration : none;
}
.ozk-header-slot li a:hover,
.ozk-header-slot li a:focus-visible {
    background-color: #663399;
    border-color    : #663399;
    color           : #ffffff;
}
.ozk-header-slot li a:active {
    background-color: #511F84;
    border-color    : #511F84;
    color           : #ffffff;
}
/* Icoon = Material Symbols lock_person (blok 22), niet D7's fa-lock: Font
   Awesome laadt bewust niet op de homepage (bario_sub.theme), en daar stond
   het rondje leeg (12-10-2026). lock_person zit al in de subset. */
.ozk-header-slot li a .material-symbols-outlined {
    font-size  : 22px;
    line-height: 1;
}
/* D7's hidden-xs: onder de navbar-breakpoint (992, waar het menu in de
   hamburger klapt) toont D7 het slotje niet — daar staat het account-menu
   al in de uitgeklapte navigatie. */
@media (max-width: 991.98px) {
    .ozk-header-slot {
        display: none;
    }
}
/* Contextual-links (het potloodje) niet over icoonlinks (Richard 15-10-2026:
   "bij de enkele iconen die we tonen met linkje dat niet meer getoond
   wordt"). Core zet de trigger rechtsboven in de contextual-region, precies
   waar het slotje (30px-blok, sinds 04-08 eronder geschoven) en het hartje op
   een vacature staan. Gemeten 15-10 als beheerder: dit zijn de enige twee
   plekken waar het potloodje een icoon afdekt.
   - Het slotje-blok: bewerken kan via Blokinhoud.
   - De node op zijn eigen pagina (view mode full): daar staat het tabblad
     Bewerken al, het potloodje is dubbel. Teasers en blokken houden het.
   Op papier nooit een potloodje. */
#block-bario-sub-header-slot > .contextual,
.node--view-mode-full > .contextual {
    display: none;
}
@media print {
    .contextual {
        display: none !important;
    }
}

/* ======================================================================== */
/* 2b. MASQUERADE-BALK — onopvallende beeldbrede strook net boven de footer */
/* ======================================================================== */
.featured-bottom:has(#block-bario-sub-masquerade),
.featured-bottom:has(.block-masquerade) {
    background-color: #f4f5f7;
    border-top: 1px solid #e2e5e9;
    border-bottom: 1px solid #d9dce1;
    padding: 8px 0;
    margin-top: 2.5rem;
}

/* Laat de footer direct aansluiten onder de balk */
.featured-bottom:has(#block-bario-sub-masquerade) + footer.site-footer,
.featured-bottom:has(.block-masquerade) + footer.site-footer {
    margin-top: 0 !important;
}

/* Blok zelf: compact en zonder titel */
#block-bario-sub-masquerade,
.block-masquerade {
    margin: 0;
    padding: 0;
}
#block-bario-sub-masquerade h2,
.block-masquerade h2 {
    display: none !important;
}
#block-bario-sub-masquerade .content,
.block-masquerade .content {
    margin: 0;
    padding: 0;
}

/* Formulier compact en horizontaal uitgelijnd */
#masquerade-block-form {
    margin: 0;
    padding: 0;
}
#masquerade-block-form .container-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
#masquerade-block-form .form-item,
#masquerade-block-form .js-form-item {
    margin: 0 !important;
}
#masquerade-block-form .form-actions {
    margin: 0 !important;
}

/* Invoerveld rustig en compact */
#masquerade-block-form input.form-autocomplete,
#masquerade-block-form input[name="masquerade_as"] {
    height: 32px;
    min-height: 32px;
    font-size: 0.85rem;
    padding: 4px 10px;
    width: 220px;
    max-width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.5;
}
#masquerade-block-form input.form-autocomplete:focus,
#masquerade-block-form input[name="masquerade_as"]:focus {
    border-color: #999999;
    box-shadow: 0 0 0 0.15rem rgba(108, 117, 125, 0.2);
    outline: none;
}

/* Submit-knop in neutrale kleur (huisstijlgrijs / passend bij de footer) */
#block-bario-sub-masquerade .form-submit,
#masquerade-block-form input[type="submit"] {
    --bs-btn-bg:                    var(--ozk-grijs, #3c3c3b);
    --bs-btn-border-color:          var(--ozk-grijs, #3c3c3b);
    --bs-btn-hover-bg:              var(--ozk-grijs-donker, #2b2b2a);
    --bs-btn-hover-border-color:    var(--ozk-grijs-donker, #2b2b2a);
    --bs-btn-active-bg:             var(--ozk-grijs-klik, #1f1f1e);
    --bs-btn-active-border-color:   var(--ozk-grijs-klik, #1f1f1e);
    --bs-btn-color:                 #ffffff;
    --bs-btn-hover-color:           #ffffff;
    background-color: var(--ozk-grijs, #3c3c3b) !important;
    border: 1px solid var(--ozk-grijs, #3c3c3b) !important;
    color: #ffffff !important;
    height: 32px;
    min-height: 32px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 14px;
    line-height: 30px;
    border-radius: 4px;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
#block-bario-sub-masquerade .form-submit:hover,
#block-bario-sub-masquerade .form-submit:focus,
#masquerade-block-form input[type="submit"]:hover,
#masquerade-block-form input[type="submit"]:focus {
    background-color: var(--ozk-grijs-donker, #2b2b2a) !important;
    border-color: var(--ozk-grijs-donker, #2b2b2a) !important;
    color: #ffffff !important;
}

/* ======================================================================== */
/* 3. FOOTER — D7-groene 4-koloms footer (porto f_default + skin secondary) */
/*    Bron: d7-chrome-css-uitsnede.md §1. Kolommen D7 = col-md-3/3/4/2.     */
/*    Site-breed (D7 had één footer overal); kolom 1 wisselt op rol:        */
/*    anoniem "Volg ons"-social, ingelogd "Account"-menu (blokzichtbaarheid).*/
/* ======================================================================== */
/* Het footervlak is het HUISSTIJLGRIJS #3c3c3b, niet groen (besluit Richard
   4-8-2026, palet C). Twee redenen. Dit vlak draagt witte tekst — 140 links op
   elke pagina — en wit op grijs haalt 11,04:1, ruim boven de AA-grens; op het
   oude groen #439F35 was dat 3,36:1. En groen is volgens de ontwerpersmail van
   17-12-2015 "slechts voor accenten": een vlak van deze omvang hoort die kleur
   niet te dragen. Bijkomend: was de footer groen gebleven, dan hadden de knop
   "meedoen als leiding", het statuslabel "nog plek" en dit vlak dezelfde tint
   gekregen — één kleur met drie betekenissen. Zie kleurdemo/kleurkeuze.html. */
footer.site-footer {
    background : #3c3c3b;               /* was #28881e; html #footer.color-secondary */
    border-top : 4px solid #3c3c3b;
    color      : #ffffff;
    font-size  : 0.9em;
    /* Lucht tussen de content en de footer. Stond op 0 (D7 user_css:
       #footer{margin-top:0}) en dat viel niet op zolang de laatste blokken op een
       witte grond stonden: wit tegen wit ziet niemand. Gemeten 4-8-2026 liep de
       content op /kampen, /kinderkamp, /ouders/aandacht en /vrienden met 0px
       tegen de footer aan; alleen /blog had 16px. Zodra de CTA-kaarten een licht
       paneel kregen, plakte dat paneel zichtbaar tegen de footerrand (feedback
       Richard). 2,5rem is ruimer dan de 1,75rem blokafstand binnen een kolom —
       een sectiegrens hoort meer lucht te krijgen dan twee blokken onderling. */
    margin-top : 2.5rem;
    padding    : 70px 0 0;
}
footer.site-footer a {
    color: #ffffff;
}
footer.site-footer a:hover {
    color: #cccccc;
}
/* Vier regio's als D7-kolommen 3/3/4/2 (elk 12-dele grid); mobiel stapelen. */
footer.site-footer .site-footer__top {
    display  : flex;
    flex-wrap: wrap;
}
footer.site-footer .site-footer__top > .region {
    flex   : 0 0 100%;
    margin : 0 0 25px;                  /* D7: .container .row > div */
    padding: 0 15px;
}
/* Specificiteit: alle footer-regels hier dragen het `footer`-element mee,
   omdat Barrio's site-footer.css in een LATERE CSS-aggregate landt en bij
   gelijke specificiteit dus zou winnen (gemeten 2026-07-27). */
@media (min-width: 768px) {
    footer.site-footer .site-footer__top > .region-footer-first  { flex: 0 0 25%;      max-width: 25%; }
    footer.site-footer .site-footer__top > .region-footer-second { flex: 0 0 25%;      max-width: 25%; }
    footer.site-footer .site-footer__top > .region-footer-third  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    footer.site-footer .site-footer__top > .region-footer-fourth { flex: 0 0 16.6667%; max-width: 16.6667%; }
}
/* MOBIEL 2×2 (verzoek Richard 4-8-2026). Onder 768px stapelden de vier regio's
   tot één kolom, wat de footer bijna een hele schermhoogte maakte: vier koppen
   met elk drie tot vijf links. Twee naast twee halveert dat, en het spiegelt de
   CTA-kaarten die op dezelfde breedte ook 2×2 gaan.

   De regio's houden hun eigen breedte-regel boven 768px; deze query zit ertussen
   en raakt alleen het gestapelde bereik. `.region` heeft hierboven al
   `flex: 0 0 100%`, dus zonder deze override zou 50% niet aankomen — vandaar
   dezelfde selector-diepte (met `footer` mee, zie de opmerking hierboven over
   Barrio's latere aggregate). */
@media (max-width: 767.98px) {
    footer.site-footer .site-footer__top > .region {
        flex      : 0 0 50%;
        max-width : 50%;
        /* 12px tussen de twee footerrijen; met 20px stond er meer lucht tussen de
           kolommen dan ernáást, terwijl ze in een 2×2 juist als raster moeten
           lezen. */
        margin    : 0 0 12px;
    }
    /* De footer compacter op een telefoon, zodat de kaartenrij én de footer samen
       in beeld passen (feedback Richard 4-8-2026). Drie plekken, gemeten voor en
       na op 390px:
         wit onder de kaarten   40px -> 20px   (margin-top van dit vlak)
         grijs boven de 1e kop  37px -> 25px   (padding-top; was 70px in D7)
         tussen de footerrijen  20px -> 12px   (regio-marge hierboven)
       De 70px uit de D7-footer is gemaakt voor vier kolommen naast elkaar; in een
       2×2 is dat een leeg grijs vlak voordat er iets staat. De witruimte boven de
       footer blijft ruimer dan de 12px tussen twee kaartrijen — het is een
       sectiegrens, geen blokafstand. */
    footer.site-footer {
        margin-top : 1.25rem;
        padding-top: 18px;
    }
}
/* De regio's dragen bootstrap-'row'-class (negative margins) — neutraliseren. */
footer.site-footer .site-footer__top > .region.row {
    display: block;
}
/* De inlog-ingang van de kampleiding. Stond als "(intranet kampleiding)" achter
   een los `<br />`; dat las als een aanhangsel van de nieuwsbriefregel in plaats
   van een eigen ingang (4-8-2026). Nu een eigen regel met dezelfde opbouw als de
   regel erboven, en de ruimte die het `<br />` gaf hier in CSS. */
footer.site-footer .ozk-footer-inloggen {
    margin-top: 12px;
}
/* Barrio's site-footer.css (contrib, regel 96-99/122-152) geeft elk footerblok
   een kader, elke kop een onderstreping en elke menulink een border+text-indent
   — een donkere-footer-look die D7 niet heeft. Gericht neutraliseren. */
footer.site-footer .block {
    margin  : 0 0 20px;
    border  : 0;
    padding : 0;
}
footer.site-footer .content {
    color     : #ffffff;
    font-size : 1em;                    /* barrio: 0.857em */
    margin-top: 0;
}
footer.site-footer .content a,
footer.site-footer .content a.is-active {
    color           : #ffffff;
    text-decoration : none;
}
footer.site-footer .content a:hover,
footer.site-footer .content a:focus {
    color: #cccccc;
}
footer.site-footer .content ol:not(.menu),
footer.site-footer .content ul:not(.menu) {
    padding-left: 0;                    /* barrio: 1.4em */
}
footer.site-footer .site-footer__top .content li a {
    display     : inline;
    border      : 0;
    padding     : 0;
    text-indent : 0;
    line-height : inherit;
}
/* Kop boven elk blok: D7-bloktitel = h2, wit/Rambla/uppercase (custom_sub h2
   + #footer h2 wit); barrio maakt hem 1em grijs met onderstreping. */
footer.site-footer h2,
footer.site-footer .site-footer__top h2 {
    color          : #ffffff;
    border-bottom  : 0;
    font-family    : Rambla, Arial, Helvetica, sans-serif;
    font-size      : x-large;
    font-weight    : 400;
    margin         : 3px 0 12px;
    padding-bottom : 0;
    text-transform : uppercase;
}
/* Pijltjes-lijsten (Meehelpen/Over ons/Sitemap): D7 .list.list-icons-sm.    */
footer.site-footer ul.list {
    list-style: none;
    margin    : 0;
    padding   : 0;
}
footer.site-footer ul.list.list-icons li {
    position      : relative;
    padding-left  : 13px;               /* list-icons-sm */
    margin-bottom : 5px;
}
/* Het rode pijltje: Material Symbols arrow_right als ::before, voor deze
   lijsten én het accountmenu hieronder. Tot 12-10-2026 stond er in de
   blokken (15-18) een <i class="fa fa-caret-right"> en hier een FontAwesome-
   \f0da; Font Awesome is sindsdien van de site (Richard: "nergens"). */
footer.site-footer ul.list.list-icons li::before,
footer.site-footer .menu--account ul li::before {
    content                 : "arrow_right";
    font-family             : 'Material Symbols Outlined';
    font-weight             : normal;
    font-style              : normal;
    font-size               : 20px;
    line-height             : 1;
    font-feature-settings   : 'liga';
    -webkit-font-smoothing  : antialiased;
    position                : absolute;
    left                    : -6px;
    top                     : 1px;
    color                   : #c13c61;  /* skin: list-icons @color-primary */
}
/* Account-menukolom (ingelogd): zelfde look als de andere footerblokken
   (Meehelpen/Over ons/Sitemap) — compact, rood pijltje (#c13c61), geen
   scheidingslijnen, geen achtergrondhover. */
footer.site-footer .menu--account ul {
    display        : flex;
    flex-direction : column;            /* barrio zet .nav.flex-row */
    list-style     : none;
    margin         : 0;
    padding        : 0;
}
footer.site-footer .menu--account ul li {
    position      : relative;
    padding-left  : 13px;               /* list-icons-sm */
    margin-bottom : 5px;
    width         : 100%;
}
footer.site-footer .menu--account ul li a,
footer.site-footer .site-footer__top .menu--account .content li a,
footer.site-footer .site-footer__top .menu--account li a {
    display         : inline;
    border          : 0;
    padding         : 0;
    text-indent     : 0;
    line-height     : inherit;
    color           : #ffffff;
    background      : transparent;
    text-decoration : none;
}
footer.site-footer .menu--account ul li a:hover,
footer.site-footer .menu--account ul li a:focus,
footer.site-footer .site-footer__top .menu--account .content li a:hover,
footer.site-footer .site-footer__top .menu--account .content li a:focus,
footer.site-footer .site-footer__top .menu--account li a:hover,
footer.site-footer .site-footer__top .menu--account li a:focus {
    background      : transparent;
    color           : #cccccc;
    text-decoration : none;
}
footer.site-footer .menu--account ul li a.active,
footer.site-footer .menu--account ul li a.is-active {
    color           : #ffffff;
}
/* "Volg ons"-social-rondjes (anoniem, D7 header-social-icons in footer_11). */
footer.site-footer .social-icons {
    list-style: none;
    margin    : 0 0 10px;
    padding   : 0;
}
footer.site-footer .social-icons li {
    display      : inline-block;
    margin-right : 5px;
}
/* Wit rondje met de footerkleur als glyph. Deze icoontjes stonden op een groene
   glyph in een wit rondje; dat werkte zolang de footer zelf groen was — het
   rondje was dan de vorm die je zag. Op de grijze footer (4-8-2026) viel het uit
   elkaar: een groen symbool in een wit vlak op een grijze grond geeft drie
   kleuren op 30px en leest niet meer (feedback Richard). Nu is het rondje wit en
   de glyph de footerkleur, dus twee kleuren met 11,04:1 ertussen — en het rondje
   blijft de vorm. */
footer.site-footer .social-icons li a {
    display        : block;
    width          : 30px;
    height         : 30px;
    line-height    : 30px;
    text-align     : center;
    border-radius  : 50%;
    background     : #ffffff;
    color          : #3c3c3b;
    font-size      : 15px;
}
footer.site-footer .social-icons li a:hover {
    background: #eeeeee;
    color     : #000000;
}
/* De extlink-module hangt client-side een "externe link"-icoontje achter elke
   externe link; in een 30px-rondje geeft dat een dubbel icoon. D7 had extlink
   uit (system.status=0), dus in de social-rondjes hoort er niets bij. Alleen
   hier onderdrukt — of extlink site-breed uit moet, is een teamvraag
   (extlink.settings.yml is bezet door een andere sessie). */
footer.site-footer .social-icons li a .ext,
footer.site-footer .social-icons li a > svg,
footer.site-footer .social-icons li a img.ext,
footer.site-footer .social-icons li a::after {
    display: none !important;
}

/* Ruimte tussen linker- en rechterkolom op de intranet-paginas (Richard 27-07).
 * De intra-nodes gebruiken core-LB-layouts (layout--twocol-section 50-50/67-33)
 * die hun flexkolommen strak tegen elkaar zetten. Padding i.p.v. column-gap:
 * de 50%/33%-flex-basis hoeft dan niet te herrekenen (border-box, nooit
 * overflow). Zelfde 40em-grens als core/twocol_section.css:15 — daaronder
 * stapelen de kolommen en is tussenruimte ongewenst. */
@media screen and (min-width: 40em) {
  .node--type-intra .layout--twocol-section > .layout__region--first {
    padding-right: 15px;
  }
  .node--type-intra .layout--twocol-section > .layout__region--second {
    padding-left: 15px;
  }
}

/* ======================================================================== */
/* INTROBLOKKEN: KOPBALK UITGELIJND MET DE TEKST (24-09-2026)              */
/*    De doelgroepblokken (event_kenmerken start_/deel_/leid_/staf_*)      */
/*    renderen de kopbalk in een veld, dus binnen .view-content.row >      */
/*    .views-row, en de tekst in .view-footer. De row-marge is al op nul   */
/*    gezet (ozk-d7-parity-extra.css), maar Bootstrap geeft .row > * nog   */
/*    12px gutterpadding. Daardoor stond de kopbalk 12px ingesprongen en   */
/*    stak de tekst links en rechts buiten de kop uit.                     */
/* ======================================================================== */
.node--type-intra .view-event-kenmerken .view-content.row > .views-row:has(> .views-field .parentdiv) {
    padding-left : 0;
    padding-right: 0;
}

/* ======================================================================== */
/* TABEL DIRECT IN .view-content.row (24-09-2026)                           */
/*    Zonder kolom-wrapper houdt de tabel de negatieve guttermarge (-12px) */
/*    van de Bootstrap-row. In een layoutregio met overflow:auto kapt dat  */
/*    de eerste kolom af (gezien op /intra/kk1/dieet: "eelnemer",          */
/*    "eiding"). Tot nu toe per display gerepareerd (ozk-d7-parity-extra   */
/*    r1461, de chartviews hierboven); dit dekt elke view op intra.        */
/* ======================================================================== */
.node--type-intra .view-content.row:has(> table, > .table-responsive) {
    margin-left : 0;
    margin-right: 0;
}
/* Tabel met kolomprioriteit: tableresponsive wikkelt hem in .table-responsive,
   dat als kind van de row 12px gutterpadding krijgt. Met de marge hierboven op
   nul zou de tabel dan inspringen; zonder deze regel stak de wrapper 12px buiten
   het blok en kreeg het blok een scrollbalk (24-09-2026, /intra/<kamp>/gedrag). */
.node--type-intra .view-content.row > .table-responsive {
    padding-left : 0;
    padding-right: 0;
}

/* ======================================================================== */
/* AFFORM INLINE: CONTACTPERSONEN AANPASSEN (13-10-2026)                    */
/*    Blok ozk_afform_inline (afformTaken* op de kampdashboards) in de       */
/*    vorm van het vroegere taakblok (views intra_taken *_taken, weg 14-10): */
/*    kopbalk, wit vlak, label links op 9.5rem, invoer ernaast, lijn. De   */
/*    kopbalk staat bij de bloktitels (sectie 2).                          */
/*    RiverLea (walbrook) kleurt het formulier via variabelen op :root;     */
/*    die zetten we hier terug, zodat er geen losse overrides nodig zijn.   */
.ozk-afform-inline {
    --crm-font                 : inherit;
    --crm-page-bg-color        : transparent;
    --crm-f-fieldset-bg-color  : transparent;
    --crm-f-fieldset-padding   : 0;
    --crm-f-fieldset-margin    : 0 0 1rem;
    --crm-f-fieldset-box-shadow: none;
    --crm-f-fieldset-border    : 0;
    background-color           : transparent;
    font-family                : inherit;
    font-size                  : inherit;
    color                      : inherit;
}
/* De fieldsettitel herhaalt de bloktitel. */
.ozk-afform-inline fieldset.af-container > legend {
    display: none;
}
.ozk-afform-inline af-field {
    display              : grid;
    grid-template-columns: 9.5rem 1fr;
    column-gap           : 1rem;
    align-items          : center;
    padding              : .35rem 0;
    margin               : 0;
    border-bottom        : 1px solid #e6e6e6;
}
.ozk-afform-inline af-field label,
.ozk-afform-inline af-field .select2-chosen {
    font-family          : inherit;
}
.ozk-afform-inline af-field label {
    font-weight          : 600;
    color                : #555;
    font-size            : inherit;
    margin               : 0;
}
.ozk-afform-inline af-field .crm-af-field {
    margin               : 0;
}
/* select2 hangt zijn eigen vak in een .form-control: anders twee randen. */
.ozk-afform-inline af-field .select2-container.form-control {
    width                : 100% !important;
    max-width            : 22rem;
    padding              : 0;
    border               : 0;
    background           : transparent;
    box-shadow           : none;
}
/* Geen Opslaan-knop: js/ozk-afform-autosave.js slaat op bij elke wijziging (Richard 14-10-2026,
   de knop kostte een hele regel). De knop blijft in het afform staan, want het script klikt
   hem aan; #bootstrap-theme in de selector omdat RiverLea zijn knoppen met een ID zet. */
.ozk-afform-inline #bootstrap-theme button.af-button {
    display                        : none;
}
/* Knopmodus (formulier met tekstvelden, zie ozk-afform-autosave.js): de kleine Opslaan-knop
   rechts onder het laatste veld. min-height en height terug: .node__content .btn zet 48px en
   RiverLea een vaste --crm-btn-height, waardoor de "kleine" knop eerder toch een hele regel kostte. */
.ozk-afform-inline--knop #bootstrap-theme button.af-button {
    display                        : inline-flex;
    float                          : right;
    min-height                     : 0;
    height                         : auto;
    background-color               : #fff;
    color                          : #006E83;
    border                         : 1px solid #b7d3d9;
    border-radius                  : var(--bs-border-radius, .25rem);
    padding                        : .1rem .6rem;
    font-size                      : .85em;
    font-weight                    : 600;
    line-height                    : 1.5;
    margin                         : .4rem 0 0 0;
}
.ozk-afform-inline--knop #bootstrap-theme button.af-button:hover,
.ozk-afform-inline--knop #bootstrap-theme button.af-button:focus {
    background-color               : #006E83;
    border-color                   : #006E83;
    color                          : #fff;
}
.ozk-afform-inline--knop af-form::after {
    content                        : '';
    display                        : block;
    clear                          : both;
}
/* Hulpteksten onder het veld, in de invoerkolom (niet in de smalle labelkolom); tekstvelden
   over de volle kolombreedte. */
.ozk-afform-inline af-field .crm-af-field-help-pre,
.ozk-afform-inline af-field .crm-af-field-help-post {
    grid-column                    : 2;
    margin                         : 0 0 .2rem;
    font-size                      : .85em;
    color                          : #666;
}
.ozk-afform-inline af-field textarea,
.ozk-afform-inline af-field input[type="text"].form-control,
.ozk-afform-inline af-field input[type="url"].form-control {
    width                          : 100%;
    max-width                      : 100%;
}
@media (max-width: 575.98px) {
    .ozk-afform-inline af-field .crm-af-field-help-pre,
    .ozk-afform-inline af-field .crm-af-field-help-post { grid-column: 1; }
}
/* Uploadlinks in de kampinfo-formulieren. */
.ozk-afform-inline .ozk-afform-upload {
    margin                         : .35rem 0 .35rem 10.5rem;
    font-size                      : .9em;
}
@media (max-width: 575.98px) {
    .ozk-afform-inline .ozk-afform-upload { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .ozk-afform-inline af-field {
        grid-template-columns: 1fr;
        row-gap              : .25rem;
    }
}

/* Quote-kandidaten (rapport/evaluatie/quotes, 04-10-2026): de exposed filters staan naast elkaar
   zonder tussenruimte, waardoor labels tegen elkaar aan plakten ("Laatste keer meeAlgehele terugblik"). */
.view-id-aanmeldingen_evaluatie.view-display-id-quote_kandidaten .views-exposed-form .js-form-item,
.view-id-aanmeldingen_evaluatie.view-display-id-quote_kandidaten .views-exposed-form .form-actions {
  margin-right: 1.25rem;
}


/* ======================================================================
   PENNINGMEESTER - DECLARATIES (/intra/penningmeester/declaraties, 12-10-2026)
   Blokken uit view contributions, displays pm_decl_* (css_class ozk-pm).
   Kleuren: groen = betaald/klaar, oranje = wacht, rood = actie nodig.
   ====================================================================== */
[class*="block-views-blockcontributions-pm-decl"] > h2 {
    background-color: #f5f5f5;
    color: #232323;
    font-family: Rambla, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 5px 0 15px;
}

/* Kerncijfers: tegel met gekleurde strook links. */
.ozk-pm .ozk-pm-kpi {
    border-left: 6px solid #2f7ed8;
    background: #fff;
    padding: 6px 12px;
}
.ozk-pm-kpi-klaar .ozk-pm-kpi { border-left-color: #8bc34a; }
.ozk-pm-kpi-zonder .ozk-pm-kpi { border-left-color: #ef8a17; }
.ozk-pm-kpi-betaald .ozk-pm-kpi { border-left-color: #2e7d32; }
.ozk-pm-kpi__aantal {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}
.ozk-pm-kpi__bedrag {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.ozk-pm-kpi__sub {
    color: #666;
    font-size: 13px;
}

/* Tabellen: zelfde rustige opmaak als de financiële pivots van 874. */
.ozk-pm .view-content.row {
    margin-left: 0;
    margin-right: 0;
}
.ozk-pm .view-content {
    overflow-x: auto;
}
.ozk-pm table.table {
    width: 100%;
    background-color: #fff;
    margin-bottom: 15px;
}
.ozk-pm table.table > :not(caption) > * > * {
    background-color: #fff;
    box-shadow: none;
    color: inherit;
}
.ozk-pm table.table th,
.ozk-pm table.table td {
    padding: 4px 8px;
    border: 0;
    border-top: 1px solid #ddd;
    vertical-align: middle;
}
.ozk-pm table.table > thead > tr > th {
    border-top: 0;
    border-bottom: 2px solid #ddd;
    font-weight: 700;
}
.ozk-pm table.table > tfoot > tr > td {
    font-weight: 700;
    border-top: 2px solid #ccc;
    border-bottom: 3px double #ccc;
}
.ozk-pm table.table th.ozk-pm-getal,
.ozk-pm table.table td.ozk-pm-getal,
.ozk-pm table.table td.views-align-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ozk-pm table.table td.ozk-pm-rijtotaal {
    font-weight: 700;
}

/* Linkblok. */
.ozk-pm-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ozk-pm-links li {
    padding: 4px 0;
    border-top: 1px solid #eee;
}
.ozk-pm-links li:first-child {
    border-top: 0;
}
.ozk-pm-links a {
    font-weight: 700;
}
.ozk-pm-links__toel {
    color: #666;
    font-size: 13px;
}

/* Penningmeester: euroteken voor bedragkolommen in de aggregatortabellen. Het staat
   niet in de tekst zelf, want views_aggregator telt een '€' niet op. Alleen cellen
   (ook de totaalrij), geen kopjes, en niet bij een lege cel. */
.ozk-pm td.views-field-open-eur:not(:empty)::before,
.ozk-pm td.views-field-betaald-eur:not(:empty)::before,
.ozk-pm td.views-field-totaal-eur:not(:empty)::before,
.ozk-pm td.views-field-open-b:not(:empty)::before,
.ozk-pm td.views-field-betaald-b:not(:empty)::before {
  content: "€\00a0";
}