/*
 * Opmaak van de schermen van de plugin OBC E-portfolio.
 * Alles staat onder body.ep, zodat het wint van assets/front/front.css van de
 * plugin (die later in de pagina wordt geladen). De indeling blijft van de
 * plugin; dit bestand zet kleuren, randen, afstanden en typografie.
 */

/* ---------- Algemeen ---------- */
.ep .obcep-dashboard,
.ep .obcep-portfolio { max-width: 56rem; }
.ep .obcep-begeleiding { max-width: none; }
.ep .obcep-hulp,
.ep .obcep-optioneel { opacity: 1; color: var(--ep-grijs); }
.ep .obcep-nr { color: var(--ep-grijs); opacity: 1; }
.ep .obcep-terug a { font-weight: 700; text-decoration: none; }
.ep .obcep-terug a:hover { text-decoration: underline; }

/* Koppen in de plugin (de plugin gebruikt h2 als paginatitel) */
.ep .obcep-dashboard__kop h2,
.ep .obcep-portfolio__kop h2,
.ep .obcep-begeleiding__kop h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }

/* Knoppen */
.ep .obcep-knop {
	min-height: 2.75rem; padding: .5rem 1.375rem;
	border: 2px solid var(--ep-navy); border-radius: 999px;
	background: var(--ep-navy); color: var(--ep-wit); font-weight: 700;
}
.ep .obcep-knop:hover:not(:disabled) { background: var(--ep-navy-donker); border-color: var(--ep-navy-donker); }
.ep .obcep-knop:disabled { background: var(--ep-lijn); border-color: var(--ep-lijn); color: var(--ep-grijs); opacity: 1; }
.ep .obcep-knop-link { color: var(--ep-rood); font-weight: 700; font-size: .9375rem; }
.ep .obcep-export { gap: .5rem; }
.ep .obcep-export a {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem 1rem;
	border: 2px solid var(--ep-navy); border-radius: 999px; color: var(--ep-navy);
	font-size: .9375rem; text-decoration: none;
}
.ep .obcep-export a:hover { background: var(--ep-navy); color: var(--ep-wit); }

