/* Herbruikbare portaal-UI (Mijn-Domeinen-stijl): detail-kop + dropdown-kiezer.
   Gebruikt door WebokeApp\Ui\Portaal (subTabs/kiezer/kop). De .wp-tabs/.wp-tab
   staan al in portal-shell.css. */

.wp-kop{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.wp-kop-rechts{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Kopieerknop naast de titel (Portaal::kop kopieer=true). Kleuren via de
   thema-variabelen, dus de nachtstand volgt vanzelf. */
.wp-kop-copy{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:-6px;padding:0;border:0;border-radius:8px;background:var(--body-bg,#f0f2f6);color:var(--gray-base,#5e636e);cursor:pointer}
.wp-kop-copy:hover{background:rgba(16,98,254,.1);color:var(--brand-primary,#1d65af)}
.wp-kop-copy:focus-visible{outline:3px solid rgba(16,98,254,.45);outline-offset:1px}
.wp-body[data-night="1"] .wp-kop-copy:hover{color:#ffc79a;background:rgba(255,164,92,.13)}

/* Titel zonder dropdown (1 item) */
.wp-kiezer-titel{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0}
.wp-kiezer-titel.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Dropdown-kiezer */
.wp-kiezer{position:relative}
.wp-kiezer-knop{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:9px;padding:2px 8px 2px 2px;margin:-2px -2px -2px -4px;cursor:pointer;font-family:inherit;color:inherit}
.wp-kiezer-knop:hover{background:rgba(16,98,254,.06);border-color:var(--gray-lighter-4)}
.wp-kiezer-knop[aria-expanded="true"]{background:rgba(16,98,254,.08);border-color:rgba(16,98,254,.35)}
.wp-kiezer-naam{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--gray-darker)}
.wp-kiezer-knop.mono .wp-kiezer-naam{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wp-kiezer-knop svg{color:var(--gray-lighter);flex:none}
.wp-kiezer-lijst{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;max-width:min(460px,92vw);max-height:min(60vh,460px);overflow-y:auto;background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:12px;box-shadow:var(--shadow-lift);z-index:60;padding:6px}
.wp-kiezer-item{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--gray-darker)}
.wp-kiezer-item:hover{background:rgba(16,98,254,.08)}
.wp-kiezer-item.actief{background:rgba(16,98,254,.1)}
.wp-kiezer-item-tekst{min-width:0;display:flex;flex-direction:column;gap:1px}
.wp-kiezer-item-naam{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-kiezer-item-naam.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wp-kiezer-item-sub{font-size:12.5px;color:var(--gray-lighter);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:560px){.wp-kiezer-naam{font-size:20px}.wp-kiezer-titel{font-size:20px}}

/* ---- Eerst tonen, dan laden: pulserende plaatshouders voor async live-data ---- */
.wp-skelet {
	display: inline-block;
	vertical-align: middle;
	min-width: 90px;
	height: 13px;
	border-radius: 7px;
	background: linear-gradient(90deg, rgba(15,23,42,.06) 25%, rgba(15,23,42,.14) 50%, rgba(15,23,42,.06) 75%);
	background-size: 200% 100%;
	animation: wp-skelet 1.1s linear infinite;
}
.wp-skelet.breed { min-width: 170px; }
.wp-skelet.smal { min-width: 60px; }
.wp-skelet.blok { display: block; height: 34px; border-radius: 9px; margin: 10px 0; min-width: 0; }
.wp-skelet.nschip { height: 24px; min-width: 140px; border-radius: 8px; margin-right: 6px; }
@keyframes wp-skelet {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-skelet { animation: none; }
}

/* Alleen-screenreader-tekst (WCAG: visueel verborgen, wel voorgelezen) */
.wp-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}