/* 2026-08-13 v1.6
 * - Keeps page headers in the content flow when the legacy small-screen shell fixes the site header.
 *
 * 2026-08-13 v1.5
 * - Keeps the mail-template selector compact and removes its mobile flex-basis height.
 *
 * 2026-08-13 v1.4
 * - Keeps the existing top-right account menu visible beside the portal navigation.
 *
 * 2026-08-07 v1.3
 * - Matches the desktop app sidebar and restores the five-action phone bottom navigation.
 *
 * 2026-08-04 v1.2
 * - Adds iPad-led management layouts for contributions, roles, scanner and safe email previews.
 *
 * 2026-08-04 v1.1
 * - Adds responsive invoice filters, segmented controls, view switching and list metadata.
 *
 * 2026-08-04 v1.0
 * - Adds the iPad-leading portal shell and responsive phone navigation.
 * - Adds shared dashboard, metric, status, filter, list and empty-state components.
 */

:root {
	--lidly-app-primary:#2a2a86;
	--lidly-app-secondary:#60baf4;
	--lidly-app-background:#f0efe9;
	--lidly-app-surface:#fffefd;
	--lidly-app-text:#34343c;
	--lidly-app-muted:#6c6c73;
	--lidly-app-success:#9fbc6a;
	--lidly-app-warning:#f8d548;
	--lidly-app-danger:#d1696f;
	--lidly-app-line:rgba(42,42,134,0.11);
	--lidly-sidebar-width:244px;
}

body:has(nav.ledenportaal-nav) {
	background-color:var(--lidly-app-background);
}

body:has(nav.ledenportaal-nav) main {
	box-sizing:border-box;
	min-height:100svh;
	background:var(--lidly-app-background);
}

nav.ledenportaal-nav .lidly-nav-mobile {
	display:none!important;
}

nav.ledenportaal-nav .lidly-nav-brand,
nav.ledenportaal-nav .lidly-nav-account {
	box-sizing:border-box;
	color:var(--lidly-app-primary);
	text-decoration:none;
}

nav.ledenportaal-nav .lidly-nav-brand {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:3px;
	padding:2px 10px 20px;
}

nav.ledenportaal-nav .lidly-nav-brand-title {
	font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
	font-size:28px;
	font-weight:800;
	letter-spacing:-0.04em;
}

nav.ledenportaal-nav .lidly-nav-brand-organization {
	max-width:100%;
	overflow:hidden;
	color:var(--lidly-app-muted);
	font-size:12px;
	font-weight:650;
	text-overflow:ellipsis;
	white-space:nowrap;
}

nav.ledenportaal-nav .lidly-nav-scroll {
	display:flex;
	min-height:0;
	flex:1 1 auto;
	flex-direction:column;
	gap:20px;
	overflow-y:auto;
	overflow-x:hidden;
	scrollbar-width:thin;
}

nav.ledenportaal-nav .lidly-nav-section {
	display:block;
	width:100%;
}

nav.ledenportaal-nav .lidly-nav-section-title {
	display:block;
	padding:0 10px 7px;
	color:var(--lidly-app-muted);
	font-size:10px;
	font-weight:750;
	letter-spacing:0.08em;
	text-align:left;
	text-transform:uppercase;
}

nav.ledenportaal-nav .lidly-nav-account {
	display:flex;
	align-items:center;
	gap:10px;
	min-height:58px;
	margin-top:16px;
	padding:9px 10px;
	border-radius:14px;
	background:color-mix(in srgb, var(--lidly-app-background) 82%, white);
}

nav.ledenportaal-nav .lidly-nav-account .avatar {
	width:36px;
	height:36px;
	min-width:36px;
	border-radius:50%;
	object-fit:cover;
}

nav.ledenportaal-nav .lidly-nav-account > span {
	display:flex;
	min-width:0;
	flex-direction:column;
	align-items:flex-start;
	line-height:1.15;
}

