/*
 * Werkgeversportaal
 */

.sh-portal {
	max-width: 1200px;
	margin: 3rem auto 4rem;
	padding: 0 1.25rem;
	font-family: "Inter", system-ui, sans-serif;
	color: var(--ink);
}

.sh-login__brand-main h1.sh-login__title {color:#fff;}
.sh-login__form-wrap .sh-login__after {margin-top:20px;}

/* Header card */
.sh-portal__header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	padding: 2rem 2.25rem;
	background: var(--paars-05);
	border: 1px solid var(--lijn);
	border-radius: 16px;
	margin-bottom: 1.5rem;
}

.sh-portal__header-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	flex: 1 1 auto;
	min-width: 0;
}

.sh-portal__logo {
	flex: 0 0 auto;
	max-width: 180px;
}

.sh-portal__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 96px;
}

.sh-portal__title {
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--ink);
	text-transform: uppercase;
}

.sh-portal__nav {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
}

.sh-portal__link {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border-radius: 50px;
	text-decoration: none;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

.sh-portal__link:hover {
	background: rgba(162, 0, 118, 0.08);
	color: var(--paars);
}

.sh-portal__link--cta {
	background: var(--paars);
	color: #fff;
}

.sh-portal__link--cta:hover {
	background: var(--roze);
	color: #fff;
}

.sh-portal__link--muted {
	color: rgba(43, 18, 31, 0.55);
}

.sh-portal__link--muted:hover {
	background: rgba(43, 18, 31, 0.06);
	color: var(--ink);
}

/* Active state — when href === current URL the link gets a magenta underline pill */
.sh-portal__link[aria-current="page"],
.sh-portal__link.is-active {
	background: #fff;
	color: var(--paars);
	box-shadow: 0 1px 2px hsl(330 40% 12% / .06);
}

/* Section cards */
.sh-portal__section {
	padding: 2rem 2.25rem;
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: 16px;
	box-shadow: 0 1px 2px hsl(330 40% 12% / .05), 0 8px 24px -12px hsl(330 40% 12% / .12);
}

.sh-portal__section h3 {
	margin: 0 0 1.25rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--ink);
	text-transform: uppercase;
}

.sh-portal__section h4 {
	margin: 1.75rem 0 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lijn);
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sh-portal__section h4:first-of-type {
	margin-top: 0.5rem;
	padding-top: 0;
	border-top: 0;
}

.sh-portal__section p {
	color: var(--steen);
	line-height: 1.6;
}

/* Empty state */
.sh-portal__section > p:first-of-type {
	margin-top: 0;
}

.sh-portal__section a.sh-button,
.sh-portal__section button.sh-button,
.sh-portal__section a.sh-button--primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	background-color: var(--paars);
	color: #fff;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s ease, transform .15s ease;
}

.sh-portal__section a.sh-button:hover,
.sh-portal__section button.sh-button:hover,
.sh-portal__section a.sh-button--primary:hover {
	background-color: var(--roze);
	color: #fff;
}

.sh-portal__section a.sh-button:active,
.sh-portal__section button.sh-button:active {
	transform: translateY(1px);
}

/* Table */
.sh-portal__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--lijn);
	border-radius: 12px;
	overflow: hidden;
}

.sh-portal__table th,
.sh-portal__table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--lijn);
	font-size: 14px;
	vertical-align: middle;
}

.sh-portal__table thead th {
	background: var(--veld);
	font-family: "Inter", system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--lijn);
}

.sh-portal__table tbody tr:last-child td {
	border-bottom: 0;
}

.sh-portal__table tbody tr:hover td {
	background: var(--veld);
}

.sh-portal__table td a {
	color: var(--paars);
	font-weight: 600;
	text-decoration: none;
}

.sh-portal__table td a:hover {
	text-decoration: underline;
}

.sh-portal__table td:first-child a {
	color: var(--ink);
	font-weight: 600;
}

.sh-portal__table td:first-child a:hover {
	color: var(--paars);
}

/* Sollicitaties-cel: maak duidelijk dat het getal doorklikt naar de sollicitaties. */
.sh-portal__sollicitaties-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
}
.sh-portal__sollicitaties-count {
	font-weight: 700;
}
.sh-portal__sollicitaties-cta {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
	white-space: nowrap;
}
.sh-portal__sollicitaties-link:hover .sh-portal__sollicitaties-cta {
	text-decoration: underline;
}

