.emm-sso-panel {
	--emm-bg: #F7F7F6;
	--emm-card: #FFFFFF;
	--emm-text: #1C2331;
	--emm-muted: #6B7280;
	--emm-accent: #D9623A;
	--emm-border: #E2DDD6;
	--emm-font-heading: 'Poppins', sans-serif;
	--emm-font-body: 'Lora', serif;
	font-family: var(--emm-font-body);
	color: var(--emm-text);
	position: relative;
}

/* Alleen actief in de 'sitewide' weergave-modus, waar het thema volledig
   gebypassed wordt en deze CSS het enige is dat de pagina stijlt. */
body.emm-sso-fullpage {
	margin: 0;
	background: var(--emm-bg);
	font-family: var(--emm-font-body);
	min-height: 100vh;
	transition: background .3s ease, color .3s ease;
}
.emm-sso-fullpage-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px 48px;
}

.emm-sso-brand {
	text-align: center;
	margin-bottom: 20px;
}
.emm-sso-brand-logo { max-height: 60px; width: auto; margin: 0 auto; display: block; }
.emm-sso-brand-logo-dark { display: none; }
[data-theme="dark"] .emm-sso-brand-logo-light { display: none; }
[data-theme="dark"] .emm-sso-brand-logo-dark { display: block; }
.emm-sso-brand-name { font-family: var(--emm-font-heading); font-size: 20px; font-weight: 700; color: var(--emm-text); }

.emm-sso-welcome {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	font-size: 14px;
	color: var(--emm-text);
	margin-bottom: 20px;
}
.emm-sso-logout {
	color: var(--emm-muted);
	font-size: 13px;
	text-decoration: none;
}
.emm-sso-logout:hover { color: var(--emm-accent); }

.emm-sso-login-gate {
	max-width: 360px;
	margin: 0 auto;
}
.emm-sso-login-box {
	background: var(--emm-card);
	padding: 32px 28px;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.10);
	border-top: 3px solid var(--emm-accent);
	text-align: center;
}
.emm-sso-login-box .emm-sso-brand { margin-bottom: 16px; }
.emm-sso-login-box .emm-sso-brand-logo { margin: 0 auto; }
.emm-sso-login-box h1 {
	font-family: var(--emm-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--emm-text);
	margin: 0 0 20px;
}
.emm-sso-login-box form { display: flex; flex-direction: column; gap: 12px; }
.emm-sso-login-box input[type="text"],
.emm-sso-login-box input[type="password"] {
	padding: 11px 12px;
	border: 1px solid var(--emm-border);
	border-radius: 4px;
	font-size: 15px;
	font-family: var(--emm-font-body);
	color: var(--emm-text);
	background: var(--emm-bg);
}
.emm-sso-login-box input:focus { outline: none; border-color: var(--emm-accent); }
.emm-sso-login-box button[type="submit"] {
	padding: 12px;
	background: var(--emm-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: 600;
	font-size: 15px;
	font-family: var(--emm-font-heading);
	cursor: pointer;
}
.emm-sso-login-box button[type="submit"]:hover { filter: brightness(0.92); }
.emm-sso-login-error {
	color: var(--emm-accent);
	background: rgba(217, 98, 58, 0.1);
	border: 1px solid var(--emm-accent);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 13px;
	margin: 0 0 14px;
}

.emm-sso-toolbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}

.emm-sso-search-row {
	width: 100%;
	display: flex;
	justify-content: center;
}

.emm-sso-search {
	width: 100%;
	max-width: 320px;
	padding: 8px 14px;
	border: 1px solid var(--emm-border);
	border-radius: 20px;
	font-size: 14px;
	background: var(--emm-card);
	color: var(--emm-text);
	text-align: center;
}

.emm-sso-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.emm-filter-btn {
	background: var(--emm-card);
	border: 1px solid var(--emm-border);
	color: var(--emm-text);
	padding: 7px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-family: var(--emm-font-heading);
	cursor: pointer;
	transition: all .15s ease;
}
.emm-filter-btn.active { background: var(--emm-accent); border-color: var(--emm-accent); color: #fff; }

.emm-sso-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.emm-sso-card {
	position: relative;
	background: var(--emm-card);
	border-radius: 6px;
	border-top: 3px solid var(--emm-accent);
	padding: 20px 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	text-align: center;
	transition: background .3s ease, border-color .3s ease;
}
.emm-sso-card.emm-hidden { display: none; }
.emm-sso-card h3 { margin: 4px 0 6px; font-size: 15px; font-family: var(--emm-font-heading); color: var(--emm-text); }
.emm-sso-card p { margin: 0; font-size: 13px; color: var(--emm-muted); }

.emm-sso-btn {
	display: inline-block;
	margin-top: 14px;
	background: var(--emm-accent);
	color: #fff;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--emm-font-heading);
}

.emm-sso-fav-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	color: var(--emm-border);
	cursor: pointer;
}
.emm-sso-fav-btn.active { color: var(--emm-accent); }

.emm-sso-todo-section.emm-hidden,
.emm-sso-handboek-section.emm-hidden,
.emm-sso-grid.emm-hidden { display: none; }

/* ====== Handboek (PDF-viewer) ====== */
.emm-sso-handboek-pdf-wrap {
	background: var(--emm-card);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	border-top: 3px solid var(--emm-accent);
	overflow: hidden;
	height: 75vh;
	min-height: 420px;
}
.emm-sso-handboek-pdf-wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
.emm-sso-handboek-download { text-align: center; margin-top: 18px; }
.emm-sso-handboek-fallback {
	font-size: 13px;
	color: var(--emm-muted);
	text-align: center;
	margin-top: 10px;
}

.emm-sso-todo-list { list-style: none; margin: 0; padding: 0; background: var(--emm-card); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
.emm-sso-todo-item { border-bottom: 1px solid var(--emm-border); }
.emm-sso-todo-item.emm-hidden { display: none; }
.emm-sso-todo-item:last-child { border-bottom: none; }
.emm-sso-todo-item label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.emm-sso-todo-item.done span { color: var(--emm-muted); text-decoration: line-through; }
.emm-sso-todo-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--emm-accent); }

/* ====== Dark/light toggle-knop ====== */
.emm-sso-theme-toggle {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--emm-card);
	border: 2px solid var(--emm-border);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	transition: all .3s ease;
}
.emm-sso-theme-toggle:hover { border-color: var(--emm-accent); transform: scale(1.05); }
.emm-sso-theme-icon-dark { display: none; }
[data-theme="dark"] .emm-sso-theme-icon-light { display: none; }
[data-theme="dark"] .emm-sso-theme-icon-dark { display: inline; }
body.emm-sso-fullpage .emm-sso-theme-toggle { position: fixed; top: 24px; right: 24px; z-index: 999; }