nav.ledenportaal-nav .lidly-nav-account :is(strong,small) {
	max-width:138px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

nav.ledenportaal-nav .lidly-nav-account strong {
	font-size:13px;
}

nav.ledenportaal-nav .lidly-nav-account small {
	color:var(--lidly-app-muted);
	font-size:11px;
}

body main .lidly-page-header {
	display:flex;
	position:static;
	inset:auto;
	width:auto;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	margin-bottom:24px;
}

body main .lidly-page-header > div:first-child {
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:4px;
}

body main .lidly-page-header h1 {
	margin:0;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
	font-size:clamp(38px,4.2vw,58px);
	font-weight:800;
	line-height:1;
	letter-spacing:-0.045em;
}

body main .lidly-page-header p {
	margin:0;
}

body main .lidly-metric-grid {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
	margin-bottom:24px;
}

body main .lidly-metric-card {
	display:grid;
	grid-template-columns:40px minmax(0,1fr);
	align-items:center;
	gap:10px;
	box-sizing:border-box;
	min-height:86px;
	padding:14px;
	border:1px solid var(--lidly-app-line);
	border-radius:18px;
	background:var(--lidly-app-surface);
	color:var(--lidly-app-text);
	text-decoration:none;
}

body main .lidly-metric-card:hover,
body main .lidly-metric-card:focus-visible {
	border-color:color-mix(in srgb, var(--lidly-app-primary) 35%, transparent);
	outline:0;
}

body main .lidly-metric-card > .fa {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background:color-mix(in srgb, var(--lidly-app-primary) 9%, white);
	color:var(--lidly-app-primary);
}

body main .lidly-metric-card--danger > .fa {
	background:color-mix(in srgb, var(--lidly-app-danger) 14%, white);
	color:color-mix(in srgb, var(--lidly-app-danger) 82%, black);
}

body main .lidly-metric-card--success > .fa {
	background:color-mix(in srgb, var(--lidly-app-success) 22%, white);
	color:color-mix(in srgb, var(--lidly-app-success) 70%, black);
}

body main .lidly-metric-card strong,
body main .lidly-metric-card small {
	display:block;
}

body main .lidly-metric-card strong {
	color:var(--lidly-app-primary);
	font-size:24px;
	line-height:1;
}

body main .lidly-metric-card small {
	margin-top:4px;
	color:var(--lidly-app-muted);
	font-size:13px;
}

body main .lidly-dashboard-grid {
	display:grid;
	grid-template-columns:minmax(0,1.45fr) minmax(280px,0.75fr);
	align-items:start;
	gap:18px;
}

body main .lidly-section-title {
	margin:0 0 10px;
	font-size:21px;
	letter-spacing:-0.025em;
}

body main .lidly-shortcut-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
}

body main .lidly-shortcut {
	display:flex;
	box-sizing:border-box;
	min-height:78px;
	flex-direction:column;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	padding:14px;
	border:0;
	border-radius:17px;
	background:var(--lidly-app-primary);
	color:#fff;
	font-size:15px;
	font-weight:750;
	text-decoration:none;
}

body main .lidly-shortcut:nth-child(even) {
	background:var(--lidly-app-secondary);
	color:var(--lidly-app-primary);
}

body main .lidly-status-card,
body main .lidly-panel,
body main .lidly-state-card,
body main .lidly-list-card {
	box-sizing:border-box;
	border:1px solid var(--lidly-app-line);
	border-radius:18px;
	background:var(--lidly-app-surface);
}

body main .lidly-status-card,
body main .lidly-panel,
body main .lidly-state-card {
	padding:18px;
}

body main .lidly-status-list,
body main .lidly-plain-list {
	display:flex;
	flex-direction:column;
	gap:9px;
	margin:0;
	padding:0;
	list-style:none;
}

body main .lidly-status-row {
	display:grid;
	grid-template-columns:10px minmax(0,1fr);
	align-items:center;
	gap:9px;
	color:var(--lidly-app-muted);
	font-size:14px;
}