/* Acties-cel: bewerken-icoon (potlood). */
.sh-portal__action--edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: var(--paars);
	transition: background 0.15s ease;
}
.sh-portal__action--edit:hover {
	background: var(--paars-05);
	text-decoration: none;
}
.sh-portal__action--edit svg {
	display: block;
}

/* Visueel verborgen, wel leesbaar voor screenreaders. */
.sh-portal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.sh-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 720px) {
	.sh-portal { margin: 1.5rem auto 2.5rem; }
	.sh-portal__header {
		flex-direction: column-reverse;
		align-items: flex-start;
		padding: 1.5rem 1.25rem;
		gap: 1.25rem;
	}
	.sh-portal__logo { max-width: 140px; }
	.sh-portal__logo img { max-height: 72px; }
	.sh-portal__title { font-size: 32px; }
	.sh-portal__section { padding: 1.5rem 1.25rem; }
	.sh-portal__section h3 { font-size: 24px; }
	.sh-portal__table { display: block; overflow-x: auto; }
}

/* Sollicitaties detail view */
.sh-portal__back {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.sh-portal__hint {
	color: rgba(43, 18, 31, 0.55);
	font-size: 0.85em;
	margin-left: 0.2em;
}
.sh-portal__back a {
	color: var(--paars);
	text-decoration: none;
	font-weight: 600;
}
.sh-portal__back a:hover { text-decoration: underline; }

.sh-sollicitaties {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sh-sollicitatie {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	background: #fff;
}

.sh-sollicitatie__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.sh-sollicitatie__naam {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
}

.sh-sollicitatie__datum {
	font-size: 0.85rem;
	color: rgba(43, 18, 31, 0.55);
}

.sh-sollicitatie__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.sh-sollicitatie__meta dt {
	font-weight: 600;
	color: rgba(43, 18, 31, 0.7);
}

.sh-sollicitatie__meta dd {
	margin: 0;
}

.sh-sollicitatie__meta a {
	color: var(--paars);
	text-decoration: none;
}

.sh-sollicitatie__meta a:hover { text-decoration: underline; }

.sh-sollicitatie__motivatie {
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.95rem;
}

.sh-sollicitatie__motivatie strong {
	display: block;
	margin-bottom: 0.35rem;
	color: rgba(43, 18, 31, 0.7);
}

.sh-sollicitatie__motivatie p {
	margin: 0;
}

/* Filter-balk */
.sh-sollicitaties__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.sh-sollicitaties__filter-link {
	display: inline-flex;
	padding: 0.4rem 0.9rem;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(43, 18, 31, 0.7);
	background: rgba(0, 0, 0, 0.04);
	text-decoration: none;
}
.sh-sollicitaties__filter-link:hover {
	background: rgba(162, 0, 118, 0.08);
	color: var(--paars);
}
.sh-sollicitaties__filter-link.is-active {
	background: var(--paars);
	color: #fff;
}

/* Status-badge */
.sh-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.sh-status-badge--nieuw       { background: rgba(27, 120, 187, 0.12); color: #1b78bb; }
.sh-status-badge--bekeken     { background: rgba(0, 0, 0, 0.08);     color: rgba(43, 18, 31, 0.65); }
.sh-status-badge--uitgenodigd { background: rgba(53, 141, 114, 0.15); color: #2d7560; }
.sh-status-badge--afgewezen   { background: rgba(214, 54, 56, 0.12); color: #b30000; }

/* Status-form per kaart */
.sh-sollicitatie__status-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.9rem;
	flex-wrap: wrap;
}
.sh-sollicitatie__status-label {
	font-weight: 600;
	color: rgba(43, 18, 31, 0.7);
}
.sh-sollicitatie__status-form select {
	padding: 0.4rem 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font-size: 0.9rem;
	background: #fff;
}
.sh-portal__section .sh-sollicitatie__status-form button.sh-button {
	padding: 0.45rem 1rem;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
}

.sh-status--active   { background: color-mix( in srgb, var(--awb-color6, #358d72) 12%, transparent ); color: var(--awb-color6, #358d72); }
.sh-status--draft    { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); }
.sh-status--pending  { background: color-mix( in srgb, #c60 10%, transparent ); color: #c60; }
.sh-status--expired  { background: color-mix( in srgb, #d63638 10%, transparent ); color: #b30000; }

/* ─── Login screen ──────────────────────────────────────── */
.sh-login {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--veld);
}
.sh-login__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 720px;
}

/* LEFT: brand panel */
.sh-login__brand {
	position: relative;
	overflow: hidden;
	background: var(--paars);
	color: #fff;
	padding: 80px 64px;
	display: flex;
	align-items: center;
}
.sh-login__brand::after {
	content: "";
	position: absolute;
	top: -8rem;
	right: -8rem;
	width: 850px;
	height: 850px;
	opacity: 0.12;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><circle cx='300' cy='300' r='80' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='300' cy='300' r='160' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='300' cy='300' r='240' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='300' cy='300' r='320' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='300' cy='300' r='400' fill='none' stroke='%23ffffff' stroke-width='3'/></svg>");
	background-repeat: no-repeat;
	background-size: cover;
}
.sh-login__brand-main {
	position: relative;
	z-index: 2;
	max-width: 520px;
}
.sh-login__stripe {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 28px;
	opacity: .9;
}
.sh-login__stripe::before {
	content: "";
	display: inline-block;
	height: 1px;
	width: 35px;
	background-color: currentColor;
	opacity: .7;
}
.sh-login__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 72px;
	line-height: 0.95;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: #fff;
}
.sh-login__lede {
	font-size: 17px;
	line-height: 1.55;
	max-width: 440px;
	margin: 0 0 40px;
	color: rgba(255,255,255,0.88);
}
.sh-login__stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0 48px;
	border-top: 1px solid rgba(255,255,255,0.25);
	padding-top: 28px;
	max-width: 480px;
}
.sh-login__stat-num {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	margin-bottom: 6px;
}
.sh-login__stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .8;
}

/* RIGHT: form panel */
.sh-login__form-wrap {
	background: var(--veld);
	padding: 80px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.sh-login__card {
	width: 100%;
	max-width: 460px;
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: 16px;
	box-shadow: 0 1px 2px hsl(330 40% 12% / .05), 0 8px 24px -8px hsl(330 40% 12% / .15);
	padding: 44px 44px 40px;
}
.sh-login__chip {
	display: inline-block;
	background: #A2007626;
	color: var(--paars);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 50px;
	margin-bottom: 20px;
}
.sh-login__heading {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1;
	margin: 0 0 10px;
	color: var(--ink);
}
.sh-login__sub {
	font-size: 15px;
	color: var(--steen);
	margin: 0 0 28px;
	line-height: 1.5;
}
.sh-login__error {
	background: #fdecec;
	border: 1px solid #f3c2c2;
	color: #a30000;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	margin-bottom: 20px;
}
.sh-login__field { margin-bottom: 18px; }
.sh-login__field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 8px;
}
.sh-login__field input[type="email"],
.sh-login__field input[type="password"],
.sh-login__field input[type="text"] {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.sh-login__field input::placeholder { color: var(--steen); }
.sh-login__field input:focus {
	outline: none;
	border-color: var(--paars);
	box-shadow: 0 0 0 3px rgba(162,0,118,0.15);
}
.sh-login__field--icon input { padding-right: 48px; }
.sh-login__input-wrap { position: relative; }
.sh-login__eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--paars);
	border-radius: 8px;
	padding: 0;
}
.sh-login__eye:hover { background: var(--paars-05); }
.sh-login__eye svg { width: 18px; height: 18px; display: block; }

.sh-login__row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 24px;
	font-size: 14px;
	gap: 12px;
	flex-wrap: wrap;
}
.sh-login__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--steen);
	user-select: none;
}
.sh-login__check input { accent-color: var(--paars); width: 16px; height: 16px; }
.sh-login__forgot {
	color: var(--paars);
	text-decoration: none;
	font-weight: 600;
}
.sh-login__forgot:hover { text-decoration: underline; }

.sh-login__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 52px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 0;
	border-radius: 50px;
	background: var(--paars);
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, transform .15s ease;
}
.sh-login__btn:hover { background: var(--roze); }
.sh-login__btn:active { transform: translateY(1px); }
.sh-login__btn svg { width: 16px; height: 16px; }

