/*
 * Gedeelde pagina-stijlen.
 *
 * Hier staan alleen patronen die op meerdere pagina's voorkomen en overal
 * hetzelfde horen te zijn. De chrome (header, nav, .page-shell, .page-card)
 * blijft in layout.phtml; pagina-specifieke stijl blijft in het <style>-blok
 * bovenaan het betreffende template.
 *
 * Dit bestand wordt in de <head> geladen en een template-<style> staat in de
 * body, dus een template kan een regel hieronder gewoon overschrijven.
 */

/* --- Secundaire tekst ------------------------------------------------- */

.muted {
	color: var(--brand-muted);
	font-size: 14px;
}

/* --- Meldingen -------------------------------------------------------- */

/*
 * .banner en .pim-banner zijn hetzelfde onderdeel onder twee namen; de
 * PIM-pagina's gebruiken historisch het pim-voorvoegsel. Ze staan hier samen
 * zodat ze niet uit elkaar gaan lopen.
 */
.banner,
.pim-banner {
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 14px;
}

.banner-success,
.pim-ok {
	background: #e6f6ec;
	color: #1f8a4c;
}

.banner-error,
.pim-bad {
	background: #fdecea;
	color: #c0392b;
}

.banner-warn,
.pim-warn {
	background: #fff4e0;
	color: #9a5b00;
}

/* --- Statusbolletje --------------------------------------------------- */

/*
 * Alleen de kleuren: de vorm (.dot) verschilt per pagina — inline-block in een
 * tabelcel, flex-item in een rij — dus die blijft lokaal.
 */
.dot-ok { background: #27ae60; }
.dot-fail { background: #e74c3c; }
.dot-unknown { background: #c9c4bb; }

/* --- Kleine knop ------------------------------------------------------ */

/* button.* omdat layout.phtml de maatvoering op het element zelf zet. */
button.btn-sm {
	min-width: 0;
	height: auto;
	padding: 4px 12px;
	font-size: 13px;
}