body main .lidly-status-dot {
	width:9px;
	height:9px;
	border-radius:50%;
	background:var(--lidly-app-warning);
}

body main .lidly-status-row--success .lidly-status-dot {
	background:var(--lidly-app-success);
}

body main .lidly-status-row--danger .lidly-status-dot {
	background:var(--lidly-app-danger);
}

body main .lidly-state-card {
	display:flex;
	align-items:flex-start;
	gap:14px;
	max-width:760px;
}

body main .lidly-state-card > .fa {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	min-width:42px;
	border-radius:50%;
	background:color-mix(in srgb, var(--lidly-app-primary) 9%, white);
	color:var(--lidly-app-primary);
}

body main .lidly-state-card :is(h1,h2,p) {
	margin-top:0;
}

body main .lidly-state-card--error > .fa {
	background:color-mix(in srgb, var(--lidly-app-danger) 16%, white);
	color:var(--lidly-app-danger);
}

body main .lidly-toolbar {
	display:flex;
	flex-wrap:wrap;
	align-items:end;
	gap:10px;
	margin-bottom:14px;
	padding:10px;
	border:1px solid var(--lidly-app-line);
	border-radius:16px;
	background:var(--lidly-app-surface);
}

body main .lidly-toolbar > * {
	min-width:0;
}

body main .lidly-toolbar .lidly-toolbar-search {
	flex:1 1 260px;
}

body main .lidly-toolbar > label:not(.lidly-toolbar-search) {
	flex:1 1 140px;
}

body main .lidly-toolbar.lidly-template-toolbar {
	display:block;
}

body main .lidly-toolbar.lidly-template-toolbar > .lidly-template-selector {
	display:block;
	min-height:0;
	padding:0;
	border:0;
	flex:none;
}

body main .lidly-template-selector > span {
	display:block;
	margin:0 0 6px;
	font-size:14px;
	font-weight:650;
	line-height:1.25;
}

body main .lidly-template-selector > select {
	display:block;
	width:100%;
	min-height:48px;
	height:48px;
}

body main .lidly-segmented,
body main .lidly-filter-chips,
body main .lidly-view-switch,
body main .lidly-pagination {
	display:flex;
	align-items:center;
	gap:7px;
}

body main .lidly-segmented,
body main .lidly-filter-chips {
	margin-bottom:12px;
	overflow-x:auto;
}

body main .lidly-segmented a,
body main .lidly-filter-chips a,
body main .lidly-view-switch a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	min-height:36px;
	padding:8px 13px;
	border-radius:12px;
	background:color-mix(in srgb, var(--lidly-app-secondary) 14%, white);
	color:var(--lidly-app-primary);
	font-size:13px;
	font-weight:750;
	text-decoration:none;
	white-space:nowrap;
}

body main .lidly-segmented a[aria-current="page"],
body main .lidly-filter-chips a[aria-current="page"],
body main .lidly-view-switch a[aria-current="page"] {
	background:var(--lidly-app-primary);
	color:#fff;
}

body main .lidly-view-switch {
	justify-content:flex-end;
	margin:-4px 0 12px;
}

body main .lidly-view-switch a {
	gap:6px;
}

body main .lidly-invoice-list {
	grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
}

body main .lidly-invoice-card-meta {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:10px;
}

body main .lidly-invoice-card-meta > span,
body main .lidly-invoice-card-meta small {
	display:block;
}

body main .lidly-invoice-card-meta > span {
	font-size:13px;
	font-weight:700;
}

body main .lidly-invoice-card-meta small {
	margin-bottom:3px;
	color:var(--lidly-app-muted);
	font-size:11px;
	font-weight:500;
}

body main .lidly-table-scroll {
	max-width:100%;
	overflow-x:auto;
}

body main .lidly-table-scroll td small {
	display:block;
	color:var(--lidly-app-muted);
}