.sh-login__after {
	width: 100%;
	max-width: 460px;
	text-align: center;
	margin-top: 24px;
	margin-bottom: 0;
	font-size: 14px;
	color: var(--steen);
}
.sh-login__after a {
	color: var(--paars);
	text-decoration: none;
	font-weight: 600;
}
.sh-login__after a:hover { text-decoration: underline; }

@media (max-width: 980px) {
	.sh-login__inner { grid-template-columns: 1fr; min-height: 0; }
	.sh-login__brand { padding: 48px 28px; min-height: 280px; }
	.sh-login__title { font-size: 44px; }
	.sh-login__lede { display: none; }
	.sh-login__stats { display: none; }
	.sh-login__form-wrap { padding: 48px 20px 64px; }
	.sh-login__card { padding: 32px 28px; }
	.sh-login__heading { font-size: 34px; }
}

/* ── v4-stijl: portaalkoppen op Inter 900 uppercase, gelijk aan de site ──
 * Voorheen Barlow Condensed; dat was het duidelijkste spoor van de oude stijl.
 *
 * Let op: het portaal rendert NIET binnen .sh-sectie (het staat in .post-content
 * op de 100-width-template), dus de v4-fontregels van het thema raken het niet.
 * Avada zet dan .post-content h1/h2/h3 op --h1_typography-font-family (Barlow
 * Condensed). We prefixen met de eigen wrappers .sh-login / .sh-portal: die
 * matchen wel en tillen de specificiteit boven Avada's .post-content h1 uit. */