/* Velden */
.ep .obcep-veld label { color: var(--ep-inkt); }
.ep .obcep-veld input[type="text"],
.ep .obcep-veld input[type="email"],
.ep .obcep-veld input[type="url"],
.ep .obcep-veld input[type="date"],
.ep .obcep-veld select,
.ep .obcep-veld textarea { border: 1px solid #b9c3cf; border-radius: var(--ep-radius-klein); background: var(--ep-wit); }
.ep .obcep-veld--fout input,
.ep .obcep-veld--fout textarea { border-color: var(--ep-rood); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.ep .obcep-fout { color: var(--ep-rood); font-weight: 700; font-size: .9375rem; }
.ep .obcep-veld input[type="file"] { padding: .5rem; border: 1px dashed #b9c3cf; border-radius: var(--ep-radius-klein); background: var(--ep-achter); width: 100%; }

/* Keuzes als tegels: rol bij registratie, soort bewijs */
.ep .obcep-rol,
.ep .obcep-soort { border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius-klein); background: var(--ep-wit); transition: border-color .15s, background-color .15s; }
.ep .obcep-rol:hover,
.ep .obcep-soort:hover { border-color: var(--ep-blauw); }
.ep .obcep-rol:has(input:checked),
.ep .obcep-soort:has(input:checked) { border-color: var(--ep-navy); background: var(--ep-blauw-licht); box-shadow: inset 0 0 0 1px var(--ep-navy); }
.ep .obcep-soort { font-weight: 700; }

/* Meldingen */
.ep .obcep-melding { border: 0; border-left: 4px solid var(--ep-blauw); border-radius: var(--ep-radius-klein); background: var(--ep-blauw-licht); color: var(--ep-inkt); }
.ep .obcep-melding--fout { border-left-color: var(--ep-rood); background: var(--ep-rood-licht); color: var(--ep-inkt); }
.ep .obcep-melding--fout strong, .ep .obcep-melding--fout p:first-child { color: var(--ep-rood); }
.ep .obcep-melding--aanpassing { border-left-color: var(--ep-oranje); background: var(--ep-bruin-licht); color: var(--ep-inkt); }
.ep .obcep-melding--aanpassing > p:first-child { color: var(--ep-bruin); font-weight: 700; }

/* Kaarten: blokken, formulieren, filters */
.ep .obcep-dashboard__blok,
.ep .obcep-bewijsform,
.ep .obcep-reflectieform,
.ep .obcep-besluitform,
.ep .obcep-filters {
	background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius);
	box-shadow: var(--ep-schaduw); padding: clamp(1.125rem, 3vw, 1.75rem);
}
.ep .obcep-dashboard__blok h3,
.ep .obcep-bewijsform h3 { font-size: 1.1875rem; }
.ep .obcep-filters { background: var(--ep-wit); }

/* Voortgang */
.ep .obcep-balk { height: .5rem; border-radius: 999px; background: var(--ep-lijn-licht); }
.ep .obcep-balk > span { background: var(--ep-oranje); border-radius: 999px; }
.ep .obcep-dbportfolio__procent { color: var(--ep-navy); font-size: 2rem; font-weight: 800; }
.ep .obcep-kerntaakbalken__titel { color: var(--ep-inkt); }

/* Status */
.ep .obcep-status {
	border: 0; border-radius: 999px; padding: .125rem .625rem;
	font-size: .8125rem; font-weight: 700; line-height: 1.5;
	background: var(--ep-lijn-licht); color: var(--ep-grijs); opacity: 1;
}
.ep .obcep-status--concept { background: #eef0f3; color: var(--ep-inkt); }
.ep .obcep-status--ingediend,
.ep .obcep-status--opnieuw_ingediend { background: var(--ep-blauw-licht); color: var(--ep-link); }
.ep .obcep-status--aanpassing_gevraagd { background: var(--ep-bruin-licht); color: var(--ep-bruin); }
.ep .obcep-status--goedgekeurd,
.ep .obcep-status--gereed_formeel { background: var(--ep-groen-licht); color: var(--ep-groen); }
.ep .obcep-label { border: 1px solid var(--ep-lijn); border-radius: 999px; padding: 0 .5rem; color: var(--ep-grijs); font-weight: 700; }
.ep .obcep-label--nieuw { border-color: var(--ep-oranje); background: var(--ep-oranje-licht); color: var(--ep-bruin); }
.ep .obcep-label--besluit { border-color: var(--ep-groen); background: var(--ep-groen-licht); color: var(--ep-groen); }
.ep .obcep-label--intern { border-color: var(--ep-grijs); color: var(--ep-inkt); }
.ep .obcep-check--ja { color: var(--ep-groen); }
.ep .obcep-check--nee { color: var(--ep-bruin); }

/* Kaarten met portfolio's */
.ep .obcep-kaart { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-kaart__titel { color: var(--ep-navy); font-weight: 800; }

/* Portfolio-overzicht */
.ep .obcep-kerntaak {
	background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-top: 4px solid var(--ep-navy);
	border-radius: var(--ep-radius); box-shadow: var(--ep-schaduw); padding: clamp(1rem, 3vw, 1.5rem);
}
.ep .obcep-kerntaak__kop h3 { font-size: 1.25rem; }
.ep .obcep-kerntaak--keuze { border-top-color: var(--ep-blauw); }
.ep .obcep-kerntaak--open-keuze { border-top-style: dashed; background: var(--ep-blauw-licht); box-shadow: none; }
.ep .obcep-kerntaakgroep h3 { color: var(--ep-navy); font-size: 1.375rem; font-weight: 800; }
.ep .obcep-label--gekozen { border-color: var(--ep-blauw); background: var(--ep-blauw-licht); color: var(--ep-link); }
.ep .obcep-kerntaak__werkprocessen { color: var(--ep-inkt); }
.ep .obcep-werkproces h4 { color: var(--ep-inkt); font-size: 1rem; }
.ep .obcep-opdracht-rij { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-opdracht-rij:last-child { border-bottom: 0; }
.ep .obcep-opdracht-rij > a { font-weight: 700; text-decoration: none; }
.ep .obcep-opdracht-rij > a:hover { text-decoration: underline; }

/* Opdracht */
.ep .obcep-onderdeel { padding-top: 1.25rem; border-top: 1px solid var(--ep-lijn); }
.ep .obcep-onderdeel h3 { font-size: 1.1875rem; }
.ep .obcep-bewijs,
.ep .obcep-besluit { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius-klein); }
.ep .obcep-bewijs__kop strong { color: var(--ep-navy); }
.ep .obcep-besluit { border-left: 4px solid var(--ep-lijn); }
.ep .obcep-besluit:has(.obcep-status--goedgekeurd) { border-left-color: var(--ep-groen); }
.ep .obcep-besluit:has(.obcep-status--aanpassing_gevraagd) { border-left-color: var(--ep-oranje); }
.ep .obcep-reflectie__antwoorden dt { color: var(--ep-navy); }
.ep .obcep-historie { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius-klein); padding: .75rem 1rem; }
.ep .obcep-historie summary { font-weight: 700; color: var(--ep-navy); }
.ep .obcep-historie__lijst > li { border-bottom-color: var(--ep-lijn-licht); font-size: .9375rem; }
.ep .obcep-historie__details del { background: var(--ep-rood-licht); }
.ep .obcep-historie__details ins { background: var(--ep-groen-licht); }

/* Feedback */
.ep .obcep-feedbackitem { background: var(--ep-blauw-licht); border-radius: var(--ep-radius-klein); }
.ep .obcep-feedbackitem--intern { background: #f3f4f6; outline: 0; border: 1px dashed #aab4c0; }
.ep .obcep-feedbackitem__kop strong { color: var(--ep-navy); }
.ep .obcep-feedbackform summary { color: var(--ep-link); font-weight: 700; text-decoration: none; }
.ep .obcep-feedbackform summary:hover { text-decoration: underline; }
.ep .obcep-bewijs .obcep-feedback { border-top-color: var(--ep-lijn); }

/* Dashboard: te doen en activiteit */
.ep .obcep-actie { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-actie > a { font-weight: 700; }
.ep .obcep-actie--aanpassing .obcep-actie__tekst,
.ep .obcep-actie--verlopen .obcep-actie__tekst { color: var(--ep-bruin); }
.ep .obcep-actie--indienen .obcep-actie__tekst { color: var(--ep-groen); }
.ep .obcep-dbportfolio__deel { border-top-color: var(--ep-lijn); }
.ep .obcep-dbportfolio__deel h4 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ep-grijs); }

/* Inschrijven met code */
.ep .obcep-inschrijven__rij input { font-weight: 800; letter-spacing: .12em; }

/* Begeleiding */
.ep .obcep-tabs { border-bottom: 1px solid var(--ep-lijn); gap: .25rem 2rem; }
.ep .obcep-tabs a { color: var(--ep-grijs); font-weight: 700; border-bottom-width: 3px; padding: .625rem 0; }
.ep .obcep-tabs a:hover { color: var(--ep-navy); }
.ep .obcep-tabs a[aria-current="page"] { color: var(--ep-navy); border-bottom-color: var(--ep-oranje); }
.ep .obcep-begeleiding__resultaat { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius); box-shadow: var(--ep-schaduw); padding: clamp(1rem, 3vw, 1.5rem); }
.ep .obcep-wachtrij__item { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-wachtrij__titel { text-decoration: none; color: var(--ep-navy); font-weight: 800; }
.ep .obcep-wachtrij__titel:hover { text-decoration: underline; }
.ep .obcep-wachtrij__meta { color: var(--ep-grijs); }
.ep .obcep-wachtrij__meta strong { color: var(--ep-inkt); }
.ep .obcep-tabel th { color: var(--ep-grijs); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; border-bottom: 2px solid var(--ep-lijn); }
.ep .obcep-tabel td { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-tabel tbody tr:hover { background: var(--ep-achter); }
.ep .obcep-tabel__cursist a { text-decoration: none; }
.ep .obcep-tabel__wacht {
	display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem;
	border-radius: 999px; background: var(--ep-blauw-licht); color: var(--ep-link); text-decoration: none;
}
.ep .obcep-tabel__aanpassing { color: var(--ep-bruin); }
.ep .obcep-paginering a { font-weight: 700; }

/* Registratie */
.ep .obcep-registratie { max-width: none; }
.ep .obcep-registratie .obcep-knop { justify-self: stretch; }

/* Uitgelogd dashboard: inlogformulier */
.ep .obcep-dashboard--uitgelogd {
	max-width: 28rem; background: var(--ep-wit); border: 1px solid var(--ep-lijn);
	border-radius: var(--ep-radius); box-shadow: var(--ep-schaduw); padding: clamp(1.25rem, 3vw, 2rem);
}
.ep .obcep-dashboard--uitgelogd form p { margin-bottom: 1rem; }
.ep .obcep-dashboard--uitgelogd .login-remember label { font-weight: 400; display: flex; gap: .5rem; align-items: center; }

@media (max-width: 40rem) {
	.ep .obcep-tabel tbody tr:hover { background: none; }
}

/* Account */
.ep .obcep-account { max-width: 48rem; }
.ep .obcep-account__nav { padding-bottom: .75rem; border-bottom: 1px solid var(--ep-lijn); font-weight: 700; }
.ep .obcep-account__nav a { text-decoration: none; }
.ep .obcep-account__nav a:hover { text-decoration: underline; }
.ep .obcep-account .obcep-dashboard__blok { scroll-margin-top: 1.5rem; }
.ep .obcep-account__lijst li { border-bottom-color: var(--ep-lijn-licht); }
.ep .obcep-account__lijst li:last-child { border-bottom: 0; }
.ep .obcep-knop--rand { background: transparent; color: var(--ep-navy); }
.ep .obcep-knop--rand:hover { background: var(--ep-navy); color: var(--ep-wit); }
.ep .obcep-account__voet { font-weight: 700; }