/* 2026-06-03 v1.3
 * - Added consistent field spacing and widths for label/input pairs.
 * - Styled field focus and surface to match the ledenportaal navigation.
 * - Added a compact chevron indicator for select fields.
 * - Added a sticky CSV import toolbar style and primary import button emphasis.
 * - Added a reusable hero/top hgroup min-height for non-mobile layouts.
 * - Added balanced wrapping for paragraph text.
 * - Kept table headers on a single line and truncated overflow.
 * - Added a compact button-small variant for dense bulk actions.
 * - Added compact table-toolbar select padding for dense filters.
 * - Added shared font-size tokens and compact table-toolbar labels.
 */
:root {
	--yellow:#F8D548;
	--green:#9FBC6A;
	--red:#d1696f;
	--pink:#fa6aa9;
	--font-size-small:16px;
	--font-size-normal:20px;
	--font-size-big:24px;
	--lidly-field-gap:8px;
	--lidly-field-width:300px;
	--lidly-field-width-number:120px;
	--lidly-field-focus:rgba(96, 186, 244, 0.85);
	--lidly-field-surface:color-mix(in srgb, var(--lightcolor-mixed) 75%, transparent);
}
.bro-dust-overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px; 
	bottom: 0px;
	pointer-events: none;
}
.special {
	color:var(--secondarycolor);
}

body {
	background-color: var(--lightcolor);
	background-image: url('/themes/ledenportaal-lidly/images/backgrounds/subtle-beige-bg.jpg');
	color: color-mix(in srgb, var(--lightcolor) 35%, black);
} 

nav, h1 a, .portal-wrapper > .card {
	background-color: color-mix(in srgb, var(--lightcolor-mixed) 75%, transparent);
	backdrop-filter:blur(3px);
	border:0.5px solid rgba(255,255,255,0.05);
}

nav ul li a {
	color:var(--frontcolor);
}
li a *[class*="fa-"] {
	transition: 0.2s ease all;
}
*:is(nav ul li:hover, nav:not(:hover) li.selected) a > *:not(span) {
	color:rgba(96, 186, 244,1)!important;
	transform: scale(1.5,1.5);
	font-weight: 700;
}
li.selected a *[class*="fa-"] {
	transform: scale(1.5,1.5);
	font-weight: 700;
}
button, .button, label:not(.hug):not(.has-checkbox), input:not([type="checkbox"], [type="radio"]), select, textarea {
	display: inline-flex;
	border-radius: 10px;
	padding: 10px 30px;
	font-size: var(--font-size-normal);
	line-height: var(--font-size-normal);
}

label:not(.hug):not(.has-checkbox) {
	padding: 0px;
	border-radius: 0px;
}

form .group > div[title][name]:not([type="checkbox"]) {
	display:flex;
	flex-direction:column;
	gap:var(--lidly-field-gap);
	width:min(100%, var(--lidly-field-width));
}

form .group > div[title][name]:not([type="checkbox"]) > div {
	width:100%;
}

form .group > div[title][name][type="number"] {
	width:min(100%, var(--lidly-field-width-number));
}

form .group > div[title][name]:not([type="checkbox"]) > div > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	width:100%;
	max-width:100%;
}

input:not([type="checkbox"], [type="radio"]), select, textarea {
	line-height: 16px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 5px;
	background-color: var(--lidly-field-surface)!important;
	backdrop-filter:blur(3px);
	border:2px solid rgba(0,0,0,0.2)!important;
	color:#333;
	box-sizing:border-box;
}

select {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	padding-right:30px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='currentColor' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:10px 6px;
}

input:not([type="checkbox"], [type="radio"]):focus, select:focus, textarea:focus {
	border-color:var(--lidly-field-focus)!important;
	outline:none;
}

button, .button {
	border:2px solid rgba(0,0,0,0.1);
	color:#333;
}

.button-small {
	padding-left: var(--spacing-md,10px);
	padding-right: var(--spacing-md,10px);
}

.lidly-table-toolbar-field select {
	padding-left: var(--spacing-md,10px);
	padding-right: var(--spacing-md,10px);
	font-size: var(--font-size-small);
	line-height: var(--font-size-small);
}

.lidly-table-toolbar-field .title {
	font-size: var(--font-size-small);
	line-height: var(--font-size-small);
}

main {
	background: linear-gradient(110deg, rgba(0,0,0,0.05), rgba(0,0,0,0) 350px), linear-gradient(290deg, rgba(0,0,0,0.05), rgba(0,0,0,0) 550px);
	min-height: 100svh;
}

p {
	text-wrap: balance;
}

thead th {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (min-width: 821px) {
	hgroup.hero-hgroup,
	hgroup.top-hgroup {
		min-height: 100px;
	}
}


nav div { position: relative; }

/* overlay mag nooit hover/click blokkeren */
nav .hover-item-highlighter-wrapper{
	position:absolute;
	top:0px; left:0px; right:0px; bottom:0px;
	pointer-events:none;
}

nav .hover-item-highlighter{
	position:absolute;
	min-height:30px;
	pointer-events:none;

	/* elastic beweging: geen transition:all */
	will-change: transform, width, height;
	transition:
		transform 0.22s cubic-bezier(.34,1.56,.64,1),
		width     0.18s ease-out,
		height    0.18s ease-out;

	display:flex!important;
}

nav .hover-item-highlighter-inner{
	margin:auto;
	width:100%;
	height:100%;
	
	background-color: rgba(96, 186, 244, 0.2);
	border-radius:30px;
	min-height:30px;

	/* kleine “pop” op de fill zelf */
	will-change: transform;
	transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
	
}

nav.ledenportaal-nav .hover-item-highlighter-inner{
	max-width: 44px;
	max-height: 44px;
	margin-top: -14px!important;
	
}
*[class*="fa-check"] {
	color:var(--green);
	font-weight: 900!important;
}
a.spread:active {
	background-color: rgba(0,0,0,0.1);
}


p.important {
	background-color:var(--yellow,#F8D548);
	color: color-mix(in srgb, var(--yellow, #F8D548) 30%, black 70%);
	border-radius: 10px;
	text-wrap: balance;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}