.sh-login .sh-login__title,
.sh-login .sh-login__stat-num,
.sh-login .sh-login__heading,
.sh-portal .sh-portal__title,
.sh-portal .sh-portal__section h3 {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------------
   Portaal in de v4-stijl

   Drie dingen liepen uit de pas met de rest van de site:

   1. Het inlogscherm liep van schermrand tot schermrand. Op een breed scherm
      stonden de tekst links en het formulier rechts zover uit elkaar dat het
      niet meer als één scherm las. De achtergrond blijft nu wel doorlopen (dat
      full-bleed vlak is juist mooi), maar de inhoud houdt zich aan dezelfde
      1144px als de rest van de site.
   2. Het merkvlak was egaal paars, terwijl v4 overal het verloop van magenta
      naar paars gebruikt.
   3. Er stond nog Besite-blauw in de statusbadge.
   --------------------------------------------------------------------------- */

.sh-login__inner {
	max-width: 1144px;
	margin-inline: auto;
}

/* De helften van het raster lopen door tot de schermrand, maar de tekst erin
   blijft binnen de sitebreedte. Vandaar de achtergrond op de buitenste laag: de
   linkerhelft krijgt het merkverloop, de rechterhelft de rustige veldkleur. */
@media (min-width: 981px) {

	.sh-login {
		background:
			linear-gradient(150deg, var(--roze) 0%, var(--paars) 70%) left / 50% 100% no-repeat,
			var(--veld);
	}

	.sh-login__brand {
		background: transparent;
		padding-left: 0;
		padding-right: 56px;
	}

	.sh-login__form-wrap {
		padding-left: 56px;
	}
}

@media (max-width: 980px) {

	.sh-login__brand {
		background: linear-gradient(150deg, var(--roze) 0%, var(--paars) 70%);
	}
}

/* De cirkels stonden op 12% wit over egaal paars. Over het verloop is dat te
   nadrukkelijk aan de magenta kant; iets zachter houdt het een structuur in
   plaats van een patroon. */
.sh-login__brand::after {
	opacity: .08;
}

/* Besite-blauw. De badge "nieuw" hoort bij de rest van de statusbadges in de
   merkkleuren te staan. */
.sh-status-badge--nieuw {
	background: var(--paars-05, rgba(162, 0, 118, .1));
	color: var(--paars);
}

/* Het dashboard was 1200px breed terwijl de site 1144px aanhoudt; dat verschil
   zie je meteen als je van de site naar het portaal gaat. */
.sh-portal {
	max-width: 1144px;
}