/* ─── Huisstijl-laag werkgeversportaal ──────────────────────────────────────
 *
 * Het portaal was al deels gemerkt (tokens, pill-knoppen, hoofdletterkoppen),
 * maar week op een aantal punten af van de rest van de site: kleinere radii,
 * koppen op gewicht 700 in plaats van 900, paarse knoppen met hoofdletters in
 * plaats van de roze pil, en een handvol hardgecodeerde kleuren.
 *
 * Deze laag zet die punten gelijk. Alles hangt aan .sh-portal, zodat het
 * inlogscherm (dat al klopt) en de formulieren elders op de site ongemoeid
 * blijven. Fout-, succes- en statuskleuren blijven bewust staan: die dragen
 * betekenis en horen niet bij de merkkleuren.
 */

/* Sectieritme gelijk aan de rest van de site: de portaalpagina staat in
   .post-content en mist daardoor de 96px die secties elders wel hebben. */
.sh-portal {
	max-width: var(--maxw);
	margin: 96px auto 112px;
	padding: 0 28px;
}

/* ── Koppen ─────────────────────────────────────────────────────────────── */

.sh-portal .sh-portal__title {
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.sh-portal .sh-portal__section h3 {
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* De tussenkoppen in de formulieren krijgen de kicker-behandeling van de site:
   klein, gespatieerd en in het paars. De scheidingslijn erboven blijft staan,
   die doet het structuurwerk. */
.sh-portal .sh-portal__section h4 {
	font-weight: 800;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	color: var(--paars);
}

/* ── Kaarten ────────────────────────────────────────────────────────────── */

.sh-portal .sh-portal__header,
.sh-portal .sh-portal__section {
	border-radius: var(--radius);
}

/* ── Header als hero ────────────────────────────────────────────────────────
 *
 * Zelfde recept als de hero op een vacaturepagina: var(--ink) als bodem met
 * daaroverheen de magenta verlooplaag uit base.css. Daar zit die laag in een
 * los <div class="hero-tint">; hier kunnen we geen markup toevoegen, dus
 * stapelen we het verloop en de bodemkleur in één background.
 */
.sh-portal .sh-portal__header {
	padding: 44px 40px;
	border: 0;
	color: #fff;
	background:
		linear-gradient(105deg, rgba(92, 8, 63, .96) 8%, rgba(162, 0, 103, .82) 46%, rgba(92, 8, 63, .55) 100%),
		var(--ink);
}

.sh-portal .sh-portal__header .sh-portal__title {
	color: #fff;
}

/* Op de donkere ondergrond keert het menu om: lichte tekst, en de actieve
   pagina als witte pil - hetzelfde patroon als in de hoofdnavigatie. */
.sh-portal .sh-portal__header .sh-portal__link {
	color: rgba(255, 255, 255, .88);
}

.sh-portal .sh-portal__header .sh-portal__link:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.sh-portal .sh-portal__header .sh-portal__link--muted {
	color: rgba(255, 255, 255, .6);
}

.sh-portal .sh-portal__header .sh-portal__link--muted:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.sh-portal .sh-portal__header .sh-portal__link.is-active,
.sh-portal .sh-portal__header .sh-portal__link[aria-current="page"] {
	background: #fff;
	color: var(--paars);
}

/* Het logo van de werkgever is meestal donker en op eigen kracht gemaakt voor
   een witte achtergrond; op het magenta zou het wegvallen. Vandaar een witte
   tegel eronder. */
.sh-portal .sh-portal__logo {
	background: #fff;
	border-radius: 16px;
	padding: 14px 18px;
}

.sh-portal .sh-portal__section {
	box-shadow: var(--shadow);
}

.sh-portal .sh-sollicitatie {
	border-color: var(--lijn);
	border-radius: var(--radius);
	padding: 26px 28px;
}

/* Het formulier komt uit forms.css en brengt daar zijn eigen kaartopmaak mee:
   witte achtergrond, rand, radius en schaduw. Binnen een sectiekaart levert dat
   een kader in een kader op. Hier is de sectie de kaart, dus het formulier
   levert zijn chrome in. De scheidingslijnen tussen de blokken blijven staan;
   die komen van de border-top op de tussenkoppen. */
.sh-portal .sh-portal__section .sh-form {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ── Navigatie in de headerkaart ────────────────────────────────────────── */

.sh-portal .sh-portal__link {
	font-weight: 700;
	font-size: 0.95rem;
	padding: 10px 18px;
}

.sh-portal .sh-portal__link:hover {
	background: var(--roze-08);
	color: var(--paars);
}

/* De hoofdknop volgt de roze pil van de site in plaats van paars-vlak. */
.sh-portal .sh-portal__link--cta {
	background: var(--roze);
	box-shadow: 0 10px 24px rgba(209, 0, 116, .32);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sh-portal .sh-portal__link--cta:hover {
	background: var(--roze);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(209, 0, 116, .42);
}

.sh-portal .sh-portal__link--muted {
	color: var(--steen);
}

.sh-portal .sh-portal__link--muted:hover {
	background: var(--veld);
	color: var(--ink);
}

.sh-portal .sh-portal__link.is-active,
.sh-portal .sh-portal__link[aria-current="page"] {
	box-shadow: var(--shadow);
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */

/* De site gebruikt geen kapitalen op knoppen; het roze is de primaire actie. */
.sh-portal .sh-portal__section a.sh-button,
.sh-portal .sh-portal__section button.sh-button,
.sh-portal .sh-portal__section a.sh-button--primary {
	padding: 15px 30px;
	background-color: var(--roze);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: 0 10px 24px rgba(209, 0, 116, .32);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sh-portal .sh-portal__section a.sh-button:hover,
.sh-portal .sh-portal__section button.sh-button:hover,
.sh-portal .sh-portal__section a.sh-button--primary:hover {
	background-color: var(--roze);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(209, 0, 116, .42);
}

/* De kleine knop in het statusformulier blijft klein, maar wel in dezelfde
   vorm; anders springt hij uit de kaart. */
.sh-portal .sh-portal__section .sh-sollicitatie__status-form button.sh-button {
	padding: 10px 20px;
	font-size: .88rem;
	box-shadow: none;
}

/* ── Tabel ──────────────────────────────────────────────────────────────── */

.sh-portal .sh-portal__table {
	border-color: var(--lijn);
	border-radius: var(--radius);
}

.sh-portal .sh-portal__table thead th {
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .12em;
	color: var(--steen);
}

.sh-portal .sh-portal__table th,
.sh-portal .sh-portal__table td {
	padding: 16px 20px;
	font-size: .95rem;
	border-color: var(--lijn);
}

/* ── Chips en filters ───────────────────────────────────────────────────── */

.sh-portal .sh-sollicitaties__filter-link {
	background: var(--papier);
	border: 1px solid var(--lijn);
	color: var(--steen);
	padding: 9px 16px;
	font-weight: 600;
	font-size: .88rem;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.sh-portal .sh-sollicitaties__filter-link:hover {
	background: var(--roze-08);
	border-color: var(--roze);
	color: var(--paars);
}

.sh-portal .sh-sollicitaties__filter-link.is-active {
	background: var(--roze);
	border-color: var(--roze);
	color: #fff;
}

/* ── Losse kleuren naar tokens ──────────────────────────────────────────── */

.sh-portal .sh-portal__hint,
.sh-portal .sh-sollicitatie__datum,
.sh-portal .sh-sollicitatie__meta dt,
.sh-portal .sh-sollicitatie__motivatie strong,
.sh-portal .sh-sollicitatie__status-label {
	color: var(--steen);
}

.sh-portal .sh-sollicitatie__motivatie,
.sh-portal .sh-sollicitatie__status-form {
	border-top-color: var(--lijn);
}

/* ── Velden ─────────────────────────────────────────────────────────────── */

/* Let op: number, date en tel horen er expliciet bij. Zonder die drie blijven
   de uren-, salaris- en datumvelden wit terwijl de rest grijs is. */
.sh-portal .sh-sollicitatie__status-form select,
.sh-portal .sh-portal__section input[type="text"],
.sh-portal .sh-portal__section input[type="email"],
.sh-portal .sh-portal__section input[type="url"],
.sh-portal .sh-portal__section input[type="tel"],
.sh-portal .sh-portal__section input[type="number"],
.sh-portal .sh-portal__section input[type="date"],
.sh-portal .sh-portal__section input[type="search"],
.sh-portal .sh-portal__section input[type="file"],
.sh-portal .sh-portal__section select,
.sh-portal .sh-portal__section textarea {
	border: 1px solid var(--lijn);
	border-radius: 14px;
	background: var(--veld);
	padding: 12px 16px;
	font-size: .96rem;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.sh-portal .sh-portal__section input:focus,
.sh-portal .sh-portal__section select:focus,
.sh-portal .sh-portal__section textarea:focus,
.sh-portal .sh-sollicitatie__status-form select:focus {
	outline: none;
	background: var(--papier);
	border-color: var(--roze);
	box-shadow: 0 0 0 3px var(--roze-08);
}

/* ── Actie-icoon ────────────────────────────────────────────────────────── */

.sh-portal .sh-portal__action--edit {
	border-radius: 12px;
}

.sh-portal .sh-portal__action--edit:hover {
	background: var(--roze-08);
}

@media (max-width: 720px) {

	.sh-portal {
		margin: 56px auto 72px;
		padding: 0 20px;
	}

	.sh-portal .sh-sollicitatie {
		padding: 20px 18px;
	}
}

/* --- Inlogscherm op smalle vensters ---------------------------------------
 *
 * .sh-login staat op `width: 100vw`. Die eenheid telt de breedte van de
 * schuifbalk mee, waardoor het blok een paar pixels breder is dan de pagina.
 * Met 100% klopt het wel. De decoratiecirkel van 850px in ::after steekt
 * bewust buiten het paneel; overflow:hidden houdt die binnen boord.
 */
@media (max-width: 980px) {

	.sh-login {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.sh-login__brand {
		overflow: hidden;
	}

	.sh-login__brand-main,
	.sh-login__title {
		max-width: 100%;
	}
}

/* Op elke breedte, niet alleen mobiel: 100vw telt de schuifbalk mee. */
.sh-login {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 980px) {

	/* De koptekst hield zijn min-content-breedte vast en stak daardoor 76px
	   buiten het paneel. min-width:0 laat het blok krimpen, anywhere staat het
	   afbreken van een lang woord toe. */
	.sh-login__brand-main {
		min-width: 0;
		max-width: 100%;
	}

	.sh-login__title {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 980px) {

	/* De 44px uit portal.css kwam niet aan (er wint een specifiekere regel),
	   waardoor de kop op desktopformaat bleef staan en moest afbreken. Een
	   expliciete, meeschalende maat is hier beter dan woorden laten breken. */
	.sh-login .sh-login__title {
		font-size: clamp(2.2rem, 11vw, 3.2rem);
		overflow-wrap: normal;
	}
}