body main .lidly-contribution-grid,
body main .lidly-scanner-grid {
	display:grid;
	grid-template-columns:minmax(280px,0.8fr) minmax(0,1.2fr);
	align-items:start;
	gap:16px;
}

body main .lidly-contribution-date {
	dis:flex;
	align-items:end;
	gap:12px;
	margin-bottom:16px;
}

body main .lidly-contribution-steps {
	display:flex;
	flex-direction:column;
	gap:12px;
}

body main .lidly-step-heading {
	display:flex;
	align-items:center;
	gap:10px;
}

body main .lidly-step-heading > span {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--lidly-app-primary);
	color:#fff;
	font-weight:800;
}

body main .lidly-step-heading h2 {
	margin:0;
}

body main .lidly-selection-list,
body main .lidly-permission-list {
	display:flex;
	flex-direction:column;
	gap:7px;
	max-height:520px;
	overflow-y:auto;
}

body main .lidly-selection-list label,
body main .lidly-permission-list label {
	dis:grid;
	grid-template-columns:auto minmax(0,1fr);
	align-items:start;
	gap:9px;
	padding:9px;
	border-radius:11px;
	background:color-mix(in srgb, var(--lidly-app-secondary) 9%, white);
}

body main .lidly-selection-list :is(strong,small),
body main .lidly-permission-list :is(strong,small) {
	display:block;
}

body main .lidly-selection-list small,
body main .lidly-permission-list small {
	margin-top:2px;
	color:var(--lidly-app-muted);
}

body main .lidly-role-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	align-items:start;
	gap:12px;
	margin-bottom:24px;
}

body main .lidly-role-grid .lidly-panel,
body main form.lidly-list-card {
	dis:flex;
	flex-direction:column;
	gap:12px;
}

body main [data-lidly-api-status] {
	min-height:1.2em;
	margin:0;
	font-size:13px;
}

body main [data-lidly-api-status][data-state="success"] {
	color:var(--lidly-app-success);
}

body main [data-lidly-api-status][data-state="error"] {
	color:var(--lidly-app-danger);
}

body main .lidly-scanner-video {
	display:block;
	width:100%;
	margin-top:12px;
	border-radius:16px;
	background:#111;
	aspect-ratio:4/3;
	object-fit:cover;
}

body main .lidly-scanner-video[hidden] {
	display:none;
}

body main .lidly-email-preview {
	box-sizing:border-box;
	width:100%;
	min-height:560px;
	border:1px solid var(--lidly-app-line);
	border-radius:14px;
	background:#fff;
}

body main .lidly-pagination {
	justify-content:space-between;
	margin-top:16px;
}

body main .lidly-card-list {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:12px;
}

body main .lidly-list-card {
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:12px;
	padding:16px;
	color:var(--lidly-app-text);
	text-decoration:none;
}

body main .lidly-list-card-header {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}

body main .lidly-list-card :is(h2,h3,p) {
	margin:0;
}

body main .lidly-badge {
	display:inline-flex;
	align-items:center;
	gap:5px;
	box-sizing:border-box;
	min-height:27px;
	padding:5px 9px;
	border-radius:999px;
	background:color-mix(in srgb, var(--lidly-app-secondary) 20%, white);
	color:var(--lidly-app-primary);
	font-size:12px;
	font-weight:750;
	line-height:1;
}

body main .lidly-badge--success {
	background:color-mix(in srgb, var(--lidly-app-success) 28%, white);
	color:color-mix(in srgb, var(--lidly-app-success) 65%, black);
}

body main .lidly-badge--danger {
	background:color-mix(in srgb, var(--lidly-app-danger) 18%, white);
	color:color-mix(in srgb, var(--lidly-app-danger) 78%, black);
}

body main .lidly-badge--warning {
	background:color-mix(in srgb, var(--lidly-app-warning) 48%, white);
	color:color-mix(in srgb, var(--lidly-app-warning) 35%, black);
}

