/*
* Componentlaag.
*
* Eén bestand met de vocabulaire die de schermen delen: kaart, knop, tabel, badge, veld, lege
* staat. Bewust klein gehouden. Zodra dit bestand een framework begint te worden, is het tijd voor
* een gevendorde, gepinde componentlaag met benoemde rollen in plaats van er zelf een te schrijven.
*
* Alle kleuren komen uit tokens.css. Nooit een losse hexwaarde hier.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
* `hidden` wint van alles.
*
* De browser geeft `[hidden]` alleen `display: none` mee, en dat is één klasse. Elke component die
* zelf een display zet (`.pictogramknop` op inline-flex, een paneel op flex) wint daarvan, en dan
* staat er een knop op het scherm die volgens de opmaak verborgen is en bij een klik niets doet.
* Dat is hier twee keer gebeurd, allebei met een eigen `[hidden]`-regel opgelost; deze regel maakt
* daar een eind aan. De uitroeptekens zijn hier op hun plaats: verborgen is verborgen.
*/
[hidden] {
display: none !important;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--color-text-primary);
background: var(--color-bg-page);
}
a {
color: var(--color-brand-navy);
}
/* --- Raamwerk: zijbalk, kopbalk, inhoud -------------------------------------------------
*
* Zelfde maten als src/components/layout/Sidebar.tsx en Topbar.tsx: een zijbalk van 260 breed die
* meescrollt, een kopbalk van minimaal 72 hoog met de paginatitel, en de inhoud eronder.
*/
.raamwerk {
display: flex;
min-height: 100vh;
}
.zijbalk {
width: 260px;
flex: 0 0 260px;
align-self: flex-start;
position: sticky;
top: 0;
height: 100vh;
background: var(--color-brand-navy);
color: var(--color-text-inverse);
padding: 20px 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.zijbalk-merk {
flex-shrink: 0;
padding: 0 20px 16px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Met de zijbalk erbij in de selector, want `.zijbalk a` hieronder weegt even zwaar en staat
later; zonder dat won die met zijn `padding` en `align-items: center` en stond het logo
ingesprongen en gecentreerd in plaats van tegen de linkerrand, zoals in Sidebar.tsx. */
.zijbalk .zijbalk-merk a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 0;
color: var(--color-text-inverse);
text-decoration: none;
}
.zijbalk .zijbalk-merk a:hover {
background: none;
}
.zijbalk-merk img {
display: block;
height: 52px;
width: auto;
max-width: 100%;
object-fit: contain;
align-self: flex-start;
}
.zijbalk-merk span {
font-size: 1rem;
color: var(--color-sidebar-text);
}
/* De lijst zelf scrollt, de merkregel en de hulpkaart blijven staan. */
.zijbalk-menu {
display: flex;
flex-direction: column;
gap: 1.25rem;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0 0.625rem 0.5rem;
}
.zijbalk-groep {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.zijbalk-groepkop {
margin-bottom: 0.125rem;
padding: 0 1rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.zijbalk a {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem;
border-radius: var(--radius-control);
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 1rem;
}
/* Het vierkantje om het icoon. Zonder dat staat een lijntekening los in het niets. */
.zijbalk-icoon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.1);
color: var(--color-sidebar-icon);
}
/* Het getal achter een menulabel staat helemaal rechts, zoals `ml-auto` in Sidebar.tsx: bij een
lang label zou het anders midden in de regel blijven hangen. */
.zijbalk-teller {
margin-left: auto;
flex-shrink: 0;
}
/* Alleen de menuregels, niet elke link in de zijbalk: het telefoonnummer en de verwijzing naar de
uitlegpagina in het hulpblok eronder zijn lopende tekst met een streep, en die kregen hier een
vlak achter zich dat in Sidebar.tsx niet bestaat. */
.zijbalk-menu a:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-inverse);
}
.zijbalk a[aria-current="page"] {
background: rgba(255, 255, 255, 0.15);
color: var(--color-text-inverse);
font-weight: 600;
}
/* Het icoon van het item waar je staat krijgt de accentkleur, zoals `bg-accent` daar. Zonder dat
zag je alleen aan het lichtere vlak achter de regel waar je was. */
.zijbalk a[aria-current="page"] .zijbalk-icoon {
background: var(--color-brand-accent);
color: var(--color-text-inverse);
}
.zijbalk-voet {
flex-shrink: 0;
padding: 0.875rem 1.25rem 0.25rem;
}
.zijbalk-hulp {
padding: 0.875rem;
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.1);
}
.zijbalk-hulp strong {
display: block;
margin-bottom: 0.25rem;
color: var(--color-text-inverse);
}
.zijbalk-hulp p {
margin: 0;
line-height: 1.5;
color: var(--color-sidebar-text);
}
.zijbalk-hulp a {
display: inline;
padding: 0;
font-weight: 600;
color: var(--color-text-inverse);
text-decoration: underline;
}
.werkvlak {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Wikkelen en niet knijpen: past het zoekveld niet meer naast de titel, dan gaat het naar een
eigen regel. Zonder dit kromp het tot een pil waar alleen nog de categoriekeuze in paste.
Hetzelfde als wat de Next.js-versie met grid-template-areas doet. */
.kopbalk {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
min-height: 72px;
padding: 0.875rem 2rem;
border-bottom: 1px solid var(--color-border-default);
background: var(--color-bg-surface);
}
/* De titel mag krimpen, maar pas als het echt niet anders kan: het zoekveld ernaast geeft eerst
zijn eigen ruimte op. Zonder die volgorde werd "Gebruikers & rechten" afgekapt terwijl er ruimte
zat, en met een titel die helemaal niet krimpt viel het zoekveld naar een tweede regel. */
.kopbalk h1 {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
white-space: nowrap;
}
/* Alleen voor schermlezers: een label dat de vorm van het scherm niet mag veranderen. */
.verborgen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Eén pil met het vergrootglas, het zoekveld en de categorie erin, zoals SearchForm.tsx. */
.kopbalk-zoeken {
display: flex;
align-items: center;
gap: 8px;
/* Krimpt als eerste: bij een lange paginatitel geeft het zoekveld ruimte op tot alleen het
vergrootglas en de categorie overblijven, in plaats van de titel af te kappen of de balk
over twee regels te duwen. Zo doet de Next.js-versie het ook. */
flex: 1 1 0;
min-width: 2.5rem;
max-width: 420px;
padding: 6px 14px;
border: 1px solid var(--color-border-default);
border-radius: 999px;
background: var(--color-bg-page);
color: var(--color-text-muted);
}
.kopbalk-zoeken:focus-within {
border-color: var(--color-brand-accent);
}
.kopbalk-zoeken input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: none;
font: inherit;
font-size: 16px;
color: var(--color-text-primary);
outline: none;
}
.kopbalk-zoeken select {
flex-shrink: 0;
border: 0;
background: none;
font: inherit;
font-size: 16px;
color: var(--color-text-muted);
outline: none;
}
/* `margin-left: auto` en niet alleen de space-between van de kopbalk: op een scherm dat zijn
titel zelf in de inhoud zet staat hier maar één blok, en dan zou space-between het links
zetten. */
.kopbalk-account {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
flex-shrink: 0;
}
.kopbalk-streep {
width: 1px;
height: 24px;
background: var(--color-border-default);
}
/* Aanmeldingen, meldingen en support: een icoon met een woord ernaast, en eventueel een teller. */
.kopbalk-knop {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: var(--radius-control);
color: var(--color-text-secondary);
text-decoration: none;
font-weight: 600;
}
.kopbalk-knop:hover {
background: var(--color-brand-accent-subtle);
}
/* De supportlink is geen bel: die krijgt donkerder letters en geen vlak, zoals `hover:text-ink` in
Topbar.tsx. */
.kopbalk-knop-tekst:hover {
background: none;
color: var(--color-text-primary);
}
/* Het ronde getalletje bij een teller. Boven de negen "9+", zodat een getal van drie cijfers de
rij niet uit elkaar duwt; gelijk aan Teller.tsx. */
.teller {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-brand-accent-vlak);
color: var(--color-text-inverse);
font-size: 14px;
font-weight: 700;
}
.kopbalk-naam {
min-width: 0;
text-align: right;
line-height: 1.25;
}
.kopbalk-naam a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: var(--color-brand-navy);
text-decoration: none;
}
.kopbalk-naam button {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 14px;
color: var(--color-text-muted);
text-decoration: underline;
cursor: pointer;
}
.kopbalk-naam button:hover {
color: var(--color-status-error-text);
}
/* De initialen van de ingelogde gebruiker, in de vorm die Avatar.tsx aanhoudt. */
.kopbalk-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 999px;
background: var(--color-brand-accent-subtle);
color: var(--color-brand-accent-text);
font-size: 16px;
font-weight: 700;
}
/* Op een smal scherm blijft het account staan; de rest kost te veel breedte. */
@media (max-width: 760px) {
.kopbalk-zoeken,
.kopbalk-knop span:not(.teller),
.kopbalk-naam,
.kopbalk-streep {
display: none;
}
}
/* De titel staat onder 640px bovenaan de inhoud en niet in de kopbalk, gelijk aan PageShell.tsx:
naast de hamburgerknop en de accountknoppen blijft er op 375 breed geen regel over. Boven die
grens keert hij terug in de balk en verdwijnt hij uit de inhoud, zodat hij er nooit twee keer
staat. */
.inhoud-titel {
margin: 0 0 1.5rem;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
}
@media (max-width: 639px) {
.kopbalk h1 {
display: none;
}
}
@media (min-width: 640px) {
.inhoud-titel {
display: none;
}
}
/* `px-4 py-6 sm:px-8 sm:py-8` van PageShell.tsx: op een telefoon 1rem opzij en 1.5rem boven en
onder, vanaf 640px rondom 2rem. Met 1.5rem bovenaan op elk formaat begon elk scherm 8px hoger
dan in de Next.js-versie, en dat schoof alles eronder mee. */
.inhoud {
flex: 1 1 auto;
min-width: 0;
padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
.inhoud {
padding: 2rem;
}
}
/* De knop die op een smal scherm de zijbalk openzet. */
.menu-knop {
display: none;
position: fixed;
left: 0.75rem;
top: 0.75rem;
z-index: 40;
width: 36px;
height: 36px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.menu-knop span {
display: block;
width: 16px;
height: 2px;
border-radius: 1px;
background: var(--color-text-secondary);
}
@media (max-width: 1024px) {
.menu-knop {
display: flex;
}
.zijbalk {
position: fixed;
left: 0;
top: 0;
z-index: 50;
transform: translateX(-100%);
transition: transform 0.2s var(--ease-standard);
}
body.zijbalk-open .zijbalk {
transform: translateX(0);
}
.kopbalk {
padding-left: 3.75rem;
}
}
/* --- Kruimelpad en dossierkop ------------------------------------------------------------- */
.kruimelpad {
/* 40 en niet 16: PageShell.tsx zet zijn blokken met `flex flex-col gap-6` onder elkaar, dus
bovenop de eigen `mb-4` van het kruimelpad komt daar nog 24px bij. */
margin-bottom: 40px;
font-size: 14px;
color: var(--color-text-muted);
}
/* Vet in de accentkleur en zonder streep, zoals Breadcrumb.tsx: een kruimelpad is navigatie boven
het scherm, geen link in een lopende tekst. */
.kruimelpad a {
font-weight: 600;
color: var(--color-brand-accent-text);
text-decoration: none;
}
.kruimelpad a:hover {
text-decoration: underline;
}
/* De kop van een dossier: initialen, naam en kenmerken links, de handelingen rechts.
*
* De marge hieronder geldt voor een kop die los boven de kaarten staat, zoals in
* src/app/(app)/werkgevers/[id]/page.tsx en de andere dossierpagina's: daar is de kop geen kaart.
* Staat hij wél in een `.kaart`, dan wint de marge van de kaart; die regel staat verderop in dit
* bestand en is even specifiek. */
.dossierkop {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.dossierkop-naam {
display: flex;
gap: 16px;
min-width: 0;
}
/* Het vierkant naast de naam staat midden tegenover de twee regels tekst, zoals `items-center` in
de kop van het werkgevers-, organisatie- en trajectbegeleidersdossier. Het kandidaatdossier lijnt
daar aan de bovenkant uit en houdt daarom de standaard. */
.dossierkop-naam-gecentreerd {
align-items: center;
}
.dossierkop-naam .avatar,
.dossierkop-naam .iconbadge {
width: 52px;
height: 52px;
font-size: 16px;
}
/* Het gebouwtje in de kop mag meegroeien met het vierkant eromheen; in een tabelrij blijft hij 16. */
.dossierkop-naam .iconbadge svg {
width: 24px;
height: 24px;
}
.dossierkop h1 {
margin: 0;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
}
.dossierkop .kaart-onderschrift {
margin: 4px 0 0;
}
.dossierkop .knoppenrij {
margin: 0;
}
/* --- Kaart ------------------------------------------------------------------------------
*
* Maten uit src/components/ui/Card.tsx: 20px padding, 16px hoek, de zachte schaduw, en een kop in
* het kopfont op 20px in navy met een onderschrift van 14px ernaast.
*/
.kaart {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
padding: 20px;
margin-bottom: 24px;
}
/* `dichtheid="compact"` van Card.tsx: voor een kaart die een lijstje regels bevat in plaats van
een volle tabel. Die regels hebben zelf al 12px padding, dus bij één of twee regels kijk je
anders vooral naar de doos. */
.kaart-compact {
padding: 16px;
}
.kaart-compact > .kaart-kop {
margin-bottom: 12px;
}
/* Een reeks kaarten die bij elkaar hoort, met 18px ertussen in plaats van de 24px die een kaart
zelf meebrengt: `flex flex-col gap-4.5` in de Next.js-versie. */
.kaartenkolom {
display: flex;
flex-direction: column;
gap: 18px;
}
.kaartenkolom > .kaart {
margin-bottom: 0;
}
/* Een reeks kaarten die één doorlopende lijst vormt, met 12px ertussen: `flex flex-col gap-3` bij
de passende vacatures. Dichter dan de 18px hierboven, want daar is elke kaart een eigen blok met
een kop en een lijstje, en hier is elke kaart één regel uit dezelfde lijst. */
.kaartenkolom-dicht {
gap: 12px;
}
/* De regel tekst onder de kopbalk die zegt waar dit scherm over gaat. Groter en lichter dan een
kaartonderschrift: hij hoort bij de titel in de kopbalk, niet bij een kaart. */
.schermuitleg {
/* 44 en niet 20: PageShell.tsx zet zijn blokken met `flex flex-col gap-6` onder elkaar, dus
bovenop de eigen `mb-5` van deze regel komt daar nog 24px bij. */
margin: 0 0 44px;
font-size: 16px;
color: var(--color-text-muted);
}
/* Ook een kop binnen .kaart-kop of .kaart-koptekst: die staat een niveau dieper en valt daardoor
buiten de kindselector, waarna hij terugvalt op de browserstandaard. Dat is twee keer gebeurd,
dus staan ze hier alle drie bij elkaar. */
.kaart > h2,
.kaart-kop > h2,
.kaart-koptekst > h2,
.kaart-titel {
margin: 0 0 14px;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-brand-navy);
}
/* Het bijschrift naast een kaarttitel, op dezelfde regel. Niet eronder: de titel en het getal
erbij zijn samen één mededeling ("321 van 416, langst wachtende eerst"). */
.kaart-bijschrift {
margin-left: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--color-text-muted);
}
/* Staat het onderschrift direct onder de kop, dan hoort het bij die kop en niet als losse alinea
eronder: de kop zelf houdt dan zijn onderruimte niet vast. */
.kaart > h2 + .kaart-onderschrift,
.kaart-kop + .kaart-onderschrift {
margin-top: -10px;
}
/* Kop en knop op één regel, zoals de `actions` van Card.tsx. Zonder dit staat de knop onder de
kop en leest hij als de eerste regel van de inhoud. */
.kaart-kop {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
}
.kaart-kop > h2,
.kaart-kop > .kaart-titel {
margin: 0;
}
/* Een kaarttitel die naar het dossier linkt houdt de kleur van de kop en krijgt geen streep: de
hele kaart is toch al aanwijsbaar, en een gestreepte kop leest als een losse link in de tekst. */
.kaart > h2 a,
.kaart-kop > h2 a {
color: inherit;
text-decoration: none;
}
.kaart > h2 a:hover,
.kaart-kop > h2 a:hover {
text-decoration: underline;
}
.kaart-kop .knoppenrij {
margin: 0;
}
.kaart-onderschrift {
margin: 0 0 14px;
font-size: 14px;
color: var(--color-text-muted);
}
/* Lopende tekst als inhoud van een kaart, in de gewone leesmaat en zonder alineamarge: die marge
komt van de browser en telt op bij de onderruimte van de kop erboven. */
.kaart-tekst {
margin: 0;
font-size: 16px;
color: var(--color-text-muted);
}
/* De enige regel in een kaart die verder leeg is ("Geen bevestigde gesprekken gepland."). Geen
onderschrift: die hoort bij de kop en houdt daarom onderruimte vast, terwijl dit de inhoud zelf
is en er niets onder staat. */
.kaart-leegregel {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
/* Binnen een kaart-kop draagt die kop zelf de onderruimte; de titel houdt de zijne dan niet vast,
anders staat er 14px bovenop de 12 of 14 van de kop. */
.kaart-kop > .kaart-koptekst > h2 {
margin-bottom: 0;
}
/* --- Kengetallen ------------------------------------------------------------------------
*
* Uit src/components/ui/StatTegel.tsx. Een tegel is altijd een link: een tegel waar je niet op
* kunt drukken is niet van een klikbare te onderscheiden.
*/
/* Vaste breekpunten en geen auto-fit, gelijk aan de Next.js-versie: op 1280 werd elke tegel met
auto-fit 174px breed en brak bijna elk label over twee regels. Drie naast elkaar geeft meer
ruimte per label dan het scheelt in hoogte; pas op een heel breed scherm vijf. */
.tegels {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-bottom: 24px;
}
@media (min-width: 640px) {
.tegels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.tegels {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.tegels {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.tegel {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
padding: 20px;
text-decoration: none;
color: inherit;
}
.tegel:hover {
filter: brightness(0.95);
}
.tegel-getal {
order: 2;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
font-variant-numeric: tabular-nums;
color: var(--color-brand-navy);
}
.tegel-getal small {
font-size: 16px;
font-weight: 500;
color: var(--color-text-muted);
}
/* Het label staat bovenaan, het getal eronder: zo leest de tegel als een zin. In de sjablonen
staat het getal soms eerst, vandaar de volgorde via `order`. */
.tegel-label {
order: 1;
font-size: 16px;
font-weight: 500;
color: var(--color-text-secondary);
}
.tegel-toelichting {
order: 3;
font-size: 14px;
color: var(--color-text-muted);
}
/* Een tegel die alarm slaat kleurt het getal, niet de rand: een rij gekleurde randjes leest als
versiering. Nul kleurt nooit, want "0 met actie nodig" is goed nieuws. */
.tegel-urgent .tegel-getal {
color: var(--color-status-error-text);
}
/* --- Begroeting ---------------------------------------------------------------------------
*
* De regel boven aan elk dashboard achter de login, uit DashboardBegroeting.tsx: geen kaart maar
* een kop met de context ernaast. Een kaart eromheen zou hem even zwaar maken als het werk dat
* eronder staat.
*/
.begroeting {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
margin: 0 0 16px;
}
.begroeting h2 {
margin: 0;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-brand-navy);
}
.begroeting p {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
/* --- Statusbalk --------------------------------------------------------------------------
*
* Uit src/components/ui/StatusBalk.tsx: de kengetallen van het portaal op één regel, getal en
* label naast elkaar, met de hoofdactie rechts. Geen tegels: vijf tegels naast elkaar maken van
* een portaaldashboard een muur van cijfers, terwijl dit een regel is die je in één blik leest.
*/
.statusbalk {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 24px;
padding: 14px 20px;
margin-bottom: 24px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
background: var(--color-bg-surface);
box-shadow: var(--shadow-sm);
}
.statusbalk a,
.statusbalk > span {
display: flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
color: inherit;
}
/* Niet de hoofdknop rechts in de balk: die heeft zijn eigen vlak en krijgt in StatusBalk.tsx geen
streep. `hover:underline` staat daar op de kengetallen, niet op de knop ernaast. */
.statusbalk a:not(.knop):hover {
text-decoration: underline;
}
.statusbalk strong {
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-brand-navy);
}
/* Alleen boven nul: "0 wachten op jou" is goed nieuws, en een rood cijfer maakt daar een alarm
van. */
.statusbalk .urgent strong {
color: var(--color-status-error-text);
}
.statusbalk em {
font-style: normal;
font-size: 16px;
color: var(--color-text-secondary);
}
/* Een kengetal met zijn scheidingsstreep als één geheel, gelijk aan StatusBalk.tsx: de streep
staat binnen het item, zodat hij bij het afbreken van de rij met het getal mee naar beneden
gaat in plaats van los aan het eind van de vorige regel te blijven staan. */
.statusbalk-item {
display: flex;
align-items: center;
gap: 24px;
}
.statusbalk-streep {
width: 1px;
height: 20px;
background: var(--color-border-default);
}
/* Onder 640px staan de getallen onder elkaar en is een streep ertussen alleen maar ruis. */
@media (max-width: 639px) {
.statusbalk-streep {
display: none;
}
}
/* De hoofdactie staat rechts, los van de cijfers. */
.statusbalk .knoppenrij {
margin: 0 0 0 auto;
}
/* --- Tabel ------------------------------------------------------------------------------
*
* Uit de tabelregels in src/app/globals.css. Kopjes in kleine kapitalen, rijen met een lijn
* ertussen behalve de laatste, en een tabel die zich op smalle schermen tot kaartjes opvouwt in
* plaats van horizontaal weg te schuiven (.tabel-omhulsel is de maat, niet het venster: de
* zijbalk pakt 260px weg).
*/
.tabel-omhulsel {
container-type: inline-size;
overflow-x: auto;
}
table.tabel {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
table.tabel th {
text-align: left;
color: var(--color-text-muted);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 10px 12px;
border-bottom: 1px solid var(--color-border-default);
}
table.tabel td {
padding: 14px 12px;
border-bottom: 1px solid var(--color-border-default);
vertical-align: middle;
}
table.tabel tbody tr:last-child td {
border-bottom: none;
}
/*
* De meldingsvoorkeuren op het profiel: de kolom met de meldingsoort neemt alle ruimte, de
* kanaalkolommen zijn smal en de vinkjes staan midden onder hun opschrift. Dat is `w-14 sm:w-20`
* (en `sm:w-24` voor WhatsApp) uit MeldingVoorkeurenTabel.tsx. Zonder deze breedtes verdeelt de
* tabel de ruimte gelijk en drijft een vinkje ver van de kop waar het bij hoort.
*/
table.voorkeurentabel th:not(:first-child),
table.voorkeurentabel td:not(:first-child) {
width: 56px;
text-align: center;
}
@media (min-width: 640px) {
table.voorkeurentabel th:not(:first-child),
table.voorkeurentabel td:not(:first-child) {
width: 80px;
}
table.voorkeurentabel th:nth-child(4),
table.voorkeurentabel td:nth-child(4) {
width: 96px;
}
}
/* Een tijdstip in een tabel leest gedempt en op de kleine maat, zoals `text-[14px] text-ink-3`
daar: het is een kenmerk van de rij en niet de inhoud ervan. Nooit afbreken, anders staat de
tijd op een eigen regel onder de datum. */
table.tabel td.cel-tijdstip {
font-size: 14px;
color: var(--color-text-muted);
white-space: nowrap;
}
/* De laatste cel met de handelingen erin staat rechts tegen de rand van de tabel, zoals
`text-right` daar. */
table.tabel td.cel-rechts {
text-align: right;
}
/* Een datum is één gegeven: "29 sep 2026" over twee regels leest als twee. Zonder dit breekt de
kolom af zodra een buurkolom lange namen bevat. */
table.tabel td.cel-datum {
white-space: nowrap;
}
table.tabel td.cel-rechts .knoppenrij {
justify-content: flex-end;
margin: 0;
}
table.tabel th a {
color: inherit;
text-decoration: none;
}
/* Een link in een tabelcel krijgt geen streep: in een lijst waar bijna elke cel een link is, maakt
een streep per regel er een raster van. De regel blijft aanwijsbaar door de hover.
Niet een link die als knop is vormgegeven: die heeft zijn eigen vlak en zijn eigen tekstkleur,
en deze regel won het daarvan op specificiteit. Dat gaf donkere letters op een donkere knop. */
table.tabel td a:not(.knop) {
color: var(--color-text-primary);
font-weight: 600;
text-decoration: none;
}
/* Wel in een tabel waar de rij zelf niets doet: daar is de streep de enige aanwijzing dat dit een
link is. Niet in een aanklikbare rij: die licht in zijn geheel al op, en in de Next.js-versie
staat daar geen `hover:underline` op de cel bovenop. */
table.tabel tbody tr:not(.rij-klikbaar) td a:not(.knop):hover {
text-decoration: underline;
}
/*
* Elke rij en niet alleen de aanklikbare. In src/app/globals.css staat hier `tr.clickable:hover`,
* dus daar licht een rij die niets doet ook niet op. Dat onderscheid hoort hier pas thuis zodra de
* tabellen die wel ergens heen gaan allemaal een `data-rijlink` hebben: nu heeft bijvoorbeeld
* /gesprekken dat niet, terwijl de rij daar in de Next.js-versie wel `clickable` is, en een regel
* op `.rij-klikbaar` zou de zweefstand daar juist weghalen. Zie docs/risicos.md.
*/
table.tabel tbody tr:hover {
background: var(--color-brand-accent-subtle);
}
/* Alleen tabellen die er zelf om vragen vouwen op: zonder data-label per cel raakt de lezer bij
het opvouwen juist de kolomkop kwijt, en dan is horizontaal schuiven beter. */
@container (max-width: 640px) {
table.tabel-stapel thead {
display: none;
}
table.tabel-stapel,
table.tabel-stapel tbody,
table.tabel-stapel tr {
display: block;
width: 100%;
}
table.tabel-stapel tr {
padding: 10px 0;
border-bottom: 1px solid var(--color-border-default);
}
table.tabel-stapel tbody tr:last-child {
border-bottom: none;
}
table.tabel-stapel td {
display: block;
padding: 3px 0;
border-bottom: none;
text-align: left;
}
/* Het kopje van de kolom hoort bij de waarde zodra de kolom zelf weg is. */
table.tabel-stapel td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted);
}
table.tabel-stapel td[colspan] {
text-align: center;
}
}
/* --- Avatar en icoonbadge ----------------------------------------------------------------
*
* De initialen van een persoon in een rondje, en een gebouwtje in een vierkantje bij een
* werkgever. Uit Avatar.tsx en IconBadge.tsx, met dezelfde zeven kleuren: de kleur volgt uit de
* naam, zodat hetzelfde dossier op elk scherm aan dezelfde kleur te herkennen is.
*/
.avatar,
.iconbadge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
font-size: 14px;
font-weight: 700;
}
.avatar {
border-radius: 999px;
}
.iconbadge {
border-radius: var(--radius-control);
}
.avatar-standaard,
.iconbadge-standaard {
background: var(--color-brand-accent-subtle);
color: var(--color-brand-accent-text);
}
.avatar-teal,
.iconbadge-teal {
background: var(--color-status-success-bg);
color: var(--color-status-success-text);
}
.avatar-paars,
.iconbadge-paars {
background: var(--color-avatar-purple-bg);
color: var(--color-avatar-purple-text);
}
.avatar-koraal,
.iconbadge-koraal {
background: var(--color-avatar-coral-bg);
color: var(--color-avatar-coral-text);
}
.avatar-roze,
.iconbadge-roze {
background: var(--color-avatar-pink-bg);
color: var(--color-avatar-pink-text);
}
.avatar-blauw,
.iconbadge-blauw {
background: var(--color-avatar-blue-bg);
color: var(--color-avatar-blue-text);
}
.avatar-amber,
.iconbadge-amber {
background: var(--color-status-warning-bg);
color: var(--color-status-warning-text);
}
/* Een zoekveld met een knop boven een lijst, zonder kaart eromheen. */
.zoekrij {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
/* De keuzelijsten naast het zoekveld krijgen dezelfde omlijsting en hoogte als het veld zelf; in
de Next.js-versie delen ze dezelfde klassen. Zonder dit staat er een kale browserkeuzelijst
naast een omlijst veld, en dat leest als twee verschillende soorten besturing. */
.zoekrij input,
.zoekrij select {
padding: 8px 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
font: inherit;
font-size: 16px;
}
/* Het zoekveld groeit niet mee tot de knop aan toe: het is een veld van een regel of drie woorden,
en in de Next.js-versie staat het op zijn eigen breedte met de rest van de rij ernaast. */
.zoekrij input {
flex: 0 1 320px;
min-width: 0;
}
/* Het potloodje naast een naam: bewerken zonder het scherm eerst te openen. */
.potlood {
display: inline-flex;
color: var(--color-text-muted);
}
.potlood:hover {
color: var(--color-brand-navy);
}
/* Een naam met zijn badge ernaast, in een tabelcel. */
.metbadge {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
/* --- Badge ------------------------------------------------------------------------------
*
* Uit src/components/ui/Badge.tsx: een ronde pil op 16px, vet, met de statuskleuren erin.
*/
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
background: var(--color-badge-gray-bg);
color: var(--color-text-secondary);
}
.badge-groen {
background: var(--color-status-success-bg);
color: var(--color-status-success-text);
}
.badge-amber {
background: var(--color-status-warning-bg);
color: var(--color-status-warning-text);
}
.badge-rood {
background: var(--color-status-error-bg);
color: var(--color-status-error-text);
}
.badge-blauw {
background: var(--color-brand-accent-subtle);
color: var(--color-brand-accent-text);
}
/* Een badge in een tabelrij of naast een kop: dezelfde vorm, een maat kleiner, zodat de rij niet
uit elkaar wordt getrokken. */
.badge-klein {
padding: 2px 10px;
font-size: 14px;
}
/* --- Knoppen ----------------------------------------------------------------------------
*
* Uit src/components/ui/Button.tsx. Drie maten en vijf varianten, allemaal met dezelfde hoek en
* dezelfde vetheid; het verschil zit in vlak en rand.
*/
.knop {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-control);
border: 1px solid var(--color-brand-navy);
background: var(--color-brand-navy);
color: var(--color-text-inverse);
box-shadow: var(--shadow-sm);
font: inherit;
font-size: 16px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.knop:hover {
filter: brightness(0.95);
}
/*
* Een knop die niet mag, en een knop die bezig is: dezelfde vorm.
*
* In de Next.js-versie is dat letterlijk dezelfde stand. Een formulier daar is een server action,
* en zolang die loopt staat de knop op `disabled`; `disabled:opacity-50 disabled:cursor-not-allowed`
* uit Button.tsx doet de rest. Hier verstuurt de browser zelf, dus zet verzendknop.js er
* `aria-busy` op in plaats van `disabled`: een uitgeschakelde knop stuurt zijn naam en waarde niet
* mee, en daar hangt aan de serverkant van alles aan.
*/
.knop:disabled,
.knop[aria-busy="true"] {
opacity: 0.5;
cursor: not-allowed;
filter: none;
}
.knop-tweede {
background: var(--color-bg-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
.knop-klein {
padding: 6px 12px;
font-size: 14px;
}
.knop-groot {
padding: 12px 20px;
}
/*
* De accentknop uit src/components/ui/Button.tsx (variant "accent"): groen in plaats van navy.
* Navy is de hoofdknop van een formulier ("Opslaan"); accent is de handeling die het dossier
* verderhelpt, zoals "Koppel aan vacature". Naast elkaar gezet zijn dat twee verschillende dingen,
* en in de Next.js-versie hebben ze daarom twee kleuren.
*/
.knop-accent {
background: var(--color-brand-accent-vlak);
border-color: var(--color-brand-accent-vlak);
color: var(--color-text-inverse);
}
/*
* Een draaiend ringetje op de accent-inleesknop zolang die een document herkent, zoals het
* animate-spin-svg'je in src/app/portal/kandidaten/nieuw/KandidaatUploadFormulier.tsx. Zonder dit
* verandert er op het scherm tien tot vijftien seconden niets en lijkt de klik niet aangekomen.
*
* Alleen op de accentknop die zelf een document inleest (data-inleesknop), niet op elke knop die
* aria-busy krijgt: de gewone verzendknoppen in het portaal wisselen bij "Bezig..." alleen hun
* tekst (static/js/verzendknop.js), en zo doet de Next.js-versie dat daar ook. currentColor is op
* de groene knop wit, dus het ringetje is goed te zien.
*/
@keyframes knop-draai {
to {
transform: rotate(360deg);
}
}
.knop-accent[data-inleesknop][aria-busy="true"]::before,
.knop[data-inleesknop][aria-busy="true"]::before {
content: "";
flex: none;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: knop-draai 0.6s linear infinite;
}
/* Een knop zonder vlak, voor een handeling die naast de hoofdknop staat. */
.knop-kaal {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--color-brand-accent-text);
}
/* --- Zichtbare toetsenbordaandacht -------------------------------------------------------
*
* Overgenomen uit src/app/globals.css, waar dit blok op één plek staat. Zonder dit had alleen een
* knop en een formulierveld een eigen ring en viel de rest terug op die van de browser: één pixel
* bijna-zwart. Op de donkere zijbalk is dat niet te zien, en dat is precies de plek waar iemand
* die tabt begint. Tabben door een scherm hoorde een spoor te geven dat je kunt volgen.
*
* :focus-visible en niet :focus, zodat een muisklik geen ring achterlaat. Elementselectors en geen
* klassen, zodat elk aanwijsbaar ding meedoet, ook een nieuw scherm dat hier nog niet bestaat; een
* component die een andere ring wil zet die met een klasse en wint dan op gewicht.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
/* Op de donkere zijbalk verdwijnt een navy ring in de achtergrond. */
.zijbalk a:focus-visible,
.zijbalk button:focus-visible {
outline-color: var(--color-text-inverse);
}
.knop:focus-visible,
.veld input:focus-visible,
.veld select:focus-visible,
.veld textarea:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
/* --- Formuliervelden --------------------------------------------------------------------
*
* Uit src/components/ui/Field.tsx: label van 16px in de tweede tekstkleur, en een veld op wit met
* de sterkere rand. Het vlak is wit en niet grijs: grijs leest als "dit veld staat uit".
*/
.veld {
margin-bottom: 16px;
}
/*
Het opschrift boven een veld. De uitzonderingen zijn opschriften die naast een vakje staan in
plaats van erboven: die zetten zichzelf op flex en verloren dat van dit blok, want `.veld label`
weegt zwaarder dan een enkele klasse. Het aankruisvakje stond daardoor op een eigen regel met de
tekst eronder.
*/
.veld label:not(.vinkje, .meerkeuze-optie) {
display: block;
margin-bottom: 6px;
font-size: 16px;
font-weight: 500;
color: var(--color-text-secondary);
}
/* Een aankruisvakje of keuzerondje is geen invoerregel en hoort niet de volle breedte te krijgen. */
.veld input:not([type="checkbox"], [type="radio"], [type="color"]),
.veld select,
.veld textarea,
.veldinvoer {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
font: inherit;
font-size: 16px;
color: var(--color-text-primary);
}
.veld textarea,
textarea.veldinvoer {
resize: vertical;
}
.veld input:not([type="checkbox"], [type="radio"], [type="color"]):focus,
.veld select:focus,
.veld textarea:focus,
.veldinvoer:focus {
border-color: var(--color-brand-accent);
}
.veldinvoer:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
/* Velden naast elkaar: twee kolommen zodra het past. Niet meer dan twee, want een waarde als een
volledige adresregel past niet in een vijfde van de breedte. */
.veldenraster {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.veldenraster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.veldenraster-drie {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.veldenraster .veld {
margin: 0;
}
/*
Eén cel van het raster. Meestal staat er één veld in; bij velden die samen één ding zijn, zoals de
twee werktijden, staan ze onder elkaar in dezelfde cel. Zie templates/_veldenraster.html.
*/
.veldgroep {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Een veld met een waarde die je alleen leest. Daar is het grijze vlak wel op zijn plaats. */
.veldwaarde {
padding: 8px 10px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-field-bg);
font-size: 16px;
white-space: pre-line;
}
/* Een waarde die uit sjabloonregels is opgebouwd: `pre-line` zou elke regeleinde in de bron als een
lege regel tonen, en regeleinden horen hier uitdrukkelijk een te zijn. */
.veldwaarde-vloeiend {
white-space: normal;
}
/* Read-only weergave van een veld op een detailpagina: label kleiner en in muted kleur,
waarde groter en in primaire kleur, zodat het contrast meteen duidelijk is. */
.veld-detail label:not(.vinkje, .meerkeuze-optie) {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.veldtekst {
font-size: 15px;
line-height: 1.6;
white-space: pre-line;
color: var(--color-text-primary);
margin: 0;
max-width: 90%;
}
@media (min-width: 640px) {
.veldtekst {
text-align: justify;
}
}
.veldtekst-leeg {
color: var(--color-text-muted);
font-style: italic;
}
.veld-beschrijving {
margin-bottom: 28px;
}
/* Bladwijzerknop in de vacaturelijst en het bewaard-overzicht. */
.bewaarknop-cel {
width: 36px;
padding: 0;
text-align: center;
}
.bewaarknop {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 6px;
border-radius: 4px;
cursor: pointer;
color: var(--color-text-muted);
transition: color 0.15s, background 0.15s;
}
.bewaarknop:hover {
color: var(--color-brand-accent-vlak);
background: var(--color-brand-accent-subtle);
}
.bewaarknop-actief {
color: var(--color-brand-accent-vlak);
}
/* Bewaarknop op de detailpagina: als gewone knop maar met icoon ervoor. */
.bewaarknop-groot {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bewaarknop-groot.bewaarknop-actief {
background: var(--color-brand-accent-vlak);
border-color: var(--color-brand-accent-vlak);
color: var(--color-text-inverse);
}
/* Een veld dat nog gevuld moet worden, gemarkeerd met een gele rand in plaats van met een lijstje
twijfels erboven. */
.veld-leeg input:not([type="checkbox"], [type="radio"], [type="color"]),
.veld-leeg select,
.veld-leeg textarea,
.veld-leeg .meerkeuze-samenvatting,
.veldinvoer-leeg,
.veldwaarde-leeg {
border-color: var(--color-status-warning-solid);
color: var(--color-status-warning-text);
}
/* Een veld met een validatiefout krijgt een rode rand, zodat het naast de foutmelding
ook in het veld zelf zichtbaar is waar het misgaat. */
.veld-fout input,
.veld-fout select,
.veld-fout textarea {
border-color: var(--color-status-error-solid);
}
/* Een label bij een verplicht veld krijgt een sterretje; dat sterretje is rood. */
/* Het sterretje staat 2px van het woord af, niet een hele spatie: `ml-0.5` in VeldLabel van
src/components/ui/Field.tsx. Met " *" las het als een los teken achter het opschrift. */
.veld-verplicht::after {
content: "*";
margin-left: 2px;
color: var(--color-status-error-text);
}
/* --- Meldingen --------------------------------------------------------------------------- */
.melding {
padding: 10px 14px;
border-radius: var(--radius-control);
font-size: 16px;
background: var(--color-status-success-bg);
color: var(--color-status-success-text);
}
.melding-fout {
background: var(--color-status-error-bg);
color: var(--color-status-error-text);
}
.melding-waarschuwing {
background: var(--color-status-warning-bg);
color: var(--color-status-warning-text);
}
/* De meldingen van de afgelopen handeling, boven de inhoud. */
.berichten {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
/* --- Toast ---------------------------------------------------------------------------------
*
* De bevestiging van wat je net deed, rechtsonder in beeld. Uit OpgeslagenToast.tsx.
*
* Het wegfaden gebeurt met een animatie en niet met JavaScript: daar is geen state voor nodig, en
* zo werkt het ook wanneer er geen script draait. Een fout blijft staan; alleen een bevestiging
* verdwijnt, want die heeft zijn werk gedaan zodra je hem hebt gezien.
*/
.toasts {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 50;
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(24rem, calc(100vw - 48px));
/* De container zelf vangt geen muisgebeurtenissen op; anders blokkeert een onzichtbare
(opacity:0) maar nog aanwezige toast klikken op elementen eronder. Permanente toasts
(fouten zonder toast-verdwijnt) zetten pointer-events hieronder weer aan. */
pointer-events: none;
}
.toast:not(.toast-verdwijnt) {
pointer-events: auto;
}
.toast {
margin: 0;
padding: 12px 16px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
box-shadow: var(--shadow-md);
font-weight: 500;
}
.toast-gelukt {
border-color: var(--color-status-success-solid);
background: var(--color-status-success-bg);
color: var(--color-status-success-text);
}
.toast-waarschuwing {
border-color: var(--color-status-warning-solid);
background: var(--color-status-warning-bg);
color: var(--color-status-warning-text);
}
.toast-fout {
border-color: var(--color-status-error-solid);
background: var(--color-status-error-bg);
color: var(--color-status-error-text);
}
@keyframes toast-komt-en-gaat {
0% {
opacity: 0;
transform: translateY(8px);
}
8%,
85% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(8px);
}
}
.toast-verdwijnt {
animation: toast-komt-en-gaat 4s ease forwards;
pointer-events: none;
}
/* Wie beweging heeft uitgezet krijgt geen schuivende toast, maar hem ook niet eeuwig in beeld. */
@media (prefers-reduced-motion: reduce) {
.toast-verdwijnt {
animation: toast-komt-en-gaat 4s step-end forwards;
}
}
/* --- Lege staat --------------------------------------------------------------------------
*
* Uit src/components/ui/LegeStaat.tsx: een gestippeld kader in plaats van een grijze regel, zodat
* je ziet dat er een plek is die nog leeg is en niet dat het scherm stuk is.
*/
.lege-staat {
margin: 0 0 24px;
padding: 20px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-card);
background: var(--color-bg-surface);
text-align: center;
font-size: 16px;
color: var(--color-text-muted);
}
/* `font-semibold` in LegeStaat.tsx, en dat is 600. Een staat standaard op 700 en viel
daardoor zwaarder uit dan de titel van een lege staat in de Next.js-versie. */
.lege-staat strong {
display: block;
font-weight: 600;
color: var(--color-text-primary);
}
/* De uitleg onder de titel is een maat kleiner dan de losse regel van een lege melding: `mt-1
text-[14px]` in LegeStaat.tsx tegenover de 16px van LegeMelding. */
.lege-staat p {
margin: 4px 0 0;
font-size: 14px;
}
/* De knop in een lege staat staat eronder, gecentreerd: hij is de uitweg, niet een voetnoot. */
.lege-staat .knoppenrij {
justify-content: center;
margin-top: 16px;
}
/* Kaart met gecentreerde inhoud: voor een "alles goed"-toestand binnen een pagina die niet leeg
is. Ziet eruit als een gewone kaart, maar tekst en knop zijn gecentreerd. */
.kaart-centreer {
text-align: center;
}
.kaart-centreer .knoppenrij {
justify-content: center;
margin-top: 16px;
}
/* De waarde rechts op een lijstregel: een tijdstip, een percentage, een aantal. */
.lijstrij-waarde {
flex-shrink: 0;
font-weight: 600;
white-space: nowrap;
}
/* --- Paneel -----------------------------------------------------------------------------
*
* Een blok binnen een kaart: één aanvraag, één voorstel, één regel uit een lijst die zelf uit
* meer dan een regel bestaat. Vlak en niet nog een kaart, want een kaart in een kaart leest als
* twee schermen over elkaar.
*/
.paneel {
padding: 14px 16px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-field-bg);
}
.panelen {
display: flex;
flex-direction: column;
gap: 12px;
}
.panelen > .paneel {
margin: 0;
}
/*
* Een aanvraag op het aanmeldingenscherm: een paneel met de gegevens als opschrift-waarde-regels
* onder elkaar en de aanmelddatum rechtsboven, zoals `grid-cols-[auto_1fr]` naast een
* `justify-between`-kop in src/app/(app)/aanmeldingen/page.tsx.
*/
.aanmeldvak-kop {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.aanmeldvak-kop .kaart-onderschrift {
margin: 0;
}
.aanmeldvelden {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 6px 24px;
margin: 0;
}
.aanmeldvelden dt {
color: var(--color-text-muted);
}
.aanmeldvelden dd {
margin: 0;
color: var(--color-text-primary);
/* Een e-mailadres is een enkel woord: zonder dit duwt hij de waardekolom breder dan het vak. */
overflow-wrap: anywhere;
}
.aanmeldnaam {
font-weight: 600;
}
.aanmeldvak > .knoppenrij {
gap: 10px;
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid var(--color-border-default);
}
/*
* "Afwijzen" is in src/components/ui/AfwijzenKnop.tsx een ghost-knop met een rand en rode letters,
* op dezelfde maat als "Goedkeuren" ernaast. Hier had hij helemaal geen opmaak, dus stond er een
* onderstreepte link naast een gevulde knop: twee handelingen die er als twee verschillende
* soorten dingen uitzagen.
*/
.afwijzen {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: transparent;
color: var(--red-ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.afwijzen:hover {
background: var(--color-status-error-bg);
}
/* De afwijzingsreden hoort onder het besluit, niet ernaast op dezelfde regel. */
.afwijsreden {
display: block;
margin-top: 2px;
}
/*
* De contactpersonen van een werkgever: een vlakje per persoon, drie naast elkaar op een breed
* scherm en twee op een middelbreed, zoals `sm:grid-cols-2 lg:grid-cols-3` in
* src/app/(app)/werkgevers/[id]/page.tsx.
*/
.contactpersoonraster {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.contactpersoonraster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.contactpersoonraster {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Een waarde die als gewone tekst onder zijn opschrift staat in plaats van in een leesveld met een
rand eromheen; wat ontbreekt leest cursief en gedempt. Uit het organisatiedossier. */
.losse-waarde {
margin: 0;
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.waarde-ontbreekt {
color: var(--color-text-muted);
}
.contactpersoon-naam {
margin: 0;
font-weight: 600;
color: var(--color-text-primary);
}
.contactpersoon-functie {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
.contactpersoon-regel {
margin: 2px 0 0;
color: var(--color-text-primary);
/* Een e-mailadres is één woord: zonder dit duwt het de kolom breder dan het scherm. */
overflow-wrap: anywhere;
}
/* "Nog niets" binnen een kaart die er al een kader omheen heeft: één regel, geen tweede kader.
De gestippelde .lege-staat is voor een leeg scherm, niet voor een lege kaart. */
.leegregel {
margin: 0;
color: var(--color-text-muted);
}
/* --- Kenmerk: label met de waarde eronder ------------------------------------------------ */
.kenmerken {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin: 0;
}
.kenmerk dt {
font-size: 14px;
color: var(--color-text-muted);
}
.kenmerk dd {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
/* Een e-mailadres of een lange bedrijfsnaam is één woord: zonder dit duwt hij de kolom breder
dan het scherm en schuift de hele pagina mee. */
overflow-wrap: anywhere;
}
/* --- Inlog- en activatieschermen ---------------------------------------------------------
*
* Uit src/app/login/LoginForm.tsx: links een donker paneel met het logo en de belofte, rechts het
* formulier. Onder 1024px staat het paneel erboven, met alleen de tekst.
*/
.aanmeldscherm {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--color-bg-page);
}
.aanmeldscherm-paneel {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: 24px;
/* Kleur en verloop apart: het verloop is versiering, de vlakkleur is wat er staat wanneer het
verloop niet tekent. Een contrastmeting leest de vlakkleur, en die hoort te kloppen. */
background-color: var(--color-brand-navy);
background-image: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-navy-hover));
color: var(--color-text-inverse);
}
.aanmeldscherm-merk {
display: none;
width: auto;
height: 36px;
align-self: flex-start;
}
.aanmeldscherm-paneel h2 {
margin: 0;
max-width: 280px;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.aanmeldscherm-paneel p {
margin: 8px 0 0;
max-width: 280px;
font-size: 16px;
/* Zeven tienden wit op navy haalt ruim de norm, en houdt de belofte ondergeschikt aan de kop. */
color: rgba(255, 255, 255, 0.7);
}
.aanmeldscherm-vlak {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 24px;
}
.aanmeldscherm-kaart {
width: 100%;
max-width: 380px;
}
.aanmeldscherm-kaart h1 {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
}
/* De kop op een aanmeldkaart, gelijk aan die in het inlogscherm. */
.aanmeldscherm-kop {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
}
.aanmeldscherm-onderschrift {
margin: 0 0 20px;
font-size: 14px;
color: var(--color-text-muted);
}
.aanmeldscherm-terug {
margin: 14px 0 0;
text-align: center;
font-size: 14px;
color: var(--color-text-muted);
}
/* De aanmeldformulieren op de publieke site: één kaart midden op het scherm, zonder het donkere
paneel ernaast. */
.inlog {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.inlog-kaart {
width: 100%;
max-width: 420px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
padding: 28px;
}
/* Links uitgelijnd en niet gecentreerd: het logo loopt mee met de velden eronder. */
.inlog-logo {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 0 20px;
}
/* Het label en de "wachtwoord vergeten"-link staan op dezelfde regel boven het veld. */
.veld-kop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.veld-kop label {
margin-bottom: 0;
}
.knop-breed {
width: 100%;
justify-content: center;
}
.demo-blok {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border-default);
}
.demo-kop {
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.demo-knoppen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
}
.demo-knoppen button {
justify-content: center;
}
@media (min-width: 1024px) {
.aanmeldscherm {
flex-direction: row;
}
.aanmeldscherm-paneel {
flex: 1 1 0;
max-width: 420px;
padding: 40px;
}
.aanmeldscherm-merk {
display: block;
}
.aanmeldscherm-paneel h2 {
margin-bottom: 10px;
font-size: 32px;
}
.aanmeldscherm-paneel p {
margin-top: 0;
}
}
/* --- Agenda -------------------------------------------------------------------------------
*
* De weekweergave: zeven kolommen met een blok per afspraak, gekleurd naar de medewerker die hem
* heeft. Uit src/app/(app)/agenda/page.tsx en chip-color.ts.
*/
.agenda-kop {
justify-content: space-between;
margin-bottom: 16px;
}
/* De week/lijst-schakelaar: twee knoppen tegen elkaar aan in één pil. */
.schakelaar {
display: flex;
margin: 0;
overflow: hidden;
font-weight: 600;
border: 1px solid var(--color-border-strong);
border-radius: 999px;
}
.schakelaar a {
padding: 6px 14px;
color: var(--color-text-secondary);
text-decoration: none;
}
.schakelaar a[aria-current="page"] {
background: var(--color-brand-navy);
color: var(--color-text-inverse);
}
/* Een rij filters boven een lijst: elk veld zo breed als het nodig heeft, en de knoppen erachter. */
.filterbalk {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-border-default);
}
.filterbalk .veld {
margin: 0;
flex: 0 1 auto;
min-width: 0;
}
.filterbalk .veld input,
.filterbalk .veld select {
width: auto;
min-width: 12rem;
}
/* --- Een gesprek: berichten als ballonnen -------------------------------------------------
*
* Eigen berichten rechts en in de merkkleur, die van de ander links op een licht vlak. In een
* gesprek van twintig regels is die kant het enige wat in een oogopslag vertelt wie wat zei; een
* naam boven elke regel lees je pas als je al aan het zoeken bent.
*/
.gesprek {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.bericht {
max-width: 80%;
padding: 10px 14px;
border-radius: var(--radius-card);
background: var(--color-field-bg);
border: 1px solid var(--color-border-default);
}
.bericht-eigen {
align-self: flex-end;
background: var(--color-brand-accent-subtle);
border-color: var(--color-brand-accent-subtle);
}
.bericht-kop {
margin: 0 0 4px;
font-size: 14px;
/* De tweede tekstkleur en niet de gedempte: die haalt op dit getinte vlak geen 4.5. */
color: var(--color-text-secondary);
}
.bericht-tekst {
margin: 0;
white-space: pre-line;
}
/* --- Rondleiding --------------------------------------------------------------------------
*
* Links de uitleg, rechts een nagebouwd voorbeeldscherm. Dat scherm is met opzet kleiner dan het
* echte portaal en niet aanklikbaar: het laat zien waar iets staat, het is niet het scherm zelf.
*/
.rondleiding-inhoud {
display: grid;
flex: 1;
grid-template-columns: 1fr;
gap: 16px;
min-height: 0;
padding: 16px;
overflow: auto;
}
@media (min-width: 640px) {
.rondleiding-inhoud {
padding: 20px;
}
}
/*
* Het voorbeeldscherm is de brede kolom en de tekst de smalle: `lg:grid-cols-[1.3fr_1fr]` in
* src/components/rondleiding/Rondleiding.tsx. Hier stond die verhouding omgekeerd, waardoor het
* scherm waar de stap over gaat de kleinste helft was.
*/
@media (min-width: 1024px) {
.rondleiding-inhoud {
grid-template-columns: 1.3fr 1fr;
align-items: start;
}
}
/* De uitleg staat kleiner dan de gewone schermtekst: 14.5px voor de alinea's, 13.5px voor de
punten eronder. */
.rondleiding-tekst p {
margin: 0 0 10px;
font-size: 14.5px;
line-height: 1.625;
color: var(--color-text-secondary);
}
/* Geen opsommingstekens van de browser maar een rond accentpuntje, zoals de Next.js-versie. */
.rondleiding-tekst ul {
margin: 4px 0 0;
padding-left: 0;
color: var(--color-text-secondary);
list-style: none;
}
.rondleiding-tekst li {
display: flex;
gap: 8px;
margin-bottom: 6px;
font-size: 13.5px;
line-height: 1.375;
}
.rondleiding-tekst li::before {
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 7px;
content: "";
background: var(--color-brand-accent);
border-radius: 50%;
}
.rondleiding-voet {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid var(--color-border-default);
}
/* --- Het voorbeeldscherm binnen de rondleiding --------------------------------------------- */
.demoscherm {
display: flex;
overflow: hidden;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-card);
background: var(--color-bg-page);
font-size: 12px;
line-height: 1.4;
}
.demoscherm-zijbalk {
display: none;
flex-direction: column;
gap: 4px;
flex: 0 0 130px;
padding: 10px 8px;
background: var(--color-brand-navy);
color: var(--color-sidebar-text);
}
@media (min-width: 640px) {
.demoscherm-zijbalk {
display: flex;
}
}
.demoscherm-zijbalk .actief {
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.15);
color: var(--color-text-inverse);
font-weight: 600;
}
.demoscherm-zijbalk span {
padding: 4px 8px;
}
/* De merknaam boven het menu, doffer dan de menu-items zelf. */
.demoscherm-merk {
margin-bottom: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.demoscherm-vlak {
flex: 1 1 auto;
min-width: 0;
}
.demoscherm-kop {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid var(--color-border-default);
background: var(--color-bg-surface);
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-brand-navy);
}
.demoscherm-paginatitel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Het merkje rechtsboven dat zegt dat dit een voorbeeld is en niet het echte scherm. */
.demoscherm-demo {
flex-shrink: 0;
padding: 2px 8px;
color: var(--color-status-warning-text);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--color-status-warning-bg);
border-radius: 999px;
}
.demoscherm-inhoud {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.demotegels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.demokaart {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
}
/* Het blok waar de stap over gaat. Eén per scherm: licht je er meer op, dan licht er niets op. */
.demokaart.oplicht,
.demorij.oplicht {
border-color: var(--color-brand-accent);
box-shadow: 0 0 0 3px var(--color-brand-accent-subtle);
}
.demokaart-titel {
color: var(--color-brand-navy);
}
.demolabel {
margin: 0;
color: var(--color-text-secondary);
}
.demogetal {
font-size: 18px;
color: var(--color-brand-navy);
}
.demorijen {
display: flex;
flex-direction: column;
gap: 6px;
}
.demorij {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
}
.demorij-tekst strong,
.demorij-tekst span {
display: block;
}
.demorij-tekst span {
color: var(--color-text-secondary);
}
.demovelden {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.demoveld {
display: block;
margin-top: 2px;
padding: 4px 6px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-field-bg);
}
/* Een veld dat niet uit het document is herkend, met dezelfde gele rand als in het echte scherm. */
.demoveld.leeg {
border-color: var(--color-status-warning-solid);
color: var(--color-status-warning-text);
}
.demodropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
color: var(--color-text-secondary);
}
.demobestand {
padding: 2px 8px;
border-radius: 999px;
background: var(--color-brand-accent-subtle);
color: var(--color-brand-accent-text);
font-weight: 600;
}
.demobadges,
.demoknoppen {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.demoknoppen {
justify-content: flex-end;
}
.demoknop {
padding: 4px 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
font-weight: 600;
}
.demoknop-hoofd {
border-color: var(--color-brand-navy);
background: var(--color-brand-navy);
color: var(--color-text-inverse);
}
.demostroom {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.demostroom li {
padding: 8px 10px;
border-left: 3px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
}
.demostroom li.actief {
border-left-color: var(--color-brand-accent);
background: var(--color-brand-accent-subtle);
}
.demostroom strong,
.demostroom span {
display: block;
}
.demostroom span {
color: var(--color-text-secondary);
}
/* --- Kandidatenbord -----------------------------------------------------------------------
*
* Vier kolommen met een kaart per kandidaat, zoals KandidatenKanban.tsx. Slepen is een toevoeging
* op de keuzelijst die op elke kaart staat, niet de enige manier om iets te verzetten.
*/
.bord {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.bordkolom {
padding: 12px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-card);
background: var(--color-bg-surface);
}
.bordkolom-doel {
border-color: var(--color-brand-accent);
background: var(--color-brand-accent-subtle);
}
/* Opschrift links, aantal rechts, zoals de kolomkop in KandidatenKanban.tsx. */
.bordkolom-kop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
font-weight: 700;
color: var(--color-brand-navy);
}
.bordkaart {
margin-bottom: 8px;
padding: 10px 12px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
background: var(--color-field-bg);
cursor: grab;
}
.bordkaart-sleept {
opacity: 0.5;
}
.bordkaart-naam {
min-width: 0;
}
.bordkaart-naam a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
color: var(--color-text-primary);
text-decoration: none;
}
.bordkaart-naam > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
color: var(--color-text-muted);
}
.bordkaart-regel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
font-size: 14px;
color: var(--color-text-muted);
}
.bordkaart-regel > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Een stap naar links of naar rechts. Deze twee knoppen zijn de weg die zonder muis en zonder
JavaScript ook werkt; het slepen erbovenop stuurt hetzelfde formulier. */
.bordkaart-knoppen {
display: flex;
gap: 6px;
margin-top: 8px;
}
.bordkaart-knoppen .volgende {
flex: 1 1 auto;
justify-content: center;
}
/* De uitgebreide filters onder een lijst, in een raster van gelijke kolommen. */
.filters {
margin-top: 12px;
border-top: 1px solid var(--color-border-default);
padding-top: 12px;
}
.filters > summary {
cursor: pointer;
font-weight: 600;
color: var(--color-brand-navy);
}
.filterraster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: 14px;
}
/* --- De zoekbalk boven een lijst ----------------------------------------------------------
*
* Uit KandidaatFilters.tsx: het zoekveld en de statuskeuze staan als losse velden boven de lijst,
* zonder kaart en zonder opschrift erboven. Ze staan links in een .paginakop; de
* weergaveschakelaar en de knoppen staan rechts in .paginakop-acties.
*/
.lijstfilters {
display: flex;
flex: 1 1 320px;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.lijstfilters-rij {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.lijstfilters-rij > input,
.lijstfilters-rij > select {
padding: 8px 10px;
font-family: inherit;
font-size: 16px;
color: var(--color-text-primary);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
}
.lijstfilters-rij > input {
width: 220px;
max-width: 100%;
}
/* Geen `outline: none` erbij: dat zette de aandachtring uit, en een randkleur van één pixel die
van grijs naar olijf gaat is geen ring. Zie het blok "Zichtbare toetsenbordaandacht". */
.lijstfilters-rij > input:focus,
.lijstfilters-rij > select:focus {
border-color: var(--color-brand-accent);
}
.filters-wissen {
font-weight: 600;
color: var(--color-brand-accent-text);
text-decoration: none;
}
/* Het uitklapbare filterpaneel: een omlijnd vlak en geen streep boven een raster, zodat het als
een tweede laag naast de zoekbalk leest en niet als de onderkant van de kaart erboven. */
.filterpaneel {
padding: 10px 12px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
}
.filterpaneel > summary {
cursor: pointer;
font-weight: 600;
color: var(--color-brand-accent-text);
}
.filtergroepen {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 14px;
}
@media (min-width: 768px) {
.filtergroepen {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1280px) {
.filtergroepen {
grid-template-columns: repeat(3, 1fr);
}
}
.filtergroep {
display: flex;
flex-direction: column;
gap: 10px;
}
.filtergroep .veld {
margin: 0;
}
.filtergroep-titel {
margin: 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.filtergroep-uitleg {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
.filtergroep-paar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.filterpaneel-voet {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--color-border-default);
}
/* De telling tussen de zoekbalk en de lijst. */
.lijsttelling {
margin: 0 0 14px;
color: var(--color-text-secondary);
}
/* --- Een dossiertabblad --------------------------------------------------------------------
*
* Elk blok in het kandidaatdossier staat in de Next.js-versie in een eigen
met
* `border-t border-border pt-4`. Hier doet de
dat werk: hij begint de sectie, dus de streep
* hoort erboven. Zonder die strepen loopt het tabblad door als één lange lap met tussenkopjes.
*/
.dossierinhoud h3 {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border-default);
}
/* De uitklapper vlak onder de eerste
hoort bij het blok erboven en niet bij het volgende. */
.dossierinhoud > h3:first-of-type {
margin-top: 20px;
}
/* "Bewerken" onder een sectie is daar een accentkleurige knop-als-tekst; hier de uitklapper. */
.dossierinhoud details > summary {
cursor: pointer;
font-weight: 600;
color: var(--color-brand-accent-text);
}
/* Het verwijderverzoek is de uitzondering: dat opschrift is de rode knop zelf. */
.dossierinhoud .verwijderverzoek > summary {
display: inline-flex;
color: var(--red-ink);
list-style: none;
}
.dossierinhoud .verwijderverzoek > summary::-webkit-details-marker {
display: none;
}
.dossierinhoud .verwijderverzoek > form {
margin-top: 12px;
}
/* Elk traject bij een werkgever in een eigen vak, zoals de kaartjes in de Next.js-versie. */
.trajectvak {
margin-bottom: 10px;
padding: 12px 14px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
}
.trajectvak > p {
margin: 0;
}
.trajectvak-kop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.trajectvak-kop .kaart-onderschrift {
margin: 0;
}
/* --- Publicatiecontrole -------------------------------------------------------------------
*
* Een kaart per wachtend profiel of vacature, met de anonieme projectie erin en de twee besluiten
* eronder. Uit src/app/(app)/te-beoordelen/page.tsx.
*/
.tabblad-uitleg {
margin: 16px 0 20px;
color: var(--color-text-muted);
}
.beoordeelnummer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-brand-navy);
}
.beoordeelvelden {
display: grid;
grid-template-columns: 1fr;
gap: 6px 24px;
margin: 0 0 14px;
}
@media (min-width: 640px) {
.beoordeelvelden {
grid-template-columns: repeat(2, 1fr);
}
}
.beoordeelvelden dt {
color: var(--color-text-muted);
}
.beoordeelvelden dd {
margin: 0;
}
.beoordeelkopje {
font-weight: 500;
color: var(--color-text-secondary);
}
.beoordeelregels {
display: flex;
flex-direction: column;
gap: 6px;
margin: 6px 0 14px;
padding: 0;
list-style: none;
}
.beoordeelregels > li {
padding: 10px;
background: var(--color-field-bg);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
}
.beoordeelregels > li > p {
margin: 4px 0 0;
color: var(--color-text-secondary);
}
.versieregel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.versiehistorie > summary {
cursor: pointer;
font-weight: 500;
color: var(--color-brand-accent-text);
}
.beoordeelvoet {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--color-border-default);
}
.beoordeelafkeuren {
display: flex;
flex: 1 1 260px;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.beoordeelafkeuren input {
flex: 1 1 220px;
padding: 8px 10px;
font-family: inherit;
font-size: 16px;
color: var(--color-text-primary);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
}
/* De link naar het bewerkscherm onder de profielvelden, op de plek van de uitklapper daar. */
.inline-bewerken {
margin: 16px 0 0;
font-weight: 600;
}
.inline-bewerken a {
color: var(--color-brand-accent-text);
text-decoration: none;
}
.inline-bewerken a:hover {
text-decoration: underline;
}
.filterraster .veld {
margin: 0;
}
/* Wat rechts in een rij hoort, ongeacht wat ervoor staat. */
.rechts {
margin-left: auto;
}
.weeknavigatie {
margin-bottom: 14px;
}
.weekbereik {
font-weight: 600;
color: var(--color-brand-navy);
}
/* Zeven kolommen zodra het past, en niet auto-fit: met auto-fit valt er bij een net te smalle
kolom een dag naar de volgende regel, en dan staat zondag onder maandag. */
.week {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 640px) {
.week {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.week {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
.weekdag-kop {
margin-bottom: 8px;
font-weight: 700;
color: var(--color-brand-navy);
}
.weekdag-leeg {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
.agendablok {
display: block;
margin-bottom: 6px;
padding: 8px 10px;
border-left: 3px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-badge-gray-bg);
color: var(--color-text-primary);
font-size: 14px;
line-height: 1.35;
text-decoration: none;
}
.agendablok strong,
.agendablok span {
display: block;
}
/* De tweede tekstkleur en niet de gedempte: die is gemeten op wit en op de paginakleur, en haalt
op een getinte blokkleur nog maar 4.09 tot 4.32 waar 4.5 nodig is. */
.agendablok-tijd {
color: var(--color-text-secondary);
}
/* Vier kleuren, gekozen op de medewerker die de afspraak heeft: zo zie je in één blik van wie een
dag vol staat. Een afspraak zonder toegewezen medewerker houdt de neutrale tint. */
.agendablok-blauw {
border-left-color: var(--color-avatar-blue-text);
background: var(--color-avatar-blue-bg);
}
.agendablok-paars {
border-left-color: var(--color-avatar-purple-text);
background: var(--color-avatar-purple-bg);
}
.agendablok-koraal {
border-left-color: var(--color-avatar-coral-text);
background: var(--color-avatar-coral-bg);
}
.agendablok-amber {
border-left-color: var(--color-status-warning-solid);
background: var(--color-status-warning-bg);
}
.agendablok-gesprek {
border-left-color: var(--color-brand-accent);
background: var(--color-brand-accent-subtle);
}
/* --- Tabbladen ---------------------------------------------------------------------------
*
* Uit src/components/ui/Tabs.tsx. Het actieve tabblad staat in de URL, dus een link ernaartoe is
* te delen en de terugknop werkt. Wikkelen en niet schuiven: met veel tabbladen gaf een
* schuifbalk op smalle schermen een tweede, halve regel eronder.
*/
.tabbladen {
display: flex;
flex-wrap: wrap;
gap: 4px;
/* 18 uit `mb-4.5` van Tabs.tsx plus de 24 die PageShell.tsx als `gap-6` tussen alle blokken
van een scherm zet. Met alleen die 18 begon de eerste kaart hier 24px hoger dan daar. */
margin-bottom: 42px;
border-bottom: 1px solid var(--color-border-default);
}
.tabbladen a {
flex-shrink: 0;
padding: 10px 14px;
border-bottom: 2px solid transparent;
color: var(--color-text-muted);
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.tabbladen a:hover {
color: var(--color-text-secondary);
}
.tabbladen a[aria-current="page"] {
border-bottom-color: var(--color-brand-accent);
color: var(--color-brand-navy);
}
/* --- Kleine hulpstukken ------------------------------------------------------------------ */
/* Twee kolommen waar het past, onder elkaar zodra het krap wordt. */
.kolommen {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin-bottom: 24px;
}
/*
* Twee korte velden naast elkaar binnen één kaart, zoals `grid-cols-1 sm:grid-cols-2` in de
* Next.js-versie: regio naast KvK-nummer, adres naast telefoonnummer.
*
* De ondergrens van 320 pixels hierboven kijkt naar de kaart en niet naar het scherm, en binnen
* een kaart van een halve schermbreedte vielen twee velden van 320 nooit naast elkaar. Daar staan
* ze in de Next.js-versie wel, want die schakelt op de breedte van het venster.
*/
.kolommen-smal {
gap: 16px;
grid-template-columns: minmax(0, 1fr);
margin-bottom: 16px;
}
/* De ruimte tussen de twee velden komt van de gap. Lieten ze hun eigen onderruimte staan, dan
stonden ze op een smal scherm, waar ze onder elkaar vallen, twee keer zo ver uit elkaar als de
velden erboven. */
.kolommen-smal > .veld {
margin-bottom: 0;
}
@media (min-width: 640px) {
.kolommen-smal {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* De kaart brengt zelf 24px onderruimte mee. Binnen een raster telt die bij de gap op, en dan
staan twee kaarten die onder elkaar vallen twee keer zo ver uit elkaar als naast elkaar. De
ruimte onder het raster staat hierboven op het raster zelf. */
.kolommen > .kaart {
margin-bottom: 0;
}
/* Een raster met kaarten die elk een dossier zijn. Ruimer dan .kolommen: in zo'n kaart staat een
kenmerkenraster, en dat vraagt breedte voordat het leesbaar is. */
.kaartenraster {
display: grid;
gap: 18px;
/* min() erbij: zonder dat dwingt de ondergrens van 28rem een kolom die breder is dan een
telefoon, en schuift het hele scherm horizontaal. */
grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
margin-bottom: 24px;
}
/* --- De eigen vacatures als kaarten -------------------------------------------------------
*
* Uit WerkgeverKaarten() in src/app/portal/vacatures/VacatureKaarten.tsx. Een eigen raster en niet
* .kaartenraster: de ondergrens is daar 460px en niet 28rem, en de rijen zijn even hoog, zodat de
* twee afsluitende kaarten niet als halve kaartjes onder een rij volle vacatures hangen.
*/
.vacaturekaarten {
display: grid;
gap: 14px;
/* min() erbij: zonder dat gold 460px ook op een telefoon en schoof de hele pagina zijwaarts. */
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
grid-auto-rows: 1fr;
margin-bottom: 24px;
}
/* De marge eraf: in een raster telt die bij de celhoogte op, en dan zijn de rijen niet meer even
hoog. De afstand komt van de gap. */
.vacaturekaart {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
/* Geen flex-wrap: een lange functietitel duwde de badge anders naar een eigen regel, waardoor twee
kaarten naast elkaar een verschillende kop kregen. De titel kapt af; voluit staat hij op de
vacature zelf. */
.vacaturekaart-kop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0 12px;
}
.vacaturekaart-kop > h2 {
flex: 1 1 auto;
min-width: 0;
margin: 0;
overflow: hidden;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
color: var(--color-text-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
/* De hele kaart is een dossier; de titel erin is geen losse link in een lopende tekst. Daarom
dezelfde kleur als de kop en geen streep, met de streep pas op hover. */
.vacaturekaart-badges {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
/* Onder elkaar en niet in kolommen: drie kenmerken naast elkaar maakten de kaart een tabel. */
.vacaturekaart .kenmerken {
display: flex;
flex-direction: column;
gap: 10px;
}
/* `margin-top: auto` drukt de voetregel naar de onderkant, zodat hij in elke kaart van een rij op
dezelfde hoogte staat. */
.vacaturekaart-voet {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
margin: auto 0 0;
padding-top: 12px;
font-size: 16px;
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border-default);
}
/* "· 2 te bekijken" is het enige in de voetregel dat om aandacht vraagt. */
.vacaturekaart-voet strong {
color: var(--color-status-warning-text);
}
/* Ontbreekt er een verplicht veld, dan is de hele zin de waarschuwing en niet alleen de
veldnamen erin. */
.vacaturekaart-ontbreekt {
min-width: 0;
color: var(--color-status-warning-text);
}
/* Een kenmerk zonder waarde: schuin en in de lichtste tekstkleur, zodat het als "hier staat niets"
leest en niet als een waarde die toevallig kort is. */
.kenmerk-leeg {
font-style: italic;
color: var(--color-text-muted);
}
/* De twee afsluitende kaarten zijn zelf een link. Zonder dit staat er een streep onder elke regel
tekst erin. */
.vacaturekaart-actie {
color: var(--color-text-secondary);
text-decoration: none;
}
/* Een knop die de kaart niet uitrekt: in een kolom met align-items stretch werd hij anders zo
breed als de kaart. */
.vacaturekaart-actie .knop {
align-self: flex-start;
}
/* De twee kaarten die geen vacature zijn: de weg naar de aanmeldingen en de weg naar een nieuwe
vacature. Titel en tekst bovenaan, knop onderaan, zodat de knop op dezelfde hoogte staat als de
voetregel van de vacatures ernaast. */
.vacaturekaart-actie {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
margin: 0;
}
/* Een span en geen kop: in de Next.js-versie staat hier ook geen
. Deze twee kaarten zijn
handelingen, geen afdelingen van het scherm, en als kop zouden ze in de koppenlijst van
scripts/vergelijk-versies.mjs opduiken terwijl ze daar niet staan. */
.vacaturekaart-actie-titel {
display: block;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
color: var(--color-brand-navy);
}
/* 16px en niet de 14 van een kaartonderschrift: dit is de inhoud van de kaart en niet een
bijschrift bij een kop. `mt-1 block text-[16px] text-ink-2` in VacatureKaarten.tsx. */
.vacaturekaart-actie .kaart-onderschrift {
display: block;
margin: 4px 0 0;
font-size: 16px;
color: var(--color-text-secondary);
}
.vacaturekaart-actie .knoppenrij {
margin: 0;
}
/* Wachten er kandidaten op een oordeel, dan springt de kaart eruit: dat is waar dit scherm
naartoe leidt zodra een vacature eenmaal loopt. */
.vacaturekaart-actie-opvallend {
border-color: var(--color-brand-accent);
background: var(--color-brand-accent-subtle);
}
/* Een kaart die in zijn geheel een link is, licht op bij aanwijzen: `hover:shadow-md` in
VacatureKaarten.tsx. Zonder dit gaf de kaart geen enkel teken dat er een klik in zat. */
.vacaturekaart-actie:hover {
box-shadow: var(--shadow-md);
}
/* De weg naar een nieuwe vacature is geen melding maar een uitnodiging: gestippeld en zonder
schaduw, zodat hij niet als een zesde vacature leest. */
.vacaturekaart-actie-leeg {
border-style: dashed;
border-color: var(--color-border-strong);
box-shadow: none;
}
/* Deze kaart heeft geen schaduw om op te tillen, dus vult hij in plaats daarvan: `hover:bg-field-bg`
daar, waar de andere `hover:shadow-md` heeft. */
.vacaturekaart-actie-leeg:hover {
background: var(--color-field-bg);
box-shadow: none;
}
/* --- De kop van een scherm dat zijn titel in de inhoud zet -------------------------------
*
* `showTitle={false}` in src/app/portal/vacatures/page.tsx: de kopbalk blijft leeg en de titel
* staat met zijn uitleg boven de kaarten, met de hoofdhandeling rechts ernaast.
*/
.paginakop-tekst {
max-width: 640px;
}
.paginakop-tekst > h1 {
margin: 0;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--color-brand-navy);
}
.paginakop-tekst > p {
margin: 6px 0 0;
font-size: 16px;
line-height: 1.625;
color: var(--color-text-secondary);
}
.paginakop-tekst > p + p {
margin-top: 12px;
color: var(--color-text-meta);
}
/* De kop van een scherm: een regel tekst links en de handelingen rechts, zonder kaart eromheen. */
/* Een naam links en de hoofdhandeling rechts, boven een raster met kaarten. Geen kaartkop: het
zijn een regel tekst en een knop, geen blok met inhoud. `mb-5 flex items-start justify-between
gap-4` in src/app/portal/kandidaten/page.tsx. */
.schermkop {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
/* 44 en niet 20: PageShell.tsx zet zijn blokken met `flex flex-col gap-6` onder elkaar, dus
bovenop de eigen `mb-5` van deze kop komt daar nog 24px bij. */
margin-bottom: 44px;
}
.schermkop > p {
margin: 0;
font-size: 16px;
color: var(--color-text-muted);
}
.schermkop .zoekrij {
margin: 0;
flex: 1 1 auto;
justify-content: flex-end;
}
/* De badge van een actief filter met de link om het te wissen ernaast. */
.filterregel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
/* Zelfde optelsom als .schermkop hierboven: `mb-5` plus de gap van de paginaschil. */
margin: 0 0 44px;
font-size: 16px;
}
.filterregel a {
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
}
.filterregel a:hover {
text-decoration: underline;
}
/* --- Kandidaatkaarten in het portaal -----------------------------------------------------
*
* Uit src/app/portal/kandidaten/page.tsx. Dezelfde vorm als de vacaturekaart van een werkgever, en
* dus dezelfde klassen voor de kop en de voetregel: kop met titel en badge, kenmerken in twee
* kolommen, en één voetregel achter een streep onderaan de kaart.
*/
.kandidaatkaarten {
display: grid;
gap: 14px;
/* min() erbij: zonder dat dwingt de ondergrens van 460px een kolom die breder is dan een
telefoon, en schuift het hele scherm horizontaal. */
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
grid-auto-rows: 1fr;
margin-bottom: 24px;
}
.kandidaatkaart {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 0;
}
/* `gap-x-4 gap-y-2.5` daar: de rijen staan dichter op elkaar dan de kolommen, zodat vier kenmerken
in twee kolommen niet twee keer zo hoog worden als de rest van de kaart. */
.kandidaatkaart .kenmerken {
gap: 10px 16px;
}
/* Twee aantekeningen die het vermelden waard zijn maar geen badge verdienen: het aantal lopende
trajecten en een ontbrekend cv. */
.kandidaatkaart-extra {
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
/* Het aantal matches is het harde getal; de beste score erachter is de toelichting erbij. In de
voetregel van een vacaturekaart is de vette tekst juist een waarschuwing, vandaar de eigen
kleur hier. */
.kandidaatkaart .vacaturekaart-voet strong {
color: var(--color-text-primary);
}
.kandidaatkaart-beste {
color: var(--color-text-muted);
}
/* Twee kolommen en niet zoveel als er passen: in een kaart lezen vier kenmerken naast elkaar als
een tabel zonder kop. */
.kenmerken-twee {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Twee kolommen waarvan de linker breder is: een lijst met werk naast een smalle tijdlijn. */
.kolommen-ongelijk {
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.kolommen-ongelijk {
grid-template-columns: 1.6fr 1fr;
}
}
/* Een lijst met regels die elk een link zijn: naam met context eronder, en rechts een waarde. */
.lijstrijen {
display: flex;
flex-direction: column;
gap: 10px;
}
.lijstrij {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
padding: 12px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-control);
color: var(--color-text-primary);
text-decoration: none;
}
.lijstrij:hover {
background: var(--color-field-bg);
}
.lijstrij-tekst {
min-width: 0;
}
.lijstrij-tekst strong,
.lijstrij-tekst > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lijstrij-tekst > span {
font-size: 14px;
color: var(--color-text-muted);
}
/* Een logboek: één gebeurtenis per regel, met een lijn ertussen. Geen raster, want de regels
horen op volgorde gelezen te worden. */
.tijdlijn {
margin: 0;
padding: 0;
list-style: none;
}
.tijdlijn li {
padding: 10px 0;
border-top: 1px solid var(--color-border-default);
}
.tijdlijn li:first-child {
padding-top: 0;
border-top: none;
}
.tijdlijn span {
display: block;
}
.tijdlijn small {
display: block;
font-size: 14px;
color: var(--color-text-muted);
}
/* Een rij knoppen onder een formulier of naast elkaar in een tabelcel. */
.knoppenrij {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* Een sleutel of andere waarde die er wel staat maar niet te lezen hoort te zijn. */
.gemaskeerd {
font-family: ui-monospace, monospace;
color: var(--color-text-muted);
}
/* Een token dat eenmalig getoond wordt. Breekt overal af: het is één lang woord en zou op een
telefoon anders het scherm uit lopen. Selecteert in één tik, zodat kopiëren één handeling is. */
.token {
display: block;
padding: 8px 10px;
font-family: ui-monospace, monospace;
overflow-wrap: anywhere;
word-break: break-all;
user-select: all;
background: var(--color-bg-surface);
color: var(--color-text-primary);
border-radius: var(--radius-control);
}
/*
* Een knop die iets onomkeerbaars doet: annuleren, ontkoppelen, definitief verwijderen. Alleen
* daar: wordt rood overal gebruikt, dan zegt het niets meer op de plek waar het telt.
*/
.knop-gevaarlijk {
background: var(--color-bg-surface);
color: var(--color-status-error-text);
border-color: var(--color-status-error-solid);
}
.knop-gevaarlijk:hover {
background: var(--color-status-error-bg);
filter: none;
}
/* Vorige/volgende onder een lijst die niet in één scherm past. */
.paginering {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
font-size: 14px;
color: var(--color-text-muted);
}
.paginering a,
.paginering span.uit {
padding: 6px 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
}
.paginering span.uit {
border-color: var(--color-border-default);
color: var(--color-text-muted);
opacity: 0.5;
}
/* De twee knoppen staan naast elkaar rechts, de standregel links; zie Paginering.tsx. */
.paginering-knoppen {
display: flex;
gap: 8px;
}
/* --- Zoeklijstbalk boven een zoeklijst ------------------------------------------------------
*
* Eén regel met het zoekveld, een knop "Filters" en de telling, uit VacatureKaarten.tsx. De
* keuzelijsten zelf staan in een venster over de lijst en niet uitgeklapt op de pagina: bij
* tientallen branches en regio's is dat een blok van honderden pixels dat je elke keer voorbij
* scrolt.
*/
.zoeklijstbalk {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-bottom: 24px;
}
.zoeklijstbalk-veld {
flex: 1 1 240px;
min-width: 240px;
padding: 8px 10px;
font-size: 16px;
/* Een invoerveld rekent zonder dit met de eigen regelhoogte van de browser en wordt 37 hoog
waar het daar 42 is; Tailwind zet `line-height: 1.5` op alles. */
line-height: 1.5;
color: var(--color-text-primary);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
}
.zoeklijstbalk-veld:focus {
border-color: var(--color-brand-accent);
}
.zoeklijstbalk-telling {
margin: 0;
font-size: 16px;
color: var(--color-text-secondary);
}
.zoeklijstbalk-telling strong {
color: var(--color-text-primary);
}
/* Een knop zonder vlak of rand: "Wis filters" naast de telling. */
.tekstknop {
padding: 0;
border: none;
background: none;
font-size: 16px;
font-weight: 600;
color: var(--color-brand-accent-text);
text-decoration: none;
cursor: pointer;
}
.tekstknop:hover {
text-decoration: underline;
}
.filtervenster-knop {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
.filtervenster-knop:hover {
background: var(--color-field-bg);
}
/* Donkerblauw en niet de olijfkleur die `.teller` elders heeft: `bg-navy` daar. */
.filtervenster-knop .teller {
background: var(--color-brand-navy);
}
/* Het paneel ligt als venster over het scherm, zoals Modal.tsx, en niet als lijstje onder de
knop: het is een keuze die je maakt en dan afsluit, niet een menu. */
.filtervenster[open] .filtervenster-paneel {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow: auto;
background: rgb(15 23 42 / 45%);
}
.filtervenster-kaart {
width: 640px;
max-width: 92vw;
max-height: 86vh;
overflow: auto;
padding: 20px;
background: var(--color-bg-surface);
border-radius: var(--radius-card);
box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
}
.filtervenster-kop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.filtervenster-kop > h2 {
margin: 0;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-brand-navy);
}
.filtervenster-sluit {
padding: 0;
border: none;
background: none;
font-size: 20px;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
}
/* Eén kolom op een telefoon, twee vanaf 640px: `grid-cols-1 sm:grid-cols-2` in VacatureKaarten.tsx. */
.filtervenster-groepen {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
@media (min-width: 640px) {
.filtervenster-groepen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.filtervenster-groep {
min-width: 0;
margin: 0;
padding: 0;
border: none;
}
.filtervenster-groep > legend {
margin-bottom: 8px;
padding: 0;
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
}
.filtervenster-groep-lijst {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 14rem;
overflow-y: auto;
}
.filtervenster-groep-lijst label {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
color: var(--color-text-secondary);
cursor: pointer;
}
.filtervenster-groep-lijst input {
width: 16px;
height: 16px;
accent-color: var(--color-brand-navy);
cursor: pointer;
}
.filtervenster-voet {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border-default);
}
/* Een cel die niet mag afbreken: "36-40 uur" op twee regels maakt de rij anderhalf keer zo hoog. */
.niet-afbreken {
white-space: nowrap;
}
/* Een toelichting achter een tekst, kleiner en grijs: "(altijd aan)" achter een meldingstype. */
.terzijde {
margin-left: 6px;
font-size: 14px;
color: var(--color-text-muted);
}
/*
* Een rij keuzeblokken: een lijst met links waar elke regel een kop en een toelichting heeft.
*
* Voor een scherm dat vraagt "wat wil je doen" voordat het een formulier toont. Zonder de
* toelichting eronder is zo'n keuze een gok, en dan kiest iedereen de bovenste.
*/
.keuzeblokken {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.keuzeblok {
display: block;
padding: 14px 16px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-bg-surface);
color: var(--color-text-primary);
font-weight: 600;
text-decoration: none;
}
.keuzeblok:hover {
border-color: var(--color-brand-accent);
}
.keuzeblok span {
display: block;
margin-top: 2px;
color: var(--color-text-muted);
font-weight: 400;
font-size: 14px;
}
/* --- Zoekresultaten ----------------------------------------------------------------------
*
* Een regel per treffer met de naam vet en de context erachter, zoals in de Node-versie. Geen
* tabel: de vijf categorieen hebben niet dezelfde kolommen.
*/
.zoek-totaal {
margin: 0 0 16px;
color: var(--color-text-muted);
}
.zoek-totaal strong {
color: var(--color-text-primary);
}
.zoekresultaten {
display: flex;
flex-direction: column;
gap: 2px;
}
.zoekresultaten a {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
padding: 6px 8px;
border-radius: var(--radius-control);
color: var(--color-text-primary);
text-decoration: none;
}
.zoekresultaten a:hover {
background: var(--color-field-bg);
}
.zoekresultaten span {
font-size: 14px;
color: var(--color-text-muted);
}
/* Het sterretje bij een verplicht veld, zoals src/components/ui/Field.tsx. */
.verplicht {
margin-left: 2px;
color: var(--red-ink);
}
/*
* Tekst die alleen een schermlezer voorleest. Het sterretje zegt met een teken wat deze zin met
* woorden zegt; wie het scherm niet ziet heeft aan een sterretje niets.
*/
.alleen-schermlezer {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
* Het verborgen bestandsveld in een dropzone staat in een .veld, en die geeft elk invoerveld
* width: 100%. Dat won van de regel hierboven: het onzichtbare veld bleef 1400 px breed, stak aan
* de rechterkant van de pagina uit en gaf een horizontale schuifbalk op /kandidaten/nieuw,
* /kandidaten/importeren en elk ander scherm met een dropzone. Dezelfde specificiteit, verderop in
* het bestand, en dus wint deze.
*/
.veld input.alleen-schermlezer,
.veld select.alleen-schermlezer,
.veld textarea.alleen-schermlezer {
width: 1px;
padding: 0;
border: 0;
}
/*
* Een knop die alleen een pictogram toont, zoals de acties in een rij van de contactpersonentabel.
* Vierkant en klein: in een tabelrij maakt een knop met tekst de rij twee keer zo hoog, en dan
* leest de tabel niet meer als een lijst.
*/
.pictogramknop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
color: var(--color-text-muted);
cursor: pointer;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-strong);
border-radius: 4px;
}
.pictogramknop:hover {
color: var(--color-text-primary);
}
/* De tandwielknop boven de meldingen vult zich in plaats van donkerder te worden:
`text-ink-2 hover:bg-field-bg` in MeldingenOverzicht.tsx, waar de prullenbakjes in formulieren
`text-ink-3 hover:text-ink` hebben. De letterkleur blijft dus staan bij het aanwijzen. */
.pictogramknop-vlak {
color: var(--color-text-secondary);
}
.pictogramknop-vlak:hover {
color: var(--color-text-secondary);
background: var(--color-field-bg);
}
/* De knoppen onder een formulier staan rechts, zoals in de Next.js-versie. */
.knoppenrij-rechts {
justify-content: flex-end;
}
/*
* De invoervelden binnen een tabelrij, zoals de contactpersonen bij een werkgever. Dezelfde hoogte
* en dezelfde rand als een gewoon veld: een tabel met kleinere velden leest als een ander soort
* formulier dan de rest van het scherm.
*/
.tabel td > input {
width: 100%;
padding: 9px 10px;
font-size: 16px;
color: var(--color-text-primary);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-strong);
border-radius: 6px;
}
.tabel td > input:focus {
border-color: var(--color-brand-accent);
}
/* --- Herhaalbare rijen (werkervaring, opleidingen, certificaten) --------------------------- */
.herhaalrijen {
display: flex;
flex-direction: column;
gap: 10px;
}
/*
* Eén regel per baan of opleiding, met de velden naast elkaar. Onder de 900 pixels komen ze onder
* elkaar: vijf velden naast elkaar op een telefoon geeft vijf kolommen van niks.
*/
.herhaalrij {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.herhaalrij > input,
.herhaalrij > select {
flex: 1 1 8rem;
min-width: 0;
}
/* Een veld dat een hele regel voor zich krijgt, zoals de taken bij een baan: daar hoort een paar
zinnen in, en naast een periode van negen tekens wordt dat een spleet. */
.herhaalrij [data-breed] {
flex-basis: 100%;
}
/* Een veld dat op dezelfde regel blijft maar ruimer is dan de rest. */
.herhaalrij [data-ruim] {
flex: 3 1 14rem;
}
.herhaalrij > button {
flex: 0 0 auto;
}
@media (max-width: 700px) {
.herhaalrij > input,
.herhaalrij > select,
.herhaalrij [data-ruim] {
flex-basis: 100%;
}
}
/* Een vinkje met zijn tekst ernaast, uitgelijnd op de eerste regel. */
.vinkje {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 12px;
font-size: 16px;
}
.vinkje input {
margin-top: 3px;
}
/* --- Aankruisvakjes met een "anders"-regel ------------------------------------------------- */
.meerkeuze {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}
.meerkeuze-opties {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.meerkeuze-optie {
display: flex;
gap: 6px;
align-items: center;
font-size: 16px;
}
/* Een veld dat niet de volle breedte hoeft: een code, een postcode, een bedrag. */
.veld-smal {
max-width: 16rem;
}
/* Een veld dat over beide kolommen loopt: een tekstvak. */
.veldenraster .veld-breed {
grid-column: 1 / -1;
}
/* --- Een kaart die in zijn geheel klikbaar is --------------------------------------------- */
/*
* De link bedekt de kaart en toont zelf niets. Alles wat erin een eigen handeling heeft (knoppen,
* badges met een link) komt erboven te liggen, anders vangt de bedekkende link die klik weg.
*/
.kaart-klikbaar {
position: relative;
}
.kaartlink {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
}
/*
* Alleen de voetregel komt boven de bedekkende link, want daar staat de knop met een eigen
* bestemming. De rest blijft eronder liggen, zodat een klik op de titel, de kenmerken of de lege
* ruimte de kaart opent. Dat is de fout die dit blok eerder maakte: het tilde elk kind op, en dan
* is alleen de rand van de kaart nog klikbaar. `relative z-10` staat in VacatureKaarten.tsx en
* kandidaten/page.tsx dan ook uitsluitend op die voetregel.
*/
.kaart-klikbaar > .vacaturekaart-voet {
position: relative;
z-index: 1;
}
.kaart-klikbaar:hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}
.kaart-klikbaar:hover .vacaturekaart-kop > h2 {
text-decoration: underline;
}
/*
* Een klikbare kaart hoort er ook uit te zien alsof je erop kunt klikken. De bedekkende link is een
* leeg element, dus zonder dit staat de muisaanwijzer op een pijl boven alles wat geen tekst is.
*/
.kaart-klikbaar {
cursor: pointer;
}
/* --- Wachtwoordveld met een oogje ---------------------------------------------------------- */
.wachtwoordveld {
position: relative;
}
.wachtwoordveld > input {
/* Ruimte voor het oogje, zodat de tekst er niet onder doorloopt. */
padding-right: 38px;
}
.wachtwoordoog {
position: absolute;
top: 50%;
right: 10px;
display: flex;
padding: 0;
color: var(--color-text-muted);
cursor: pointer;
background: none;
border: 0;
transform: translateY(-50%);
}
.wachtwoordoog:hover {
color: var(--color-text-primary);
}
/* --- Uitklappaneel in de kopbalk (meldingen, aanmeldingen) --------------------------------- */
.uitklap {
position: relative;
}
/* Het standaard driehoekje weg: de bel is zelf al de aanwijzing dat er iets opengaat. */
.uitklap > summary {
list-style: none;
cursor: pointer;
}
.uitklap > summary::-webkit-details-marker {
display: none;
}
.uitklap-paneel {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 30;
width: 20rem;
padding: 8px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: 6px;
box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
}
/*
* Onder de 640 pixels hangt het paneel aan het scherm en niet aan de bel: met een vaste breedte
* uitgelijnd op de rechterrand schuift de linkerkant buiten beeld zodra er rechts nog knoppen staan.
*/
@media (max-width: 640px) {
.uitklap-paneel {
position: fixed;
top: 76px;
right: 12px;
left: 12px;
width: auto;
}
}
/* --- De regel met kenmerken en handelingen boven een detailscherm --------------------------- */
/*
De kenmerken links, de knoppen rechts, allebei afbrekend op een smal scherm. Boven de kaarten en
niet erin: de titel staat al in de kopbalk, en hem in de kaart herhalen zette hem twee keer op het
scherm.
*/
.paginakop {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
/* 24 en niet 20: PageShell.tsx zet `gap-6` tussen alle blokken van een scherm, dus ook tussen
deze kop en de eerste kaart eronder. */
margin-bottom: 24px;
}
.paginakop-kenmerken {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin: 0;
font-size: 14px;
color: var(--color-text-muted);
}
.paginakop-acties {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
/* Een tweede raster in dezelfde kaart, met een streep ertussen. */
.kaart-vervolg {
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--color-border-default);
}
/* Een kopje binnen een kaart, onder de kaarttitel: `text-[16px] font-semibold text-navy`. Zonder
deze regel valt een
terug op de browserstandaard en staat hij groter dan de kaarttitel. */
.kaart-subkop {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--color-brand-navy);
}
/* Twee kaarten naast elkaar vanaf 1024px, met de tweede plek leeg als er maar één is:
`grid gap-5 lg:grid-cols-2 lg:items-stretch` uit ProfielForm.tsx. Niet auto-fit zoals
.kolommen: daarmee rekt één kaart tot de volle breedte uit. */
.kaartenpaar {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 20px;
margin-bottom: 20px;
}
@media (min-width: 1024px) {
.kaartenpaar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.kaartenpaar > .kaart {
height: 100%;
margin-bottom: 0;
}
/* De knoppen onder een formulier: een streep erboven en rechts uitgelijnd, zonder kaart eromheen. */
.formulierbalk {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--color-border-default);
}
/* Onder de 640 pixels onder elkaar en over de volle breedte: `flex-col ... sm:flex-row` met
`!w-full sm:!w-auto` op de knoppen in ProfielForm.tsx. Rechts uitgelijnd blijven ze op een
telefoon twee smalle knopjes in de rechterhoek, met de helft van de regel ernaast leeg. */
@media (max-width: 639px) {
.formulierbalk {
flex-direction: column;
align-items: stretch;
}
.formulierbalk > .knop {
width: 100%;
}
}
/* Een knop met ronde uiteinden, voor de afsluitende knoppen onder een formulier (`rounded-full`). */
.knop-pil {
border-radius: 999px;
justify-content: center;
white-space: nowrap;
}
/* --- Een knop die als een link in de tekst staat -------------------------------------------- */
/*
* Een handeling die bij een zin hoort en geen eigen rij verdient, zoals "Verwijderen" achter "Er
* staat al een logo ingesteld". Het moet een