body main .lidly-test-strip {
	box-sizing:border-box;
	margin-bottom:16px;
	padding:8px 12px;
	border-radius:10px;
	background:color-mix(in srgb, var(--lidly-app-warning) 54%, white);
	color:color-mix(in srgb, var(--lidly-app-warning) 24%, black);
	font-size:13px;
	font-weight:750;
	text-align:center;
}

@media only screen and (min-width:821px) {
	nav.ledenportaal-nav {
		display:flex;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		z-index:30;
		box-sizing:border-box;
		width:var(--lidly-sidebar-width);
		min-width:var(--lidly-sidebar-width);
		max-width:var(--lidly-sidebar-width);
		padding:22px 16px 14px;
		border:0;
		border-right:1px solid var(--lidly-app-line);
		border-radius:0;
		background:color-mix(in srgb, var(--lidly-app-background) 76%, white);
		box-shadow:none;
		transform:none;
	}

	nav.ledenportaal-nav > div {
		display:flex;
		width:100%;
		min-width:0;
		min-height:0;
		flex:1 1 auto;
		flex-direction:column;
		overflow:visible;
	}

	nav.ledenportaal-nav .lidly-nav-section--account {
		display:none;
	}

	nav.ledenportaal-nav ul,
	nav.ledenportaal-nav ul li,
	nav.ledenportaal-nav ul li a {
		display:flex;
		box-sizing:border-box;
		width:100%;
		max-width:none;
		min-width:0;
		flex:none;
		flex-direction:column;
		text-align:left;
	}

	nav.ledenportaal-nav ul {
		gap:3px;
		margin:0;
		padding:0;
	}

	nav.ledenportaal-nav ul li {
		align-items:stretch;
	}

	nav.ledenportaal-nav ul li a {
		min-height:40px;
		flex-direction:row;
		align-items:center;
		justify-content:flex-start;
		gap:10px;
		padding:8px 10px;
		border-radius:10px;
		color:var(--lidly-app-text);
		font-size:13px;
		font-weight:610;
		line-height:1.15;
		text-decoration:none;
	}

	nav.ledenportaal-nav ul li a > *[class*="fa"] {
		display:inline-flex;
		align-items:center;
		justify-content:center!important;
		width:22px!important;
		height:22px!important;
		min-width:22px;
		max-width:22px;
		min-height:22px;
		max-height:22px;
		flex:0 0 22px;
		margin:0;
		border-radius:6px;
		font-size:14px!important;
	}

	nav.ledenportaal-nav ul li a .text {
		display:block;
		width:auto;
		max-width:none;
		overflow:hidden;
		font-size:13px;
		line-height:1.15;
		text-overflow:ellipsis;
		white-space:nowrap!important;
	}

	nav.ledenportaal-nav ul li.selected a {
		background:var(--lidly-app-primary);
		color:#fff;
	}

	nav.ledenportaal-nav ul li:hover a > *:not(span),
	nav.ledenportaal-nav:not(:hover) ul li.selected a > *:not(span),
	nav.ledenportaal-nav ul li.selected a *[class*="fa-"] {
		transform:none;
	}

	nav.ledenportaal-nav ul li:hover a > *[class*="fa"],
	nav.ledenportaal-nav:not(:has(ul li:hover)) ul li.selected a > *[class*="fa"] {
		background:transparent;
		box-shadow:none;
	}

	body:has(nav.ledenportaal-nav) main,
	body:has(.ledenportaal-nav) main {
		width:auto;
		max-width:none;
		margin-left:var(--lidly-sidebar-width);
		padding:34px clamp(26px,4vw,58px) 70px;
	}

	nav.login-nav {
		position:fixed;
		top:16px;
		right:20px;
		z-index:35;
		max-width:min(520px,calc(100vw - var(--lidly-sidebar-width) - 40px));
	}

	nav.login-nav ul {
		border:1px solid var(--lidly-app-line);
		border-radius:999px;
		background:rgba(255,254,253,0.9);
	}

	nav.login-nav ul li a {
		min-height:42px;
		padding:5px 10px;
	}
}

@media only screen and (max-width:1050px) and (min-width:821px) {
	:root {
		--lidly-sidebar-width:224px;
	}

	body main .lidly-metric-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	body main .lidly-dashboard-grid {
		grid-template-columns:1fr;
	}

	body main .lidly-contribution-grid,
	body main .lidly-scanner-grid,
	body main .lidly-role-grid {
		grid-template-columns:1fr;
	}
}

@media only screen and (max-width:820px) {
	body:has(nav.ledenportaal-nav) main,
	body:has(.ledenportaal-nav) main {
		margin-left:0;
		padding:22px 14px 112px;
	}

	nav.ledenportaal-nav {
		display:block;
		position:fixed;
		top:auto;
		bottom:10px;
		left:10px;
		right:10px;
		z-index:40;
		box-sizing:border-box;
		width:auto;
		max-width:none;
		height:78px;
		min-width:0;
		padding:7px;
		border:1px solid rgba(255,255,255,0.7);
		border-radius:22px;
		background:rgba(255,254,253,0.9);
		box-shadow:0 12px 34px rgba(42,42,76,0.16);
		-webkit-backdrop-filter:blur(18px) saturate(140%);
		backdrop-filter:blur(18px) saturate(140%);
		transform:none;
		overflow:hidden;
	}

	nav.ledenportaal-nav > div {
		display:flex;
		width:100%;
		min-width:0;
		overflow:visible;
	}

	nav.ledenportaal-nav .lidly-nav-desktop {
		display:none!important;
	}

	nav.ledenportaal-nav .lidly-nav-mobile {
		display:flex!important;
		width:100%;
		height:100%;
		min-width:0;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul {
		display:flex;
		width:100%;
		height:100%;
		min-width:0;
		flex:1 1 auto;
		flex-direction:row;
		align-items:stretch;
		justify-content:space-around;
		gap:2px;
		margin:0;
		padding:0;
		overflow:visible;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li {
		display:flex!important;
		width:auto;
		min-width:0;
		max-width:none;
		flex:1 1 0!important;
		align-items:stretch;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li a {
		display:flex;
		box-sizing:border-box;
		width:100%;
		max-width:none;
		min-width:0!important;
		min-height:62px;
		flex:1 1 auto!important;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:4px;
		padding:5px 3px;
		border-radius:16px;
		background:transparent;
		color:var(--lidly-app-primary);
		text-decoration:none;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li a > *[class*="fa"] {
		display:inline-flex;
		align-items:center;
		justify-content:center!important;
		width:26px!important;
		height:26px!important;
		min-width:26px;
		max-width:26px;
		min-height:26px;
		max-height:26px;
		flex:0 0 26px;
		margin:0;
		border-radius:50%;
		font-size:20px!important;
		transform:none;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li.selected a {
		background:transparent!important;
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li.selected a > *[class*="fa"] {
		background:color-mix(in srgb, var(--lidly-app-secondary) 26%, white);
		box-shadow:0 0 0 6px color-mix(in srgb, var(--lidly-app-secondary) 18%, transparent);
	}

	nav.ledenportaal-nav .lidly-nav-mobile ul li a .text {
		display:block;
		width:100%;
		max-width:100%;
		overflow:hidden;
		font-size:10px;
		font-weight:700;
		line-height:1.05;
		text-align:center;
		text-overflow:ellipsis;
		white-space:nowrap!important;
	}

	nav.ledenportaal-nav .lidly-nav-scroll {
		display:flex;
		width:100%;
		min-width:0;
		flex:1 1 auto;
		flex-direction:row;
		overflow:visible;
	}

	nav.ledenportaal-nav :is(.lidly-nav-brand,.lidly-nav-account,.lidly-nav-section-title,.lidly-nav-section--management,.hover-item-highlighter-wrapper) {
		display:none;
	}

	nav.ledenportaal-nav .lidly-nav-section--primary,
	nav.ledenportaal-nav .lidly-nav-section--account {
		display:contents;
	}

	nav.ledenportaal-nav ul {
		display:flex;
		width:auto;
		min-width:0;
		flex:1 1 auto;
		flex-direction:row;
		align-items:stretch;
		justify-content:space-around;
		gap:2px;
		margin:0;
		padding:0;
		overflow:visible;
	}

	nav.ledenportaal-nav .lidly-nav-section--primary ul {
		flex:2 1 0;
	}

	nav.ledenportaal-nav .lidly-nav-section--primary ul:has(li:nth-child(3)) {
		flex-grow:3;
	}

	nav.ledenportaal-nav .lidly-nav-section--account ul {
		flex:1 1 0;
	}

	nav.ledenportaal-nav ul li,
	nav.ledenportaal-nav:has(li:nth-child(6)) ul li {
		display:flex!important;
		width:auto;
		min-width:0;
		max-width:none;
		flex:1 1 0!important;
		align-items:stretch;
	}

	nav.ledenportaal-nav ul li a,
	nav.ledenportaal-nav:has(li:nth-child(6)) ul li a {
		display:flex;
		box-sizing:border-box;
		width:100%;
		max-width:none;
		min-width:0!important;
		min-height:62px;
		flex:1 1 auto!important;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:4px;
		padding:5px 3px;
		border-radius:16px;
		color:var(--lidly-app-primary);
		text-decoration:none;
	}

	nav.ledenportaal-nav ul li.selected a {
		background:color-mix(in srgb, var(--lidly-app-primary) 10%, white);
	}

	nav.ledenportaal-nav ul li a > *[class*="fa"] {
		display:inline-flex;
		align-items:center;
		justify-content:center!important;
		width:26px!important;
		height:26px!important;
		min-width:26px;
		max-width:26px;
		min-height:26px;
		max-height:26px;
		flex:0 0 26px;
		margin:0;
		font-size:20px!important;
	}

	nav.ledenportaal-nav ul li a .text,
	nav.ledenportaal-nav:has(li:nth-child(6)) ul li a .text {
		max-width:100%;
		overflow:hidden;
		font-size:10px;
		font-weight:700;
		line-height:1.05;
		text-overflow:ellipsis;
		white-space:nowrap!important;
	}

	body main .lidly-page-header {
		flex-direction:column;
		gap:12px;
	}

	body main .lidly-page-header h1 {
		font-size:40px;
	}

	body main .lidly-metric-grid,
	body main .lidly-shortcut-grid,
	body main .lidly-dashboard-grid,
	body main .lidly-card-list {
		grid-template-columns:1fr;
	}

	body main .lidly-metric-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:9px;
	}

	body main .lidly-metric-card {
		grid-template-columns:34px minmax(0,1fr);
		min-height:76px;
		padding:11px;
		border-radius:16px;
	}

	body main .lidly-metric-card > .fa {
		width:34px;
		height:34px;
	}

	body main .lidly-metric-card strong {
		font-size:20px;
	}

	body main .lidly-toolbar {
		align-items:stretch;
		flex-direction:column;
	}

	body main .lidly-toolbar .lidly-toolbar-search {
		flex:auto;
	}

	body main .lidly-contribution-grid,
	body main .lidly-scanner-grid,
	body main .lidly-role-grid {
		grid-template-columns:1fr;
	}

	body main .lidly-contribution-date {
		align-items:stretch;
		flex-direction:column;
	}

	body main .lidly-email-preview {
		min-height:420px;
	}

	body main .lidly-invoice-list {
		grid-template-columns:1fr;
	}

	body main .lidly-invoice-card-meta {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	body main .lidly-pagination {
		flex-wrap:wrap;
	}
}

@media (prefers-reduced-motion:reduce) {
	*,*::before,*::after {
		scroll-behavior:auto!important;
		transition-duration:0.01ms!important;
		animation-duration:0.01ms!important;
		animation-iteration-count:1!important;
	}
}